/* Global Variables */
:root {
  /* Colors */
  --primary-color: #00a3c4;
  --primary-color-dark: #00777f;
  --secondary-color-1: #ff6a00;
  --secondary-color-2: #ff3300;
  --secondary-color-3: #2d0047;
  --extended-color-1: #bfefff;
  --extended-color-2: #d9c2ff;
  --extended-color-3: #ffb6c1;
  --extended-color-4: #00423f;

  --pb-dark-green:#0D6168;
  --pb-light-green:#4494AB;
  --pb-superdark-green:#002E23;
  --pb-light-background:#E3EEEB;
  --pb-sand-background:#F7F5EF;

  /* Fonts */
  --font-header: 'PT Sans', sans-serif;
 

  /* Font Sizes */

  --font-size-header-1: calc((56 / 16) * 1rem);
  --font-size-header-2: calc((32 / 16) * 1rem);
  --font-size-header-3: calc((24 / 16) * 1rem);
  --font-size-body-1: calc((18 / 16) * 1rem);
  --font-size-body-2: calc((20 / 16) * 1rem);
  --font-size-body-3: calc((18 / 16) * 1rem);
  --font-size-body-4: calc((16 / 16) * 1rem);
  --font-size-body-5: calc((14 / 16) * 1rem);
  --font-size-body-6: calc((12 / 16) * 1rem);



  /* Spacing */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;

  /* Additional Spacing */
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-xxl: 64px;
}


/* Mobile-first approach */
@media (max-width: 768px) {
  :root {
    --font-size-header-1: calc((50 / 16) * 1rem); /* Smaller header size */
    --font-size-header-2: calc((42 / 16) * 1rem);
    --font-size-header-3: calc((30 / 16) * 1rem);
    --font-size-body-1: calc((22 / 16) * 1rem);
    --font-size-body-2: calc((18 / 16) * 1rem);
    --font-size-body-3: calc((16 / 16) * 1rem);
    --font-size-body-4: calc((14 / 16) * 1rem);
    --font-size-body-5: calc((12 / 16) * 1rem);
    --font-size-body-6: calc((10 / 16) * 1rem);
  }
}

/* Tablet and larger screens */
@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    --font-size-header-1: calc((55 / 16) * 1rem);
    --font-size-header-2: calc((46 / 16) * 1rem);
    --font-size-header-3: calc((32 / 16) * 1rem);
    --font-size-body-1: calc((23 / 16) * 1rem);
    --font-size-body-2: calc((19 / 16) * 1rem);
    --font-size-body-3: calc((17 / 16) * 1rem);
    --font-size-body-4: calc((15 / 16) * 1rem);
    --font-size-body-5: calc((13 / 16) * 1rem);
    --font-size-body-6: calc((11 / 16) * 1rem);
  }
}


.post, .page {
  margin: 0!important;
}


.col-g-space-64{
  padding-top: var(--spacing-xxl)!important;
}

.col-g-space-64-bottom{
  padding-bottom: var(--spacing-xl)!important;
}

.col-64-margin-bottom{
  margin-bottom: var(--spacing-xl)!important;
}

.group-padding-bottom-100{
  padding-bottom: 100px!important;
}

.green-line {
  border-top: 1px solid #d2dfdc;
}

.line{
  border: 1px solid #000;
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: var(--font-size-body-3);
  -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', sans-serif !important;
  line-height: 1.6;
  margin: var(--space-0);
  padding: var(--space-0);
  font-size: 100%;
  overflow-x: hidden;
  font-display: swap; /* Use the font immediately while it loads */
}


.page-content, .entry-content, .entry-summary {
  margin: 0px!important;
}


h1, h2, h3, h4, h5, h6 {
  font-family: 'PT Sans', sans-serif !important;
}


/* Typography */
h1, h2, h3, h4 {
  font-family: var(--font-header);
  font-weight: 700;
}

h1 {
  font-size: var(--font-size-header-2);
  line-height: calc(70 / 60);
}

h2 {
  font-size: var(--font-size-header-2);
  line-height: calc(56 / 48);
  margin-bottom:var(--space-4);
}

h3 {
  font-size: var(--font-size-header-3);
  line-height: calc(40 / 34);
  margin-bottom: var(--space-7);
}

h4{
	font-size: var(--font-size-body-1);

}

p, span, li, a {
  font-family: var(--font-body);
  font-weight: 400;
}

p{
  line-height: 31px;
  font-weight: 400;
  color:#404040;
  font-size: var(--font-size-body-4);
}


/* Light Background */
.light-background a {
  color: var(--primary-color);
}
.light-background a:hover {
  color: var(--primary-color-dark);
  text-decoration: underline;
}

/* Dark Background */
.dark-background a {
  color: var(--extended-color-1);
}
.dark-background a:hover {
  color: var(--extended-color-2);
  text-decoration: underline;
}

.title-support{
  color:var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  margin-bottom: 5px;
  font-size: 14px;
}


/* General Link State */
a:visited {
  color: inherit; /* Matches the default color */
}
a:focus {
  outline: 2px dashed var(--primary-color);
  outline-offset: 2px;
}


ul, ol {
    list-style: none; /* Removes default bullets/numbers */
    font-size: var(--font-size-body-3);
    margin: 0;
    padding: 0;
}
li {
    margin-bottom: 1rem; /* Adds spacing between items */
}


ul {
    list-style: none;
}




.cust-list li::before{
    content: "•"; /* Unicode character for bullet */
    color: var(--primary-color);
    font-size: 1.2rem;
    margin-right: 0.5rem;
    transition: color 0.3s ease; /* Smooth transition for hover */
}

.cust-list li:hover::before{
	content: "•"; /* Unicode character for bullet */
    color: #fff;
}

.cust-list li{
    display: flex;
    align-items: center;
}
.cust-list li::before{
    content: "•";
    margin-right: 0.5rem;
}

figure.wp-block-image.size-full.full-img {
    margin: 0;
    padding: 0;
}


.rounded-image img{
  border-radius: 15px;
}

.rounded-box{
  border-radius: 15px;
}

/* Buttons */


.wp-block-button__link.wp-element-button {

}



.button, .wp-block-button__link {
  display: inline-block;
  font-size: var(--font-size-body-4);
  font-weight: 700;
  text-align: center;
  border-radius: var(--space-1);
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Remove WordPress default button styles */
.wp-block-button__link {
  text-decoration: none;
  font-weight: 500;
  background: none;
  border: none;
}

.wp-block-button__link strong {
  font-weight: 500;
}

.button a{
  text-decoration: none;
  font-weight: 500;
}

.button-primary, .wp-block-button__link.button-primary {
  background-color: var(--pb-superdark-green);
  color: #fff;
  border: none;
  border-radius: var(--space-1);
  transition: all 0.3s ease;
}

.button-primary-outline{
  border:2px solid var(--pb-superdark-green);
  color: var(--pb-superdark-green);
  border-radius: var(--space-1);
  transition: all 0.3s ease;
  max-height: 57.6px;
}

.button-primary-outline a{
color: var(--pb-superdark-green);
}

.button-primary-outline:hover{
  background-color: var(--pb-superdark-green);
}

.button-primary-outline a:hover{
  color:#fff;
}

.wp-block-button__link.button-primary{
  border-radius: var(--space-1);
}

.button-primary:hover {
  background-color: var(--primary-color-dark);
  color:#fff;
}

.button-primary a:hover, .button-secondary a:hover{
  color:#fff;
}

.button-secondary, .wp-block-button__link.button-primary {
  background-color: var(--secondary-color-1);
  color: #fff;
  border: none;
  border-radius: var(--space-1);
  transition: all 0.3s ease;
}


.header-right .button-secondary, .the-content .button-secondary{
  padding: 10px 20px;
} 

.button-secondary:hover {
  background-color: var(--secondary-color-2);
}

.button-outline {
  background-color: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  transition: all 0.3s ease;
}

.button-outline:hover {
  background-color: var(--primary-color);
  color: #fff;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(48 / 16)rem;
  height: calc(48 / 16)rem;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: #fff;
  font-size: var(--font-size-body-3);
  transition: all 0.3s ease;
}

.icon-button:hover {
  background-color: var(--primary-color-dark);
}

.plain-link a{
  text-decoration: none;
color: #164147;
gap: 13px;
border-radius: var(--space-1);
display: inline-flex;
border: 1px solid #ff6a00;
padding: 10px 0 10px 10px;
font-weight: 600;
transition: all 0.3s ease;
align-items: center;
}

.plain-link a:after{
  content: url('../img/icons/arrow-icon-small-grn.svg'); 
    display: inline-block;
    width: 24px;
    height: 20px;
    margin-right: 10px;
    display: inherit;
}

.plain-link a:hover {
  background: #FC6900;
  color:#fff;
}


button,
input[type="submit"],
input[type="button"],
.wp-block-button__link {
  @extend .button; /* If using SCSS */
}



@media (max-width: 768px) {
  .button {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-body-5);
  font-weight: 700;
  text-align: center;
  border-radius: var(--space-1);
  cursor: pointer;
  transition: all 0.3s ease;
  }
}



/* Apply styles only when the 'feature-list' class is used */
.wp-block-list.is-style-feature-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: left;
    margin-top:var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    list-style: none;
    padding: 0;
}

/* Style individual list items */
.wp-block-list.is-style-feature-list li {
    display: flex;
    align-items: center;
    padding: 0.8rem 1.5rem;
    border: 2px solid var(--primary-color, #007E80);
    border-radius: 5px;
    background-color: transparent;
    color: #000;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
    max-width: 100%;
    text-align: left;
}

.wp-block-list.is-style-feature-list li a{
  text-decoration: none;
  font-weight: 600;
}



/* Icon inside list items */
.wp-block-list.is-style-feature-list li::before {
    content: url('../img/icons/checkmark.svg'); 
    margin-right: 0.5rem;
    font-size: 1.2rem;
    width: 20px;
    height: 20px;
    color: var(--primary-color, #007E80);
    margin-top: -5px;
}

/* Media query for responsiveness */
@media (max-width: 768px) {
    .wp-block-list.is-style-feature-list li {
        font-size: 0.9rem;
        padding: 0.4rem 1rem;
    }
}


.normal-weight li {
  font-weight: 400 !important;
}


.wp-block-list.is-style-default.default-list li {
  background: #fff;
  padding: 30px 25px;
  font-weight: 500;
  border-radius: 5px;
  border: 2px solid #4494ab;
  font-size: 20px;
color: #000;
}


.wp-block-list.is-style-default.default-list li em{
  font-size: 14px;
font-weight: 600;
color: #ff6a00;
}


.wp-block-list.is-style-default.default-list li::before{
  content: url('../img/icons/arrow-icon-small-light-grn.svg'); 
    margin-right: 0.5rem;
    font-size: 1.2rem;
    width: 30px;
    height: 30px;
    color: var(--primary-color, #007E80);
    margin-top: -5px;
}




/* Layout */
.container, .menu-top-section-menu-container {
  display: flex;
	justify-content: space-between;
  max-width: 1300px;
  margin: 0 auto;
}

.menu-top-section-menu-container{
	justify-content: end;
}

.wp-block-image {
  margin-bottom: var(--spacing-md);
  text-align: center;
}

/* Utility Classes */
.margin-sm {
  margin-bottom: var(--spacing-sm);
}

.margin-md {
  margin-bottom: var(--spacing-md);
}

.margin-lg {
  margin-bottom: var(--spacing-lg);
}


/* General Row Styles */
.row {
  display: flex;
  flex-wrap: wrap; /* Allows columns to wrap if they exceed the row width */
  gap: var(--spacing-md); /* Optional spacing between columns */
}

[class*="column-"] {
  grid-column: span 1; /* Default column span */
}


/* Define column spans */
.column-1 {
  grid-column: span 1;
}

.column-2 {
  grid-column: span 2;
}

.column-3 {
  grid-column: span 3;
}

.column-4 {
  grid-column: span 4;
}

.column-5 {
  grid-column: span 5;
}

.column-6 {
  grid-column: span 6;
}

.column-7 {
  grid-column: span 7;
}

.column-8 {
  grid-column: span 8;
}

.column-9 {
  grid-column: span 9;
}

.column-10 {
  grid-column: span 10;
}

.column-11 {
  grid-column: span 11;
}

.column-12 {
  grid-column: span 12;
}



.remove-space-group{
  margin-top: 0!important;
  padding-top:0!important;
}

.group-padding-bottom{
  padding-bottom: 15px!important;
}


.no-margin-bottom{
  margin-bottom: 0!important;
}






/* Responsive Columns */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr; /* Make all columns stack vertically */
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
}



/* Responsive Design */
@media (max-width: 768px) {
  

  h1 {
    font-size: var(--font-size-header-2);
  }

  h2 {
    font-size: var(--font-size-header-3);
  }

  .wp-block-group {
    padding: var(--spacing-md);
  }

  .wp-block-columns {
    grid-template-columns: 1fr; /* Stack columns on small screens */
  }

  .wp-block-image {
    margin-bottom: var(--spacing-md);
  }

  .padding-mobile, .custom-grid{
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);
  }

  .wp-block-column.col-md.custom-box.is-layout-flow.wp-block-column.col-md-is-layout-flow {
    margin-bottom: 0;
  }


}




.hidden {
    display: none; /* Hide the extra posts */
}

.load-more-btn {
    display: block;
    margin: 30px auto;
    padding: 10px 20px;
    background: #007E80;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

.load-more-btn:hover {
    background: #004854;
}

h3.wp-block-heading.has-text-align-center.has-black-color.has-text-color.has-link-color{
  max-width: 800px;
  margin: 0 auto;
}



.wp_swiper__navigation-container {
  display: flex;
 
  height: 50px;
	margin-top: 15px;
padding-top: 30px;
}

.wp-swiper__overlay-color{
	border-radius: 25px;
}


.wp_swiper__navigation-container .swiper-button-prev, .wp_swiper__navigation-container .swiper-button-next {
  position: inherit!important;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
}

.swiper-button-next {
  margin-left: 10px;
}