/* ----------------------------------------------
   ROOT VARIABLES - Your Color Scheme
------------------------------------------------ */
:root{
    --primary-blue:#00A6D6;
    --accent-yellow:#F1EF2A;

    --bg-white:#FFFFFF;
    --bg-secondary:#F4F7F6;

    --text-dark:#1A1A1A;
    --text-muted:#5a6874;

    --blue-dark:#008bb5;
    --yellow-dark:#d4d21f;

    --shadow-sm:0 10px 30px -12px rgba(0,0,0,.08);
    --shadow-md:0 20px 35px -12px rgba(0,166,214,.12);

    --transition:all .3s cubic-bezier(.2,.95,.4,1);
}
html,
body{
    overflow-x:hidden;
    width:100%;
}
html{
    scroll-behavior:smooth;
}

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

body{
   font-family:'Inter',sans-serif;

    background:var(--bg-secondary);
    color:var(--text-dark);
    min-height:100vh;

}

/* ----------------------------------------------
   MODERN HEADER
------------------------------------------------ */
.modern-header{
    position:fixed;
    top:0;
    left:0;

    width:100%;

    z-index:9999;

    transition:
    transform .45s cubic-bezier(.77,0,.175,1),
    background .35s ease,
    box-shadow .35s ease;
}

/* HIDE */
.modern-header.nav-hidden{
    transform:translateY(-100%);
}

/* SCROLLED */
.modern-header.scrolled{
    background:rgba(255,255,255,.92);

    backdrop-filter:blur(18px);

    box-shadow:
    0 18px 45px rgba(15,23,42,.08);
}
.modern-header.scrolled{
    background:rgba(255,255,255,.92);

    box-shadow:
    0 18px 45px rgba(15,23,42,.08);
}

.modern-header.hidden{
    transform:translateY(-130%);
}

.modern-header::before{
    content:'';

    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:3px;

    background:linear-gradient(90deg,var(--primary-blue),var(--accent-yellow));
}

.nav-container{
    max-width:1440px;
    margin:0 auto;

    padding:0 2rem;
}

.nav-wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:1.5rem;

    padding:1.1rem 0;
}

/* ----------------------------------------------
   LOGO
------------------------------------------------ */
.logo-brand{
    display:flex;
    align-items:center;

    text-decoration:none;

    flex-shrink:0;
}

.logo-img{
    height:48px;
    width:auto;

    display:block;
    object-fit:contain;
}

/* ----------------------------------------------
   NAVIGATION
------------------------------------------------ */
.nav-menu{
    flex:1;

    display:flex;
    justify-content:center;
}

.nav-links{
    display:flex;
    align-items:center;

    list-style:none;

    gap:.3rem;
}

.nav-links li{
    position:relative;
}

.nav-links li a{
    text-decoration:none;

    color:var(--text-dark);

    font-size:.95rem;
    font-weight:600;

    padding:.8rem 1rem;

    border-radius:14px;

    display:flex;
    align-items:center;
    gap:6px;

    transition:var(--transition);

    white-space:nowrap;
}

.nav-links > li > a:hover{
    background:rgba(0,166,214,.06);
    color:var(--primary-blue);
}

/* ACTIVE NAV */
.nav-links > li > a.active{
    background:rgba(0,166,214,.08);

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

/* ----------------------------------------------
   DROPDOWN
------------------------------------------------ */
.dropdown{
    position:relative;
}

.dropdown-menu{
    position:absolute;

    top:calc(100% + 14px);
    left:0;

    min-width:250px;

    background:#fff;

    list-style:none;

    border-radius:18px;

    padding:.6rem 0;

    border:1px solid rgba(0,166,214,.08);

    box-shadow:var(--shadow-md);

    opacity:0;
    visibility:hidden;

    transform:translateY(12px);

    transition:all .28s ease;

    z-index:100;
}

.dropdown:hover .dropdown-menu{
    opacity:1;
    visibility:visible;

    transform:translateY(0);
}

.dropdown-menu li{
    position:relative;
}

.dropdown-menu li a{
    padding:.8rem 1.2rem;

    border-radius:0;

    justify-content:space-between;

    font-size:.86rem;
    font-weight:500;
}

.dropdown-menu li a:hover{
    background:var(--bg-secondary);

    color:var(--primary-blue);

    padding-left:1.5rem;
}

/* ----------------------------------------------
   NESTED MENU
------------------------------------------------ */
.nested-dropdown{
    position:relative;
}

.nested-menu{
    position:absolute;

    left:100%;
    top:0;

    min-width:220px;

    background:#fff;

    list-style:none;

    border-radius:16px;

    padding:.6rem 0;

    border:1px solid rgba(0,166,214,.08);

    box-shadow:var(--shadow-md);

    opacity:0;
    visibility:hidden;

    transform:translateX(10px);

    transition:all .25s ease;
}

.nested-dropdown:hover .nested-menu{
    opacity:1;
    visibility:visible;

    transform:translateX(0);
}

.nested-menu li a{
    padding:.75rem 1.2rem;

    font-size:.85rem;
}

/* ----------------------------------------------
   CTA
------------------------------------------------ */
.cta-actions{
    display:flex;
    align-items:center;

    flex-shrink:0;
}

/* ==========================================
   CONTACT BUTTON
========================================== */
.contact-phone{
    position:relative;

    text-decoration:none;

    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:.9rem 1.45rem;

    border-radius:999px;

    background:
    linear-gradient(
        135deg,
        var(--accent-yellow),
        var(--yellow-dark)
    );

    color:var(--text-dark);

    font-size:.9rem;
    font-weight:700;

    letter-spacing:.2px;

    overflow:hidden;

    transition:
    transform .35s ease,
    box-shadow .35s ease,
    gap .35s ease;

    box-shadow:
    0 18px 40px rgba(241,239,42,.18);
}

/* ICON */
.contact-phone i{
    font-size:.82rem;

    transition:transform .35s ease;
}

/* SHINE EFFECT */
.contact-phone::before{
    content:'';

    position:absolute;

    top:0;
    left:-120%;

    width:120%;
    height:100%;

    background:
    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.28),
        transparent
    );

    transition:left .7s ease;
}

/* HOVER */


.contact-phone:hover::before{
    left:120%;
}

.contact-phone:hover i{
    transform:rotate(-8deg) scale(1.08);
}
.contact-phone i{
    font-size:1rem;
}

/* ----------------------------------------------
   CARET ICONS
------------------------------------------------ */
.fa-chevron-down,
.fa-chevron-right{
    font-size:.68rem;
    opacity:.7;
}

/* ----------------------------------------------
   MOBILE OVERLAY
------------------------------------------------ */
.mobile-overlay{
    display:none;

    position:fixed;

    inset:0;

    background:rgba(15,23,42,.45);

    backdrop-filter:blur(4px);

    z-index:9998;

    opacity:0;
    visibility:hidden;

    transition:all .35s ease;
}

.mobile-overlay.active{
    opacity:1;
    visibility:visible;
}

/* ----------------------------------------------
   MOBILE TOGGLE
------------------------------------------------ */
.mobile-toggle{
    width:50px;
    height:50px;

    border:none;
    outline:none;

    background:rgba(0,166,214,.08);

    border:1px solid rgba(0,166,214,.10);

    border-radius:14px;

    display:none;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    transition:all .3s ease;

    position:relative;

    z-index:10001;

    flex-shrink:0;
}

/* ICON */
.mobile-toggle i{
    font-size:1.1rem;

    color:var(--primary-blue);

    transition:transform .3s ease;
}

.mobile-toggle:hover{
    background:rgba(0,166,214,.14);
}

.mobile-toggle.active{
    background:var(--primary-blue);
}

.mobile-toggle.active i{
    color:#fff;

    transform:rotate(90deg);
}

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

    .nav-links{
        gap:.2rem;
    }

    .nav-links li a{
        font-size:.86rem;

        padding:.75rem .8rem;
    }

    .nav-wrapper{
        gap:1rem;
    }

}


/* ----------------------------------------------
   TABLET + MOBILE MENU
------------------------------------------------ */
@media(max-width:1100px){

    .nav-container{
        padding:0 1rem;
    }

    .nav-wrapper{
        padding:.9rem 0;

        gap:1rem;
    }

   

    .mobile-toggle{
        display:flex;
    }

    .mobile-overlay{
        display:block;
    }

  .nav-menu{
    position:fixed;

    top:0;
    right:0;

    width:320px;
    max-width:85vw;

    height:100dvh;

    background:rgba(255,255,255,.94);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    z-index:9999;

    padding:6rem 1.2rem 2rem;

    overflow-y:auto;

    overscroll-behavior:contain;

    -webkit-overflow-scrolling:touch;

    transform:translate3d(110%,0,0);

    transition:
    transform .45s cubic-bezier(.77,0,.175,1);

    box-shadow:
    -10px 0 40px rgba(0,0,0,.08);

    will-change:transform;
}

/* ACTIVE */
.nav-menu.active{
    transform:translate3d(0,0,0);
}

    /* LINKS */
    .nav-links{
        width:100%;

        display:flex;
        flex-direction:column;

        align-items:stretch;

        gap:.45rem;
    }

    .nav-links li{
        width:100%;
    }

    .nav-links li a{
        width:100%;

        display:flex;
        align-items:center;
        justify-content:space-between;

        padding:1rem 1.1rem;

        background:#fff;

        border-radius:14px;

        border:1px solid rgba(0,166,214,.08);

        font-size:.94rem;
        font-weight:500;

        color:var(--text-dark);

        transition:all .25s ease;
    }

    .nav-links li a:hover{
        background:rgba(0,166,214,.04);

        border-color:rgba(0,166,214,.15);
    }

    /* MOBILE DROPDOWN */
    .dropdown-menu,
    .nested-menu{
        position:static;

        opacity:1;
        visibility:visible;

        transform:none;

        display:none;

        min-width:100%;

        width:100%;

        background:transparent;

        box-shadow:none;

        border:none;

        padding:.6rem 0 0;

        margin-top:.5rem;
    }

    .dropdown.active > .dropdown-menu{
        display:block;
    }

    .nested-dropdown.active > .nested-menu{
        display:block;
    }

    /* DROPDOWN LINKS */
    .dropdown-menu li a,
    .nested-menu li a{
        background:#f8fbfc;

        border-radius:12px;

        margin-bottom:.35rem;

        padding:.95rem 1rem;

        font-size:.87rem;
        font-weight:500;

        border:1px solid rgba(0,166,214,.06);

        color:var(--text-dark);

        transition:all .25s ease;
    }

    .nested-menu li a{
        margin-left:.7rem;

        background:#f1f8fc;

        font-size:.82rem;
    }

    .dropdown-menu li a:hover{
        background:rgba(0,166,214,.08);

        border-color:rgba(0,166,214,.15);

        padding-left:1.15rem;
    }

    .nested-menu li a:hover{
        background:rgba(0,166,214,.12);

        padding-left:1.2rem;
    }

    /* CTA */
    .cta-actions{
        margin-left:auto;
    }

}

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

    .nav-wrapper{
        padding:.8rem 0;
    }

    .logo-img{
        height:40px;
    }

    .contact-phone{
        display:none;
    }

}

/* ----------------------------------------------
   EXTRA SMALL
------------------------------------------------ */
@media(max-width:480px){

    .nav-container{
        padding:0 .8rem;
    }

    .logo-img{
        height:34px;
    }

    .mobile-toggle{
        width:44px;
        height:44px;

        border-radius:12px;
    }

    .mobile-toggle i{
        font-size:1rem;
    }

    .nav-links li a{
        font-size:.9rem;

        padding:.95rem .9rem;
    }

    .dropdown-menu li a,
    .nested-menu li a{
        padding:.85rem .9rem;

        font-size:.84rem;
    }

}
/* ----------------------------------------------
   HEADER SCROLL EFFECT
------------------------------------------------ */
.modern-header.scrolled{
    padding-block:.15rem;
}
/* ==========================================
   HERO SECTION
========================================== */
.hero-section{
    position:relative;

    overflow:hidden;

    background:
    radial-gradient(circle at top left,
    rgba(0,166,214,.12),
    transparent 26%),

    radial-gradient(circle at bottom right,
    rgba(241,239,42,.12),
    transparent 24%),

    var(--bg-secondary);

    padding:6rem 0;
}

/* CONTAINER */
.hero-container{
    width:100%;
    max-width:1300px;

    margin:0 auto;

    padding:0 2rem;

    display:grid;
    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:4rem;
}

/* LEFT */
.hero-content{
    position:relative;
    z-index:5;
}

/* EYEBROW */
.eyebrow{
    display:inline-block;

    font-size:.82rem;
    font-weight:700;

    letter-spacing:.18em;
    text-transform:uppercase;

    color:var(--primary-blue);

    margin-bottom:1.4rem;
}

/* TITLE */
.hero-title{
    font-size:clamp(3rem,6vw,4.2rem);

    line-height:1.02;

    font-weight:500;

    letter-spacing:-.08em;

    margin-bottom:1.8rem;

    color:var(--text-dark);

    max-width:720px;
}

/* SUBTITLE */
.hero-subtitle{
    color:var(--text-muted);

    font-size:1.02rem;

    line-height:1.8;

    font-weight:400;

    letter-spacing:-0.01em;

    max-width:620px;

    margin-bottom:2.4rem;
}

/* BUTTONS */
.hero-actions{
    display:flex;
    align-items:center;

    gap:1rem;

    flex-wrap:wrap;
}

.hero-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:1rem 1.8rem;

    border-radius:999px;

    text-decoration:none;

    font-weight:700;

    transition:all .3s ease;
}

/* PRIMARY */
.primary-btn{
    background:linear-gradient(
        135deg,
        var(--primary-blue),
        var(--blue-dark)
    );

    color:#fff;

    box-shadow:
    0 20px 45px rgba(0,166,214,.20);
}

.primary-btn:hover{
    transform:translateY(-3px);
}

/* SECONDARY */
.secondary-btn{
    background:#fff;

    border:1px solid rgba(0,166,214,.12);

    color:var(--text-dark);
}

.secondary-btn:hover{
    background:rgba(0,166,214,.04);

    transform:translateY(-3px);
}

/* ==========================================
   RIGHT VISUAL
========================================== */
.hero-visual{
    position:relative;

    height:620px;

    display:flex;
    align-items:center;
    justify-content:center;
}

/* GEAR */
.hero-center-gear{
    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;
}

.center-gear-image{
    width:min(520px,90vw);

    object-fit:contain;

    opacity:.14;

    filter:
    grayscale(100%)
    drop-shadow(0 30px 60px rgba(0,0,0,.08));

    animation:
    rotateGear 40s linear infinite;
}


/* ==========================================
   ANIMATIONS
========================================== */
@keyframes rotateGear{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


/* ==========================================
   RESPONSIVE
========================================== */
@media(max-width:992px){

    .hero-section{
        padding:5rem 0;
    }

    .hero-container{
        grid-template-columns:1fr;

        gap:3rem;

        text-align:center;
    }

    .hero-content{
        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .hero-title{
        max-width:760px;
    }

    .hero-subtitle{
        margin-inline:auto;
    }

    .hero-actions{
        justify-content:center;
    }

    .hero-visual{
        height:480px;
    }

    .center-gear-image{
        width:380px;
    }

}

/* ==========================================
   MOBILE
========================================== */
@media(max-width:768px){

    .hero-section{
        padding:4rem 0 4.5rem;
    }

    .hero-container{
        padding:0 1rem;

        gap:2.5rem;
    }

    .hero-title{
        font-size:clamp(2.3rem,11vw,3rem);

        line-height:1.04;

        letter-spacing:-0.07em;

        margin-bottom:1.2rem;
    }

    .hero-subtitle{
        font-size:.98rem;

        line-height:1.75;

        margin-bottom:2rem;
    }

    .hero-actions{
        width:100%;

        flex-direction:column;

        gap:.9rem;
    }

    .hero-button{
        width:100%;

        max-width:320px;

        padding:1rem 1.4rem;
    }

    .hero-visual{
        height:320px;
    }

    .center-gear-image{
        width:240px;

        opacity:.12;
    }

}

/* ==========================================
   EXTRA SMALL
========================================== */
@media(max-width:480px){

    .hero-section{
        padding:3.5rem 0 4rem;
    }

    .hero-title{
        font-size:2rem;

        line-height:1.06;
    }

    .hero-subtitle{
        font-size:.93rem;
    }

    .hero-visual{
        height:260px;
    }

    .center-gear-image{
        width:180px;
    }

}
@media(max-width:768px){

    .hero-visual{
        position:absolute;

        top:50%;
        left:50%;

        transform:translate(-50%,-50%);

        width:100%;

        height:auto;

        pointer-events:none;

        z-index:1;
    }

    .hero-content{
        position:relative;
        z-index:5;
    }

    .center-gear-image{
        width:220px;

        opacity:.1;
    }

}/* ==========================================
   MINIMAL METRICS
========================================== */
.minimal-metrics{
    position:relative;

    padding:4.5rem 0;

    background:#fff;

    overflow:hidden;
}

/* ==========================================
   HEADING
========================================== */
.minimal-metrics-heading{
    text-align:center;

    margin-bottom:4rem;

    padding:0 1rem;
}

.minimal-title{
    font-size:clamp(2rem,4vw,3.5rem);

    line-height:1;

    font-weight:500;

    letter-spacing:-.08em;

    color:var(--text-dark);
}

/* ==========================================
   CONTAINER
========================================== */
.minimal-metrics-container{
    width:100%;
    max-width:1380px;

    margin:0 auto;

    padding:0 2rem;

    display:grid;

    grid-template-columns:
    repeat(5,1fr);

    gap:0;
}

/* ==========================================
   ITEM
========================================== */
.minimal-metric{
    position:relative;

    text-align:center;

    padding:0 2rem;
}

/* SEPARATOR */
.minimal-metric:not(:last-child)::after{
    content:'';

    position:absolute;

    top:50%;
    right:0;

    transform:translateY(-50%);

    width:1px;
    height:90px;

    background:
    linear-gradient(
        to bottom,
        transparent,
        rgba(15,23,42,.08),
        transparent
    );
}

/* NUMBER ROW */
.metric-top{
    display:flex;
    align-items:flex-start;
    justify-content:center;

    margin-bottom:1rem;
}

/* NUMBER */
.metric-number{
    font-size:clamp(2.8rem,5vw,4.5rem);

    line-height:.9;

    font-weight:500;

    letter-spacing:-.1em;

    color:var(--text-dark);
}

/* + / MT */
.metric-top span{
    font-size:1rem;

    font-weight:700;

    color:var(--primary-blue);

    margin-left:4px;

    margin-top:.25rem;
}

/* TEXT */
.minimal-metric p{
    color:var(--text-muted);

    font-size:.95rem;

    line-height:1.6;

    letter-spacing:-0.01em;
}

/* ==========================================
   HOVER
========================================== */
.minimal-metric:hover .metric-number{
    color:var(--primary-blue);

    transform:translateY(-2px);

    transition:all .3s ease;
}

/* ==========================================
   RESPONSIVE
========================================== */
@media(max-width:1100px){

    .minimal-metrics-container{
        grid-template-columns:
        repeat(2,1fr);

        gap:3rem 0;
    }

    .minimal-metric:nth-child(2)::after,
    .minimal-metric:nth-child(4)::after{
        display:none;
    }

}

@media(max-width:768px){

    .minimal-metrics{
        padding:4rem 0;
    }

    .minimal-metrics-heading{
        margin-bottom:3rem;
    }

    .minimal-metrics-container{
        grid-template-columns:1fr;

        gap:2.5rem;

        padding:0 1rem;
    }

    .minimal-metric{
        padding:0;
    }

    .minimal-metric::after{
        display:none;
    }

    .metric-number{
        font-size:3.2rem;
    }

}/* ==========================================
   ABOUT SECTION
========================================== */
.about-minimal{
    position:relative;

    padding:7rem 0;

    background:
    radial-gradient(circle at top left,
    rgba(0,166,214,.05),
    transparent 24%),

    radial-gradient(circle at bottom right,
    rgba(241,239,42,.08),
    transparent 20%),

    #fff;

    overflow:hidden;
}

/* ==========================================
   CONTAINER
========================================== */
.about-minimal-container{
    width:100%;
    max-width:1320px;

    margin:0 auto;

    padding:0 2rem;

    display:grid;

    grid-template-columns:
    1fr 1fr;

    align-items:center;

    gap:5rem;
}

/* ==========================================
   LEFT CONTENT
========================================== */
.about-content{
    position:relative;

    z-index:2;
}

/* TAG */
.about-mini-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:.7rem 1.1rem;

    border-radius:999px;

    background:rgba(0,166,214,.08);

    color:var(--primary-blue);

    font-size:.78rem;
    font-weight:700;

    letter-spacing:.18em;
    text-transform:uppercase;

    margin-bottom:1.6rem;
}

/* TITLE */
.about-minimal-title{
    font-size:clamp(2.5rem,5vw,4.2rem);

    line-height:.96;

    font-weight:500;

    letter-spacing:-.09em;

    color:var(--text-dark);

    margin-bottom:1.8rem;

    max-width:620px;
}

/* HIGHLIGHT */
.about-minimal-title span{
    color:var(--primary-blue);
}

/* TEXT */
.about-minimal-text{
    color:var(--text-muted);

    font-size:1.02rem;

    line-height:1.9;

    letter-spacing:-0.01em;

    max-width:620px;

    margin-bottom:2.4rem;
}

/* ==========================================
   BUTTON WRAP
========================================== */
.about-minimal-actions{
    display:flex;
    align-items:center;
}

/* ==========================================
   BUTTON
========================================== */
.about-learn-btn{
    position:relative;

    display:inline-flex;
    align-items:center;
    gap:.8rem;

    text-decoration:none;

    padding:1rem 1.5rem;

    border-radius:999px;

    background:
    linear-gradient(
        135deg,
        var(--primary-blue),
        #008bb3
    );

    color:#fff;

    font-size:.95rem;
    font-weight:600;

    letter-spacing:-0.01em;

    overflow:hidden;

    transition:
    transform .35s ease,
    box-shadow .35s ease,
    gap .35s ease;

    box-shadow:
    0 18px 40px rgba(0,166,214,.18);
}

/* ICON */
.about-learn-btn i{
    font-size:.85rem;

    transition:transform .35s ease;
}

/* SHINE EFFECT */
.about-learn-btn::before{
    content:'';

    position:absolute;

    top:0;
    left:-120%;

    width:120%;
    height:100%;

    background:
    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.28),
        transparent
    );

    transition:left .7s ease;
}

/* HOVER */
.about-learn-btn:hover{
    transform:translateY(-4px);

    gap:1rem;

    box-shadow:
    0 24px 50px rgba(0,166,214,.24);
}

.about-learn-btn:hover::before{
    left:120%;
}

.about-learn-btn:hover i{
    transform:translateX(4px);
}

/* ==========================================
   MOBILE
========================================== */
@media(max-width:768px){

    .about-minimal-actions{
        width:100%;
    }

    .about-learn-btn{
        width:100%;

        justify-content:center;

        padding:1rem 1.3rem;
    }

}
/* ICON */
.about-learn-btn i{
    transition:transform .3s ease;
}

/* HOVER */
.about-learn-btn:hover{
    transform:translateY(-4px);

    box-shadow:
    0 24px 50px rgba(0,166,214,.24);
}

.about-learn-btn:hover i{
    transform:translateX(4px);
}

/* ==========================================
   IMAGE
========================================== */
.about-image-wrap{
    position:relative;

    border-radius:34px;

    overflow:hidden;

    min-height:620px;

    box-shadow:
    0 40px 80px rgba(15,23,42,.12);
}

/* IMAGE */
.about-image-wrap img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:transform 1.2s ease;
}

/* OVERLAY */
.about-image-wrap::after{
    content:'';

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(15,23,42,.18),
        transparent 50%
    );
}

/* HOVER */
.about-image-wrap:hover img{
    transform:scale(1.06);
}

/* ==========================================
   RESPONSIVE
========================================== */
/* ==========================================
   MOBILE LAYOUT
========================================== */
@media(max-width:1100px){

    .about-minimal{
        padding:5rem 0;
    }

    .about-minimal-container{
        display:flex;

        flex-direction:column;

        padding:0 1.5rem;

        gap:0;
    }

    .about-content{
        display:contents;
    }

    /* TAG */
    .about-mini-tag{
        order:1;

        text-align:center;

        margin:0 auto .9rem;
    }

    /* TITLE */
    .about-minimal-title{
        order:2;

        text-align:center;

        margin-bottom:1.2rem;

        max-width:100%;
    }

    /* IMAGE */
    .about-image-wrap{
        order:3;

        width:100%;

        min-height:340px;

        margin-bottom:1.2rem;

        border-radius:26px;
    }

    /* TEXT */
    .about-minimal-text{
        order:4;

        text-align:center;

        max-width:100%;

        margin-bottom:1.4rem;
    }

    /* BUTTON */
    .about-minimal-actions{
        order:5;

        justify-content:center;
    }

}

/* ==========================================
   MOBILE
========================================== */
@media(max-width:768px){

    .about-minimal{
        padding:2rem 0;
    }

    .about-minimal-container{
        padding:0 1rem;
    }

    .about-mini-tag{
        font-size:.72rem;

        padding:.65rem 1rem;

        margin-bottom:.8rem;
    }

    .about-minimal-title{
        font-size:clamp(2rem,10vw,3rem);

        line-height:1;

        margin-bottom:1rem;
    }

    .about-minimal-text{
        font-size:.96rem;

        line-height:1.8;

        margin-bottom:1.2rem;
    }

    .about-image-wrap{
        min-height:280px;

        margin-bottom:1.2rem;

        border-radius:22px;
    }

    .about-learn-btn{
        width:100%;

        justify-content:center;
    }

}

/* ==========================================
   WHY SPLIT SECTION
========================================== */
.why-split{
    position:relative;

    padding:8rem 0;

    background:#fff;

    overflow:hidden;
}

/* ==========================================
   CONTAINER
========================================== */
.why-split-container{
    width:100%;
    max-width:1400px;

    margin:0 auto;

    padding:0 2rem;

    display:grid;

    grid-template-columns:
    1.1fr .9fr;

    gap:7rem;
}

/* ==========================================
   LEFT SIDE
========================================== */
/* LEFT SIDE */
.why-left{
    position:sticky;

    top:120px;

    align-self:start;

    padding-top:0;
}
/* TAG */
.why-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:.8rem 1.2rem;

    border-radius:999px;

    background:rgba(0,166,214,.08);

    color:var(--primary-blue);

    font-size:.8rem;
    font-weight:700;

    letter-spacing:.18em;
    text-transform:uppercase;

    margin-bottom:1.8rem;
}

/* TITLE */
.why-title{
    font-size:clamp(3.5rem,7vw,6rem);

    line-height:.92;

    font-weight:500;

    letter-spacing:-.11em;

    color:var(--text-dark);

    max-width:700px;
}

/* ==========================================
   RIGHT SIDE
========================================== */
.why-right{
    display:flex;
    flex-direction:column;

    gap:2.8rem;

    padding-top:1.5rem;
}

/* ITEM */
.why-item{
    display:flex;

    align-items:flex-start;

    gap:1.5rem;

    padding-bottom:2.8rem;

    border-bottom:
    1px solid rgba(15,23,42,.08);
}

/* ICON */
.why-item-icon{
    width:58px;
    height:58px;

    flex-shrink:0;

    border-radius:18px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
    rgba(241,239,42,.16);

    color:#111;

    font-size:1.2rem;

    margin-top:.35rem;
}

/* ICON INSIDE */
.why-item-icon i{
    line-height:1;
}

/* CONTENT */
.why-item-content{
    flex:1;
}

/* ITEM TITLE */
.why-item-content h3{
    font-size:1.45rem;

    line-height:1.1;

    font-weight:600;

    letter-spacing:-0.04em;

    color:var(--text-dark);

    margin-bottom:.9rem;
}

/* TEXT */
.why-item-content p{
    color:var(--text-muted);

    font-size:1rem;

    line-height:1.9;

    letter-spacing:-0.01em;

    max-width:620px;
}

/* ==========================================
   RESPONSIVE
========================================== */
@media(max-width:1100px){

    .why-split{
        padding:6rem 0;
    }

    .why-split-container{
        grid-template-columns:1fr;

        gap:4rem;

        padding:0 1.5rem;
    }

    .why-left{
        position:relative;

        top:auto;

        padding-top:0;
    }

    .why-title{
        max-width:100%;
    }

    .why-right{
        padding-top:0;
    }

}

@media(max-width:768px){

    .why-split{
        padding:5rem 0;
    }

    .why-split-container{
        padding:0 1rem;

        gap:3rem;
    }

    .why-tag{
        font-size:.72rem;

        padding:.7rem 1rem;

        margin-bottom:1.2rem;
    }

    .why-title{
        font-size:clamp(2.6rem,11vw,4rem);

        line-height:.96;
    }

    .why-right{
        gap:2rem;
    }

    .why-item{
        gap:1rem;

        padding-bottom:2rem;
    }

    .why-item-icon{
        width:52px;
        height:52px;

        border-radius:16px;

        font-size:1.05rem;
    }

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

    .why-item-content p{
        font-size:.95rem;

        line-height:1.8;
    }

}
/* ==========================================
   PRODUCTS SECTION
========================================== */
.products-editorial{
    position:relative;

    padding:8rem 0;

    background:#fff;

    overflow:hidden;
}

/* ==========================================
   CONTAINER
========================================== */
.products-editorial-container{
    width:100%;
    max-width:1380px;

    margin:0 auto;

    padding:0 2rem;
}

/* ==========================================
   TOP
========================================== */
.products-editorial-top{
    margin-bottom:4rem;
}

/* TAG */
.products-editorial-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:.8rem 1.2rem;

    border-radius:999px;

    background:rgba(0,166,214,.08);

    color:var(--primary-blue);

    font-size:.8rem;
    font-weight:700;

    letter-spacing:.18em;
    text-transform:uppercase;

    margin-bottom:1.4rem;
}

/* TITLE */
.products-editorial-title{
    font-size:clamp(3rem,6vw,5rem);

    line-height:.94;

    font-weight:500;

    letter-spacing:-.1em;

    color:var(--text-dark);
}

/* ==========================================
   GRID
========================================== */
.products-editorial-list{
    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:2rem;
}

/* ==========================================
   ITEM
========================================== */
.product-editorial-item{
    display:flex;

    flex-direction:column;

    gap:1rem;

    text-decoration:none;

    padding-bottom:1.5rem;

    border-bottom:
    1px solid rgba(15,23,42,.08);

    transition:
    transform .35s ease,
    padding .35s ease;
}

/* ==========================================
   IMAGE
========================================== */
.product-editorial-image{
    height:240px;

    border-radius:24px;

    overflow:hidden;

    position:relative;

    background:#f8fafc;

    display:flex;
    align-items:center;
    justify-content:center;
}

.product-editorial-image img{
    max-width:90%;
    max-height:90%;

    object-fit:contain;

    display:block;

    transition:transform .8s ease;
}
/* ==========================================
   CONTENT
========================================== */
.product-editorial-content{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:1rem;
}

/* NUMBER */
.product-editorial-number{
    font-size:.82rem;

    font-weight:700;

    color:var(--primary-blue);

    letter-spacing:.08em;

    min-width:34px;
}

/* TEXT */
.product-editorial-text{
    flex:1;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:1rem;
}

/* TITLE */
.product-editorial-text h3{
    font-size:clamp(1.6rem,3vw,2.4rem);

    line-height:1;

    font-weight:500;

    letter-spacing:-.07em;

    color:var(--text-dark);

    transition:all .35s ease;
}

/* VIEW */
.product-editorial-text span{
    display:inline-flex;
    align-items:center;

    gap:.6rem;

    color:var(--text-muted);

    font-size:.88rem;
    font-weight:600;

    transition:all .35s ease;

    white-space:nowrap;
}

/* ICON */
.product-editorial-text i{
    font-size:.82rem;
}

/* ==========================================
   HOVER
========================================== */
.product-editorial-item:hover{
    transform:translateY(-5px);
}

.product-editorial-item:hover img{
    transform:scale(1.08);
}

.product-editorial-item:hover .product-editorial-text h3{
    color:var(--primary-blue);
}

.product-editorial-item:hover .product-editorial-text span{
    color:var(--primary-blue);

    transform:translateX(4px);
}

/* ==========================================
   RESPONSIVE
========================================== */
@media(max-width:1100px){

    .products-editorial{
        padding:6rem 0;
    }

    .products-editorial-container{
        padding:0 1.5rem;
    }

    .products-editorial-list{
        gap:1.5rem;
    }

    .product-editorial-image{
        height:210px;
    }

    .product-editorial-text h3{
        font-size:1.8rem;
    }

}

@media(max-width:768px){

    .products-editorial{
        padding:5rem 0;
    }

    .products-editorial-container{
        padding:0 1rem;
    }

    .products-editorial-top{
        margin-bottom:3rem;
    }

    .products-editorial-title{
        font-size:clamp(2.5rem,10vw,4rem);
    }

    /* MOBILE SLIDER */
    .products-editorial-list{
        display:flex;

        gap:1rem;

        overflow-x:auto;

        scroll-snap-type:x mandatory;

        padding-bottom:.5rem;

        scrollbar-width:none;
    }

    .products-editorial-list::-webkit-scrollbar{
        display:none;
    }

    /* ITEM */
    .product-editorial-item{
        min-width:88%;

        flex-shrink:0;

        scroll-snap-align:start;

        padding-bottom:1rem;
    }

     .product-editorial-image{
        height:220px;

        border-radius:18px;
    }

    .product-editorial-image img{
        padding:.8rem;
    }

    /* CONTENT */
    .product-editorial-content{
        gap:1rem;
    }

    .product-editorial-number{
        display:none;
    }

    .product-editorial-text{
        flex-direction:column;

        align-items:flex-start;

        gap:.7rem;
    }

    .product-editorial-text h3{
        font-size:1.5rem;
    }

    .product-editorial-text span{
        font-size:.84rem;
    }

}
/* ==========================================
   PLANTS SECTION
========================================== */
.plants-editorial{
    position:relative;

    padding:8rem 0;

    background:#fff;

    overflow:hidden;
}

/* ==========================================
   CONTAINER
========================================== */
.plants-editorial-container{
    width:100%;
    max-width:1380px;

    margin:0 auto;

    padding:0 2rem;

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:6rem;
}

/* ==========================================
   LEFT
========================================== */
.plants-editorial-left{
    position:sticky;

    top:120px;

    align-self:start;
}

/* TAG */
.plants-editorial-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:.8rem 1.2rem;

    border-radius:999px;

    background:rgba(0,166,214,.08);

    color:var(--primary-blue);

    font-size:.8rem;
    font-weight:700;

    letter-spacing:.18em;
    text-transform:uppercase;

    margin-bottom:1.4rem;
}

/* TITLE */
.plants-editorial-title{
    font-size:clamp(3rem,6vw,5.5rem);

    line-height:.94;

    font-weight:500;

    letter-spacing:-.1em;

    color:var(--text-dark);

    max-width:650px;
}

/* ==========================================
   RIGHT
========================================== */
.plants-editorial-right{
    display:flex;
    flex-direction:column;

    gap:2rem;
}

/* ==========================================
   ITEM
========================================== */
.plant-editorial-item{
    border-bottom:
    1px solid rgba(15,23,42,.08);

    padding-bottom:2rem;
}

/* IMAGE */
.plant-editorial-image{
    height:320px;

    border-radius:28px;

    overflow:hidden;

    margin-bottom:1.4rem;
}

.plant-editorial-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:transform 1s ease;
}

/* CONTENT */
.plant-editorial-content{
    display:flex;
    align-items:center;

    gap:1rem;
}

/* ICON */
.plant-editorial-icon{
    width:54px;
    height:54px;

    flex-shrink:0;

    border-radius:16px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
    rgba(241,239,42,.16);

    color:#111;

    font-size:1rem;
}

/* TITLE */
.plant-editorial-text h3{
    font-size:2rem;

    line-height:1;

    font-weight:500;

    letter-spacing:-.06em;

    color:var(--text-dark);

    margin-bottom:.5rem;
}

/* TEXT */
.plant-editorial-text p{
    color:var(--text-muted);

    font-size:1rem;
}

/* HOVER */
.plant-editorial-item:hover img{
    transform:scale(1.08);
}

/* ==========================================
   RESPONSIVE
========================================== */
@media(max-width:1100px){

    .plants-editorial{
        padding:6rem 0;
    }

    .plants-editorial-container{
        grid-template-columns:1fr;

        gap:4rem;

        padding:0 1.5rem;
    }

    .plants-editorial-left{
        position:relative;

        top:auto;
    }

}

@media(max-width:768px){

    .plants-editorial{
        padding:5rem 0;
    }

    .plants-editorial-container{
        padding:0 1rem;

        gap:3rem;
    }

    .plants-editorial-title{
        font-size:clamp(2.5rem,10vw,4rem);
    }

    .plant-editorial-image{
        height:240px;

        border-radius:22px;
    }

    .plant-editorial-text h3{
        font-size:1.5rem;
    }

    .plant-editorial-text p{
        font-size:.95rem;
    }

}/* ==========================================
   CERTIFICATIONS
========================================== */
.cert-minimal{
    position:relative;

    padding:8rem 0;

    background:#fff;

    overflow:hidden;
}

/* ==========================================
   CONTAINER
========================================== */
.cert-minimal-container{
    width:100%;
    max-width:1380px;

    margin:0 auto;

    padding:0 2rem;
}

/* ==========================================
   TOP
========================================== */
.cert-minimal-top{
    text-align:center;

    max-width:760px;

    margin:0 auto 4rem;
}

/* TAG */
.cert-minimal-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:.8rem 1.2rem;

    border-radius:999px;

    background:rgba(0,166,214,.08);

    color:var(--primary-blue);

    font-size:.8rem;
    font-weight:700;

    letter-spacing:.18em;
    text-transform:uppercase;

    margin-bottom:1.4rem;
}

/* TITLE */
.cert-minimal-title{
    font-size:clamp(3rem,6vw,5rem);

    line-height:.95;

    font-weight:500;

    letter-spacing:-.1em;

    color:var(--text-dark);

    margin-bottom:1.3rem;
}

/* TEXT */
.cert-minimal-text{
    color:var(--text-muted);

    font-size:1rem;

    line-height:1.9;

    letter-spacing:-0.01em;
}

/* ==========================================
   GRID
========================================== */
.cert-minimal-grid{
    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:1.5rem;
}

/* ==========================================
   ITEM
========================================== */
.cert-minimal-item{
    position:relative;

    height:360px;

    border-radius:24px;

    border:
    1px solid rgba(15,23,42,.06);

    display:flex;
    align-items:center;
    justify-content:center;

    padding:1.2rem;

    background:#fff;

    overflow:hidden;

    transition:
    transform .35s ease,
    box-shadow .35s ease;
}

/* IMAGE */
.cert-minimal-item img{
    width:100%;
    height:100%;

    object-fit:contain;

    display:block;

    transition:transform .35s ease;
}

/* EXPAND BUTTON */
.cert-expand{
    position:absolute;

    top:14px;
    right:14px;

    width:42px;
    height:42px;

    border:none;

    border-radius:50%;

    background:
    rgba(15,23,42,.72);

    color:#fff;

    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:.9rem;

    opacity:0;

    transition:all .3s ease;

    z-index:2;
}

/* HOVER */
.cert-minimal-item:hover{
    transform:translateY(-6px);

    box-shadow:
    0 25px 60px rgba(15,23,42,.06);
}

.cert-minimal-item:hover img{
    transform:scale(1.03);
}

.cert-minimal-item:hover .cert-expand{
    opacity:1;
}

/* ==========================================
   LIGHTBOX
========================================== */
.cert-lightbox{
    position:fixed;

    inset:0;

    background:
    rgba(0,0,0,.96);

    z-index:99999;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:.5rem;

    opacity:0;
    visibility:hidden;

    transition:all .35s ease;
}

/* ACTIVE */
.cert-lightbox.active{
    opacity:1;
    visibility:visible;
}

/* IMAGE */
.cert-lightbox img{
    width:auto;

    max-width:99vw;
    max-height:99vh;

    object-fit:contain;

    border-radius:10px;
}

/* CLOSE */
.cert-lightbox-close{
    position:absolute;

    top:18px;
    right:18px;

    width:54px;
    height:54px;

    border:none;

    border-radius:50%;

    background:
    rgba(255,255,255,.12);

    color:#fff;

    font-size:1rem;

    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;

    backdrop-filter:blur(10px);

    z-index:2;
}

/* ==========================================
   RESPONSIVE
========================================== */
@media(max-width:992px){

    .cert-minimal-grid{
        grid-template-columns:
        repeat(2,1fr);
    }

}

/* ==========================================
   MOBILE SLIDER
========================================== */
@media(max-width:768px){

    .cert-minimal{
        padding:5rem 0;
    }

    .cert-minimal-container{
        padding:0 1rem;
    }

    .cert-minimal-top{
        margin-bottom:3rem;
    }

    .cert-minimal-title{
        font-size:clamp(2.5rem,10vw,4rem);
    }

    /* SLIDER */
    .cert-minimal-grid{
        display:flex;

        gap:1rem;

        overflow-x:auto;

        scroll-snap-type:x mandatory;

        padding-bottom:.5rem;

        scrollbar-width:none;
    }

    .cert-minimal-grid::-webkit-scrollbar{
        display:none;
    }

    /* ITEM */
    .cert-minimal-item{
        min-width:72%;

        height:320px;

        flex-shrink:0;

        scroll-snap-align:start;

        border-radius:20px;

        padding:1rem;
    }

    .cert-expand{
        opacity:1;
    }

}
/* ==========================================
   CLIENTS SECTION
========================================== */
.clients-marquee{
    position:relative;

    padding:8rem 0;

    background:#fff;

    overflow:hidden;
}

/* CONTAINER */
.clients-marquee-container{
    width:100%;
    max-width:1400px;

    margin:0 auto;

    padding:0 2rem;
}

/* ==========================================
   TOP
========================================== */
.clients-marquee-top{
    text-align:center;

    margin-bottom:4rem;
}

/* TAG */
.clients-marquee-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:.8rem 1.2rem;

    border-radius:999px;

    background:rgba(0,166,214,.08);

    color:var(--primary-blue);

    font-size:.8rem;
    font-weight:700;

    letter-spacing:.18em;
    text-transform:uppercase;

    margin-bottom:1.4rem;
}

/* TITLE */
.clients-marquee-title{
    font-size:clamp(3rem,6vw,5rem);

    line-height:.94;

    font-weight:500;

    letter-spacing:-.1em;

    color:var(--text-dark);
}

/* ==========================================
   SLIDER
========================================== */
.clients-slider{
    position:relative;

    overflow:hidden;

    width:100%;
}

/* TRACK */
.clients-track{
    display:flex;

    align-items:center;

    width:max-content;

    animation:
    clientsMarquee 30s linear infinite;
}

.client-logo{
    width:260px;
    height:140px;

    flex-shrink:0;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-right:1.2rem;

    border-radius:28px;

    border:
    1px solid rgba(15,23,42,.06);

    background:#fff;

    padding:1.5rem;

    transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

/* IMAGE */
.client-logo img{
    width:100%;
    max-width:180px;

    max-height:120px;

    object-fit:contain;

    filter:grayscale(100%);

    opacity:.78;

    transition:all .35s ease;
}

/* HOVER */
.client-logo:hover{
    transform:translateY(-5px);

    border-color:
    rgba(0,166,214,.12);
}

.client-logo:hover img{
    filter:none;

    opacity:1;

    transform:scale(1.05);
}

/* ==========================================
   ANIMATION
========================================== */
@keyframes clientsMarquee{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}

/* ==========================================
   RESPONSIVE
========================================== */
@media(max-width:768px){

    .clients-marquee{
        padding:5rem 0;
    }

    .clients-marquee-container{
        padding:0 1rem;
    }

    .clients-marquee-top{
        margin-bottom:3rem;
    }

    .clients-marquee-title{
        font-size:clamp(2.5rem,10vw,4rem);
    }

    .client-logo{
        width:170px;
        height:90px;

        border-radius:18px;
    }

    .client-logo img{
        max-width:90px;

        max-height:38px;
    }

}
/* ==========================================
   VIDEO SECTION
========================================== */
.video-showcase{
    position:relative;

    padding:8rem 0;

    background:#fff;

    overflow:hidden;
}

/* ==========================================
   CONTAINER
========================================== */
.video-showcase-container{
    width:100%;
    max-width:1400px;

    margin:0 auto;

    padding:0 2rem;
}

/* ==========================================
   TOP
========================================== */
.video-showcase-top{
    margin-bottom:4rem;
}

/* TAG */
.video-showcase-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:.8rem 1.2rem;

    border-radius:999px;

    background:rgba(0,166,214,.08);

    color:var(--primary-blue);

    font-size:.8rem;
    font-weight:700;

    letter-spacing:.18em;
    text-transform:uppercase;

    margin-bottom:1.4rem;
}

/* TITLE */
.video-showcase-title{
    font-size:clamp(3rem,6vw,5rem);

    line-height:.94;

    font-weight:500;

    letter-spacing:-.1em;

    color:var(--text-dark);
}

/* ==========================================
   DEFAULT GRID
========================================== */
.video-scroll{
    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:1.5rem;
}

/* ==========================================
   IF MORE THAN 3 VIDEOS
========================================== */
.video-scroll.more-videos{
    display:flex;

    overflow-x:auto;

    scrollbar-width:none;

    scroll-snap-type:x mandatory;

    padding-bottom:.5rem;
}

.video-scroll.more-videos::-webkit-scrollbar{
    display:none;
}

.video-scroll.more-videos .video-item{
    min-width:420px;

    flex-shrink:0;

    scroll-snap-align:start;
}

/* ==========================================
   VIDEO ITEM
========================================== */
.video-item{
    text-decoration:none;

    color:inherit;
}

/* THUMB */
.video-thumb{
    position:relative;

    height:320px;

    border-radius:28px;

    overflow:hidden;

    margin-bottom:1.2rem;
}

/* IMAGE */
.video-thumb img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:transform 1s ease;
}

/* OVERLAY */
.video-thumb::after{
    content:'';

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(15,23,42,.28),
        transparent 55%
    );
}

/* PLAY */
.video-play{
    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:78px;
    height:78px;

    border-radius:50%;

    backdrop-filter:blur(12px);

    background:
    rgba(255,255,255,.14);

    border:
    1px solid rgba(255,255,255,.18);

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;

    font-size:1.1rem;

    z-index:2;

    transition:all .35s ease;
}

/* CONTENT */
.video-content{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:1rem;
}

/* TITLE */
.video-content h3{
    font-size:1.7rem;

    line-height:1.08;

    font-weight:500;

    letter-spacing:-.05em;

    color:var(--text-dark);

    max-width:320px;

    transition:all .35s ease;
}

/* LINK */
.video-content span{
    display:inline-flex;
    align-items:center;

    gap:.5rem;

    white-space:nowrap;

    color:var(--text-muted);

    font-size:.9rem;
    font-weight:600;

    transition:all .35s ease;
}

/* HOVER */
.video-item:hover img{
    transform:scale(1.08);
}

.video-item:hover .video-play{
    transform:
    translate(-50%,-50%)
    scale(1.08);

    background:
    rgba(0,166,214,.88);
}

.video-item:hover h3{
    color:var(--primary-blue);
}

.video-item:hover span{
    color:var(--primary-blue);

    transform:translateX(4px);
}

/* ==========================================
   TABLET
========================================== */
@media(max-width:1100px){

    .video-scroll{
        grid-template-columns:
        repeat(2,1fr);
    }

}

/* ==========================================
   MOBILE
========================================== */
@media(max-width:768px){

    .video-showcase{
        padding:5rem 0;
    }

    .video-showcase-container{
        padding:0 1rem;
    }

    .video-showcase-top{
        margin-bottom:3rem;
    }

    .video-showcase-title{
        font-size:clamp(2.5rem,10vw,4rem);
    }

    /* MOBILE SLIDER */
    .video-scroll{
        display:flex;

        overflow-x:auto;

        scrollbar-width:none;

        scroll-snap-type:x mandatory;

        gap:1rem;

        padding-bottom:.5rem;
    }

    .video-scroll::-webkit-scrollbar{
        display:none;
    }

    .video-item{
        min-width:85%;

        flex-shrink:0;

        scroll-snap-align:start;
    }

    .video-thumb{
        height:240px;

        border-radius:22px;
    }

    .video-play{
        width:64px;
        height:64px;

        font-size:1rem;
    }

    .video-content{
        flex-direction:column;

        gap:.8rem;
    }

    .video-content h3{
        font-size:1.4rem;
    }

}
/* ==========================================
   VISION SECTION
========================================== */
.vision-split{
    position:relative;

    padding:8rem 0;

    background:#fff;

    overflow:hidden;
}

/* ==========================================
   CONTAINER
========================================== */
.vision-split-container{
    width:100%;
    max-width:1380px;

    margin:0 auto;

    padding:0 2rem;

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:6rem;
}

/* ==========================================
   LEFT
========================================== */
.vision-split-left{
    position:sticky;

    top:120px;

    align-self:start;
}

/* TAG */
.vision-split-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:.8rem 1.2rem;

    border-radius:999px;

    background:rgba(0,166,214,.08);

    color:var(--primary-blue);

    font-size:.8rem;
    font-weight:700;

    letter-spacing:.18em;
    text-transform:uppercase;

    margin-bottom:1.4rem;
}

/* TITLE */
.vision-split-title{
    font-size:clamp(3rem,6vw,5.5rem);

    line-height:.94;

    font-weight:500;

    letter-spacing:-.1em;

    color:var(--text-dark);

    max-width:680px;
}

/* ==========================================
   RIGHT
========================================== */
.vision-split-right{
    display:flex;
    flex-direction:column;

    gap:2.5rem;
}

/* ==========================================
   ITEM
========================================== */
.vision-item{
    display:flex;

    align-items:flex-start;

    gap:1.5rem;

    padding-bottom:2.5rem;

    border-bottom:
    1px solid rgba(15,23,42,.08);
}

/* ICON */
.vision-item-icon{
    width:60px;
    height:60px;

    flex-shrink:0;

    border-radius:18px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
    rgba(241,239,42,.16);

    color:#111;

    font-size:1.15rem;

    margin-top:.35rem;
}

/* TITLE */
.vision-item-content h3{
    font-size:1.8rem;

    line-height:1;

    font-weight:500;

    letter-spacing:-.05em;

    color:var(--text-dark);

    margin-bottom:.9rem;
}

/* TEXT */
.vision-item-content p{
    color:var(--text-muted);

    font-size:1rem;

    line-height:1.9;

    letter-spacing:-0.01em;

    max-width:620px;
}

/* ==========================================
   RESPONSIVE
========================================== */
@media(max-width:1100px){

    .vision-split{
        padding:6rem 0;
    }

    .vision-split-container{
        grid-template-columns:1fr;

        gap:4rem;

        padding:0 1.5rem;
    }

    .vision-split-left{
        position:relative;

        top:auto;
    }

    .vision-split-title{
        max-width:100%;
    }

}

@media(max-width:768px){

    .vision-split{
        padding:5rem 0;
    }

    .vision-split-container{
        padding:0 1rem;

        gap:3rem;
    }

    .vision-split-title{
        font-size:clamp(2.5rem,10vw,4rem);
    }

    .vision-item{
        gap:1rem;

        padding-bottom:2rem;
    }

    .vision-item-icon{
        width:52px;
        height:52px;

        border-radius:16px;

        font-size:1rem;
    }

    .vision-item-content h3{
        font-size:1.4rem;
    }

    .vision-item-content p{
        font-size:.95rem;

        line-height:1.8;
    }

}
/* ==========================================
   FOOTER
========================================== */
.footer-clean{
    position:relative;

    background:#0f172a;

    color:#fff;

    overflow:hidden;

    padding-top:6rem;
}

/* ==========================================
   CONTAINER
========================================== */
.footer-clean-container{
    width:100%;
    max-width:1380px;

    margin:0 auto;

    padding:0 2rem 4rem;

    display:grid;

    grid-template-columns:
    1.2fr .8fr 1fr;

    gap:4rem;
}

/* ==========================================
   ABOUT
========================================== */
.footer-about{
    max-width:420px;
}

/* LOGO */
.footer-logo{
    width:170px;

    margin-bottom:1.5rem;

   
}

/* TEXT */
.footer-about p{
    color:rgba(255,255,255,.68);

    font-size:1rem;

    line-height:1.9;

    letter-spacing:-0.01em;
}

/* ==========================================
   TITLES
========================================== */
.footer-links h3,
.footer-contact h3{
    font-size:1.1rem;

    font-weight:600;

    letter-spacing:-0.03em;

    margin-bottom:1.6rem;

    color:#fff;
}

/* ==========================================
   LINKS
========================================== */
.footer-links ul{
    list-style:none;

    padding:0;
    margin:0;
}

.footer-links ul li{
    margin-bottom:1rem;
}

.footer-links ul li a{
    text-decoration:none;

    color:rgba(255,255,255,.68);

    font-size:.96rem;

    transition:all .3s ease;
}

.footer-links ul li a:hover{
    color:var(--accent-yellow);

    padding-left:4px;
}

/* ==========================================
   CONTACT
========================================== */
.footer-contact{
    display:flex;
    flex-direction:column;

    gap:1rem;
}

/* ADDRESS */
.footer-contact p{
    color:rgba(255,255,255,.68);

    font-size:.96rem;

    line-height:1.9;
}

/* CONTACT LINKS */
.footer-contact a{
    text-decoration:none;

    color:#fff;

    font-size:.96rem;

    width:fit-content;

    transition:all .3s ease;
}

.footer-contact a:hover{
    color:var(--accent-yellow);
}

/* ==========================================
   BOTTOM
========================================== */
.footer-bottom{
    border-top:
    1px solid rgba(255,255,255,.08);

    padding:1.6rem 2rem;

    text-align:center;

    color:rgba(255,255,255,.52);

    font-size:.9rem;

    letter-spacing:.02em;
}

/* ==========================================
   RESPONSIVE
========================================== */
@media(max-width:1100px){

    .footer-clean-container{
        grid-template-columns:1fr 1fr;

        gap:3rem;
    }

    .footer-about{
        grid-column:1/-1;

        max-width:100%;
    }

}

@media(max-width:768px){

    .footer-clean{
        padding-top:5rem;
    }

    .footer-clean-container{
        grid-template-columns:1fr;

        gap:2.5rem;

        padding:0 1rem 3rem;
    }

    .footer-logo{
        width:150px;
    }

    .footer-about p,
    .footer-contact p,
    .footer-contact a,
    .footer-links ul li a{
        font-size:.93rem;
    }

    .footer-bottom{
        padding:1.4rem 1rem;

        font-size:.82rem;

        line-height:1.7;
    }

}