:root{
    --blue:#005b91;
    --blue-dark:#003d68;
    --blue-deep:#002e51;
    --sky:#eaf7fb;
    --orange:#f58220;
    --orange-dark:#e96d0b;
    --pink:#d83b79;
    --green:#42a64b;
    --teal:#159b9b;
    --purple:#7745a8;
    --yellow:#f5bd45;
    --text:#16344d;
    --muted:#607789;
    --white:#fff;
    --cream:#fffaf2;
    --border:#dbe7ed;
    --shadow:0 12px 35px rgba(0,58,91,.10);
    --radius:18px;
    --container:1180px;

    --we-navy:#102f45;
    --we-blue:#1f506c;
    --we-orange:#d8893b;
    --we-gold:#e8b76b;
    --we-cream:#f8f4ed;
    --we-soft:#f2f6f4;
    --we-text:#263746;
    --we-muted:#6d7a83;
    --we-white:#ffffff;
    --we-border:rgba(16,47,69,.10);
    --we-shadow:0 22px 55px rgba(16,47,69,.10);

    /* Sticky layout heights */
    --topbar-height:42px;
    --header-height:82px;
}


/* =========================================================
   RESET / GLOBAL
   ========================================================= */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:"DM Sans",Arial,sans-serif;
    color:var(--text);
    background:#fff;
    line-height:1.6;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

button,
input{
    font-family:inherit;
}

.container{
    width:min(var(--container),calc(100% - 36px));
    margin:auto;
}


/* =========================================================
   TOPBAR
   IMPORTANT:
   Topbar remains sticky at top and is never hidden.
   ========================================================= */

.topbar{
    position:sticky !important;
    top:0 !important;
    left:0;
    z-index:1100 !important;

    display:block !important;
    width:100%;

    height:var(--topbar-height) !important;
    min-height:var(--topbar-height) !important;
    max-height:var(--topbar-height) !important;

    overflow:visible !important;

    background:var(--blue-deep);
    color:#d9edf8;

    font-size:12px;

    padding:8px 0 !important;

    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;

    transition:none !important;
}


/*
   JavaScript may add .topbar-hidden.
   We deliberately prevent it from hiding the topbar.
*/

.topbar.topbar-hidden{
    position:sticky !important;
    top:0 !important;

    display:block !important;

    height:var(--topbar-height) !important;
    min-height:var(--topbar-height) !important;
    max-height:var(--topbar-height) !important;

    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;

    padding-top:8px !important;
    padding-bottom:8px !important;

    overflow:visible !important;
}


/* =========================================================
   TOPBAR INNER
   ========================================================= */

.topbar .container,
.topbar-inner{
    height:100%;

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

    gap:20px;
}

.topbar-message,
.topbar-right,
.topbar-email,
.topbar-contact,
.topbar-donate{
    display:flex;
    align-items:center;
}

.topbar-message{
    gap:7px;
    white-space:nowrap;
}

.topbar-message i,
.topbar-email i,
.topbar-donate i{
    margin:0;
}

.topbar-right{
    justify-content:flex-end;
    gap:12px;
}

.topbar-email{
    gap:6px;
    color:#d9edf8;
    white-space:nowrap;
}

.topbar-contact,
.topbar-donate{
    min-height:30px;
    padding:5px 12px;

    border-radius:999px;

    font-size:11px;
    font-weight:700;

    white-space:nowrap;

    transition:.25s ease;
}

.topbar-contact{
    color:#fff;
    border:1px solid rgba(255,255,255,.42);
    background:rgba(255,255,255,.06);
}

.topbar-contact:hover{
    background:#fff;
    color:var(--blue-deep);
}

.topbar-donate{
    gap:6px;
    color:#fff;

    background:var(--orange);

    box-shadow:
        0 4px 12px rgba(245,130,32,.22);
}

.topbar-donate:hover{
    background:var(--orange-dark);
    transform:translateY(-1px);
}

.topbar-donate i{
    font-size:10px;
}


/* =========================================================
   MAIN HEADER
   IMPORTANT:
   Header is sticky BELOW the topbar.
   ========================================================= */

header,
.site-header,
.main-header{
    position:sticky !important;

    top:var(--topbar-height) !important;

    z-index:1000 !important;

    width:100%;

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

    box-shadow:
        0 4px 20px rgba(0,45,75,.08);
}

header .nav,
.site-header .nav,
.main-header .nav{
    position:relative;
    z-index:1;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.nav{
    min-height:var(--header-height);

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

    gap:14px;
}

.logo{
    display:flex;
    align-items:center;

    min-width:185px;

    flex-shrink:0;
}

.logo img{
    width:auto;
    height:58px;
    max-width:210px;

    object-fit:contain;

    transition:transform .3s ease;
}

.logo:hover img{
    transform:scale(1.03);
}


/* =========================================================
   DESKTOP NAV
   ========================================================= */

.nav-links{
    flex:1;
    min-width:0;

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

    gap:13px;

    height:var(--header-height);

    font-size:12px;
    font-weight:600;

    color:#3c5667;
}

.nav-links > a,
.nav-item{
    height:var(--header-height);

    display:flex;
    align-items:center;

    flex-shrink:0;
}

.nav-links > a,
.nav-item > .nav-link{
    transition:color .25s ease;
}

.nav-links > a:hover,
.nav-item:hover > .nav-link{
    color:var(--orange);
}

.nav-item{
    position:relative;
}

.nav-link{
    height:100%;

    display:flex;
    align-items:center;

    gap:5px;

    white-space:nowrap;

    cursor:pointer;

    font-size:inherit;
}

.nav-link i{
    font-size:8px;
    transition:transform .25s ease;
}


/* =========================================================
   PRODUCTS / MORE SPACING
   ========================================================= */

@media(min-width:901px){

    .nav-links > a[href="products.html"]{
        margin-right:5px;
    }

    .other-nav{
        margin-left:5px;
    }
}


/* =========================================================
   DROPDOWN
   ========================================================= */

.dropdown{
    position:absolute;

    top:100%;
    left:50%;

    transform:
        translateX(-50%)
        translateY(8px);

    width:245px;

    background:#fff;

    border:1px solid #e1ebef;

    border-radius:14px;

    box-shadow:
        0 15px 35px rgba(0,50,80,.14);

    padding:8px;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .2s ease;
}

.nav-item:hover .dropdown,
.nav-item.dropdown-open .dropdown,
.our-work-nav.dropdown-open .dropdown{
    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transform:
        translateX(-50%)
        translateY(0);
}

.dropdown a{
    display:flex;
    align-items:center;

    gap:10px;

    padding:10px 12px;

    border-radius:9px;

    color:#496373;

    font-size:12px;
    font-weight:600;

    white-space:nowrap;

    transition:
        background-color .25s ease,
        color .25s ease,
        transform .25s ease;
}

.dropdown a i{
    width:20px;

    color:var(--blue);

    text-align:center;
}

.dropdown a:hover{
    background:#eef8fb;
    color:var(--blue);

    transform:translateX(3px);
}

.dropdown:before{
    content:"";

    position:absolute;

    top:-7px;
    left:50%;

    width:13px;
    height:13px;

    background:#fff;

    border-left:1px solid #e1ebef;
    border-top:1px solid #e1ebef;

    transform:
        translateX(-50%)
        rotate(45deg);
}


/* =========================================================
   OUR WORK
   ========================================================= */

.our-work-nav{
    position:relative;

    display:flex;
    align-items:center;
}

.our-work-nav .nav-link{
    height:var(--header-height);
    padding-right:2px;
}

.nav-dropdown-toggle{
    width:17px;
    height:var(--header-height);

    border:0;

    background:transparent;

    color:#3c5667;

    padding:0;
    margin:0;

    cursor:pointer;

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

.nav-dropdown-toggle i{
    font-size:8px;

    transition:transform .25s ease;
}

.our-work-nav:hover .nav-dropdown-toggle i,
.our-work-nav.dropdown-open .nav-dropdown-toggle i,
.nav-item.dropdown-open .nav-dropdown-toggle i{
    transform:rotate(180deg);
}

.our-work-nav:after{
    content:"";

    position:absolute;

    left:-8px;
    right:-8px;

    top:100%;

    height:2px;
}

.nav-item::after{
    content:"";

    position:absolute;

    left:0;
    right:0;

    top:100%;

    height:2px;
}

.our-work-nav .dropdown{
    top:100%;
}


/* =========================================================
   NAV ACTIONS
   ========================================================= */

.nav-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;

    gap:0;

    flex-shrink:0;

    min-width:165px;

    white-space:nowrap;
}

.search{
    font-size:16px;

    color:var(--blue);

    padding:5px;

    transition:
        color .25s ease,
        transform .25s ease;
}

.search:hover{
    color:var(--orange);
    transform:scale(1.08);
}


/* =========================================================
   NAV SEARCH
   ========================================================= */

.nav-search{
    width:165px;
    height:38px;

    display:flex;
    align-items:center;

    gap:7px;

    padding:0 6px 0 11px;

    border:1px solid #d7e4ea;

    border-radius:999px;

    background:#fff;

    box-shadow:
        0 5px 15px rgba(0,45,75,.06);

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

.nav-search:focus-within{
    border-color:#8fc1d4;

    box-shadow:
        0 7px 18px rgba(0,91,145,.10);
}

.nav-search > i{
    flex:0 0 auto;

    color:var(--blue);

    font-size:12px;
}

.nav-search input{
    min-width:0;
    width:100%;

    border:0;
    outline:0;

    background:transparent;

    color:var(--text);

    font-size:12px;
}

.nav-search input::placeholder{
    color:#8296a1;
}

.nav-search button{
    width:28px;
    height:28px;

    flex:0 0 28px;

    display:grid;
    place-items:center;

    border:0;

    border-radius:50%;

    background:var(--blue);
    color:#fff;

    cursor:pointer;

    transition:.25s ease;
}

.nav-search button:hover{
    background:var(--orange);
    transform:scale(1.05);
}

.nav-search button i{
    font-size:10px;
}


/* =========================================================
   BUTTONS
   ========================================================= */

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

    gap:8px;

    border:0;
    border-radius:999px;

    padding:12px 18px;

    font-weight:700;
    font-size:12px;

    cursor:pointer;

    white-space:nowrap;

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

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

.btn i{
    font-size:11px;

    transition:transform .3s ease;
}

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

.btn-orange{
    background:var(--orange);
    color:#fff;

    box-shadow:
        0 7px 18px rgba(245,130,32,.25);
}

.btn-orange:hover{
    background:var(--orange-dark);

    box-shadow:
        0 12px 28px rgba(245,130,32,.28);
}

.btn-blue{
    background:var(--blue);
    color:#fff;
}

.btn-blue:hover{
    background:var(--blue-dark);
}

.btn-outline{
    border:1px solid #acd0df;

    color:var(--blue);

    background:#fff;
}

.btn-outline:hover{
    border-color:var(--blue);
    background:#f5fbfd;
}

.btn-white{
    background:#fff;
    color:var(--blue);
}

.btn-white:hover{
    background:#f4fafc;
}


/* =========================================================
   MOBILE MENU
   ========================================================= */

.mobile-menu{
    display:none;

    font-size:23px;

    color:var(--blue);

    cursor:pointer;

    transition:
        color .25s ease,
        transform .25s ease;
}

.mobile-menu:hover{
    color:var(--orange);
}

.mobile-panel{
    display:none;
}

.mobile-about-row,
.mobile-work-row,
.mobile-dropdown-title{
    display:flex;
    align-items:center;
    justify-content:space-between;

    width:100%;

    border-bottom:1px solid #edf1f3;
}

.mobile-about-row > a,
.mobile-work-row > a{
    flex:1;

    display:flex;
    align-items:center;

    min-height:42px;

    padding:12px 5px;

    font-size:13px;
    font-weight:700;

    color:#3c5667;
}

.mobile-about-toggle,
.mobile-work-toggle{
    width:42px;
    height:42px;

    flex:0 0 42px;

    border:0;

    background:transparent;

    color:#3c5667;

    cursor:pointer;

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

.mobile-about-toggle i,
.mobile-work-toggle i,
.mobile-dropdown-title i{
    font-size:10px;

    transition:transform .2s ease;
}

.mobile-about-toggle.open i,
.mobile-work-toggle.open i,
.mobile-dropdown-title.open i{
    transform:rotate(180deg);
}

.mobile-dropdown-title{
    min-height:42px;

    padding:0 5px;

    font-size:13px;
    font-weight:700;

    color:#3c5667;

    cursor:pointer;
}

.mobile-dropdown-title span{
    display:flex;
    align-items:center;
}

.mobile-dropdown-title:hover,
.mobile-about-row:hover > a,
.mobile-work-row:hover > a{
    color:var(--orange);
}

.mobile-dropdown{
    display:none;

    background:#f6fbfd;

    border-radius:10px;

    margin:4px 0 7px;

    padding:5px;
}

.mobile-dropdown.active{
    display:block !important;
}

.mobile-dropdown a{
    display:block;

    padding:9px 12px;

    font-size:12px;

    color:#4b6675;

    transition:
        background-color .2s ease,
        color .2s ease;
}

.mobile-dropdown a:hover{
    background:#eaf7fb;
    color:var(--blue);
}


/* =========================================================
   GENERAL SECTIONS
   ========================================================= */

.section{
    padding:82px 0;
}

.section-head{
    text-align:center;

    max-width:720px;

    margin:0 auto 42px;
}

.section-head .eyebrow{
    margin-bottom:7px;
}

.eyebrow{
    color:var(--orange);

    font-weight:800;

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:.5px;

    margin-bottom:12px;
}

.section-head h2,
.split h2{
    font-family:"Playfair Display",serif;

    color:var(--blue-dark);

    font-size:clamp(30px,4vw,44px);

    line-height:1.15;
}

.section-head p{
    color:var(--muted);
    margin-top:10px;
}


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

.hero{
    min-height:570px;

    position:relative;

    overflow:hidden;

    display:flex;
    align-items:center;

    background:#fff;
}

.hero-bg{
    position:absolute;
    inset:0;

    z-index:0;

    background:
        url("https://images.unsplash.com/photo-1542810634-71277d95dcbb?auto=format&fit=crop&w=1800&q=85")
        center/cover
        no-repeat;

    transition:opacity .45s ease;
}

.hero:before{
    content:"";

    position:absolute;
    inset:0;

    z-index:1;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.94) 38%,
            rgba(255,255,255,.15) 69%,
            rgba(255,255,255,0) 100%
        );

    pointer-events:none;
}

.hero:after{
    content:"";

    position:absolute;

    inset:auto 0 0 0;

    height:100px;

    background:
        linear-gradient(
            transparent,
            #fff
        );

    z-index:4;

    pointer-events:none;
}

.hero-content{
    position:relative;

    z-index:3;

    width:min(900px,100%);

    padding:75px 0 105px;
}

.hero h1{
    font-family:"Playfair Display",serif;

    font-size:clamp(42px,5vw,65px);

    line-height:1.04;

    color:var(--blue-dark);

    margin-bottom:17px;
}

.hero h1 span{
    color:var(--orange);
}

.hero p{
    font-size:17px;

    color:#4c6675;

    max-width:720px;
}

.hero-tags{
    display:flex;
    flex-wrap:wrap;

    gap:8px;

    margin:18px 0 24px;
}

.hero-tags span{
    color:var(--blue);

    font-weight:700;

    font-size:13px;

    background:#eef8fb;

    border-radius:20px;

    padding:6px 10px;
}

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

    flex-wrap:nowrap;

    gap:8px;

    margin-top:22px;

    white-space:nowrap;

    width:max-content;

    max-width:100%;
}

.hero-actions .btn{
    flex:0 0 auto;

    white-space:nowrap;

    padding:11px 15px;

    font-size:12px;
}


/* =========================================================
   HERO SLIDER
   ========================================================= */

.hero-slider-arrows{
    position:absolute;

    inset:50% 0 auto 0;

    transform:translateY(-50%);

    z-index:7;

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

    padding:0 22px;

    pointer-events:none;
}

.hero-arrow{
    width:40px;
    height:40px;

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

    background:rgba(0,61,104,.76);

    color:#fff;

    border-radius:50%;

    display:grid;
    place-items:center;

    cursor:pointer;

    transition:.25s ease;

    pointer-events:auto;

    box-shadow:
        0 6px 18px rgba(0,40,70,.18);
}

.hero-arrow:hover{
    background:var(--orange);

    border-color:var(--orange);

    transform:scale(1.06);
}

.hero-dots{
    position:absolute;

    left:50%;
    bottom:30px;

    transform:translateX(-50%);

    z-index:7;

    display:flex;
    align-items:center;

    gap:7px;
}

.hero-dot{
    width:8px;
    height:8px;

    border-radius:50%;

    background:rgba(0,61,104,.38);

    border:0;

    padding:0;

    cursor:pointer;

    transition:.25s ease;
}

.hero-dot.active{
    width:22px;

    border-radius:10px;

    background:var(--orange);
}


/* =========================================================
   IMPACT
   ========================================================= */

.impact{
    position:relative;

    z-index:5;

    margin-top:-52px;
}

.impact-card{
    background:#fff;

    border-radius:18px;

    box-shadow:
        0 15px 45px rgba(0,58,91,.13);

    display:grid;

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

    overflow:hidden;

    border:1px solid #edf2f4;
}

.impact-item{
    padding:22px 12px;

    text-align:center;

    border-right:1px solid #e3e9ec;

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

.impact-item:last-child{
    border:0;
}

.impact-item:hover{
    transform:translateY(-5px);

    box-shadow:
        0 12px 28px rgba(0,58,91,.10);
}

.impact-icon{
    width:43px;
    height:43px;

    border-radius:50%;

    margin:0 auto 8px;

    display:grid;
    place-items:center;

    color:#fff;

    font-size:18px;

    transition:transform .3s ease;
}

.impact-item:hover .impact-icon{
    transform:scale(1.08);
}

.impact-item:nth-child(1) .impact-icon{
    background:var(--orange);
}

.impact-item:nth-child(2) .impact-icon{
    background:var(--blue);
}

.impact-item:nth-child(3) .impact-icon{
    background:var(--green);
}

.impact-item:nth-child(4) .impact-icon{
    background:var(--purple);
}

.impact-item:nth-child(5) .impact-icon{
    background:#2575b9;
}

.impact-item:nth-child(6) .impact-icon{
    background:var(--pink);
}

.impact-item strong{
    display:block;

    font-size:25px;

    color:var(--blue-dark);

    line-height:1.1;
}

.impact-item small{
    display:block;

    color:#6c7f89;

    font-size:11px;

    line-height:1.3;

    margin-top:5px;
}


/* =========================================================
   ABOUT HERO
   ========================================================= */

.about-hero{
    position:relative;

    min-height:560px;

    display:flex;
    align-items:center;

    overflow:hidden;

    background:
        linear-gradient(
            90deg,
            rgba(7,43,68,.96) 0%,
            rgba(7,43,68,.82) 48%,
            rgba(7,43,68,.25) 100%
        ),
        url("https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?auto=format&fit=crop&w=1800&q=85")
        center/cover
        no-repeat;
}

.about-hero-content{
    max-width:760px;

    color:#fff;

    padding:90px 0;
}

.about-hero-content .eyebrow{
    color:#f5a623;

    margin-bottom:18px;
}

.about-hero h1{
    font-family:"Playfair Display",serif;

    font-size:clamp(42px,5vw,68px);

    line-height:1.08;

    margin:0 0 24px;
}

.about-hero h1 span{
    color:#f5a623;
}

.about-hero p{
    max-width:680px;

    font-size:18px;

    line-height:1.8;

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

    margin-bottom:30px;
}

.about-hero-actions{
    display:flex;

    flex-wrap:wrap;

    gap:12px;
}


/* =========================================================
   ABOUT INTRO
   ========================================================= */

.about-intro-grid{
    display:grid;

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

    gap:60px;

    align-items:center;
}

.about-copy{
    transition:
        transform .4s ease,
        opacity .7s ease;
}

.about-copy h2{
    font-family:"Playfair Display",serif;

    color:var(--blue-dark);

    font-size:clamp(32px,4vw,45px);

    line-height:1.15;

    margin-bottom:18px;
}

.about-copy p{
    color:#68777e;

    line-height:1.85;

    margin-bottom:15px;
}

.about-image{
    position:relative;

    min-height:480px;

    border-radius:24px;

    overflow:hidden;

    box-shadow:
        0 15px 40px rgba(0,58,91,.10);

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

.about-image:hover{
    transform:translateY(-6px);

    box-shadow:
        0 22px 50px rgba(0,58,91,.16);
}

.about-image img{
    width:100%;

    height:100%;

    min-height:480px;

    object-fit:cover;

    transform:scale(1);

    transition:transform .6s ease;
}

.about-image:hover img{
    transform:scale(1.045);
}

.about-image-note{
    position:absolute;

    left:22px;
    bottom:22px;

    background:#fff;

    padding:18px 22px;

    border-radius:14px;

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

    font-weight:700;

    color:var(--blue-dark);

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

.about-image:hover .about-image-note{
    transform:translateY(-5px);

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


/* =========================================================
   PURPOSE / VISION / MISSION
   ========================================================= */

.purpose-intro{
    max-width:850px;

    margin:0 auto 45px;

    text-align:center;
}

.purpose-intro p{
    color:#68777e;

    line-height:1.8;

    font-size:17px;
}

.vision-section{
    position:relative;

    background:#f5f8f7;

    border-radius:28px;

    padding:55px 60px;

    overflow:hidden;

    margin-bottom:30px;

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

.vision-section:hover{
    transform:translateY(-6px);

    box-shadow:
        0 18px 45px rgba(7,43,68,.10);
}

.vision-section:after{
    content:"";

    position:absolute;

    width:260px;
    height:260px;

    border-radius:50%;

    right:-90px;
    top:-100px;

    background:rgba(233,154,23,.08);

    transition:transform .6s ease;
}

.vision-section:hover:after{
    transform:scale(1.12);
}

.vision-section .vision-label{
    position:relative;

    z-index:1;

    color:#e99a17;

    font-size:13px;

    font-weight:800;

    letter-spacing:.12em;

    text-transform:uppercase;

    margin-bottom:15px;
}

.vision-section h3{
    position:relative;

    z-index:1;

    font-family:"Playfair Display",serif;

    font-size:36px;

    color:var(--blue-dark);

    margin:0 0 18px;
}

.vision-section p{
    position:relative;

    z-index:1;

    max-width:950px;

    margin:0;

    color:#5f7077;

    font-size:21px;

    line-height:1.7;
}

.mission-section{
    background:#fff;

    border:1px solid #e7eceb;

    border-radius:28px;

    padding:55px 60px;

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

.mission-section:hover{
    transform:translateY(-6px);

    box-shadow:
        0 18px 45px rgba(7,43,68,.08);

    border-color:
        rgba(233,154,23,.25);
}

.mission-heading{
    margin-bottom:28px;
}

.mission-heading .mission-label{
    color:#e99a17;

    font-size:13px;

    font-weight:800;

    letter-spacing:.12em;

    text-transform:uppercase;

    margin-bottom:12px;
}

.mission-heading h3{
    font-family:"Playfair Display",serif;

    font-size:36px;

    color:var(--blue-dark);

    margin:0 0 16px;
}

.mission-heading p{
    max-width:900px;

    color:#5f7077;

    font-size:18px;

    line-height:1.8;

    margin:0;
}

.mission-work-title{
    color:var(--blue-dark);

    font-weight:700;

    margin:32px 0 18px;
}

.mission-list{
    margin:0;
    padding:0;

    list-style:none;

    display:grid;

    grid-template-columns:1fr 1fr;

    column-gap:45px;

    row-gap:15px;
}

.mission-list li{
    display:flex;

    gap:12px;

    color:#5e6d73;

    line-height:1.55;

    transition:
        transform .25s ease,
        color .25s ease;
}

.mission-list li:hover{
    transform:translateX(5px);

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

.mission-list i{
    flex:0 0 auto;

    font-size:14px;

    margin-top:5px;

    color:#e99a17;

    transition:transform .25s ease;
}

.mission-list li:hover i{
    transform:scale(1.2);
}


/* =========================================================
   APPROACH
   ========================================================= */

.approach-box{
    background:
        linear-gradient(
            135deg,
            var(--blue-dark),
            #0c536c
        );

    border-radius:26px;

    padding:55px;

    color:#fff;

    position:relative;

    overflow:hidden;

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

.approach-box:hover{
    transform:translateY(-5px);

    box-shadow:
        0 20px 50px rgba(0,58,91,.18);
}

.approach-box:after{
    content:"";

    position:absolute;

    width:280px;
    height:280px;

    border-radius:50%;

    right:-90px;
    top:-110px;

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

    transition:transform .6s ease;
}

.approach-box:hover:after{
    transform:scale(1.12);
}

.approach-box h2{
    font-family:"Playfair Display",serif;

    font-size:40px;

    margin:10px 0 18px;
}

.approach-box p{
    max-width:850px;

    line-height:1.8;

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

    position:relative;

    z-index:1;
}

.approach-formula{
    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:30px;

    position:relative;

    z-index:2;
}

.approach-formula span{
    background:rgba(255,255,255,.1);

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

    padding:13px 18px;

    border-radius:50px;

    font-weight:700;

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

.approach-formula span:hover{
    transform:translateY(-4px);

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

    border-color:rgba(255,255,255,.32);

    box-shadow:
        0 8px 20px rgba(0,0,0,.10);
}


/* =========================================================
   SUPPORT GRID / WORK CARDS
   ========================================================= */

.support-grid{
    display:grid;

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

    gap:18px;
}

.work-card{
    position:relative;

    padding:32px;

    border-radius:20px;

    background:#fff;

    border:1px solid #e7eceb;

    overflow:hidden;

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

.work-card:before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:4px;
    height:0;

    background:#e99a17;

    transition:height .35s ease;
}

.work-card:hover{
    transform:translateY(-8px);

    box-shadow:
        0 18px 45px rgba(0,0,0,.09);

    border-color:
        rgba(233,154,23,.25);
}

.work-card:hover:before{
    height:100%;
}

.work-number{
    font-size:13px;

    font-weight:800;

    color:#e99a17;

    letter-spacing:.08em;

    transition:letter-spacing .3s ease;
}

.work-card:hover .work-number{
    letter-spacing:.14em;
}

.work-card i{
    display:block;

    font-size:30px;

    color:var(--blue-dark);

    margin:18px 0;

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

.work-card:hover i{
    transform:
        translateY(-4px)
        scale(1.08);

    color:#e99a17;
}

.work-card h3{
    color:var(--blue-dark);

    margin-bottom:12px;

    transition:color .3s ease;
}

.work-card:hover h3{
    color:#e99a17;
}

.work-card p{
    color:#6d7a80;

    line-height:1.7;
}


/* =========================================================
   JOURNEY
   ========================================================= */

.journey{
    background:#edf9fc;

    position:relative;

    overflow:hidden;
}

.journey:before{
    content:"";

    position:absolute;

    inset:20% -10% -30%;

    background:
        radial-gradient(
            circle,
            #d5f2f7,
            transparent 58%
        );
}

.journey .container{
    position:relative;
}

.change-flow{
    display:grid;

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

    gap:0;

    margin-top:45px;
}

.flow-item{
    text-align:center;

    position:relative;

    padding:15px 10px;

    transition:transform .35s ease;
}

.flow-item:hover{
    transform:translateY(-8px);
}

.flow-item:not(:last-child):after{
    content:"";

    position:absolute;

    top:43px;

    right:-7%;

    width:14%;

    height:2px;

    background:#e6a327;

    transition:
        background-color .35s ease,
        width .35s ease;
}

.flow-item:hover:not(:last-child):after{
    background:#f5a623;
}

.flow-icon{
    width:76px;
    height:76px;

    border-radius:50%;

    margin:0 auto 18px;

    display:grid;
    place-items:center;

    background:#f3f7f6;

    color:var(--blue-dark);

    font-size:25px;

    border:2px solid #e8eceb;

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

.flow-item:hover .flow-icon{
    transform:scale(1.08);

    background:#fff7e9;

    color:#e99a17;

    border-color:#e99a17;

    box-shadow:
        0 12px 28px rgba(233,154,23,.18);
}

.flow-item h4{
    color:var(--blue-dark);

    margin-bottom:7px;

    font-size:15px;

    letter-spacing:.05em;

    transition:color .3s ease;
}

.flow-item:hover h4{
    color:#e99a17;
}

.flow-item span{
    color:#7a878b;

    font-size:13px;

    line-height:1.5;

    display:block;
}


/* =========================================================
   HELP
   ========================================================= */

.help-grid{
    display:grid;

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

    gap:15px;
}

.help-card{
    padding:26px 20px;

    border-radius:18px;

    background:#f5f8f7;

    text-align:center;

    color:var(--blue-dark);

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

.help-card:hover{
    transform:translateY(-8px);

    background:#fff;

    box-shadow:
        0 16px 35px rgba(7,43,68,.10);
}

.help-card i{
    display:block;

    font-size:25px;

    margin-bottom:13px;

    color:#e99a17;

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

.help-card:hover i{
    transform:scale(1.12);

    color:#e99a17;
}

.help-card strong{
    font-size:14px;
}


/* =========================================================
   WHY
   ========================================================= */

.why{
    background:
        linear-gradient(
            180deg,
            #fff,
            #f7fbfc
        );
}

.why-grid{
    display:grid;

    grid-template-columns:1fr 2.6fr;

    gap:28px;

    align-items:stretch;
}

.why-intro{
    background:
        linear-gradient(
            150deg,
            #e8f7fb,
            #fff
        );

    border-radius:20px;

    padding:32px;

    border:1px solid #d8edf4;

    transition:.28s ease;
}

.why-intro:hover{
    transform:translateY(-7px);

    box-shadow:
        0 15px 32px rgba(0,58,91,.12);
}

.why-intro h3{
    font-family:"Playfair Display",serif;

    color:var(--blue-dark);

    font-size:31px;

    line-height:1.1;

    margin-bottom:12px;
}

.why-intro p{
    font-size:14px;

    color:var(--muted);

    margin-bottom:20px;
}

.features{
    display:grid;

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

    gap:14px;
}

.feature{
    background:#fff;

    border:1px solid #e2eaee;

    border-radius:15px;

    padding:21px;

    box-shadow:
        0 5px 20px rgba(0,70,100,.04);

    transition:.28s ease;
}

.feature:hover{
    transform:translateY(-7px);

    box-shadow:
        0 15px 32px rgba(0,58,91,.12);
}

.feature i{
    width:42px;
    height:42px;

    border-radius:50%;

    display:grid;
    place-items:center;

    color:#fff;

    background:var(--blue);

    margin-bottom:12px;
}

.feature:nth-child(2) i{
    background:var(--orange);
}

.feature:nth-child(3) i{
    background:var(--pink);
}

.feature:nth-child(4) i{
    background:var(--purple);
}

.feature:nth-child(5) i{
    background:var(--teal);
}

.feature:nth-child(6) i{
    background:var(--green);
}

.feature h4{
    font-size:15px;

    margin-bottom:5px;

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

.feature p{
    font-size:12px;

    color:#71838e;

    line-height:1.45;
}


/* =========================================================
   JOURNEY LINE
   ========================================================= */

.journey-line{
    display:grid;

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

    gap:10px;

    position:relative;
}

.journey-line:before{
    content:"";

    position:absolute;

    left:7%;
    right:7%;

    top:42px;

    border-top:2px dashed #9fc9d6;

    z-index:0;
}

.journey-step{
    text-align:center;

    position:relative;

    z-index:1;

    transition:transform .28s ease;
}

.journey-step:hover{
    transform:translateY(-5px);
}

.journey-circle{
    width:84px;
    height:84px;

    margin:auto;

    border-radius:50%;

    display:grid;
    place-items:center;

    color:#fff;

    font-size:27px;

    box-shadow:
        0 10px 22px rgba(0,65,100,.12);

    border:6px solid #fff;

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

.journey-step:hover .journey-circle{
    transform:scale(1.06);

    box-shadow:
        0 14px 28px rgba(0,65,100,.18);
}

.journey-step:nth-child(1) .journey-circle{
    background:#147cc0;
}

.journey-step:nth-child(2) .journey-circle{
    background:var(--orange);
}

.journey-step:nth-child(3) .journey-circle{
    background:var(--green);
}

.journey-step:nth-child(4) .journey-circle{
    background:var(--pink);
}

.journey-step:nth-child(5) .journey-circle{
    background:var(--teal);
}

.journey-step:nth-child(6) .journey-circle{
    background:var(--purple);
}

.journey-step h4{
    margin-top:10px;

    color:var(--blue-dark);

    font-size:14px;

    letter-spacing:.5px;
}

.journey-step span{
    font-size:11px;

    color:#6f808a;
}


/* =========================================================
   SPLIT
   ========================================================= */

.split{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:45px;

    align-items:center;
}

.split-copy p{
    color:var(--muted);

    margin:13px 0 18px;
}

.check-list{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px 20px;

    margin-bottom:23px;
}

.check-list li{
    list-style:none;

    font-size:13px;

    color:#486170;
}

.check-list li:before{
    content:"✓";

    display:inline-grid;

    place-items:center;

    width:19px;
    height:19px;

    background:#fce4ee;

    color:var(--pink);

    border-radius:50%;

    margin-right:8px;

    font-weight:800;
}


/* =========================================================
   IMAGE CARD
   ========================================================= */

.image-card{
    position:relative;

    transition:transform .28s ease;
}

.image-card:hover{
    transform:translateY(-5px);
}

.image-card img{
    height:420px;
    width:100%;

    object-fit:cover;

    border-radius:22px;

    box-shadow:var(--shadow);

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

.image-card:hover img{
    transform:scale(1.025);
}

.image-note{
    position:absolute;

    right:18px;
    bottom:18px;

    background:#fff;

    padding:15px 18px;

    border-radius:14px;

    box-shadow:var(--shadow);

    color:var(--pink);

    font-family:"Playfair Display",serif;

    font-size:18px;

    transform:rotate(-2deg);
}


/* =========================================================
   WOMEN / EDUCATION / SKILL
   ========================================================= */

.women{
    background:#fff4f7;
}

.women .image-card img{
    height:410px;
}

.education{
    background:#f5fbfd;
}

.education-grid{
    display:grid;

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

    gap:18px;
}

.education-card{
    background:#fff;

    border:1px solid #deebef;

    border-radius:18px;

    padding:25px;

    box-shadow:
        0 6px 22px rgba(0,60,90,.05);

    transition:.28s ease;
}

.education-card:hover{
    transform:translateY(-7px);

    box-shadow:
        0 15px 32px rgba(0,58,91,.12);
}

.education-card i{
    width:48px;
    height:48px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:#eaf7fb;

    color:var(--blue);

    font-size:20px;

    margin-bottom:15px;
}

.education-card h3{
    font-family:"Playfair Display",serif;

    color:var(--blue-dark);

    font-size:22px;

    margin-bottom:8px;
}

.education-card p{
    color:var(--muted);

    font-size:13px;
}

.skill{
    background:#fffaf4;
}

.skill-card{
    background:
        linear-gradient(
            110deg,
            #fff,
            #fff4e8
        );

    border:1px solid #f2dfcb;

    border-radius:22px;

    display:grid;

    grid-template-columns:280px 1fr 1fr;

    gap:25px;

    align-items:center;

    padding:25px;

    overflow:hidden;

    transition:.28s ease;
}

.skill-card:hover{
    transform:translateY(-7px);

    box-shadow:
        0 15px 32px rgba(0,58,91,.12);
}

.skill-card img{
    height:220px;
    width:100%;

    object-fit:cover;

    border-radius:15px;
}

.price{
    font-family:"Playfair Display",serif;

    font-size:44px;

    color:var(--orange);

    line-height:1;
}

.price-label{
    font-weight:800;

    font-size:15px;

    margin-top:6px;
}

.skill-list{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:9px;

    font-size:12px;

    color:#647782;
}

.skill-list span:before{
    content:"◉";

    color:var(--orange);

    margin-right:7px;
}


/* =========================================================
   PRODUCTS
   ========================================================= */

.products{
    background:#eefaff;
}

.product-layout{
    display:grid;

    grid-template-columns:1fr 1.2fr;

    gap:40px;

    align-items:center;
}

.product-image{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;
}

.product-image img{
    height:185px;

    width:100%;

    object-fit:cover;

    border-radius:15px;

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

.product-image img:first-child{
    height:382px;

    grid-row:span 2;
}

.product-image img:hover{
    transform:scale(1.025);

    box-shadow:
        0 12px 25px rgba(0,58,91,.12);
}

.product-layout p{
    color:var(--muted);

    margin:12px 0 20px;
}

.product-actions{
    display:flex;

    flex-wrap:wrap;

    gap:10px;
}


/* =========================================================
   STORIES
   ========================================================= */

.stories{
    background:#fff;
}

.story-grid{
    display:grid;

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

    gap:13px;
}

.story{
    border:1px solid #e1e8eb;

    border-radius:15px;

    overflow:hidden;

    background:#fff;

    box-shadow:
        0 5px 18px rgba(0,60,90,.05);

    transition:.28s ease;
}

.story:hover{
    transform:translateY(-7px);

    box-shadow:
        0 15px 32px rgba(0,58,91,.12);
}

.story img{
    height:140px;
    width:100%;

    object-fit:cover;

    transition:transform .4s ease;
}

.story:hover img{
    transform:scale(1.04);
}

.story-body{
    padding:13px;
}

.story h4{
    font-size:13px;

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

.story small{
    font-size:10px;

    color:var(--orange);

    font-weight:700;
}

.story p{
    font-size:10px;

    line-height:1.4;

    color:#6c7c85;

    margin-top:5px;
}


/* =========================================================
   CSR
   ========================================================= */

.csr{
    background:#eaf8fd;
}

.csr-grid{
    display:grid;

    grid-template-columns:1.05fr 1fr;

    gap:22px;
}

.csr-card{
    background:#fff;

    border-radius:20px;

    padding:28px;

    border:1px solid #d8edf4;

    transition:.28s ease;
}

.csr-card:hover{
    transform:translateY(-7px);

    box-shadow:
        0 15px 32px rgba(0,58,91,.12);
}

.csr-card h3{
    font-family:"Playfair Display",serif;

    font-size:27px;

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

.csr-card p{
    color:var(--muted);

    font-size:13px;

    margin:10px 0 19px;
}

.partner-types{
    display:grid;

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

    gap:11px;
}

.partner{
    padding:13px;

    border-radius:12px;

    background:#f6fbfd;

    font-size:12px;

    font-weight:700;

    color:#416071;

    transition:.28s ease;
}

.partner:hover{
    transform:translateY(-5px);

    box-shadow:
        0 10px 25px rgba(0,58,91,.10);
}

.partner i{
    color:var(--blue);

    margin-right:7px;
}


/* =========================================================
   COMMUNITY SUPPORT
   ========================================================= */

.community-support{
    background:#fffaf2;
}

.support-card{
    background:#fff;

    border:1px solid #eee2d1;

    border-radius:18px;

    padding:25px;

    transition:.28s ease;
}

.support-card:hover{
    transform:translateY(-7px);

    box-shadow:
        0 15px 32px rgba(0,58,91,.12);
}

.support-card i{
    width:45px;
    height:45px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:#fff0df;

    color:var(--orange);

    margin-bottom:13px;
}

.support-card h3{
    font-family:"Playfair Display",serif;

    color:var(--blue-dark);

    font-size:21px;
}

.support-card p{
    font-size:12px;

    color:var(--muted);

    margin-top:7px;
}


/* =========================================================
   CTA
   ========================================================= */

.cta{
    background:
        linear-gradient(
            90deg,
            rgba(0,38,31,.93),
            rgba(0,65,46,.58)
        ),
        url("https://images.unsplash.com/photo-1497250681960-ef046c08a56e?auto=format&fit=crop&w=1800&q=80")
        center/cover;

    color:#fff;

    padding:62px 0;
}

.cta-inner{
    display:grid;

    grid-template-columns:minmax(0,1fr) auto;

    align-items:center;

    gap:45px;
}

.cta-copy{
    min-width:0;

    max-width:720px;
}

.cta h2{
    font-family:"Playfair Display",serif;

    font-size:clamp(32px,4vw,50px);

    line-height:1.1;

    margin:0;
}

.cta p{
    margin-top:13px;

    color:#e3f1eb;

    font-size:15px;

    line-height:1.65;

    max-width:700px;
}

.cta-actions{
    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:10px;

    flex-wrap:nowrap;

    white-space:nowrap;

    flex-shrink:0;

    margin-top:28px;
}

.cta-actions .btn{
    white-space:nowrap;

    flex:0 0 auto;
}

.cta-actions .btn:hover{
    box-shadow:
        0 12px 28px rgba(0,0,0,.12);
}


/* =========================================================
   FOOTER
   ========================================================= */

footer{
    background:#002f52;

    color:#d9eaf3;
}

.footer-main{
    padding:55px 0 38px;

    display:grid;

    grid-template-columns:1.4fr 1fr 1fr 1.2fr;

    gap:45px;
}

.footer-logo{
    min-width:0;
}

.footer-logo .logo{
    min-width:0;

    width:max-content;

    display:flex;
    align-items:center;
}

.footer-logo .logo img{
    display:block;

    height:66px;

    width:auto;

    max-width:245px;

    object-fit:contain;
}

.footer-logo p{
    font-size:12px;

    color:#a9c1cf;

    margin-top:17px;

    max-width:320px;

    line-height:1.65;
}

footer h4{
    color:#fff;

    margin-bottom:13px;

    font-size:14px;
}

.footer-links{
    display:grid;

    gap:7px;

    font-size:12px;

    color:#a9c1cf;
}

.footer-links a{
    transition:
        color .25s ease,
        transform .25s ease;
}

.footer-links a:hover{
    color:#fff;

    transform:translateX(3px);
}

.socials{
    display:flex;

    gap:8px;

    margin-bottom:15px;
}

.socials a{
    width:34px;
    height:34px;

    border-radius:50%;

    display:grid;
    place-items:center;

    background:#0b4a6f;

    color:#fff;

    transition:
        background-color .25s ease,
        transform .25s ease;
}

.socials a:hover{
    background:var(--orange);

    transform:translateY(-4px);
}

.newsletter{
    display:flex;

    background:#fff;

    border-radius:30px;

    padding:4px;
}

.newsletter input{
    border:0;
    outline:0;

    min-width:0;

    flex:1;

    padding:9px 12px;

    border-radius:30px;

    font-size:11px;
}

.newsletter button{
    border:0;

    border-radius:25px;

    background:var(--orange);

    color:#fff;

    padding:0 15px;

    font-weight:700;

    cursor:pointer;

    transition:
        background-color .25s ease,
        transform .25s ease;
}

.newsletter button:hover{
    background:var(--orange-dark);

    transform:translateY(-1px);
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.12);

    padding:16px 0;

    font-size:11px;

    color:#98b4c3;
}

.footer-bottom .container{
    display:flex;

    justify-content:space-between;

    gap:15px;
}


/* =========================================================
   WHATSAPP
   ========================================================= */

.whatsapp-float{
    position:fixed;

    right:22px;
    bottom:22px;

    width:54px;
    height:54px;

    border-radius:50%;

    background:#25D366;

    color:#fff;

    display:grid;
    place-items:center;

    font-size:27px;

    z-index:9999;

    box-shadow:
        0 8px 25px rgba(0,0,0,.22);

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

.whatsapp-float:hover{
    transform:
        translateY(-5px)
        scale(1.05);

    box-shadow:
        0 12px 30px rgba(0,0,0,.28);
}


/* =========================================================
   REVEAL
   ========================================================= */

.reveal-up{
    opacity:0;

    transform:translateY(30px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}

.reveal-up.revealed{
    opacity:1;

    transform:translateY(0);
}


/* =========================================================
   PAGE HERO
   ========================================================= */

.page-hero{
    position:relative;

    padding:110px 0 100px;

    background:
        linear-gradient(
            135deg,
            rgba(17,58,91,.96),
            rgba(24,91,112,.91)
        ),
        url("https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?auto=format&fit=crop&w=1800&q=85")
        center/cover
        no-repeat;

    overflow:hidden;
}

.page-hero::after{
    content:"";

    position:absolute;

    width:420px;
    height:420px;

    right:-160px;
    top:-180px;

    border-radius:50%;

    background:rgba(255,255,255,.07);
}

.page-hero .container{
    position:relative;

    z-index:2;
}

.page-hero-content{
    max-width:850px;
}

.page-hero .eyebrow{
    color:#f6a623;
}

.page-hero h1{
    margin:18px 0 22px;

    color:#fff;

    font-family:"Playfair Display",serif;

    font-size:clamp(42px,5vw,72px);

    line-height:1.08;

    letter-spacing:-1.5px;
}

.page-hero p{
    max-width:720px;

    margin:0;

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

    font-size:18px;

    line-height:1.8;
}


/* =========================================================
   ABOUT PAGE
   ========================================================= */

.about-section{
    padding:100px 0;
}

.about-section:nth-of-type(even){
    background:#f7f9f7;
}

.section-heading{
    max-width:850px;

    margin:0 auto 65px;

    text-align:center;
}

.section-heading h2{
    margin:15px 0 20px;

    font-family:"Playfair Display",serif;

    font-size:clamp(32px,4vw,52px);

    line-height:1.15;

    color:#173b59;
}

.section-heading p{
    margin:0 auto;

    max-width:720px;

    color:#667085;

    font-size:17px;

    line-height:1.8;
}

.eyebrow{
    display:inline-flex;

    align-items:center;

    gap:8px;

    font-size:13px;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

    color:#1d7190;
}

.about-grid{
    display:grid;

    grid-template-columns:minmax(0,1fr) minmax(0,1fr);

    align-items:center;

    gap:75px;
}

.about-grid-reverse .about-image{
    order:2;
}

.about-grid-reverse .about-content{
    order:1;
}

.about-image::before{
    content:"";

    position:absolute;

    width:100%;
    height:100%;

    left:-14px;
    bottom:-14px;

    border:2px solid rgba(246,166,35,.45);

    border-radius:22px;

    z-index:0;
}

.about-image img{
    position:relative;

    z-index:1;

    display:block;

    width:100%;

    height:500px;

    object-fit:cover;

    border-radius:22px;

    box-shadow:
        0 20px 55px rgba(18,46,66,.13);
}

.about-content{
    max-width:620px;
}

.about-content h2{
    margin:14px 0 20px;

    font-family:"Playfair Display",serif;

    color:#173b59;

    font-size:clamp(32px,3.5vw,48px);

    line-height:1.16;
}

.about-content > p{
    margin:0 0 32px;

    color:#667085;

    font-size:17px;

    line-height:1.8;
}

.about-points{
    display:grid;

    gap:22px;
}

.about-point{
    display:flex;

    gap:17px;

    align-items:flex-start;
}

.about-point > i{
    flex:0 0 48px;

    width:48px;
    height:48px;

    display:flex;

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

    border-radius:14px;

    background:#e9f5f7;

    color:#1d7190;

    font-size:19px;
}

.about-point h3{
    margin:0 0 6px;

    color:#173b59;

    font-size:18px;

    font-weight:700;
}

.about-point p{
    margin:0;

    color:#667085;

    font-size:15px;

    line-height:1.7;
}


/* =========================================================
   WEB4YOU PAGE
   ========================================================= */

.we-page{
    color:var(--we-text);

    overflow:hidden;
}

.we-container{
    width:min(1180px,calc(100% - 40px));

    margin:auto;
}

.we-hero{
    position:relative;

    min-height:650px;

    display:flex;
    align-items:center;

    overflow:hidden;

    background:
        linear-gradient(
            90deg,
            rgba(8,31,45,.94) 0%,
            rgba(8,31,45,.78) 45%,
            rgba(8,31,45,.25) 100%
        ),
        url("https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=2000&q=85")
        center/cover
        no-repeat;
}

.we-hero::after{
    content:"";

    position:absolute;

    right:-140px;
    bottom:-180px;

    width:480px;
    height:480px;

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

    border-radius:50%;
}

.we-hero-content{
    position:relative;

    z-index:2;

    width:min(700px,100%);

    padding:90px 0;
}

.we-eyebrow{
    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#f3c98d;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:20px;
}

.we-eyebrow::before{
    content:"";

    width:36px;
    height:2px;

    background:var(--we-orange);
}

.we-hero h1{
    margin:0 0 22px;

    color:#fff;

    font-family:"Playfair Display",serif;

    font-size:clamp(48px,6vw,78px);

    line-height:1.04;

    letter-spacing:-1.5px;
}

.we-hero h1 span{
    color:#f0bb70;
}

.we-hero p{
    max-width:650px;

    margin:0 0 32px;

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

    font-size:18px;

    line-height:1.8;
}

.we-hero-actions{
    display:flex;

    flex-wrap:wrap;

    gap:13px;
}

.we-hero-actions .btn{
    min-height:52px;

    padding:0 23px;
}


/* =========================================================
   WEB4YOU INTRO
   ========================================================= */

.we-intro{
    padding:95px 0;

    background:#fff;
}

.we-intro-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;
}

.we-intro-image{
    position:relative;

    overflow:visible;
}

.we-intro-image img{
    width:100%;

    height:520px;

    object-fit:cover;

    display:block;

    border-radius:4px 80px 4px 4px;

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

    transition:
        transform .6s cubic-bezier(.2,.8,.2,1),
        box-shadow .6s ease;
}

.we-intro-image:hover img{
    transform:translateY(-7px);

    box-shadow:
        0 30px 70px rgba(16,47,69,.16);
}

.we-image-badge{
    position:absolute;

    right:-25px;
    bottom:35px;

    width:185px;

    padding:24px;

    background:var(--we-orange);

    color:#fff;

    box-shadow:
        0 18px 40px rgba(216,137,59,.28);

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

.we-intro-image:hover .we-image-badge{
    transform:translateY(-8px);

    box-shadow:
        0 22px 45px rgba(216,137,59,.32);
}

.we-image-badge strong{
    display:block;

    font-family:"Playfair Display",serif;

    font-size:30px;

    line-height:1;

    margin-bottom:8px;
}

.we-image-badge span{
    font-size:13px;

    line-height:1.5;
}

.we-section-label{
    color:var(--we-orange);

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:14px;
}

.we-section-title{
    margin:0 0 20px;

    color:var(--we-navy);

    font-family:"Playfair Display",serif;

    font-size:clamp(36px,4vw,53px);

    line-height:1.12;
}

.we-intro-copy p{
    color:var(--we-muted);

    font-size:16px;

    line-height:1.85;

    margin:0 0 18px;
}

.we-objective{
    margin-top:30px;

    padding:25px 27px;

    border-left:4px solid var(--we-orange);

    background:var(--we-cream);
}

.we-objective strong{
    display:block;

    color:var(--we-navy);

    font-family:"Playfair Display",serif;

    font-size:22px;

    margin-bottom:8px;
}

.we-objective p{
    margin:0;
}


/* =========================================================
   WEB4YOU FOCUS
   ========================================================= */

.we-focus{
    padding:100px 0;

    background:var(--we-soft);
}

.we-heading-center{
    max-width:730px;

    margin:0 auto 55px;

    text-align:center;
}

.we-heading-center .we-section-title{
    margin-bottom:15px;
}

.we-heading-center p{
    color:var(--we-muted);

    line-height:1.8;
}

.we-focus-grid{
    display:grid;

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

    gap:20px;
}

.we-focus-card{
    position:relative;

    min-height:225px;

    padding:32px;

    background:#fff;

    border:1px solid var(--we-border);

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        box-shadow .4s ease,
        border-color .4s ease;

    overflow:hidden;
}

.we-focus-card::after{
    content:"";

    position:absolute;

    right:-45px;
    bottom:-45px;

    width:120px;
    height:120px;

    border-radius:50%;

    background:rgba(216,137,59,.08);
}

.we-focus-card::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:0;
    height:3px;

    background:var(--we-orange);

    transition:width .4s ease;
}

.we-focus-card:hover{
    transform:translateY(-10px);

    box-shadow:
        0 24px 55px rgba(16,47,69,.14);

    border-color:
        rgba(216,137,59,.30);
}

.we-focus-card:hover::before{
    width:100%;
}

.we-focus-number{
    color:var(--we-orange);

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:22px;
}

.we-focus-icon{
    width:48px;
    height:48px;

    display:flex;

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

    margin-bottom:18px;

    border-radius:50%;

    background:rgba(16,47,69,.07);

    color:var(--we-navy);

    font-size:19px;

    transition:
        transform .4s ease,
        background .4s ease,
        color .4s ease;
}

.we-focus-card:hover .we-focus-icon{
    transform:
        translateY(-3px)
        scale(1.08);

    background:var(--we-orange);

    color:#fff;
}

.we-focus-card h3{
    margin:0 0 10px;

    color:var(--we-navy);

    font-family:"Playfair Display",serif;

    font-size:23px;
}

.we-focus-card p{
    margin:0;

    color:var(--we-muted);

    font-size:14px;

    line-height:1.7;
}


/* =========================================================
   WEB4YOU JOURNEY
   ========================================================= */

.we-journey{
    padding:105px 0;

    background:var(--we-navy);

    color:#fff;

    position:relative;

    overflow:hidden;
}

.we-journey::before{
    content:"";

    position:absolute;

    width:500px;
    height:500px;

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

    border-radius:50%;

    right:-220px;
    top:-220px;
}

.we-journey-heading{
    max-width:700px;

    margin-bottom:55px;
}

.we-journey-heading .we-section-label{
    color:#f1bd76;
}

.we-journey-heading .we-section-title{
    color:#fff;
}

.we-journey-heading p{
    color:rgba(255,255,255,.72);

    line-height:1.8;
}

.we-steps{
    display:grid;

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

    gap:10px;

    position:relative;
}

.we-step{
    text-align:center;

    position:relative;
}

.we-step-circle{
    width:72px;
    height:72px;

    margin:0 auto 17px;

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

    border-radius:50%;

    display:flex;

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

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

    color:#f3c37e;

    font-size:20px;

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

.we-step:hover .we-step-circle{
    transform:
        translateY(-7px)
        scale(1.08);

    background:var(--we-orange);

    border-color:var(--we-orange);

    color:#fff;

    box-shadow:
        0 12px 30px rgba(216,137,59,.28);
}

.we-step strong{
    display:block;

    color:#fff;

    font-size:13px;

    letter-spacing:1px;

    transition:color .3s ease;
}

.we-step:hover strong{
    color:#f3c37e;
}

.we-step:not(:last-child)::after{
    content:"";

    position:absolute;

    top:36px;

    left:calc(50% + 38px);

    width:calc(100% - 76px);

    height:1px;

    background:rgba(255,255,255,.20);
}


/* =========================================================
   WEB4YOU SKILLS
   ========================================================= */

.we-skills{
    padding:100px 0;

    background:#fff;
}

.we-skills-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:65px;

    align-items:center;
}

.we-skills-image img{
    width:100%;

    height:540px;

    object-fit:cover;

    display:block;

    border-radius:4px;
}

.we-list{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;

    margin:28px 0 32px;
}

.we-list-item{
    display:flex;

    align-items:flex-start;

    gap:11px;

    padding:13px 14px;

    background:var(--we-cream);

    color:var(--we-text);

    font-size:14px;

    line-height:1.45;

    position:relative;

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

.we-list-item:hover{
    transform:translateY(-3px);

    background:#fff;

    box-shadow:
        0 9px 25px rgba(16,47,69,.08);
}

.we-list-item i{
    color:var(--we-orange);

    margin-top:3px;

    transition:
        transform .3s ease,
        color .3s ease;
}

.we-list-item:hover i{
    transform:scale(1.15);

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


/* =========================================================
   WEB4YOU ENTREPRENEUR
   ========================================================= */

.we-entrepreneur{
    padding:100px 0;

    background:var(--we-cream);
}

.we-entrepreneur-grid{
    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:65px;

    align-items:center;
}

.we-process{
    margin-top:30px;

    display:grid;

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

    gap:12px;
}

.we-process-item{
    padding:18px 20px;

    background:#fff;

    border:1px solid var(--we-border);

    font-weight:600;

    color:var(--we-navy);

    position:relative;

    overflow:hidden;

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

.we-process-item::before{
    content:"";

    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:3px;

    background:var(--we-orange);

    transform:scaleY(0);

    transform-origin:bottom;

    transition:transform .35s ease;
}

.we-process-item:hover{
    transform:translateX(5px);

    background:#fff;

    border-color:
        rgba(216,137,59,.25);

    box-shadow:
        0 12px 30px rgba(16,47,69,.08);
}

.we-process-item:hover::before{
    transform:scaleY(1);
}

.we-process-item span{
    display:block;

    color:var(--we-orange);

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:5px;
}

.we-entrepreneur-image{
    position:relative;

    overflow:visible;
}

.we-entrepreneur-image img{
    width:100%;

    height:490px;

    object-fit:cover;

    display:block;

    border-radius:80px 4px 4px 4px;

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

    transition:
        transform .6s cubic-bezier(.2,.8,.2,1),
        box-shadow .6s ease;
}

.we-entrepreneur-image:hover img{
    transform:translateY(-7px);

    box-shadow:
        0 30px 70px rgba(16,47,69,.16);
}


/* =========================================================
   WEB4YOU SUPPORT
   ========================================================= */

.we-support{
    padding:100px 0;

    background:#fff;
}

.we-support-box{
    display:grid;

    grid-template-columns:1fr 1fr;

    background:var(--we-navy);

    overflow:hidden;

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

.we-support-box:hover{
    transform:translateY(-6px);

    box-shadow:
        0 30px 70px rgba(16,47,69,.18);
}

.we-support-content{
    padding:60px;

    color:#fff;
}

.we-support-content .we-section-title{
    color:#fff;
}

.we-support-content p{
    color:rgba(255,255,255,.75);

    line-height:1.8;
}

.we-support-price{
    display:flex;

    align-items:center;

    gap:14px;

    margin:28px 0;
}

.we-support-price strong{
    font-family:"Playfair Display",serif;

    font-size:46px;

    color:#f2bf78;
}

.we-support-price span{
    color:rgba(255,255,255,.72);

    font-size:14px;
}

.we-support-image{
    min-height:430px;

    overflow:hidden;
}

.we-support-image img{
    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:
        transform .8s cubic-bezier(.2,.8,.2,1);
}

.we-support-box:hover .we-support-image img{
    transform:scale(1.05);
}


/* =========================================================
   WEB4YOU PRODUCTS
   ========================================================= */

.we-products{
    padding:100px 0;

    background:var(--we-soft);
}

.we-products-grid{
    display:grid;

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

    gap:20px;

    margin-top:50px;
}

.we-product-card{
    background:#fff;

    border:1px solid var(--we-border);

    overflow:hidden;

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease;
}

.we-product-card:hover{
    transform:translateY(-10px);

    box-shadow:
        0 25px 60px rgba(16,47,69,.15);
}

.we-product-image{
    height:230px;

    overflow:hidden;

    position:relative;
}

.we-product-image::after{
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(16,47,69,.18)
        );

    opacity:0;

    transition:opacity .4s ease;
}

.we-product-card:hover .we-product-image::after{
    opacity:1;
}

.we-product-image img{
    width:100%;

    height:100%;

    object-fit:cover;

    transition:
        transform .7s cubic-bezier(.2,.8,.2,1);
}

.we-product-card:hover .we-product-image img{
    transform:scale(1.08);
}

.we-product-body{
    padding:25px;
}

.we-product-body h3{
    margin:0 0 9px;

    color:var(--we-navy);

    font-family:"Playfair Display",serif;

    font-size:23px;

    transition:color .3s ease;
}

.we-product-card:hover .we-product-body h3{
    color:var(--we-orange);
}

.we-product-body p{
    margin:0;

    color:var(--we-muted);

    font-size:14px;

    line-height:1.7;
}


/* =========================================================
   WEB4YOU REVEAL
   ========================================================= */

.we-reveal{
    opacity:0;

    transform:translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.8,.2,1);
}

.we-reveal.revealed{
    opacity:1;

    transform:translateY(0);
}

.we-focus-card:nth-child(1),
.we-product-card:nth-child(1),
.we-process-item:nth-child(1){
    transition-delay:.02s;
}

.we-focus-card:nth-child(2),
.we-product-card:nth-child(2),
.we-process-item:nth-child(2){
    transition-delay:.06s;
}

.we-focus-card:nth-child(3),
.we-product-card:nth-child(3),
.we-process-item:nth-child(3){
    transition-delay:.10s;
}

.we-focus-card:nth-child(4),
.we-process-item:nth-child(4){
    transition-delay:.14s;
}

.we-focus-card:nth-child(5),
.we-process-item:nth-child(5){
    transition-delay:.18s;
}

.we-focus-card:nth-child(6),
.we-process-item:nth-child(6){
    transition-delay:.22s;
}

.we-page .btn{
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.we-page .btn:hover{
    transform:translateY(-3px);

    box-shadow:
        0 12px 28px rgba(16,47,69,.14);
}


/* =========================================================
   RESPONSIVE - 1180
   ========================================================= */

@media(max-width:1180px){

    .nav{
        gap:7px;
    }

    .logo{
        min-width:155px;
    }

    .logo img{
        max-width:175px;
    }

    .nav-links{
        gap:9px;

        font-size:11px;
    }

    .nav-actions{
        min-width:145px;
    }

    .nav-search{
        width:145px;
    }

    .impact-card{
        grid-template-columns:repeat(3,1fr);
    }

    .impact-item:nth-child(3){
        border-right:0;
    }

    .impact-item:nth-child(-n+3){
        border-bottom:1px solid #e3e9ec;
    }

    .story-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .change-flow{
        grid-template-columns:repeat(3,1fr);

        gap:30px 10px;
    }

    .flow-item:not(:last-child):after{
        display:none;
    }
}


/* =========================================================
   RESPONSIVE - 1000
   ========================================================= */

@media(max-width:1000px){

    .logo{
        min-width:150px;
    }

    .logo img{
        max-width:170px;
    }

    .nav-links{
        gap:7px;

        font-size:10.5px;
    }

    .nav-actions{
        min-width:0;
    }

    .nav-search{
        display:none;
    }

    .search{
        display:none;
    }
}


/* =========================================================
   RESPONSIVE - 900
   ========================================================= */

@media(max-width:900px){

    /*
       Mobile topbar is taller because it has
       message + email/buttons rows.
    */

    :root{
        --topbar-height:69px;
        --header-height:70px;
    }


    /* ---------- MOBILE TOPBAR ---------- */

    .topbar,
    .topbar.topbar-hidden{
        position:sticky !important;

        top:0 !important;

        z-index:1100 !important;

        display:block !important;

        height:var(--topbar-height) !important;
        min-height:var(--topbar-height) !important;
        max-height:var(--topbar-height) !important;

        padding:6px 0 !important;

        opacity:1 !important;
        visibility:visible !important;

        transform:none !important;

        overflow:visible !important;
    }

    .topbar-inner{
        height:100%;

        flex-wrap:wrap;

        justify-content:center;

        align-content:center;

        gap:5px 10px;
    }

    .topbar-message{
        width:100%;

        justify-content:center;

        font-size:10px;
    }

    .topbar-right{
        width:100%;

        justify-content:center;

        flex-wrap:wrap;

        gap:5px 7px;
    }

    .topbar-email{
        font-size:10px;
    }

    .topbar-contact,
    .topbar-donate{
        min-height:26px;

        padding:4px 9px;

        font-size:10px;
    }


    /* ---------- MOBILE HEADER ---------- */

    header,
    .site-header,
    .main-header{
        position:sticky !important;

        top:var(--topbar-height) !important;

        z-index:1000 !important;

        width:100%;
    }

    .nav{
        min-height:var(--header-height);
    }

    .nav-links{
        display:none;
    }

    .nav-actions{
        min-width:0;

        margin-left:auto;
    }

    .nav-search{
        display:none;
    }

    .nav-actions .contact-nav{
        display:none;
    }

    .mobile-menu{
        display:block;
    }

    .logo{
        min-width:auto;
    }

    .logo img{
        height:52px;

        max-width:185px;
    }


    /* ---------- MOBILE PANEL ---------- */

    .mobile-panel{
        position:absolute;

        top:var(--header-height);

        left:0;
        right:0;

        background:#fff;

        border-top:1px solid #e4edf0;

        box-shadow:
            0 15px 30px rgba(0,0,0,.12);

        padding:10px 18px 18px;

        max-height:
            calc(
                100vh
                - var(--topbar-height)
                - var(--header-height)
            );

        overflow-y:auto;

        z-index:1002;
    }

    .mobile-panel.active{
        display:block;
    }

    .mobile-panel > a{
        display:flex;

        align-items:center;

        justify-content:space-between;

        padding:13px 5px;

        border-bottom:1px solid #edf1f3;

        font-size:13px;

        font-weight:700;

        color:#3c5667;
    }

    .mobile-about-row,
    .mobile-work-row,
    .mobile-dropdown-title{
        display:flex !important;
    }

    .mobile-dropdown.active{
        display:block !important;
    }


    /* ---------- HERO ---------- */

    .hero{
        min-height:650px;
    }

    .hero-bg{
        background-position:62% center;
    }

    .hero-content{
        width:100%;

        padding-top:80px;

        align-self:flex-start;
    }

    .hero h1{
        font-size:43px;
    }

    .hero p{
        max-width:650px;
    }

    .hero-actions{
        width:100%;

        max-width:650px;

        flex-wrap:wrap;

        white-space:normal;
    }

    .hero-actions .btn{
        flex:0 0 auto;

        white-space:nowrap;
    }

    .hero-slider-arrows{
        padding:0 15px;
    }

    .hero-arrow{
        width:38px;
        height:38px;
    }

    .hero-dots{
        bottom:22px;
    }

    .impact{
        margin-top:-35px;
    }


    /* ---------- GENERAL GRIDS ---------- */

    .why-grid,
    .split,
    .product-layout,
    .csr-grid{
        grid-template-columns:1fr;
    }

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

    .journey-line{
        grid-template-columns:repeat(3,1fr);

        gap:28px;
    }

    .journey-line:before{
        display:none;
    }

    .skill-card{
        grid-template-columns:1fr;
    }

    .skill-card img{
        height:260px;
    }

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

    .about-intro-grid{
        grid-template-columns:1fr;
    }

    .about-image{
        min-height:440px;
    }

    .about-image img{
        min-height:440px;
    }

    .mission-list{
        grid-template-columns:1fr;
    }

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

    .vision-section,
    .mission-section{
        padding:40px 35px;
    }

    .cta{
        padding:55px 0;
    }

    .cta-inner{
        grid-template-columns:1fr;

        gap:0;
    }

    .cta-copy{
        max-width:100%;
    }

    .cta-actions{
        justify-content:flex-start;

        margin-top:28px;
    }

    .footer-main{
        grid-template-columns:repeat(2,1fr);

        gap:30px;
    }

    .footer-logo{
        grid-column:1 / -1;
    }


    /* ---------- PAGE HERO ---------- */

    .page-hero{
        padding:85px 0 75px;
    }

    .about-section{
        padding:75px 0;
    }

    .about-grid{
        grid-template-columns:1fr;

        gap:50px;
    }

    .about-grid-reverse .about-image{
        order:1;
    }

    .about-grid-reverse .about-content{
        order:2;
    }

    .about-image img{
        height:430px;
    }

    .about-content{
        max-width:none;
    }


    /* ---------- WEB4YOU ---------- */

    .we-intro-grid,
    .we-skills-grid,
    .we-entrepreneur-grid,
    .we-support-box{
        grid-template-columns:1fr;
    }

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

    .we-steps{
        grid-template-columns:repeat(3,1fr);

        row-gap:35px;
    }

    .we-step:nth-child(3)::after{
        display:none;
    }

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

    .we-intro-image img{
        height:440px;
    }

    .we-support-image{
        min-height:350px;
    }
}


/* =========================================================
   RESPONSIVE - 700
   ========================================================= */

@media(max-width:700px){

    .cta-actions{
        width:100%;

        overflow-x:auto;

        justify-content:flex-start;

        padding-bottom:4px;

        scrollbar-width:none;
    }

    .cta-actions::-webkit-scrollbar{
        display:none;
    }

    .cta-actions .btn{
        flex:0 0 auto;
    }
}


/* =========================================================
   RESPONSIVE - 650
   ========================================================= */

@media(max-width:650px){

    .about-hero{
        min-height:500px;
    }

    .about-hero-content{
        padding:70px 0;
    }

    .about-hero h1{
        font-size:42px;
    }

    .about-hero p{
        font-size:16px;
    }

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

    .about-hero-actions .btn{
        flex:1 1 auto;
    }

    .approach-box{
        padding:32px 24px;
    }

    .approach-box h2{
        font-size:31px;
    }

    .vision-section,
    .mission-section{
        padding:32px 24px;

        border-radius:22px;
    }

    .vision-section h3,
    .mission-heading h3{
        font-size:30px;
    }

    .vision-section p{
        font-size:18px;
    }

    .change-flow{
        grid-template-columns:repeat(2,1fr);

        gap:28px 5px;
    }

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

    .about-image,
    .about-image img{
        min-height:360px;
    }


    /* ---------- WEB4YOU ---------- */

    .we-container{
        width:min(100% - 28px,1180px);
    }

    .we-hero{
        min-height:620px;
    }

    .we-hero-content{
        padding:75px 0;
    }

    .we-hero h1{
        font-size:45px;
    }

    .we-hero p{
        font-size:16px;
    }

    .we-intro,
    .we-focus,
    .we-journey,
    .we-skills,
    .we-entrepreneur,
    .we-support,
    .we-products{
        padding:70px 0;
    }

    .we-focus-grid,
    .we-products-grid{
        grid-template-columns:1fr;
    }

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

    .we-step:not(:last-child)::after{
        display:none;
    }

    .we-list{
        grid-template-columns:1fr;
    }

    .we-process{
        grid-template-columns:1fr;
    }

    .we-support-content{
        padding:38px 25px;
    }

    .we-image-badge{
        right:12px;

        bottom:20px;
    }

    .we-entrepreneur-image img{
        height:380px;
    }
}


/* =========================================================
   RESPONSIVE - 600
   ========================================================= */

@media(max-width:600px){

    .page-hero{
        padding:70px 0 65px;
    }

    .page-hero h1{
        font-size:39px;
    }

    .page-hero p{
        font-size:16px;
    }

    .about-section{
        padding:60px 0;
    }

    .section-heading{
        margin-bottom:45px;
    }

    .section-heading h2{
        font-size:34px;
    }

    .about-content h2{
        font-size:33px;
    }

    .about-image img{
        height:320px;

        border-radius:18px;
    }

    .about-image::before{
        left:-8px;
        bottom:-8px;

        border-radius:18px;
    }

    .about-point{
        gap:13px;
    }

    .about-point > i{
        flex-basis:43px;

        width:43px;
        height:43px;

        font-size:17px;
    }

    .cta{
        padding:65px 0;
    }

    .cta-copy h2{
        font-size:36px;
    }

    .cta-actions{
        width:100%;

        flex-direction:column;
    }

    .cta-actions .btn{
        width:100%;
    }
}


/* =========================================================
   RESPONSIVE - 520
   ========================================================= */

@media(max-width:520px){

    :root{
        --topbar-height:67px;
        --header-height:68px;
    }

    .container{
        width:min(
            var(--container),
            calc(100% - 26px)
        );
    }


    /* ---------- TOPBAR ---------- */

    .topbar,
    .topbar.topbar-hidden{
        height:var(--topbar-height) !important;
        min-height:var(--topbar-height) !important;
        max-height:var(--topbar-height) !important;

        padding-top:6px !important;
        padding-bottom:6px !important;
    }

    .topbar-message{
        font-size:9.5px;
    }

    .topbar-email{
        font-size:9.5px;
    }

    .topbar-contact,
    .topbar-donate{
        font-size:9.5px;

        padding:4px 8px;
    }


    /* ---------- HEADER ---------- */

    header,
    .site-header,
    .main-header{
        top:var(--topbar-height) !important;
    }

    .nav{
        min-height:var(--header-height);
    }

    .logo{
        min-width:auto;
    }

    .logo img{
        height:48px;

        max-width:175px;
    }

    .mobile-panel{
        top:var(--header-height);

        max-height:
            calc(
                100vh
                - var(--topbar-height)
                - var(--header-height)
            );
    }


    /* ---------- HERO ---------- */

    .hero{
        min-height:690px;
    }

    .hero h1{
        font-size:37px;
    }

    .hero p{
        font-size:14px;
    }

    .hero-bg{
        background-position:62% center;
    }

    .hero-slider-arrows{
        padding:0 10px;
    }

    .hero-arrow{
        width:34px;
        height:34px;

        font-size:12px;
    }

    .hero-dots{
        bottom:18px;
    }

    .hero-dot{
        width:7px;
        height:7px;
    }

    .hero-dot.active{
        width:19px;
    }


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

    .impact-card{
        grid-template-columns:1fr 1fr;
    }

    .impact-item{
        padding:16px 8px;
    }

    .impact-item strong{
        font-size:21px;
    }

    .features,
    .check-list,
    .education-grid,
    .support-grid{
        grid-template-columns:1fr;
    }

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

    .image-card img,
    .women .image-card img{
        height:330px;
    }

    .product-image{
        grid-template-columns:1fr;
    }

    .product-image img:first-child{
        height:260px;

        grid-row:auto;
    }

    .product-image img{
        height:180px;
    }

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

    .story img{
        height:110px;
    }

    .partner-types{
        grid-template-columns:1fr;
    }


    /* ---------- ABOUT ---------- */

    .about-hero h1{
        font-size:37px;
    }

    .about-hero-actions{
        flex-direction:column;
    }

    .about-hero-actions .btn{
        width:100%;
    }

    .about-image,
    .about-image img{
        min-height:330px;
    }

    .about-image-note{
        left:14px;

        bottom:14px;

        padding:14px 16px;

        font-size:13px;
    }

    .mission-list{
        row-gap:12px;
    }

    .approach-formula{
        gap:8px;
    }

    .approach-formula span{
        padding:10px 13px;

        font-size:12px;
    }

    .work-card{
        padding:26px;
    }


    /* ---------- CTA ---------- */

    .cta{
        padding:48px 0;
    }

    .cta h2{
        font-size:32px;
    }

    .cta p{
        font-size:13px;

        line-height:1.55;
    }

    .cta-actions{
        gap:8px;

        margin-top:28px;
    }

    .cta-actions .btn{
        padding:11px 16px;

        font-size:12px;
    }


    /* ---------- FOOTER ---------- */

    .footer-main{
        grid-template-columns:1fr 1fr;

        gap:25px 18px;

        padding:40px 0 28px;
    }

    .footer-logo{
        grid-column:1 / -1;
    }

    .footer-logo .logo img{
        height:56px;

        max-width:200px;
    }

    .footer-logo p{
        max-width:100%;

        font-size:11px;

        line-height:1.6;
    }

    .footer-main > div:nth-child(4){
        grid-column:1 / -1;
    }

    footer h4{
        font-size:13px;

        margin-bottom:10px;
    }

    .footer-links{
        gap:6px;

        font-size:11px;
    }

    .socials{
        margin-bottom:10px;
    }

    .newsletter{
        max-width:100%;
    }

    .footer-bottom .container{
        flex-direction:column;
    }

    .whatsapp-float{
        right:14px;
        bottom:14px;

        width:50px;
        height:50px;

        font-size:24px;
    }

    .hero-actions{
        width:100%;
    }

    .hero-actions .btn{
        width:100%;
    }
}


/* =========================================================
   RESPONSIVE - 450
   ========================================================= */

@media(max-width:450px){

    .change-flow{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   DESKTOP ONLY
   ========================================================= */

@media(min-width:901px){

    .mobile-work-row,
    .mobile-work-toggle,
    .mobile-about-row,
    .mobile-about-toggle{
        display:none;
    }

    .nav,
    .nav-links,
    .nav-links > a,
    .nav-item,
    .our-work-nav .nav-link,
    .nav-dropdown-toggle,
    .nav-actions{
        align-items:center;
    }

    .hero-actions{
        flex-wrap:nowrap;

        white-space:nowrap;
    }

    .hero-actions .btn{
        width:auto;

        flex:0 0 auto;
    }

    .topbar,
    .topbar.topbar-hidden{
        display:block !important;

        position:sticky !important;

        top:0 !important;

        height:var(--topbar-height) !important;

        opacity:1 !important;

        visibility:visible !important;
    }

    header,
    .site-header,
    .main-header{
        position:sticky !important;

        top:var(--topbar-height) !important;

        z-index:1000 !important;
    }
}


/* =========================================================
   TOUCH DEVICES
   ========================================================= */

@media(hover:none){

    .impact-item:hover,
    .why-intro:hover,
    .feature:hover,
    .education-card:hover,
    .skill-card:hover,
    .story:hover,
    .csr-card:hover,
    .partner:hover,
    .support-card:hover,
    .image-card:hover,
    .journey-step:hover,
    .work-card:hover,
    .help-card:hover,
    .vision-section:hover,
    .mission-section:hover,
    .approach-box:hover,
    .about-image:hover,
    .we-focus-card:hover,
    .we-product-card:hover,
    .we-process-item:hover,
    .we-step:hover{
        transform:none;

        box-shadow:inherit;
    }

    .about-image:hover img,
    .product-image img:hover{
        transform:none;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation:none !important;

        transition-duration:.01ms !important;
    }

    .reveal-up,
    .we-reveal{
        opacity:1;

        transform:none;
    }

    .we-page *,
    .we-page *::before,
    .we-page *::after{
        animation:none !important;

        transition:none !important;
    }
}
/* =========================================================
   FINAL HEADER / TOPBAR / FOOTER FONT OVERRIDES
   Slightly larger but keeps desktop navigation stable
   ========================================================= */


/* ---------- TOPBAR ---------- */

.topbar{
    font-size:13px;
}

.topbar-message{
    font-size:13px;
}

.topbar-email{
    font-size:13px;
}

.topbar-contact,
.topbar-donate{
    font-size:12px;
}


/* ---------- DESKTOP HEADER NAVIGATION ---------- */

@media(min-width:901px){

    .nav-links{
        font-size:13px;
    }

    .nav-links > a{
        font-size:13px;
    }

    .nav-item > .nav-link{
        font-size:13px;
    }

    .our-work-nav .nav-link{
        font-size:13px;
    }

    .nav-dropdown-toggle{
        font-size:13px;
    }

    /* Dropdown menu */

    .dropdown a{
        font-size:13px;
    }

    /* Keep menu spacing controlled */

    .nav-links{
        gap:11px;
    }

    .nav-links > a,
    .nav-item{
        white-space:nowrap;
    }
}


/* =========================================================
   MOBILE HEADER
   ========================================================= */

@media(max-width:900px){

    .topbar{
        font-size:10px;
    }

    .topbar-message{
        font-size:10px;
    }

    .topbar-email{
        font-size:10px;
    }

    .topbar-contact,
    .topbar-donate{
        font-size:10px;
    }

    .mobile-panel > a{
        font-size:13px;
    }

    .mobile-about-row > a,
    .mobile-work-row > a{
        font-size:13px;
    }

    .mobile-dropdown-title{
        font-size:13px;
    }

    .mobile-dropdown a{
        font-size:12px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media(max-width:520px){

    .topbar{
        font-size:9.5px;
    }

    .topbar-message,
    .topbar-email{
        font-size:9.5px;
    }

    .topbar-contact,
    .topbar-donate{
        font-size:9.5px;
    }

    .mobile-panel > a{
        font-size:13px;
    }

    .mobile-about-row > a,
    .mobile-work-row > a{
        font-size:13px;
    }

    .mobile-dropdown-title{
        font-size:13px;
    }

    .mobile-dropdown a{
        font-size:12px;
    }
}


/* =========================================================
   FOOTER FONT SIZE
   Slightly larger without making footer oversized
   ========================================================= */

footer{
    font-size:14px;
}

footer p{
    font-size:14px;
}

footer a{
    font-size:14px;
}

footer h4{
    font-size:16px;
}

.footer-links{
    font-size:13px;
}

.footer-bottom{
    font-size:12px;
}

.footer-logo p{
    font-size:13px;
}


/* =========================================================
   FOOTER MOBILE
   ========================================================= */

@media(max-width:520px){

    footer{
        font-size:13px;
    }

    footer p{
        font-size:13px;
    }

    footer a{
        font-size:13px;
    }

    footer h4{
        font-size:15px;
    }

    .footer-links{
        font-size:12px;
    }

    .footer-bottom{
        font-size:11px;
    }

    .footer-logo p{
        font-size:11px;
    }
}
/* =========================================================
   DESKTOP NAVIGATION - TIGHTER MENU SPACING
   ========================================================= */

@media (min-width: 901px) {

  .nav-links {
    display: flex;
    align-items: center;
    gap: 9px; /* reduced overall gap */
  }

  /* Main menu items */
  .nav-links > a,
  .nav-links > .nav-item > .nav-link,
  .nav-links > .nav-item > button.nav-link {
    margin: 0;
    padding: 9px 0;

    font-family: 'DM Sans', sans-serif;
    font-size: 15px !important;
    font-weight: 600;
    line-height: 1.2;

    color: inherit;
    text-decoration: none;
    white-space: nowrap;

    border: 0;
    background: transparent;
  }

  /* Dropdown item containers */
  .nav-links > .nav-item {
    display: flex;
    align-items: center;
    position: relative;
    margin: 0;
    padding: 0;
  }

  /* Dropdown arrows */
  .nav-links > .nav-item > .nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 9px 0 9px 3px;

    border: 0;
    background: transparent;

    font-size: 9px;
    line-height: 1;
    cursor: pointer;
  }

  /* More button */
  .nav-links > .other-nav > button.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;

    font-size: 15px !important;
    font-weight: 600;
  }

  /* Products */
  .nav-links > a[href="products.php"] {
  margin-right: 14px;
}

.nav-links > .other-nav {
  margin-left: 7px;
}

  .nav-links > .other-nav {
    margin-left: 2px;
  }
}
/* =======================================================
   PAGE MAIN RESET
   Prevent global main/page styles from affecting layout
   ======================================================= */

main.page-main {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}
/* =========================================================
   SKILL & VOCATIONAL TRAINING
   PAGE-SPECIFIC CSS ONLY
   ========================================================= */

.st-page{
  --st-navy:#102f45;
  --st-blue:#1f506c;
  --st-orange:#d8893b;
  --st-gold:#e8b76b;
  --st-cream:#f8f4ed;
  --st-soft:#f2f6f4;
  --st-text:#263746;
  --st-muted:#6d7a83;
  --st-white:#ffffff;
  --st-border:rgba(16,47,69,.10);
  --st-shadow:0 22px 55px rgba(16,47,69,.10);
  color:var(--st-text);
}


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

.st-page .st-hero{
  position:relative;
  min-height:650px;
  width:100%;
  display:flex;
  align-items:center;
  box-sizing:border-box;
  overflow:hidden;

  background:
    linear-gradient(
      90deg,
      rgba(8,30,44,.94) 0%,
      rgba(8,30,44,.80) 42%,
      rgba(8,30,44,.34) 78%,
      rgba(8,30,44,.10) 100%
    ),
    url("https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=2000&q=85")
    center/cover no-repeat;
}


.st-page .st-hero-inner{
  position:relative;
  z-index:2;
  width:100%;
  box-sizing:border-box;
  padding:90px 0;
}


.st-page .st-hero-content{
  max-width:760px;
  box-sizing:border-box;
  color:#fff;
}


.st-page .st-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:9px 15px;
  margin-bottom:22px;

  border:1px solid rgba(255,255,255,.28);
  border-radius:50px;

  background:rgba(255,255,255,.10);
  backdrop-filter:blur(8px);

  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}


.st-page .st-eyebrow i{
  color:var(--st-gold);
}


.st-page .st-hero h1{
  margin:0 0 24px;

  color:#fff;

  font-family:"Playfair Display",serif;

  font-size:clamp(44px,6vw,78px);
  line-height:1.04;
  letter-spacing:-.025em;
}


.st-page .st-hero h1 span{
  color:var(--st-gold);
}


.st-page .st-hero p{
  max-width:700px;
  margin:0 0 32px;

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

  font-size:18px;
  line-height:1.8;
}


.st-page .st-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}


.st-page .st-hero-actions .btn{
  transition:transform .3s ease,box-shadow .3s ease;
}


.st-page .st-hero-actions .btn:hover{
  transform:translateY(-3px);
}


/* =========================================================
   COMMON SECTIONS
   ========================================================= */

.st-page .st-section{
  width:100%;
  padding:100px 0;
  box-sizing:border-box;
}


.st-page .st-section-soft{
  background:var(--st-soft);
}


.st-page .st-section-cream{
  background:var(--st-cream);
}


.st-page .st-section-head{
  max-width:760px;
  margin:0 auto 55px;
  text-align:center;
}


.st-page .st-kicker{
  display:inline-block;
  margin-bottom:12px;

  color:var(--st-orange);

  font-size:13px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}


.st-page .st-section-head h2{
  margin:0 0 18px;

  color:var(--st-navy);

  font-family:"Playfair Display",serif;

  font-size:clamp(34px,4vw,52px);
  line-height:1.12;
}


.st-page .st-section-head p{
  margin:0;

  color:var(--st-muted);

  font-size:16px;
  line-height:1.8;
}


/* =========================================================
   INTRO
   ========================================================= */

.st-page .st-intro-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
}


.st-page .st-intro-image{
  position:relative;
}


.st-page .st-intro-image-wrap{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  box-shadow:var(--st-shadow);
}


.st-page .st-intro-image img{
  display:block;
  width:100%;
  height:560px;
  object-fit:cover;

  transition:transform .7s ease;
}


.st-page .st-intro-image:hover img{
  transform:scale(1.04);
}


.st-page .st-image-badge{
  position:absolute;
  right:-18px;
  bottom:28px;

  width:155px;
  height:155px;

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

  border-radius:50%;

  background:var(--st-orange);
  color:#fff;

  text-align:center;

  box-shadow:0 18px 45px rgba(216,137,59,.28);
}


.st-page .st-image-badge strong{
  display:block;

  font-family:"Playfair Display",serif;

  font-size:38px;
  line-height:1;
}


.st-page .st-image-badge span{
  margin-top:7px;
  max-width:105px;

  font-size:12px;
  line-height:1.35;
  font-weight:600;
}


.st-page .st-intro-copy h2{
  margin:0 0 22px;

  color:var(--st-navy);

  font-family:"Playfair Display",serif;

  font-size:clamp(34px,4vw,50px);
  line-height:1.12;
}


.st-page .st-intro-copy > p{
  margin:0 0 20px;

  color:var(--st-muted);

  font-size:16px;
  line-height:1.85;
}


.st-page .st-intro-note{
  display:flex;
  gap:15px;

  padding:20px;
  margin-top:28px;

  border-left:4px solid var(--st-orange);
  background:#fff;

  border-radius:0 14px 14px 0;

  box-shadow:0 12px 30px rgba(16,47,69,.06);
}


.st-page .st-intro-note i{
  flex:0 0 auto;
  color:var(--st-orange);
  font-size:22px;
}


.st-page .st-intro-note p{
  margin:0;
  color:var(--st-text);
  font-size:14px;
  line-height:1.7;
}


/* =========================================================
   OPPORTUNITY CARDS
   ========================================================= */

.st-page .st-opportunity-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:18px;
}


.st-page .st-opportunity-card{
  position:relative;

  min-height:245px;
  padding:30px 23px;

  background:#fff;

  border:1px solid var(--st-border);
  border-radius:20px;

  box-shadow:0 12px 32px rgba(16,47,69,.05);

  overflow:hidden;

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


.st-page .st-opportunity-card::before{
  content:"";

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

  height:4px;

  background:var(--st-orange);

  transform:scaleX(0);
  transform-origin:left;

  transition:transform .35s ease;
}


.st-page .st-opportunity-card:hover{
  transform:translateY(-8px);

  border-color:rgba(216,137,59,.30);

  box-shadow:0 22px 45px rgba(16,47,69,.12);
}


.st-page .st-opportunity-card:hover::before{
  transform:scaleX(1);
}


.st-page .st-opportunity-icon{
  width:58px;
  height:58px;

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

  margin-bottom:23px;

  border-radius:16px;

  background:var(--st-cream);
  color:var(--st-orange);

  font-size:23px;

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


.st-page .st-opportunity-card:hover .st-opportunity-icon{
  transform:translateY(-3px) rotate(-3deg);

  background:var(--st-orange);
  color:#fff;
}


.st-page .st-opportunity-card h3{
  margin:0 0 12px;

  color:var(--st-navy);

  font-family:"Playfair Display",serif;

  font-size:21px;
}


.st-page .st-opportunity-card p{
  margin:0;

  color:var(--st-muted);

  font-size:14px;
  line-height:1.7;
}


/* =========================================================
   JOURNEY
   ========================================================= */

.st-page .st-journey{
  position:relative;

  width:100%;
  padding:100px 0;

  box-sizing:border-box;

  background:
    linear-gradient(
      135deg,
      #0c2a3e 0%,
      #143f58 100%
    );

  color:#fff;

  overflow:hidden;
}


.st-page .st-journey::before{
  content:"";

  position:absolute;

  width:360px;
  height:360px;

  top:-150px;
  right:-120px;

  border-radius:50%;

  background:rgba(232,183,107,.10);
}


.st-page .st-journey-head{
  position:relative;
  z-index:1;

  max-width:720px;
  margin:0 auto 55px;

  text-align:center;
}


.st-page .st-journey-head .st-kicker{
  color:var(--st-gold);
}


.st-page .st-journey-head h2{
  margin:0 0 17px;

  color:#fff;

  font-family:"Playfair Display",serif;

  font-size:clamp(35px,4vw,52px);
  line-height:1.12;
}


.st-page .st-journey-head p{
  margin:0;

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

  line-height:1.8;
}


.st-page .st-journey-flow{
  position:relative;
  z-index:1;

  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:10px;
}


.st-page .st-journey-step{
  position:relative;
  text-align:center;
}


.st-page .st-journey-step:not(:last-child)::after{
  content:"";

  position:absolute;

  top:31px;
  left:calc(50% + 34px);

  width:calc(100% - 68px);
  height:1px;

  background:rgba(232,183,107,.38);
}


.st-page .st-journey-circle{
  position:relative;
  z-index:2;

  width:64px;
  height:64px;

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

  margin:0 auto 18px;

  border:1px solid rgba(232,183,107,.50);
  border-radius:50%;

  background:#143f58;
  color:var(--st-gold);

  font-size:20px;

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


.st-page .st-journey-step:hover .st-journey-circle{
  transform:translateY(-6px) scale(1.06);

  background:var(--st-orange);
  color:#fff;
}


.st-page .st-journey-step h3{
  margin:0 0 5px;

  color:#fff;

  font-size:14px;
  letter-spacing:.04em;
}


.st-page .st-journey-step span{
  color:rgba(255,255,255,.58);
  font-size:12px;
}


/* =========================================================
   COURSE CATALOGUE
   ========================================================= */

.st-page .st-course-section{
  background:#fff;
}


.st-page .st-course-note{
  max-width:900px;

  margin:-25px auto 50px;

  padding:17px 22px;

  display:flex;
  gap:12px;
  align-items:flex-start;

  border-radius:14px;

  background:var(--st-cream);

  color:var(--st-text);

  font-size:14px;
  line-height:1.7;
}


.st-page .st-course-note i{
  margin-top:3px;
  color:var(--st-orange);
}


.st-page .st-category{
  margin-bottom:68px;
}


.st-page .st-category:last-child{
  margin-bottom:0;
}


.st-page .st-category-head{
  display:flex;
  align-items:center;
  gap:17px;

  margin-bottom:25px;
}


.st-page .st-category-icon{
  flex:0 0 auto;

  width:55px;
  height:55px;

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

  border-radius:16px;

  background:var(--st-navy);
  color:var(--st-gold);

  font-size:21px;
}


.st-page .st-category-head h3{
  margin:0;

  color:var(--st-navy);

  font-family:"Playfair Display",serif;

  font-size:28px;
}


.st-page .st-course-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}


.st-page .st-course-card{
  position:relative;

  display:flex;
  align-items:center;

  gap:15px;

  min-height:100px;

  padding:20px 21px;

  border:1px solid var(--st-border);
  border-radius:17px;

  background:#fff;

  box-shadow:0 8px 25px rgba(16,47,69,.035);

  overflow:hidden;

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


.st-page .st-course-card::before{
  content:"";

  position:absolute;

  left:0;
  top:0;
  bottom:0;

  width:3px;

  background:var(--st-orange);

  transform:scaleY(0);
  transform-origin:bottom;

  transition:transform .32s ease;
}


.st-page .st-course-card:hover{
  transform:translateY(-5px);

  border-color:rgba(216,137,59,.30);

  box-shadow:0 18px 38px rgba(16,47,69,.09);
}


.st-page .st-course-card:hover::before{
  transform:scaleY(1);
}


.st-page .st-course-number{
  flex:0 0 auto;

  width:39px;
  height:39px;

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

  border-radius:12px;

  background:var(--st-soft);
  color:var(--st-blue);

  font-size:12px;
  font-weight:700;
}


.st-page .st-course-content{
  flex:1;
}


.st-page .st-course-content h4{
  margin:0 0 8px;

  color:var(--st-navy);

  font-size:15px;
  line-height:1.4;
}


.st-page .st-duration{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding:5px 9px;

  border-radius:50px;

  background:rgba(216,137,59,.10);
  color:#a96320;

  font-size:11px;
  font-weight:700;
}


.st-page .st-duration i{
  font-size:9px;
}


/* =========================================================
   LIVELIHOOD
   ========================================================= */

.st-page .st-livelihood{
  background:var(--st-soft);
}


.st-page .st-livelihood-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;

  gap:65px;

  align-items:center;
}


.st-page .st-livelihood-image{
  position:relative;

  overflow:hidden;

  border-radius:28px;

  box-shadow:var(--st-shadow);
}


.st-page .st-livelihood-image img{
  display:block;

  width:100%;
  height:570px;

  object-fit:cover;

  transition:transform .7s ease;
}


.st-page .st-livelihood-image:hover img{
  transform:scale(1.04);
}


.st-page .st-livelihood-copy h2{
  margin:0 0 20px;

  color:var(--st-navy);

  font-family:"Playfair Display",serif;

  font-size:clamp(34px,4vw,50px);
  line-height:1.12;
}


.st-page .st-livelihood-copy > p{
  margin:0 0 28px;

  color:var(--st-muted);

  line-height:1.8;
}


.st-page .st-flow-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}


.st-page .st-flow-item{
  display:flex;
  align-items:center;

  gap:11px;

  padding:15px;

  background:#fff;

  border-radius:13px;

  border:1px solid var(--st-border);

  font-size:13px;
  font-weight:600;

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


.st-page .st-flow-item:hover{
  transform:translateX(5px);

  box-shadow:0 10px 24px rgba(16,47,69,.08);
}


.st-page .st-flow-item i{
  width:31px;
  height:31px;

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

  flex:0 0 auto;

  border-radius:50%;

  background:var(--st-orange);
  color:#fff;

  font-size:12px;
}


.st-page .st-opportunity-box{
  margin-top:28px;

  padding:22px;

  border-radius:17px;

  background:var(--st-navy);
  color:#fff;
}


.st-page .st-opportunity-box strong{
  display:block;

  margin-bottom:12px;

  color:#fff;

  font-family:"Playfair Display",serif;

  font-size:20px;
}


.st-page .st-opportunity-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}


.st-page .st-opportunity-tags span{
  padding:7px 11px;

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

  border-radius:50px;

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

  font-size:11px;
}


/* =========================================================
   PRODUCTS
   ========================================================= */

.st-page .st-products-grid{
  display:grid;

  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:18px;
}


.st-page .st-product-card{
  position:relative;

  min-height:285px;

  padding:30px 25px;

  border-radius:21px;

  background:#fff;

  border:1px solid var(--st-border);

  box-shadow:0 12px 32px rgba(16,47,69,.05);

  overflow:hidden;

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


.st-page .st-product-card::after{
  content:"";

  position:absolute;

  right:-35px;
  bottom:-45px;

  width:130px;
  height:130px;

  border-radius:50%;

  background:rgba(232,183,107,.12);

  transition:transform .4s ease;
}


.st-page .st-product-card:hover{
  transform:translateY(-8px);

  box-shadow:0 22px 48px rgba(16,47,69,.11);
}


.st-page .st-product-card:hover::after{
  transform:scale(1.45);
}


.st-page .st-product-icon{
  width:56px;
  height:56px;

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

  margin-bottom:20px;

  border-radius:15px;

  background:var(--st-cream);
  color:var(--st-orange);

  font-size:22px;
}


.st-page .st-product-card h3{
  position:relative;
  z-index:1;

  margin:0 0 12px;

  color:var(--st-navy);

  font-family:"Playfair Display",serif;

  font-size:21px;
}


.st-page .st-product-card p{
  position:relative;
  z-index:1;

  margin:0;

  color:var(--st-muted);

  font-size:13px;
  line-height:1.75;
}


/* =========================================================
   SAFETY NOTE
   ========================================================= */

.st-page .st-safety-note{
  max-width:850px;

  margin:45px auto 0;

  display:flex;
  gap:14px;

  padding:20px 22px;

  border:1px solid rgba(216,137,59,.22);

  border-radius:15px;

  background:rgba(216,137,59,.06);
}


.st-page .st-safety-note i{
  flex:0 0 auto;

  margin-top:3px;

  color:var(--st-orange);
}


.st-page .st-safety-note p{
  margin:0;

  color:var(--st-text);

  font-size:13px;
  line-height:1.7;
}


/* =========================================================
   ENTREPRENEUR
   ========================================================= */

.st-page .st-entrepreneur{
  width:100%;

  padding:85px 0;

  box-sizing:border-box;

  background:
    linear-gradient(
      135deg,
      rgba(16,47,69,.96),
      rgba(31,80,108,.93)
    );
}


.st-page .st-entrepreneur-inner{
  display:flex;

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

  gap:45px;
}


.st-page .st-entrepreneur-copy{
  max-width:720px;

  color:#fff;
}


.st-page .st-entrepreneur-copy .st-kicker{
  color:var(--st-gold);
}


.st-page .st-entrepreneur-copy h2{
  margin:0 0 15px;

  color:#fff;

  font-family:"Playfair Display",serif;

  font-size:clamp(34px,4vw,48px);

  line-height:1.12;
}


.st-page .st-entrepreneur-copy p{
  margin:0;

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

  line-height:1.8;
}


.st-page .st-entrepreneur-action{
  flex:0 0 auto;
}


.st-page .st-entrepreneur-action .btn{
  transition:
    transform .3s ease,
    box-shadow .3s ease;
}


.st-page .st-entrepreneur-action .btn:hover{
  transform:translateY(-4px);

  box-shadow:0 15px 35px rgba(0,0,0,.18);
}


/* =========================================================
   REVEAL
   ========================================================= */

.st-page .st-reveal{
  opacity:0;

  transform:translateY(28px);

  transition:
    opacity .7s ease,
    transform .7s ease;
}


.st-page .st-reveal.revealed{
  opacity:1;

  transform:translateY(0);
}


.st-page .st-delay-1{
  transition-delay:.08s;
}

.st-page .st-delay-2{
  transition-delay:.16s;
}

.st-page .st-delay-3{
  transition-delay:.24s;
}

.st-page .st-delay-4{
  transition-delay:.32s;
}

.st-page .st-delay-5{
  transition-delay:.40s;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1100px){

  .st-page .st-opportunity-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .st-page .st-course-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .st-page .st-products-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .st-page .st-livelihood-grid{
    grid-template-columns:1fr 1fr;
    gap:40px;
  }

}


@media(max-width:900px){

  .st-page .st-hero{
    min-height:600px;
  }

  .st-page .st-intro-grid,
  .st-page .st-livelihood-grid{
    grid-template-columns:1fr;
  }

  .st-page .st-intro-image{
    max-width:700px;
    margin:auto;
  }

  .st-page .st-livelihood-image{
    order:2;
  }

  .st-page .st-livelihood-copy{
    order:1;
  }

  .st-page .st-journey-flow{
    grid-template-columns:repeat(3,1fr);
    row-gap:40px;
  }

  .st-page .st-journey-step::after{
    display:none;
  }

  .st-page .st-entrepreneur-inner{
    flex-direction:column;
    align-items:flex-start;
  }

}


@media(max-width:700px){

  .st-page .st-section,
  .st-page .st-journey{
    padding:70px 0;
  }

  .st-page .st-hero-inner{
    padding:70px 0;
  }

  .st-page .st-hero h1{
    font-size:44px;
  }

  .st-page .st-hero p{
    font-size:16px;
  }

  .st-page .st-opportunity-grid{
    grid-template-columns:1fr;
  }

  .st-page .st-course-grid{
    grid-template-columns:1fr;
  }

  .st-page .st-products-grid{
    grid-template-columns:1fr;
  }

  .st-page .st-flow-list{
    grid-template-columns:1fr;
  }

  .st-page .st-journey-flow{
    grid-template-columns:repeat(2,1fr);
  }

  .st-page .st-intro-image img,
  .st-page .st-livelihood-image img{
    height:430px;
  }

  .st-page .st-image-badge{
    width:125px;
    height:125px;
    right:10px;
  }

  .st-page .st-image-badge strong{
    font-size:30px;
  }

  .st-page .st-category-head h3{
    font-size:23px;
  }

}


@media(max-width:480px){

  .st-page .st-hero h1{
    font-size:37px;
  }

  .st-page .st-hero-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .st-page .st-hero-actions .btn{
    justify-content:center;
  }

  .st-page .st-journey-flow{
    grid-template-columns:1fr 1fr;
    gap:28px 8px;
  }

  .st-page .st-course-card{
    padding:17px;
  }

  .st-page .st-course-number{
    width:34px;
    height:34px;
  }

}


@media(prefers-reduced-motion:reduce){

  .st-page *,
  .st-page *::before,
  .st-page *::after{
    animation:none !important;
    transition:none !important;
  }

  .st-page .st-reveal{
    opacity:1 !important;
    transform:none !important;
  }

}
/* =========================================================
   SKILL TRAINING - HERO / HEADER SPACING FIX
   ========================================================= */
/* =========================================================
   SKILL TRAINING HERO
   ALIGN WITH ABOUT US PAGE
   ========================================================= */

.st-page .st-hero{
  margin-top:0;
  width:100%;
  box-sizing:border-box;
}

.st-page .st-hero-inner{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:80px 0;
  box-sizing:border-box;
}

.st-page .st-hero-content{
  width:100%;
  max-width:760px;
  margin:0;
  padding:0;
  box-sizing:border-box;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:900px){

  .st-page .st-hero-inner{
    padding:70px 0;
  }

  .st-page .st-hero-content{
    max-width:700px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

  .st-page .st-hero-inner{
    padding:65px 20px;
  }

  .st-page .st-hero-content{
    max-width:100%;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media(max-width:480px){

  .st-page .st-hero-inner{
    padding:55px 18px;
  }

}
/* =========================================================
   PRODUCTS PAGE
   ALL PAGE STYLES ARE SCOPED
   ========================================================= */

.pw-page{

  --pw-navy:#102f45;
  --pw-blue:#1f506c;
  --pw-orange:#d8893b;
  --pw-gold:#e8b76b;
  --pw-cream:#f8f4ed;
  --pw-soft:#f2f6f4;
  --pw-text:#263746;
  --pw-muted:#6d7a83;
  --pw-white:#ffffff;
  --pw-border:rgba(16,47,69,.10);
  --pw-shadow:0 18px 45px rgba(16,47,69,.09);

  width:100%;
  overflow:hidden;
  background:#fff;

}

.pw-page *,
.pw-page *::before,
.pw-page *::after{
  box-sizing:border-box;
}


/* =========================================================
   INTRO
   ========================================================= */

.pw-page .pw-intro{

  padding:72px 0 58px;

  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(232,183,107,.14),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      var(--pw-cream),
      #fff
    );

}

.pw-page .pw-intro-inner{

  width:min(900px,calc(100% - 40px));
  margin:auto;
  text-align:center;

}

.pw-page .pw-kicker{

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

  margin-bottom:16px;

  color:var(--pw-orange);

  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;

}

.pw-page .pw-kicker::before,
.pw-page .pw-kicker::after{

  content:"";

  width:28px;
  height:1px;

  background:var(--pw-orange);

}

.pw-page .pw-title{

  margin:0;

  color:var(--pw-navy);

  font-family:"Playfair Display",serif;

  font-size:clamp(38px,5vw,60px);
  line-height:1.08;

}

.pw-page .pw-intro-text{

  max-width:760px;

  margin:20px auto 0;

  color:var(--pw-muted);

  font-size:16px;
  line-height:1.8;

}

.pw-page .pw-intro-buttons{

  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;

  margin-top:27px;

}

.pw-page .pw-intro-button{

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

  padding:12px 19px;

  border-radius:7px;

  text-decoration:none;

  font-size:13px;
  font-weight:700;

  transition:
    transform .25s ease,
    box-shadow .25s ease;

}

.pw-page .pw-intro-button:hover{

  transform:translateY(-3px);

}

.pw-page .pw-intro-button.primary{

  background:var(--pw-navy);
  color:#fff;

}

.pw-page .pw-intro-button.secondary{

  background:#fff;
  color:var(--pw-navy);

  border:1px solid var(--pw-border);

}


/* =========================================================
   BUY TO EMPOWER STRIP
   ========================================================= */

.pw-page .pw-empower-strip{

  width:min(1160px,calc(100% - 40px));

  margin:0 auto 45px;

  padding:25px 30px;

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

  border-radius:16px;

  background:var(--pw-navy);

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

}

.pw-page .pw-empower-strip-copy{

  min-width:0;

}

.pw-page .pw-empower-strip-title{

  margin:0 0 6px;

  color:#fff;

  font-family:"Playfair Display",serif;

  font-size:25px;

}

.pw-page .pw-empower-strip-text{

  margin:0;

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

  font-size:13px;
  line-height:1.65;

}

.pw-page .pw-empower-strip-icon{

  flex:0 0 auto;

  width:58px;
  height:58px;

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

  border-radius:50%;

  background:rgba(232,183,107,.16);

  color:var(--pw-gold);

  font-size:24px;

}


/* =========================================================
   CATALOG
   ========================================================= */

.pw-page .pw-catalog{

  padding:0 0 85px;

}

.pw-page .pw-catalog-container{

  width:min(1200px,calc(100% - 40px));

  margin:auto;

  display:grid;

  grid-template-columns:270px minmax(0,1fr);

  gap:35px;

  align-items:start;

}


/* =========================================================
   SIDEBAR
   ========================================================= */

.pw-page .pw-sidebar{

  position:sticky;
  top:25px;

  padding:22px;

  border:1px solid var(--pw-border);
  border-radius:17px;

  background:#fff;

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

}

.pw-page .pw-sidebar-title{

  margin:0 0 18px;

  padding-bottom:16px;

  border-bottom:1px solid var(--pw-border);

  color:var(--pw-navy);

  font-size:18px;
  font-weight:700;

}

.pw-page .pw-category-list{

  display:flex;
  flex-direction:column;
  gap:6px;

}

.pw-page .pw-category{

  width:100%;

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

  padding:12px 13px;

  border:0;
  border-radius:10px;

  background:transparent;

  color:var(--pw-text);

  font-family:"DM Sans",sans-serif;

  font-size:13px;
  font-weight:600;

  text-align:left;

  cursor:pointer;

  transition:
    background .25s ease,
    color .25s ease,
    transform .25s ease;

}

.pw-page .pw-category i{

  width:19px;

  color:var(--pw-orange);

  text-align:center;

}

.pw-page .pw-category:hover{

  background:var(--pw-soft);

  transform:translateX(3px);

}

.pw-page .pw-category.active{

  background:var(--pw-navy);

  color:#fff;

}

.pw-page .pw-category.active i{

  color:var(--pw-gold);

}

.pw-page .pw-sidebar-help{

  margin-top:20px;

  padding:15px;

  border-radius:11px;

  background:var(--pw-cream);

}

.pw-page .pw-sidebar-help strong{

  display:block;

  margin-bottom:6px;

  color:var(--pw-navy);

  font-size:13px;

}

.pw-page .pw-sidebar-help p{

  margin:0;

  color:var(--pw-muted);

  font-size:11px;

  line-height:1.65;

}


/* =========================================================
   PRODUCTS AREA
   ========================================================= */

.pw-page .pw-products-area{

  min-width:0;

}

.pw-page .pw-products-heading-row{

  display:flex;

  align-items:end;

  justify-content:space-between;

  gap:20px;

  margin-bottom:22px;

}

.pw-page .pw-products-heading{

  margin:0;

  color:var(--pw-navy);

  font-family:"Playfair Display",serif;

  font-size:32px;
  line-height:1.2;

}

.pw-page .pw-products-count{

  color:var(--pw-muted);

  font-size:12px;
  font-weight:700;

}


/* =========================================================
   PRODUCT GRID
   ========================================================= */

.pw-page .pw-product-grid{

  display:grid;

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

  gap:20px;

}


/* =========================================================
   PRODUCT CARD
   ========================================================= */

.pw-page .pw-product-card{

  overflow:hidden;

  background:#fff;

  border:1px solid var(--pw-border);

  border-radius:15px;

  box-shadow:
    0 8px 24px rgba(16,47,69,.055);

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

}

.pw-page .pw-product-card:hover{

  transform:translateY(-6px);

  border-color:
    rgba(216,137,59,.32);

  box-shadow:
    0 20px 40px rgba(16,47,69,.12);

}

.pw-page .pw-product-image{

  position:relative;

  height:170px;

  overflow:hidden;

  background:var(--pw-soft);

}

.pw-page .pw-product-image img{

  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  transition:
    transform .55s ease;

}

.pw-page .pw-product-card:hover
.pw-product-image img{

  transform:scale(1.07);

}

.pw-page .pw-product-category{

  position:absolute;

  top:11px;
  left:11px;

  padding:5px 9px;

  border-radius:30px;

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

  color:var(--pw-navy);

  font-size:9px;
  font-weight:700;

  letter-spacing:.05em;

  text-transform:uppercase;

  box-shadow:0 5px 14px rgba(0,0,0,.08);

}

.pw-page .pw-product-content{

  padding:17px;

}

.pw-page .pw-product-name{

  margin:0 0 7px;

  color:var(--pw-navy);

  font-size:16px;
  line-height:1.35;

}

.pw-page .pw-product-description{

  margin:0;

  color:var(--pw-muted);

  font-size:12px;
  line-height:1.65;

}

.pw-page .pw-product-link{

  display:inline-flex;

  align-items:center;

  gap:7px;

  margin-top:13px;

  color:var(--pw-orange);

  text-decoration:none;

  font-size:12px;
  font-weight:700;

  transition:
    gap .25s ease,
    color .25s ease;

}

.pw-page .pw-product-link:hover{

  gap:11px;

  color:var(--pw-navy);

}

.pw-page .pw-product-card.pw-hidden{

  display:none;

}


/* =========================================================
   FOOD NOTE
   ========================================================= */

.pw-page .pw-food-note{

  margin-top:25px;

  padding:17px 19px;

  border-left:4px solid var(--pw-orange);

  border-radius:9px;

  background:var(--pw-cream);

}

.pw-page .pw-food-note strong{

  display:block;

  margin-bottom:5px;

  color:var(--pw-navy);

  font-size:13px;

}

.pw-page .pw-food-note p{

  margin:0;

  color:var(--pw-muted);

  font-size:11px;
  line-height:1.65;

}


/* =========================================================
   WOMEN ENTREPRENEURS
   ========================================================= */

.pw-page .pw-entrepreneurs{

  padding:85px 0;

  background:var(--pw-soft);

}

.pw-page .pw-section-container{

  width:min(1160px,calc(100% - 40px));

  margin:auto;

}

.pw-page .pw-section-intro{

  max-width:750px;

  margin:0 auto 40px;

  text-align:center;

}

.pw-page .pw-section-kicker{

  margin-bottom:9px;

  color:var(--pw-orange);

  font-size:11px;
  font-weight:700;

  letter-spacing:.13em;

  text-transform:uppercase;

}

.pw-page .pw-section-title{

  margin:0;

  color:var(--pw-navy);

  font-family:"Playfair Display",serif;

  font-size:clamp(30px,4vw,44px);

}

.pw-page .pw-section-text{

  margin:14px auto 0;

  color:var(--pw-muted);

  font-size:14px;

  line-height:1.8;

}

.pw-page .pw-entrepreneur-grid{

  display:grid;

  grid-template-columns:
    1fr 1.15fr;

  gap:25px;

  align-items:stretch;

}

.pw-page .pw-entrepreneur-box{

  padding:30px;

  border-radius:17px;

  background:#fff;

  border:1px solid var(--pw-border);

  box-shadow:
    0 10px 30px rgba(16,47,69,.06);

}

.pw-page .pw-entrepreneur-box.dark{

  background:var(--pw-navy);

}

.pw-page .pw-box-title{

  margin:0 0 13px;

  color:var(--pw-navy);

  font-family:"Playfair Display",serif;

  font-size:25px;

}

.pw-page .pw-entrepreneur-box.dark
.pw-box-title{

  color:#fff;

}

.pw-page .pw-box-text{

  margin:0;

  color:var(--pw-muted);

  font-size:13px;

  line-height:1.75;

}

.pw-page .pw-entrepreneur-box.dark
.pw-box-text{

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

}

.pw-page .pw-support-list{

  display:grid;

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

  gap:9px 18px;

  margin:20px 0 0;

  padding:0;

  list-style:none;

}

.pw-page .pw-support-list li{

  position:relative;

  padding-left:20px;

  color:var(--pw-text);

  font-size:12px;
  line-height:1.55;

}

.pw-page .pw-support-list li::before{

  content:"✓";

  position:absolute;

  left:0;

  color:var(--pw-orange);

  font-weight:700;

}

.pw-page .pw-entrepreneur-box.dark
.pw-support-list li{

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

}

.pw-page .pw-journey{

  display:flex;

  flex-wrap:wrap;

  gap:8px;

  margin-top:22px;

}

.pw-page .pw-journey-step{

  display:inline-flex;

  align-items:center;

  gap:7px;

  padding:8px 10px;

  border-radius:30px;

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

  color:#fff;

  font-size:10px;
  font-weight:700;

}

.pw-page .pw-journey-step i{

  color:var(--pw-gold);

}

.pw-page .pw-entrepreneur-button{

  display:inline-flex;

  align-items:center;

  gap:8px;

  margin-top:24px;

  padding:12px 17px;

  border-radius:7px;

  background:var(--pw-orange);

  color:#fff;

  text-decoration:none;

  font-size:12px;
  font-weight:700;

  transition:
    transform .25s ease,
    box-shadow .25s ease;

}

.pw-page .pw-entrepreneur-button:hover{

  transform:translateY(-3px);

  box-shadow:0 10px 22px rgba(216,137,59,.25);

}


/* =========================================================
   BUY TO EMPOWER
   ========================================================= */

.pw-page .pw-buy{

  padding:85px 0;

  background:#fff;

}

.pw-page .pw-buy-grid{

  display:grid;

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

  gap:40px;

  align-items:center;

}

.pw-page .pw-buy-copy{

  max-width:680px;

}

.pw-page .pw-buy-copy .pw-section-kicker{

  margin-bottom:10px;

}

.pw-page .pw-buy-copy h2{

  margin:0;

  color:var(--pw-navy);

  font-family:"Playfair Display",serif;

  font-size:clamp(32px,4vw,46px);

  line-height:1.12;

}

.pw-page .pw-buy-copy p{

  margin:17px 0 0;

  color:var(--pw-muted);

  font-size:14px;

  line-height:1.8;

}

.pw-page .pw-buy-actions{

  display:flex;

  flex-wrap:wrap;

  gap:10px;

  margin-top:24px;

}

.pw-page .pw-buy-button{

  display:inline-flex;

  align-items:center;

  gap:8px;

  padding:12px 16px;

  border-radius:7px;

  text-decoration:none;

  font-size:12px;
  font-weight:700;

  transition:
    transform .25s ease;

}

.pw-page .pw-buy-button:hover{

  transform:translateY(-3px);

}

.pw-page .pw-buy-button.orange{

  background:var(--pw-orange);
  color:#fff;

}

.pw-page .pw-buy-button.navy{

  background:var(--pw-navy);
  color:#fff;

}

.pw-page .pw-buy-button.outline{

  border:1px solid var(--pw-border);
  color:var(--pw-navy);
  background:#fff;

}

.pw-page .pw-buy-card{

  position:relative;

  padding:35px;

  overflow:hidden;

  border-radius:20px;

  background:
    linear-gradient(
      145deg,
      var(--pw-navy),
      var(--pw-blue)
    );

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

}

.pw-page .pw-buy-card::before{

  content:"";

  position:absolute;

  width:180px;
  height:180px;

  right:-70px;
  top:-70px;

  border-radius:50%;

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

}

.pw-page .pw-buy-card-icon{

  width:55px;
  height:55px;

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

  border-radius:50%;

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

  color:var(--pw-gold);

  font-size:22px;

}

.pw-page .pw-buy-card h3{

  margin:22px 0 8px;

  color:#fff;

  font-family:"Playfair Display",serif;

  font-size:27px;

}

.pw-page .pw-buy-card p{

  margin:0;

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

  font-size:13px;

  line-height:1.75;

}


/* =========================================================
   CORPORATE GIFTING
   ========================================================= */

.pw-page .pw-corporate{

  padding:85px 0;

  background:var(--pw-cream);

}

.pw-page .pw-corporate-grid{

  display:grid;

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

  gap:30px;

  align-items:start;

}

.pw-page .pw-corporate-copy h2{

  margin:0;

  color:var(--pw-navy);

  font-family:"Playfair Display",serif;

  font-size:clamp(31px,4vw,45px);

  line-height:1.15;

}

.pw-page .pw-corporate-copy p{

  margin:15px 0 0;

  color:var(--pw-muted);

  font-size:14px;

  line-height:1.8;

}

.pw-page .pw-suitable{

  margin-top:25px;

}

.pw-page .pw-mini-title{

  margin:0 0 12px;

  color:var(--pw-navy);

  font-size:14px;

  font-weight:700;

}

.pw-page .pw-chip-list{

  display:flex;

  flex-wrap:wrap;

  gap:7px;

}

.pw-page .pw-chip{

  padding:8px 10px;

  border-radius:30px;

  background:#fff;

  border:1px solid var(--pw-border);

  color:var(--pw-text);

  font-size:10px;
  font-weight:600;

}

.pw-page .pw-corporate-products{

  padding:28px;

  border-radius:17px;

  background:#fff;

  border:1px solid var(--pw-border);

  box-shadow:0 10px 30px rgba(16,47,69,.06);

}

.pw-page .pw-corporate-products h3{

  margin:0 0 18px;

  color:var(--pw-navy);

  font-family:"Playfair Display",serif;

  font-size:24px;

}

.pw-page .pw-corporate-product-grid{

  display:grid;

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

  gap:10px;

}

.pw-page .pw-corporate-product{

  display:flex;

  align-items:center;

  gap:9px;

  padding:10px;

  border-radius:8px;

  background:var(--pw-soft);

  color:var(--pw-text);

  font-size:11px;

  font-weight:600;

}

.pw-page .pw-corporate-product i{

  color:var(--pw-orange);

  font-size:11px;

}

.pw-page .pw-corporate-cta{

  margin-top:20px;

  padding:17px;

  border-radius:10px;

  background:var(--pw-navy);

}

.pw-page .pw-corporate-cta p{

  margin:0 0 10px;

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

  font-size:12px;

  line-height:1.6;

}

.pw-page .pw-corporate-cta a{

  display:inline-flex;

  align-items:center;

  gap:7px;

  color:var(--pw-gold);

  text-decoration:none;

  font-size:12px;
  font-weight:700;

}


/* =========================================================
   REVEAL
   ========================================================= */

.pw-page .pw-reveal{

  opacity:0;

  transform:translateY(18px);

  transition:
    opacity .65s ease,
    transform .65s ease;

}

.pw-page .pw-reveal.pw-visible{

  opacity:1;

  transform:translateY(0);

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1050px){

  .pw-page .pw-product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .pw-page .pw-catalog-container{
    grid-template-columns:240px minmax(0,1fr);
  }

}


@media(max-width:850px){

  .pw-page .pw-catalog-container{
    grid-template-columns:1fr;
  }

  .pw-page .pw-sidebar{
    position:static;
  }

  .pw-page .pw-category-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
  }

  .pw-page .pw-entrepreneur-grid,
  .pw-page .pw-buy-grid,
  .pw-page .pw-corporate-grid{
    grid-template-columns:1fr;
  }

}


@media(max-width:650px){

  .pw-page .pw-intro{
    padding:52px 0 42px;
  }

  .pw-page .pw-intro-inner{
    width:calc(100% - 28px);
  }

  .pw-page .pw-title{
    font-size:37px;
  }

  .pw-page .pw-intro-text{
    font-size:14px;
  }

  .pw-page .pw-empower-strip{
    width:calc(100% - 28px);

    margin-bottom:35px;

    padding:21px;

  }

  .pw-page .pw-empower-strip-icon{
    display:none;
  }

  .pw-page .pw-catalog-container,
  .pw-page .pw-section-container{
    width:calc(100% - 28px);
  }

  .pw-page .pw-product-grid{
    grid-template-columns:1fr;
  }

  .pw-page .pw-products-heading-row{
    align-items:center;
  }

  .pw-page .pw-products-heading{
    font-size:27px;
  }

  .pw-page .pw-support-list{
    grid-template-columns:1fr;
  }

  .pw-page .pw-corporate-product-grid{
    grid-template-columns:1fr;
  }

}


@media(max-width:480px){

  .pw-page .pw-category-list{
    grid-template-columns:1fr;
  }

  .pw-page .pw-intro-buttons{
    flex-direction:column;
  }

  .pw-page .pw-intro-button{
    justify-content:center;
  }

  .pw-page .pw-entrepreneur-box,
  .pw-page .pw-corporate-products{
    padding:22px;
  }

}

/* =========================================================
   PRODUCT PAGE
   ========================================================= */

.product-page{
  background:linear-gradient(
    180deg,
    #ffffff 0%,
    #fffaf6 100%
  );
}

.product-wrap{
  width:min(1180px,calc(100% - 40px));
  margin:auto;
}

.product-breadcrumb{
  padding:32px 0 20px;
  color:#78838a;
  font-size:14px;
}

.product-breadcrumb a{
  color:#e8752b;
  font-weight:600;
}


/* =========================================================
   PRODUCT MAIN
   ========================================================= */

.product-main{
  padding:20px 0 80px;
}

.product-layout{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:58px;
  align-items:start;
}


/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

.product-image-box{
  position:relative;
  border:1px solid #eadfd5;
  border-radius:24px;
  overflow:hidden;
  background:#f7f1eb;
  box-shadow:0 18px 50px rgba(61,39,22,.10);
  cursor:zoom-in;
}

.product-image-box img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  transition:transform .45s ease;
}

.product-image-box:hover img{
  transform:scale(1.025);
}

.product-zoom-hint{
  position:absolute;
  right:18px;
  bottom:18px;
  background:rgba(30,30,30,.78);
  color:#fff;
  border-radius:999px;
  padding:10px 14px;
  font-size:13px;
  display:flex;
  gap:8px;
  align-items:center;
}


/* =========================================================
   PRODUCT CONTENT
   ========================================================= */

.product-category{
  display:inline-flex;
  padding:8px 13px;
  border-radius:999px;
  background:#fff0e5;
  color:#c95d18;
  font-weight:700;
  font-size:13px;
  margin-bottom:16px;
}

.product-content h1{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(36px,5vw,58px);
  line-height:1.08;
  margin:0 0 18px;
  color:#243238;
}

.product-description{
  font-size:17px;
  line-height:1.65;
  color:#68757d;
  margin:0 0 26px;
  max-width:620px;
}

.product-note{
  border-left:4px solid #e8752b;
  background:#fff5ec;
  padding:18px 20px;
  border-radius:0 14px 14px 0;
  color:#5f554e;
  line-height:1.65;
  margin-bottom:28px;
}

.product-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.product-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:14px 20px;
  border-radius:10px;
  font-weight:700;
  border:1px solid #e8752b;
  transition:.2s;
}

.product-btn-primary{
  background:#e8752b;
  color:#fff;
}

.product-btn-primary:hover{
  background:#c95d18;
  color:#fff;
}

.product-btn-secondary{
  background:#fff;
  color:#c95d18;
}

.product-btn-secondary:hover{
  background:#fff3e9;
  color:#c95d18;
}


/* =========================================================
   RELATED PRODUCTS
   ========================================================= */

.product-related-section{
  padding:20px 0 80px;
}

.product-section-head{
  text-align:center;
  margin-bottom:30px;
}

.product-section-head h2{
  font-family:'Playfair Display',Georgia,serif;
  font-size:34px;
  margin:0 0 8px;
  color:#243238;
}

.product-section-head p{
  color:#68757d;
  margin:0;
}


/* =========================================================
   HORIZONTAL RELATED PRODUCT SCROLL
   ========================================================= */

.product-related{
  display:flex;
  gap:18px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:5px 4px 18px;
  scroll-behavior:smooth;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}


/* Scrollbar */

.product-related::-webkit-scrollbar{
  height:7px;
}

.product-related::-webkit-scrollbar-track{
  background:#f3e9df;
  border-radius:20px;
}

.product-related::-webkit-scrollbar-thumb{
  background:#e8752b;
  border-radius:20px;
}

.product-related::-webkit-scrollbar-thumb:hover{
  background:#c95d18;
}

.product-related{
  scrollbar-width:thin;
  scrollbar-color:#e8752b #f3e9df;
}


/* =========================================================
   RELATED PRODUCT CARD
   ========================================================= */

.product-card{
  flex:0 0 265px;
  width:265px;
  border:1px solid #eadfd5;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  transition:.25s;
  box-shadow:0 8px 25px rgba(50,35,20,.05);
  scroll-snap-align:start;
}

.product-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 35px rgba(50,35,20,.10);
}

.product-card img{
  display:block;
  width:100%;
  aspect-ratio:1.15;
  object-fit:cover;
}

.product-card-body{
  padding:15px;
}

.product-card-body h3{
  font-size:16px;
  margin:0 0 8px;
  color:#263238;
  line-height:1.35;
}

.product-card-body a{
  color:#c95d18;
  font-weight:700;
  font-size:13px;
  display:inline-flex;
  align-items:center;
  gap:6px;
}


/* =========================================================
   IMAGE POPUP
   ========================================================= */

.product-modal{
  position:fixed;
  inset:0;
  background:rgba(13,15,16,.90);
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:30px;
}

.product-modal.open{
  display:flex;
}

.product-modal-inner{
  position:relative;
  max-width:min(1100px,94vw);
  max-height:92vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.product-modal img{
  max-width:92vw;
  max-height:86vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:10px;
  box-shadow:0 20px 80px rgba(0,0,0,.45);
}

.product-modal-close{
  position:fixed;
  top:18px;
  right:22px;
  width:46px;
  height:46px;
  border:0;
  border-radius:50%;
  background:#fff;
  color:#222;
  font-size:22px;
  cursor:pointer;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
}

.product-modal-title{
  position:fixed;
  left:22px;
  bottom:18px;
  background:rgba(0,0,0,.62);
  color:#fff;
  padding:10px 15px;
  border-radius:10px;
  font-size:14px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:900px){

  .product-layout{
    grid-template-columns:1fr;
    gap:35px;
  }

  .product-card{
    flex-basis:250px;
    width:250px;
  }

}


@media(max-width:600px){

  .product-wrap{
    width:min(100% - 28px,1180px);
  }

  .product-main{
    padding-bottom:55px;
  }

  .product-content h1{
    font-size:40px;
  }

  .product-description{
    font-size:16px;
    line-height:1.6;
  }

  .product-note{
    font-size:14px;
    padding:16px 17px;
  }

  .product-actions{
    flex-direction:column;
  }

  .product-btn{
    width:100%;
  }

  .product-related{
    gap:12px;
    padding-left:2px;
    padding-right:2px;
  }

  .product-card{
    flex:0 0 220px;
    width:220px;
  }

  .product-card-body{
    padding:12px;
  }

  .product-card-body h3{
    font-size:14px;
  }

  .product-modal{
    padding:15px;
  }

  .product-modal img{
    max-width:96vw;
    max-height:80vh;
  }

  .product-modal-close{
    top:12px;
    right:12px;
  }

  .product-modal-title{
    left:12px;
    bottom:12px;
    font-size:13px;
  }

}
/* =========================================================
   PRODUCT ENQUIRY PAGE
   ========================================================= */

.product-enquiry-page{
  background:
    linear-gradient(
      180deg,
      #f8fbfd 0%,
      #ffffff 45%,
      #f8fafb 100%
    );
  padding:70px 0 90px;
}

.product-enquiry-container{
  width:min(1180px, calc(100% - 40px));
  margin:0 auto;
}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.enquiry-breadcrumb{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:28px;
  font-size:14px;
  color:#71808f;
}

.enquiry-breadcrumb a{
  color:#526575;
  text-decoration:none;
  transition:.2s ease;
}

.enquiry-breadcrumb a:hover{
  color:#d97824;
}

.enquiry-breadcrumb i{
  font-size:10px;
  color:#a4afb8;
}


/* =========================================================
   INTRO
   ========================================================= */

.enquiry-heading{
  max-width:760px;
  margin-bottom:42px;
}

.enquiry-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:13px;
  color:#d97824;
  font-size:13px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.enquiry-eyebrow i{
  font-size:14px;
}

.enquiry-heading h1{
  margin:0 0 14px;
  font-family:"Playfair Display", serif;
  font-size:clamp(36px, 5vw, 58px);
  line-height:1.08;
  color:#17344d;
}

.enquiry-heading p{
  margin:0;
  max-width:680px;
  color:#687784;
  font-size:17px;
  line-height:1.75;
}


/* =========================================================
   MAIN GRID
   ========================================================= */

.enquiry-grid{
  display:grid;
  grid-template-columns:minmax(300px,.82fr) minmax(420px,1.18fr);
  gap:32px;
  align-items:start;
}


/* =========================================================
   PRODUCT CARD
   ========================================================= */

.enquiry-product-card{
  position:sticky;
  top:30px;
  overflow:hidden;
  background:#fff;
  border:1px solid #e7edf1;
  border-radius:24px;
  box-shadow:0 18px 50px rgba(23,52,77,.08);
}

.enquiry-product-image{
  position:relative;
  height:330px;
  background:#eef3f5;
  overflow:hidden;
}

.enquiry-product-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .5s ease;
}

.enquiry-product-card:hover
.enquiry-product-image img{
  transform:scale(1.035);
}

.enquiry-product-category{
  position:absolute;
  left:20px;
  top:20px;
  padding:8px 13px;
  border-radius:30px;
  background:rgba(255,255,255,.94);
  color:#d97824;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
}

.enquiry-product-content{
  padding:26px 26px 28px;
}

.enquiry-product-content h2{
  margin:0 0 10px;
  color:#17344d;
  font-family:"Playfair Display", serif;
  font-size:28px;
  line-height:1.2;
}

.enquiry-product-content p{
  margin:0;
  color:#6d7b86;
  font-size:15px;
  line-height:1.7;
}

.enquiry-product-note{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-top:23px;
  padding:16px;
  border-radius:14px;
  background:#f8f4ed;
  color:#6d5b46;
  font-size:13px;
  line-height:1.6;
}

.enquiry-product-note i{
  margin-top:2px;
  color:#d97824;
}


/* =========================================================
   FORM CARD
   ========================================================= */

.enquiry-form-card{
  background:#fff;
  border:1px solid #e7edf1;
  border-radius:24px;
  padding:34px;
  box-shadow:0 18px 50px rgba(23,52,77,.08);
}

.enquiry-form-header{
  margin-bottom:27px;
}

.enquiry-form-header h2{
  margin:0 0 8px;
  color:#17344d;
  font-family:"Playfair Display", serif;
  font-size:30px;
}

.enquiry-form-header p{
  margin:0;
  color:#71808b;
  font-size:14px;
  line-height:1.65;
}


/* =========================================================
   FORM
   ========================================================= */

.enquiry-form{
  display:flex;
  flex-direction:column;
  gap:19px;
}

.enquiry-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:17px;
}

.enquiry-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.enquiry-field label{
  color:#243f53;
  font-size:14px;
  font-weight:700;
}

.enquiry-field label span{
  color:#d97824;
}

.enquiry-field input,
.enquiry-field textarea,
.enquiry-field select{
  width:100%;
  box-sizing:border-box;
  border:1px solid #dce5ea;
  border-radius:12px;
  background:#fbfcfd;
  color:#243f53;
  font-family:"DM Sans", sans-serif;
  font-size:15px;
  outline:none;
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.enquiry-field input,
.enquiry-field select{
  min-height:52px;
  padding:0 15px;
}

.enquiry-field textarea{
  min-height:135px;
  padding:14px 15px;
  resize:vertical;
}

.enquiry-field input::placeholder,
.enquiry-field textarea::placeholder{
  color:#a1adb6;
}

.enquiry-field input:focus,
.enquiry-field textarea:focus,
.enquiry-field select:focus{
  border-color:#d97824;
  background:#fff;
  box-shadow:0 0 0 4px rgba(217,120,36,.09);
}


/* =========================================================
   SELECTED PRODUCT FIELD
   ========================================================= */

.selected-product-field{
  padding:15px 16px;
  border-radius:13px;
  background:#f5f8fa;
  border:1px solid #e3ebef;
}

.selected-product-label{
  display:block;
  margin-bottom:6px;
  color:#788792;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.selected-product-name{
  display:flex;
  align-items:center;
  gap:9px;
  color:#17344d;
  font-size:15px;
  font-weight:700;
}

.selected-product-name i{
  color:#d97824;
}


/* =========================================================
   CONSENT
   ========================================================= */

.enquiry-consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:#71808b;
  font-size:13px;
  line-height:1.55;
}

.enquiry-consent input{
  width:17px;
  height:17px;
  flex:0 0 17px;
  margin:2px 0 0;
  accent-color:#d97824;
}

.enquiry-consent label{
  cursor:pointer;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.enquiry-actions{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:3px;
}

.enquiry-submit{
  min-height:53px;
  padding:0 24px;
  border:0;
  border-radius:12px;
  background:#d97824;
  color:#fff;
  font-family:"DM Sans", sans-serif;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:
    transform .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.enquiry-submit:hover{
  background:#c66818;
  transform:translateY(-2px);
  box-shadow:0 12px 25px rgba(217,120,36,.22);
}

.enquiry-submit:active{
  transform:translateY(0);
}

.enquiry-whatsapp{
  min-height:53px;
  padding:0 20px;
  border:1px solid #dce5ea;
  border-radius:12px;
  background:#fff;
  color:#17344d;
  text-decoration:none;
  font-size:14px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  transition:.2s ease;
}

.enquiry-whatsapp i{
  color:#25d366;
  font-size:18px;
}

.enquiry-whatsapp:hover{
  border-color:#25d366;
  background:#f7fff9;
}


/* =========================================================
   FORM NOTE
   ========================================================= */

.enquiry-form-note{
  margin:0;
  color:#8a969f;
  font-size:12px;
  line-height:1.55;
}


/* =========================================================
   SUCCESS MESSAGE
   ========================================================= */

.enquiry-success{
  display:none;
  margin-top:20px;
  padding:18px;
  border-radius:14px;
  border:1px solid #cfe9d8;
  background:#f1fbf4;
  color:#28613a;
}

.enquiry-success.active{
  display:block;
}

.enquiry-success-inner{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.enquiry-success i{
  margin-top:2px;
  font-size:20px;
  color:#2d9b50;
}

.enquiry-success strong{
  display:block;
  margin-bottom:4px;
  font-size:15px;
}

.enquiry-success span{
  display:block;
  font-size:13px;
  line-height:1.55;
}


/* =========================================================
   ERROR / PRODUCT NOT FOUND
   ========================================================= */

.product-not-found{
  display:none;
  padding:22px;
  border-radius:16px;
  background:#fff7f1;
  border:1px solid #f2d8c4;
  color:#744a2e;
}

.product-not-found.active{
  display:block;
}

.product-not-found strong{
  display:block;
  margin-bottom:5px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:900px){

  .product-enquiry-page{
    padding:55px 0 70px;
  }

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

  .enquiry-product-card{
    position:relative;
    top:auto;
  }

}


@media(max-width:650px){

  .product-enquiry-container{
    width:min(100% - 28px, 1180px);
  }

  .enquiry-heading{
    margin-bottom:30px;
  }

  .enquiry-heading h1{
    font-size:38px;
  }

  .enquiry-heading p{
    font-size:15px;
  }

  .enquiry-form-card{
    padding:23px 19px;
    border-radius:19px;
  }

  .enquiry-product-card{
    border-radius:19px;
  }

  .enquiry-product-image{
    height:260px;
  }

  .enquiry-product-content{
    padding:22px;
  }

  .enquiry-product-content h2{
    font-size:25px;
  }

  .enquiry-row{
    grid-template-columns:1fr;
    gap:19px;
  }

  .enquiry-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .enquiry-submit,
  .enquiry-whatsapp{
    width:100%;
  }

}

/* =========================================================
   SUCCESS PAGE
   ========================================================= */

.success-page{
  min-height:600px;
  padding:80px 0 100px;
  background:
    linear-gradient(
      180deg,
      #f8fbfd 0%,
      #ffffff 55%,
      #f8fafb 100%
    );
  display:flex;
  align-items:center;
}

.success-container{
  width:min(900px, calc(100% - 40px));
  margin:0 auto;
}


/* =========================================================
   SUCCESS CARD
   ========================================================= */

.success-card{
  position:relative;
  overflow:hidden;
  text-align:center;
  background:#fff;
  border:1px solid #e5edf1;
  border-radius:28px;
  padding:55px 45px 50px;
  box-shadow:0 22px 60px rgba(23,52,77,.09);
}

.success-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:5px;
  background:#d97824;
}


/* =========================================================
   ICON
   ========================================================= */

.success-icon{
  width:82px;
  height:82px;
  margin:0 auto 25px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#effaf3;
  border:8px solid #f5fcf7;
}

.success-icon i{
  color:#2d9b50;
  font-size:38px;
}


/* =========================================================
   CONTENT
   ========================================================= */

.success-card .eyebrow{
  margin-bottom:12px;
  color:#d97824;
  font-size:13px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.success-card h1{
  margin:0 0 15px;
  color:#17344d;
  font-family:"Playfair Display", serif;
  font-size:clamp(34px, 5vw, 50px);
  line-height:1.12;
}

.success-card > p{
  max-width:650px;
  margin:0 auto;
  color:#687784;
  font-size:16px;
  line-height:1.75;
}


/* =========================================================
   PRODUCT BOX
   ========================================================= */

.success-product{
  max-width:540px;
  margin:30px auto 0;
  padding:17px 20px;
  border:1px solid #e4ebef;
  border-radius:15px;
  background:#f8fafb;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.success-product i{
  color:#d97824;
}

.success-product span{
  color:#17344d;
  font-size:15px;
  font-weight:700;
}


/* =========================================================
   NEXT STEPS
   ========================================================= */

.success-next{
  max-width:620px;
  margin:27px auto 0;
  padding:20px;
  border-radius:16px;
  background:#f8f4ed;
  text-align:left;
}

.success-next h3{
  margin:0 0 8px;
  color:#17344d;
  font-size:16px;
}

.success-next p{
  margin:0;
  color:#6e7b84;
  font-size:13px;
  line-height:1.65;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.success-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:32px;
}

.success-action{
  min-height:51px;
  padding:0 21px;
  border-radius:11px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  text-decoration:none;
  font-size:14px;
  font-weight:700;
  transition:.2s ease;
}

.success-action-primary{
  background:#d97824;
  color:#fff;
}

.success-action-primary:hover{
  background:#c66818;
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(217,120,36,.2);
}

.success-action-secondary{
  background:#fff;
  color:#17344d;
  border:1px solid #dce5ea;
}

.success-action-secondary:hover{
  border-color:#17344d;
  transform:translateY(-2px);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:600px){

  .success-page{
    padding:55px 0 70px;
  }

  .success-container{
    width:min(100% - 28px, 900px);
  }

  .success-card{
    padding:42px 21px 38px;
    border-radius:21px;
  }

  .success-icon{
    width:72px;
    height:72px;
  }

  .success-icon i{
    font-size:32px;
  }

  .success-card h1{
    font-size:36px;
  }

  .success-card > p{
    font-size:15px;
  }

  .success-actions{
    flex-direction:column;
  }

  .success-action{
    width:100%;
  }

}
```css
/* =========================================================
   BLESSINGS NGO
   IMPACT & STORIES PAGE
   Scoped only to #impact-stories
   ========================================================= */

#impact-stories{
  --is-navy:#102f45;
  --is-blue:#1f506c;
  --is-orange:#d8893b;
  --is-gold:#e8b76b;
  --is-cream:#f8f4ed;
  --is-soft:#f2f6f4;
  --is-text:#263746;
  --is-muted:#6d7a83;
  --is-white:#ffffff;
  --is-border:rgba(16,47,69,.10);
  --is-shadow:0 18px 45px rgba(16,47,69,.09);

  width:100%;
  overflow:hidden;
  background:#fff;
  color:var(--is-text);
}

#impact-stories *,
#impact-stories *::before,
#impact-stories *::after{
  box-sizing:border-box;
}


/* =========================================================
   COMMON
   ========================================================= */

#impact-stories .is-container{
  width:min(1160px,calc(100% - 40px));
  margin:0 auto;
}

#impact-stories .is-section{
  padding:90px 0;
}

#impact-stories .is-section-soft{
  background:var(--is-soft);
}

#impact-stories .is-section-cream{
  background:var(--is-cream);
}

#impact-stories .is-kicker{
  margin:0 0 10px;
  color:var(--is-orange);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

#impact-stories .is-section-title{
  margin:0;
  color:var(--is-navy);
  font-family:"Playfair Display",serif;
  font-size:clamp(32px,4vw,48px);
  line-height:1.12;
}

#impact-stories .is-section-intro{
  max-width:760px;
  margin:14px auto 0;
  color:var(--is-muted);
  font-size:14px;
  line-height:1.85;
}


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

#impact-stories .is-hero{
  position:relative;
  padding:82px 0 75px;
  background:
    radial-gradient(
      circle at 12% 20%,
      rgba(232,183,107,.18),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(31,80,108,.08),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      var(--is-cream),
      #fff
    );
}

#impact-stories .is-hero-inner{
  max-width:900px;
  margin:auto;
  text-align:center;
}

#impact-stories .is-hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  color:var(--is-orange);
  font-size:12px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
}

#impact-stories .is-hero-kicker::before,
#impact-stories .is-hero-kicker::after{
  content:"";
  width:30px;
  height:1px;
  background:var(--is-orange);
}

#impact-stories .is-hero-title{
  margin:0;
  color:var(--is-navy);
  font-family:"Playfair Display",serif;
  font-size:clamp(40px,6vw,64px);
  line-height:1.05;
}

#impact-stories .is-hero-text{
  max-width:780px;
  margin:21px auto 0;
  color:var(--is-muted);
  font-size:16px;
  line-height:1.85;
}

#impact-stories .is-hero-buttons{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:11px;
  margin-top:28px;
}

#impact-stories .is-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 18px;
  border-radius:7px;
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

#impact-stories .is-button:hover{
  transform:translateY(-3px);
}

#impact-stories .is-button-navy{
  background:var(--is-navy);
  color:#fff;
}

#impact-stories .is-button-orange{
  background:var(--is-orange);
  color:#fff;
}

#impact-stories .is-button-outline{
  background:#fff;
  border:1px solid var(--is-border);
  color:var(--is-navy);
}


/* =========================================================
   IMPACT DASHBOARD
   ========================================================= */

#impact-stories .is-impact{
  position:relative;
  margin-top:-10px;
  padding:0 0 90px;
  background:#fff;
}

#impact-stories .is-impact-header{
  max-width:760px;
  margin:0 auto 38px;
  text-align:center;
}

#impact-stories .is-impact-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

#impact-stories .is-impact-card{
  position:relative;
  padding:28px 22px;
  overflow:hidden;
  border:1px solid var(--is-border);
  border-radius:16px;
  background:#fff;
  box-shadow:0 10px 30px rgba(16,47,69,.06);
}

#impact-stories .is-impact-card::after{
  content:"";
  position:absolute;
  right:-35px;
  bottom:-45px;
  width:110px;
  height:110px;
  border-radius:50%;
  background:rgba(232,183,107,.10);
}

#impact-stories .is-impact-number{
  position:relative;
  z-index:1;
  margin:0;
  color:var(--is-navy);
  font-family:"Playfair Display",serif;
  font-size:42px;
  line-height:1;
}

#impact-stories .is-impact-label{
  position:relative;
  z-index:1;
  margin:10px 0 0;
  color:var(--is-muted);
  font-size:12px;
  font-weight:600;
  line-height:1.55;
}


/* =========================================================
   IMPACT APPROACH
   ========================================================= */

#impact-stories .is-approach{
  padding:90px 0;
  background:var(--is-navy);
}

#impact-stories .is-approach-inner{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:55px;
  align-items:center;
}

#impact-stories .is-approach .is-kicker{
  color:var(--is-gold);
}

#impact-stories .is-approach .is-section-title{
  color:#fff;
}

#impact-stories .is-approach-copy{
  color:rgba(255,255,255,.73);
  font-size:14px;
  line-height:1.85;
}

#impact-stories .is-approach-copy p{
  margin:18px 0 0;
}

#impact-stories .is-approach-cycle{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

#impact-stories .is-cycle-item{
  min-height:105px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:15px 10px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:13px;
  background:rgba(255,255,255,.055);
  color:#fff;
  text-align:center;
}

#impact-stories .is-cycle-item i{
  color:var(--is-gold);
  font-size:19px;
}

#impact-stories .is-cycle-item span{
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
}


/* =========================================================
   SUCCESS STORIES INTRO
   ========================================================= */

#impact-stories .is-stories{
  padding:90px 0;
  background:#fff;
}

#impact-stories .is-stories-heading{
  max-width:800px;
  margin:0 auto 48px;
  text-align:center;
}


/* =========================================================
   STORY CARDS
   ========================================================= */

#impact-stories .is-story-list{
  display:grid;
  gap:24px;
}

#impact-stories .is-story{
  display:grid;
  grid-template-columns:90px minmax(0,1fr);
  gap:25px;
  padding:30px;
  border:1px solid var(--is-border);
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 30px rgba(16,47,69,.055);
}

#impact-stories .is-story-number{
  width:68px;
  height:68px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--is-navy);
  color:var(--is-gold);
  font-family:"Playfair Display",serif;
  font-size:23px;
}

#impact-stories .is-story-title{
  margin:0;
  color:var(--is-navy);
  font-family:"Playfair Display",serif;
  font-size:27px;
  line-height:1.25;
}

#impact-stories .is-story-intro{
  margin:10px 0 0;
  color:var(--is-muted);
  font-size:13px;
  line-height:1.75;
}

#impact-stories .is-story-sections{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:22px;
}

#impact-stories .is-story-part{
  padding:17px;
  border-radius:11px;
  background:var(--is-soft);
}

#impact-stories .is-story-part.impact{
  background:var(--is-cream);
}

#impact-stories .is-story-part h4{
  margin:0 0 7px;
  color:var(--is-orange);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

#impact-stories .is-story-part p{
  margin:0;
  color:var(--is-text);
  font-size:12px;
  line-height:1.75;
}


/* =========================================================
   STORY QUOTE
   ========================================================= */

#impact-stories .is-story-highlight{
  margin-top:20px;
  padding:17px 20px;
  border-left:4px solid var(--is-orange);
  border-radius:7px;
  background:#fff8ef;
}

#impact-stories .is-story-highlight p{
  margin:0;
  color:var(--is-navy);
  font-family:"Playfair Display",serif;
  font-size:15px;
  line-height:1.65;
}


/* =========================================================
   LARGER STORY
   ========================================================= */

#impact-stories .is-larger-story{
  padding:90px 0;
  background:var(--is-soft);
}

#impact-stories .is-larger-inner{
  max-width:900px;
  margin:auto;
  text-align:center;
}

#impact-stories .is-larger-inner .is-section-title{
  font-size:clamp(31px,4vw,45px);
}

#impact-stories .is-larger-text{
  margin:18px auto 0;
  color:var(--is-muted);
  font-size:14px;
  line-height:1.85;
}

#impact-stories .is-support-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 18px;
  margin:30px auto 0;
  max-width:760px;
  text-align:left;
}

#impact-stories .is-support-item{
  position:relative;
  padding-left:22px;
  color:var(--is-text);
  font-size:12px;
  line-height:1.6;
}

#impact-stories .is-support-item::before{
  content:"✓";
  position:absolute;
  left:0;
  color:var(--is-orange);
  font-weight:700;
}


/* =========================================================
   FROM SUPPORT TO SELF-RELIANCE
   ========================================================= */

#impact-stories .is-self-reliance{
  padding:90px 0;
  background:#fff;
}

#impact-stories .is-self-reliance-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
}

#impact-stories .is-self-copy p{
  margin:16px 0 0;
  color:var(--is-muted);
  font-size:14px;
  line-height:1.85;
}

#impact-stories .is-path{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

#impact-stories .is-path-step{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:10px 13px;
  border-radius:30px;
  background:var(--is-soft);
  color:var(--is-navy);
  font-size:11px;
  font-weight:700;
}

#impact-stories .is-path-step i{
  color:var(--is-orange);
}

#impact-stories .is-path-note{
  margin-top:20px;
  padding:22px;
  border-radius:14px;
  background:var(--is-navy);
  color:rgba(255,255,255,.78);
  font-family:"Playfair Display",serif;
  font-size:17px;
  line-height:1.65;
}


/* =========================================================
   IMPACT AREAS
   ========================================================= */

#impact-stories .is-areas{
  padding:90px 0;
  background:var(--is-cream);
}

#impact-stories .is-areas-header{
  max-width:750px;
  margin:0 auto 40px;
  text-align:center;
}

#impact-stories .is-area-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:15px;
}

#impact-stories .is-area{
  padding:24px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--is-border);
}

#impact-stories .is-area-icon{
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:15px;
  border-radius:50%;
  background:var(--is-navy);
  color:var(--is-gold);
}

#impact-stories .is-area h3{
  margin:0 0 7px;
  color:var(--is-navy);
  font-size:16px;
}

#impact-stories .is-area p{
  margin:0;
  color:var(--is-muted);
  font-size:12px;
  line-height:1.7;
}


/* =========================================================
   CTA
   ========================================================= */

#impact-stories .is-final-cta{
  padding:80px 0;
  background:var(--is-navy);
}

#impact-stories .is-final-cta-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

#impact-stories .is-final-cta-copy{
  max-width:700px;
}

#impact-stories .is-final-cta-copy .is-kicker{
  color:var(--is-gold);
}

#impact-stories .is-final-cta-copy h2{
  margin:0;
  color:#fff;
  font-family:"Playfair Display",serif;
  font-size:clamp(31px,4vw,46px);
  line-height:1.15;
}

#impact-stories .is-final-cta-copy p{
  margin:14px 0 0;
  color:rgba(255,255,255,.72);
  font-size:14px;
  line-height:1.75;
}

#impact-stories .is-final-cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  flex:0 0 auto;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:950px){

  #impact-stories .is-impact-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  #impact-stories .is-approach-inner{
    grid-template-columns:1fr;
  }

  #impact-stories .is-self-reliance-inner{
    grid-template-columns:1fr;
  }

  #impact-stories .is-area-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

}


@media(max-width:700px){

  #impact-stories .is-container{
    width:calc(100% - 28px);
  }

  #impact-stories .is-section,
  #impact-stories .is-stories,
  #impact-stories .is-larger-story,
  #impact-stories .is-self-reliance,
  #impact-stories .is-areas{
    padding:65px 0;
  }

  #impact-stories .is-hero{
    padding:55px 0 60px;
  }

  #impact-stories .is-hero-title{
    font-size:40px;
  }

  #impact-stories .is-hero-text{
    font-size:14px;
  }

  #impact-stories .is-impact{
    padding-bottom:65px;
  }

  #impact-stories .is-impact-grid{
    grid-template-columns:1fr;
  }

  #impact-stories .is-approach{
    padding:65px 0;
  }

  #impact-stories .is-approach-cycle{
    grid-template-columns:repeat(2,1fr);
  }

  #impact-stories .is-story{
    grid-template-columns:1fr;
    padding:23px;
  }

  #impact-stories .is-story-number{
    width:55px;
    height:55px;
    font-size:19px;
  }

  #impact-stories .is-story-title{
    font-size:23px;
  }

  #impact-stories .is-story-sections{
    grid-template-columns:1fr;
  }

  #impact-stories .is-support-grid{
    grid-template-columns:1fr;
  }

  #impact-stories .is-area-grid{
    grid-template-columns:1fr;
  }

  #impact-stories .is-final-cta{
    padding:65px 0;
  }

  #impact-stories .is-final-cta-inner{
    flex-direction:column;
    align-items:flex-start;
  }

}


@media(max-width:480px){

  #impact-stories .is-hero-buttons{
    flex-direction:column;
  }

  #impact-stories .is-button{
    width:100%;
  }

  #impact-stories .is-approach-cycle{
    grid-template-columns:1fr;
  }

  #impact-stories .is-impact-card{
    padding:23px 20px;
  }

  #impact-stories .is-final-cta-actions{
    width:100%;
    flex-direction:column;
  }

  #impact-stories .is-final-cta-actions .is-button{
    width:100%;
  }

}
```css
/* ============================================================
   BLESSINGS NGO
   IMPACT & STORIES PAGE
   File: css/impact-stories.css

   IMPORTANT:
   - All page styles are scoped to #impact-stories
   - Does NOT modify the existing .cta
   - Does NOT modify footer
   - Does NOT modify header/topbar/navigation
   ============================================================ */


/* ============================================================
   PAGE VARIABLES
   ============================================================ */

#impact-stories{
    --is-blue:#005b91;
    --is-blue-dark:#003d68;
    --is-blue-deep:#002e51;
    --is-sky:#eaf7fb;
    --is-orange:#f58220;
    --is-orange-dark:#e96d0b;
    --is-pink:#d83b79;
    --is-green:#42a64b;
    --is-teal:#159b9b;
    --is-purple:#7745a8;
    --is-yellow:#f4c542;

    --is-text:#263746;
    --is-muted:#667786;
    --is-light:#f7fafc;
    --is-border:#e2eaf0;
    --is-white:#ffffff;

    --is-shadow:0 12px 35px rgba(0,61,104,.09);
    --is-shadow-hover:0 18px 45px rgba(0,61,104,.15);

    width:100%;
    overflow:hidden;
}


/* ============================================================
   GLOBAL PAGE RESET
   Scoped ONLY inside #impact-stories
   ============================================================ */

#impact-stories *,
#impact-stories *::before,
#impact-stories *::after{
    box-sizing:border-box;
}

#impact-stories img{
    max-width:100%;
    height:auto;
}

#impact-stories a{
    text-decoration:none;
}

#impact-stories p{
    margin-top:0;
}

#impact-stories h1,
#impact-stories h2,
#impact-stories h3,
#impact-stories h4{
    margin-top:0;
}


/* ============================================================
   COMMON INNER CONTAINER
   ============================================================ */

#impact-stories .is-container{
    width:min(1180px, calc(100% - 40px));
    margin:0 auto;
}


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

#impact-stories .is-hero{
    position:relative;
    padding:100px 0 95px;
    background:
        radial-gradient(circle at 85% 20%, rgba(245,130,32,.20), transparent 30%),
        radial-gradient(circle at 15% 80%, rgba(21,155,155,.18), transparent 28%),
        linear-gradient(135deg, var(--is-blue-deep), var(--is-blue));
    color:var(--is-white);
    isolation:isolate;
}

#impact-stories .is-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.05) 25%,
            transparent 25%
        );
    opacity:.45;
    pointer-events:none;
}

#impact-stories .is-hero::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:45px;
    background:var(--is-white);
    clip-path:ellipse(70% 100% at 50% 100%);
    pointer-events:none;
}

#impact-stories .is-hero-inner{
    position:relative;
    z-index:2;
    max-width:900px;
    margin:0 auto;
    text-align:center;
}

#impact-stories .is-eyebrow{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-bottom:18px;
    padding:8px 17px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:50px;
    background:rgba(255,255,255,.09);
    color:#fff;
    font-size:13px;
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

#impact-stories .is-eyebrow i{
    color:var(--is-orange);
}

#impact-stories .is-hero h1{
    margin-bottom:20px;
    color:#fff;
    font-size:clamp(38px, 5vw, 64px);
    line-height:1.08;
    font-weight:800;
    letter-spacing:-1.5px;
}

#impact-stories .is-hero h1 span{
    color:#ffd29d;
}

#impact-stories .is-hero-text{
    max-width:760px;
    margin:0 auto;
    color:rgba(255,255,255,.88);
    font-size:18px;
    line-height:1.8;
}


/* ============================================================
   SECTION COMMON
   ============================================================ */

#impact-stories .is-section{
    padding:85px 0;
}

#impact-stories .is-section.is-soft{
    background:var(--is-light);
}

#impact-stories .is-section-heading{
    max-width:780px;
    margin:0 auto 48px;
    text-align:center;
}

#impact-stories .is-section-heading .is-label{
    display:block;
    margin-bottom:10px;
    color:var(--is-orange);
    font-size:13px;
    font-weight:800;
    letter-spacing:1.6px;
    text-transform:uppercase;
}

#impact-stories .is-section-heading h2{
    margin-bottom:16px;
    color:var(--is-blue-dark);
    font-size:clamp(30px,4vw,44px);
    line-height:1.18;
    font-weight:800;
}

#impact-stories .is-section-heading p{
    margin:0;
    color:var(--is-muted);
    font-size:17px;
    line-height:1.8;
}


/* ============================================================
   INTRO
   ============================================================ */

#impact-stories .is-intro{
    padding:70px 0 35px;
    background:#fff;
}

#impact-stories .is-intro-box{
    max-width:900px;
    margin:0 auto;
    text-align:center;
}

#impact-stories .is-intro-box p{
    margin:0 0 18px;
    color:var(--is-text);
    font-size:17px;
    line-height:1.85;
}

#impact-stories .is-intro-box p:last-child{
    margin-bottom:0;
}

#impact-stories .is-intro-highlight{
    margin-top:28px;
    padding:22px 25px;
    border-left:4px solid var(--is-orange);
    border-radius:10px;
    background:var(--is-sky);
    color:var(--is-blue-dark);
    font-size:18px;
    font-weight:700;
    line-height:1.7;
}


/* ============================================================
   IMPACT DASHBOARD
   ============================================================ */

#impact-stories .is-impact{
    padding:75px 0 90px;
    background:#fff;
}

#impact-stories .is-impact-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

#impact-stories .is-impact-card{
    position:relative;
    min-height:185px;
    padding:30px 27px;
    overflow:hidden;
    border:1px solid var(--is-border);
    border-radius:18px;
    background:#fff;
    box-shadow:var(--is-shadow);
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

#impact-stories .is-impact-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:var(--is-blue);
}

#impact-stories .is-impact-card:nth-child(2)::before{
    background:var(--is-green);
}

#impact-stories .is-impact-card:nth-child(3)::before{
    background:var(--is-orange);
}

#impact-stories .is-impact-card:nth-child(4)::before{
    background:var(--is-purple);
}

#impact-stories .is-impact-card:nth-child(5)::before{
    background:var(--is-pink);
}

#impact-stories .is-impact-card:nth-child(6)::before{
    background:var(--is-teal);
}

#impact-stories .is-impact-card:hover{
    transform:translateY(-5px);
    box-shadow:var(--is-shadow-hover);
    border-color:#cddce6;
}

#impact-stories .is-impact-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:50px;
    height:50px;
    margin-bottom:18px;
    border-radius:14px;
    background:var(--is-sky);
    color:var(--is-blue);
    font-size:21px;
}

#impact-stories .is-impact-number{
    margin-bottom:7px;
    color:var(--is-blue-dark);
    font-size:39px;
    line-height:1;
    font-weight:850;
    letter-spacing:-1px;
}

#impact-stories .is-impact-label{
    color:var(--is-muted);
    font-size:15px;
    line-height:1.55;
    font-weight:600;
}


/* ============================================================
   IMPACT NOTE
   ============================================================ */

#impact-stories .is-impact-note{
    margin:25px auto 0;
    max-width:850px;
    color:#7a8994;
    text-align:center;
    font-size:13px;
    line-height:1.6;
}


/* ============================================================
   IMPACT CYCLE
   ============================================================ */

#impact-stories .is-cycle{
    padding:80px 0;
    background:var(--is-sky);
}

#impact-stories .is-cycle-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:12px;
}

#impact-stories .is-cycle-item{
    position:relative;
    padding:25px 14px;
    border-radius:16px;
    background:#fff;
    border:1px solid rgba(0,91,145,.10);
    text-align:center;
    box-shadow:0 8px 25px rgba(0,61,104,.06);
}

#impact-stories .is-cycle-number{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    margin:0 auto 13px;
    border-radius:50%;
    background:var(--is-blue);
    color:#fff;
    font-size:14px;
    font-weight:800;
}

#impact-stories .is-cycle-item:nth-child(2) .is-cycle-number{
    background:var(--is-orange);
}

#impact-stories .is-cycle-item:nth-child(3) .is-cycle-number{
    background:var(--is-green);
}

#impact-stories .is-cycle-item:nth-child(4) .is-cycle-number{
    background:var(--is-purple);
}

#impact-stories .is-cycle-item:nth-child(5) .is-cycle-number{
    background:var(--is-teal);
}

#impact-stories .is-cycle-item:nth-child(6) .is-cycle-number{
    background:var(--is-pink);
}

#impact-stories .is-cycle-item strong{
    display:block;
    color:var(--is-blue-dark);
    font-size:14px;
    letter-spacing:.7px;
}

#impact-stories .is-cycle-arrow{
    position:absolute;
    top:50%;
    right:-12px;
    z-index:3;
    transform:translateY(-50%);
    color:var(--is-blue);
    font-size:17px;
}


/* ============================================================
   SUCCESS STORIES
   ============================================================ */

#impact-stories .is-stories{
    padding:90px 0;
    background:#fff;
}

#impact-stories .is-stories-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
}

#impact-stories .is-story-card{
    position:relative;
    display:flex;
    flex-direction:column;
    padding:31px;
    border:1px solid var(--is-border);
    border-radius:20px;
    background:#fff;
    box-shadow:var(--is-shadow);
    overflow:hidden;
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

#impact-stories .is-story-card:hover{
    transform:translateY(-5px);
    box-shadow:var(--is-shadow-hover);
}

#impact-stories .is-story-number{
    position:absolute;
    top:22px;
    right:25px;
    color:#eaf1f5;
    font-size:42px;
    font-weight:900;
    line-height:1;
}

#impact-stories .is-story-tag{
    display:inline-flex;
    align-items:center;
    align-self:flex-start;
    margin-bottom:16px;
    padding:7px 12px;
    border-radius:30px;
    background:var(--is-sky);
    color:var(--is-blue);
    font-size:11px;
    font-weight:800;
    letter-spacing:.8px;
    text-transform:uppercase;
}

#impact-stories .is-story-card h3{
    position:relative;
    z-index:2;
    margin-bottom:14px;
    padding-right:45px;
    color:var(--is-blue-dark);
    font-size:23px;
    line-height:1.3;
}

#impact-stories .is-story-beginning{
    margin-bottom:22px;
    color:var(--is-muted);
    font-size:15px;
    line-height:1.75;
}

#impact-stories .is-story-detail{
    margin-bottom:17px;
}

#impact-stories .is-story-detail:last-of-type{
    margin-bottom:22px;
}

#impact-stories .is-story-detail strong{
    display:block;
    margin-bottom:5px;
    color:var(--is-blue-dark);
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.6px;
}

#impact-stories .is-story-detail p{
    margin:0;
    color:var(--is-text);
    font-size:14px;
    line-height:1.7;
}

#impact-stories .is-story-quote{
    margin-top:auto;
    padding:17px 18px;
    border-radius:12px;
    background:#f7fafc;
    border-left:4px solid var(--is-orange);
    color:var(--is-blue-dark);
    font-size:14px;
    line-height:1.65;
    font-style:italic;
    font-weight:600;
}


/* ============================================================
   STORY CARD ACCENT COLORS
   ============================================================ */

#impact-stories .is-story-card:nth-child(2) .is-story-tag{
    background:#fff3e8;
    color:var(--is-orange-dark);
}

#impact-stories .is-story-card:nth-child(3) .is-story-tag{
    background:#edf8ee;
    color:#378b3e;
}

#impact-stories .is-story-card:nth-child(4) .is-story-tag{
    background:#f7effb;
    color:var(--is-purple);
}

#impact-stories .is-story-card:nth-child(5) .is-story-tag{
    background:#fff0f5;
    color:#bd2d66;
}

#impact-stories .is-story-card:nth-child(6) .is-story-tag{
    background:#eaf8f8;
    color:#118181;
}

#impact-stories .is-story-card:nth-child(7) .is-story-tag{
    background:#fff8dc;
    color:#9b7a00;
}


/* ============================================================
   LARGER STORY / JOURNEY
   ============================================================ */

#impact-stories .is-journey{
    padding:90px 0;
    background:var(--is-light);
}

#impact-stories .is-journey-layout{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:50px;
    align-items:start;
}

#impact-stories .is-journey-intro{
    position:sticky;
    top:110px;
}

#impact-stories .is-journey-intro .is-label{
    display:block;
    margin-bottom:10px;
    color:var(--is-orange);
    font-size:13px;
    font-weight:800;
    letter-spacing:1.4px;
    text-transform:uppercase;
}

#impact-stories .is-journey-intro h2{
    margin-bottom:18px;
    color:var(--is-blue-dark);
    font-size:clamp(30px,4vw,43px);
    line-height:1.2;
}

#impact-stories .is-journey-intro p{
    color:var(--is-muted);
    font-size:16px;
    line-height:1.8;
}

#impact-stories .is-journey-content{
    padding:35px;
    border-radius:20px;
    background:#fff;
    border:1px solid var(--is-border);
    box-shadow:var(--is-shadow);
}

#impact-stories .is-journey-content > p{
    margin-bottom:18px;
    color:var(--is-text);
    font-size:15px;
    line-height:1.8;
}

#impact-stories .is-support-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:11px 20px;
    margin:25px 0 30px;
    padding:0;
    list-style:none;
}

#impact-stories .is-support-list li{
    position:relative;
    padding-left:24px;
    color:var(--is-text);
    font-size:14px;
    line-height:1.6;
}

#impact-stories .is-support-list li::before{
    content:"\f00c";
    position:absolute;
    left:0;
    top:3px;
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    color:var(--is-green);
}

#impact-stories .is-approach{
    margin:28px 0;
    padding:23px;
    border-radius:15px;
    background:var(--is-sky);
}

#impact-stories .is-approach strong{
    display:block;
    margin-bottom:9px;
    color:var(--is-blue-dark);
    font-size:15px;
}

#impact-stories .is-approach p{
    margin:0;
    color:var(--is-blue);
    font-size:18px;
    line-height:1.6;
    font-weight:800;
}

#impact-stories .is-self-reliance{
    margin-top:30px;
    padding-top:28px;
    border-top:1px solid var(--is-border);
}

#impact-stories .is-self-reliance h3{
    margin-bottom:17px;
    color:var(--is-blue-dark);
    font-size:25px;
}

#impact-stories .is-self-reliance p{
    margin-bottom:15px;
    color:var(--is-text);
    font-size:15px;
    line-height:1.8;
}

#impact-stories .is-journey-quote{
    margin-top:28px;
    padding:25px;
    border-radius:15px;
    background:linear-gradient(
        135deg,
        var(--is-blue-deep),
        var(--is-blue)
    );
    color:#fff;
    text-align:center;
    font-size:20px;
    line-height:1.55;
    font-weight:700;
}


/* ============================================================
   PAGE CTA
   IMPORTANT:
   This is NOT .cta.
   It uses .is-cta so the existing site CTA remains untouched.
   ============================================================ */

#impact-stories .is-cta{
    position:relative;
    padding:85px 0;
    overflow:hidden;
    background:
        radial-gradient(
            circle at 85% 30%,
            rgba(245,130,32,.18),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            var(--is-blue-deep),
            var(--is-blue)
        );
    color:#fff;
}

#impact-stories .is-cta-inner{
    position:relative;
    z-index:2;
    max-width:850px;
    margin:0 auto;
    text-align:center;
}

#impact-stories .is-cta h2{
    margin-bottom:17px;
    color:#fff;
    font-size:clamp(30px,4vw,44px);
    line-height:1.2;
}

#impact-stories .is-cta p{
    max-width:720px;
    margin:0 auto 30px;
    color:rgba(255,255,255,.86);
    font-size:17px;
    line-height:1.8;
}

#impact-stories .is-cta-buttons{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
}

#impact-stories .is-cta-buttons a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:48px;
    padding:13px 21px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:8px;
    background:#fff;
    color:var(--is-blue-dark);
    font-size:14px;
    font-weight:800;
    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease;
}

#impact-stories .is-cta-buttons a:hover{
    transform:translateY(-2px);
    background:var(--is-orange);
    color:#fff;
}

#impact-stories .is-cta-buttons a.primary{
    background:var(--is-orange);
    border-color:var(--is-orange);
    color:#fff;
}

#impact-stories .is-cta-buttons a.primary:hover{
    background:var(--is-orange-dark);
    border-color:var(--is-orange-dark);
}


/* ============================================================
   REVEAL ANIMATION
   Only applies if your existing JS adds .revealed
   ============================================================ */

#impact-stories .reveal-up{
    opacity:1;
    transform:none;
}

#impact-stories .reveal-up.is-reveal{
    opacity:0;
    transform:translateY(20px);
    transition:
        opacity .65s ease,
        transform .65s ease;
}

#impact-stories .reveal-up.is-reveal.revealed{
    opacity:1;
    transform:none;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width:1024px){

    #impact-stories .is-hero{
        padding:85px 0 80px;
    }

    #impact-stories .is-impact-grid{
        grid-template-columns:repeat(2,1fr);
    }

    #impact-stories .is-cycle-grid{
        grid-template-columns:repeat(3,1fr);
        gap:18px;
    }

    #impact-stories .is-cycle-arrow{
        display:none;
    }

    #impact-stories .is-journey-layout{
        grid-template-columns:1fr;
        gap:35px;
    }

    #impact-stories .is-journey-intro{
        position:static;
        max-width:750px;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width:767px){

    #impact-stories .is-container{
        width:min(100% - 30px, 1180px);
    }

    #impact-stories .is-hero{
        padding:70px 0 70px;
    }

    #impact-stories .is-hero h1{
        font-size:38px;
        letter-spacing:-.8px;
    }

    #impact-stories .is-hero-text{
        font-size:15px;
        line-height:1.7;
    }

    #impact-stories .is-section{
        padding:65px 0;
    }

    #impact-stories .is-intro{
        padding:55px 0 25px;
    }

    #impact-stories .is-section-heading{
        margin-bottom:35px;
    }

    #impact-stories .is-section-heading h2{
        font-size:30px;
    }

    #impact-stories .is-section-heading p{
        font-size:15px;
    }

    #impact-stories .is-intro-box p{
        font-size:15px;
        line-height:1.75;
    }

    #impact-stories .is-intro-highlight{
        font-size:16px;
        padding:18px;
    }

    #impact-stories .is-impact{
        padding:60px 0 70px;
    }

    #impact-stories .is-impact-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    #impact-stories .is-impact-card{
        min-height:auto;
        padding:26px 23px;
    }

    #impact-stories .is-impact-number{
        font-size:35px;
    }

    #impact-stories .is-cycle{
        padding:65px 0;
    }

    #impact-stories .is-cycle-grid{
        grid-template-columns:repeat(2,1fr);
        gap:12px;
    }

    #impact-stories .is-cycle-item{
        padding:21px 10px;
    }

    #impact-stories .is-stories{
        padding:65px 0;
    }

    #impact-stories .is-stories-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    #impact-stories .is-story-card{
        padding:25px 22px;
        border-radius:17px;
    }

    #impact-stories .is-story-card h3{
        font-size:21px;
        padding-right:30px;
    }

    #impact-stories .is-story-number{
        top:19px;
        right:19px;
        font-size:34px;
    }

    #impact-stories .is-journey{
        padding:65px 0;
    }

    #impact-stories .is-journey-content{
        padding:24px 20px;
    }

    #impact-stories .is-support-list{
        grid-template-columns:1fr;
        gap:9px;
    }

    #impact-stories .is-approach p{
        font-size:16px;
    }

    #impact-stories .is-journey-quote{
        padding:20px;
        font-size:17px;
    }

    #impact-stories .is-cta{
        padding:65px 0;
    }

    #impact-stories .is-cta h2{
        font-size:30px;
    }

    #impact-stories .is-cta p{
        font-size:15px;
    }

    #impact-stories .is-cta-buttons{
        flex-direction:column;
        align-items:stretch;
    }

    #impact-stories .is-cta-buttons a{
        width:100%;
    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width:480px){

    #impact-stories .is-hero h1{
        font-size:33px;
    }

    #impact-stories .is-eyebrow{
        font-size:11px;
        letter-spacing:1px;
    }

    #impact-stories .is-cycle-grid{
        grid-template-columns:1fr 1fr;
    }

    #impact-stories .is-impact-card{
        padding:24px 20px;
    }

    #impact-stories .is-story-card{
        padding:22px 19px;
    }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion:reduce){

    #impact-stories *,
    #impact-stories *::before,
    #impact-stories *::after{
        scroll-behavior:auto !important;
        transition:none !important;
        animation:none !important;
    }

    #impact-stories .reveal-up.is-reveal{
        opacity:1;
        transform:none;
    }

}
/* =========================================================
   CSR PARTNERSHIPS PAGE
   PAGE-SPECIFIC CSS ONLY
   ========================================================= */

#csr-partnerships{
  --csr-blue:#005b91;
  --csr-blue-dark:#003d68;
  --csr-blue-deep:#002e51;
  --csr-sky:#eaf7fb;
  --csr-orange:#f58220;
  --csr-orange-dark:#e96d0b;
  --csr-text:#24343d;
  --csr-muted:#6d7a80;
  --csr-border:#dce9ef;
  --csr-white:#ffffff;
}


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

#csr-partnerships .csr-hero{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(
      135deg,
      var(--csr-blue-deep) 0%,
      var(--csr-blue-dark) 52%,
      var(--csr-blue) 100%
    );
  color:#fff;
  padding:105px 0 100px;
  isolation:isolate;
}

#csr-partnerships .csr-hero::before{
  content:"";
  position:absolute;
  width:480px;
  height:480px;
  right:-180px;
  top:-240px;
  border-radius:50%;
  background:rgba(255,255,255,.07);
  z-index:-1;
}

#csr-partnerships .csr-hero::after{
  content:"";
  position:absolute;
  width:340px;
  height:340px;
  left:-180px;
  bottom:-190px;
  border-radius:50%;
  background:rgba(245,130,32,.12);
  z-index:-1;
}

#csr-partnerships .csr-hero-content{
  max-width:850px;
}

#csr-partnerships .csr-hero .eyebrow{
  color:#fff;
  margin-bottom:18px;
}

#csr-partnerships .csr-hero h1{
  margin:0;
  max-width:850px;
  font-family:"Playfair Display",serif;
  font-size:clamp(40px,5vw,68px);
  line-height:1.08;
  letter-spacing:-1px;
}

#csr-partnerships .csr-hero h1 span{
  color:#ffb46d;
}

#csr-partnerships .csr-hero p{
  max-width:720px;
  margin:25px 0 0;
  color:rgba(255,255,255,.88);
  font-size:18px;
  line-height:1.8;
}

#csr-partnerships .csr-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:13px;
  margin-top:30px;
}

#csr-partnerships .csr-hero .btn-outline{
  color:#fff;
  border-color:rgba(255,255,255,.55);
}

#csr-partnerships .csr-hero .btn-outline:hover{
  color:var(--csr-blue-dark);
  background:#fff;
}


/* decorative animation */

#csr-partnerships .csr-shape-one,
#csr-partnerships .csr-shape-two{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}

#csr-partnerships .csr-shape-one{
  width:90px;
  height:90px;
  right:16%;
  bottom:20%;
  background:rgba(255,255,255,.08);
  animation:csrFloatOne 7s ease-in-out infinite;
}

#csr-partnerships .csr-shape-two{
  width:38px;
  height:38px;
  right:28%;
  top:23%;
  background:rgba(245,130,32,.35);
  animation:csrFloatTwo 5s ease-in-out infinite;
}

@keyframes csrFloatOne{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-18px)}
}

@keyframes csrFloatTwo{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(10px,-12px)}
}


/* =========================================================
   GENERAL CSR SECTIONS
   ========================================================= */

#csr-partnerships .csr-section{
  padding:88px 0;
}

#csr-partnerships .csr-section:nth-child(even){
  background:#f8fbfc;
}

#csr-partnerships .csr-section-head{
  max-width:800px;
  margin:0 auto 48px;
  text-align:center;
}

#csr-partnerships .csr-section-head h2{
  margin:8px 0 15px;
  font-family:"Playfair Display",serif;
  color:var(--csr-blue-dark);
  font-size:clamp(32px,4vw,48px);
  line-height:1.15;
}

#csr-partnerships .csr-section-head p{
  margin:0;
  color:var(--csr-muted);
  font-size:16px;
  line-height:1.8;
}


/* =========================================================
   INTRO HIGHLIGHTS
   ========================================================= */

#csr-partnerships .csr-intro{
  background:#fff;
}

#csr-partnerships .csr-highlight-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

#csr-partnerships .csr-highlight{
  padding:32px 28px;
  border:1px solid var(--csr-border);
  border-radius:18px;
  background:#fff;
  box-shadow:0 12px 35px rgba(0,61,104,.06);
  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}

#csr-partnerships .csr-highlight:hover{
  transform:translateY(-8px);
  border-color:#b9d7e5;
  box-shadow:0 20px 45px rgba(0,61,104,.12);
}

#csr-partnerships .csr-highlight i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  margin-bottom:20px;
  border-radius:14px;
  color:#fff;
  background:var(--csr-blue);
  font-size:21px;
}

#csr-partnerships .csr-highlight h3{
  margin:0 0 10px;
  color:var(--csr-blue-dark);
  font-size:21px;
}

#csr-partnerships .csr-highlight p{
  margin:0;
  color:var(--csr-muted);
  line-height:1.7;
}


/* =========================================================
   PROGRAMMES
   ========================================================= */

#csr-partnerships .csr-programmes{
  background:var(--csr-sky);
}

#csr-partnerships .csr-programme-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

#csr-partnerships .csr-programme-card{
  position:relative;
  overflow:hidden;
  padding:32px 28px;
  min-height:245px;
  border:1px solid rgba(0,91,145,.12);
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 30px rgba(0,61,104,.06);
  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

#csr-partnerships .csr-programme-card::after{
  content:"";
  position:absolute;
  width:90px;
  height:90px;
  right:-35px;
  bottom:-35px;
  border-radius:50%;
  background:rgba(245,130,32,.08);
  transition:transform .4s ease;
}

#csr-partnerships .csr-programme-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 45px rgba(0,61,104,.13);
}

#csr-partnerships .csr-programme-card:hover::after{
  transform:scale(1.7);
}

#csr-partnerships .csr-card-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  margin-bottom:20px;
  border-radius:15px;
  background:#eef7fb;
  color:var(--csr-blue);
  font-size:22px;
  transition:
    background .3s ease,
    color .3s ease,
    transform .3s ease;
}

#csr-partnerships .csr-programme-card:hover .csr-card-icon{
  color:#fff;
  background:var(--csr-orange);
  transform:rotate(-5deg) scale(1.05);
}

#csr-partnerships .csr-programme-card h3{
  position:relative;
  z-index:1;
  margin:0 0 11px;
  color:var(--csr-blue-dark);
  font-size:20px;
  line-height:1.3;
}

#csr-partnerships .csr-programme-card p{
  position:relative;
  z-index:1;
  margin:0;
  color:var(--csr-muted);
  line-height:1.7;
}


/* =========================================================
   FUNDING OPPORTUNITIES
   ========================================================= */

#csr-partnerships .csr-opportunity-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

#csr-partnerships .csr-opportunity{
  display:flex;
  align-items:center;
  gap:15px;
  min-height:74px;
  padding:16px 19px;
  border:1px solid var(--csr-border);
  border-radius:14px;
  background:#fff;
  color:var(--csr-blue-dark);
  font-weight:700;
  box-shadow:0 7px 20px rgba(0,61,104,.04);
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

#csr-partnerships .csr-opportunity:hover{
  transform:translateY(-5px);
  border-color:#b7d4e2;
  box-shadow:0 15px 30px rgba(0,61,104,.10);
}

#csr-partnerships .csr-opportunity i{
  flex:0 0 auto;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  background:#fff3e9;
  color:var(--csr-orange);
}


/* =========================================================
   PARTNERSHIP MODELS
   ========================================================= */

#csr-partnerships .csr-models{
  background:#f8fbfc;
}

#csr-partnerships .csr-model-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

#csr-partnerships .csr-model-card{
  padding:30px 24px;
  border-radius:17px;
  border:1px solid var(--csr-border);
  background:#fff;
  text-align:center;
  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

#csr-partnerships .csr-model-card:hover{
  transform:translateY(-7px);
  box-shadow:0 18px 40px rgba(0,61,104,.10);
}

#csr-partnerships .csr-model-card i{
  font-size:25px;
  color:var(--csr-orange);
  margin-bottom:18px;
  transition:transform .3s ease;
}

#csr-partnerships .csr-model-card:hover i{
  transform:scale(1.15) rotate(-4deg);
}

#csr-partnerships .csr-model-card h3{
  margin:0 0 10px;
  color:var(--csr-blue-dark);
  font-size:18px;
  line-height:1.35;
}

#csr-partnerships .csr-model-card p{
  margin:0;
  color:var(--csr-muted);
  font-size:14px;
  line-height:1.65;
}


/* =========================================================
   PROCESS
   ========================================================= */

#csr-partnerships .csr-process{
  background:#fff;
}

#csr-partnerships .csr-process-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:70px;
  align-items:center;
}

#csr-partnerships .csr-process-copy h2{
  margin:8px 0 16px;
  font-family:"Playfair Display",serif;
  color:var(--csr-blue-dark);
  font-size:clamp(32px,4vw,47px);
  line-height:1.15;
}

#csr-partnerships .csr-process-copy p{
  margin:0 0 25px;
  color:var(--csr-muted);
  line-height:1.8;
}

#csr-partnerships .csr-process-steps{
  display:flex;
  flex-direction:column;
  gap:13px;
}

#csr-partnerships .csr-process-step{
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:19px 20px;
  border:1px solid var(--csr-border);
  border-radius:14px;
  background:#fff;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

#csr-partnerships .csr-process-step:hover{
  transform:translateX(6px);
  border-color:#b9d7e5;
  box-shadow:0 10px 28px rgba(0,61,104,.08);
}

#csr-partnerships .csr-process-step > span{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 42px;
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--csr-blue);
  color:#fff;
  font-weight:800;
  font-size:13px;
}

#csr-partnerships .csr-process-step h3{
  margin:2px 0 5px;
  color:var(--csr-blue-dark);
  font-size:17px;
}

#csr-partnerships .csr-process-step p{
  margin:0;
  color:var(--csr-muted);
  font-size:14px;
  line-height:1.55;
}


/* =========================================================
   PARTNER BANNER
   ========================================================= */

#csr-partnerships .csr-partner-banner{
  padding:75px 0;
  background:
    linear-gradient(
      135deg,
      var(--csr-blue-dark),
      var(--csr-blue)
    );
}

#csr-partnerships .csr-partner-banner-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:45px;
  padding:48px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:24px;
  background:rgba(255,255,255,.06);
}

#csr-partnerships .csr-partner-banner .eyebrow{
  color:#fff;
}

#csr-partnerships .csr-partner-banner h2{
  margin:8px 0 13px;
  color:#fff;
  font-family:"Playfair Display",serif;
  font-size:clamp(30px,4vw,45px);
  line-height:1.15;
}

#csr-partnerships .csr-partner-banner p{
  max-width:700px;
  margin:0;
  color:rgba(255,255,255,.82);
  line-height:1.75;
}

#csr-partnerships .csr-partner-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  flex:0 0 auto;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1000px){

  #csr-partnerships .csr-programme-grid{
    grid-template-columns:repeat(2,1fr);
  }

  #csr-partnerships .csr-model-grid{
    grid-template-columns:repeat(3,1fr);
  }

  #csr-partnerships .csr-process-grid{
    grid-template-columns:1fr;
    gap:40px;
  }

  #csr-partnerships .csr-partner-banner-inner{
    flex-direction:column;
    align-items:flex-start;
  }

}


@media(max-width:760px){

  #csr-partnerships .csr-hero{
    padding:78px 0 75px;
  }

  #csr-partnerships .csr-hero h1{
    font-size:40px;
  }

  #csr-partnerships .csr-hero p{
    font-size:16px;
  }

  #csr-partnerships .csr-section{
    padding:65px 0;
  }

  #csr-partnerships .csr-highlight-grid,
  #csr-partnerships .csr-programme-grid,
  #csr-partnerships .csr-opportunity-grid{
    grid-template-columns:1fr;
  }

  #csr-partnerships .csr-model-grid{
    grid-template-columns:repeat(2,1fr);
  }

  #csr-partnerships .csr-partner-banner{
    padding:55px 0;
  }

  #csr-partnerships .csr-partner-banner-inner{
    padding:30px 24px;
  }

}


@media(max-width:520px){

  #csr-partnerships .csr-hero h1{
    font-size:34px;
  }

  #csr-partnerships .csr-hero-actions,
  #csr-partnerships .csr-partner-actions{
    flex-direction:column;
    align-items:stretch;
  }

  #csr-partnerships .csr-hero-actions .btn,
  #csr-partnerships .csr-partner-actions .btn{
    width:100%;
    justify-content:center;
  }

  #csr-partnerships .csr-model-grid{
    grid-template-columns:1fr;
  }

  #csr-partnerships .csr-section-head{
    margin-bottom:35px;
  }

  #csr-partnerships .csr-section-head h2{
    font-size:31px;
  }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  #csr-partnerships *,
  #csr-partnerships *::before,
  #csr-partnerships *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }

}
/* =========================================================
   CSR HERO OUTLINE BUTTON FIX
   ========================================================= */

#csr-partnerships .csr-hero .btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  color:#ffffff !important;
  background:transparent !important;
  border:1px solid rgba(255,255,255,.75) !important;
  opacity:1 !important;
  visibility:visible !important;
}

#csr-partnerships .csr-hero .btn-outline i{
  color:#ffffff !important;
}

#csr-partnerships .csr-hero .btn-outline:hover{
  color:var(--csr-blue-dark) !important;
  background:#ffffff !important;
  border-color:#ffffff !important;
}

#csr-partnerships .csr-hero .btn-outline:hover i{
  color:var(--csr-blue-dark) !important;
}
/* =========================================================
   CONTACT PAGE
   Blessings NGO
   Scoped ONLY to #contact-page
   ========================================================= */

#contact-page{

  --contact-blue:#005b91;
  --contact-blue-dark:#003d68;
  --contact-blue-deep:#002e51;
  --contact-sky:#eaf7fb;
  --contact-orange:#f58220;
  --contact-orange-dark:#e96d0b;
  --contact-green:#42a64b;
  --contact-teal:#159b9b;
  --contact-pink:#d83b79;

  --contact-text:#17324d;
  --contact-muted:#64748b;
  --contact-border:#dce8ef;
  --contact-white:#ffffff;

  background:#ffffff;
  overflow:hidden;
}


/* =========================================================
   COMMON
   ========================================================= */

#contact-page .container{
  position:relative;
  z-index:2;
}

#contact-page .eyebrow{

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

  margin-bottom:14px;

  font-size:13px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;

  color:var(--contact-orange);
}

#contact-page .eyebrow::before{

  content:"";

  width:28px;
  height:2px;

  background:currentColor;

  border-radius:10px;
}


/* =========================================================
   CONTACT HERO
   ========================================================= */

#contact-page .contact-hero{

  position:relative;

  min-height:500px;

  display:flex;
  align-items:center;

  padding:90px 0 100px;

  background:
    radial-gradient(
      circle at 85% 25%,
      rgba(255,255,255,.12),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      var(--contact-blue-deep) 0%,
      var(--contact-blue-dark) 55%,
      var(--contact-blue) 100%
    );

  color:#ffffff;

  overflow:hidden;
}


/* Decorative shapes */

#contact-page .contact-hero-shape{

  position:absolute;

  border-radius:50%;

  pointer-events:none;

  opacity:.14;
}


#contact-page .contact-shape-one{

  width:420px;
  height:420px;

  right:-130px;
  top:-180px;

  border:70px solid #ffffff;

  animation:contactFloatOne 9s ease-in-out infinite;
}


#contact-page .contact-shape-two{

  width:280px;
  height:280px;

  left:-130px;
  bottom:-170px;

  border:50px solid var(--contact-orange);

  animation:contactFloatTwo 11s ease-in-out infinite;
}


@keyframes contactFloatOne{

  0%,
  100%{
    transform:translate3d(0,0,0) rotate(0deg);
  }

  50%{
    transform:translate3d(-20px,20px,0) rotate(8deg);
  }

}


@keyframes contactFloatTwo{

  0%,
  100%{
    transform:translate3d(0,0,0);
  }

  50%{
    transform:translate3d(25px,-20px,0);
  }

}


/* Hero content */

#contact-page .contact-hero-content{

  max-width:850px;

  position:relative;
  z-index:3;
}


#contact-page .contact-hero .eyebrow{

  color:#ffb56f;
}


#contact-page .contact-hero h1{

  max-width:850px;

  margin:0 0 22px;

  font-family:"Playfair Display",serif;

  font-size:clamp(42px,5.5vw,72px);

  line-height:1.08;

  font-weight:700;

  letter-spacing:-1.5px;

  color:#ffffff;
}


#contact-page .contact-hero h1 span{

  display:block;

  color:#8dd7ef;
}


#contact-page .contact-hero p{

  max-width:720px;

  margin:0;

  font-size:18px;

  line-height:1.8;

  color:rgba(255,255,255,.88);
}


/* Hero buttons */

#contact-page .contact-hero-actions{

  display:flex;

  flex-wrap:wrap;

  gap:14px;

  margin-top:32px;
}


#contact-page .contact-hero-actions .btn{

  min-height:50px;

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

  gap:9px;

  text-decoration:none;

  white-space:nowrap;
}


#contact-page .contact-btn-outline{

  color:#ffffff !important;

  background:transparent !important;

  border:1px solid rgba(255,255,255,.75) !important;

  opacity:1 !important;

  visibility:visible !important;
}


#contact-page .contact-btn-outline i{

  color:#ffffff !important;
}


#contact-page .contact-btn-outline:hover{

  color:var(--contact-blue-dark) !important;

  background:#ffffff !important;

  border-color:#ffffff !important;
}


#contact-page .contact-btn-outline:hover i{

  color:var(--contact-blue-dark) !important;
}


/* =========================================================
   GENERAL SECTION
   ========================================================= */

#contact-page .contact-section{

  padding:90px 0;
}


#contact-page .contact-section-heading{

  max-width:760px;

  margin:0 auto 48px;

  text-align:center;
}


#contact-page .contact-section-heading .eyebrow{

  justify-content:center;
}


#contact-page .contact-section-heading h2{

  margin:0 0 18px;

  font-family:"Playfair Display",serif;

  font-size:clamp(34px,4vw,52px);

  line-height:1.15;

  color:var(--contact-blue-dark);
}


#contact-page .contact-section-heading h2 span{

  color:var(--contact-orange);
}


#contact-page .contact-section-heading p{

  max-width:680px;

  margin:0 auto;

  color:var(--contact-muted);

  font-size:16px;

  line-height:1.8;
}


/* =========================================================
   CONTACT INTRO
   ========================================================= */

#contact-page .contact-intro{

  background:#ffffff;
}


#contact-page .contact-info-grid{

  display:grid;

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

  gap:22px;
}


#contact-page .contact-info-card{

  display:flex;

  gap:18px;

  padding:30px 26px;

  background:#ffffff;

  border:1px solid var(--contact-border);

  border-radius:18px;

  box-shadow:
    0 12px 35px rgba(0,61,104,.06);

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


#contact-page .contact-info-card:hover{

  transform:translateY(-6px);

  border-color:#b9d8e7;

  box-shadow:
    0 18px 42px rgba(0,61,104,.11);
}


#contact-page .contact-info-icon{

  flex:0 0 54px;

  width:54px;
  height:54px;

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

  border-radius:14px;

  font-size:21px;
}


#contact-page .contact-icon-blue{

  color:var(--contact-blue);

  background:#e9f5fa;
}


#contact-page .contact-icon-orange{

  color:var(--contact-orange);

  background:#fff2e7;
}


#contact-page .contact-icon-green{

  color:var(--contact-green);

  background:#edf8ee;
}


#contact-page .contact-info-card span{

  display:block;

  margin-bottom:5px;

  font-size:12px;

  font-weight:700;

  letter-spacing:1px;

  text-transform:uppercase;

  color:var(--contact-muted);
}


#contact-page .contact-info-card h3{

  margin:0 0 8px;

  font-size:19px;

  line-height:1.35;

  color:var(--contact-blue-dark);

  word-break:break-word;
}


#contact-page .contact-info-card p{

  margin:0 0 14px;

  font-size:14px;

  line-height:1.65;

  color:var(--contact-muted);
}


#contact-page .contact-info-card a{

  display:inline-flex;

  align-items:center;

  gap:7px;

  color:var(--contact-blue);

  font-size:14px;

  font-weight:700;

  text-decoration:none;

  transition:color .25s ease;
}


#contact-page .contact-info-card a:hover{

  color:var(--contact-orange);
}


/* =========================================================
   CONTACT MAIN
   ========================================================= */

#contact-page .contact-main{

  background:var(--contact-sky);
}


#contact-page .contact-layout{

  display:grid;

  grid-template-columns:
    minmax(0,1.55fr)
    minmax(320px,.75fr);

  gap:34px;

  align-items:start;
}


/* =========================================================
   FORM WRAPPER
   ========================================================= */

#contact-page .contact-form-wrapper{

  padding:42px;

  background:#ffffff;

  border:1px solid var(--contact-border);

  border-radius:22px;

  box-shadow:
    0 18px 50px rgba(0,61,104,.08);
}


#contact-page .contact-form-heading{

  margin-bottom:32px;
}


#contact-page .contact-form-heading .eyebrow{

  margin-bottom:10px;
}


#contact-page .contact-form-heading h2{

  margin:0 0 12px;

  font-family:"Playfair Display",serif;

  font-size:clamp(30px,3vw,43px);

  line-height:1.15;

  color:var(--contact-blue-dark);
}


#contact-page .contact-form-heading h2 span{

  color:var(--contact-orange);
}


#contact-page .contact-form-heading p{

  max-width:680px;

  margin:0;

  color:var(--contact-muted);

  line-height:1.75;
}


/* =========================================================
   FORM
   ========================================================= */

#contact-page .contact-form{

  width:100%;
}


#contact-page .contact-form-row{

  display:grid;

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

  gap:20px;

  margin-bottom:20px;
}


#contact-page .contact-field{

  display:flex;

  flex-direction:column;

  gap:8px;

  margin-bottom:20px;
}


#contact-page .contact-form-row .contact-field{

  margin-bottom:0;
}


#contact-page .contact-field label{

  font-size:14px;

  font-weight:700;

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


#contact-page .contact-field label span{

  color:var(--contact-orange);
}


#contact-page .contact-field input,
#contact-page .contact-field select,
#contact-page .contact-field textarea{

  width:100%;

  box-sizing:border-box;

  padding:14px 16px;

  border:1px solid #d7e4eb;

  border-radius:10px;

  background:#fbfdfe;

  color:var(--contact-text);

  font-family:"DM Sans",sans-serif;

  font-size:15px;

  outline:none;

  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}


#contact-page .contact-field input,
#contact-page .contact-field select{

  min-height:52px;
}


#contact-page .contact-field textarea{

  min-height:145px;

  resize:vertical;

  line-height:1.6;
}


#contact-page .contact-field input::placeholder,
#contact-page .contact-field textarea::placeholder{

  color:#9aabb7;
}


#contact-page .contact-field input:focus,
#contact-page .contact-field select:focus,
#contact-page .contact-field textarea:focus{

  border-color:#69aec8;

  background:#ffffff;

  box-shadow:
    0 0 0 4px rgba(0,91,145,.08);
}


#contact-page .contact-field select{

  cursor:pointer;
}


/* Form bottom */

#contact-page .contact-form-bottom{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  margin-top:8px;
}


#contact-page .contact-form-bottom p{

  display:flex;

  align-items:flex-start;

  gap:8px;

  max-width:420px;

  margin:0;

  color:var(--contact-muted);

  font-size:12px;

  line-height:1.55;
}


#contact-page .contact-form-bottom p i{

  margin-top:2px;

  color:var(--contact-green);
}


#contact-page .contact-form-bottom .btn{

  flex:0 0 auto;

  min-height:50px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:9px;

  border:0;

  cursor:pointer;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

#contact-page .contact-sidebar{

  display:flex;

  flex-direction:column;

  gap:20px;
}


#contact-page .contact-side-card{

  padding:28px;

  background:#ffffff;

  border:1px solid var(--contact-border);

  border-radius:18px;

  box-shadow:
    0 12px 35px rgba(0,61,104,.06);
}


#contact-page .contact-side-primary{

  color:#ffffff;

  background:
    linear-gradient(
      145deg,
      var(--contact-blue-dark),
      var(--contact-blue)
    );

  border-color:transparent;
}


#contact-page .contact-side-icon{

  width:52px;
  height:52px;

  display:flex;

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

  margin-bottom:18px;

  border-radius:14px;

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

  color:#ffffff;

  font-size:21px;
}


#contact-page .contact-side-card h3{

  margin:0 0 12px;

  font-family:"Playfair Display",serif;

  font-size:23px;

  line-height:1.3;

  color:var(--contact-blue-dark);
}


#contact-page .contact-side-primary h3{

  color:#ffffff;
}


#contact-page .contact-side-card p{

  margin:0 0 18px;

  color:var(--contact-muted);

  font-size:14px;

  line-height:1.7;
}


#contact-page .contact-side-primary p{

  color:rgba(255,255,255,.82);
}


/* WhatsApp */

#contact-page .contact-whatsapp{

  display:inline-flex;

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

  gap:9px;

  width:100%;

  min-height:48px;

  box-sizing:border-box;

  padding:12px 18px;

  border-radius:9px;

  background:#ffffff;

  color:#168c4b;

  font-size:14px;

  font-weight:700;

  text-decoration:none;

  transition:
    transform .25s ease,
    background .25s ease;
}


#contact-page .contact-whatsapp:hover{

  transform:translateY(-2px);

  background:#f2fff7;
}


/* =========================================================
   CONTACT TOPICS
   ========================================================= */

#contact-page .contact-topic-list{

  display:flex;

  flex-direction:column;

  gap:12px;

  margin:0;

  padding:0;

  list-style:none;
}


#contact-page .contact-topic-list li{

  display:flex;

  align-items:flex-start;

  gap:10px;

  color:var(--contact-muted);

  font-size:14px;

  line-height:1.5;
}


#contact-page .contact-topic-list li i{

  flex:0 0 auto;

  margin-top:3px;

  color:var(--contact-green);

  font-size:12px;
}


/* =========================================================
   SOCIAL
   ========================================================= */

#contact-page .contact-socials{

  display:flex;

  flex-wrap:wrap;

  gap:10px;
}


#contact-page .contact-socials a{

  width:40px;
  height:40px;

  display:flex;

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

  border-radius:10px;

  background:#edf6fa;

  color:var(--contact-blue);

  text-decoration:none;

  transition:
    transform .25s ease,
    background .25s ease,
    color .25s ease;
}


#contact-page .contact-socials a:hover{

  transform:translateY(-3px);

  background:var(--contact-blue);

  color:#ffffff;
}


/* =========================================================
   WAYS TO GET INVOLVED
   ========================================================= */

#contact-page .contact-ways{

  background:#ffffff;
}


#contact-page .contact-ways-grid{

  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:20px;
}


#contact-page .contact-way-card{

  position:relative;

  display:block;

  padding:30px 25px;

  background:#ffffff;

  border:1px solid var(--contact-border);

  border-radius:18px;

  text-decoration:none;

  overflow:hidden;

  box-shadow:
    0 10px 30px rgba(0,61,104,.045);

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


#contact-page .contact-way-card::after{

  content:"";

  position:absolute;

  width:100px;
  height:100px;

  right:-55px;
  bottom:-55px;

  border-radius:50%;

  background:var(--contact-sky);

  transition:transform .35s ease;
}


#contact-page .contact-way-card:hover{

  transform:translateY(-7px);

  border-color:#b8d8e6;

  box-shadow:
    0 18px 40px rgba(0,61,104,.10);
}


#contact-page .contact-way-card:hover::after{

  transform:scale(2);
}


#contact-page .contact-way-icon{

  position:relative;

  z-index:1;

  width:52px;
  height:52px;

  display:flex;

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

  margin-bottom:20px;

  border-radius:14px;

  background:#eaf7fb;

  color:var(--contact-blue);

  font-size:20px;
}


#contact-page .contact-way-card:nth-child(2)
.contact-way-icon{

  background:#fff2e7;

  color:var(--contact-orange);
}


#contact-page .contact-way-card:nth-child(3)
.contact-way-icon{

  background:#edf8ee;

  color:var(--contact-green);
}


#contact-page .contact-way-card:nth-child(4)
.contact-way-icon{

  background:#f7eefb;

  color:#7745a8;
}


#contact-page .contact-way-card h3{

  position:relative;

  z-index:1;

  margin:0 0 10px;

  color:var(--contact-blue-dark);

  font-size:20px;
}


#contact-page .contact-way-card p{

  position:relative;

  z-index:1;

  margin:0 0 18px;

  color:var(--contact-muted);

  font-size:14px;

  line-height:1.7;
}


#contact-page .contact-way-card span{

  position:relative;

  z-index:1;

  display:inline-flex;

  align-items:center;

  gap:7px;

  color:var(--contact-blue);

  font-size:13px;

  font-weight:700;
}


#contact-page .contact-way-card span i{

  transition:transform .25s ease;
}


#contact-page .contact-way-card:hover span i{

  transform:translateX(4px);
}


/* =========================================================
   CTA
   IMPORTANT:
   No CTA styling here.
   Existing shared .cta CSS remains untouched.
   ========================================================= */


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1100px){

  #contact-page .contact-info-grid{

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

  }


  #contact-page .contact-info-card:last-child{

    grid-column:1 / -1;

  }


  #contact-page .contact-layout{

    grid-template-columns:
      minmax(0,1.35fr)
      minmax(290px,.75fr);

    gap:25px;

  }


  #contact-page .contact-ways-grid{

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

  }

}


@media(max-width:900px){

  #contact-page .contact-hero{

    min-height:auto;

    padding:75px 0 80px;

  }


  #contact-page .contact-hero h1{

    font-size:clamp(40px,7vw,58px);

  }


  #contact-page .contact-layout{

    grid-template-columns:1fr;

  }


  #contact-page .contact-sidebar{

    display:grid;

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

    align-items:start;

  }


  #contact-page .contact-side-primary{

    grid-column:1 / -1;

  }

}


@media(max-width:700px){

  #contact-page .contact-section{

    padding:70px 0;

  }


  #contact-page .contact-hero{

    padding:65px 0 70px;

  }


  #contact-page .contact-hero h1{

    font-size:40px;

    letter-spacing:-.8px;

  }


  #contact-page .contact-hero p{

    font-size:16px;

    line-height:1.7;

  }


  #contact-page .contact-hero-actions{

    flex-direction:column;

    align-items:stretch;

  }


  #contact-page .contact-hero-actions .btn{

    width:100%;

  }


  #contact-page .contact-info-grid{

    grid-template-columns:1fr;

  }


  #contact-page .contact-info-card:last-child{

    grid-column:auto;

  }


  #contact-page .contact-form-wrapper{

    padding:28px 22px;

    border-radius:18px;

  }


  #contact-page .contact-form-row{

    grid-template-columns:1fr;

    gap:0;

    margin-bottom:0;

  }


  #contact-page .contact-form-bottom{

    flex-direction:column;

    align-items:stretch;

  }


  #contact-page .contact-form-bottom .btn{

    width:100%;

  }


  #contact-page .contact-sidebar{

    display:flex;

    flex-direction:column;

  }


  #contact-page .contact-ways-grid{

    grid-template-columns:1fr;

  }

}


@media(max-width:480px){

  #contact-page .contact-section{

    padding:58px 0;

  }


  #contact-page .contact-hero{

    padding:55px 0 60px;

  }


  #contact-page .contact-hero h1{

    font-size:34px;

  }


  #contact-page .contact-section-heading h2{

    font-size:32px;

  }


  #contact-page .contact-info-card{

    padding:24px 20px;

    gap:14px;

  }


  #contact-page .contact-info-icon{

    flex-basis:48px;

    width:48px;
    height:48px;

    font-size:18px;

  }


  #contact-page .contact-form-wrapper{

    padding:24px 18px;

  }


  #contact-page .contact-side-card{

    padding:24px 20px;

  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  #contact-page .contact-hero-shape{

    animation:none !important;

  }


  #contact-page .contact-info-card,
  #contact-page .contact-way-card,
  #contact-page .contact-socials a,
  #contact-page .contact-whatsapp,
  #contact-page .contact-way-card span i{

    transition:none !important;

  }

}
/* =========================================================
   VOLUNTEER PAGE
   Scoped only to #volunteer-page
   ========================================================= */

#volunteer-page{

  --vol-blue:#005b91;
  --vol-blue-dark:#003d68;
  --vol-blue-deep:#002e51;
  --vol-sky:#eaf7fb;

  --vol-orange:#f58220;
  --vol-orange-dark:#e96d0b;

  --vol-green:#42a64b;
  --vol-teal:#159b9b;
  --vol-pink:#d83b79;
  --vol-purple:#7745a8;

  --vol-text:#17324d;
  --vol-muted:#64748b;
  --vol-border:#dce8ef;
  --vol-white:#ffffff;

  background:#ffffff;
  color:var(--vol-text);
  overflow:hidden;
}


/* =========================================================
   COMMON
   ========================================================= */

#volunteer-page .container{
  position:relative;
  z-index:2;
}

#volunteer-page .eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;

  margin-bottom:14px;

  color:var(--vol-orange);

  font-size:13px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

#volunteer-page h1,
#volunteer-page h2,
#volunteer-page h3{
  margin-top:0;
}

#volunteer-page p{
  color:var(--vol-muted);
  line-height:1.75;
}


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

#volunteer-page .volunteer-hero{

  position:relative;

  min-height:540px;

  display:flex;
  align-items:center;

  padding:90px 0;

  background:
    linear-gradient(
      135deg,
      var(--vol-blue-deep) 0%,
      var(--vol-blue-dark) 58%,
      var(--vol-blue) 100%
    );

  overflow:hidden;
}

#volunteer-page .volunteer-hero::before{

  content:"";

  position:absolute;

  width:500px;
  height:500px;

  right:-180px;
  top:-220px;

  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;

}

#volunteer-page .volunteer-hero::after{

  content:"";

  position:absolute;

  width:300px;
  height:300px;

  left:-130px;
  bottom:-170px;

  border:1px solid rgba(255,255,255,.1);
  border-radius:50%;

}

#volunteer-page .volunteer-hero-shape{

  position:absolute;

  border-radius:50%;

  pointer-events:none;

}

#volunteer-page .volunteer-shape-one{

  width:180px;
  height:180px;

  right:12%;
  bottom:-80px;

  background:rgba(245,130,32,.12);

}

#volunteer-page .volunteer-shape-two{

  width:110px;
  height:110px;

  left:14%;
  top:70px;

  background:rgba(66,166,75,.12);

}

#volunteer-page .volunteer-hero-content{

  position:relative;

  max-width:820px;

  z-index:3;
}

#volunteer-page .volunteer-hero .eyebrow{

  color:#ffb36f;
}

#volunteer-page .volunteer-hero h1{

  max-width:850px;

  margin-bottom:22px;

  color:#ffffff;

  font-family:"Playfair Display",serif;

  font-size:clamp(42px,6vw,72px);
  line-height:1.08;
  letter-spacing:-1.5px;

}

#volunteer-page .volunteer-hero h1 span{

  display:block;

  color:#ffffff;
}

#volunteer-page .volunteer-hero p{

  max-width:690px;

  margin:0 0 32px;

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

  font-size:18px;
  line-height:1.75;

}

#volunteer-page .volunteer-hero-actions{

  display:flex;
  flex-wrap:wrap;
  gap:14px;

}

#volunteer-page .volunteer-hero-actions .btn{

  min-height:50px;

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

  gap:9px;

  padding:13px 22px;

  text-decoration:none;
}

#volunteer-page .volunteer-btn-outline{

  color:#ffffff !important;

  background:transparent !important;

  border:1px solid rgba(255,255,255,.75) !important;

  opacity:1 !important;
  visibility:visible !important;

}

#volunteer-page .volunteer-btn-outline i{

  color:#ffffff !important;

}

#volunteer-page .volunteer-btn-outline:hover{

  color:var(--vol-blue-dark) !important;

  background:#ffffff !important;

  border-color:#ffffff !important;

}

#volunteer-page .volunteer-btn-outline:hover i{

  color:var(--vol-blue-dark) !important;

}


/* =========================================================
   SECTION COMMON
   ========================================================= */

#volunteer-page .volunteer-section{

  position:relative;

  padding:90px 0;
}

#volunteer-page .volunteer-section-heading{

  max-width:760px;

  margin:0 auto 50px;

  text-align:center;
}

#volunteer-page .volunteer-section-heading h2{

  margin-bottom:18px;

  color:var(--vol-blue-deep);

  font-family:"Playfair Display",serif;

  font-size:clamp(34px,4.5vw,52px);

  line-height:1.15;
}

#volunteer-page .volunteer-section-heading h2 span{

  color:var(--vol-blue);

}

#volunteer-page .volunteer-section-heading p{

  max-width:690px;

  margin:0 auto;

  font-size:16px;

}


/* =========================================================
   INTRO
   ========================================================= */

#volunteer-page .volunteer-intro{

  background:#ffffff;
}

#volunteer-page .volunteer-intro-grid{

  display:grid;

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

  gap:24px;

}

#volunteer-page .volunteer-focus-card{

  position:relative;

  padding:34px 30px;

  background:#ffffff;

  border:1px solid var(--vol-border);

  border-radius:18px;

  text-align:center;

  box-shadow:0 12px 35px rgba(0,61,104,.07);

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

}

#volunteer-page .volunteer-focus-card:hover{

  transform:translateY(-7px);

  border-color:rgba(0,91,145,.22);

  box-shadow:0 20px 45px rgba(0,61,104,.12);

}

#volunteer-page .volunteer-focus-icon{

  width:68px;
  height:68px;

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

  margin:0 auto 20px;

  border-radius:18px;

  font-size:25px;
}

#volunteer-page .volunteer-icon-blue{

  color:var(--vol-blue);

  background:var(--vol-sky);

}

#volunteer-page .volunteer-icon-orange{

  color:var(--vol-orange);

  background:#fff3e8;

}

#volunteer-page .volunteer-icon-green{

  color:var(--vol-green);

  background:#edf8ef;

}

#volunteer-page .volunteer-focus-card h3{

  margin-bottom:10px;

  color:var(--vol-blue-deep);

  font-size:21px;

}

#volunteer-page .volunteer-focus-card p{

  margin:0;

  font-size:15px;

}


/* =========================================================
   OPPORTUNITIES
   ========================================================= */

#volunteer-page .volunteer-opportunities{

  background:var(--vol-sky);
}

#volunteer-page .volunteer-opportunity-grid{

  display:grid;

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

  gap:24px;

}

#volunteer-page .volunteer-opportunity-card{

  position:relative;

  min-height:310px;

  padding:32px;

  background:#ffffff;

  border:1px solid rgba(0,91,145,.09);

  border-radius:18px;

  overflow:hidden;

  box-shadow:0 10px 30px rgba(0,61,104,.06);

  transition:
    transform .25s ease,
    box-shadow .25s ease;

}

#volunteer-page .volunteer-opportunity-card::after{

  content:"";

  position:absolute;

  width:100px;
  height:100px;

  right:-40px;
  bottom:-45px;

  border-radius:50%;

  background:rgba(0,91,145,.045);

}

#volunteer-page .volunteer-opportunity-card:hover{

  transform:translateY(-7px);

  box-shadow:0 20px 40px rgba(0,61,104,.11);

}

#volunteer-page .volunteer-opportunity-number{

  position:absolute;

  top:20px;
  right:24px;

  color:rgba(0,91,145,.12);

  font-size:32px;
  font-weight:700;
}

#volunteer-page .volunteer-opportunity-icon{

  width:58px;
  height:58px;

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

  margin-bottom:22px;

  color:#ffffff;

  background:var(--vol-blue);

  border-radius:15px;

  font-size:22px;
}

#volunteer-page .volunteer-opportunity-card:nth-child(2)
.volunteer-opportunity-icon{

  background:var(--vol-orange);

}

#volunteer-page .volunteer-opportunity-card:nth-child(3)
.volunteer-opportunity-icon{

  background:var(--vol-pink);

}

#volunteer-page .volunteer-opportunity-card:nth-child(4)
.volunteer-opportunity-icon{

  background:var(--vol-green);

}

#volunteer-page .volunteer-opportunity-card:nth-child(5)
.volunteer-opportunity-icon{

  background:var(--vol-purple);

}

#volunteer-page .volunteer-opportunity-card:nth-child(6)
.volunteer-opportunity-icon{

  background:var(--vol-teal);

}

#volunteer-page .volunteer-opportunity-card h3{

  margin-bottom:12px;

  color:var(--vol-blue-deep);

  font-size:21px;

}

#volunteer-page .volunteer-opportunity-card p{

  margin:0;

  font-size:15px;

}


/* =========================================================
   WHY VOLUNTEER
   ========================================================= */

#volunteer-page .volunteer-why{

  background:#ffffff;
}

#volunteer-page .volunteer-why-grid{

  display:grid;

  grid-template-columns:
    minmax(0,1.25fr)
    minmax(320px,.75fr);

  gap:70px;

  align-items:center;

}

#volunteer-page .volunteer-why-content .eyebrow{

  margin-bottom:12px;

}

#volunteer-page .volunteer-why-content h2{

  max-width:680px;

  margin-bottom:20px;

  color:var(--vol-blue-deep);

  font-family:"Playfair Display",serif;

  font-size:clamp(34px,4vw,50px);

  line-height:1.15;

}

#volunteer-page .volunteer-why-content h2 span{

  color:var(--vol-blue);

  display:block;

}

#volunteer-page .volunteer-why-content p{

  max-width:680px;

  margin-bottom:15px;

}

#volunteer-page .volunteer-benefits{

  display:grid;

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

  gap:14px 25px;

  margin-top:28px;

}

#volunteer-page .volunteer-benefits div{

  display:flex;
  align-items:center;

  gap:10px;

  color:var(--vol-blue-deep);

  font-size:15px;
  font-weight:600;

}

#volunteer-page .volunteer-benefits i{

  width:25px;
  height:25px;

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

  flex:0 0 25px;

  color:#ffffff;

  background:var(--vol-green);

  border-radius:50%;

  font-size:12px;

}

#volunteer-page .volunteer-why-card{

  position:relative;

  padding:45px 38px;

  background:
    linear-gradient(
      145deg,
      var(--vol-blue-deep),
      var(--vol-blue)
    );

  border-radius:24px;

  overflow:hidden;

  box-shadow:0 20px 45px rgba(0,61,104,.16);

}

#volunteer-page .volunteer-why-card::before{

  content:"";

  position:absolute;

  width:230px;
  height:230px;

  right:-110px;
  top:-100px;

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

  border-radius:50%;

}

#volunteer-page .volunteer-why-icon{

  width:68px;
  height:68px;

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

  margin-bottom:25px;

  color:#ffffff;

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

  border-radius:18px;

  font-size:27px;

}

#volunteer-page .volunteer-quote{

  position:relative;

  margin-bottom:20px;

  color:#ffffff;

  font-family:"Playfair Display",serif;

  font-size:29px;

  line-height:1.35;

}

#volunteer-page .volunteer-why-card p{

  position:relative;

  margin:0;

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

}


/* =========================================================
   FORM SECTION
   ========================================================= */

#volunteer-page .volunteer-form-section{

  background:var(--vol-sky);

}

#volunteer-page .volunteer-form-layout{

  display:grid;

  grid-template-columns:
    minmax(0,1.35fr)
    minmax(300px,.65fr);

  gap:45px;

  align-items:start;

}

#volunteer-page .volunteer-form-wrapper{

  padding:42px;

  background:#ffffff;

  border:1px solid var(--vol-border);

  border-radius:22px;

  box-shadow:0 15px 40px rgba(0,61,104,.07);

}

#volunteer-page .volunteer-form-heading{

  margin:0 0 35px;

  text-align:left;

}

#volunteer-page .volunteer-form-heading h2{

  margin-bottom:14px;

  font-size:clamp(32px,4vw,45px);

}

#volunteer-page .volunteer-form-heading p{

  margin:0;

}

#volunteer-page .volunteer-form{

  width:100%;

}

#volunteer-page .volunteer-form-row{

  display:grid;

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

  gap:20px;

  margin-bottom:20px;

}

#volunteer-page .volunteer-field{

  margin-bottom:20px;

}

#volunteer-page .volunteer-field label{

  display:block;

  margin-bottom:8px;

  color:var(--vol-blue-deep);

  font-size:14px;
  font-weight:700;

}

#volunteer-page .volunteer-field label span{

  color:var(--vol-orange);

}

#volunteer-page .volunteer-field input,
#volunteer-page .volunteer-field select,
#volunteer-page .volunteer-field textarea{

  width:100%;

  padding:13px 15px;

  color:var(--vol-text);

  background:#ffffff;

  border:1px solid #d5e2e9;

  border-radius:9px;

  outline:none;

  font-family:"DM Sans",sans-serif;

  font-size:15px;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;

  box-sizing:border-box;

}

#volunteer-page .volunteer-field input,
#volunteer-page .volunteer-field select{

  min-height:49px;

}

#volunteer-page .volunteer-field textarea{

  min-height:150px;

  resize:vertical;

}

#volunteer-page .volunteer-field input::placeholder,
#volunteer-page .volunteer-field textarea::placeholder{

  color:#94a3b8;

}

#volunteer-page .volunteer-field input:focus,
#volunteer-page .volunteer-field select:focus,
#volunteer-page .volunteer-field textarea:focus{

  border-color:var(--vol-blue);

  box-shadow:
    0 0 0 3px rgba(0,91,145,.09);

}

#volunteer-page .volunteer-form-bottom{

  display:flex;

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

  gap:25px;

  margin-top:5px;

}

#volunteer-page .volunteer-form-bottom p{

  display:flex;
  align-items:flex-start;

  gap:8px;

  max-width:400px;

  margin:0;

  font-size:13px;
  line-height:1.5;

}

#volunteer-page .volunteer-form-bottom p i{

  margin-top:2px;

  color:var(--vol-green);

}

#volunteer-page .volunteer-form-bottom .btn{

  flex-shrink:0;

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

  gap:9px;

  min-height:50px;

  padding:13px 21px;

}


/* =========================================================
   SIDEBAR
   ========================================================= */

#volunteer-page .volunteer-sidebar{

  display:flex;

  flex-direction:column;

  gap:20px;

}

#volunteer-page .volunteer-side-card{

  padding:30px;

  background:#ffffff;

  border:1px solid var(--vol-border);

  border-radius:18px;

  box-shadow:0 10px 30px rgba(0,61,104,.06);

}

#volunteer-page .volunteer-side-primary{

  color:#ffffff;

  background:
    linear-gradient(
      145deg,
      var(--vol-blue-deep),
      var(--vol-blue)
    );

  border:none;

}

#volunteer-page .volunteer-side-icon{

  width:58px;
  height:58px;

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

  margin-bottom:20px;

  color:#ffffff;

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

  border-radius:15px;

  font-size:23px;

}

#volunteer-page .volunteer-side-card h3{

  margin-bottom:12px;

  color:var(--vol-blue-deep);

  font-size:20px;

}

#volunteer-page .volunteer-side-primary h3{

  color:#ffffff;

}

#volunteer-page .volunteer-side-card p{

  margin-bottom:20px;

  font-size:14px;

}

#volunteer-page .volunteer-side-primary p{

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

}

#volunteer-page .volunteer-whatsapp{

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

  gap:8px;

  width:100%;

  padding:12px 17px;

  color:#ffffff !important;

  background:#25d366;

  border-radius:8px;

  font-size:14px;
  font-weight:700;

  text-decoration:none;

  transition:transform .2s ease;

  box-sizing:border-box;

}

#volunteer-page .volunteer-whatsapp:hover{

  transform:translateY(-2px);

}

#volunteer-page .volunteer-side-list{

  display:flex;

  flex-direction:column;

  gap:13px;

  padding:0;
  margin:0;

  list-style:none;

}

#volunteer-page .volunteer-side-list li{

  display:flex;

  align-items:flex-start;

  gap:10px;

  color:var(--vol-text);

  font-size:14px;

  line-height:1.5;

}

#volunteer-page .volunteer-side-list i{

  margin-top:3px;

  color:var(--vol-green);

}

#volunteer-page .volunteer-contact-link{

  display:inline-flex;

  align-items:center;

  gap:8px;

  color:var(--vol-blue);

  font-size:14px;
  font-weight:700;

  text-decoration:none;

}

#volunteer-page .volunteer-contact-link:hover{

  color:var(--vol-orange);

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1050px){

  #volunteer-page .volunteer-opportunity-grid{

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

  }

  #volunteer-page .volunteer-form-layout{

    grid-template-columns:
      minmax(0,1fr);

  }

  #volunteer-page .volunteer-sidebar{

    display:grid;

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

  }

}


@media(max-width:800px){

  #volunteer-page .volunteer-hero{

    min-height:auto;

    padding:75px 0;

  }

  #volunteer-page .volunteer-section{

    padding:70px 0;

  }

  #volunteer-page .volunteer-intro-grid{

    grid-template-columns:
      1fr;

  }

  #volunteer-page .volunteer-why-grid{

    grid-template-columns:
      1fr;

    gap:40px;

  }

  #volunteer-page .volunteer-sidebar{

    grid-template-columns:
      1fr;

  }

}


@media(max-width:650px){

  #volunteer-page .volunteer-hero{

    padding:65px 0;

  }

  #volunteer-page .volunteer-hero h1{

    font-size:42px;

  }

  #volunteer-page .volunteer-hero p{

    font-size:16px;

  }

  #volunteer-page .volunteer-hero-actions{

    flex-direction:column;

    align-items:stretch;

  }

  #volunteer-page .volunteer-hero-actions .btn{

    width:100%;

  }

  #volunteer-page .volunteer-section{

    padding:60px 0;

  }

  #volunteer-page .volunteer-section-heading{

    margin-bottom:35px;

  }

  #volunteer-page .volunteer-section-heading h2{

    font-size:35px;

  }

  #volunteer-page .volunteer-opportunity-grid{

    grid-template-columns:
      1fr;

  }

  #volunteer-page .volunteer-benefits{

    grid-template-columns:
      1fr;

  }

  #volunteer-page .volunteer-form-wrapper{

    padding:27px 20px;

  }

  #volunteer-page .volunteer-form-row{

    grid-template-columns:
      1fr;

    gap:0;

    margin-bottom:0;

  }

  #volunteer-page .volunteer-form-bottom{

    flex-direction:column;

    align-items:stretch;

  }

  #volunteer-page .volunteer-form-bottom p{

    max-width:none;

  }

  #volunteer-page .volunteer-form-bottom .btn{

    width:100%;

  }

  #volunteer-page .volunteer-why-card{

    padding:32px 25px;

  }

  #volunteer-page .volunteer-quote{

    font-size:25px;

  }

}


@media(max-width:420px){

  #volunteer-page .volunteer-hero h1{

    font-size:36px;

  }

  #volunteer-page .volunteer-section-heading h2{

    font-size:31px;

  }

  #volunteer-page .volunteer-focus-card,
  #volunteer-page .volunteer-opportunity-card,
  #volunteer-page .volunteer-side-card{

    padding:25px 22px;

  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  #volunteer-page *{

    scroll-behavior:auto !important;
    transition:none !important;
    animation:none !important;

  }

}
/* =========================================================
   SUPPORT / DONATE PAGE
   ========================================================= */

#support-page{

  --support-blue:#005b91;
  --support-blue-dark:#003d68;
  --support-blue-deep:#002e51;

  --support-sky:#eaf7fb;

  --support-orange:#f58220;
  --support-orange-dark:#e96d0b;

  --support-green:#42a64b;
  --support-teal:#159b9b;
  --support-pink:#d83b79;
  --support-purple:#7745a8;

  --support-text:#17324d;
  --support-muted:#64748b;
  --support-border:#dce8ef;

  --support-white:#ffffff;
  --support-light:#f7fafc;

  background:#ffffff;
  color:var(--support-text);
  overflow:hidden;

}


/* =========================================================
   COMMON
   ========================================================= */

#support-page *,
#support-page *::before,
#support-page *::after{
  box-sizing:border-box;
}

#support-page img{
  max-width:100%;
}

#support-page a{
  text-decoration:none;
}

#support-page button,
#support-page input{
  font:inherit;
}


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

#support-page .support-hero{

  position:relative;

  min-height:500px;

  display:flex;
  align-items:center;

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      var(--support-blue-deep) 0%,
      var(--support-blue-dark) 58%,
      var(--support-blue) 100%
    );

  color:#ffffff;

}


#support-page .support-hero::before{

  content:"";

  position:absolute;

  width:520px;
  height:520px;

  border-radius:50%;

  right:-180px;
  top:-240px;

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

}


#support-page .support-hero::after{

  content:"";

  position:absolute;

  width:360px;
  height:360px;

  border-radius:50%;

  left:-180px;
  bottom:-220px;

  background:rgba(245,130,32,.12);

}


#support-page .support-hero-shape{

  position:absolute;

  border-radius:50%;

  pointer-events:none;

}


#support-page .support-shape-one{

  width:180px;
  height:180px;

  right:18%;
  bottom:-90px;

  background:rgba(66,166,75,.13);

}


#support-page .support-shape-two{

  width:90px;
  height:90px;

  right:8%;
  top:28%;

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

}


#support-page .support-hero .container{

  position:relative;
  z-index:2;

}


#support-page .support-hero-content{

  max-width:850px;

  padding:80px 0;

}


#support-page .support-hero .eyebrow{

  display:inline-flex;
  align-items:center;

  margin-bottom:18px;

  font-size:13px;
  font-weight:700;

  letter-spacing:1.8px;
  text-transform:uppercase;

  color:#ffffff;

  opacity:.9;

}


#support-page .support-hero h1{

  margin:0 0 22px;

  max-width:850px;

  font-family:"Playfair Display",serif;

  font-size:clamp(42px,5.5vw,72px);

  line-height:1.05;

  letter-spacing:-1.5px;

  color:#ffffff;

}


#support-page .support-hero h1 span{

  display:block;

  color:#ffb36e;

}


#support-page .support-hero p{

  max-width:720px;

  margin:0;

  font-size:18px;

  line-height:1.8;

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

}


#support-page .support-hero-actions{

  display:flex;
  flex-wrap:wrap;

  gap:14px;

  margin-top:32px;

}


#support-page .support-hero .btn{

  min-height:48px;

}


/* HERO OUTLINE BUTTON */

#support-page .support-hero .support-btn-outline{

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

  gap:8px;

  color:#ffffff !important;

  -webkit-text-fill-color:#ffffff;

  background:transparent !important;

  border:1px solid rgba(255,255,255,.75) !important;

  opacity:1 !important;
  visibility:visible !important;

}


#support-page .support-hero .support-btn-outline i{

  color:#ffffff !important;

}


#support-page .support-hero .support-btn-outline:hover{

  color:var(--support-blue-dark) !important;

  -webkit-text-fill-color:var(--support-blue-dark);

  background:#ffffff !important;

  border-color:#ffffff !important;

}


#support-page .support-hero .support-btn-outline:hover i{

  color:var(--support-blue-dark) !important;

}


/* =========================================================
   COMMON SECTION
   ========================================================= */

#support-page .support-section{

  padding:90px 0;

}


#support-page .support-section-heading{

  max-width:760px;

  margin:0 auto 50px;

  text-align:center;

}


#support-page .support-section-heading .eyebrow{

  margin-bottom:12px;

  color:var(--support-orange);

  font-size:13px;

  font-weight:700;

  letter-spacing:1.8px;

  text-transform:uppercase;

}


#support-page .support-section-heading h2{

  margin:0 0 18px;

  font-family:"Playfair Display",serif;

  font-size:clamp(34px,4vw,52px);

  line-height:1.15;

  letter-spacing:-.7px;

  color:var(--support-blue-deep);

}


#support-page .support-section-heading h2 span{

  color:var(--support-orange);

}


#support-page .support-section-heading p{

  margin:0 auto;

  max-width:720px;

  font-size:16px;

  line-height:1.8;

  color:var(--support-muted);

}


/* =========================================================
   INTRO / IMPACT
   ========================================================= */

#support-page .support-intro{

  background:#ffffff;

}


#support-page .support-impact-grid{

  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:22px;

}


#support-page .support-impact-card{

  padding:32px 26px;

  background:#ffffff;

  border:1px solid var(--support-border);

  border-radius:18px;

  box-shadow:
    0 12px 35px rgba(0,61,104,.06);

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

}


#support-page .support-impact-card:hover{

  transform:translateY(-6px);

  border-color:#c8dce7;

  box-shadow:
    0 18px 42px rgba(0,61,104,.10);

}


#support-page .support-impact-icon{

  width:58px;
  height:58px;

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

  margin-bottom:22px;

  border-radius:15px;

  font-size:23px;

}


#support-page .support-icon-blue{

  color:var(--support-blue);

  background:#e9f5fb;

}


#support-page .support-icon-orange{

  color:var(--support-orange);

  background:#fff1e5;

}


#support-page .support-icon-pink{

  color:var(--support-pink);

  background:#fcebf3;

}


#support-page .support-icon-green{

  color:var(--support-green);

  background:#eaf7eb;

}


#support-page .support-impact-card h3{

  margin:0 0 11px;

  font-size:20px;

  line-height:1.3;

  color:var(--support-blue-deep);

}


#support-page .support-impact-card p{

  margin:0;

  font-size:15px;

  line-height:1.7;

  color:var(--support-muted);

}


/* =========================================================
   DONATION SECTION
   ========================================================= */

#support-page .support-donation{

  background:var(--support-sky);

}


#support-page .support-donation-grid{

  display:grid;

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

  gap:24px;

}


#support-page .support-donation-card{

  position:relative;

  padding:34px 30px;

  background:#ffffff;

  border:1px solid var(--support-border);

  border-radius:20px;

  box-shadow:
    0 15px 40px rgba(0,61,104,.07);

}


#support-page .support-card-top{

  display:flex;

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

  gap:15px;

  margin-bottom:22px;

}


#support-page .support-card-icon{

  width:58px;
  height:58px;

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

  border-radius:15px;

  color:var(--support-blue);

  background:#eaf5fa;

  font-size:22px;

}


#support-page .support-card-icon-orange{

  color:var(--support-orange);

  background:#fff1e5;

}


#support-page .support-card-icon-green{

  color:var(--support-green);

  background:#eaf7eb;

}


#support-page .support-coming-soon{

  display:inline-flex;
  align-items:center;

  padding:6px 10px;

  border-radius:30px;

  background:#f1f5f9;

  color:#64748b;

  font-size:11px;

  font-weight:700;

  letter-spacing:.6px;

  text-transform:uppercase;

  white-space:nowrap;

}


#support-page .support-donation-card h3{

  margin:0 0 12px;

  font-family:"Playfair Display",serif;

  font-size:27px;

  color:var(--support-blue-deep);

}


#support-page .support-donation-card > p{

  margin:0 0 25px;

  font-size:15px;

  line-height:1.7;

  color:var(--support-muted);

}


/* =========================================================
   DONATION AMOUNTS
   ========================================================= */

#support-page .support-amounts{

  display:grid;

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

  gap:10px;

  margin-bottom:20px;

}


#support-page .support-amounts button{

  min-height:46px;

  padding:10px 15px;

  border:1px solid var(--support-border);

  border-radius:10px;

  background:#ffffff;

  color:var(--support-blue-dark);

  font-weight:700;

  cursor:pointer;

  transition:
    color .2s ease,
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;

}


#support-page .support-amounts button:hover{

  color:#ffffff;

  background:var(--support-blue);

  border-color:var(--support-blue);

  transform:translateY(-2px);

}


/* =========================================================
   DUMMY DONATION BUTTON
   ========================================================= */

#support-page .support-dummy-button{

  width:100%;

  min-height:48px;

  border:none;

  cursor:pointer;

  opacity:.85;

}


#support-page .support-donation-card small{

  display:block;

  margin-top:13px;

  font-size:12px;

  line-height:1.5;

  color:#8796a5;

}


/* =========================================================
   QR CODE PLACEHOLDER
   ========================================================= */

#support-page .support-qr-placeholder{

  width:180px;
  height:180px;

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

  margin:5px auto 22px;

  border:2px dashed #cbdbe4;

  border-radius:16px;

  background:#f8fbfc;

  color:#91a4b1;

  text-align:center;

}


#support-page .support-qr-placeholder i{

  margin-bottom:10px;

  font-size:58px;

  color:#9babb5;

}


#support-page .support-qr-placeholder strong{

  display:block;

  font-size:14px;

  color:#667986;

}


#support-page .support-qr-placeholder span{

  display:block;

  margin-top:3px;

  font-size:12px;

  color:#95a5af;

}


/* =========================================================
   UPI ID
   ========================================================= */

#support-page .support-upi-id{

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

  gap:15px;

  padding:13px 15px;

  margin-bottom:12px;

  border:1px solid var(--support-border);

  border-radius:10px;

  background:#f8fbfc;

}


#support-page .support-upi-id span{

  font-size:12px;

  color:var(--support-muted);

}


#support-page .support-upi-id strong{

  font-size:14px;

  color:var(--support-blue-dark);

}


#support-page .support-copy-button{

  width:100%;

  min-height:44px;

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

  gap:8px;

  border:1px solid var(--support-blue);

  border-radius:9px;

  background:#ffffff;

  color:var(--support-blue);

  font-size:14px;

  font-weight:700;

  cursor:pointer;

}


#support-page .support-copy-button:hover{

  background:var(--support-blue);

  color:#ffffff;

}


/* =========================================================
   BANK DETAILS
   ========================================================= */

#support-page .support-bank-details{

  display:flex;
  flex-direction:column;

  gap:0;

  margin-top:18px;

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

}


#support-page .support-bank-details > div{

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

  gap:15px;

  padding:13px 0;

  border-bottom:1px solid var(--support-border);

}


#support-page .support-bank-details span{

  font-size:12px;

  color:var(--support-muted);

}


#support-page .support-bank-details strong{

  font-size:13px;

  color:var(--support-blue-dark);

  text-align:right;

}


/* =========================================================
   OTHER WAYS
   ========================================================= */

#support-page .support-ways{

  background:#ffffff;

}


#support-page .support-ways-grid{

  display:grid;

  grid-template-columns:
    minmax(0,.9fr)
    minmax(0,1.1fr);

  gap:70px;

  align-items:center;

}


#support-page .support-ways-content .eyebrow{

  margin-bottom:13px;

  color:var(--support-orange);

  font-size:13px;

  font-weight:700;

  letter-spacing:1.8px;

  text-transform:uppercase;

}


#support-page .support-ways-content h2{

  margin:0 0 20px;

  font-family:"Playfair Display",serif;

  font-size:clamp(35px,4vw,52px);

  line-height:1.15;

  color:var(--support-blue-deep);

}


#support-page .support-ways-content h2 span{

  color:var(--support-orange);

}


#support-page .support-ways-content > p{

  max-width:600px;

  margin:0 0 28px;

  font-size:16px;

  line-height:1.8;

  color:var(--support-muted);

}


#support-page .support-ways-list{

  display:flex;
  flex-direction:column;

  gap:16px;

}


#support-page .support-way-item{

  display:flex;
  align-items:flex-start;

  gap:18px;

  padding:22px;

  border:1px solid var(--support-border);

  border-radius:15px;

  background:#ffffff;

  box-shadow:
    0 10px 28px rgba(0,61,104,.05);

}


#support-page .support-way-icon{

  flex:0 0 50px;

  width:50px;
  height:50px;

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

  border-radius:13px;

  background:var(--support-sky);

  color:var(--support-blue);

  font-size:19px;

}


#support-page .support-way-item h3{

  margin:0 0 6px;

  font-size:18px;

  color:var(--support-blue-deep);

}


#support-page .support-way-item p{

  margin:0;

  font-size:14px;

  line-height:1.65;

  color:var(--support-muted);

}


/* =========================================================
   CSR
   ========================================================= */

#support-page .support-csr{

  padding-top:20px;

  background:#ffffff;

}


#support-page .support-csr-card{

  display:grid;

  grid-template-columns:100px 1fr;

  gap:30px;

  align-items:flex-start;

  padding:45px;

  border-radius:24px;

  background:
    linear-gradient(
      135deg,
      #eef8fc 0%,
      #f9fcfd 100%
    );

  border:1px solid #d9eaf1;

}


#support-page .support-csr-icon{

  width:82px;
  height:82px;

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

  border-radius:20px;

  background:#ffffff;

  color:var(--support-blue);

  font-size:30px;

  box-shadow:
    0 10px 25px rgba(0,61,104,.08);

}


#support-page .support-csr-content .eyebrow{

  margin-bottom:10px;

  color:var(--support-orange);

  font-size:12px;

  font-weight:700;

  letter-spacing:1.6px;

  text-transform:uppercase;

}


#support-page .support-csr-content h2{

  margin:0 0 15px;

  font-family:"Playfair Display",serif;

  font-size:clamp(30px,3.5vw,45px);

  line-height:1.15;

  color:var(--support-blue-deep);

}


#support-page .support-csr-content h2 span{

  color:var(--support-orange);

}


#support-page .support-csr-content p{

  max-width:800px;

  margin:0 0 25px;

  font-size:15px;

  line-height:1.8;

  color:var(--support-muted);

}


/* =========================================================
   THANK YOU
   ========================================================= */

#support-page .support-thankyou{

  padding:55px 0;

  background:#ffffff;

}


#support-page .support-thankyou-content{

  display:flex;

  align-items:center;

  gap:22px;

  max-width:850px;

  margin:0 auto;

  padding:28px 32px;

  border:1px solid #dcebe0;

  border-radius:18px;

  background:#f5fbf6;

}


#support-page .support-thankyou-icon{

  flex:0 0 58px;

  width:58px;
  height:58px;

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

  border-radius:15px;

  background:#e4f4e6;

  color:var(--support-green);

  font-size:22px;

}


#support-page .support-thankyou-content h2{

  margin:0 0 7px;

  font-family:"Playfair Display",serif;

  font-size:26px;

  color:var(--support-blue-deep);

}


#support-page .support-thankyou-content p{

  margin:0;

  font-size:14px;

  line-height:1.7;

  color:var(--support-muted);

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1100px){

  #support-page .support-impact-grid{

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

  }


  #support-page .support-donation-grid{

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

  }


  #support-page .support-bank-card{

    grid-column:1 / -1;

  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:767px){

  #support-page .support-hero{

    min-height:470px;

  }


  #support-page .support-hero-content{

    padding:65px 0;

  }


  #support-page .support-hero h1{

    font-size:42px;

    letter-spacing:-.8px;

  }


  #support-page .support-hero p{

    font-size:16px;

    line-height:1.7;

  }


  #support-page .support-hero-actions{

    flex-direction:column;

    align-items:stretch;

  }


  #support-page .support-hero-actions .btn{

    width:100%;

  }


  #support-page .support-section{

    padding:65px 0;

  }


  #support-page .support-section-heading{

    margin-bottom:35px;

  }


  #support-page .support-section-heading h2{

    font-size:34px;

  }


  #support-page .support-impact-grid{

    grid-template-columns:1fr;

    gap:16px;

  }


  #support-page .support-impact-card{

    padding:27px 23px;

  }


  #support-page .support-donation-grid{

    grid-template-columns:1fr;

    gap:18px;

  }


  #support-page .support-bank-card{

    grid-column:auto;

  }


  #support-page .support-donation-card{

    padding:28px 22px;

  }


  #support-page .support-ways-grid{

    grid-template-columns:1fr;

    gap:40px;

  }


  #support-page .support-csr{

    padding-top:0;

  }


  #support-page .support-csr-card{

    grid-template-columns:1fr;

    gap:22px;

    padding:30px 24px;

  }


  #support-page .support-csr-icon{

    width:65px;
    height:65px;

    font-size:23px;

  }


  #support-page .support-thankyou{

    padding:35px 0 55px;

  }


  #support-page .support-thankyou-content{

    align-items:flex-start;

    padding:23px;

  }


  #support-page .support-thankyou-content h2{

    font-size:23px;

  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width:480px){

  #support-page .support-hero h1{

    font-size:36px;

  }


  #support-page .support-hero p{

    font-size:15px;

  }


  #support-page .support-section-heading h2{

    font-size:30px;

  }


  #support-page .support-card-top{

    align-items:flex-start;

  }


  #support-page .support-coming-soon{

    font-size:9px;

    padding:5px 8px;

  }


  #support-page .support-upi-id{

    align-items:flex-start;
    flex-direction:column;

    gap:5px;

  }


  #support-page .support-bank-details > div{

    align-items:flex-start;
    flex-direction:column;

    gap:4px;

  }


  #support-page .support-bank-details strong{

    text-align:left;

  }


  #support-page .support-way-item{

    padding:18px;

  }


  #support-page .support-way-icon{

    flex-basis:44px;

    width:44px;
    height:44px;

    font-size:17px;

  }


  #support-page .support-thankyou-content{

    flex-direction:column;

  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){

  #support-page *,
  #support-page *::before,
  #support-page *::after{

    scroll-behavior:auto !important;
    transition:none !important;

  }

}
/* =========================================================
   BLESSINGS NGO
   GALLERY PAGE
   ========================================================= */

#gallery-page{

  --gallery-blue:#005b91;
  --gallery-blue-dark:#003d68;
  --gallery-blue-deep:#002e51;
  --gallery-orange:#f58220;
  --gallery-sky:#eaf7fb;

  background:#fff;

}


/* =========================================================
   PAGE HEADER
   ========================================================= */

#gallery-page .gallery-page-head{

  position:relative;

  padding:
    78px
    0
    62px;

  background:
    linear-gradient(
      135deg,
      #f3fbfe 0%,
      #ffffff 58%,
      #fff8f2 100%
    );

  overflow:hidden;

}


#gallery-page .gallery-page-head::before{

  content:"";

  position:absolute;

  width:420px;
  height:420px;

  top:-220px;
  right:-120px;

  border-radius:50%;

  background:
    rgba(0,91,145,.06);

}


#gallery-page .gallery-page-head::after{

  content:"";

  position:absolute;

  width:280px;
  height:280px;

  bottom:-170px;
  left:-100px;

  border-radius:50%;

  background:
    rgba(245,130,32,.06);

}


#gallery-page .gallery-page-head-inner{

  position:relative;

  z-index:2;

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:40px;

}


#gallery-page .gallery-page-copy{

  max-width:760px;

}


#gallery-page .gallery-eyebrow{

  display:inline-flex;

  align-items:center;

  gap:9px;

  margin-bottom:17px;

  color:var(--gallery-orange);

  font-size:12px;

  font-weight:700;

  letter-spacing:1.6px;

  text-transform:uppercase;

}


#gallery-page .gallery-eyebrow i{

  font-size:14px;

}


#gallery-page .gallery-page-copy h1{

  margin:0;

  color:var(--gallery-blue-deep);

  font-family:"Playfair Display",serif;

  font-size:clamp(42px,5vw,68px);

  line-height:1.02;

  letter-spacing:-1.5px;

}


#gallery-page .gallery-page-copy h1 span{

  color:var(--gallery-orange);

}


#gallery-page .gallery-page-copy p{

  max-width:670px;

  margin:20px 0 0;

  color:#607484;

  font-size:17px;

  line-height:1.75;

}


#gallery-page .gallery-page-count{

  flex:0 0 auto;

  min-width:150px;

  padding:22px 25px;

  border-left:3px solid var(--gallery-orange);

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

  box-shadow:
    0 12px 35px rgba(0,45,75,.06);

}


#gallery-page .gallery-page-count strong{

  display:block;

  color:var(--gallery-blue);

  font-size:34px;

  line-height:1;

}


#gallery-page .gallery-page-count span{

  display:block;

  margin-top:8px;

  color:#6b7b86;

  font-size:12px;

  line-height:1.45;

  font-weight:600;

}



/* =========================================================
   CATALOGUE
   ========================================================= */

#gallery-page .gallery-catalogue{

  padding:70px 0 90px;

  background:#fff;

}


#gallery-page .gallery-layout{

  display:grid;

  grid-template-columns:
    255px
    minmax(0,1fr);

  gap:42px;

  align-items:start;

}



/* =========================================================
   LEFT SIDEBAR
   ========================================================= */

#gallery-page .gallery-sidebar{

  position:sticky;

  top:105px;

}


#gallery-page .gallery-sidebar-card{

  padding:25px 20px 20px;

  border:1px solid #e3edf2;

  border-radius:14px;

  background:#fff;

  box-shadow:
    0 14px 40px rgba(0,45,75,.055);

}


#gallery-page .gallery-sidebar-heading{

  padding:
    2px
    5px
    20px;

  border-bottom:1px solid #edf2f5;

}


#gallery-page .gallery-sidebar-heading span{

  display:block;

  margin-bottom:5px;

  color:var(--gallery-orange);

  font-size:10px;

  font-weight:700;

  letter-spacing:1.5px;

  text-transform:uppercase;

}


#gallery-page .gallery-sidebar-heading h2{

  margin:0;

  color:var(--gallery-blue-deep);

  font-family:"Playfair Display",serif;

  font-size:27px;

  line-height:1.1;

}



/* FILTER SECTION */

#gallery-page .gallery-filter-section{

  padding:21px 0;

  border-bottom:1px solid #edf2f5;

}


#gallery-page .gallery-filter-title{

  margin:0 6px 11px;

  color:#7b8a94;

  font-size:10px;

  font-weight:700;

  letter-spacing:1.3px;

  text-transform:uppercase;

}


#gallery-page .gallery-filter{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

  min-height:42px;

  margin:3px 0;

  padding:8px 10px;

  border-radius:8px;

  color:#526773;

  text-decoration:none;

  font-size:13px;

  font-weight:600;

  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;

}


#gallery-page .gallery-filter span{

  display:flex;

  align-items:center;

  gap:10px;

}


#gallery-page .gallery-filter i{

  width:17px;

  color:#8495a0;

  text-align:center;

  transition:color .2s ease;

}


#gallery-page .gallery-filter b{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-width:26px;
  height:23px;

  padding:0 6px;

  border-radius:20px;

  background:#f1f5f7;

  color:#6f7e88;

  font-size:10px;

}


#gallery-page .gallery-filter:hover{

  background:#f1f8fb;

  color:var(--gallery-blue);

  transform:translateX(2px);

}


#gallery-page .gallery-filter:hover i{

  color:var(--gallery-blue);

}


#gallery-page .gallery-filter.active{

  background:var(--gallery-blue);

  color:#fff;

}


#gallery-page .gallery-filter.active i{

  color:#fff;

}


#gallery-page .gallery-filter.active b{

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

  color:#fff;

}



/* YEAR */

#gallery-page .gallery-year{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-width:52px;

  height:34px;

  margin:
    3px
    2px;

  padding:0 10px;

  border:1px solid #dce7ec;

  border-radius:7px;

  background:#fff;

  color:#61737e;

  text-decoration:none;

  font-size:11px;

  font-weight:700;

  transition:
    all .2s ease;

}


#gallery-page .gallery-year:hover{

  border-color:var(--gallery-blue);

  color:var(--gallery-blue);

}


#gallery-page .gallery-year.active{

  border-color:var(--gallery-blue);

  background:var(--gallery-blue);

  color:#fff;

}



/* SIDEBAR NOTE */

#gallery-page .gallery-sidebar-note{

  display:flex;

  align-items:flex-start;

  gap:10px;

  margin-top:19px;

  padding:13px;

  border-radius:9px;

  background:#fff8f2;

}


#gallery-page .gallery-sidebar-note i{

  flex:0 0 auto;

  margin-top:2px;

  color:var(--gallery-orange);

  font-size:14px;

}


#gallery-page .gallery-sidebar-note p{

  margin:0;

  color:#7a6a60;

  font-size:11px;

  line-height:1.55;

}



/* =========================================================
   RESULTS
   ========================================================= */

#gallery-page .gallery-results{

  min-width:0;

}


#gallery-page .gallery-results-top{

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:25px;

  margin-bottom:27px;

}


#gallery-page .gallery-results-label{

  display:block;

  margin-bottom:7px;

  color:var(--gallery-orange);

  font-size:10px;

  font-weight:700;

  letter-spacing:1.5px;

  text-transform:uppercase;

}


#gallery-page .gallery-results-top h2{

  margin:0;

  color:var(--gallery-blue-deep);

  font-family:"Playfair Display",serif;

  font-size:32px;

  line-height:1.15;

}


#gallery-page .gallery-results-top h2 span{

  color:var(--gallery-orange);

}


#gallery-page .gallery-results-total{

  display:flex;

  align-items:center;

  gap:8px;

  flex:0 0 auto;

  padding:9px 13px;

  border:1px solid #e1ebef;

  border-radius:8px;

  background:#fafcfd;

}


#gallery-page .gallery-results-total strong{

  color:var(--gallery-blue);

  font-size:19px;

}


#gallery-page .gallery-results-total span{

  color:#75858f;

  font-size:11px;

  font-weight:600;

}



/* =========================================================
   GALLERY GRID
   ========================================================= */

#gallery-page .gallery-grid{

  display:grid;

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

  gap:22px;

}


#gallery-page .gallery-card{

  min-width:0;

  overflow:hidden;

  border:1px solid #e3edf1;

  border-radius:13px;

  background:#fff;

  box-shadow:
    0 8px 25px rgba(0,45,75,.045);

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

}


#gallery-page .gallery-card:hover{

  transform:translateY(-5px);

  border-color:#d3e3ea;

  box-shadow:
    0 18px 38px rgba(0,45,75,.09);

}



/* =========================================================
   CARD IMAGE
   ========================================================= */

#gallery-page .gallery-card-image{

  position:relative;

  height:205px;

  overflow:hidden;

  background:#eaf2f5;

  cursor:pointer;

}


#gallery-page .gallery-card-image img{

  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform .5s ease;

}


#gallery-page .gallery-card:hover
.gallery-card-image img{

  transform:scale(1.055);

}


#gallery-page .gallery-card-image::after{

  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0) 48%,
      rgba(0,30,50,.30) 100%
    );

  pointer-events:none;

}



/* CATEGORY */

#gallery-page .gallery-card-category{

  position:absolute;

  top:12px;
  left:12px;

  z-index:3;

  display:inline-flex;

  align-items:center;

  gap:6px;

  padding:6px 9px;

  border-radius:5px;

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

  box-shadow:
    0 4px 12px rgba(0,0,0,.09);

  font-size:9px;

  font-weight:700;

  letter-spacing:.7px;

  text-transform:uppercase;

}


#gallery-page .gallery-card-category i{

  font-size:10px;

}


#gallery-page .gallery-card-category.event{

  color:var(--gallery-blue);

}


#gallery-page .gallery-card-category.photo{

  color:#159b9b;

}


#gallery-page .gallery-card-category.press{

  color:#7745a8;

}


#gallery-page .gallery-card-category.video{

  color:#d83b79;

}



/* OPEN ICON */

#gallery-page .gallery-card-open{

  position:absolute;

  right:12px;
  bottom:12px;

  z-index:3;

  width:35px;
  height:35px;

  display:flex;

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

  border-radius:50%;

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

  color:var(--gallery-blue);

  font-size:12px;

  opacity:0;

  transform:translateY(5px);

  transition:
    opacity .25s ease,
    transform .25s ease;

}


#gallery-page .gallery-card:hover
.gallery-card-open{

  opacity:1;

  transform:translateY(0);

}



/* =========================================================
   VIDEO PLAY BUTTON
   ========================================================= */

#gallery-page .gallery-video-play{

  position:absolute;

  top:50%;
  left:50%;

  z-index:4;

  width:58px;
  height:58px;

  display:flex;

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

  margin:
    -29px
    0
    0
    -29px;

  border:3px solid rgba(255,255,255,.92);

  border-radius:50%;

  background:rgba(0,61,104,.84);

  color:#fff;

  font-size:17px;

  box-shadow:
    0 8px 22px rgba(0,0,0,.2);

  transition:
    transform .25s ease,
    background .25s ease;

}


#gallery-page .gallery-card:hover
.gallery-video-play{

  transform:scale(1.08);

  background:var(--gallery-orange);

}



/* =========================================================
   CARD BODY
   ========================================================= */

#gallery-page .gallery-card-body{

  padding:18px 18px 20px;

}


#gallery-page .gallery-card-date{

  margin-bottom:7px;

  color:#8997a0;

  font-size:10px;

  font-weight:700;

  letter-spacing:.7px;

  text-transform:uppercase;

}


#gallery-page .gallery-card-body h3{

  margin:0;

  color:var(--gallery-blue-deep);

  font-family:"Playfair Display",serif;

  font-size:20px;

  line-height:1.25;

}


#gallery-page .gallery-card-body p{

  margin:9px 0 0;

  color:#71808a;

  font-size:12px;

  line-height:1.65;

}



/* =========================================================
   PAGINATION
   ========================================================= */

#gallery-page .gallery-pagination{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:7px;

  margin-top:42px;

}


#gallery-page .gallery-pagination-number{

  width:38px;
  height:38px;

  display:flex;

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

  border:1px solid #dce7ec;

  border-radius:7px;

  background:#fff;

  color:#647580;

  text-decoration:none;

  font-size:12px;

  font-weight:700;

  transition:
    all .2s ease;

}


#gallery-page .gallery-pagination-number:hover{

  border-color:var(--gallery-blue);

  color:var(--gallery-blue);

}


#gallery-page .gallery-pagination-number.active{

  border-color:var(--gallery-blue);

  background:var(--gallery-blue);

  color:#fff;

}


#gallery-page .gallery-pagination > span{

  padding:0 4px;

  color:#94a2aa;

  font-size:13px;

}


#gallery-page .gallery-pagination-next{

  display:inline-flex;

  align-items:center;

  gap:8px;

  min-height:38px;

  margin-left:5px;

  padding:0 15px;

  border:1px solid #dce7ec;

  border-radius:7px;

  background:#fff;

  color:var(--gallery-blue);

  text-decoration:none;

  font-size:11px;

  font-weight:700;

  transition:
    all .2s ease;

}


#gallery-page .gallery-pagination-next:hover{

  border-color:var(--gallery-blue);

  background:var(--gallery-blue);

  color:#fff;

}



/* =========================================================
   GALLERY LIGHTBOX
   IMPORTANT:
   Lightbox is outside #gallery-page, therefore DO NOT
   prefix these selectors with #gallery-page
   ========================================================= */

.gallery-lightbox{

  position:fixed;

  inset:0;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:25px;

  background:rgba(0,25,45,.90);

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  z-index:99999;

  transition:
    opacity .25s ease,
    visibility .25s ease;

}


.gallery-lightbox.active{

  opacity:1;

  visibility:visible;

  pointer-events:auto;

}


.gallery-lightbox-backdrop{

  position:absolute;

  inset:0;

  background:rgba(0,20,35,.35);

  cursor:pointer;

}


.gallery-lightbox-dialog{

  position:relative;

  z-index:2;

  width:min(1000px,94vw);

  max-height:92vh;

  overflow:hidden;

  border-radius:16px;

  background:#fff;

  box-shadow:
    0 30px 90px rgba(0,0,0,.42);

  transform:
    translateY(18px)
    scale(.97);

  transition:
    transform .28s ease;

}


.gallery-lightbox.active
.gallery-lightbox-dialog{

  transform:
    translateY(0)
    scale(1);

}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

.gallery-lightbox-close{

  position:absolute;

  top:14px;
  right:14px;

  z-index:10;

  width:42px;
  height:42px;

  display:flex;

  align-items:center;

  justify-content:center;

  border:0;

  border-radius:50%;

  background:rgba(0,45,75,.86);

  color:#fff;

  font-size:18px;

  cursor:pointer;

  transition:
    background .2s ease,
    transform .2s ease;

}


.gallery-lightbox-close:hover{

  background:#f58220;

  transform:rotate(90deg);

}


.gallery-lightbox-close i{

  color:#fff;

}



/* =========================================================
   MEDIA
   ========================================================= */

.gallery-lightbox-media{

  width:100%;

  background:#061d2c;

}


.gallery-lightbox-image-wrap{

  display:flex;

  align-items:center;

  justify-content:center;

  min-height:300px;

  max-height:72vh;

  padding:20px;

}


.gallery-lightbox-image-wrap img{

  display:block;

  max-width:100%;

  max-height:68vh;

  width:auto;

  height:auto;

  object-fit:contain;

  border-radius:6px;

}


.gallery-lightbox-video-wrap{

  display:none;

  aspect-ratio:16 / 9;

}


.gallery-lightbox-video-wrap iframe{

  display:block;

  width:100%;

  height:100%;

  border:0;

}



/* =========================================================
   CAPTION
   ========================================================= */

.gallery-lightbox-caption{

  padding:19px 24px 21px;

  background:#fff;

}


.gallery-lightbox-type{

  margin-bottom:6px;

  color:#f58220;

  font-size:10px;

  font-weight:700;

  letter-spacing:1.4px;

  text-transform:uppercase;

}


.gallery-lightbox-caption h3{

  margin:0;

  color:#002e51;

  font-family:"Playfair Display",serif;

  font-size:24px;

  line-height:1.25;

}



/* =========================================================
   BODY LOCK
   ========================================================= */

body.gallery-lightbox-open{

  overflow:hidden;

}



/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:600px){

  .gallery-lightbox{

    padding:12px;

  }


  .gallery-lightbox-dialog{

    width:100%;

    border-radius:13px;

  }


  .gallery-lightbox-image-wrap{

    min-height:220px;

    max-height:65vh;

    padding:12px;

  }


  .gallery-lightbox-image-wrap img{

    max-height:61vh;

  }


  .gallery-lightbox-caption{

    padding:
      15px
      18px
      18px;

  }


  .gallery-lightbox-caption h3{

    font-size:20px;

  }


  .gallery-lightbox-close{

    width:38px;

    height:38px;

    top:9px;

    right:9px;

  }

}
/* =========================================
   FOOTER - CONNECT WITH US
   REMOVE EXTRA GAPS
   ========================================= */

footer .socials{
  margin:0 !important;
  padding:0 !important;
}

footer .socials + p{
  margin-top:10px !important;
}

footer .socials ~ p{
  margin-bottom:6px !important;
  line-height:1.5 !important;
}

footer .socials ~ p:last-of-type{
  margin-bottom:10px !important;
}

footer .newsletter{
  margin-top:10px !important;
}

/* Remove default paragraph spacing */
footer > .container > div p{
  margin-top:0;
}

/* Keep Connect With Us compact */
footer h4{
  margin-bottom:12px !important;
}
/* =========================================
   FOOTER LINK COLUMNS - BALANCED HEIGHT
   ========================================= */

footer .footer-main > div:nth-child(2),
footer .footer-main > div:nth-child(3){
  min-height: 330px;
}

/* Keep the original footer link design */
footer .footer-links{
  display:flex;
  flex-direction:column;
}

/* Do not stretch individual links */
footer .footer-links a{
  flex:none;
}

/* Keep headings aligned */
footer .footer-main > div:nth-child(2) h4,
footer .footer-main > div:nth-child(3) h4{
  margin-bottom:14px;
}
/* =================================================
   FOOTER - CONNECT WITH US
   ================================================= */

footer .footer-contact{
  margin-top:18px;
}

footer .footer-contact p{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0 0 12px !important;
  padding:0 !important;
  line-height:1.5;
}

footer .footer-contact p:last-child{
  margin-bottom:0 !important;
}

footer .footer-contact i{
  flex:0 0 16px;
  width:16px;
  margin-top:4px;
  text-align:center;
}

footer .footer-contact a{
  word-break:break-word;
}


/* Newsletter spacing */

footer .footer-contact + .newsletter{
  margin-top:18px;
}


/* Keep Quick Links and Our Work visually balanced */

footer .footer-main > div:nth-child(2),
footer .footer-main > div:nth-child(3){
  min-height:330px;
}
/* ============================================================
   BLESSINGS NGO
   OUR CENTRE PAGE
   File: css/our-centre.css

   IMPORTANT:
   This stylesheet ONLY controls content inside:
   #our-centre

   Existing:
   - Header
   - Topbar
   - Navigation
   - .cta
   - Footer

   remain controlled by styles.css
   ============================================================ */


/* ============================================================
   PAGE BASE
   ============================================================ */

#our-centre{
    width:100%;
    overflow:hidden;
}

#our-centre *,
#our-centre *::before,
#our-centre *::after{
    box-sizing:border-box;
}

#our-centre img{
    max-width:100%;
}


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

#our-centre .centre-hero{
    position:relative;
    padding:95px 0 105px;
    overflow:hidden;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(245,130,32,.20),
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(21,155,155,.18),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #002e51,
            #005b91
        );
    color:#fff;
}

#our-centre .centre-hero::before{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    left:-90px;
    top:30px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:50%;
}

#our-centre .centre-hero::after{
    content:"";
    position:absolute;
    left:-5%;
    right:-5%;
    bottom:-35px;
    height:70px;
    border-radius:50% 50% 0 0;
    background:#fff;
}

#our-centre .centre-hero-inner{
    position:relative;
    z-index:2;
}

#our-centre .centre-hero-content{
    max-width:850px;
    margin:auto;
    text-align:center;
}

#our-centre .centre-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:20px;
    padding:8px 16px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:50px;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:12px;
    font-weight:800;
    letter-spacing:1.4px;
    text-transform:uppercase;
}

#our-centre .centre-eyebrow i{
    color:#f58220;
}

#our-centre .centre-hero h1{
    margin:0 0 20px;
    color:#fff;
    font-family:"Playfair Display",serif;
    font-size:clamp(40px,5vw,64px);
    line-height:1.08;
    font-weight:800;
    letter-spacing:-1.5px;
}

#our-centre .centre-hero h1 span{
    color:#ffd29d;
}

#our-centre .centre-hero p{
    max-width:760px;
    margin:0 auto;
    color:rgba(255,255,255,.88);
    font-size:18px;
    line-height:1.8;
}


/* ============================================================
   COMMON
   ============================================================ */

#our-centre .centre-intro,
#our-centre .centre-programs,
#our-centre .centre-approach,
#our-centre .centre-community,
#our-centre .centre-connect{
    position:relative;
}

#our-centre .centre-section-heading{
    max-width:800px;
    margin:0 auto 45px;
    text-align:center;
}

#our-centre .centre-section-label{
    display:block;
    margin-bottom:10px;
    color:#f58220;
    font-size:13px;
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

#our-centre .centre-section-heading h2,
#our-centre .centre-intro h2,
#our-centre .centre-community h2{
    margin:0 0 16px;
    color:#003d68;
    font-family:"Playfair Display",serif;
    font-size:clamp(30px,4vw,44px);
    line-height:1.18;
    font-weight:800;
}

#our-centre .centre-section-heading p{
    margin:0;
    color:#667786;
    font-size:16px;
    line-height:1.8;
}


/* ============================================================
   INTRO
   ============================================================ */

#our-centre .centre-intro{
    padding:70px 0 45px;
    background:#fff;
}

#our-centre .centre-intro-layout{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:55px;
    align-items:center;
}

#our-centre .centre-intro-content > p{
    margin:0 0 18px;
    color:#263746;
    font-size:16px;
    line-height:1.85;
}

#our-centre .centre-intro-content > p:last-child{
    margin-bottom:0;
}


/* ============================================================
   INTRO FEATURE
   ============================================================ */

#our-centre .centre-intro-feature{
    padding:35px;
    border:1px solid #e2eaf0;
    border-radius:20px;
    background:#fff;
    box-shadow:0 12px 35px rgba(0,61,104,.09);
}

#our-centre .centre-feature-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:62px;
    height:62px;
    margin-bottom:20px;
    border-radius:15px;
    background:#eaf7fb;
    color:#005b91;
    font-size:25px;
}

#our-centre .centre-intro-feature h3{
    margin:0 0 12px;
    color:#003d68;
    font-family:"Playfair Display",serif;
    font-size:25px;
    line-height:1.3;
}

#our-centre .centre-intro-feature p{
    margin:0;
    color:#667786;
    font-size:15px;
    line-height:1.75;
}


/* ============================================================
   PROGRAMS
   ============================================================ */

#our-centre .centre-programs{
    padding:75px 0 90px;
    background:#fff;
}

#our-centre .centre-program-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

#our-centre .centre-program-card{
    position:relative;
    min-height:230px;
    padding:28px;
    overflow:hidden;
    border:1px solid #e2eaf0;
    border-radius:18px;
    background:#fff;
    box-shadow:0 12px 35px rgba(0,61,104,.09);
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

#our-centre .centre-program-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:#005b91;
}

#our-centre .centre-program-card:nth-child(2)::before{
    background:#f58220;
}

#our-centre .centre-program-card:nth-child(3)::before{
    background:#42a64b;
}

#our-centre .centre-program-card:nth-child(4)::before{
    background:#7745a8;
}

#our-centre .centre-program-card:nth-child(5)::before{
    background:#d83b79;
}

#our-centre .centre-program-card:nth-child(6)::before{
    background:#159b9b;
}

#our-centre .centre-program-card:hover{
    transform:translateY(-7px);
    border-color:rgba(0,91,145,.20);
    box-shadow:0 20px 45px rgba(0,61,104,.13);
}

#our-centre .centre-program-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:50px;
    height:50px;
    margin-bottom:18px;
    border-radius:13px;
    background:#eaf7fb;
    color:#005b91;
    font-size:20px;
}

#our-centre .centre-program-card h3{
    margin:0 0 11px;
    color:#003d68;
    font-family:"Playfair Display",serif;
    font-size:21px;
    line-height:1.35;
}

#our-centre .centre-program-card p{
    margin:0 0 18px;
    color:#667786;
    font-size:14px;
    line-height:1.7;
}

#our-centre .centre-program-card a{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#005b91;
    font-size:13px;
    font-weight:800;
    text-decoration:none;
}

#our-centre .centre-program-card a i{
    transition:transform .25s ease;
}

#our-centre .centre-program-card a:hover i{
    transform:translateX(4px);
}


/* ============================================================
   APPROACH
   ============================================================ */

#our-centre .centre-approach{
    padding:80px 0;
    background:#eaf7fb;
}

#our-centre .centre-approach-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

#our-centre .centre-approach-item{
    position:relative;
    padding:28px 20px;
    border:1px solid rgba(0,91,145,.10);
    border-radius:16px;
    background:#fff;
    text-align:center;
    box-shadow:0 8px 25px rgba(0,61,104,.06);
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

#our-centre .centre-approach-item:hover{
    transform:translateY(-6px);
    box-shadow:0 16px 35px rgba(0,61,104,.11);
}

#our-centre .centre-approach-number{
    position:absolute;
    top:16px;
    right:18px;
    color:#dcebf2;
    font-size:12px;
    font-weight:800;
}

#our-centre .centre-approach-item i{
    display:flex;
    align-items:center;
    justify-content:center;
    width:55px;
    height:55px;
    margin:4px auto 18px;
    border-radius:50%;
    background:#005b91;
    color:#fff;
    font-size:20px;
}

#our-centre .centre-approach-item:nth-child(2) i{
    background:#f58220;
}

#our-centre .centre-approach-item:nth-child(3) i{
    background:#42a64b;
}

#our-centre .centre-approach-item:nth-child(4) i{
    background:#7745a8;
}

#our-centre .centre-approach-item h3{
    margin:0 0 9px;
    color:#003d68;
    font-family:"Playfair Display",serif;
    font-size:21px;
    line-height:1.3;
}

#our-centre .centre-approach-item p{
    margin:0;
    color:#667786;
    font-size:14px;
    line-height:1.7;
}


/* ============================================================
   COMMUNITY
   ============================================================ */

#our-centre .centre-community{
    padding:90px 0;
    background:#fff;
}

#our-centre .centre-community-layout{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:55px;
    align-items:center;
}

#our-centre .centre-community-content p{
    margin:0 0 18px;
    color:#263746;
    font-size:15px;
    line-height:1.8;
}

#our-centre .centre-community-content p:last-child{
    margin-bottom:0;
}

#our-centre .centre-community-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}

#our-centre .centre-community-item{
    display:flex;
    align-items:flex-start;
    gap:13px;
    padding:18px;
    border:1px solid #e2eaf0;
    border-radius:14px;
    background:#fff;
    box-shadow:0 7px 22px rgba(0,61,104,.05);
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

#our-centre .centre-community-item:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 28px rgba(0,61,104,.09);
}

#our-centre .centre-community-item i{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    width:43px;
    height:43px;
    border-radius:11px;
    background:#eaf7fb;
    color:#005b91;
    font-size:18px;
}

#our-centre .centre-community-item h3{
    margin:0 0 4px;
    color:#003d68;
    font-size:15px;
    line-height:1.4;
}

#our-centre .centre-community-item p{
    margin:0;
    color:#667786;
    font-size:13px;
    line-height:1.55;
}


/* ============================================================
   CONNECT
   ============================================================ */

#our-centre .centre-connect{
    padding:80px 0 90px;
    background:#f7fafc;
}

#our-centre .centre-connect-box{
    padding:45px;
    border:1px solid #e2eaf0;
    border-radius:20px;
    background:
        linear-gradient(
            135deg,
            #eaf7fb,
            #fff
        );
    text-align:center;
    box-shadow:0 12px 35px rgba(0,61,104,.07);
}

#our-centre .centre-connect-box h2{
    max-width:750px;
    margin:0 auto 15px;
    color:#003d68;
    font-family:"Playfair Display",serif;
    font-size:clamp(30px,4vw,44px);
    line-height:1.18;
}

#our-centre .centre-connect-box p{
    max-width:720px;
    margin:0 auto 25px;
    color:#667786;
    font-size:15px;
    line-height:1.8;
}

#our-centre .centre-connect-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width:1024px){

    #our-centre .centre-intro-layout{
        grid-template-columns:1fr;
        gap:35px;
    }

    #our-centre .centre-program-grid{
        grid-template-columns:repeat(2,1fr);
    }

    #our-centre .centre-approach-grid{
        grid-template-columns:repeat(2,1fr);
    }

    #our-centre .centre-community-layout{
        grid-template-columns:1fr;
        gap:35px;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width:767px){

    #our-centre .centre-hero{
        padding:70px 0 80px;
    }

    #our-centre .centre-hero h1{
        font-size:38px;
    }

    #our-centre .centre-hero p{
        font-size:15px;
        line-height:1.7;
    }

    #our-centre .centre-intro{
        padding:55px 0 30px;
    }

    #our-centre .centre-section-heading{
        margin-bottom:35px;
    }

    #our-centre .centre-section-heading h2,
    #our-centre .centre-intro h2,
    #our-centre .centre-community h2,
    #our-centre .centre-connect-box h2{
        font-size:30px;
    }

    #our-centre .centre-intro-content > p{
        font-size:15px;
    }

    #our-centre .centre-intro-feature{
        padding:28px 22px;
    }

    #our-centre .centre-programs{
        padding:60px 0 70px;
    }

    #our-centre .centre-program-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    #our-centre .centre-program-card{
        min-height:auto;
        padding:25px 22px;
    }

    #our-centre .centre-approach{
        padding:65px 0;
    }

    #our-centre .centre-approach-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    #our-centre .centre-community{
        padding:65px 0;
    }

    #our-centre .centre-community-list{
        grid-template-columns:1fr;
    }

    #our-centre .centre-connect{
        padding:60px 0 70px;
    }

    #our-centre .centre-connect-box{
        padding:32px 22px;
    }

    #our-centre .centre-connect-actions{
        width:100%;
        flex-direction:column;
    }

    #our-centre .centre-connect-actions .btn{
        width:100%;
    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width:480px){

    #our-centre .centre-hero h1{
        font-size:33px;
    }

    #our-centre .centre-eyebrow{
        font-size:11px;
        padding:7px 13px;
    }

    #our-centre .centre-program-card{
        padding:22px 18px;
    }

    #our-centre .centre-connect-box{
        padding:28px 18px;
    }

}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

@media (prefers-reduced-motion:reduce){

    #our-centre *,
    #our-centre *::before,
    #our-centre *::after{
        animation:none !important;
        transition:none !important;
    }

}
.footer-bottom a{
  position:relative;
  display:inline-block;
  color:inherit;
  text-decoration:none;
  transition:
    color .25s ease,
    transform .25s ease;
}

.footer-bottom a:hover{
  color:var(--orange);
  transform:translateY(-1px);
}

.footer-bottom a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  width:0;
  height:2px;
  background:var(--orange);
  transition:width .25s ease;
}

.footer-bottom a:hover::after{
  width:100%;
}
/* =====================================================
   FOOTER LINK HOVER
   ===================================================== */

footer a{
  transition:
    color .25s ease,
    transform .25s ease;
}


/* QUICK LINKS / OUR WORK / CONTACT LINKS */

footer .footer-links a:hover,
footer .footer-contact a:hover{
  color:var(--orange);
}


/* BOTTOM LEGAL LINKS */

footer .footer-bottom a:hover{
  color:var(--orange);
  transform:translateY(-1px);
}


/* =====================================================
   BOTTOM LINK UNDERLINE
   ===================================================== */

footer .footer-bottom a{
  position:relative;
  text-decoration:none;
}

footer .footer-bottom a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  width:0;
  height:2px;
  background:var(--orange);
  transition:width .25s ease;
}

footer .footer-bottom a:hover::after{
  width:100%;
}

/* =========================================================
   BLESSINGS NGO
   ATTRACTIVE BANK TRANSFER / DONATION CARD
   Page-specific CSS only
   ========================================================= */

.support-bank-single{
  position:relative;
  max-width:920px;
  margin:0 auto;
  padding:42px;
  background:
    linear-gradient(145deg,#ffffff 0%,#ffffff 72%,#f8f4ed 100%);
  border:1px solid rgba(16,47,69,.10);
  border-radius:28px;
  box-shadow:
    0 24px 60px rgba(16,47,69,.10),
    0 5px 18px rgba(16,47,69,.05);
  overflow:hidden;
}

/* Decorative background shape */
.support-bank-single::before{
  content:"";
  position:absolute;
  width:240px;
  height:240px;
  right:-100px;
  top:-110px;
  border-radius:50%;
  background:rgba(216,137,59,.08);
  pointer-events:none;
}

.support-bank-single::after{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  left:-80px;
  bottom:-75px;
  border-radius:50%;
  background:rgba(31,80,108,.06);
  pointer-events:none;
}


/* =========================================================
   HEADER
   ========================================================= */

.support-bank-header{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:32px;
}

.support-card-icon{
  width:68px;
  height:68px;
  min-width:68px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:20px;

  background:
    linear-gradient(135deg,#eaf6ef,#dff1e6);

  color:#3f9b61;

  font-size:25px;

  box-shadow:
    0 10px 25px rgba(63,155,97,.14),
    inset 0 0 0 1px rgba(63,155,97,.08);
}

.support-card-icon-green{
  background:
    linear-gradient(135deg,#eaf6ef,#dff1e6);
  color:#3f9b61;
}

.support-bank-header h3{
  margin:0 0 7px;

  color:#102f45;

  font-family:"Playfair Display",serif;

  font-size:29px;
  line-height:1.2;
  font-weight:700;
}

.support-bank-header p{
  margin:0;

  max-width:650px;

  color:#6d7a83;

  font-size:15px;
  line-height:1.7;
}


/* =========================================================
   BANK DETAILS BOX
   ========================================================= */

.support-bank-details{
  position:relative;
  z-index:1;

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

  border:1px solid rgba(16,47,69,.09);
  border-radius:20px;

  overflow:hidden;

  background:#fff;

  box-shadow:
    0 10px 30px rgba(16,47,69,.05);
}

.support-bank-details > div{
  position:relative;

  padding:23px 25px;

  background:#fff;

  border-bottom:1px solid rgba(16,47,69,.07);

  transition:
    background .25s ease,
    transform .25s ease;
}

.support-bank-details > div:nth-child(odd){
  border-right:1px solid rgba(16,47,69,.07);
}

.support-bank-details > div:nth-last-child(-n+2){
  border-bottom:0;
}

.support-bank-details > div:hover{
  background:#fbfaf7;
}

.support-bank-details span{
  display:block;

  margin-bottom:8px;

  color:#8a949b;

  font-size:11px;
  font-weight:700;

  text-transform:uppercase;
  letter-spacing:.09em;
}

.support-bank-details strong{
  display:block;

  color:#102f45;

  font-size:17px;
  line-height:1.45;
  font-weight:700;

  word-break:break-word;
}


/* Highlight important account number */

.support-bank-details > div:nth-child(2){
  background:#fcfaf5;
}

.support-bank-details > div:nth-child(2) strong{
  color:#b46f25;
}


/* =========================================================
   INFORMATION NOTE
   ========================================================= */

.support-bank-note{
  position:relative;
  z-index:1;

  display:flex;
  align-items:flex-start;

  gap:14px;

  margin:28px 0 26px;

  padding:18px 20px;

  background:
    linear-gradient(
      135deg,
      #f8f4ed 0%,
      #fbf8f2 100%
    );

  border:1px solid rgba(216,137,59,.14);

  border-radius:16px;
}

.support-bank-note i{
  display:flex;
  align-items:center;
  justify-content:center;

  width:28px;
  height:28px;
  min-width:28px;

  margin-top:1px;

  border-radius:50%;

  background:#fff;

  color:#d8893b;

  font-size:13px;

  box-shadow:0 3px 10px rgba(16,47,69,.07);
}

.support-bank-note p{
  margin:0;

  color:#68757e;

  font-size:14px;
  line-height:1.7;
}


/* =========================================================
   CONTACT BUTTON
   Scoped so global button styles remain untouched
   ========================================================= */

.support-bank-single > .btn{
  position:relative;
  z-index:2;

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

  min-height:50px;

  padding:13px 24px;

  border-radius:12px;

  font-weight:700;

  box-shadow:
    0 8px 20px rgba(216,137,59,.20);

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

.support-bank-single > .btn:hover{
  transform:translateY(-2px);

  box-shadow:
    0 13px 28px rgba(216,137,59,.27);
}

.support-bank-single > .btn i{
  transition:transform .25s ease;
}

.support-bank-single > .btn:hover i{
  transform:translateX(4px);
}


/* =========================================================
   SECTION HEADING
   Scoped only to support page
   ========================================================= */

.support-donation .support-section-heading{
  max-width:760px;
  margin:0 auto 42px;
  text-align:center;
}

.support-donation .support-section-heading .eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;

  margin-bottom:12px;

  color:#d8893b;

  font-size:12px;
  font-weight:800;

  text-transform:uppercase;
  letter-spacing:.13em;
}

.support-donation .support-section-heading h2{
  margin:0 0 15px;

  color:#102f45;

  font-family:"Playfair Display",serif;

  font-size:42px;
  line-height:1.15;
}

.support-donation .support-section-heading h2 span{
  display:inline;
  color:#d8893b;
}

.support-donation .support-section-heading p{
  max-width:680px;
  margin:0 auto;

  color:#6d7a83;

  font-size:16px;
  line-height:1.8;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:900px){

  .support-bank-single{
    padding:34px;
  }

  .support-donation .support-section-heading h2{
    font-size:36px;
  }

}


@media (max-width:700px){

  .support-bank-single{
    padding:26px 18px;

    border-radius:22px;
  }

  .support-bank-header{
    align-items:flex-start;
    gap:15px;
    margin-bottom:25px;
  }

  .support-card-icon{
    width:56px;
    height:56px;
    min-width:56px;

    border-radius:16px;

    font-size:21px;
  }

  .support-bank-header h3{
    font-size:24px;
  }

  .support-bank-header p{
    font-size:14px;
  }

  .support-bank-details{
    grid-template-columns:1fr;

    border-radius:16px;
  }

  .support-bank-details > div{
    padding:18px 19px;

    border-right:0 !important;
    border-bottom:1px solid rgba(16,47,69,.07);
  }

  .support-bank-details > div:last-child{
    border-bottom:0;
  }

  .support-bank-details > div:nth-last-child(-n+2){
    border-bottom:1px solid rgba(16,47,69,.07);
  }

  .support-bank-details > div:last-child{
    border-bottom:0;
  }

  .support-bank-details strong{
    font-size:16px;
  }

  .support-bank-note{
    margin:22px 0;

    padding:15px 16px;
  }

  .support-bank-note p{
    font-size:13px;
  }

  .support-donation .support-section-heading{
    margin-bottom:30px;
  }

  .support-donation .support-section-heading h2{
    font-size:31px;
  }

  .support-donation .support-section-heading h2 span{
    display:block;
  }

}


@media (max-width:430px){

  .support-bank-single{
    padding:22px 15px;
  }

  .support-bank-header{
    gap:12px;
  }

  .support-card-icon{
    width:50px;
    height:50px;
    min-width:50px;

    border-radius:14px;

    font-size:19px;
  }

  .support-bank-header h3{
    font-size:21px;
  }

  .support-donation .support-section-heading h2{
    font-size:28px;
  }

  .support-bank-single > .btn{
    width:100%;
  }

}