@font-face {
    font-family: 'Transforma Sans';
    src: url('../assets/fonts/Transforma/TransformaSans-Regular.woff2') format('woff2'),
        url('../assets/fonts/Transforma/TransformaSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Transforma Script';
    src: url('../assets/fonts/Transforma/TransformaScript-SemiBold.woff2') format('woff2'),
        url('../assets/fonts/Transforma/TransformaScript-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Transforma Sans';
    src: url('../assets/fonts/Transforma/TransformaSans-Bold.woff2') format('woff2'),
        url('../assets/fonts/Transforma/TransformaSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Transforma Sans';
    src: url('../assets/fonts/Transforma/TransformaSans-SemiBold.woff2') format('woff2'),
        url('../assets/fonts/Transforma/TransformaSans-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
html {
  scroll-behavior: smooth;
}
:root {
	--textcolour: #0A4A64;
	--coral: #FF4C40;
	--pink: #F9A0B8;
	--steel: #6B9DAF;
	--slate: #0A4A64;
	--teal: #08ACA3;
}
body {
	font-family: Transforma Sans;
	font-weight: 400;
}
/* General Styles */
.container {
	width: 100%;
	max-width: 1400px;
	padding: 0 20px;
	margin: 0 auto;
}
.Button, #searchsubmit {
	background-color: var(--slate);
	padding: 11px 22px 6px 22px;
	color: #fff;
	font-weight: 600;
	display: inline-block;
	line-height: 1.2em;
	border-radius: 50px;
	font-size: 0.875rem; /* 14px → rem */
}
.Button:hover, #searchsubmit:hover{
	background-color: var(--teal);
	color: #fff;
}
/* End General Styles */
/* Font Style */
h1, h2, h3, h4, h5, h6{
	font-family: Transforma Sans;
	color: var(--textcolour);
	margin-bottom: 20px;
	font-weight: 600;
	font-size: 2rem; /* 32px → rem */
}
p, li, a, td, th, #s {
	font-size: 1rem;
	font-weight: 400;
	color: var(--textcolour);
	line-height: 1.6rem;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
}
img {
	max-width: 100%;
	height: auto;
}
p, ul, ol, table{
	margin-bottom: 20px;
}
p:last-child{
	margin-bottom: 0;
}
blockquote{
	margin-bottom: 20px;
}
blockquote p {
	font-weight: 600;
	font-size: 120%;
	line-height: 1.4em;
}
ul, ol {
	padding-left: 20px;
	margin-top: -10px;
}
ul{
	list-style-type: disc;
}
ol{
	list-style-type: decimal;
}
ul ul, ol ol, ul ol, ol ul{
	margin-bottom: 0;
	margin-top: 0;
}
table{
	width: 100%;
}
table th {
	background-color: var(--coral);
	color: #fff;
	font-weight: 600;
	text-align: left;
}
table th, table td{
	padding: 5px;
	border: 1px solid #999;
}
table tr:nth-child(2n){
	background-color: #eee;
}
a, i, #searchsubmit{
	transition: all .5s ease-in-out;
}
a{
	color: var(--coral);
	text-decoration: none;
}
a:hover{
	color: var(--steel);
}
.font-xsmall{font-size: .7rem;}
.font-ssmall{font-size: .8rem;}
.font-medium, .font-regular{font-size: 1rem;}
.font-large{font-size: 1.875rem;}
.font-xlarge{font-size: 2.5rem;}
.font-blockquote{font-size: 120%;}

.font-h1 { font-size: 4.375rem; font-weight: 600; line-height: unset; }
.font-h2 { font-size: 3.75rem; font-weight: 600; line-height: unset; } 
.font-h3 { font-size: 3.125rem; font-weight: 600; line-height: unset; }
.font-h4 { font-size: 2.5rem; font-weight: 600; line-height: unset; }  
.font-h5 {
	font-size: 1.875rem;
	font-weight: 600;
	line-height: 2.7rem;
}
.font-h6 { font-size: 1.25rem; font-weight: 600; line-height: unset; }

.font-weight-light{font-weight: 300 }
.font-weight-normal{font-weight: 400 }
.font-weight-semi{font-weight: 600 }
.font-weight-bold{font-weight: 700 }

.font-script{font-family: 'Transforma Script'; }

.font-coral{color: var(--coral); }
.font-pink{color: var(--pink); }
.font-steel{color: var(--steel); }
.font-slate{color: var(--slate); }
.font-teal{color: var(--teal); }
.font-white{color: #fff; }



.bg-coral{background-color: var(--coral); }
.bg-pink{background-color: var(--pink); }
.bg-steel{background-color: var(--steel); }
.bg-slate{background-color: var(--slate); }
.bg-teal{background-color: var(--teal); }
/* End Font Style */
.nopadding, .nopadding > .vc_column-inner{
	padding: 0 !important;
}
/* Search */
#searchform {
	margin-bottom: 20px;
}
#searchform #s {
	border: 1px solid #333;
}
#searchsubmit {
	border: 0;
	font-size: 1rem;
	line-height: 1.6em;
	cursor: pointer;
	padding: 3px 22px;
	font-family: Transforma Sans;
}
/* End of Search */
#ContentWrap {
	padding: 50px 0;
}
/* Archive */
.archive-loop {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 30px;
}
.ArticleImgWrap {
	display: block;
	width: 100%;
	height: 225px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
.navigation.pagination {
	background-color: unset;
	text-align: center;
	margin-top: 30px;
	padding: 0;
}
.page-numbers {
	background-color: #55acee;
	padding: 4px;
	color: #fff;
}
a.page-numbers:hover, .page-numbers.current{
	background-color: #000;
	color: #fff;
}
.WhiteText p, .WhiteText li, .WhiteText h1, .WhiteText h2, .WhiteText h3, .WhiteText h4, .WhiteText h5, .WhiteText h6, .WhiteText a, p.WhiteText, h1.WhiteText, h2.WhiteText, h3.WhiteText, h4.WhiteText, h5.WhiteText, h6.WhiteText, a.WhiteText, .font-white p, .font-white li, .font-white h1, .font-white h2, .font-white h3, .font-white h4, .font-white h5, .font-white h6, .font-white a, p.font-white, h1.font-white, h2.WhiteText, h3.font-white, h4.font-white, h5.font-white, h6.font-white, a.font-white{
	color: #fff;
}
.BG-Coral{background-color: var(--coral);}
.BG-Pink{background-color: var(--pink);}
.BG-Steel{background-color: var(--steel);}
.BG-Slate{background-color: var(--slate);}
.BG-Teal{background-color: var(--teal);}
.BorderRadius{
	border-radius: 10px;
}
.ColumnShadow .vc_column-inner {
	box-shadow: 0px 0px 20px rgba(0,0,0,.3);
}
.TwoColumn{
	display: grid;
}
.TwoColumn{
	grid-template-columns: repeat(2,1fr);
}
.GeneralPadding{
	padding-left: 50px;
	padding-right: 50px;
}
.GeneralMarginB {
	margin-bottom: 150px;
}
a.WhiteButton {
	background-color: #fff;
	color: var(--slate);
}
a.CoralButton {
	background-color: var(--coral);
	color: #fff;
}
.AfterButton{
	position: relative;
}
.AfterButton::after {
    content: "";
    display: block;
    height: 100%;
    aspect-ratio: 1 / 1;
    position: absolute;
    right: -40px;
    top: 0;
    border-radius: 50%;
	transition: all .5s ease-in-out;
}
.AfterButton::after {
  background: center / 60% no-repeat
    var(--after-button-bg)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path fill='%23fff' d='M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z'/></svg>");
}

.Coral-AfterButton { --after-button-bg: var(--coral); }
.Pink-AfterButton { --after-button-bg: var(--pink); }
.Steel-AfterButton { --after-button-bg: var(--steel); }
.Slate-AfterButton { --after-button-bg: var(--slate); }
.Teal-AfterButton { --after-button-bg: var(--teal); }

.AfterButton:hover:after{
	background-color: var(--teal);
}
.AfterButton.Teal-AfterButton:hover:after{
	background-color: var(--coral);
}

/* Device = Laptops, Desktops */
@media (max-width: 1400px) {
/*
  body {
    padding: 0 20px;
  }
*/
}

@media (min-width: 1025px) and (max-width: 1280px) {

}

/* Device = Tablets, Ipads (portrait) */
@media (min-width: 768px) and (max-width: 1024px) {
   .archive-loop {
		grid-template-columns: repeat(2,1fr);
	}
}

/* Device = Tablets, Ipads (landscape) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
	.archive-loop {
		grid-template-columns: repeat(2,1fr);
	}
}

/* Device = Low Resolution Tablets, Mobiles (Landscape) */
@media (min-width: 481px) and (max-width: 767px) {
	.archive-loop {
		grid-template-columns: repeat(1,1fr);
	}
}

/* Device = Most of the Smartphones Mobiles (Portrait) */
@media (min-width: 320px) and (max-width: 480px) {
	.archive-loop {
		grid-template-columns: repeat(1,1fr);
	}
}