/*
Theme Name: Hestia Child
Theme URI: https://www.themeisle.com/
Description: This is a custom child theme I have created.
Author: ThemeIsle
URI: https://www.themeisle.com/
Template: hestia
Version: 0.1
*/
:root {
    --color-primary: #304a82; /* 48, 74, 130 */
    --color-primary-dark: #1d2d50; /* 29, 45, 80 */
    --color-primary-light: #4267b5;

    --button-blue: #2563eb;

    --gtuit-green: #97cd78; /* 151, 205, 120 */

    --color-background: #f7f7f7; /* 247, 247, 247 */
    --color-background-alt: #fdfdfd; /* 253, 253, 253 */

    --color-surface: #ffffff; /* 255, 255, 255 */

    --color-text: #535252; /* 33, 33, 33 */
    --color-text-light: #ffffff; /* 255, 255, 255 */

    --color-border: #e0e0e0; /* 224, 224, 224 */

    --color-error: #d32f2f; /* 211, 47, 47 */
    --color-warning: #ffa000; /* 255, 160, 0 */
    --color-success: #388e3c;

    --color-secondary: #e5e7eb; /* Tailwind's gray-200 / a soft, modern grey */
    --color-secondary-hover: #d1d5db; /* 56, 142, 60 */
}

.navbar-header {
    padding: 5px; /* Optional: adds space inside image box */
}

nav a {
    font-weight: 600 !important;
}


/* Navbar Hover (Primary Green) */
.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li.active > a {
    color: var(--color-primary) !important;
}

/* Frosted translucent white navbar */
/* header *only* when scrolled right at the top */
.navbar.is-at-top {
    background: #ffffff !important;      /* solid white */
    backdrop-filter: none;               /* remove blur */
    -webkit-backdrop-filter: none;
    transition: background 0.3s ease;
}

/* current style once you scroll down (already exists) */
.navbar.navbar-not-transparent {
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background 0.3s ease;
}

.navbar.menu-open {
    background-color: rgba(247, 247, 247, 0.8);
    -webkit-backdrop-filter: saturate(150%) blur(15px);
    backdrop-filter: saturate(150%) blur(15px);
    color: #fff !important;

    box-shadow: none !important;
}

/* Optional: override hover colors in menu state */
.navbar.menu-open .navbar-nav > li > a {
    color: var(--color-text) !important;
}

.navbar.menu-open .navbar-nav > li > a:hover {
    color: var(--gtuit-green, #3ca661) !important;
}


/* Primary Button Styling */
.btn-primary {
    font-weight: bold;
    color: var(--color-surface) !important;             /* white text */
    background-color: var(--color-primary) !important;  /* solid blue */
    border: 2px solid var(--color-primary);
    border-radius: 6px;
    backdrop-filter: blur(2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; /* subtle lift */
    margin: 0
}
.btn-primary:hover{
    box-shadow: 0 4px 12px var(--color-primary-dark) !important; /* subtle lift */

}
.btn-secondary {
    font-weight: bold;
    color: var(--color-primary) !important;             /* blue text */
    background:var(--color-background);              /* just a hint of tint */

    border: 2px solid var(--color-primary);
}

.btn-secondary:hover{
    color: var(--color-primary) !important;             /* blue text */
    box-shadow: 0 4px 12px var(--color-primary-dark) !important; /* subtle lift */
}


@media (max-width: 768px) {
    .navbar-collapse.collapse.in {
        display: block !important;
        max-height: none !important;
    }

    /* Always use this text color */
    .navbar .navbar-nav > li > a {
        color: var(--color-text) !important;
    }

    /* (optional) you can drop these;
       they’re now redundant) */
    .navbar .navbar-nav > li > a:hover,
    .navbar .navbar-nav > li.active > a {
        color: var(--color-text) !important;
    }
}
/*!* =====  adjust this breakpoint to the width where you want to collapse  ===== *!*/
@media (max-width: 1200px) {

    /* make the whole header span the full bar */
    .navbar-header {
        float: none;          /* kill the Bootstrap left-float   */
        width: 100%;          /* let it occupy the full line     */
        display: flex;        /* side-by-side layout             */
        align-items: center;  /* vertical centering              */
        justify-content: space-between; /* logo left, toggle right  */
    }

    /* keep the logo from growing wider than the bar */
    .title-logo-wrapper img {
        max-height: 60px;     /* tweak to your exact logo height */
        height: auto;
    }

    /* push the hamburger hard right */
    .navbar-toggle-wrapper {
        margin-left: auto;    /* flex “push” */
        display: flex;
        align-items: center;  /* vertical centering for the button */
    }

    /* make sure the button always shows in this range */
    .navbar-toggle {
        display: block !important;
        padding: 8px 10px;    /* trim if you need a tighter fit */
        margin: 0;
        line-height: 1;
    }

    /* hide the full menu until the toggle is hit */
    #main-navigation {
        display: none !important;
    }
    #main-navigation.in {   /* Bootstrap adds .in when opened */
        display: block !important;
    }


}

.navbar-nav > li.menu-toggle {
    display: none !important;
}
/* Transparent Button (slightly green tint) */
.btn-transparent {
    background-color: rgba(29, 45, 80, 0.3) !important; /* Slightly tinted from primary */
    border-radius: 10px;
    padding: 0 20px;
}


h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: var(--color-text);
}

/* ===== global particle background ===== */
#particles-js {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -3; /* sits behind everything */
    pointer-events: none; /* don’t block clicks     */

    /* optional soft fallback gradient if JS disabled */
    background: radial-gradient(ellipse at top left,
    #f7f7f7 0%, #ffffff 100%);
}


/* ─── shell — no fixed height at all ───────────────────────── */
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh; /* fill entire viewport */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* makes sure content and stats don't overlap */
}
.hero-img-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

/* Shared styles for both images */
.hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;       /* fills area */
    object-position: top;    /* crops from the bottom */
    display: block;
    opacity: 0;
    transition: opacity 2s ease;
    z-index: 1;
}
.hero-img.visible {
    opacity: 1;
    z-index: 2;
}


.hero-content{
    position:absolute;
    /* ✱ anchor corner */
    top:5%;      /* tweak this padding as you like */
    left:5%;

    transform:none;      /* ← remove the 50 % centering */
    text-align:left;     /* left-align headline & buttons */

    z-index:2;
    padding-top: 40px;
    color: var(--color-primary);
    font-weight: bolder;
}
.hero-headline{
    line-height:1.1;
    font-size:3.7rem;
    font-weight: bold;/* adjust to taste */

}
.hero-buttons a {
    display: inline-flex;          /* allows easy centering */
    justify-content: center;
    align-items: center;
    width: 195px;                  /* fixed width */
    height: 50px;                  /* fixed height */
    text-align: center;
    padding: 0;                    /* remove default padding */
    box-sizing: border-box;
    font-size: 1.5rem/* ensures borders don’t affect sizing */
}

/* =============== ≤ 1000 px  (large-tablet / small-laptop) =============== */
@media (max-width:1000px){

    /* headline block nudges in a bit and scales down */
    .hero-content{
        top:5%;
        left:5%;
    }
    .hero-headline{
        font-size:3.2rem;         /* adjust to taste */
        line-height:1.1;
    }

    /* buttons shrink slightly but stay side-by-side */
    .hero-buttons{ gap:.75rem; }
    .hero-buttons a{
        width:170px;
        height:52px;
        font-size:1.2rem;
    }

}


/* =============== ≤ 600 px  (portrait phone) =============== */
@media (max-width:600px){
    .hero-section {
        height: auto;
        margin-top:60px;
    }

    .hero-img-wrapper {
        position: relative; /* let it grow based on image height */
    }

    .hero-img {
        position: relative;
        width: 100%;
        height: auto;
        object-fit: contain; /* show full image */
    }

    /* Keep one image hidden when not visible */
    .hero-img:not(.visible) {
        display: none;
    }

    /* centre the text block */
    .hero-content{
        top:-10%;
        left:5%;
        font-size: .7rem;
    }

    .hero-headline{
        font-size:1.9rem;
    }

    /* =====  buttons stay in one row  ===== */
    .hero-buttons{
        display:flex;
        flex-direction:row;   /* row layout */
        flex-wrap:nowrap;     /* ‼ stop wrapping */
        justify-content:center;
        gap:.75rem;
        margin-top:1rem;
        width:100%;            /* give row some breathing room  */
        max-width:320px;      /* prevents it getting too wide  */
    }


    .hero-buttons a{
        flex:1 1 0;           /* each takes half of row minus gap */
        min-width:50px;      /* but never shrink below this      */
        height:30px;
        font-size:.7rem;
        width:80px;           /* override earlier fixed width     */
    }
}

.stats-section{
    position:absolute;
    bottom:0; left:0; right:0;
    width:100%;
    padding:15px 5%;
    background: rgba(5, 33, 87, 0.5);
    z-index:3;
}

.stats-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* ─── Force icon-left / text-right inside each cell ─────────────── */
.stats-section .stat-item {
    display: flex;                 /* horizontal flex row */
    align-items: center;           /* vertical centering */
    gap: 1rem;                     /* space between icon & text */
    text-align: left;              /* left-align number + label */
}

.stats-section .stat-icon {
    flex: 0 0 50px;                /* fixed icon width */
    height: 90px;
    width: 90px;
}

.stats-section .stat-details {
    display: flex;
    flex-direction: column;        /* number above label */
    align-items: flex-start;
}

/* keep your existing h3 / p styles (unchanged) */

.stat-item h3 {
    font-size: 1.9rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-background) !important;
}

.stat-item p {
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-background);
}

/* =========================  ≤ 1000 px  ========================= */
@media (max-width:1000px){

    /* narrower gaps but still 4-up */
    .stats-wrapper{
        gap:1rem;
    }

    /* scale icons & text down a touch */
    .stats-section .stat-icon{
        flex:0 0 24px;              /* reserve only 24 px, not 50        */
        width:70px;
        height:70px;
    }
    .stat-item h3{ font-size:1.3rem; }
    .stat-item p { font-size:1rem; }
}


/* =========================  ≤ 600 px  ========================== */
/* ======================  ≤ 600 px changes  ====================== */
/* ===================  ≤ 600 px  =================== */
@media (max-width:600px){

    .stats-section{
        padding:10px 5%;

    }
    /* keep 4-up grid */
    .stats-wrapper{
        grid-template-columns:repeat(4,1fr);
        gap:.75rem;                 /* a little tighter */
    }

    /* icon left, text right — but much closer */
    .stats-section .stat-item{
        display:flex;
        align-items:center;
        gap:.4rem;                  /* tighten space between icon & text */
    }

    /* shrink icon AND its reserved width */
    .stats-section .stat-icon{
        flex:0 0 24px;              /* reserve only 24 px, not 50        */
        width:24px;
        height:24px;
    }

    /* text sizes you already chose */
    .stat-item h3{ font-size:1rem; }
    .stat-item p { font-size:.5rem; line-height:1.3; }
}
.about-section {
    padding: 80px 10% 100px;
    color: var(--color-text);
    text-align: center;
    background: rgba(247, 247, 247, 0.09);


}

.about-top small {
    text-transform: uppercase;
    font-size: 3rem;
    letter-spacing: 2px;
    color: var(--color-primary);
    display: block;
    margin-bottom: 1rem;
}


.about-top p {
    font-size: 1.5rem;
    max-width: 800px;
    margin: 0 auto 2rem auto;
    line-height: 1.7;
}

.about-highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-top: 40px;
}

.highlight-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.highlight-icon {
    height: 80px;
    width: 80px;
    margin-bottom: 1rem;
    display: block;
    object-fit: contain;
    background-color: transparent; /* For debugging bounding issues */
}

.highlight-item h3 {
    font-size: 1.5rem;
    font-weight: 600;
}

.about-link {
    margin-top: 50px;
}
@media (max-width: 1000px) {
    .about-highlights {
        grid-template-columns: repeat(2, 1fr); /* 2 across on tablet */
        gap: 30px;
    }

    .about-top small {
        font-size: 2.4rem;
    }

    .about-top p {
        font-size: 1.3rem;
    }

    .highlight-item h3 {
        font-size: 1.3rem;
    }

    .highlight-icon {
        width: 70px;
        height: 70px;
    }
}

@media (max-width: 600px) {
    .about-section {
        padding: 60px 6% 80px;
    }

    .about-top small {
        font-size: 2rem;
    }

    .about-top p {
        font-size: 1.1rem;
        line-height: 1.6;
    }

    .about-highlights {
        gap: 24px;
        margin-top: 30px;
    }

    .highlight-icon {
        width: 60px;
        height: 60px;
    }

    .highlight-item h3 {
        font-size: 1.2rem;
    }

    .about-link {
        margin-top: 40px;
    }
}

.solutions-section {
    width: 100%;
    padding: 60px 10%;
    color: var(--color-text);
    background: rgba(247, 247, 247, 0.09);

    border-top: 1px solid var(--color-border);

}


.solutions-text small {
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-primary);
    margin-bottom: 1rem;
    display: block;
}


.solutions-text p {
    font-size: 1.5rem;
    line-height: 1.7;
}

/* give the illustration a bigger, fixed column */
/* ---------- overall two-column layout ---------- */
/* -------- DESKTOP & large-tablet ( > 1000 px ) -------- */
.solutions-top{
    display:grid;

    /* left column:   min 0, max 560 px (never grows past this)  */
    /* right column:  takes the rest, but may shrink if window   */
    grid-template-columns: minmax(0,560px) 1fr;

    gap:60px;
    align-items:center;

    /* let the whole row breathe if screen is wider than 1200 px */
    max-width:1400px;      /* bump up from 1200 if you like */
    margin-bottom:70px;
}

/* keep text from stretching too wide (redundant but harmless) */
.solutions-text{
    max-width:400px;
    margin:0 auto;
    align-items: center;
}

/* ---------- illustration tile ---------- */
.solutions-image{
    /* grows fluidly with the remaining space, but never huge */
    max-width:700px;       /* desktop cap                     */
    width:100%;            /* fill its grid cell              */

    aspect-ratio:7/5;      /* modern way to keep proportion   */
    border-radius:14px;
    overflow:hidden;
}
.solutions-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}



.solutions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* ← now 4 columns */
    gap: 40px;
    margin-top: 40px;
}

.solution-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(241, 235, 235, 0.4);
    padding: 30px 20px;
    border-radius: 12px;
    text-decoration: none; /* remove link underline */
    color: var(--color-text);
    box-sizing: border-box;

    /* Smooth Apple-like transitions */
    border: 1px solid transparent;
    transition: border 0.3s ease, backdrop-filter 0.3s ease;

}

.solution-item:hover {
    backdrop-filter: blur(16px); /* more frosted */
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--color-primary-light); /* subtle light border */
}
.solution-item h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}




.solution-icon {
    height: 80px;
    width: 80px;
    margin-bottom: 1rem;
    display: block;
    object-fit: contain;
    background-color: transparent; /* For debugging bounding issues */

}

/* ─── stats band (light green tint, still translucent) ─── */


/* ───────── TABLET (portrait iPad ~768-1023 px) ───────── */
@media (max-width: 1000px) {

    /* Stack the text + illustration top-to-bottom */
    .solutions-top {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
        justify-items: center; /* centers the illustration */
        padding: 0 5%; /* or 1rem 2rem for fixed spacing */

    }


    /* 2-wide card grid */
    .solutions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        margin-top: 0;
    }
}

/* ───────── PHONE (≤599 px) ───────── */
@media (max-width: 600px) {



    /* scale down label */
    .solutions-text h2 {
        font-size: 1.75rem;
    }



    /* 1-wide card grid */
    .solutions-grid {
        gap: 24px;
    }

    /* make each card feel less dense on small screens */
    .solution-item {
        padding: 24px 18px;
    }

    .solution-item h3 {
        font-size: 1.1rem;
    }

    .solution-item p {
        font-size: 1.1rem;
    }
}

/* ─── CTA Video Section  ───────────────────────────────────────── */
.cta-video-section {
    position: relative;
    padding: 60px 10%; /* similar vertical rhythm */
    text-align: center;
    color: var(--color-background);
    overflow: hidden; /* keeps video clipped to section */
}

/* dark overlay for contrast */
/* dark **blue** overlay for contrast */
.cta-video-section::before {
    content: "";
    position: absolute;
    inset: 0;
    /* deep navy-blue with 45 % opacity */
    background: rgba(18, 39, 106, 0.6);
    /*           R   G   B   A   */
    z-index: 0;
}

/* background video element */
.cta-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* full bleed, no distortion */
    z-index: -1; /* sits behind overlay & content */
}

/* inner content wrapper (mirrors .about-container) */
/* keeps your existing .cta-video-section, ::before overlay & .cta-video-bg… */

/* column wrapper */
.cta-container{
    max-width: 1200px;      /* same rhythm as other wide sections */
    margin-inline: auto;
    display: flex;
    flex-direction: column; /* 1-col stack on phones */
    gap: 2rem;
    position: relative;
    z-index: 1;             /* stays above overlay */
    text-align: left;
    color: var(--color-background);
}

/* columns */
.cta-col{
    flex:1 1 0;
    display:flex;
    flex-direction:column;
    justify-content:flex-start; /* ⬅ stick content to top */
    align-self:flex-start;      /* safety: obey row’s top edge */
}

/* upgrade to side-by-side ≥768 px */
@media (min-width:600px){
    .cta-container{
        flex-direction: row;   /* becomes two columns */
        align-items: center;   /* vertical centering */
        gap: 4rem;             /* space between cols */
    }
    .cta-col{ flex: 1 1 0; }   /* equal width columns */
}

/* flex wrapper */
.cta-container{
    /* … existing props … */
    flex-wrap: wrap;         /* ➜ allow items to break onto new row */
}

/* tagline */
.cta-container small{
    flex: 1 1 100%;          /* ➜ take full row */
    order: -1;               /* ➜ appear first in flex flow */
    text-align: center;      /* ➜ center the text */
    margin-bottom: .75rem;   /* adjust spacing if needed */
}

/* typography (mirrors .about-top) */
.cta-container small {
    text-transform: uppercase;
    font-size: 3rem;
    letter-spacing: 2px;
    color: var(--color-background);
    display: block;
    margin-bottom: 1rem;
}

.cta-container h2 {

    color: var(--color-background);

}

.cta-container p {
    font-size: 1.5rem;
    line-height: 1.7;
    margin: 0 auto 2rem;
}

/* CTA button */
.cta-link {
    margin-top: 40px;
}

/* ─── Responsive tweak: stack text & shrink padding on small screens */
@media (max-width: 800px) {
    .cta-video-section {
        padding: 80px 6%;
    }
}

/* ——— contact band ——— */
.contact-section {
    padding: 50px 8%;
    color: var(--color-text);
    background: rgba(247, 247, 247, 0.09);

}

.contact-inner {
    display: grid;
    grid-template-columns:minmax(0, 400px) 1fr; /* info | form */
    gap: 60px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: start;
}

/* Info block */
.contact-info small {
    text-transform: uppercase;
    font-size: 2rem;
    letter-spacing: 2px;
    color: var(--color-primary);
    display: block;
    margin-bottom: 1rem;
}

.contact-info .lead {
    font-size: 1.5rem;
    line-height: 1.6;
    margin-bottom: 26px;
}

.contact-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
}

.contact-list li {
    margin: 10px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact-list i {
    color: var(--color-primary);
}

/* map placeholder */
.map-embed img {
    width: 100%;
    border-radius: 12px;
    display: block;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09);
}

/* Form */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact-form label {
    font-weight: 600;
    font-size: 1.1rem;
}

.contact-form input,
.contact-form textarea {
    padding: 14px 18px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 144, 96, .15);
}

/* reuse primary button */
.contact-form .btn-primary {
    align-self: flex-start;
    padding: .9rem 2.4rem;
}

/* ——— mobile stack ——— */
@media (max-width: 820px) {
    .contact-inner {
        grid-template-columns:1fr;
        gap: 50px;
    }

    .contact-form .btn-primary {
        align-self: stretch;
        text-align: center;
    }
}

/* ——— overall bar ——— */
.site-footer {
    background: rgba(4, 37, 104, 0.5);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    border-top:1px solid var(--color-border);
    padding: 40px 5% 18px;
    position: relative;
    z-index: 10;
}

.site-footer::before { /* faint fade at top */
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 70px;
    pointer-events: none;
}

/* ——— 3-column layout ——— */
.footer-inner {
    display: grid;
    grid-template-columns:1fr 1fr; /* equal thirds */
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
    color: var(--color-primary);
}

/* ——— left column (contact) ——— */
.footer-col.contact h4 {
    margin: 0 0 10px;
    font-size: 2rem;
}

.footer-col.contact p {
    margin: 4px 0;
    line-height: 1.4;
}

.footer-col.contact i {
    margin-right: 6px;
    color: var(--color-primary);
}

.footer-col.contact a {
    color: var(--color-text);
    text-decoration: none;
}

.footer-col.contact a:hover {
    color: var(--color-primary);
}

/* ——— middle column (KPIs) ——— */
.footer-col.stats {
    display: flex;
    justify-content: center;
    gap: 48px;
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 120px;
    text-align: center;

}

.stat i {
    font-size: 28px;
    color: var(--color-primary);
}

.stat .count {
    font-size: 1.5rem;
    font-weight: 700;
}

.stat small {
    font-size: 1rem;
    line-height: 1.3;
}

/* ——— right column (social + legal) ——— */
.footer-col.social {
    text-align: right;
}

.social-circles {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0 0 6px;
}

.social-circles a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    border: 2px solid #c5c5c5;
    border-radius: 50%;
    color: var(--color-primary);
    font-size: 1.15rem;
    transition: .3s;
}

.social-circles a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ——— mobile stack ——— */
@media (max-width: 768px) {
    .footer-inner {
        gap: 32px;
    }



    .footer-col.stats {
        flex-wrap: wrap;
        gap: 32px 24px;
    }
}

.split-layout-section {
    background: rgba(247, 247, 247, 0.09);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    padding: 180px 10% 120px 10%;
    color: var(--color-text);
}

.split-layout-inner {
    display: flex;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: flex-start;
    justify-content: left;
}

.split-layout-left {
    text-align: left;
}

.section-label {
    font-size: 3rem;
    letter-spacing: 2px;
    color: var(--color-primary);
    display: block;
    margin-bottom: 1rem;
}

.centered-header-section {
    text-align: center;
    padding: 120px 0 40px 0; /* Minimal vertical padding */
}
.stacked-grid{
    padding: 0px 0 40px 0; /* Minimal vertical padding */

}
.centered-header-inner {
    max-width: 800px;
    margin: 0 auto;
}
/* ─── button row – desktop & tablet ─── */
.contact-buttons{
    display:flex;
    justify-content:center;  /* centred under the paragraph   */
    gap:1.25rem;             /* space between buttons          */
    flex-wrap:wrap;          /* allows graceful wrap if needed */
    margin-top:2rem;
}

/* make all three the same visual size */
.contact-buttons .btn{
    min-width:220px;
    padding:0.9rem 1.25rem;
    font-size:1rem;
    text-align:center;
}

/* ─── phone / small-tablet  ( ≤600 px ) ─── */
/*  PHONE & SMALL-TABLET  (≤ 600 px)  */
@media (max-width:600px){

    .contact-buttons{
        /* three equal “columns” that always fit */
        display:grid;
        grid-template-columns:repeat(3, 1fr);

        gap:.6rem;         /* space between buttons        */
        padding:0 4%;      /* 4 % gutter on both edges     */
    }

    .contact-buttons .btn{
        /* drop the old min-width and let grid handle sizing  */
        min-width:0;
        width:100%;        /* fill its grid cell           */
        padding:.6rem .4rem;
        font-size:.85rem;  /* shrink label a touch         */
        text-align:center; /* keep centred                 */
    }
}
.sub-label {
    font-size: 1.8rem;
    color: var(--color-text);
}

.section-header {
    font-size: 2.7rem;
    letter-spacing: 2px;
    color: var(--color-primary);
    display: block;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

@media (max-width: 600px) {
    .section-header {
        font-size: 2rem;
    }

    .section-label{
        font-size: 1.9rem;
    }
}

.split-heading {
    font-size: 2.5rem;
    line-height: 1.3;
    margin-bottom: 0;
    color: var(--color-text);
}


/* Mobile layout */
@media (max-width: 768px) {
    .split-layout-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .split-heading {
        font-size: 2rem;
        margin-top: 1rem;
    }

    .split-layout-right p {
        font-size: 1.1rem;
    }
}

.video-stats-section{
    padding: 100px 10%;

}
.stats-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.values-header {
    max-width: 700px;
    margin-bottom: 2rem;
}
.video-container{
    margin-top: 60px;
}
.video-container iframe{
    border-radius: 6px;
}
.image-text-split {
    padding: 40px 10%;
    background: rgba(247, 247, 247, 0.09);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);;
}

.image-text-grid {
    display: grid;
    grid-template-columns: 1.5fr 2.5fr;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
}


.underline-accent {
    width: 30px;
    height: 4px;
    background-color: var(--gtuit-green);
    margin-top: 2rem;
    border-radius: 5px;
}


.underline-accent-center {
    width: 30px;
    height: 4px;
    background-color: var(--gtuit-green);
    margin: 2rem auto 20px auto; /* center just this one */
    border-radius: 5px;

}

/*  ---------- tablet / small-laptop  ---------- */
@media (max-width: 1000px){
    .underline-accent{
        margin: 2rem auto 20px auto; /* center just this one */

    }
    /* 1-col stack instead of side-by-side */
    .image-text-grid{
        grid-template-columns: 1fr;   /* single column        */
        gap: 30px;                    /* little tighter space */
        text-align: center;           /* centre inner content */
    }

    /* optional: put the picture *after* the copy
       (remove if you like the current order)              */
    .image-text-grid > :first-child{ order: 2; }

    /* keep the accent rule centred – you already had this */
    .underline-accent{
        margin: 2rem auto 20px;
    }
}
/* ───────── PHONE (≤599 px) ───────── */

.image-column {
    height: 100%;
}

.image-column img {
    width: 100%;
    height: 100%;
    object-fit: fill; /* ✅ fills container, even if distorted */
    display: block;
}

/* Responsive stack */
@media (max-width: 600px) {
    .image-text-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .text-column p {
        font-size: 1.2rem;
    }


    .image-column img {
        margin-top: 2rem;
    }
}


.flat-feature-grid {
    padding: 60px 10%;
    background: rgba(247, 247, 247, 0.09);
    backdrop-filter: blur(1px);
    border-top: 1px solid var(--color-border);
}

.flat-feature-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.flat-feature-item img {
    height: auto;
    width: 150px; /* or try 120px for a bit more */
    max-width: 120px;
    margin-bottom: 24px;
}

.flat-feature-item h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-text);
}




.timeline-section {
    background: rgba(247, 247, 247, 0.09);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);

    padding: 30px 10%;
}

.timeline-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 3rem auto;
}

.timeline-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 ;
    display: flex;
    flex-direction: column;
    gap: 2rem; /* bump from 4rem up to 6rem */
}

/* central spine */
.timeline-container::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--color-border);
    transform: translateX(-50%);
}

/* each entry “lane” */
.timeline-item {
    display: flex;
    width: 100%;
    position: relative;
}

.timeline-item.left {
    justify-content: flex-start;
}

.timeline-item.right {
    justify-content: flex-end;
    margin-top:-10rem;         /* tweak: -2rem to -4rem depending on how tight you want it */

}

/* the dot on the spine */
.timeline-item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px; /* was 14px */
    height: 10px;
    background-color: var(--color-primary);
    border: 2px solid var(--color-surface);
    border-radius: 50%;
    z-index: 2;
}

/* the “card” */
.timeline-content {
    width: calc(46% - 1.5rem); /* was 50%-2rem → gives a little breathing room */
    padding: 1.25rem 1.5rem 0;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    border-radius: 8px;
    border-top: 4px solid var(--color-primary);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    position: relative;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-content .section-label {
    padding-left: 2rem;
}


/* speech-bubble arrows */
.timeline-item.left .timeline-content::after {
    content: '';
    position: absolute;
    top: 1.5rem;
    right: -12px;
    border: 8px solid transparent;
    border-left-color: var(--color-surface);
}

.timeline-item.right .timeline-content::after {
    content: '';
    position: absolute;
    top: 1.5rem;
    left: -12px;
    border: 8px solid transparent;
    border-right-color: var(--color-surface);
}

/* heading & body within the card */
.timeline-content h3 {
    margin: 0 0 0.5rem;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-primary-dark);
}


/* mobile stack */
/* ─── VERY SMALL SCREENS ───────────────────────────── */
/* ─────────────────── PHONE TUNE-UP (≤ 600 px) ─────────────────── */
@media (max-width:600px){

    /* 1 ▸ kill the spine & node dots completely */
    .timeline-container::before,
    .timeline-item::after{
        display:none !important;   /* higher weight */
    }

    /* 2 ▸ stop the right-lane cards from jumping up */
    .timeline-item.right{
        margin-top:0 !important;
    }

    /* 3 ▸ stack cards edge-to-edge with tighter padding */
    .timeline-item{
        justify-content:flex-start;     /* all flush left   */
        margin:0;                       /* reset any offset */
    }

    .timeline-content{
        width:100% !important;
        max-width:none;
        padding:1rem 1.25rem;
        text-align:left;
    }

    /* 4 ▸ remove the little speech-bubble arrows */
    .timeline-content::after{
        display:none !important;
    }

    /* 5 ▸ gentle vertical gap between cards */
    .timeline-item + .timeline-item{
        margin-top:1.5rem;
    }
}

.team-section {
    padding: 30px 10%;
    color: var(--color-text);
    text-align: center;
}


/* Grid: keep the same responsive columns but left-align each cell’s contents */
.support-team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 3rem;
    justify-items: center; /* center each card within grid cell */
    align-items: stretch;
}

.support-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 240px;
    padding: 1rem 0;
}

.support-photo {
    width: 100%;
    max-width: 300px;
    height: 300px;
    object-fit: cover;
    object-position: center top;
    border-radius: 8px;
    display: block;
}

.member-info {
    text-align: center;
    margin-top: 1rem;
    line-height: 1.4;
    padding: 0 0.5rem;
}

/* Typography */
.support-member h4,
.support-member p {
    text-align: left; /* keep text flush-left inside the block */
}

.support-member h4 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 .35rem;
}

.support-member p {
    font-size: 1.15rem;
    line-height: 1.55;
    color: var(--color-text);
    margin: 0;
}


.team-footnote {
    font-size: 1.3rem;
    max-width: 800px;
    margin: 3rem auto 0 auto;
    line-height: 1.7;
    color: var(--color-text);
    text-align: center;
}
/* ─────────── TABLET / SMALL-DESKTOP  (≤1000 px) ─────────── */
@media (max-width:1000px){

    /* keep 3 columns but tighten spacing & imagery */
    .team-photo,
    .support-photo{  width:120px; height:120px; }     /* was 140/150 */

    .team-member h3{ font-size:1.4rem; }              /* down a notch */
    .support-member h4{ font-size:1.15rem; }
    .support-member p { font-size:1rem; }
}

/* ─────────── PHONE  (≤600 px) ─────────── */
@media (max-width:600px){

    /* 1) MAIN MANAGEMENT GRID – two up                           */
    .team-section {
        padding: 30px 5%; /* or even 30px 2% */
    }
    .team-photo{
        width:70px;
        height:70px
    }
    .team-member h3{
        font-size:1.25rem;
    }

    /* 2) SUPPORT GRID – two up, centred cards                    */
    .support-team-grid{
        gap:10px;
        justify-items:center;
    }

    /* stack each support card vertically (photo on top)          */
    .support-member{

        flex-direction:column;
        align-items:center;
        text-align:center;
    }
    .support-photo{  width:110px; height:110px; margin-bottom:.75rem; }

    .support-member h4{ font-size:1.1rem; }
    .support-member p { font-size:.95rem; }

    /* 3) footnote just a tad smaller                             */
    .team-footnote{  font-size:1.1rem; }
}
.dark{
    background: rgba(207, 205, 205, 0.1);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    border-top:1px solid var(--color-border);
}

.light{
    background: rgba(247,247,247,0.09);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    border-top:1px solid var(--color-border);

}

.z-product-section {
    padding: 60px 10%;

}

.z-product-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
}

.z-product-inner.reverse {
    direction: rtl;
}

.z-product-inner.reverse > * {
    direction: ltr;
}

.z-product-image img {
    max-height: 300px; /* or whatever looks good */
    width: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.z-product-text small {
    text-transform: uppercase;
    font-size: 3rem;
    letter-spacing: 2px;
    color: var(--color-primary);
    margin-bottom: 1rem;
    display: block;

}

/* ───────── tablet & down (≤1000 px) ───────── */
@media (max-width:1000px){
    .z-product-inner{
        grid-template-columns: 1fr;   /* one column           */
        gap: 40px;                    /* a little tighter     */
        text-align:center;            /* center copy + image  */
    }

    /* if you keep .reverse on some rows, unset its RTL trick
       so stacking order is always text-then-image (optional) */
    .z-product-inner.reverse{
        direction:ltr;
    }

    /* shrink the feature shot a bit for small screens */
    .z-product-image img{
        max-height:220px;
    }

    /* tighten the pre-headline */
    .z-product-text small{
        font-size:2rem;
        letter-spacing:1px;
    }
}

.features-interactive {
    padding: 60px 10% 60px;
}

.features-header {
    text-align: center;
    margin-bottom: 60px;
}

.feature-icon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* ← now 4 columns */
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.feature-tile {
    text-align: center;
    min-height: 100px; /* enough room for icon, title, and description */
    padding: 1rem;
    transition: transform 0.3s ease;
}


.feature-tile h4{
    font-size: 1.5rem;
    font-weight: 600;}

/* Icon/illustration sizing inside each feature tile */
.feature-tile img {
    /* 2.5 rem ≈ the 40 px size you were getting from the old font-based icons.
       Bump this up or down to taste. */
    width: 80px;
    height: 80px; /* keep them perfectly square */
    margin-bottom: 0.75rem;

    /* You only need transform here; images won’t respond to color. */
    transition: transform 0.3s ease;
}



.feature-desc {
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--color-text);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease,
    transform 0.4s ease,
    visibility 0.4s;
    max-height: none; /* remove height-based animation */
    visibility: hidden;
}

.feature-tile:hover .feature-desc {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (max-width: 1000px) {
    .feature-icon-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 per row on iPad */
        gap: 30px;
    }

    .feature-tile img {
        width: 70px;
        height: 70px;
    }

    .feature-tile h4{
        font-size: 1.9rem;
    }




}

@media (max-width: 600px) {
    .feature-icon-grid {
        gap: 24px;
    }

    .feature-tile img {
        width: 64px;
        height: 64px;
    }
    .feature-tile h4{
        font-size: 1.5rem;
    }

    .features-interactive {
        padding: 40px 8%;
    }

    .features-header {
        margin-bottom: 40px;
    }
}

.centered-header-wrapper {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
}

.checklist {
    list-style: none;
    padding-left: 0;
    margin-top: 1rem;
}

.checklist li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.checklist li::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--gtuit-green, #3ca661); /* fallback to actual green */
    font-weight: bold;
}

.news-section {
    padding: 80px 10%;
    background: rgba(247, 247, 247, 0.06);
}

.news-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 1000px;
    margin: auto;
}

.news-card {
    padding: 30px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--color-border);
}

.news-card small {
    display: block;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.news-card h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: var(--color-text);
}

.news-card p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--color-text-light);
}

.quote-highlight {
    padding: 80px 10%;
    text-align: center;
}

.quote-inner {
    max-width: 800px;
    margin: auto;
    position: relative;
}

.quote-highlight blockquote {
    font-size: 1.8rem;
    font-weight: 500;
    font-style: italic;
    color: var(--color-text);
    line-height: 1.7;
    margin: 0 auto 20px;
    position: relative;
    display: inline-block;
    padding: 0 60px;
    overflow: visible;
}

.quote-highlight blockquote::before {
    content: "“";
    font-size: 3rem;
    color: var(--color-primary);
    position: absolute;
    left: -40px;
    top: -10px;
    opacity: 0.4;
}

.quote-highlight blockquote::after {
    content: "”";
    font-size: 3rem;
    color: var(--color-primary);
    position: absolute;
    right: -40px;
    bottom: -10px;
    opacity: 0.4;
}

.quote-highlight cite {
    display: block;
    font-size: 1rem;
    color: var(--color-text-light);
    font-style: normal;
    margin-top: 10px;
}


/* ─── Container ────────────────────────────────────────────── */
.product-carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 60px 0;
}

/* ─── 1) INTRO ─────────────────────────────────────────────── */
.carousel-intro {
    text-align: center;
    max-width: 1000px;
    margin: 0 auto 40px;
}


/* ─── 2) TRACK & SLIDE ─────────────────────────────────────── */
.carousel-track {
    display: flex;
    transition: transform 0.6s ease;
    will-change: transform;
}

.carousel-slide {
    flex: 0 0 100%; /* one full slide = one container width */
}

/* ─── 3) FULL-WIDTH IMAGE ─────────────────────────────────── */
/* ① Make the wrapper tall and edge-to-edge */
/* —————————————— make the image wrapper huge —————————————— */
.product-image {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw !important; /* full‐bleed */
    max-width: none !important; /* no caps ever */

    /* NEW: fill 75% of the window’s height */
    height: 60vh !important; /* ramp this up/down to taste */

    overflow: hidden;
    margin: 0 auto 40px;
}

/* target only the carousel images */
.product-carousel .product-image img {
    display: block;
    width: auto; /* let it grow proportionally */
    height: 100%; /* fill the wrapper’s full height */
    max-width: none; /* drop any leftover caps */
    object-fit: contain
}

/* Remove spacing/padding for controls since no text */
.carousel-controls {
    justify-content: center;
    gap: 0;
    padding: 0;
}

/* Place arrows next to dots */
.carousel-dots-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px; /* space between arrows and dots */
    margin-top: 30px;
    position: relative;
}

/* Arrows repositioned */
.carousel-arrow {
    background: none !important;
    border: none !important;
    font-size: 2.5rem;
    color: var(--color-primary-dark);
    cursor: pointer;
    transition: color 0.2s ease;
}

.carousel-arrow:hover {
    color: var(--color-primary-light);
}

/* Optional: shrink arrows on mobile */
@media (max-width: 600px) {
    .carousel-arrow {
        font-size: 2rem;
    }
}

.product-text {
    flex: 1;
    text-align: center;
}

.product-text h2 {
    font-size: 2rem;

}

.product-text p {
    font-size: 1.5rem;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto 1rem;
}


/* Arrows */
.carousel-arrow {

    background: none !important;
    background-color: transparent !important;

    border: none !important;
    box-shadow: none !important;

    outline: none !important;

    padding: 0 !important;
    margin: 0;


    color: var(--color-primary-dark);
    font-size: 3rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.carousel-arrow i {
    background: none !important;

}


.carousel-arrow.prev {
    left: 50px;
}

.carousel-arrow.next {
    right: 50px;
}

.carousel-arrow:hover {
    color: var(--color-primary-light);
    cursor: pointer;
}

/* Dots with Progress */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 30px;
}

.carousel-dot {
    position: relative;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.carousel-dot:hover{
    transform: scale(1.1);
}

.carousel-dot svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.carousel-dot .progress-ring {
    fill: none;
    stroke: var(--gtuit-green);
    stroke-width: 2;
    stroke-dasharray: 88; /* ~2πr for r=14 */
    stroke-dashoffset: 88;
    transition: stroke-dashoffset 0.3s ease;
}

.carousel-dot.active .progress-ring {
    animation: ringFill 5s linear forwards;
}

.carousel-dot .dot-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: var(--color-primary-dark);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

@keyframes ringFill {
    from {
        stroke-dashoffset: 88;
        /* If you want to animate stroke color: */
        /* stroke: var(--color-border); */
    }
    to {
        stroke-dashoffset: 0;
        /* stroke: var(--color-border); */
    }
}

.carousel-intro {
    text-align: center;
    margin-bottom: 0;
}

.carousel-link {
    text-align: center;
    margin-top: 40px;
}

.blue {
    color: var(--color-primary);
}

/* Swiper carousel image styling */
.product-image {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.product-image img {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 12px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.carousel-slide:hover .product-image img {
    transform: scale(1.02);
}

/* ==============  ≤ 1000 px  (large-tablet / small laptop)  ============== */
@media (max-width:1000px){

    /* tighten overall rhythm */
    .product-carousel{ padding:40px 0; }

    /* image wrapper a bit shorter (was 40 vh) */
    .product-image{
        height:34vh;                /* tweak to taste */
        padding:16px;
    }

    /* headline & body copy a hair smaller */
    .product-text h2{ font-size:1.75rem; }
    .product-text p { font-size:1.25rem; }

    /* arrows scale down */
    .carousel-arrow{ font-size:2.5rem; }
}

/* =================  ≤ 600 px  (phones)  ================= */
@media (max-width:600px){

    /* section padding */
    .product-carousel{ padding:30px 0; }

    /* image is shorter & gets safe side-padding */
    .product-image{
        height:28vh;
        padding:12px;
    }
    .product-image img{ max-width:280px; }      /* keep file size sane */

    /* centre text & shrink further */
    .product-text{
        text-align:center;
        padding:0 6%;
    }
    .product-text h2{ font-size:1.4rem; }
    .product-text p { font-size:1rem; }

    /* arrows: smaller icons, tuck closer to edges */
    .carousel-arrow{
        font-size:2rem;
        margin-inline:4px;
    }


}

.center {
    text-align: center;
    justify-content: center;
}

.image-gallery {
    padding: 60px 10%;

}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
    align-items: start;

}

.gallery-grid a {
    display: block;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
    background: #fff;
    height: 200px; /* consistent image box height */
}

.gallery-grid a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-grid a:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.bold {
    font-weight: bold;
}


.glacier-feature-wrapper {
    position: relative;
    background: url('/wp-content/uploads/images/Flare captureblue.jpg') center center / cover no-repeat;
    background-color: #f9f9f9; /* fallback */
    padding: 60px 10%;
    overflow: hidden;
}

.glacier-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25); /* dark translucent overlay */
    z-index: 1;
}

/* ensure all inner content stays on top */
.glacier-feature-wrapper > * {
    position: relative;
    z-index: 2;
}

.slider-container {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.slider-track {
    display: flex;
    gap: 40px;
    overflow-x: hidden;
    padding: 20px 0;

}

.frosted-card.dark {
    min-width: 320px;
    flex: 0 0 30%;
    background: rgba(0, 0, 0, 0.1);
    color: var(--color-text-light);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 30px 24px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    text-align: center;
    transition: transform 0.3s ease;
}


/* position controls centered & floating */
.slider-controls {
    margin-top: 30px;
    bottom: 24px; /* how far above the bottom of your slider */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 24px; /* space between headings container and arrows */
    pointer-events: auto;
    /* no background or padding here */
}

/* headings inline, scrollable if too many */
.slider-headings {
    display: flex;
    gap: 32px; /* space between each heading */
    overflow-x: auto;
}

/* base style for each heading button */
.slider-headings button {
    background: rgba(0, 0, 0, 0.35);
    color: var(--color-text-light);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    opacity: 0.7; /* dim the inactive ones */
    font-size: 1rem;
    font-weight: 400;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s, font-weight 0.2s;
}

/* active heading */
.slider-headings button.active {
    opacity: 1;
    font-weight: 600;
    background-color: rgba(151, 205, 120, 0.3);
}


/* arrow circles */
.slider-arrow {
    background: rgba(0, 0, 0, 0.35);
    color: var(--color-text-light);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    cursor: pointer;
    transition: background 0.2s;
}

.slider-arrow:hover {
    background: rgba(0, 0, 0, 0.8);
}

.frosted-card.dark h3 {
    color: var(--color-primary-light);
}

.frosted-card.dark p {
    color: rgba(255, 255, 255, 0.9);
}

.text-center {
    text-align: center;
    margin-top: 10px;
    font-size: 1rem;
    color: var(--color-text);
}

.gas-comparison-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 40px 0;
    flex-wrap: wrap;
}

.gas-comparison-item {
    max-width: 420px;
    flex: 1 1 320px;
    text-align: center;
}

.gas-comparison-item img {
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    display: block;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.gas-comparison-caption {
    font-size: 1rem;
    margin-top: 12px;
    color: var(--color-text);
    font-weight: 600;
}


.technical-specs-section {
    padding: 80px 10%;
    text-align: center;
}

.technical-specs-image {
    margin: 40px auto;
    max-width: 900px;
}

.technical-specs-image img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 40px;
    justify-content: center;
}

.specs-grid strong {
    color: var(--color-primary);
}

.spec-tile.dark {
    background: rgba(100, 100, 100, 0.09);
    color: var(--color-text);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 20px 24px;
    font-size: 1.5rem;
    font-weight: 400;
    text-align: left;
}


.benefits-and-revenue {
    padding: 100px 10%;

}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
    max-width: 1000px;
    margin: 0 auto;
}

.info-card {
    background: rgba(240, 240, 240, 0.4);
    border-radius: 14px;
    padding: 30px 24px;
    text-align: center;
}

.info-card img {
    height: 70px;
    margin-bottom: 1rem;
}

.info-card h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin-bottom: 1rem;
}

.info-card ul {
    list-style: disc;
    padding-left: 1.2rem;
    text-align: left;
}

.info-card ul li {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
    color: var(--color-text);
}

@media (max-width: 980px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .grid-3 {
        grid-template-columns: 1fr;
    }
}

.gtuit-fullbleed-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 0;
}

.gtuit-text-side {
    padding: 0 10%;
    z-index: 1;
}



.gtuit-image-side {
    position: relative;
    height: 100%; /* reduce height here */
    overflow: hidden;
}

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

.gtuit-text-side {
    padding: 30px 10%;
    color: var(--color-text);
}


@media (max-width:600px){

    /* already stacks to one column */
    .gtuit-fullbleed-wrapper{
        grid-template-columns:1fr;
    }

    /* <<< NEW — force text above image for every wrapper >>> */
    .gtuit-text-side {               /* row 1 */
        grid-row:1;
        padding:60px 8%;
        text-align:center;
    }
    .gtuit-image-side{               /* row 2 */
        grid-row:2;
        height:300px;
    }

    /* (optional) tweak heading & paragraph sizes */
    .gtuit-heading      { font-size:2rem; }
    .gtuit-text-side p  { font-size:1.1rem; }
}


.centered-feature-section {
    padding: 50px 10% 100px 10%;
    color: var(--color-text);
    text-align: center;
}

.centered-feature-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.centered-feature-wrapper p {
    font-size: 1.5rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.video-container video {
    width: 100%;
    max-width: 600px; /* Adjust as needed */
    cursor: pointer;
    border-radius: 815;
}

.journey-section {
    padding: 4rem 1rem;
}

.journey-title {
    text-align: center;
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 4rem;
    color: var(--color-text);
}

.journey-wrapper {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}

/* horizontal slider */
.journey-track {
    display: flex;
    overflow-x: auto; /* allows scrollTo */
    scroll-behavior: smooth;
    padding: 30px;
}

/* Each slide still scrolls horizontally */
.journey-slide {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 3rem 40px 3rem;
}

/* The new glass-style card */
.journey-card {
    width: 100%;
    max-width: 520px;
    min-height: 250px;

    padding: 2.5rem 2rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.10); /* translucent */
    backdrop-filter: blur(8px); /* glass effect */
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
    color: var(--color-text-light);
    transition: transform .35s, box-shadow .35s;
}

/* Headings & text */
/* Headline inside each card */
.journey-card h3 {
    font-size: clamp(1.6rem, 4vw, 2.2rem); /* responsive scale */
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 .75rem;
    color: var(--color-primary);
}

/* Body copy inside each card */
.journey-card p {
    font-size: clamp(1.05rem, 2.3vw, 1.35rem);
    line-height: 1.65;
    color: var(--color-text);
    margin: 0;
}

/* Optional lift / highlight for the active slide */
.journey-slide.active .journey-card {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
    transition: transform .35s ease, box-shadow .35s ease;
}


/* nav arrows */
.journey-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    cursor: pointer;
    transition: background .2s;
    transition: box-shadow 0.3s ease;
    border-radius: 50px;
}

.journey-nav:hover {
    background: transparent; /* no color change */
    box-shadow: 0 4px 12px var(--gtuit-green); /* subtle lift effect */
}

.journey-nav.prev {
    right: 88px;
    color: var(--color-text);
}

.journey-nav.next {
    right: 24px;
    color: var(--color-text);

}

/* tabs */
.journey-tabs {
    list-style: none; /* no bullets */

    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    border-top: 1px solid #ddd;
    padding-top: .75rem;
}

.journey-tabs li {
    flex: 1;
    text-align: center;
    font-size: 1.2rem;
    cursor: pointer;
    color: #666;
    transition: color .2s;
}

/* 1 ▸ Wrapper stays centered under the track */
.journey-controls {
    margin: 24px 0 16px; /* space above + below */
    display: flex;
    justify-content: center; /* center the arrow pair */
    gap: 40px; /* space between arrows */
}

/* 2 ▸ Reset the arrows from absolute → static */
.journey-controls .journey-nav {
    position: static; /* take them out of absolute flow */
    top: auto;
    right: auto;
    transform: none; /* no vertical shift */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: none;
    font-size: 1.3rem;
    cursor: pointer;
    transition: background 0.25s, color 0.25s;
}

/* 3 ▸ Hover effect */
.journey-controls .journey-nav:hover {
    color: #fff;
}

/* 4 ▸ Optional: shrink the horizontal scroll padding
        so arrows don’t overlap on very small screens */
@media (max-width: 600px) {
    .journey-track {
        padding: 20px;
    }

    .journey-controls {
        gap: 24px;
    }
}

.journey-tabs li.active {
    color: var(--gtuit-green);
    font-weight: 600;
}

.journey-tabs li:hover {
    color: #000;
}

/* ─── Responsive styles for #journey slider ─────────────── */

/* Tablets: 641 – 1024 px */
@media (max-width: 1024px) {

    /* Title a bit smaller */
    .journey-title {
        margin-bottom: 3rem;
    }

    /* Narrower cards & softer padding */
    .journey-slide {
        padding: 3rem 2rem;
    }

    .journey-card {
        max-width: 460px;
        padding: 2rem 1.5rem;
    }

    .journey-card h3 {
        font-size: 1.6rem;
    }

    .journey-card p {
        font-size: 1.25rem;
    }

    /* Tabs wrap and center */
    .journey-tabs {
        overflow-x: auto;
        white-space: nowrap;
        border-top: none;
        padding-top: 0;
        margin-top: 1.5rem;
        gap: .75rem;
        justify-content: flex-start;
        padding-left: 0;
    }

    .journey-tabs li {
        display: inline-block;
        flex: none;
        font-size: 1.1rem;
        padding: .25rem .5rem;
    }
}

/* Phones: ≤ 640 px */
@media (max-width: 640px) {

    .journey-title {
        margin-bottom: 2.5rem;
    }

    /* Stack slides tighter */
    .journey-slide {
        padding: 2.5rem 1rem;
    }

    .journey-card {
        max-width: 100%;
        padding: 1.75rem 1.25rem;
    }

    .journey-card h3 {
        font-size: 1.4rem;
    }

    .journey-card p {
        font-size: 1.05rem;
    }

    /* Arrows: shrink & move lower */
    .journey-nav {
        width: 36px;
        height: 36px;
        font-size: 1rem;
        top: 65%; /* nudge below the card */
    }

    .journey-nav.prev {
        right: 72px;
    }

    .journey-nav.next {
        right: 24px;
    }

    /* Tabs: horizontal scroll (single row) */
    .journey-tabs {
        overflow-x: auto;
        white-space: nowrap;
        border-top: none;
        padding-top: 0;
        margin-top: 1.5rem;
        gap: .75rem;
        justify-content: flex-start;
        padding-left: 0;
    }

    .journey-tabs li {
        display: inline-block;
        flex: none;
        font-size: .95rem;
        padding: .25rem .5rem;
    }
}


/* ─────────  Patents Section Styles  ───────── */
.patents-section {
    padding: 6rem 0 8rem;
    color: var(--color-text, #e7e7e7);
}

.patents-inner {
    width: min(1200px, 90%);
    margin: 0 auto;
}

.patents-header {
    text-align: center;
    margin-bottom: 4rem;
}

.patents-grid {
    display: grid;
    gap: 3rem;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* Card */
.patent-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 2.2rem 2rem 2.8rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.patent-image-bottom {
    text-align: center;
}

.patent-image-bottom img {
    max-width: 80%;
    height: auto;

}

.patent-spotlight {
    text-transform: uppercase;
    font-size: .75rem;
    letter-spacing: .08em;
    opacity: .7;
}

.patent-heading {
    font-size: 1.5rem;
    line-height: 1.3;
    margin: 0;
}

.patent-meta {
    font-size: .9rem;
    opacity: .8;
    margin: 0;
}

.patent-overview {
    margin: 0;
}

.patent-card h4 {
    margin: .5rem 0 .25rem;
    font-size: 1.1rem;
}

.patent-card ul {
    padding-left: 1.25rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.patent-card .btn {
    align-self: flex-start;
    margin-top: auto;
}

/* Optional: subtle card hover */

.contact-meta {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0; /* a bit of breathing room */
    font-size: 1.1rem; /* subtle, but readable */
    display: flex;
    gap: 1.25rem;
    justify-content: center; /* keep it centered under the button */
}

.contact-meta a {
    text-decoration: none;
}

/* ─── Full-Width Image Section ──────────────────────────────── */
/* ─── Full-width Image Section ───────────────────────────── */
/* full-bleed wrapper, no padding so the image really touches both edges */
/* ─── base ─────────────────────────────────────────── */
.fullwidth-image-section{
    padding: 40px 10%;
    background: rgba(247,247,247,.09);
    backdrop-filter: blur(1px);
    overflow:hidden;
    text-align:center;
}

.fullwidth-image{
    display:block;
    width:100%;          /* ← always fill the content box */
    max-width:100%;      /* ← never overflow horizontally */
    height:auto;         /* keep aspect-ratio             */
    margin:0 auto;       /* horizontal centering          */
    object-fit:contain;  /* optional – keeps whole photo  */
}

/* ─── desktop: let it breathe but keep a ceiling ───── */
@media (min-width:1000px){
    .fullwidth-image{
        max-width:900px;   /* absolute cap on very wide monitors */
    }
}

/* ─── phone: shorter banner but still full-width ───── */
@media (max-width:600px){
    .fullwidth-image{
        max-height:40vh;   /* trims vertical height, keeps width in check */
    }
}


/* ─── inline “expand” link  ───────────────────────── */
.link-expand {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem; /* space before icon */
    font-weight: 600;
    color: var(--color-primary); /* matches headline accent */
    text-decoration: none;
    transition: color 0.25s ease;
}

.link-expand::after { /* chevron icon */
    content: "›"; /* single-character arrow */
    font-size: 1.2em;
    transition: transform 0.25s ease;
}

.link-expand:hover,
.link-expand:focus {
    text-decoration: underline;
}

/* subtle right-shift on hover to imply “expand” */
.link-expand:hover::after,
.link-expand:focus::after {
    transform: translateX(4px);
}
/* hidden until toggled */
.flare-details { display: none; }

/* optional smooth slide-down */
.flare-details.expanded { display: block; }


.us-map-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

.us-map-container img {
    width: 100%;
    display: block;
}

/* pin dot */
.map-pin {
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: var(--gtuit-green); /* green */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 1;
}

.map-pin::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    background-color: white;
    border-radius: 50%;
    top: 6px;
    left: 6px;
}
.map-pin:hover { z-index: 100; }   /* any number higher than 1 works */

/* base (hidden) state */
.pin-card {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-50%, 10px);          /* start slightly lower */
    width: 400px;
    background: rgba(255,255,255,0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    opacity: 0;                                /* invisible but in flow */
    visibility: hidden;
    pointer-events: none;                      /* avoid accidental focus */
    transition: opacity .25s ease, transform .25s ease;
    z-index: 10;
}

/* hover (shown) state */
.map-pin:hover .pin-card {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);             /* slides up into place */
    pointer-events: auto;
}

/* Grid & Cards */
/* ─── Locations grid ───────────────────────────── */
.locations-grid-section {
    padding: 80px 8%;
}

.locations-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);   /* ⬅ always two wide  */
    gap: 48px;
    max-width: 1200px;
    margin: 0 auto;
}
@media (max-width: 600px) {                 /* phones */
    .locations-grid {
        grid-template-columns: 1fr;         /* single column      */
    }
}
.location-card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background: rgba(241, 235, 235, 0.4);
    border-radius: 12px;
    padding: 28px 24px 32px;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    transition: border 0.3s ease, backdrop-filter 0.3s ease;

}

.location-card:hover {
    backdrop-filter: blur(16px); /* more frosted */
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--color-primary-light); /* subtle light border */
}
/* map frame */
.map-embed {
    width: 100%;
    aspect-ratio: 4 / 3;   /* responsive, no JS needed */
    border: 0;
    border-radius: 10px;
}


/* Stacked layout — image first, text below */
.stacked-grid .image-text-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.stacked-grid .image-column,
.stacked-grid .text-column {
    width: 100%;
}

.stacked-grid .image-column img {
    width: 100%;
    height: auto;
    display: block;
}