/*
Theme Name: Emilia
Theme URI: https://www.emilia.digital
Author: Emilia Digital
Author URI: https://www.emilia.digital
Description: Tailor made theme for ??? by Emilia Digital.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags:
Text Domain: Emilia
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

/* =========================================================
   COMPLETE STYLE GUIDE
========================================================= */

/* ---------- ROOT VARIABLES ---------- */
:root {
    /* Colors */
    --Text-Turquoise: #007E8F;
    --Text-Magenta: #C3298A;
    --Text-Blue: #0068D6;
    --text-color: #404040;
    --active-submenu-color: #404040;

}

body {
    font-weight: 400;
    font-size: 22px;
    color: var(--text-color);
    background: #fff;
    font-family: "Plus Jakarta Sans", sans-serif;
}

/* ---------- HEADINGS ---------- */

h2 {
    color: var(--text-color);
    font-weight: 700;
}

h3 {
    color: var(--text-color);
}

/*!* ---------- UTILITIES ---------- *!*/


a, a:hover, a:focus {
    /*color: inherit;*/
    text-decoration: none;
}

img.lazy {
    opacity: 0;
}

img:not(.initial) {
    transition: opacity 1s;
}

img.initial,
img.loaded,
img.error {
    opacity: 1;
}

img:not([src]) {
    visibility: hidden;
}

.lazy[data-bg-multi] {
    background-size: cover;
    background-position: center;
    background-color: transparent;
}

dl,
ol,
ul {
    margin: 0;
    padding: 0;
}

.btn,
.gform_footer input[type="submit"] {
    background: #F3884F;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
    color: #000;
    font-size: 16px;
    font-weight: 400;
    position: relative;
    transition: 0.4s ease;
    padding: 12px 42px;
    top: 0;
    border: 0;
    line-height: normal;
    border-radius: 40px;
    margin-bottom: 0 !important;
    letter-spacing: 0.88px;
    text-transform: capitalize;
}

.btn:hover,
.gform_footer input[type="submit"]:hover {
    top: -4px !important;
    color: #fff;
    background: #6B6AAD;
}

.btn:focus {
    color: #fff;
    background: #6B6AAD;
    box-shadow: none !important;
}


.text-box {
    max-width: 760px;
}

.text-box p {
    font-size: 18px;
    letter-spacing: 0.54px;
}

p:last-of-type {
    margin-bottom: 0;
}

.img-wrapper {
    position: relative;
    padding-bottom: 50%;
    overflow: hidden;
}

.img-wrapper img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: center;
}

.section-top {
    margin-top: 5rem;
}


/****************************************
 * HEADER – BASE LAYOUT
 ****************************************/
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    /*transition: 0.6s ease;*/
}

/* Logo */
header .nav-logo img {
    height: 48px;
    width: auto;
    transition: 0.4s ease;
}

/****************************************
 * PRIMARY NAV (DESKTOP)
 ****************************************/

/* Main menu list */
.nav-main .main-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 2rem;
    justify-content: end;
}

/* Reset nested ULs */
.nav-main .main-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Top-level items */
.nav-main .main-menu > li {
    position: relative;
}

/* Links */
header ul li a {
    position: relative;
    font-size: 16px;
    font-weight: 500;
    line-height: 30px;
    transition: 0.4s ease;
    color: var(--text-color);
}

/*Sub Menu Links*/
/* Target only the links inside the submenu */
.nav-main .main-menu .sub-menu li a {
    font-size: 15px;
    font-weight: 400;
}

header ul li a:focus {

}

/* Active menu item */
header ul .current-menu-item.menu-item-has-children > a {
    font-weight: 700;
    color: var(--text-color);
}

/* Hover state */
header ul li a:hover {
    color: var(--text-color);
    font-weight: 700;
}

/* 2. Target the CURRENT active child link */
.nav-main .main-menu .sub-menu li.current-menu-item > a {
    color: var(--active-submenu-color) !important;
    font-weight: 600 !important;
}

/* 3. Target the CURRENT active child link ON HOVER as well */
.nav-main .main-menu .sub-menu li.current-menu-item > a:hover {
    color: var(--active-submenu-color) !important;
}

/* 4. Optional: If you want standard hover to also take the parent color: */
.nav-main .main-menu .sub-menu li a:hover {
    color: var(--active-submenu-color) !important;
}

/****************************************
 * HEADER – SCROLLED STATE
 ****************************************/
header.scrolled {
    background-color: #fff;
    padding: 0 !important;
    box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.2);
}

/* Links in scrolled state */
header.scrolled ul li a {
    color: var(--text-color);
    font-weight: 500;
}

header.scrolled ul .current-menu-item > a {
    font-weight: 600;
}

header.scrolled ul li a:hover {
    color: var(--text-color);
    opacity: 0.8;
}


header.scrolled .toggler-icon {
    background-color: var(--text-color);
}

/****************************************
 * MOBILE NAV / HAMBURGER (IMPROVED)
 ****************************************/

.hamburger-menu {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    cursor: pointer;
    position: relative;
}

/* The 3 bars */
.toggler-icon {
    width: 26px;
    height: 2px;
    background-color: #404040;
    border-radius: 2px;
    display: block;
    transition: transform 0.35s ease, opacity 0.35s ease;
    position: absolute;
}

/* Straight, evenly spaced */
.toggler-icon.top-bar {
    top: 8px;
}

.toggler-icon.middle-bar {
    top: 15px;
}

.toggler-icon.bottom-bar {
    top: 22px;
}

/***********************************
 * ACTIVE → X animation
 ***********************************/
.hamburger-menu.active .toggler-icon.top-bar {
    transform: translateY(7px) rotate(45deg);
}

.hamburger-menu.active .toggler-icon.middle-bar {
    opacity: 0;
}

.hamburger-menu.active .toggler-icon.bottom-bar {
    transform: translateY(-7px) rotate(-45deg);
}

/****************************************
 * WORDPRESS SUB-MENU (DESKTOP)
 ****************************************/

/* Default sub-menu (dropdown) */
.nav-main .main-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: transparent;
    padding: 1rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    z-index: 20;
    top: 60px;
    /*top: 90px;*/
}

/* Ensure submenu stays visible if the JS class 'submenu-open' is present */
.nav-main .main-menu > li.submenu-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Show submenu on hover OR when JS class is active – desktop only */
@media (min-width: 992px) {
    .nav-main .main-menu > li.menu-item-has-children:hover > .sub-menu,
    .nav-main .main-menu > li.submenu-open > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}


/****************************************
 * FULL-WIDTH WHITE STRIP BEHIND SUB-MENU
 ****************************************/
/* top border of strip – light grey */
.sub-menu-background {
    position: absolute; /* was fixed */
    left: 0;
    right: 0;
    top: 100%; /* sits exactly under the header */
    height: 0;
    background: #FFF;
    border-top: 1px solid #E5E5E5;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 9;
    transition: opacity .45s ease, height .45s ease;
}


/* small dark indicator for active / hovered top-level item */
.nav-main .main-menu > li > a {
    position: relative;
    padding-bottom: 18px; /* space for indicator */
}

/* hide old full-width underline */
header ul li a::after {
    content: none;
}

/* Indicator on ALL top-level menu items */
.nav-main .main-menu > li:hover > a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -12px;
    width: 22px;
    height: 4px;
    background: #404040;
}

/* indicator line – active + hover */
/*.nav-main .main-menu > li.current-menu-item > a::after,*/
.nav-main .main-menu > li.menu-item-has-children:hover > a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -12px;
    width: 22px;
    height: 4px;
    background: #404040; /* dark grey from design */
}

/*.nav-main .main-menu > li.current-menu-ancestor > a::after{*/
/*    content: '';*/
/*    position: absolute;*/
/*    left: 0;*/
/*    bottom: -12px;*/
/*    width: 22px;*/
/*    height: 4px;*/
/*    background: #404040; !* dark grey from design *!*/
/*}*/
.nav-main .main-menu > li.current-menu-item > a {
    font-weight: 700;
}

header.scrolled {
    /*.nav-main .main-menu > li.current-menu-item > a::after,*/

    .nav-main .main-menu > li.menu-item-has-children:hover > a::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -12px;
        width: 22px;
        height: 4px;
        background: #404040; /* dark grey from design */
    }
}

/* Disable submenu hover during page load cooldown */
body.hover-disabled .nav-main .main-menu > li.menu-item-has-children:hover > .sub-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(10px) !important;
}

body.hover-disabled .nav-main .main-menu > li:hover > a::after {
    content: none !important;
}

body.hover-disabled .sub-menu-background {
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
}

@media (min-width: 1200px) {
    /* small dark indicator for active/open parent item */
    .nav-main .main-menu > li.submenu-open > a::after,
    .nav-main .main-menu > li.menu-item-has-children:hover > a::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -13px;
        width: 20px;
        height: 4.5px;
        background: #404040;
        border-radius: 0px;
    }

    header ul li {
        line-height: 24px;
        padding-bottom: 6px;
        padding-top: 6px;
    }

    /*Sub Menu Links*/
    /* Target only the links inside the submenu */
    .nav-main .main-menu .sub-menu li a {
        font-size: 15px;
        font-weight: 400;
        line-height: 24px;
        white-space: nowrap;
    }
}


/* Visible state (controlled via JS) */
.sub-menu-background.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* <--- THIS IS CRITICAL */
}


/*** RESPONSIVE HEADER – MOBILE (≤1201px) ***/
@media (max-width: 1400px) {
    .nav-main .main-menu {
        align-items: flex-start;
        gap: 1.2rem;
    }

    header ul li a {
        font-size: 17px;
    }
}


@media (max-width: 1201px) {

    /********************************
     * MOBILE HEADER / OVERLAY MENU
     ********************************/
    #menuWrapper {
        position: fixed;
        top: 67px; /* directly under header */
        left: 0;
        width: 100%;
        max-height: 0; /* hidden by default */
        overflow: hidden;
        background: #fff;
        transition: max-height 0.4s ease, padding 0.4s ease;
        z-index: 10000;
        padding: 0 1.5rem; /* horizontal padding, no top yet */
    }

    #menuWrapper.active {
        max-height: 100vh; /* dropdown expands downwards */
        padding: 24px 1.5rem 32px; /* add top/bottom padding when open */
        box-shadow: 0 25px 30px 0 rgba(0, 0, 0, 0.15);
        border-top: 1px solid #dee2e6;
    }

    .nav-main {
        transition: 0.5s ease-in-out;
    }

    header .nav-main.active {
        background-color: #fff;
    }

    /* top-level list becomes a vertical list */
    #menuWrapper ul {
        padding: 0;
        margin: 0;
        flex-direction: column;
        background: transparent;
        box-shadow: none;
    }

    #menuWrapper ul li {
        display: block;
        padding: 0;
        position: relative;
    }

    /* base link style on mobile */
    body header ul li a {
        display: flex;
        align-items: center;
        justify-content: space-between; /* text left, arrow/right stuff on the right */
        font-size: 18px;
        line-height: 1.6;
        padding: 10px 0;
    }

    header ul li a:hover {
        color: var(--text-color);
    }

    .nav-main.active a.menu-link {
        color: var(--text-color);
    }

    body.active {
        overflow: hidden;
    }

    /****************************
     * PARENT ARROW (REPLACES DESKTOP INDICATOR)
     ****************************/
    /* remove the desktop indicator line on mobile */
    .nav-main .main-menu > li > a {
        padding-bottom: 0;
    }

    .nav-main .main-menu > li > a::after {
        content: none; /* kill the desktop bar */
    }

    /* show SVG arrow only on parents */
    .nav-main .main-menu > li.menu-item-has-children > a::after {
        content: '';
        display: inline-block;
        flex-shrink: 0;
        width: 14px;
        height: 14px;
        margin-left: 8px;

        /* use your SVG */
        background-image: url(assets/images/arrow-right-new.svg); /* replace with theme URL in production */
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;

        transition: transform 0.25s ease;
        pointer-events: none; /* ADD THIS IF NOT PRESENT */
    }

    /* open state – rotate to look “expanded” */
    .nav-main .main-menu > li.mobile-open > a::after {
        transform: rotate(90deg);
    }

    /* Inside submenu back button — replace arrow with your SVG */
    #menuWrapper.submenu-view .mobile-submenu-back {
        width: 10px;
        height: 20px;
        background-image: url(assets/images/arrow-left.svg);
        background-size: 16px 24px;
        background-repeat: no-repeat;
        background-position: center;
        padding: 0;
        border: none;
    }


    /* MOBILE SUBMENU HEADER (inside view) */
    .mobile-submenu-header {
        display: none; /* normal view: hidden */
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
        font-size: 14px;
        font-weight: 500;
    }

    .mobile-submenu-back {
        background: none;
        border: none;
        padding: 0;
        margin-right: 4px;
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
    }

    .mobile-submenu-title {
        font-size: 14px;
    }

    /* when submenu view is active, show header */
    #menuWrapper.submenu-view .mobile-submenu-header {
        display: flex;
    }

    /* hide arrow in inside view where parent link is hidden anyway */
    #menuWrapper.submenu-view .main-menu > li.is-current-parent > a::after {
        content: none;
    }

}

@media (max-width: 1201px) {
    /****************************
     * PARENT ARROW (REPLACES DESKTOP INDICATOR)
     ****************************/
    /* remove the desktop indicator line on mobile */
    .nav-main .main-menu > li > a {
        padding-bottom: 0 !important;
    }

    /* FIRST: Remove ALL desktop indicators */
    .nav-main .main-menu > li > a::after {
        content: none !important;
        display: none !important;
    }

    /* THEN: Add arrow ONLY for parent items */
    .nav-main .main-menu > li.menu-item-has-children > a::after {
        content: '' !important;
        display: inline-block !important;
        flex-shrink: 0;
        width: 14px;
        height: 14px;
        margin-left: 8px;
        background: url(assets/images/arrow-right-new.svg) no-repeat center / contain !important;
        transition: transform 0.25s ease;
        position: static !important;
        pointer-events: none !important; /* CRITICAL: clicks pass through to link */
    }

    /* Rotate arrow when submenu is open */
    .nav-main .main-menu > li.mobile-open > a::after {
        transform: rotate(90deg);
    }

    /* Inside submenu back button */
    #menuWrapper.submenu-view .mobile-submenu-back {
        width: 10px;
        height: 20px;
        background-image: url(assets/images/arrow-left.svg);
        background-size: 16px 24px;
        background-repeat: no-repeat;
        background-position: center;
        padding: 0;
        border: none;
    }

    /* MOBILE SUBMENU HEADER (inside view) */
    .mobile-submenu-header {
        display: none;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
        font-size: 14px;
        font-weight: 500;
    }

    .mobile-submenu-back {
        background: none;
        border: none;
        padding: 0;
        margin-right: 4px;
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
    }

    .mobile-submenu-title {
        font-size: 14px;
    }

    /* when submenu view is active, show header */
    #menuWrapper.submenu-view .mobile-submenu-header {
        display: flex;
    }

    /* hide arrow in inside view where parent link is hidden anyway */
    #menuWrapper.submenu-view .main-menu > li.is-current-parent > a::after {
        display: none !important;
    }


    /* ---------------------------------------
   MOBILE NAV – SUBMENU BEHAVIOUR (≤991.98px)
   --------------------------------------- */
    .sub-menu-background {
        display: none; /* no desktop strip */
    }

    /* stack top-level items vertically */
    .nav-main .main-menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.2rem;
    }

    /* base mobile sub-menu - hidden in "root" view */
    .nav-main .main-menu .sub-menu {
        display: none;
        list-style: none;
        padding: 0.4rem 0 0;
        margin: 0;
        background: transparent;
        box-shadow: none;
    }

    /* ----------------------------
       INSIDE SUBMENU VIEW
       ---------------------------- */
    /* in submenu view, hide all top-level items... */
    #menuWrapper.submenu-view .main-menu > li {
        display: none;
    }

    /* ...except the current parent */
    #menuWrapper.submenu-view .main-menu > li.is-current-parent {
        display: block;
        width: 100%;
    }

    /* hide the parent link text itself in inside view */
    #menuWrapper.submenu-view .main-menu > li.is-current-parent > a {
        display: none;
    }

    /* show its children as full list INSTEAD of desktop dropdown behaviour */
    #menuWrapper.submenu-view .main-menu > li.is-current-parent > .sub-menu {
        display: block; /* override display:none */
        position: static; /* not absolute – flow layout */
        top: auto;
        left: auto;
        opacity: 1; /* override opacity:0 */
        visibility: visible; /* override visibility:hidden */
        transform: none; /* remove translateY */
        padding: 0;
        margin: 0;
    }

    #menuWrapper.submenu-view .main-menu > li.is-current-parent > .sub-menu > li a {
        font-size: 16px;
        line-height: 1.6;
        padding: 7px 0;
        display: block;
    }


    /* INITIAL STATE for submenu items: invisible + slightly to the right */
    .nav-main .main-menu .sub-menu > li {
        opacity: 0;
        transform: translateX(10px);
        transition: opacity .25s ease, transform .25s ease;
    }

    /* WHEN we are in submenu view + animation enabled,
       fade + slide items into place */
    #menuWrapper.submenu-view.submenu-animating
    .main-menu > li.is-current-parent > .sub-menu > li {
        opacity: 1;
        transform: translateX(0);
    }
}


@media (max-width: 991.98px) {


}


@media (max-width: 600px) {
    header .nav-logo img {
        height: 42px;
    }

    .nav-main .main-menu > li.current-menu-ancestor > a::after {
        background: unset;
        background-image: url(assets/images/arrow-right-new.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        position: unset;
    }

    /*.nav-main .main-menu > li.current-menu-ancestor > a::after{*/
    /*    display: none;*/
    /*}*/
    .nav-main .main-menu > li.current-menu-ancestor > a::after {
        background: unset;
        background-image: url(assets/images/arrow-right-new.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        position: unset;
    }
}

/* 2. Update the text display to float absolutely */
#submenuHeaderDisplay {
    position: absolute;
    bottom: 0;
    left: 11%;
    top: 110px;
    width: 100%;
    font-size: 18px;
    z-index: 99;
    color: var(--text-color);
    min-height: 0;
    padding: 0 0 10px 0;
    line-height: 1.2;
    transition: opacity .25s ease;
    pointer-events: none;
    font-weight: 400;
}

@media (max-width: 1199px) {
    #submenuHeaderDisplay {
        display: none;
    }
}

/* MOBILE: Apply active color to submenu links */
@media (max-width: 991.98px) {
    /* Active/current submenu item on mobile */
    #menuWrapper.submenu-view .main-menu > li.is-current-parent > .sub-menu li.current-menu-item > a {
        color: var(--active-submenu-color) !important;
        font-weight: 600 !important;
    }

    /* Hover state for submenu links on mobile */
    #menuWrapper.submenu-view .main-menu > li.is-current-parent > .sub-menu li a:hover {
        color: var(--active-submenu-color) !important;
    }
}


/***** HOME *****/

/**** HERO COMPONENT ****/
/* =========================================
   1. BASE LAYOUT & BACKGROUNDS
   ========================================= */

#banner {
    position: relative;
    height: 80vh;
    min-height: 380px;
    display: flex; /* Ensure flex behavior matches PHP classes */
    color: #fff;
    overflow: hidden;
}

/* Background Assets */
.hero-bg-image,
.hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}


/* Content Container z-index fix */
.hero-con,
.hero.hero-medical .container {
    position: relative;
    z-index: 3;
}

/* =========================================
   2. GLASS BOX COMPONENT
   ========================================= */

/* Default Full Glass Style */
.hero-glass-full {
    width: 100%;
    margin: 0 auto;
    padding: 3.5rem 3rem;
    border-radius: 30px;

    /* GLASS EFFECT */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(22px);
    background: rgba(80, 80, 80, 0.10);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* Half Glass Variation (Inside modifier) */
.hero-glass-half {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

/* Layout Columns inside Glass */
.hero-glass-left,
.hero-glass-right {
    width: 50%;
}


/* =========================================
   3. TYPOGRAPHY & ELEMENTS
   ========================================= */

/* =========================================
   HERO TITLES
   ========================================= */

/* 1. Standard Hero Title (Inside Glass) */
.hero-glass-left .hero-title {
    font-size: 40px; /* Default Size */
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
}

/* 2. Outside Hero Title (For "Half" Layout) */
.hero-title-outside {
    font-size: 62px; /* I fixed the 6px typo -> 62px matches your other big titles */
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 4px 32px #0F3044;
}

/* =========================================
   SIZE MODIFIERS (Controlled by ACF)
   ========================================= */

/* Smaller variant for Inside Glass */
.hero-glass-left .hero-title.smaller {
    font-size: 28px;
}

/* Smaller variant for Outside Title */
.hero-title-outside.smaller {
    font-size: 32px;
}

/* Subtitles */
.hero-subtitle {
    font-size: 40px;
    font-weight: 400;
    color: #fff;
}

/* Description Text */
.hero-glass-right p,
.hero-glass-half p {
    font-size: 23px;
    font-weight: 500;
    color: #fff;
    line-height: 1.5;
}

/*!* Divider Line *!*/
/*.hero-divider {*/
/*    font-size: 2.5rem;*/
/*    font-weight: 600;*/
/*    position: absolute;*/
/*    top: -50px;*/
/*    left: 0;*/
/*}*/

/*!* Divider override for Half Layout *!*/
/*.hero-glass-half .hero-divider {*/
/*    position: relative;*/
/*    top: auto;*/
/*    left: auto;*/
/*    margin-bottom: 1rem;*/
/*    font-size: 2rem;*/
/*    line-height: 1;*/
/*}*/

/* =========================================
   DIVIDER LINE (Shape, not text)
   ========================================= */
.hero-divider {
    display: block;
    width: 15px;
    height: 9px;
    background-color: #fff;
    margin-top: 6px;
    margin-bottom: 19px;
    font-size: 0;
    line-height: 0;
    border: none;
    position: static;
}

.hero-glass-right .hero-divider {
    margin-left: 0;
}


/* Legacy Left Side styles (if still used) */
.hero-left .hero-kicker {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    opacity: 0.8;
}

.hero-left .hero-title {
    font-size: 2.1rem;
    line-height: 1.1;
    font-weight: 600;
}


/* =========================================
   4. VARIATION: SHORT HERO (Image Only)
   ========================================= */

.hero-short {
    height: 50vh !important;
    min-height: 400px;
}

/* Medium Banner */
.hero-medium {
    height: 70vh !important;
    min-height: 450px;
}

.hero-medium {
    .hero-glass-left {
        max-width: 300px;
    }

    .hero-glass-left .hero-title {
        font-size: 60px;
        font-kerning: none;
        text-shadow: 0 4px 32px #1E1E1E;
        line-height: 1.1;
    }
}


/* =========================================
   5. RESPONSIVE: TABLET & LAPTOP (< 991px)
   ========================================= */
@media (max-width: 1600px) {
    .hero-glass-left .hero-title {
        font-size: 37px;
    }
}

@media (max-width: 991px) {

    /* Layout Reset */
    #banner {
        height: auto !important;
        min-height: 80vh;
        padding-top: 100px;

    }

    /* Short Hero Mobile Height */
    .hero-short {
        height: 40vh !important;
        min-height: auto !important;
        /*min-height: 250px;*/
        padding: 0; /* Reset padding for short version */
    }

    /* Glass Box Adjustments */
    .hero-glass-full {
        padding: 2rem;
        margin-top: auto;
    }

    /* Typography Scaling */
    .hero-title-outside {
        font-size: 2.5rem;
        margin-bottom: 1.5rem;
    }

    .hero-glass-left .hero-title {
        font-size: 1.8rem;
        line-height: 1.2;
    }

    .hero-glass-right p {
        font-size: 1.1rem;
    }

    /* Column Resets */
    .hero-glass-left,
    .hero-glass-right {
        width: 100%;
    }

    /* Divider Reset for Mobile Flow */
    .hero-divider {
        margin-top: 15px;
        margin-bottom: 15px;
        width: 18px;
        height: 7px;
    }
}


/* =========================================
   6. RESPONSIVE: MOBILE (< 767px)
   ========================================= */

@media (max-width: 767.98px) {

    .hero.hero-medical {
        min-height: 320px;
        padding: 3rem 0; /* Fallback padding */
    }

    /* Refined Glass Style for Small Screens */
    .hero-glass-full {
        padding: 1.2rem;
        border-radius: 16px;
        background: rgba(80, 80, 80, 0.10); /* Darker/Subtler bg for mobile */
    }

    .hero-glass-left .hero-title {
        font-size: 26px;
    }

    .hero-subtitle {
        font-size: 24px;
        margin-top: 10px;
    }

    .hero-left {
        text-align: left;
        margin-bottom: 1.5rem;
    }

    .hero-left .hero-title {
        font-size: 1.75rem;
    }

    .hero-glass-right p, .hero-glass-half p {
        br {
            display: none
        }
    }
}

@media (max-width: 576px) {
    .hero-short {
        height: 40vh !important;
        min-height: 35vh !important;
        padding: 0;
    }

    .hero-medium {
        height: 40vh !important;
        min-height: 45vh !important;
    }

    .hero-medium {
        .hero-glass-left .hero-title {
            font-size: 40px;
        }
    }

    .hero-medium {
        .hero-glass-left {
            max-width: 230px;
        }
    }

    .hero-bg-video {
        transform: scale(1.01);
    }
}


/*********************************************
 * LOGOS COMPONENT (General Styles)
 *********************************************/

.clients-logos {
    background: #ffffff;
}

.clients .swiper-slide img {
    width: auto !important;
    height: auto !important;
    max-width: 165px !important;
    max-height: 100% !important;
    object-fit: contain;
    min-height: 100%;
}


/* ====================================
   FIX: Anchor Tag Styling for Links
   ==================================== */
.logo__slider-instance .swiper-slide a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    width: auto !important;
    text-decoration: none;
}

.logo__slider-instance:not(.swiper-initialized) .swiper-slide a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Left align for grid mode */
    height: 100% !important;
    width: auto !important;
}

/* --- Swiper Base (Slider mode) --- */
.logo__slider-instance {
    width: 100%;
    overflow: hidden;
}

.logo__slider-instance .swiper-wrapper {
    align-items: center;
    transition-timing-function: linear !important;
}

.logo__slider-instance .swiper-slide {
    height: 40px;
    padding: 3px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sliders-rows{
    gap: 4rem;
}
/*.clients .logo__slider-instance .swiper-slide img {*/
/*    max-width: 170px !important;*/
/*}*/

/*.section-title-logos{*/
/*    padding-left: calc(3rem + ((100vw - 5rem) / 12)) !important;*/
/*}*/

/* ========================================================================== */
/* GRID MODE – when Swiper is destroyed (Standard Grid)                       */
/* ========================================================================== */
.logo__slider-instance:not(.swiper-initialized) .swiper-wrapper {
    justify-content: space-between; /* This was overriding your start align */
    padding: 0 15px;
}

.logo__slider-instance:not(.swiper-initialized) .swiper-slide {
    width: auto !important; /* Don't force slide width */
    height: 120px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo__slider-instance:not(.swiper-initialized) .mobile-duplicate {
    display: none !important;
}


/* Desktop grid (Standard) */
@media (min-width: 992px) {
    .logo__slider-instance:not(.swiper-initialized) .swiper-slide {
        /*width: 150px !important;*/
        height: 40px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 0px;
        margin: 0 5px;
    }
}

@media (max-width: 1200px) {
    .logo__slider-instance:not(.swiper-initialized) .swiper-slide {
        height: 30px !important;
    }

}
/* Mobile grid */
@media (max-width: 991px) {
    .logo__slider-instance:not(.swiper-initialized) .swiper-slide {
        /*width: 150px !important;*/
        /*height: 100px !important;*/
    }

    .logo__slider-instance:not(.swiper-initialized) .swiper-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start !important;
        gap: 1rem;
        padding: 0;
    }
}


@media (min-width: 1200px) and (max-width: 1318.98px) {
    .logo__slider-instance:not(.swiper-initialized) .swiper-slide {
        /* width: 150px !important; */
        height: 31px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin: 0 8px;
    }
}

/* ========================================================================== */
/* MOBILE OPTIMIZATION (Under 768px)                                         */
/* ========================================================================== */
@media (max-width: 768px) {
    .clients .swiper-slide img {
        max-height: 30px !important;
        /*max-width: 100px !important;*/
    }
    .clients .logo__slider-instance .swiper-slide img {
        /*max-width: 100px !important;*/
        max-height: 25px !important;
    }

    .logo__slider-instance .swiper-slide {
        padding: 0 25px !important;
        height: 35px;
    }

    .logo__slider-instance:not(.swiper-initialized) .swiper-wrapper {
        gap: 25px;
    }

    .logo__slider-instance:not(.swiper-initialized) .swiper-wrapper .swiper-slide img {
        max-height: 40px !important;
        /*max-width: 142px !important;*/
    }

    .logo__slider-instance:not(.swiper-initialized) .swiper-slide {
        height: 70px;
    }
}

@media (max-width: 576px) {
    .logo__slider-instance:not(.swiper-initialized) .swiper-wrapper .swiper-slide {
        padding: 3px 8px !important;
    }

    .logo__slider-instance:not(.swiper-initialized) .swiper-wrapper .swiper-slide img {
        text-align: start;
        margin-right: auto;
    }
}

/* =========================================
   LOGOS: JUSTIFY START + BORDERS (Specific Override)
   MOVED TO BOTTOM TO ENSURE PRIORITY
   ========================================= */

/* 1. CONTAINER ALIGNMENT */
.justify-start-borders .logo__slider-instance:not(.swiper-initialized) .swiper-wrapper {
    justify-content: flex-start !important;
    gap: 0 ;
    row-gap: 30px;
    padding: 0;
    flex-wrap: wrap !important;
}

/* 2. ITEM STYLING */
.justify-start-borders .logo__slider-instance:not(.swiper-initialized) .swiper-slide {
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 40px !important;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* Needed for pseudo-element */

    /* Remove standard border logic if any existed */
    border: none !important;
}

/* 3. CUSTOM SHORT BORDER (Using Pseudo-Element) */
.justify-start-borders .logo__slider-instance:not(.swiper-initialized) .swiper-slide::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 40px; /* Controls the exact height of the line */
    background-color: #E5E5E5;
}

/* First Item Adjustment */
.justify-start-borders .logo__slider-instance:not(.swiper-initialized) .swiper-slide:first-child {
    padding-left: 0 !important;
}

/* Remove Border from Last Item */
.justify-start-borders .logo__slider-instance:not(.swiper-initialized) .swiper-slide:last-child::after {
    display: none;
}

/* Ensure duplicate hiding */
.justify-start-borders .logo__slider-instance:not(.swiper-initialized) .mobile-duplicate {
    display: none !important;
}


/* 4. MOBILE TWEAKS (Max-width: 991px) */
@media (max-width: 991px) {
    .justify-start-borders .logo__slider-instance:not(.swiper-initialized) .swiper-slide {
        padding: 0 20px !important;
        height: 80px;
    }

    /* Adjust border height for mobile if needed */
    .justify-start-borders .logo__slider-instance:not(.swiper-initialized) .swiper-slide::after {
        height: 30px;
    }

    .justify-start-borders .logo__slider-instance:not(.swiper-initialized) .swiper-slide img {
        max-width: 120px !important;
        max-height: 50px !important;
    }

    /* Remove border from last visible (non-duplicate) item */
    .justify-start-borders .logo__slider-instance:not(.swiper-initialized) .swiper-slide:not(.mobile-duplicate):last-of-type::after {
        display: none !important;
    }

    .justify-start-borders .logo__slider-instance:not(.swiper-initialized) .swiper-slide:not(.mobile-duplicate):last-child::after {
        padding-left: 0 !important;
    }


    /*Last Version*/
    .justify-start-borders .logo__slider-instance:not(.swiper-initialized) .swiper-slide {
        padding-right: 23px !important;
        height: 80px;
        margin: 0 5px !important;
        padding-left: 0px !important;
    }

    .justify-start-borders.logo__slider-instance:not(.swiper-initialized) .swiper-wrapper .swiper-slide img {
        text-align: start;
        margin-right: unset;
    }
}

/* ==========================================================================
   MOBILE GRID FIX (Static / No-Border Version)
   Targeting: data-mobile-layout="grid"
   ========================================================================== */

@media (max-width: 991px) {

    /* 1. Force the wrapper into a clean 2-column Grid */
    .logo__slider-instance[data-mobile-layout="grid"]:not(.swiper-initialized) .swiper-wrapper {
        display: grid !important;
        grid-template-columns: 1fr 1fr; /* Two equal columns */
        column-gap: 20px;               /* Space between columns */
        row-gap: 30px;                  /* Space between rows */
        justify-content: start !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;     /* Reset any Swiper transforms */
    }

    /* 2. Reset the slide container */
    .logo__slider-instance[data-mobile-layout="grid"]:not(.swiper-initialized) .swiper-slide {
        width: 100% !important;
        /*height: 60px !important;  */
        /* Fixed container height for alignment */
        height: 35px !important;
        margin: 0 !important;
        padding: 0 ;
        border: none !important;

        /* Flex alignment settings */
        display: flex !important;
        align-items: center !important;     /* Center vertically */
        justify-content: flex-start !important; /* Align LEFT (matches screenshot) */
    }

    /* 3. Image Sizing - The Key Fix */
    .logo__slider-instance[data-mobile-layout="grid"]:not(.swiper-initialized) .swiper-slide img {
        /* Control size ONLY by height, as requested */
        height: auto !important;
        max-height: 100% !important;

        /* Width adjusts naturally, but never exceeds column width */
        width: auto !important;
        max-width: 100% !important;

        /* Ensure crisp rendering */
        object-fit: contain;
        object-position: left center;
    }

    /* 4. Hide the duplicate slides that Swiper generates */
    .logo__slider-instance[data-mobile-layout="grid"]:not(.swiper-initialized) .mobile-duplicate {
        display: none !important;
    }

}
@media (max-width: 576px) {
    .logo__slider-instance[data-mobile-layout="grid"]:not(.swiper-initialized) .swiper-slide img {
        height: auto !important;
        max-height: 60% !important;
        width: auto !important;
        max-width: 100% !important;
        object-fit: contain;
        object-position: left center;
    }



    .clients .logo__slider-instance .swiper-slide img {
        max-width: 100px !important;
        max-height: 35px !important;
    }
}


/*SPECIFIC LOGOS*/
/*.logo-ms-noise-logo-vauguillettes{*/
/*    min-height: 70px ;*/
/*}*/
/*.logo-erma{*/
/*    min-height: 70px ;*/
/*}*/


/*@media (max-width: 991px) {*/
/*    !*SPECIFIC LOGOS*!*/
/*    .logo-ms-noise-logo-vauguillettes{*/
/*        min-height: 45px ;*/
/*    }*/
/*    .logo-erma{*/
/*        min-height: 45px ;*/
/*    }*/
/*}*/

/* ========================
   LOGO SIZES (ACF CONTROL)
   ======================== */

/* Large */
.logo-size-large {
    min-height: 70px !important;
}

/* Medium */
.logo-size-medium {
    min-height: 55px !important;
}

/* Small */
.logo-size-small {
    min-height: 40px !important;
}

/* --- Mobile Adjustments --- */
@media (max-width: 991px) {
    .logo-size-large {
        min-height: 40px !important;
    }

    .logo-size-medium {
        min-height: 35px !important;
    }

    .logo-size-small {
        min-height: 30px !important;
    }
}

/*********************************************
 * SERVICE HIGHLIGHT STRIPE COMPONENT
 *********************************************/

.service-highlight-box {
    background: #f3f8ff;
    padding: 66px 60px 66px 230px;
    position: relative;
    overflow: visible;
}

/***************
 * IMAGE BLOCK
 ***************/
.service-highlight-image-outer {
    position: absolute;
    top: 50%;
    left: calc(100% - 160px);
    transform: translateY(-71%);
    z-index: 4;
}

.service-highlight-image-inner {
    background: #fff;
    padding: 53px;
    background: linear-gradient(0deg, #FFF 0%, #FFF 100%), #FFF;
    box-shadow: 0 344px 96px 0 rgba(146, 173, 200, 0.00), 0 220px 88px 0 rgba(146, 173, 200, 0.02), 0 124px 74px 0 rgba(146, 173, 200, 0.07), 0 55px 55px 0 rgba(146, 173, 200, 0.11), 0 14px 30px 0 rgba(146, 173, 200, 0.13) !important;
}

.service-highlight-img {
    width: 190px;
    height: 190px;
    object-fit: contain;
}

/***************
 * CONTENT
 ***************/
.service-highlight-title {
    font-size: 26px;
    font-weight: 700;
}

.service-highlight-text {
    font-size: 16px;
    line-height: 1.7;
    max-width: 600px;
}

/***************
 * LINK
 ***************/
.service-highlight-link {
    color: #0068D6;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
}

.service-highlight-link:hover {
    color: #0068D6;
}

.service-highlight-link-icon {
    margin-left: 3px;
}

/***************
 * RESPONSIVE
 ***************/
@media (max-width: 1600px) {
    .service-highlight-image-outer {
        left: calc(100% - 130px);
    }
}

@media (max-width: 991px) {
    .service-highlight-image-inner {
        padding: 23px;
    }

    .service-highlight-image-outer {
        left: -20px;
        transform: translateY(-85%);
    }

    .service-highlight-box {
        padding: 36px 60px 36px 280px;
    }
}

@media (max-width: 768px) {
    .service-highlight-box {
        padding: 36px 20px 36px 230px;
    }

    .service-highlight-image-outer {
        left: -30px;
        transform: translateY(-96%);
    }
}

/* MOBILE < 768px – like the screenshot */
@media (max-width: 576px) {

    .service-highlight-box {
        padding: 80px 24px 80px 24px;
        box-shadow: 0 18px 40px rgba(20, 40, 90, 0.06);
        margin-top: -70px;
    }

    .service-highlight-image-outer {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        margin-bottom: 24px;
        display: flex;
        justify-content: center;
        padding: 0 15px 0px 15px;
    }

    .service-highlight-image-inner {
        padding: 40px;
        box-shadow: 0 20px 40px rgba(10, 22, 70, 0.10);
        /* border-radius: 8px; */
        max-width: 410px;
        min-height: 270px;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .service-highlight-img {
        width: 100%;
        height: auto;
        max-width: 210px;
        margin: 0 auto;
    }

    .service-highlight-title {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .service-highlight-text {
        font-size: 14px;
        line-height: 1.6;
        max-width: 100%;
    }

    .service-highlight-link {
        font-size: 14px;
    }
}


/***** INFO CARDS COMPONENT *****/

/* Cards */
.info-card {
    background: #ffffff;
}

/* Section header dot */
/*.section-dot {*/
/*    width: 15px;*/
/*    height: 7px;*/
/*    background: var(--text-color);*/
/*    display: inline-block;*/
/*}*/

.info-card-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.info-card-body {
    padding-top: 1.25rem;
}

.info-card-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-color);
}

.info-card-text {
    min-height: 110px;
}

.info-card-text p {
    margin-bottom: 0;
    font-size: 16px;
    color: var(--text-color);
    font-weight: 400;
}

/* Base link style */
.info-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    color: inherit;
}

/* Keep color on hover, only underline text */
.info-card-link:hover {
    color: inherit !important;
    text-decoration: underline;
}

.info-card-link__icon {
    flex-shrink: 0;
    display: inline-block;
}

/* ACF: link_color = teal */
.info-card-link--teal {
    color: #007E8F;
}

.info-card-link--teal:hover {
    color: #007E8F !important;
}

/* ACF: link_color = magenta */
.info-card-link--magenta {
    color: #C3298A;
}

.info-card-link--magenta:hover {
    color: #C3298A !important;
    text-decoration: underline;
}

/* Swiper arrows (shown only in slider layout) */
.info-cards-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.info-cards-prev {
    left: -10px;
}

.info-cards-next {
    right: -10px;
}

.info-cards-nav .icon-chevron-left::before {
    content: '<';
}

.info-cards-nav .icon-chevron-right::before {
    content: '>';
}

/* Swiper slide width */
.info-cards-slider .swiper-slide {
    width: 50%;
}

@media (max-width: 767px) {
    .info-cards-slider .swiper-slide {
        width: 100%; /* 1 card per view on mobile */
    }


}


/***** TEXT IMAGE COMPONENT *****/
.text-image-row + .text-image-row {
    margin-top: 2rem;
}

.text-image-text {
    max-width: 660px;
}

.text-image-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.text-image-title {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
}

.text-image-text p {
    font-size: 18px;
}

.text-block-title.title-32 {
    font-size: 32px;
}

.text-block-title.title-28 {
    font-size: 28px;
}

.text-block-title.title-26 {
    font-size: 26px;
}


/* Link + arrow (single brand color, no selector) */
.text-image-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    color: #0068D6;
}

.text-image-link:hover {
    color: #00868F; /* keep same color on hover */
    text-decoration: underline;
}

.text-image-link__icon {
    flex-shrink: 0;
    display: inline-block;
}

.text-image-image {
    position: relative;
}

.text-image-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 34px;
    font-weight: 600;
    padding: 24px;
}


/* =========================================
   TEXT IMAGE ALIGNMENT FIX
   ========================================= */
@media (min-width: 1400px) {
    /* Force both to use the EXACT same padding calculation so they align vertically */
    .text-image-content.smaller-con,
    .text-img-section-title {
        padding-left: calc(3rem + ((100vw - 10rem) / 12)) !important;
    }


}

/* 2. XL Screens (1200px - 1400px)
   Logic: Container Padding (1.5rem) + 1 Grid Column Offset */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .text-image-content.smaller-con {
        /* 1.5rem is the px-4 padding */
        padding-left: calc(1rem + ((100vw - 3rem) / 12)) !important;
    }

    .text-img-section-title {
        padding-left: calc(1.5rem + ((100vw - 3rem) / 12));
    }
}


@media (max-width: 1400px) {
    .text-image-overlay {
        font-size: 28px;
    }
}

@media (max-width: 1200px) {
    .text-img-section-title {
        padding-left: 0.5rem !important;
    }
}

@media (max-width: 992px) {
    .text-image-content.smaller-con {
        padding-left: 0.5rem !important;
    }

    .text-image-title {
        font-size: 22px;
        font-weight: 700;
        line-height: 1.3;
    }

    .text-image-text p {
        font-size: 16px;
    }


    .text-block-title.title-32 {
        font-size: 24px;
    }

    .text-block-title.title-28 {
        font-size: 22px;
    }
}

@media (max-width: 576px) {
    .text-image-overlay {
        justify-content: flex-start;
        padding: 24px 16px;
        font-size: 24px;
        white-space: nowrap;
    }

    .text-image-overlay p {
        margin: 0;
    }

    .text-image-row + .text-image-row {
        margin-top: 0rem;
    }
}


/***** COUNTER NUMBERS COMPONENT *****/

/* Container spacing */
.numbers-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* Each stat item */
.numbers-item {
    flex-direction: column;
    gap: 0.5rem;
}

/* Number + dot in a row */
/* FORCE ALL NUMBER BLOCKS TO ALIGN VERTICALLY */
.numbers-value-wrapper {
    width: 300px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 15px;
}

/* WRAPPER: Number + + sign */
.numbers-value {
    display: flex;
    align-items: center;
    font-size: 88px;
    font-weight: 200;
    color: #0068D6;
    gap: 4px; /* small spacing between number and + */
    line-height: 1;
    min-width: 140px; /* adjusts spacing */
    justify-content: flex-end; /* RIGHT-ALIGN ALL NUMBERS */
}

/* Number itself */
.num {
    display: inline-block;
    /*font-variant-numeric: tabular-nums;*/
    text-align: right; /* ensure multi-digit numbers align right */
}

/* + sign */
.numbers-plus {
    font-size: 0.7em; /* scales with number size */
    font-weight: 300;
    color: #0068D6;
    line-height: 1;
    transform: translateY(-4px); /* fine vertical alignment */
}

.numbers-dot {
    margin-top: 12px;
}

.number-content {
    gap: 3px;
    width: 100%;
}

/* Label text */
.numbers-label {
    font-size: 17px;
    line-height: 1.4;
    max-width: 284px;
}


@media (min-width: 1400px) {
    /* Number + dot in a row */
    .numbers-value-wrapper {
        padding-left: 20px;
    }
}

@media (max-width: 1600px) {
    .numbers-value {
        font-size: 75px;
    }

    .numbers-label {
        font-size: 16px;
    }
}
@media (max-width: 992px) {
    .numbers-value {
        font-size: 55px;
    }
    .numbers-value {
        min-width: 82px;
    }

}

@media (max-width: 767px) {
    .numbers-value {
        font-size: 80px;
        text-align: center;
        font-weight: 200;
        min-width: 140px;
    }

    .numbers-value-wrapper {
        text-align: start;
        justify-content: start;
    }

    .numbers-label {
        font-size: 16px;
        max-width: unset;
    }

    .numbers-value {
        width: 100px;
        min-width: 105px;
        justify-content: flex-end; /* maintain right-align on mobile */
    }
}

@media (max-width: 768px) {
    .numbers-item {
        padding-left: 105px;
    }

    .numbers-value {
        font-size: 70px;
    }

    .numbers-label {
        font-size: 15px;
        max-width: 130px;
    }

    .numbers-section {
        overflow: hidden;
    }
}

@media (max-width: 480px) {
    .numbers-item {
        padding-left: 85px;
    }
}


/*!**********************************************/
/* * CUSTOM SLIDER(Info SLIDER) COMPONENT*/
/* *********************************************!*/

/*!* --- CONTAINER --- *!*/
/*.custom-slider-section {*/
/*    overflow: hidden;*/
/*}*/

/*.cs-viewport {*/
/*    width: 100%;*/
/*    !* 1. FORCE HEIGHT to prevent vertical jitter *!*/
/*    !* 16/9 of 700px is ~394px. Add text space ~100px. *!*/
/*    min-height: 520px;*/
/*    position: relative;*/
/*    overflow: hidden;*/
/*    !* Clean bottom edge *!*/
/*    margin-bottom: 20px;*/
/*    !* Prevent text selection while dragging *!*/
/*    user-select: none;*/
/*}*/

/*.cs-track {*/
/*    display: flex;*/
/*    !* 2. ALIGNMENT FIX: Use Flex Start + specific margins if center causes jump *!*/
/*    align-items: end;*/
/*    gap: 30px;*/
/*    !* 3. GPU SYNC FIX: Use standard ease for both transform and width *!*/
/*    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);*/
/*    width: max-content;*/
/*    will-change: transform;*/
/*    !* 4. FORCE GPU *!*/
/*    transform-style: preserve-3d;*/
/*    backface-visibility: hidden;*/
/*    cursor: grab;*/
/*    touch-action: pan-y; !* Allow vertical scroll, handle horizontal in JS *!*/
/*}*/

/*.cs-track.grabbing {*/
/*    cursor: grabbing;*/
/*    transition: none !important; !* Instant movement when dragging *!*/
/*}*/

/*!* --- ITEM --- *!*/
/*.cs-item {*/
/*    !* 5. GPU LAYOUT FIX: Use Flex-basis instead of width for smoother reflow *!*/
/*    flex: 0 0 350px;*/
/*    width: 350px; !* Fallback *!*/

/*    opacity: 0.5;*/
/*    !* Match the track transition curve exactly *!*/
/*    transition: flex-basis 0.6s ease, width 0.6s ease, opacity 0.6s ease;*/

/*    cursor: pointer;*/
/*    position: relative;*/

/*    !* 6. PREVENT PIXEL SNAPPING JITTER *!*/
/*    transform: translateZ(0);*/
/*    will-change: flex-basis;*/
/*}*/

/*!* Active State *!*/
/*.cs-item.active {*/
/*    flex: 0 0 700px;*/
/*    width: 700px;*/
/*    opacity: 1;*/
/*    z-index: 10;*/
/*}*/

/*!* --- CARD --- *!*/
/*.cs-card {*/
/*    position: relative;*/
/*    width: 100%;*/
/*}*/

/*.cs-image-box {*/
/*    width: 100%;*/
/*    aspect-ratio: 16 / 9;*/
/*    overflow: hidden;*/
/*    background: #f4f4f4;*/
/*    !*border-radius: 4px;*!*/
/*    position: relative;*/
/*    !* Fix for image bleeding during transform *!*/
/*    -webkit-mask-image: -webkit-radial-gradient(white, black);*/
/*    !* Prevent image dragging ghost *!*/
/*    pointer-events: none;*/
/*}*/

/*.cs-img {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    object-fit: cover;*/
/*    display: block;*/
/*}*/

/*!* --- ABSOLUTE CONTENT (Fixes Layout Shift) --- *!*/
/*.cs-content {*/
/*    position: absolute;*/
/*    top: 100%;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    padding-top: 15px;*/
/*    z-index: 20;*/
/*    pointer-events: auto; !* Re-enable clicks for links *!*/
/*}*/

/*.cs-title {*/
/*    font-size: 1.25rem;*/
/*    font-weight: 600;*/
/*    color: var(--text-color);*/
/*    margin-bottom: 5px;*/
/*    white-space: nowrap;*/
/*    overflow: hidden;*/
/*    text-overflow: ellipsis;*/
/*    transition: font-size 0.4s ease;*/
/*}*/

/*.cs-item.active .cs-title {*/
/*    font-size: 26px;*/
/*    font-weight: 700;*/
/*    white-space: normal;*/
/*}*/

/*.cs-desc {*/
/*    opacity: 0;*/
/*    visibility: hidden;*/
/*    transform: translateY(10px);*/
/*    transition: all 0.4s ease;*/
/*}*/

/*.cs-item.active .cs-desc {*/
/*    opacity: 1;*/
/*    visibility: visible;*/
/*    transform: translateY(0);*/
/*    transition-delay: 0.2s;*/
/*}*/

/*.cs-text {*/
/*    font-size: 1rem;*/
/*    color: #666;*/
/*    margin-bottom: 8px;*/
/*    line-height: 1.5;*/
/*}*/

/*.cs-link {*/
/*    font-weight: 700;*/
/*    color: var(--text-color);*/
/*    text-decoration: none;*/
/*}*/

/*!* --- PROGRESS BAR (FIXED) --- *!*/
/*.cs-progress-track {*/
/*    width: 100%;*/
/*    height: 4px;*/
/*    background: #e0e0e0;*/
/*    position: relative;*/
/*    overflow: hidden;*/
/*    border-radius: 2px;*/
/*}*/

/*.cs-progress-bar {*/
/*    position: absolute;*/
/*    left: 0;*/
/*    top: 0;*/
/*    height: 100%;*/
/*    background: #000;*/
/*    width: 0%;*/
/*    transition: width 0.3s linear;*/
/*}*/

/*!* =========================================*/
/*   BUTTON BASE STYLES*/
/*   ========================================= *!*/
/*.cs-btn {*/
/*    width: 44px;*/
/*    height: 44px;*/
/*    border-radius: 50%;*/
/*    background-color: #404040;*/
/*    border: none;*/
/*    position: relative;*/
/*    cursor: pointer;*/
/*    color: #fff;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    transition: background 0.3s, transform 0.2s, opacity 0.3s;*/
/*    flex: 0 0 44px;*/
/*    padding: 0;*/
/*}*/

/*.cs-btn svg {*/
/*    width: 30px;*/
/*    height: 20px;*/
/*    stroke: currentColor;*/
/*    transition: transform 0.2s ease;*/
/*}*/

/*.cs-btn:hover {*/
/*    transform: scale(1.05);*/
/*}*/

/*!* =========================================*/
/*   BUTTON STYLE MODIFIERS (INTERACTION ONLY)*/
/*   ========================================= *!*/

/*!* --- 1. BLUE Style --- *!*/
/*!* Only change background on Hover, Active (Click), or Focus *!*/
/*.custom-slider-section.btn-style-blue .cs-btn:hover,*/
/*.custom-slider-section.btn-style-blue .cs-btn:active,*/
/*.custom-slider-section.btn-style-blue .cs-btn:focus {*/
/*    background-color: #0068D6; !* Blue *!*/
/*}*/


/*!* --- 2. TURQUOISE Style --- *!*/
/*!* Only change background on Hover, Active (Click), or Focus *!*/
/*.custom-slider-section.btn-style-turquoise .cs-btn:hover,*/
/*.custom-slider-section.btn-style-turquoise .cs-btn:active,*/
/*.custom-slider-section.btn-style-turquoise .cs-btn:focus {*/
/*    background-color: var(--Text-Turquoise, #007E8F); !* Turquoise *!*/
/*}*/


/*!* --- 3. DARK GREY Style (Default) --- *!*/
/*!* For the Dark Grey style, hover simply gets darker *!*/
/*.custom-slider-section.btn-style-dark_grey .cs-btn:hover,*/
/*.custom-slider-section.btn-style-dark_grey .cs-btn:active,*/
/*.custom-slider-section.btn-style-dark_grey .cs-btn:focus {*/
/*    background-color: #2b2b2b; !* Slightly darker black/grey *!*/
/*}*/


/*!* DISABLED STATE *!*/
/*.cs-btn.cs-disabled,*/
/*.cs-btn:disabled {*/
/*    opacity: 0.3; !* Lower opacity for disabled state *!*/
/*    cursor: default;*/
/*    pointer-events: none;*/
/*    transform: none;*/
/*}*/


/*!* =========================================*/
/*   ACTIVE TITLE COLOR LOGIC*/
/*   (Only applies if ACF 'color_active_title' is true)*/
/*   ========================================= *!*/

/*!* Default State (Title is normally dark/black) *!*/
/*.cs-title {*/
/*    transition: color 0.3s ease, font-size 0.4s ease;*/
/*}*/

/*!* 1. BLUE Style + Color Title Enabled *!*/
/*.custom-slider-section.btn-style-blue.color-title-active .cs-item.active .cs-title {*/
/*    color: #0068D6; !* Blue *!*/
/*}*/

/*!* 2. TURQUOISE Style + Color Title Enabled *!*/
/*.custom-slider-section.btn-style-turquoise.color-title-active .cs-item.active .cs-title {*/
/*    color: var(--Text-Turquoise, #007E8F); !* Turquoise *!*/
/*}*/

/*!* 3. DARK GREY Style + Color Title Enabled *!*/
/*!* Usually titles are already dark, but this enforces the specific grey if needed *!*/
/*.custom-slider-section.btn-style-dark_grey.color-title-active .cs-item.active .cs-title {*/
/*    color: #404040; !* Dark Grey *!*/
/*}*/

/*!* =============================================*/
/*   SIDE LAYOUT – only 2 cards visible:*/
/*   one big active card + one smaller previous card*/
/*   ============================================= *!*/
/*@media (min-width: 992px) {*/
/*    .type-side .cs-item {*/
/*        opacity: 0;*/
/*        pointer-events: none;*/
/*    }*/

/*    .type-side .cs-item.active,*/
/*    .type-side .cs-item.cs-prev-visible {*/
/*        opacity: 1;*/
/*        pointer-events: auto;*/
/*    }*/
/*}*/


/*!* --- RESPONSIVE --- *!*/
/*!* =============================================*/
/*   MOBILE & TABLET (< 992px)*/
/*   ============================================= *!*/


/*!* Fix nav buttons squashing between 992px and 1400px *!*/
/*@media (max-width: 1400px) {*/
/*    .cs-btn {*/
/*        width: 35px;*/
/*        height: 35px;*/
/*        flex: 0 0 35px;*/
/*    }*/
/*}*/

/*@media (max-width: 991px) {*/


/*    .cs-viewport {*/
/*        padding-bottom: 20px;*/
/*        overflow: visible;*/
/*        min-height: auto;*/
/*    }*/

/*    !* 1. ALIGNMENT FIX (Stop the Jump)*/
/*       Align to top so taller text grows down, not up*/
/*    *!*/
/*    .cs-track {*/
/*        align-items: flex-start;*/
/*        gap: 15px;*/
/*    }*/

/*    !* 2. FULL WIDTH CARDS*/
/*       All cards same size. No flex-basis transition needed on mobile.*/
/*    *!*/
/*    .cs-item,*/
/*    .cs-item.active {*/
/*        flex: 0 0 88vw;*/
/*        width: 88vw;*/
/*        opacity: 1;*/
/*        margin-right: 0;*/
/*        transition: opacity 0.3s; !* Disable width/flex transition *!*/
/*    }*/

/*    !* 3. Taller Images *!*/
/*    .cs-image-box {*/
/*        aspect-ratio: 4 / 3;*/
/*    }*/

/*    !* 4. Text Flows Naturally *!*/
/*    .cs-content {*/
/*        position: relative;*/
/*        top: auto;*/
/*        left: auto;*/
/*        padding-top: 15px;*/
/*    }*/

/*    !* Always show details *!*/
/*    .cs-desc {*/
/*        opacity: 1;*/
/*        visibility: visible;*/
/*        transform: none;*/
/*    }*/

/*    .cs-title,*/
/*    .cs-item.active .cs-title {*/
/*        white-space: normal;*/
/*        font-size: 1.5rem;*/
/*    }*/

/*    !* 5. Stack Controls *!*/
/*    .custom-slider-section .row.align-items-center {*/
/*        flex-direction: column;*/
/*        gap: 20px;*/
/*    }*/

/*    .cs-progress-track {*/
/*        margin-top: 10px;*/
/*    }*/

/*    .col-12.d-flex.justify-content-end {*/
/*        width: 100%;*/
/*        justify-content: flex-end !important;*/
/*    }*/
/*}*/

/*!* --- MOBILE SPECIFIC STYLES --- *!*/
/*@media (max-width: 768px) {*/
/*    !* 1. Make Viewport taller for stacked content *!*/
/*    .cs-viewport {*/
/*        padding-bottom: 20px; !* Less padding, tight layout *!*/
/*        min-height: auto;*/
/*        overflow: visible;*/
/*    }*/

/*    !* 2. Cards become full width (minus screen padding) *!*/
/*    .cs-item,*/
/*    .cs-item.active {*/
/*        !* Matches Bootstrap .px-4 padding (1.5rem * 2 = ~48px) *!*/
/*        flex: 0 0 calc(100vw - 48px);*/
/*        width: calc(100vw - 48px);*/
/*        opacity: 1; !* Always fully visible on mobile *!*/
/*    }*/

/*    !* 3. Image Height *!*/
/*    .cs-image-box {*/
/*        aspect-ratio: 4 / 3; !* Taller image on mobile looks better *!*/
/*    }*/

/*    !* 4. Text is static relative (not absolute) on mobile so it takes up real space *!*/
/*    .cs-content {*/
/*        position: relative;*/
/*        top: auto;*/
/*        left: auto;*/
/*        transform: none;*/
/*        padding-top: 20px;*/
/*    }*/

/*    !* Always show description on mobile *!*/
/*    .cs-desc {*/
/*        opacity: 1;*/
/*        visibility: visible;*/
/*        transform: none;*/
/*    }*/

/*    .cs-title {*/
/*        white-space: normal; !* Wrap text *!*/
/*        font-size: 20px;*/
/*    }*/

/*    .cs-item.active .cs-title {*/
/*        font-size: 20px;*/
/*    }*/

/*    !* 5. CONTROLS LAYOUT (Screenshot Match) *!*/
/*    !* Stack progress bar and buttons *!*/
/*    .custom-slider-section .container.mt-5 .row {*/
/*        flex-direction: column;*/
/*        gap: 20px;*/
/*    }*/

/*    .cs-progress-track {*/
/*        margin-top: 10px;*/
/*        background: #ddd;*/
/*    }*/

/*    !* Align buttons to the right *!*/
/*    .d-flex.justify-content-end {*/
/*        justify-content: flex-end !important;*/
/*        width: 100%;*/
/*    }*/


/*}*/

/*!* =============================================*/
/*   MOBILE PHONES (< 576px)*/
/*   Specific fix for "Full Width" look*/
/*   ============================================= *!*/
/*@media (max-width: 576px) {*/
/*    !* Calculation: 100vw - 48px*/
/*           Why 48px? Because 'px-4' is usually 1.5rem (24px) on left and right.*/
/*           This makes the card width EXACTLY match the content area of your header.*/
/*        *!*/
/*    .cs-item,*/
/*    .cs-item.active {*/
/*        flex: 0 0 calc(100vw - 48px);*/
/*        width: calc(100vw - 48px);*/
/*    }*/

/*    .custom-slider-section .cs-viewport {*/
/*        padding-inline: 24px; !* match "Our Focus" + progress bar content line *!*/
/*    }*/

/*    !* Gap pushes the next card off screen *!*/
/*    .cs-track {*/
/*        gap: 24px;*/
/*    }*/

/*    !* Ensure image is large enough *!*/
/*    .cs-image-box {*/
/*        aspect-ratio: 1.2;*/
/*    }*/

/*    .cs-btn {*/
/*        width: 44px;*/
/*        height: 44px;*/
/*        flex: 0 0 44px;*/
/*    }*/

/*    .cs-viewport {*/
/*        padding-bottom: 0;*/
/*        margin-bottom: 0;*/
/*    }*/
/*}*/


/* =========================================
   TEXT BLOCK SECTION
   ========================================= */

.text-block-section {
    position: relative;
}

/*!* 1. The Dot Style *!*/
/*.section-dot {*/
/*    display: block;*/
/*    width: 12px;*/
/*    height: 6px;*/
/*    background-color: var(--text-color);*/

/*}*/

/* 2. Big Text (Left Side) - Fixed 34px */
.text-block-title {
    font-size: 62px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.5px;
}

.text-block-title.smaller {
    font-size: 32px;
}

/* 3. Small Text (Right Side) - Fixed 18px */
.text-block-content {
    font-size: 18px;
    /*line-height: 1.6;*/
    color: var(--text-color);
}

/*.text-block-content p {*/
/*    margin-bottom: 1.5rem;*/
/*}*/

.mobile-read-more {
    color: #0068D6;
    text-decoration: underline;
    font-weight: 700;
}

/* New style for the Desktop/Left-side link */
.desktop-arrow-link {
    color: #0068D6;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

/*.desktop-arrow-link::after {*/
/*    content: '\2192'; !* Arrow symbol *!*/
/*    margin-left: 8px;*/
/*    transition: transform 0.3s ease;*/
/*}*/
.desktop-arrow-link-icon {
    margin-left: 5px;
    transition: transform 0.3s ease;
}

/*.desktop-arrow-link-icon:hover {*/
/*    transform: translateX(5px);*/
/*}*/

.desktop-arrow-link:hover::after {
    transform: translateX(5px);
}

.text-block-subtitle {
    font-size: 20px;
    line-height: 1.5;
    max-width: 400px;
}

/* Ensure paragraphs inside the WYSIWYG don't add too much extra margin */
.text-block-subtitle p:last-child {
    margin-bottom: 0;
}

/* 4. Mobile Adjustments */
@media (max-width: 991px) {
    .text-block-title {
        font-size: 28px; /* Slightly smaller for mobile */
    }

    .text-block-content {
        font-size: 16px;
        margin-top: 1.5rem;
    }

    .text-block-title.smaller {
        font-size: 28px;
        /*font-weight: 400;*/
    }
}

@media (max-width: 768px) {
    .text-block-title.smaller {
        font-size: 26px;
    }

}


/* =========================================
   MOBILE FONT SIZES (Text Block)
   ========================================= */

@media (max-width: 991px) {

    /* 1. Default / "Big" Mobile Size */
    /* This applies when the client chooses "Default" in ACF */
    .text-block-title {
        font-size: 46px;
        line-height: 1.2;
    }

    /* 2. "Small" Mobile Size */
    /* This applies when the client chooses "Small" in ACF */
    .text-block-title.mobile-small {
        font-size: 26px !important;
        line-height: 1.3;
    }

    /* Content spacing adjustment */
    .text-block-content {
        font-size: 16px;
        margin-top: 1.5rem;
    }
}


/* =========================================
   INFO COLLAGE COMPONENT
   ========================================= */

/* --- 1. LEFT SIDE: MAIN CARD --- */

.collage-main-card {
    /* Uses CSS variable defined in PHP for dynamic image switching */
    background-image: var(--bg-desktop);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f4f4f4; /* Fallback */
    min-height: 500px; /* Taller height for main feature */
    overflow: hidden;
    transition: background-image 0.3s ease-in-out;
}

/* Content Container inside Main Card */
.collage-main-content {
    position: relative;
    z-index: 2;
    max-width: 90%;
}

/* Dash / Dot Decoration */
.section-dot {
    display: block;
    width: 15px;
    height: 8px;
    background-color: var(--text-color);
    margin-bottom: 0.5rem;
}

/* Main Typography */
.collage-main-title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
}

.collage-main-subtitle {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.3;
    margin-top: 0.75rem;
}

.collage-main-text {
    font-size: 16px;
    line-height: 1.6;
    margin-top: 1.5rem;
}

/* Optional: Ensure paragraphs inside WYSIWYG have spacing */
.collage-main-text p {
    margin-bottom: 1rem;
}


/* --- 2. RIGHT SIDE: LIST ITEMS --- */

/* Item Wrapper */
.collage-list-item {
    position: relative;
}

/* Image Wrapper (Fixed Ratio) */
.collage-item-img-wrap {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background-color: #eee;
}

.collage-item-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Hover Effect: Zoom image slightly */
.collage-list-item:hover .collage-item-img-wrap img {
    transform: scale(1.05);
}

/* Item Typography */
.collage-item-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-color);
    margin-top: -2px; /* Visual alignment fix */
}

.collage-item-text {
    font-size: 14px;
    line-height: 1.5;
    margin-top: 0.5rem;
}


@media (min-width: 1400px) {
    .collage-main-content {
        padding-left: calc(3rem + ((100vw - 6rem) / 12)) !important;
        padding-right: 4rem; /* Right padding to prevent text hitting the edge */
        max-width: 100%; /* Ensure it fills the space available */
    }
}

/* 3. XL Screens (1200px - 1400px)
   Calculation: Container Padding (1.5rem) + 1 Grid Column */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .collage-main-content {
        padding-left: calc(1.5rem + ((100vw - 3rem) / 12)) !important;
        padding-right: 3rem;
        max-width: 100%;
    }
}

/* 4. LG Screens (992px - 1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .collage-main-content {
        padding-left: calc(-3.5rem + ((100vw - 3rem) / 12)) !important;
        max-width: 100%;
    }
}


/* --- 3. RESPONSIVE STYLES --- */

/* Tablet & Mobile (< 991px) */
@media (max-width: 991px) {
    .collage-main-card {
        justify-content: center !important; /* Keep centered on mobile if desired */
    }

    /* Switch Main Card to Mobile Background Variable */
    .collage-main-card {
        background-image: var(--bg-mobile);
        min-height: 400px;
    }

    /* Adjust Main Typography */
    .collage-main-title {
        font-size: 32px;
    }

    .collage-main-subtitle {
        font-size: 20px;
    }

    /* Adjust List Item Image Size */
    .collage-item-img-wrap {
        height: 140px;
    }

    .collage-item-img-wrap {
        height: 240px; /* Make image taller on mobile for full-width impact */
        width: 100%;
    }
}

/* Mobile Small (< 576px) */
@media (max-width: 576px) {

    .collage-main-card {
        background-image: var(--bg-mobile);
        min-height: 500px;
    }

    .collage-main-title {
        font-size: 28px;
    }

    /* Main card padding adjustment */
    .collage-main-content {
        padding: 1.2rem !important; /* Override bootstrap p-4 */
        max-width: 100%;
    }

    /* List Items - Image Height */
    .collage-item-img-wrap {
        height: auto;
    }

    .collage-item-title {
        font-size: 18px;
    }

    .collage-main-text p {
        br {
            display: none;
        }
    }
}


/* =========================================
   RELATED CONTENT COMPONENT
   ========================================= */
.rc-section-title {
    font-size: 32px;
    font-weight: 700;
    color: #333;
}

/* --- CARD --- */
.rc-card__img {
    background-color: #f0f0f0;
    aspect-ratio: 4 / 3; /* Or 16/9 depending on preference */
    overflow: hidden;

    img {
        object-fit: cover;
    }
}

.rc-card__title {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
}

.rc-card__link {
    font-size: 14px;
    color: #666;
    text-decoration: none;
    transition: color 0.3s;
}

.rc-card__link:hover {
    color: var(--text-color);
}

/* --- CONTROLS FOOTER --- */
.rc-controls {
    position: relative;
}

/* Progress Bar Customization */
.rc-pagination-wrap {
    position: relative;
    height: 2px;
    background: #e0e0e0;
    border-radius: 2px;
    overflow: hidden;
}

.rc-pagination.swiper-pagination-progressbar {
    background: transparent;
    position: absolute; /* Override default fixed pos */
    height: 100%;
    top: 0;
    width: 100%;
}

.rc-pagination .swiper-pagination-progressbar-fill {
    background: #333; /* Dark active bar */
}

/* Navigation Buttons */
.rc-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #333;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s;
}

.rc-nav-btn:hover {
    background: var(--text-color);;
}

.rc-nav-btn.swiper-button-disabled {
    opacity: 0.5;
    cursor: default;
}

/* Mobile Small (< 576px) */
@media (max-width: 576px) {
    .related-content-section {
        .rc-nav-wrap {
            display: none !important;
        }
    }
}


/* =========================================
   AWARDS & ACCREDITATIONS
   ========================================= */

.awards-title {
    font-size: 1.75rem;
    font-weight: 700;
}

.awards-description {
    font-size: 16px;
    line-height: 1.6;
    max-width: 900px;
}

/* --- ITEM LAYOUT (Global - Mobile & Desktop) --- */

.awards-item {
    /* No padding, handled by internal elements */
}

/* Logo Wrapper */
.awards-logo-wrap {
    /* 1. Size */
    width: 180px;

    /* 2. Border (The Line) - ALWAYS VISIBLE */
    border-right: 1px solid #E5E5E5;
    padding-right: 2.5rem; /* More space inside border */
    margin-right: 2.5rem; /* More space outside border */

    /* 3. Center the Logo Vertically in this box */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Logo Image */
.awards-logo-wrap img {
    max-width: 100%;
    height: auto;
    /* Max height INCREASED (was 100px) */
    max-height: 100px;
    object-fit: contain;
}

/* Text Content */
.awards-content {
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 340px;
}

.awards-content a {
    color: #0068D6;
    text-decoration: none;
    font-weight: 500;
}

.awards-content a:hover {
    text-decoration: underline;
}


/* --- MOBILE SPECIFIC TWEAKS --- */
@media (max-width: 575.98px) {
    /* Tighten spacing slightly on very small screens */
    .awards-logo-wrap {
        width: 90px; /* Smaller width for mobile */
        padding-right: 1rem;
        margin-right: 1rem;
    }

    /* Add separator line between stacked items (horizontal) */
    .awards-col:not(:last-child) .awards-item {
        padding-bottom: 2rem;
        border-bottom: 1px solid #f9f9f9; /* Very subtle divider between rows */
        margin-bottom: 1rem;
    }

    .d-flex.align-items-center.h-100 > div p:nth-of-type(2) {
        font-size: 13px;
    }
}


/* =========================================
   LEADERSHIP TEAM
   ========================================= */

.leadership__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-color);
}

/* --- SHARED TYPOGRAPHY --- */
.leader-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 0.25rem;
}

.leader-name.large {
    font-size: 1.5rem; /* Bigger for featured */
    margin-bottom: 0.5rem;
}

.leader-role {
    font-size: 0.95rem;
    color: var(--text-color);
    margin-bottom: 0;
}


/* --- FEATURED LEADER (Split Layout) --- */

.leader-featured__img-wrap {
    width: 100%;
    aspect-ratio: 3 / 3; /* SAME AS TEAM IMAGES */
    position: relative;
    overflow: hidden;
    max-width: calc(100% - 30px);
}

.leader-featured__img-wrap img {
    /* Ensure image covers area without distortion */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Content Area */
.leader-featured__content-wrap {
    max-width: 470px;
}

/* Quote Styling */
.leader-featured__quote {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-color);
    position: relative;
}

.quote-text {
    p {
        font-size: 18px;
        font-weight: 600;
    }
}

.quote-mark {
    margin-bottom: 7px;
    width: 18px;
    height: auto;
    display: block;
}

.quote-mark.start {
    display: block;
}


/* Position Start Quote */
.quote-mark.start {
    top: -20px;
    left: -20px;
}

/* Position End Quote & Rotate it */
.quote-mark.end {
    margin-left: auto;
}

/* Ensure text is above the quotes if they overlap */
.quote-text {
    position: relative;
    z-index: 1;
}


/* --- TEAM GRID --- */

.team-card__img-wrap {
    width: 100%;
    /* Portrait Aspect Ratio (Tall) */
    aspect-ratio: 3 / 3;
    overflow: hidden;
    /*background-color: #f4f4f4;*/
}

.team-card__img-wrap img {
    transition: transform 0.5s ease;
    object-fit: cover;
}

/* Hover Zoom */
.team-card:hover .team-card__img-wrap img {
    transform: scale(1.05);
}


/* --- MOBILE RESPONSIVE --- */
@media (max-width: 1600px) {
    /*.leader-featured__img-wrap {*/
    /*    max-width: 486px;*/
    /*}*/
}

@media (max-width: 1400px) {
    /*.leader-featured__img-wrap {*/
    /*    max-width: 416px;*/
    /*}*/
}


@media (max-width: 991px) {

    .leader-featured__img-wrap {
        min-height: 350px; /* Shorter on mobile */
        /*aspect-ratio: 4/3;*/
        max-width: unset;
    }

    .leader-featured__content-wrap {
        padding: 2rem 1rem;
        flex-direction: column-reverse !important;
        gap: 20px;
    }

    .quote-mark {
        font-size: 1.5rem;
    }

    .quote-text {
        p {
            font-weight: 600;

            br {
                display: none
            }
        }
    }
}


/* =========================================
   SERVICES STRIP COMPONENT
   ========================================= */

.services-strip-section {
    width: 100%;
    overflow: hidden;
}

.services-strip-row {
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

/* --- IMAGE SIDE --- */
.services-strip__image-col {
    background-color: #fff;
    /*padding: 3rem;*/
    position: relative;
    z-index: 3;
}

/* --- IMAGE CARD --- */
.services-strip__image-card {
    position: relative;
    width: 100%;
    max-width: 368px;
    min-height: 375px;
    overflow: hidden;
    box-shadow: 0 344px 96px 0 rgba(146, 173, 200, 0.00), 0 220px 88px 0 rgba(146, 173, 200, 0.02), 0 124px 74px 0 rgba(146, 173, 200, 0.07), 0 55px 55px 0 rgba(146, 173, 200, 0.11), 0 14px 30px 0 rgba(146, 173, 200, 0.13);
}

/*@media (min-width: 1700px) {*/
/*    .services-strip__image-card {*/
/*        max-width: 385px;*/
/*        min-height: 380px;*/
/*    }*/
/*}*/

/* 4. XXL Screens (1600px - 1700px) */
@media (min-width: 1600px) and (max-width: 1700px) {
    .services-strip__image-card {
        max-width: 385px;
        min-height: 380px;
    }
}


/* make sure no fixed height is forcing crop */
@media (min-width: 992px) {
    .services-strip__image-card {
        /*height: auto !important;*/
        margin-top: -120px; /* adjust overlap only, not size */
    }
}

.services-strip__image-card > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.stripe-img-big {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.services-strip__image-card > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- LOGO STRIPE --- */
.services-strip__logo-box {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;

    /* Fixed Height for the bar */
    height: 78px;

    background-color: #0C4C8F;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    padding: 13px 32px;
}

.services-strip__logo-img {
    /* Ensure it doesn't overflow horizontally */
    max-width: 100%;

    /* Force it to use all available vertical space defined by the box height - padding */
    height: 100%;
    width: auto; /* Maintain aspect ratio */

    object-fit: contain;
}

/* old modifiers kept for safety but no-op */
.services-strip__logo-box.logo-bottom-right,
.services-strip__logo-box.logo-bottom-left {
    left: 0;
    right: 0;
}

/*LAST LOGO BOX SPECIFIC */
.services-strip__logo-box.logo-bottom-right.logo-box-large img{
    min-height: 71px;
}

/* --- TEXT SIDE / BLUE STRIPE --- */
.services-strip__text-col {

    position: relative;
    z-index: 1;
}

.services-strip__content-inner {
    padding: 4rem 6.5rem;
    /* max-width: 650px; */
    margin: 0 auto;
    background-color: #F3F9FF;
    /*min-height: 420px;*/
}

/* Typography */
.services-strip__title {
    font-size: 2rem;
    font-weight: 700;
    color: #404040;
}

.services-strip__subtitle {
    font-size: 1.1rem;
    font-weight: 400;
    color: #404040;
    margin-top: 5px;
}

.services-strip__desc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-color);
    max-width: 900px;
}

.services-strip__link {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0068D6;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: 0.2s;
}

.services-strip__link:hover {
    color: var(--text-color);
    transform: translateX(5px);
}

/* --- DESKTOP ALIGNMENT & OVERLAP --- */
@media (min-width: 992px) {

    /* blue stripe > 50% width */
    .services-strip-row > .services-strip__text-col {
        flex: 0 0 72%;
        max-width: 72%;
    }

    .services-strip-row > .services-strip__image-col {
        flex: 0 0 28%;
        max-width: 28%;
    }

    /* overlap image card onto blue stripe */
    .services-strip__image-col.justify-content-lg-end .services-strip__image-card {
        margin-right: -90px;
        margin-top: -70px;
    }

    .services-strip__image-col.justify-content-lg-start .services-strip__image-card {
        margin-left: -90px;
        margin-top: -70px;
    }

    .order-lg-2.services-strip__text-col .services-strip__content-inner {
        margin-left: 0;
    }

    .order-lg-1.services-strip__text-col .services-strip__content-inner {
        /*margin-left: auto;*/
        /*margin-right: 0;*/
        /*padding: 3rem 12.5rem;*/
        padding-left: calc(4rem + ((100vw - 10rem) / 12)) !important;
    }


    .services-strip__image-card {
        /*height: 430px; !* adjust until it matches exactly *!*/
    }
}

@media (max-width: 1600px) {
    .stripe-img-big {
        min-height: 310px;
        object-position: left center;
    }

    .services-strip__image-col.justify-content-lg-end .services-strip__image-card {
        margin-right: -100px;
    }

    .services-strip__image-col.justify-content-lg-start .services-strip__image-card {
        margin-left: -100px;
    }
}

@media (min-width: 1200px) and (max-width: 1400px) {
    .services-strip__image-col.justify-content-lg-end .services-strip__image-card {
        margin-right: -79px;
    }

    .services-strip__image-col.justify-content-lg-start .services-strip__image-card {
        margin-left: -79px;
    }

    .services-strip__image-card {
        max-width: 345px;
    }

    .order-lg-1.services-strip__text-col .services-strip__content-inner {
        padding-left: calc(3rem + ((100vw - 14rem) / 12)) !important;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .services-strip-row > .services-strip__text-col {
        flex: 0 0 74%;
        max-width: 74%;
    }

    .services-strip-row > .services-strip__image-col {
        flex: 0 0 26%;
        max-width: 26%;
    }

    .services-strip__content-inner {
        padding: 2rem 6rem;
    }

    .services-strip__image-col.justify-content-lg-end .services-strip__image-card {
        margin-right: -30px;
    }

    .services-strip__image-col.justify-content-lg-start .services-strip__image-card {
        margin-left: -30px;
    }

    .services-strip__image-card {
        min-height: 345px;
    }

    /*LEFT SIDE TEXT*/
    .order-lg-1.services-strip__text-col .services-strip__content-inner {
        padding-left: calc(0rem + ((100vw - 21rem) / 12)) !important;
    }
}

/* --- MOBILE --- */
@media (max-width: 991px) {
    .services-strip__image-col {
        padding: 3rem 1.5rem 0 1.5rem;
    }

    .services-strip__image-card {
        max-width: 100%;
        /*aspect-ratio: 4/3;*/
    }

    .services-strip__image-col.justify-content-lg-start .services-strip__image-card {
        margin-left: 0;
    }

    .services-strip__logo-box {
        height: 75px;
    }

    .services-strip__content-inner {
        padding: 4rem 1.5rem;
    }

    /* Target ONLY the first row */
    .services-strip-section > div:first-child .services-strip__image-col {
        padding: 0 1.5rem;
        margin-top: 0rem;
        justify-content: center !important;
    }

    /*.services-strip__image-col {*/
    /*    padding: 0 1.5rem; !* Side padding only *!*/
    /*    margin-top: -1rem;*/
    /*    justify-content: center !important; !* Center image *!*/
    /*}*/
    /* Apply this style to all rows EXCEPT the very first one in the section.
       We target the direct child div of the section which represents each row wrapper.
    */
    .services-strip-section > div:not(:first-child) .services-strip__image-col {
        padding: 0 1.5rem;
        margin-top: -3rem;
        justify-content: center !important;
    }

    /* 2. Create the Overlap */
    .services-strip__image-card {
        max-width: 100%;
        /* Pull the text box up by 80px */
        margin-bottom: -80px;
        /* Ensure image sits ON TOP of the blue box */
        position: relative;
        z-index: 5;
        /* Optional: add slight shadow to separate layers if needed */
        box-shadow: 0 9px 38px 0 rgba(146, 173, 200, 0.60);
    }

    /* 3. Adjust Text Box Padding */
    .services-strip__content-inner {
        /* Add extra top padding (pt-6rem) to compensate for the overlap */
        padding: 7rem 1.5rem 4rem 1.5rem;
    }

    /* 4. Reset alignments */
    .services-strip__image-col.justify-content-lg-start .services-strip__image-card,
    .services-strip__image-col.justify-content-lg-end .services-strip__image-card {
        margin-left: 0;
        margin-right: 0;
        margin-top: 0; /* Reset desktop negative margins */
    }

    .services-strip__title {
        font-size: 26px;
    }
}

/* Add to your CSS */
/*@media (min-width: 992px) {*/
/*    .order-lg-1.services-strip__text-col .services-strip__content-inner {*/
/*        padding-left: calc(3rem + ((100vw - 1200px) / 12)) !important;*/
/*    }*/
/*}*/

/*@media (min-width: 1200px) and (max-width: 1400px) {*/
/*    .order-lg-1.services-strip__text-col .services-strip__content-inner {*/
/*        padding-left: calc(1rem + ((100vw - 1200px) / 12)) !important;*/
/*    }*/
/*}*/
/* Fix alignment for screens below 1600px */
@media (max-width: 1599px) {
    .services-strip__image-col.justify-content-lg-end {
        padding-left: 1.5rem !important;
    }
}

/* Adjust for smaller desktop screens */
@media (min-width: 1200px) and (max-width: 1400px) {
    .services-strip__image-col.justify-content-lg-end {
        padding-left: 1.5rem !important;
    }

    /*.services-strip__image-col.justify-content-lg-end .services-strip__image-card {*/
    /*    margin-right: -70px;*/
    /*}*/
}

/* Laptop screens */
@media (min-width: 992px) and (max-width: 1200px) {
    .services-strip__image-col.justify-content-lg-end {
        padding-left: 1rem !important;
    }

    .services-strip__image-col.justify-content-lg-end .services-strip__image-card {
        margin-right: -30px;
    }
}

/* For XXL screens maintain the alignment */
@media (min-width: 1600px) {
    .services-strip__image-col.justify-content-lg-end {
        padding-left: 3rem !important;
    }

    .services-strip__image-card .stripe-img-big {
        min-height: 310px;
    }
}


/***** FORM COMPONENT *****/
/* =========
   CONTACT STRIP SECTION
   ========= */
.contact-strip {
    position: relative;
    overflow: hidden;
    color: #fff;
}

/* Gradient background */
.contact-strip__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #0d4f7f 0%, #1ea5c9 100%);
    z-index: 0;
}

.contact-strip__inner {
    position: relative;
    z-index: 1;
    justify-content: space-between;
    gap: 4rem;
    padding: 4rem 0;
}

/* Left title block */
.contact-strip__heading {
    min-width: 180px;
    margin-top: -8px;
}

.contact-strip__dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: #ffffff;
    margin-bottom: 1.5rem;
}

.section-dot.white {
    background: #fff;
}

.contact-strip__title {
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0;
    color: #fff;
}

/* Right side – form container */
.contact-strip__form {
    flex: 1 1 auto;
}

/* =========
   GRAVITY FORM LAYOUT
   ========= */
.contact-strip .gform_wrapper {
    margin: 0 !important;
    color: #fff;
}

/* Form Container */
.contact-strip .gform_wrapper form {
    position: relative;
    margin: 0;
    grid-column: -1 / -2;
}

.gform-body.gform_body {
    width: 100%;
    position: relative;
}

/* Hide default title / description */
.contact-strip .gform_heading {
    display: none;
}

/* 1. GRID LAYOUT: 1fr 1fr 2fr (Wide 3rd column) */
.contact-strip .gform_fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
    column-gap: 2.5rem;
    grid-row-gap: 45px !important;
    row-gap: 2rem;
    align-items: end;
}

.contact-strip .gfield {
    position: relative;
    padding-bottom: 2px;
    margin: 0 !important;
}

/* 2. BUTTON SPACE: Ensure last field text doesn't hit the button */
.contact-strip .gfield:last-child input,
.contact-strip .gfield:last-child select {
    padding-right: 60px !important;
}

/* =========
   FLOATING LABELS
   ========= */
.contact-strip .gfield_label {
    position: absolute;
    left: 0;
    top: 8px; /* Resting position inside input */
    font-size: 0.8rem; /* Your original size */
    text-transform: capitalize;
    letter-spacing: .06em;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    pointer-events: none;
    transition: all 0.3s ease;
    margin: 0 !important;
}

/* Active State (Floating up) */
.contact-strip .gfield:focus-within .gfield_label,
.contact-strip .gfield.has-content .gfield_label {
    top: -20px; /* Move up */
    font-size: 0.7rem;
    color: #fff !important;
    opacity: 1;
}


/* =========
   INPUTS
   ========= */
.contact-strip .gfield input[type="text"],
.contact-strip .gfield input[type="email"],
.contact-strip .gfield input[type="tel"],
.contact-strip .gfield select,
.contact-strip .gfield textarea {
    width: 100% !important;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
    background: transparent;
    /* Restored your exact padding */
    padding: .35rem 0 .5rem 0;
    color: #fff;
    border-radius: 0;
    outline: none;
    box-shadow: none !important;
    font-size: .9rem;
    line-height: 1.5;
}

/* Placeholder color (Hidden to allow float label to work visually) */
.contact-strip .gfield input::placeholder,
.contact-strip .gfield textarea::placeholder {
    color: transparent;
}

/* Focus state */
.contact-strip .gfield input:focus,
.contact-strip .gfield select:focus,
.contact-strip .gfield textarea:focus {
    border-bottom-color: #ffffff;
}

/* Select dropdown arrow - Using SVG for clean look like screenshot */
.contact-strip .gfield select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-position: right 0 center;
    background-size: 14px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.contact-strip .gfield select option {
    background-color: #ffffff;
    color: #222;
}

/* =========
   SUBMIT BUTTON (Positioned Absolute Bottom Right)
   ========= */
.contact-strip .gform_footer,
.contact-strip .gform_page_footer {
    position: absolute;
    bottom: -40px;
    right: 30px;
    margin: 0 !important;
    padding: 0 !important;
    width: 44px;
    height: 44px;
    z-index: 10;
    justify-content: flex-end; /* Ensure alignment */
}

/* Circle button */
/* 1. Reset & Base Button Style */
.contact-arrow-btn {
    /* Reset default browser button styles */
    appearance: none;
    -webkit-appearance: none;
    border: none;
    cursor: pointer;

    /* Shape & Size */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;

    /* Colors */
    background-color: #FFFFFF;

    /* Optional: Add a subtle shadow to make it pop like a button */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

    /* Smooth hover transition */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 2. The Arrow Icon (Using your SVG) */
.contact-arrow-btn__icon {
    display: block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M3.75 9.41406C3.4264 9.41406 3.16406 9.67641 3.16406 10C3.16406 10.3236 3.4264 10.5859 3.75 10.5859V9.41406ZM3.75 10.5859H16.25V9.41406H3.75V10.5859Z' fill='%230C4C8F'/%3E%3Cpath d='M11.5625 5.3125L16.25 10L11.5625 14.6875' stroke='%230C4C8F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Hover */
.contact-strip .gform_button:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
}

/* ========
   VALIDATION / ERRORS
   ======== */
.contact-strip .gform_validation_errors {
    background: rgba(255, 255, 255, .14);
    border: 0;
    color: #fff;
    display: none !important;
}

/* Inline Error Text */
.contact-strip .gfield_description.validation_message,
.gform_wrapper.gravity-theme .gfield_description.validation_message {
    color: #ffdddd !important;
    font-size: .75rem !important;
    margin-top: .25rem;
    position: absolute;
    bottom: -20px;

    left: 0;
    border: none;
    padding: 0 !important;
    background: transparent !important;
}

span.gfield_required.gfield_required_text {
    display: none !important;
}

/* Gravity Forms select options */
.ginput_container_select select.gfield_select option:checked,
.ginput_container_select select.gfield_select option:focus,
.ginput_container_select select.gfield_select option:hover {
    background-color: #2b63e0;
    color: #ffffff;
}

/* 1. Move the floating LABEL ("Phone No.") away from the red border */
body .gform_wrapper .gfield_error .gfield_label {
    left: 4px !important;
}

/* --- Spinner --- */
#gform_ajax_spinner_1 {
    position: absolute !important;
    top: 44% !important;
    left: 0px !important;
    right: auto !important;
}

/* Confirmation Message */
#gform_confirmation_message_1 {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    color: #fff;
    border: 1px solid #fff;
    padding: 1.5rem;
    background-color: transparent;
    width: 100%;
    margin-top: 0;
}

/* 1. Setup the layout to align checkbox and text side-by-side */
#field_1_8 .ginput_container_consent {
    display: flex;
    align-items: flex-start; /* This ensures the box aligns with the top line of text */

    /*div#validation_message_1_8 {*/
    /*    left: 27px;*/
    /*    bottom: -28px;*/
    /*}*/
    max-width: 920px;
}

/* 2. Style the Checkbox itself */
#field_1_8 .ginput_container_consent input[type="checkbox"] {
    margin-top: 4px;     /* Push the box down slightly to match the first line of text */
    margin-right: 12px;  /* Space between the checkbox and the text */
    width: 16px;         /* Fixed width */
    height: 16px;        /* Fixed height */
    flex-shrink: 0;      /* Prevents the checkbox from getting squished */
    cursor: pointer;
}

/* 3. Style the Text (Label) to be smaller */
#field_1_8 .gfield_consent_label {
    font-size: 13px;     /* Smaller font size like the reference */
    line-height: 1.6;    /* More space between lines for readability */
    color: #ffff;      /* Dark Grey text. Change to #ffffff if your background is blue */
    font-weight: 400;    /* Normal font weight */
    margin: 0;           /* Clean up default margins */
    text-align: start;
}

/* 4. Style the Links (Terms & Privacy) */
#field_1_8 .gfield_consent_label a {
    text-decoration: underline;
    color: inherit;      /* Inherits the color of the label text */
    font-weight: 600;    /* Makes the links slightly bolder */
}

span#cn-notice-text {
    max-width: 990px;
}

span#cn-notice-text {
    max-width: 990px;
}

@media (max-width: 992px) {
    .contact-strip .gfield_description.validation_message, .gform_wrapper.gravity-theme .gfield_description.validation_message {
        margin-top: 0.25rem;
        margin-bottom: 0rem;
        padding-bottom: 90px;
        position: static;
        text-align: start;
    }
}

/*!* =========*/
/*   CUSTOM TAG DROPDOWN (Area of Interest)*/
/*   ========= *!*/

.custom-select-wrapper {
    position: relative;
    width: 100%;
    z-index: 100; /* Ensure wrapper creates a stacking context */
}

.custom-select-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    padding: 5px 0 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.custom-select-trigger::after {
    content: '';
    width: 10px;
    height: 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.3s;
}

.custom-select-wrapper.open .custom-select-trigger::after {
    transform: rotate(180deg);
}

/* THE PANEL - ABSOLUTE POSITIONING FLOATS OVER CONTENT */
.custom-select-dropdown {
    position: absolute !important; /* Changed from relative to absolute */
    top: 100%; /* Anchor to bottom of trigger */
    left: 0;
    right: 0;
    width: 100%;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 999; /* Ensure it sits on top of other elements */

    /* Animation: Fade in + Slide down */
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(10px); /* Start slightly lower */
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    margin-top: 0;
    padding: 0;

    /* Content Layout */
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* OPEN STATE */
.custom-select-wrapper.open .custom-select-dropdown {
    max-height: 190px; /* Allow height to grow */
    opacity: 1;
    visibility: visible;
    padding: 11px;
    margin-top: 10px; /* Add spacing between line and box */
    overflow-y: auto; /* Scroll if content is too tall */
}

/* PILLS */
.custom-option-pill {
    border-radius: 80px;
    background: rgba(216, 225, 237, 0.35);
    color: var(--text-color);
    padding: 6px 5px;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.custom-option-pill:hover {
    background: #e2e6ea;
}

.custom-option-pill.selected {
    background: #0068D6;
    color: #fff;
}

@media (max-width: 763px) {
    /* PILLS */
    .custom-option-pill {
        border-radius: 80px;
        background: rgba(216, 225, 237, 0.35);
        color: var(--text-color);
        padding: 6px 8px 6px 8px;
        font-size: 14.5px;
        font-weight: 600;
        cursor: pointer;
        transition: 0.2s;
    }
}

/* =========================================
   FORM EXPANSION LOGIC
   ========================================= */

/* 1. When Expanded: Allow overflow and force height growth */
.contact-strip.is-expanded {
    overflow: visible !important; /* Critical: Lets the dropdown stick out or push */
    /* Add padding-bottom so the dropdown has physical space inside the blue strip */
    padding-bottom: 220px !important;
    transition: padding-bottom 0.4s ease; /* Smooth growth */
}

/* 2. When Expanded: Align fields to the top */
.contact-strip.is-expanded .gform_fields {
    align-items: start !important; /* Move fields up */
    transition: align-items 0.3s ease;
}

/* 3. OPTIONAL: If you want the blue background to grow with it */
.contact-strip.is-expanded .contact-strip__bg {
    height: 100%; /* Ensure bg covers the new height */
}


/* =========================================
   COUNTRY SELECTOR (Standard Vertical List)
   ========================================= */

/* Wrapper */
.country-select-wrapper {
    position: relative;
    width: 100%;
    z-index: 101; /* Higher z-index to ensure it floats over other fields */
}

/* The Trigger (looks like the input line) */
.country-select-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    padding: 5px 0 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    min-height: 38px;
}

/* Small Arrow Icon */
.country-select-trigger::after {
    content: '';
    width: 10px;
    height: 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.3s;
}

/* Rotate arrow when open */
.country-select-wrapper.open .country-select-trigger::after {
    transform: rotate(180deg);
}

/* The Dropdown List (Floating White Box) */
.country-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto; /* Scrollable */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 999;

    /* Animation: Hidden by default */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
    margin-top: 5px;
    padding: 5px 0;
    display: block; /* Standard block layout for vertical list */
}

/* Open State */
.country-select-wrapper.open .country-select-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* List Items */
.country-option-item {
    padding: 8px 15px;
    color: #333; /* Dark text */
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
    display: block;
    width: 100%;
    text-align: start;
}

/* Hover & Selected State */
.country-option-item:hover,
.country-option-item.selected {
    background-color: #f0f0f0; /* Light grey hover */
    color: #000;
    font-weight: 500;
}

/* Custom Scrollbar for the list */
.country-select-dropdown::-webkit-scrollbar {
    width: 6px;
}

.country-select-dropdown::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 3px;
}

@media (max-width: 763px) {

}


/* =========================================
   FLOATING LABELS
   ========================================= */
.contact-strip .gfield_label {
    position: absolute;
    left: 0;
    top: 5px;
    font-size: 16px;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    pointer-events: none;
    transition: all 0.3s ease;
    margin: 0 !important;
    text-transform: capitalize;
}

.contact-strip .gfield:focus-within .gfield_label,
.contact-strip .gfield.has-content .gfield_label {
    top: -22px;
    font-size: 13px;
    color: #fff !important;
    opacity: 1;
}


/* =========================================
   CONTACT RESPONSIVE MEDIA QUERY
   ========================================= */
@media (max-width: 1600px) {
    .contact-strip .gform_footer, .contact-strip .gform_page_footer {
        /*bottom: 0;*/
        right: 0;
    }
}

@media (max-width: 991.98px) {
    .contact-strip__inner {
        display: block;
        text-align: center;
        padding: 3rem 0;
    }

    .contact-strip__heading {
        margin-bottom: 2rem;
    }

    .contact-strip .gform_fields {
        /* Reset grid to 2 equal columns on tablet */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1.5rem;
        row-gap: 2rem;
    }

    /* Remove padding from last field on mobile */
    .contact-strip .gfield:last-child input,
    .contact-strip .gfield:last-child select {
        padding-right: 0 !important;
    }
}

@media (max-width: 600px) {
    .contact-strip .gform_fields {
        grid-template-columns: 1fr !important; /* 1 column on phone */
        grid-row-gap: 45px !important;
    }

    /* Align button to the right on phone */
    .contact-strip .gform_footer {
        justify-content: flex-end;
    }

    .contact-strip__title {
        font-size: 26px;
        font-weight: 700;
        text-align: start;
    }


    /* Fix spinner position on mobile */
    #gform_ajax_spinner_1 {
        position: absolute !important;
        top: auto !important;
        left: auto !important;
        display: inline-block !important;
        vertical-align: middle;
        margin-left: 10px;
    }

    /* Make footer flex to align button and spinner */
    .contact-strip .gform_footer,
    .contact-strip .gform_page_footer {
        bottom: 0;
        right: 0;
        position: static;
        margin-right: auto !important;
        width: 100%;
        margin-top: 1rem !important;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }


    .contact-strip__bg {
        background: linear-gradient(157deg, var(--Eldan-Blue, #0C4C8F) 4.63%, #00A7BD 123.05%);
    }
}

@media (max-width: 576px) {
    .custom-select-dropdown {
        position: fixed;
    }

    .country-select-wrapper.open .country-select-dropdown {
        position: relative;
    }
}


div#field_1_1 {
    grid-column: span 3;
}

div#field_1_3 {
    grid-column: span 3;
}

div#field_1_4 {
    grid-column: span 5;
}

div#field_1_5 {
    grid-column: span 3;
}

div#field_1_6 {
    grid-column: span 3;
}

div#field_1_7 {
    grid-column: span 5;
}


/* =========
   FOOTER BASE
   ========= */
.site-footer {
    position: relative;
    overflow: hidden;
    background-color: #e8f1fb; /* base light blue */
    color: #1b2e40;
    font-size: 14px;
}

/* image + blend layer */
.footer-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1.18;
    mix-blend-mode: soft-light;
    filter: blur(0);
    pointer-events: none;
}

/* content sits above */
.footer-inner,
.footer-bottom {
    position: relative;
    z-index: 1;
}

/* top area */
.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 5rem;
    padding: 4rem 0 2rem;
}

/* left column */
.footer-left {
    max-width: 420px;
}

.footer-logo img {
    max-width: 190px;
    height: auto;
    display: block;
    margin-bottom: 1.5rem;
}

.footer-text {
    line-height: 1.6;
    margin-bottom: 1.75rem;
}

/* socials */
.footer-social__title {
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.footer-social__icons {
    display: flex;
    gap: 0.75rem;
    align-items: center; /* Change this from 'baseline' */
}

/* Keep the rest as is */
.footer-social__link img {
    width: 18px;
    height: 18px;
    display: block;
}

.footer-social__link:nth-of-type(2) img {
    height: 17px;
    position: relative;
    top: 2px;
}

.footer-social__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-color);
    display: block;
}

/* nav area - 4 columns like design */
.footer-nav {
    flex: 1 1 auto;
}

.footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 3rem;
    row-gap: 1.5rem;
}

.footer-menu > li {
    list-style: none;
}

/* each first level item behaves like a column title with nested list */
.footer-menu > li > a {
    display: block;
    font-weight: 600;
    margin-bottom: 0.75rem;
    text-decoration: none;
    color: var(--text-color);
}

/* if you use submenus for the list under each title */
.footer-menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-menu .sub-menu li {
    margin-bottom: 0.35rem;
}

.footer-menu .sub-menu a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 400;
}

.footer-menu a:hover {
    text-decoration: underline;
}

/* bottom strip */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*padding: 1.5rem 0 2rem;*/
    font-size: 13px;
    color: var(--text-color);
}

.footer-bottom__right {
    font-weight: 500;
    display: flex;
    align-items: start;
    gap: .3rem;
    font-size: 15px;
    color: var(--text-color);
}

/* Parent links */
.footer-menu > li.menu-item-has-children > a {
    position: relative;
    display: inline-block;
    padding-bottom: 14px; /* Make room for the bar */
}

/* The small grey bar */
.footer-menu > li.menu-item-has-children > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 12px;
    height: 4px;
    background: var(--text-color);
}


/* ====== Responsive ====== */
@media (max-width: 1201px) {
    .footer-menu {
        column-gap: 2rem;
        row-gap: 1.5rem;
    }

}

@media (max-width: 991.98px) {
    .footer-inner {
        flex-direction: column;
        gap: 3rem;
    }

    /*.footer-menu {*/
    /*    grid-template-columns: repeat(2, minmax(0, 1fr));*/
    /*}*/
    .footer-left {
        max-width: 570px;
    }
}

@media (max-width: 575.98px) {
    .footer-menu {
        grid-template-columns: 1fr 1fr;
        column-gap: 1.5rem;
        /*place-items: center;*/
    }

    .footer-nav {
        flex: 1 1 auto;
        width: 100%;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1.2rem;
        text-align: center;
        align-items: start;
    }

    .footer-left {
        order: 3;
    }

    .footer-inner {
        padding: 4rem 0 0rem;
    }
}


/***** GENERAL MEDIA QUERY *****/

@media (max-width: 1401px) {


}


@media (max-width: 993px) {

}

@media (max-width: 768px) {
    /*.hero-divider {*/
    /*    position: static;*/
    /*    font-size: 2.5rem;*/
    /*    font-weight: 700;*/
    /*}*/
}

@media (max-width: 600px) {


    .hero-glass-right p {
        font-size: 18px;
    }

    .clients .swiper-slide img {
        height: 2rem;
    }

    .section-top {
        margin-top: 4.6rem;
    }

    h2 {
        /*font-size: 30px;*/
        font-size: 26px;
        letter-spacing: -0.26px;
    }
}


/*.page-id-309 {*/
/*    .logo__slider-instance:not(.swiper-initialized) .swiper-wrapper {*/
/*        justify-content: start;*/
/*        padding: 0 15px;*/
/*    }*/
/*}*/

/*ABOUT US PAGE*/
.page-id-85 {
    /*@media (max-width: 768px) {*/
    /*    .text-block-title.smaller {*/
    /*        font-size: 32px;*/
    /*        font-weight: 700;*/
    /*    }*/
    /*}*/

    .text-image-link {
        color: #007E8F;
    }

}

/*OUR PARTNER PAGE*/
.page-id-407 {
    .text-block-left {
        max-width: 400px;

        .section-dot {
            display: none;
        }
    }
}

/*CAREER PAGE*/
.page-id-348 {
    @media (max-width: 992px) {


        .text-image-content {
            .text-block-title.smaller {
                font-size: 19px;
            }
        }
    }
}


.page-template-healthcare-services {
    .mobile-read-more {
        color: #007E8F;
    }
}