/* =========================================================
   HEALING HEART INITIATIVE
   Premium NGO Website
   Version 2.0
========================================================= */

/*==============================
  GOOGLE FONT
==============================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*==============================
  CSS VARIABLES
==============================*/

:root{

    --primary:#024b40;
    --primary-dark:#01332c;

    --accent:#f68221;
    --accent-light:#ffb067;

    --white:#ffffff;

    --light:#f8f9fa;

    --gray:#6b7280;

    --dark:#1e293b;

    --border:rgba(255,255,255,.15);

    --glass:rgba(255,255,255,.08);

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

    --shadow-hover:
        0 20px 60px rgba(0,0,0,.18);

    --radius:20px;

    --transition:.35s ease;

    --max-width:1300px;

}

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

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

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    background:var(--white);

    color:var(--dark);

    overflow-x:hidden;

    line-height:1.7;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}

button{

    border:none;

    cursor:pointer;

    font-family:inherit;

}

/*==============================
  CONTAINER
==============================*/

.container{

    width:min(92%,var(--max-width));

    margin:auto;

}

/*==============================
  SECTION
==============================*/

section{

    padding:110px 0;

    position:relative;

}

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title span{

    color:var(--accent);

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:.9rem;

    font-weight:700;

}

.section-title h2{

    margin-top:15px;

    font-size:3rem;

    color:var(--primary);

    line-height:1.2;

}

.section-title p{

    margin-top:18px;

    color:var(--gray);

    max-width:700px;

    margin-inline:auto;

}

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

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    background:var(--accent);

    color:#fff;

    padding:17px 34px;

    border-radius:50px;

    font-weight:600;

    transition:var(--transition);

    box-shadow:

        0 10px 30px rgba(246,130,33,.35);

}

.btn-primary:hover{

    transform:translateY(-5px);

    background:var(--accent-light);

}

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:17px 34px;

    border-radius:50px;

    border:2px solid rgba(255,255,255,.4);

    color:#fff;

    transition:var(--transition);

    backdrop-filter:blur(10px);

}

.btn-secondary:hover{

    background:#fff;

    color:var(--primary);

}

.btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 28px;

    border:2px solid var(--accent);

    color:var(--accent);

    border-radius:40px;

    transition:var(--transition);

}

.btn-outline:hover{

    background:var(--accent);

    color:#fff;

}

/*==============================
  PRELOADER
==============================*/

#preloader{

    position:fixed;

    inset:0;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.loader-heart{

    font-size:70px;

    color:var(--accent);

    animation:pulse 1.1s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.25);

    }

    100%{

        transform:scale(1);

    }

}

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

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

    transition:.4s;

}

.header.scrolled{

    background:rgba(2,75,64,.90);

    backdrop-filter:blur(18px);

    box-shadow:

        0 10px 30px rgba(0,0,0,.12);

}

.header .container{

    height:88px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

/*==============================
  LOGO
==============================*/

.logo{

    display:flex;

    align-items:center;

    gap:15px;

}

.logo img{

    width:60px;

    height:60px;

    border-radius:50%;

}

.logo-text h2{

    color:#fff;

    font-size:1.2rem;

    line-height:1;

}

.logo-text span{

    color:var(--accent);

    font-size:.95rem;

}

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

.nav-links{

    display:flex;

    gap:40px;

}

.nav-links a{

    color:#fff;

    font-weight:500;

    position:relative;

    transition:var(--transition);

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--accent);

    transition:.35s;

}

.nav-links a:hover{

    color:var(--accent);

}

.nav-links a:hover::after,

.nav-links a.active::after{

    width:100%;

}

.header-buttons{

    display:flex;

    align-items:center;

    gap:18px;

}

.menu-toggle{

    display:none;

    font-size:2rem;

    color:#fff;

    cursor:pointer;

}

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

.menu-toggle {
    display: none;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #fff;
    font-size: 1.8rem;
    cursor: pointer;
    z-index: 1002;
    border-radius: 12px;
    transition: .3s ease;
}

.menu-toggle:hover {
    background: rgba(255, 255, 255, .1);
}


/* Mobile menu header */
.mobile-menu-header {
    display: none;
}


/* Mobile buttons */
.mobile-menu-buttons {
    display: none;
}


/* Overlay */
.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: .35s ease;
    z-index: 998;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/*==================================================
                TABLET / MOBILE
==================================================*/

@media (max-width: 992px) {

    .menu-toggle {
        display: flex;
    }

    .navbar {
        position: fixed;

        top: 0;
        right: 0;

        width: min(360px, 88vw);
        height: 100dvh;

        background: var(--primary);

        display: flex;
        flex-direction: column;

        justify-content: flex-start;
        align-items: stretch;

        padding: 28px 25px 35px;

        transform: translateX(105%);
        visibility: hidden;

        transition:
            transform .4s cubic-bezier(.77, 0, .18, 1),
            visibility .4s;

        z-index: 1000;

        overflow-y: auto;
        box-shadow: -15px 0 50px rgba(0, 0, 0, .25);
    }


    /* Open menu */
    .navbar.active {
        transform: translateX(0);
        visibility: visible;
    }


    /* Mobile menu header */
    .mobile-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        padding-bottom: 25px;

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

        margin-bottom: 20px;
    }


    .mobile-menu-header span {
        color: #fff;
        font-size: 1.2rem;
        font-weight: 600;
    }


    .mobile-close {
        width: 42px;
        height: 42px;

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

        border-radius: 50%;

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

        color: #fff;

        font-size: 1.5rem;

        cursor: pointer;

        transition: .3s ease;
    }


    .mobile-close:hover {
        background: var(--accent);
        transform: rotate(90deg);
    }


    /* Navigation links */
    .nav-links {
        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 5px;

        width: 100%;
    }


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


    .nav-links a {
        display: flex;

        align-items: center;

        width: 100%;

        min-height: 54px;

        padding: 0 15px;

        border-radius: 12px;

        color: #fff;

        font-size: 1rem;

        transition:
            background .3s ease,
            color .3s ease,
            padding-left .3s ease;
    }


    .nav-links a::after {
        display: none;
    }


    .nav-links a:hover,
    .nav-links a.active {
        background: rgba(255, 255, 255, .08);
        color: var(--accent);
        padding-left: 22px;
    }


    /* Mobile action buttons */
    .mobile-menu-buttons {
        display: flex;

        flex-direction: column;

        gap: 12px;

        width: 100%;

        margin-top: auto;

        padding-top: 25px;

        border-top: 1px solid rgba(255, 255, 255, .12);
    }


    .mobile-menu-buttons a {
        width: 100%;

        min-height: 52px;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 50px;

        font-weight: 600;

        transition: .3s ease;
    }


    .mobile-volunteer {
        border: 2px solid var(--accent);
        color: var(--accent);
    }


    .mobile-volunteer:hover {
        background: var(--accent);
        color: #fff;
    }


    .mobile-donate {
        background: var(--accent);
        color: #fff;
        box-shadow: 0 8px 25px rgba(246, 130, 33, .25);
    }


    .mobile-donate:hover {
        background: var(--accent-light);
        transform: translateY(-2px);
    }


    /* Hide desktop buttons */
    .header-buttons {
        display: none;
    }


    /* Keep header above overlay */
    .header {
        z-index: 1001;
    }
}


/*==================================================
                SMALL PHONES
==================================================*/

@media (max-width: 480px) {

    .navbar {
        width: 92vw;
        padding: 22px 20px 28px;
    }

    .nav-links a {
        min-height: 50px;
    }

    .mobile-menu-header {
        padding-bottom: 20px;
    }

}

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

.hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#021b18;
}

/*==============================
    BACKGROUND SLIDER
==============================*/

.hero-slider{
    position:absolute;
    inset:0;
    z-index:1;
}

.hero-slider img{

    position:absolute;

    width:100%;
    height:100%;

    object-fit:cover;

    opacity:0;

    transform:scale(1);

    transition:
        opacity 1.5s ease,
        transform 8s linear;

}

.hero-slider img.active{

    opacity:1;

    transform:scale(1.08);

}

/*==============================
        OVERLAY
==============================*/

.hero-overlay{

    position:absolute;

    inset:0;

    z-index:2;

    background:
        linear-gradient(
            rgba(2,34,30,.82),
            rgba(2,34,30,.70)
        );

}

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

.hero-container{

    position:relative;

    z-index:10;

    display:grid;

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

    align-items:center;

    gap:70px;

    min-height:100vh;

    padding-top:100px;

}

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

.hero-text{

    color:#fff;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 20px;

    border-radius:50px;

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

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

    backdrop-filter:blur(15px);

    margin-bottom:28px;

    font-size:.95rem;

    color:#ffd6a8;

}

.hero-text h1{

    font-size:4.4rem;

    line-height:1.05;

    font-weight:800;

    margin-bottom:28px;

}

.hero-text h1 span{

    color:var(--accent);

    display:block;

    text-shadow:
        0 0 25px rgba(246,130,33,.35);

}

.hero-text p{

    max-width:650px;

    font-size:1.1rem;

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

    margin-bottom:40px;

    line-height:2;

}

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

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

}

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

.hero-image{

    position:relative;

    display:flex;

    justify-content:center;

}

.hero-image img{

    width:100%;

    max-width:560px;

    border-radius:30px;

    box-shadow:
        0 30px 70px rgba(0,0,0,.35);

    animation:
        heroFloat 5s ease-in-out infinite;

}

/* Floating Animation */

@keyframes heroFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}
/*==================================================
        PREMIUM DECORATIVE SHAPES
==================================================*/

.shape{

    position:absolute;

    border-radius:50%;

    filter:blur(2px);

    animation:floatShape 10s ease-in-out infinite;

    z-index:3;

}

.shape1{

    width:280px;
    height:280px;

    background:
        radial-gradient(circle,
        rgba(246,130,33,.30),
        transparent 70%);

    top:-80px;
    right:-60px;

}

.shape2{

    width:220px;
    height:220px;

    background:
        radial-gradient(circle,
        rgba(255,255,255,.10),
        transparent 70%);

    left:-80px;
    bottom:80px;

    animation-delay:2s;

}

.shape3{

    width:140px;
    height:140px;

    background:
        radial-gradient(circle,
        rgba(246,130,33,.20),
        transparent 70%);

    top:45%;
    left:52%;

    animation-delay:4s;

}

.shape4{

    width:90px;
    height:90px;

    background:
        radial-gradient(circle,
        rgba(255,255,255,.18),
        transparent 70%);

    right:28%;
    bottom:12%;

    animation-delay:1.5s;

}

/*==================================================
          FLOATING PARTICLES
==================================================*/

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    radial-gradient(circle at 20% 20%,rgba(255,255,255,.08) 2px,transparent 2px),

    radial-gradient(circle at 80% 30%,rgba(255,255,255,.05) 2px,transparent 2px),

    radial-gradient(circle at 70% 80%,rgba(255,255,255,.08) 2px,transparent 2px),

    radial-gradient(circle at 35% 65%,rgba(255,255,255,.05) 2px,transparent 2px);

    background-size:

    260px 260px;

    opacity:.45;

    animation:particleMove 30s linear infinite;

    z-index:2;

}



/*==================================================
        SCROLL INDICATOR
==================================================*/

.scroll-down{

    position:absolute;

    left:50%;

    bottom:170px;

    transform:translateX(-50%);

    width:34px;

    height:60px;

    border:2px solid rgba(255,255,255,.55);

    border-radius:25px;

    z-index:20;

}

.scroll-down span{

    position:absolute;

    left:50%;

    top:10px;

    width:6px;

    height:12px;

    border-radius:20px;

    background:white;

    transform:translateX(-50%);

    animation:scrollMouse 2s infinite;

}

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

@keyframes floatShape{

    0%,100%{

        transform:
        translateY(0)
        rotate(0deg);

    }

    50%{

        transform:
        translateY(-25px)
        rotate(8deg);

    }

}

@keyframes particleMove{

    from{

        background-position:0 0;

    }

    to{

        background-position:400px 700px;

    }

}

@keyframes scrollMouse{

    0%{

        opacity:1;

        transform:
        translate(-50%,0);

    }

    100%{

        opacity:0;

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

    }

}

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

@media(max-width:1100px){

.hero-container{

grid-template-columns:1fr;

text-align:center;

padding-top:140px;

}

.hero-text p{

margin:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-image{

margin-top:50px;

}

.impact-preview{

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

bottom:20px;

}

.scroll-down{

display:none;

}

}

@media(max-width:768px){

.hero{

padding-bottom:260px;

}

.hero-text h1{

font-size:3rem;

}

.hero-text p{

font-size:1rem;

line-height:1.8;

}

.hero-badge{

font-size:.8rem;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.hero-buttons a{

width:260px;

}

.impact-preview{

grid-template-columns:1fr;

}

.shape1{

width:180px;
height:180px;

}

.shape2{

width:150px;
height:150px;

}

.shape3{

display:none;

}

.shape4{

display:none;

}

}

@media(max-width:500px){

.hero-text h1{

font-size:2.4rem;

}

.hero-image img{

max-width:320px;

}

.impact-card{

padding:20px;

}

.impact-card h2{

font-size:2rem;

}

}
/*==============================
      HERO CONTROLS
==============================*/

.slider-controls{

position:absolute;

top:50%;

left:0;

width:100%;

display:flex;

justify-content:space-between;

padding:0 40px;

transform:translateY(-50%);

z-index:50;

pointer-events:none;

}

.slider-btn{

pointer-events:auto;

width:60px;

height:60px;

border-radius:50%;

border:none;

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

backdrop-filter:blur(15px);

color:white;

font-size:28px;

cursor:pointer;

transition:.3s;

}

.slider-btn:hover{

background:#f68221;

transform:scale(1.08);

}

.slider-dots{

position:absolute;

left:50%;

bottom:140px;

transform:translateX(-50%);

display:flex;

gap:12px;

z-index:50;

}

.dot{

width:13px;

height:13px;

border-radius:50%;

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

cursor:pointer;

transition:.35s;

}

.dot.active{

background:#f68221;

transform:scale(1.35);

box-shadow:0 0 18px rgba(246,130,33,.5);

}

@media(max-width:768px){

.slider-controls{

padding:0 15px;

}

.slider-btn{

width:46px;

height:46px;

font-size:20px;

}

.slider-dots{

bottom:180px;

}

}

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

.reveal{

    opacity:0;

    transform:translateY(80px);

    transition:

        opacity .9s ease,

        transform .9s ease;

}

.reveal.show{

    opacity:1;

    transform:translateY(0);

}

/* Different animation directions */

.reveal-left{

    opacity:0;

    transform:translateX(-80px);

    transition:.9s ease;

}

.reveal-left.show{

    opacity:1;

    transform:translateX(0);

}

.reveal-right{

    opacity:0;

    transform:translateX(80px);

    transition:.9s ease;

}

.reveal-right.show{

    opacity:1;

    transform:translateX(0);

}

.reveal-zoom{

    opacity:0;

    transform:scale(.85);

    transition:.9s ease;

}

.reveal-zoom.show{

    opacity:1;

    transform:scale(1);

}
/*==================================================
                ABOUT SECTION
==================================================*/

.about-section{

    padding:120px 0;

    background:#fff;

}

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

}

.section-subtitle{

    color:var(--accent);

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

}

.about-content h2{

    font-size:3rem;

    margin:20px 0;

    color:var(--primary);

    line-height:1.2;

}

.about-content h2 span{

    color:var(--accent);

}

.about-content .lead{

    font-size:1.2rem;

    color:var(--primary);

    font-weight:500;

    margin-bottom:20px;

}

.about-content p{

    margin-bottom:20px;

    color:var(--gray);

}

.about-buttons{

    display:flex;

    gap:20px;

    margin-top:35px;

    flex-wrap:wrap;

}

/* Images */

.about-images{

    position:relative;

}

.main-image{

    width:100%;

    border-radius:25px;

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

}

.small-image{

    position:absolute;

    width:180px;

    border-radius:20px;

    border:6px solid white;

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

}

.small-image.one{

    top:-30px;

    left:-40px;

}

.small-image.two{

    bottom:-30px;

    right:-30px;

}

.experience-box{

    position:absolute;

    left:40px;

    bottom:40px;

    background:var(--accent);

    color:white;

    padding:20px;

    border-radius:18px;

    text-align:center;

    box-shadow:0 15px 35px rgba(246,130,33,.35);

}

.experience-box h3{

    font-size:2rem;

    color:white;

}

.experience-box span{

    font-size:.9rem;

}

@media(max-width:992px){

.about-grid{

grid-template-columns:1fr;

}

.about-images{

margin-top:60px;

}

.small-image{

width:140px;

}

}

@media(max-width:768px){

.about-content h2{

font-size:2.3rem;

}

.small-image{

display:none;

}

.experience-box{

left:20px;

bottom:20px;

}

}


/*=========================
      LIGHTBOX
=========================*/

.lightbox{

    position:fixed;

    inset:0;

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

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.lightbox.active{

    display:flex;

}

.lightbox img{

    max-width:90%;

    max-height:85vh;

    border-radius:15px;

}

.close-lightbox{

    position:absolute;

    top:30px;

    right:40px;

    color:white;

    font-size:50px;

    cursor:pointer;

}
/*==================================================
                BACK TO TOP
==================================================*/

#backToTop{

    position:fixed;

    right:30px;

    bottom:30px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:var(--accent);

    color:#fff;

    font-size:24px;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:

        0 15px 35px rgba(246,130,33,.35);

    opacity:0;

    visibility:hidden;

    transform:translateY(30px);

    transition:.35s;

    z-index:999;

}

#backToTop.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

#backToTop:hover{

    transform:translateY(-8px);

    background:#ff9b45;

    box-shadow:

        0 20px 40px rgba(246,130,33,.45);

}

#backToTop:active{

    transform:scale(.95);

}

@media(max-width:768px){

#backToTop{

right:18px;

bottom:18px;

width:48px;

height:48px;

font-size:20px;

}

}
#backToTop.show{

    animation:pulseTop 2s infinite;

}

@keyframes pulseTop{

    0%{

        box-shadow:
        0 0 0 0 rgba(246,130,33,.45);

    }

    70%{

        box-shadow:
        0 0 0 18px rgba(246,130,33,0);

    }

    100%{

        box-shadow:
        0 0 0 0 rgba(246,130,33,0);

    }

}
/*==================================================
                DARK MODE TOGGLE
==================================================*/

.theme-toggle{

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

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

    backdrop-filter:blur(15px);

    color:white;

    font-size:22px;

    transition:.35s;

}

.theme-toggle:hover{

    transform:rotate(180deg);

    background:var(--accent);

}

/*==================================================
                THEME TRANSITION
==================================================*/

body,
section,
header,
footer,
.program-card,
.value-card,
.mv-card,
.impact-card,
.testimonial-card,
.gallery-item,
.faq-item{

    transition:

        background .4s ease,

        color .4s ease,

        border-color .4s ease;

}

/*==================================================
                DARK MODE
==================================================*/

body.dark{

    background:#0f172a;

    color:#f8fafc;

}

/* Sections */

body.dark section{

    background:#0f172a;

}

/* Navbar */

body.dark .header{

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

}

/* Cards */

body.dark .program-card,
body.dark .value-card,
body.dark .mv-card,
body.dark .testimonial-card,
body.dark .faq-item,
body.dark .impact-card{

    background:#1e293b;

    color:white;

}

/* Paragraphs */

body.dark p{

    color:#cbd5e1;

}

/* Titles */

body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4{

    color:white;

}

/* Footer */

body.dark footer{

    background:#020617;

}

/* Links */

body.dark a{

    color:white;

}

body.dark .nav-links a:hover{

    color:var(--accent);

}

/*=====================================================
        MISSION & VISION
======================================================*/

:root{

    --mv-green:#024b40;
    --mv-orange:#f68221;

    --mv-bg:#f8fbfa;

    --mv-text:#23403c;

    --mv-muted:#6b7b78;

    --mv-radius:28px;

    --mv-shadow:
        0 25px 60px rgba(0,0,0,.08);

}

/*=====================================================
SECTION
======================================================*/

.mission-vision{

    position:relative;

    padding:130px 0 180px;

    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        #f9fcfb 0%,
        #ffffff 45%,
        #eef8f4 100%);
}

/*=====================================================
BACKGROUND
======================================================*/

.mv-bg{

    position:absolute;

    inset:0;

    pointer-events:none;

    overflow:hidden;
}

/*=====================================================
Animated Blobs
======================================================*/

.blob{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    opacity:.12;

    animation:blobFloat 12s ease-in-out infinite;
}

.blob1{

    width:330px;

    height:330px;

    background:var(--mv-green);

    top:-80px;

    left:-120px;
}

.blob2{

    width:360px;

    height:360px;

    background:var(--mv-orange);

    top:20%;

    right:-140px;

    animation-delay:3s;
}

.blob3{

    width:300px;

    height:300px;

    background:var(--mv-green);

    bottom:-120px;

    right:20%;

    animation-delay:6s;
}

@keyframes blobFloat{

    0%{

        transform:translateY(0);
    }

    50%{

        transform:translateY(-30px);
    }

    100%{

        transform:translateY(0);
    }

}

/*=====================================================
Grid Pattern
======================================================*/

.grid-pattern{

    position:absolute;

    inset:0;

    opacity:.04;

    background-image:

    linear-gradient(
    rgba(2,75,64,.15) 1px,
    transparent 1px),

    linear-gradient(
    90deg,
    rgba(2,75,64,.15) 1px,
    transparent 1px);

    background-size:45px 45px;
}

/*=====================================================
Floating Circles
======================================================*/

.floating-circle{

    position:absolute;

    border-radius:50%;

    background:rgba(246,130,33,.15);

    animation:circleFloat 8s ease-in-out infinite;
}

.circle1{

    width:20px;

    height:20px;

    top:18%;

    left:10%;
}

.circle2{

    width:12px;

    height:12px;

    right:12%;

    top:42%;

    animation-delay:2s;
}

.circle3{

    width:18px;

    height:18px;

    bottom:18%;

    left:18%;

    animation-delay:5s;
}

@keyframes circleFloat{

    0%{

        transform:translateY(0);
    }

    50%{

        transform:translateY(-25px);
    }

    100%{

        transform:translateY(0);
    }

}

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

.mv-header{

    max-width:850px;

    margin:auto;

    text-align:center;

    position:relative;

    z-index:2;
}

.section-label{

    display:inline-flex;

    align-items:center;

    gap:18px;

    margin-bottom:30px;

    color:var(--mv-orange);

    font-size:.95rem;

    font-weight:700;

    letter-spacing:3px;
}

.section-label span{

    width:55px;

    height:2px;

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

.mv-header h2{

    font-size:clamp(2.6rem,5vw,4.8rem);

    color:var(--mv-green);

    line-height:1.15;

    margin-bottom:28px;

    font-weight:800;
}

.mv-header h2 span{

    color:var(--mv-orange);
}

.mv-header p{

    max-width:720px;

    margin:auto;

    font-size:1.15rem;

    color:var(--mv-muted);

    line-height:2;
}

/*=====================================================
GRID
======================================================*/

.mv-grid{

    margin-top:90px;

    display:grid;

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

    gap:35px;

    align-items:center;

    position:relative;

    z-index:2;
}

/*=====================================================
CARDS
======================================================*/

.mv-card{

    position:relative;

    overflow:hidden;

    padding:50px;

    border-radius:var(--mv-radius);

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

    backdrop-filter:blur(14px);

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

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

    transition:.45s ease;
}

.mv-card:hover{

    transform:translateY(-12px);

    box-shadow:

    0 45px 90px rgba(2,75,64,.14);
}

/*=====================================================
TOP GLOW
======================================================*/

.card-glow{

    position:absolute;

    width:240px;

    height:240px;

    border-radius:50%;

    right:-120px;

    top:-120px;

    background:rgba(246,130,33,.08);

    transition:.45s;
}

.vision .card-glow{

    background:rgba(2,75,64,.08);
}

.mv-card:hover .card-glow{

    transform:scale(1.3);
}

/*=====================================================
ICON
======================================================*/

.mv-icon{

    width:100px;

    height:100px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:linear-gradient(
    135deg,
    #024b40,
    #046457);

    color:#fff;

    font-size:2.8rem;

    margin-bottom:28px;

    transition:.45s;
}

.vision .mv-icon{

    background:linear-gradient(
    135deg,
    #f68221,
    #ff9a3d);
}

.mv-card:hover .mv-icon{

    transform:rotate(8deg) scale(1.08);
}

.mini-title{

    color:var(--mv-orange);

    letter-spacing:3px;

    font-size:.9rem;

    font-weight:700;
}

.mv-card h3{

    margin:15px 0 22px;

    color:var(--mv-green);

    font-size:2rem;

    line-height:1.3;
}

.mv-card p{

    color:var(--mv-muted);

    line-height:1.9;

    margin-bottom:28px;
}

.mv-card ul{

    list-style:none;

    display:grid;

    gap:16px;

    margin-bottom:35px;
}

.mv-card li{

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:600;

    color:var(--mv-green);
}

.mv-card li i{

    color:var(--mv-orange);
    font-size:1.15rem;
}

/*=====================================================
    CENTER LOGO
======================================================*/

.mv-middle{

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    position:relative;
}

.logo-ring{

    position:relative;
    width:230px;
    height:230px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.ring{

    position:absolute;
    border-radius:50%;
    border:2px dashed rgba(2,75,64,.15);
}

.ring1{

    width:230px;
    height:230px;
    animation:rotateRing 25s linear infinite;
}

.ring2{

    width:170px;
    height:170px;
    border-color:rgba(246,130,33,.30);
    animation:rotateRingReverse 18s linear infinite;
}

.center-logo{

    width:110px;
    height:110px;

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

    border-radius:50%;

    background:linear-gradient(
    135deg,
    #024b40,
    #046658);

    color:#fff;

    font-size:3rem;

    box-shadow:
    0 25px 50px rgba(2,75,64,.25);

    animation:pulseLogo 3s ease infinite;
}

.mv-middle h4{

    margin-top:30px;
    font-size:1.9rem;
    color:#024b40;
    font-weight:800;
}

.mv-middle p{

    margin-top:10px;
    color:#6b7b78;
    font-size:1rem;
}

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

.mv-btn{

    display:inline-flex;

    align-items:center;

    gap:14px;

    padding:16px 34px;

    border-radius:50px;

    background:#024b40;

    color:#fff;

    text-decoration:none;

    font-weight:700;

    position:relative;

    overflow:hidden;

    transition:.4s ease;
}

.mv-btn.orange{

    background:#f68221;
}

.mv-btn::before{

    content:"";

    position:absolute;

    width:0;

    height:100%;

    top:0;

    left:0;

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

    transition:.45s;
}

.mv-btn:hover::before{

    width:100%;
}

.mv-btn:hover{

    transform:translateY(-5px);

    box-shadow:
    0 20px 45px rgba(2,75,64,.25);
}

.mv-btn.orange:hover{

    box-shadow:
    0 20px 45px rgba(246,130,33,.30);
}

.mv-btn i{

    transition:.35s;
}

.mv-btn:hover i{

    transform:translateX(8px);
}

/*=====================================================
    VALUES
======================================================*/

.values-section{

    margin-top:120px;

    position:relative;

    z-index:2;
}

.values-title{

    text-align:center;

    margin-bottom:60px;
}

.values-title h3{

    font-size:2.5rem;

    color:#024b40;

    margin-bottom:15px;
}

.values-title p{

    color:#6b7b78;

    max-width:600px;

    margin:auto;

    line-height:1.8;
}

.values-grid{

    display:grid;

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

    gap:30px;
}

.value-card{

    position:relative;

    background:#fff;

    border-radius:24px;

    padding:40px 28px;

    text-align:center;

    overflow:hidden;

    transition:.45s;

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

.value-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(
    90deg,
    #024b40,
    #f68221);

    transform:scaleX(0);

    transform-origin:left;

    transition:.45s;
}

.value-card:hover::before{

    transform:scaleX(1);
}

.value-card:hover{

    transform:translateY(-12px);

    box-shadow:
    0 35px 70px rgba(2,75,64,.12);
}

.value-icon{

    width:85px;
    height:85px;

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:linear-gradient(
    135deg,
    #024b40,
    #046658);

    color:#fff;

    font-size:2rem;

    margin-bottom:25px;

    transition:.45s;
}

.value-card:hover .value-icon{

    transform:rotate(10deg) scale(1.08);

    background:linear-gradient(
    135deg,
    #f68221,
    #ff9738);
}

.value-card h4{

    color:#024b40;

    margin-bottom:15px;

    font-size:1.35rem;
}

.value-card p{

    color:#6b7b78;

    line-height:1.8;

    font-size:.95rem;
}

/*=====================================================
    ANIMATIONS
======================================================*/

@keyframes rotateRing{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes rotateRingReverse{

    from{

        transform:rotate(360deg);

    }

    to{

        transform:rotate(0deg);

    }

}

@keyframes pulseLogo{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

/*=====================================================
    SVG WAVE DIVIDER
======================================================*/

.wave-divider{

    position:absolute;

    left:0;

    bottom:-2px;

    width:100%;

    line-height:0;

    overflow:hidden;
}

.wave-divider svg{

    display:block;

    width:100%;

    height:170px;
}

/*=====================================================
    CARD HOVER BORDER
======================================================*/

.mv-card{

    isolation:isolate;
}

.mv-card::before{

    content:"";

    position:absolute;

    inset:0;

    padding:1px;

    border-radius:inherit;

    background:linear-gradient(
        135deg,
        rgba(2,75,64,.35),
        rgba(246,130,33,.25),
        rgba(2,75,64,.35));

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    opacity:0;

    transition:.4s;
}

.mv-card:hover::before{

    opacity:1;
}

/*=====================================================
    IMAGE-LIKE DEPTH
======================================================*/

.mv-card{

    transform-style:preserve-3d;
}

.mv-icon,
.mv-btn,
.center-logo{

    transform:translateZ(30px);
}

/*=====================================================
    VALUE CARD GLOW
======================================================*/

.value-card::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    right:-90px;

    top:-90px;

    border-radius:50%;

    background:rgba(246,130,33,.06);

    transition:.5s;
}

.value-card:hover::after{

    transform:scale(1.4);
}

/*=====================================================
    SMOOTH TRANSITIONS
======================================================*/

.mv-card,
.value-card,
.mv-btn,
.value-icon,
.mv-icon{

    will-change:transform;
}

/*=====================================================
    RESPONSIVE
======================================================*/

@media (max-width:1200px){

    .mv-grid{

        grid-template-columns:1fr;
    }

    .mv-middle{

        order:-1;

        margin-bottom:20px;
    }

}

@media (max-width:992px){

    .mission-vision{

        padding:100px 0 140px;
    }

    .values-grid{

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

    .mv-card{

        padding:40px;
    }

}

@media (max-width:768px){

    .mission-vision{

        padding:80px 0 120px;
    }

    .mv-header{

        text-align:center;
    }

    .mv-header h2{

        font-size:2.4rem;
    }

    .mv-card{

        padding:30px;
    }

    .mv-card h3{

        font-size:1.6rem;
    }

    .mv-icon{

        width:80px;

        height:80px;

        font-size:2rem;
    }

    .logo-ring{

        width:180px;

        height:180px;
    }

    .ring1{

        width:180px;

        height:180px;
    }

    .ring2{

        width:130px;

        height:130px;
    }

    .center-logo{

        width:90px;

        height:90px;

        font-size:2.3rem;
    }

    .values-grid{

        grid-template-columns:1fr;
    }

}

@media (max-width:480px){

    .section-label{

        font-size:.8rem;

        gap:10px;
    }

    .section-label span{

        width:25px;
    }

    .mv-header h2{

        font-size:2rem;
    }

    .mv-header p{

        font-size:1rem;
    }

    .mv-btn{

        width:100%;

        justify-content:center;
    }

}

/*=====================================================
    ACCESSIBILITY
======================================================*/

.mv-btn:focus-visible,
.value-card:focus-within{

    outline:3px solid #f68221;

    outline-offset:4px;
}

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

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

    *,
    *::before,
    *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;
    }

}
/*=====================================================
        PART 2D
   PREMIUM EFFECTS & MICRO ANIMATIONS
======================================================*/

/*==============================
Floating Light Overlay
==============================*/

.mission-vision::before{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    left:-220px;
    top:-220px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(2,75,64,.08) 0%,
    transparent 70%);

    pointer-events:none;

    animation:lightMove1 16s ease-in-out infinite;
}

.mission-vision::after{

    content:"";

    position:absolute;

    width:600px;
    height:600px;

    right:-180px;
    bottom:-220px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(246,130,33,.08) 0%,
    transparent 70%);

    pointer-events:none;

    animation:lightMove2 18s ease-in-out infinite;
}

@keyframes lightMove1{

    0%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(40px,60px);

    }

    100%{

        transform:translate(0,0);

    }

}

@keyframes lightMove2{

    0%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(-60px,-40px);

    }

    100%{

        transform:translate(0,0);

    }

}

/*==============================
Animated Top Line
==============================*/

.mv-card{

    overflow:hidden;
}

.mv-card::after{

    content:"";

    position:absolute;

    top:0;
    left:-100%;

    width:100%;
    height:4px;

    background:
    linear-gradient(
        90deg,
        transparent,
        #f68221,
        #024b40,
        transparent);

    transition:1.2s;
}

.mv-card:hover::after{

    left:100%;
}

/*==============================
Glass Reflection
==============================*/

.mv-card .glass-reflection{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;
}

.mv-card .glass-reflection::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-40%;

    width:40%;

    height:300%;

    transform:rotate(25deg);

    background:
    linear-gradient(

        transparent,

        rgba(255,255,255,.45),

        transparent);

}

.mv-card:hover .glass-reflection::before{

    animation:glassSwipe 1.1s ease;
}

@keyframes glassSwipe{

    from{

        transform:
        translateX(0)
        rotate(25deg);

    }

    to{

        transform:
        translateX(600px)
        rotate(25deg);

    }

}

/*==============================
Icon Halo
==============================*/

.mv-icon{

    position:relative;
}

.mv-icon::before{

    content:"";

    position:absolute;

    inset:-12px;

    border-radius:50%;

    border:2px dashed rgba(255,255,255,.25);

    animation:rotateHalo 18s linear infinite;
}

@keyframes rotateHalo{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(360deg);

    }

}

/*==============================
Soft Pulse
==============================*/

.mv-icon::after{

    content:"";

    position:absolute;

    width:100%;
    height:100%;

    border-radius:50%;

    background:inherit;

    z-index:-1;

    opacity:.25;

    animation:pulseGlow 2.8s ease infinite;
}

@keyframes pulseGlow{

    0%{

        transform:scale(1);

        opacity:.25;

    }

    70%{

        transform:scale(1.45);

        opacity:0;

    }

    100%{

        transform:scale(1);

        opacity:0;

    }

}

/*==============================
Value Card Hover
==============================*/

.value-card{

    cursor:default;
}

.value-card:hover h4{

    color:#f68221;
}

.value-card:hover p{

    color:#024b40;
}

/*==============================
Buttons Ripple
==============================*/

.mv-btn{

    isolation:isolate;
}

.mv-btn span{

    position:relative;

    z-index:2;
}

.mv-btn::after{

    content:"";

    position:absolute;

    width:20px;
    height:20px;

    left:50%;
    top:50%;

    border-radius:50%;

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

    background:

    rgba(255,255,255,.18);

    transition:.55s;
}

.mv-btn:hover::after{

    transform:

    translate(-50%,-50%)

    scale(16);
}

/*==============================
Heading Animation
==============================*/

.mv-header h2{

    position:relative;
}

.mv-header h2::after{

    content:"";

    position:absolute;

    bottom:-14px;

    left:50%;

    width:120px;

    height:5px;

    transform:translateX(-50%);

    border-radius:20px;

    background:
    linear-gradient(
        90deg,
        #024b40,
        #f68221);

}

/*==============================
Floating Dots
==============================*/

.grid-pattern{

    animation:gridMove 40s linear infinite;
}

@keyframes gridMove{

    from{

        background-position:0 0;

    }

    to{

        background-position:45px 45px;

    }

}

/*==============================
Shadow Enhancement
==============================*/

.mv-card:hover{

    box-shadow:

    0 45px 90px rgba(2,75,64,.10),

    0 0 60px rgba(246,130,33,.08);

}

.value-card:hover{

    box-shadow:

    0 35px 70px rgba(2,75,64,.10),

    0 0 40px rgba(246,130,33,.08);

}



/*=====================================
            Values Title
======================================*/

.values-title{

    text-align:center;

    margin-bottom:50px;

}

.values-title h3{

    font-size:2rem;

    color:var(--primary);

}


/*=====================================
            Values Grid
======================================*/

.values-grid{

    display:grid;

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

    gap:30px;

}

.value-card{

    background:#fff;

    padding:35px;

    border-radius:20px;

    text-align:center;

    transition:.4s;

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

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.value-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 45px rgba(0,0,0,.10);

}

.value-icon{

    width:75px;

    height:75px;

    margin:0 auto 20px;

    border-radius:50%;

    background:linear-gradient(135deg,#22c55e,#16a34a);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    color:#fff;

}

.value-card h4{

    color:var(--primary);

    margin-bottom:15px;

}

.value-card p{

    color:var(--gray);

    line-height:1.7;

}

/* ==================================================
   CORE VALUES SECTION
   Healing Hearts Initiative
================================================== */

.core-values {
    --values-green: #024b40;
    --values-orange: #f68221;
    --values-text: #263b35;
    --values-muted: #718078;
    --values-background: #f6f9f7;

    position: relative;
    overflow: hidden;

    padding: 100px 0;

    background: var(--values-background);
}


/* ==================================================
   SECTION CONTAINER
================================================== */

.core-values .container {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
}


/* ==================================================
   SECTION HEADER
================================================== */

.values-header {
    max-width: 760px;

    margin: 0 auto 60px;

    text-align: center;
}


/* Label */

.values-header .section-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-bottom: 22px;

    color: var(--values-green);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.values-header .label-line {
    display: block;

    width: 25px;
    height: 2px;

    background: var(--values-orange);

    border-radius: 10px;
}


/* Heading */

.values-header h2 {
    margin: 0;

    color: var(--values-green);

    font-size: clamp(32px, 4vw, 47px);
    font-weight: 800;

    line-height: 1.2;
    letter-spacing: -1.3px;
}

.values-header h2 span {
    display: block;

    margin-top: 7px;

    color: var(--values-orange);
}


/* Description */

.values-header > p {
    max-width: 590px;

    margin: 20px auto 0;

    color: var(--values-muted);

    font-size: 16px;
    line-height: 1.8;
}


/* ==================================================
   VALUES GRID
================================================== */

.values-grid {
    display: grid;

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

    gap: 24px;

    align-items: stretch;
}


/* ==================================================
   VALUE CARD
================================================== */

.value-item {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 320px;

    padding: 30px 25px 22px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid rgba(2, 75, 64, 0.09);
    border-radius: 18px;

    box-shadow: 0 8px 28px rgba(2, 75, 64, 0.045);

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


/* Top orange accent */

.value-item::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: var(--values-orange);

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.35s ease;
}


/* Soft background decoration */

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

    position: absolute;
    z-index: -1;

    top: -65px;
    right: -65px;

    width: 145px;
    height: 145px;

    background: rgba(2, 75, 64, 0.035);

    border-radius: 50%;

    transition:
        transform 0.35s ease,
        background 0.35s ease;
}


/* Card hover */

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

    border-color: rgba(246, 130, 33, 0.45);

    box-shadow: 0 20px 45px rgba(2, 75, 64, 0.10);
}

.value-item:hover::before {
    transform: scaleX(1);
}

.value-item:hover::after {
    background: rgba(246, 130, 33, 0.09);

    transform: scale(1.2);
}


/* ==================================================
   CARD TOP ROW
================================================== */

.value-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 28px;
}


/* Number */

.value-number {
    color: #a0b2aa;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;

    transition: color 0.3s ease;
}

.value-item:hover .value-number {
    color: var(--values-orange);
}


/* ==================================================
   VALUE ICON
================================================== */

.value-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 61px;
    height: 61px;

    flex-shrink: 0;

    color: var(--values-green);

    background: #edf5f0;

    border: 1px solid rgba(2, 75, 64, 0.05);
    border-radius: 16px;

    font-size: 28px;

    transition:
        color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}

.value-item:hover .value-icon {
    color: #ffffff;

    background: var(--values-green);

    transform: rotate(-5deg);
}


/* ==================================================
   VALUE TITLE
================================================== */

.value-item h3 {
    margin: 0 0 13px;

    color: var(--values-green);

    font-size: 22px;
    font-weight: 800;

    line-height: 1.35;

    transition: color 0.3s ease;
}

.value-item:hover h3 {
    color: var(--values-orange);
}


/* ==================================================
   VALUE DESCRIPTION
================================================== */

.value-item > p {
    margin: 0 0 25px;

    color: var(--values-muted);

    font-size: 14px;
    line-height: 1.9;
}


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

.value-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;

    margin-top: auto;
    padding-top: 17px;

    border-top: 1px solid rgba(2, 75, 64, 0.09);
}

.value-card-footer span {
    color: var(--values-green);

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

    line-height: 1.5;
}

.value-card-footer i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 29px;
    height: 29px;

    flex-shrink: 0;

    color: var(--values-orange);

    background: rgba(246, 130, 33, 0.09);

    border-radius: 50%;

    font-size: 16px;

    transition:
        color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}

.value-item:hover .value-card-footer i {
    color: #ffffff;

    background: var(--values-orange);

    transform: translate(2px, -2px);
}


/* ==================================================
   TABLET RESPONSIVE DESIGN
================================================== */

@media (max-width: 1050px) {

    .core-values {
        padding: 85px 0;
    }

    .values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 22px;
    }

    .value-item {
        min-height: 290px;

        padding: 27px 25px 22px;
    }

}


/* ==================================================
   MOBILE RESPONSIVE DESIGN
================================================== */

@media (max-width: 600px) {

    .core-values {
        padding: 65px 0;
    }

    .core-values .container {
        width: calc(100% - 36px);
    }

    .values-header {
        margin-bottom: 38px;
    }

    .values-header .section-label {
        gap: 8px;

        font-size: 10px;
        letter-spacing: 1.5px;
    }

    .values-header .label-line {
        width: 18px;
    }

    .values-header h2 {
        font-size: clamp(29px, 7.5vw, 37px);

        line-height: 1.25;
        letter-spacing: -0.8px;
    }

    .values-header h2 span {
        margin-top: 5px;
    }

    .values-header > p {
        margin-top: 15px;

        font-size: 14px;
        line-height: 1.8;
    }

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

        gap: 18px;
    }

    .value-item {
        min-height: 0;

        padding: 25px 23px 20px;

        border-radius: 16px;
    }

    .value-card-top {
        margin-bottom: 21px;
    }

    .value-icon {
        width: 54px;
        height: 54px;

        border-radius: 14px;

        font-size: 25px;
    }

    .value-item h3 {
        margin-bottom: 10px;

        font-size: 21px;
    }

    .value-item > p {
        margin-bottom: 22px;

        font-size: 14px;
        line-height: 1.8;
    }

}


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

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

    .value-item,
    .value-item::before,
    .value-item::after,
    .value-icon,
    .value-number,
    .value-item h3,
    .value-card-footer i {
        transition: none !important;
    }

    .value-item:hover {
        transform: none;
    }

}

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

.impact-section{

    padding:120px 0;

    background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%);

    position:relative;

    overflow:hidden;

}

.impact-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    background:rgba(34,197,94,.06);

    border-radius:50%;

    top:-180px;

    right:-180px;

}

.impact-section::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    background:rgba(249,115,22,.07);

    border-radius:50%;

    bottom:-120px;

    left:-120px;

}

/*=========================
        GRID
==========================*/

.impact-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

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

.impact-box{

    background:#fff;

    padding:40px 30px;

    border-radius:25px;

    text-align:center;

    transition:.4s;

    border:1px solid rgba(0,0,0,.05);

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

    position:relative;

    overflow:hidden;

}

.impact-box::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,#16a34a,#f97316);

    transform:scaleX(0);

    transition:.45s;

    transform-origin:left;

}

.impact-box:hover::before{

    transform:scaleX(1);

}

.impact-box:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 55px rgba(0,0,0,.12);

}

/*=========================
        ICON
==========================*/

.impact-icon{

    width:90px;

    height:90px;

    margin:0 auto 25px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:38px;

    color:#fff;

    background:linear-gradient(135deg,#16a34a,#22c55e);

    box-shadow:0 15px 35px rgba(34,197,94,.25);

    transition:.45s;

}

.impact-box:hover .impact-icon{

    transform:rotateY(180deg);

}

/*=========================
        COUNTER
==========================*/

.impact-box h3{

    font-size:3rem;

    color:var(--primary);

    margin-bottom:10px;

    font-weight:800;

}

.impact-box h4{

    font-size:1.25rem;

    color:var(--primary);

    margin-bottom:15px;

}

.impact-box p{

    color:var(--gray);

    line-height:1.8;

}

/*=========================
        RESPONSIVE
==========================*/

@media(max-width:1100px){

    .impact-grid{

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

    }

}

@media(max-width:768px){

    .impact-grid{

        grid-template-columns:1fr;

    }

}


/* =========================================
   NEWS & EVENTS
========================================= */

.news-section {
    padding: 90px 0;
    background: #ffffff;
}

.news-header {
    max-width: 700px;
    margin: 0 auto 50px;
    text-align: center;
}

.section-label {
    display: inline-block;
    margin-bottom: 12px;
    color: #f68221;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.news-header h2 {
    margin-bottom: 16px;
    color: #024b40;
    font-size: clamp(2rem, 4vw, 2.8rem);
    line-height: 1.2;
}

.news-header h2 span {
    color: #f68221;
}

.news-header p {
    color: #64716e;
    line-height: 1.7;
}


/* =========================================
   FEATURED NEWS
========================================= */

.featured-news {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #ffffff;
    border: 1px solid #e2e9e7;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 65px;
}

.featured-image {
    position: relative;
    min-height: 380px;
}

.featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-category {
    position: absolute;
    left: 20px;
    bottom: 20px;
    padding: 7px 12px;
    border-radius: 6px;
    background: #f68221;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
}

.featured-content {
    padding: 45px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.news-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 18px;
}

.news-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #6b7774;
    font-size: 0.85rem;
}

.news-meta i {
    color: #f68221;
}

.featured-content h3 {
    margin-bottom: 16px;
    color: #024b40;
    font-size: 1.8rem;
    line-height: 1.3;
}

.featured-content p {
    margin-bottom: 24px;
    color: #64716e;
    line-height: 1.75;
}


/* =========================================
   LINKS
========================================= */

.news-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    color: #024b40;
    text-decoration: none;
    font-weight: 700;
}

.news-link:hover {
    color: #f68221;
}


/* =========================================
   EVENTS HEADER
========================================= */

.events-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}

.events-heading h3 {
    color: #024b40;
    font-size: 1.5rem;
}

.view-all-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #024b40;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
}

.view-all-link:hover {
    color: #f68221;
}


/* =========================================
   EVENT CARDS
========================================= */

.events-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.event-card {
    overflow: hidden;
    border: 1px solid #e2e9e7;
    border-radius: 14px;
    background: #ffffff;
}

.event-image {
    position: relative;
    height: 220px;
}

.event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-date {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 52px;
    height: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #ffffff;
    color: #024b40;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
}

.event-date strong {
    font-size: 1.25rem;
    line-height: 1;
}

.event-date small {
    margin-top: 3px;
    color: #f68221;
    font-size: 0.68rem;
    font-weight: 800;
}

.event-content {
    padding: 25px;
}

.event-location {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    color: #6b7774;
    font-size: 0.82rem;
}

.event-location i {
    color: #f68221;
}

.event-content h4 {
    margin-bottom: 10px;
    color: #024b40;
    font-size: 1.2rem;
    line-height: 1.35;
}

.event-content p {
    margin-bottom: 18px;
    color: #64716e;
    font-size: 0.92rem;
    line-height: 1.7;
}


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

.news-footer {
    margin-top: 40px;
    text-align: center;
}

.all-news-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    border: 1px solid #024b40;
    border-radius: 8px;
    color: #024b40;
    text-decoration: none;
    font-weight: 700;
}

.all-news-btn:hover {
    background: #024b40;
    color: #ffffff;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .featured-news {
        grid-template-columns: 1fr;
    }

    .featured-image {
        min-height: 320px;
    }

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

}


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

@media (max-width: 600px) {

    .news-section {
        padding: 65px 0;
    }

    .news-header {
        margin-bottom: 35px;
    }

    .featured-image {
        min-height: 250px;
    }

    .featured-content {
        padding: 28px 22px;
    }

    .featured-content h3 {
        font-size: 1.45rem;
    }

    .news-meta {
        gap: 10px;
    }

    .events-heading {
        align-items: flex-start;
    }

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

    .event-image {
        height: 210px;
    }

    .all-news-btn {
        width: 100%;
        justify-content: center;
    }

}

/*=====================================================
            OUR PROGRAMS
======================================================*/

.programs-section{

    position:relative;

    overflow:hidden;

    padding:130px 0;

    background:
    linear-gradient(
        135deg,
        #f8fbfa 0%,
        #ffffff 45%,
        #eef8f5 100%);
}

/*========================================
Background Decoration
========================================*/

.programs-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    left:-180px;

    top:-150px;

    border-radius:50%;

    background:

    radial-gradient(

        rgba(2,75,64,.08),

        transparent 70%);

    filter:blur(50px);

}

.programs-section::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:

    radial-gradient(

        rgba(246,130,33,.08),

        transparent 70%);

    filter:blur(50px);

}

/*========================================
Header
========================================*/

.programs-header{

    max-width:850px;

    margin:auto auto 90px;

    text-align:center;

    position:relative;

    z-index:2;

}

.programs-header h2{

    font-size:clamp(2.8rem,5vw,4.5rem);

    color:#024b40;

    line-height:1.15;

    margin:20px 0;

}

.programs-header h2 span{

    color:#f68221;

}

.programs-header p{

    color:#667572;

    line-height:1.9;

    font-size:1.1rem;

}

/*========================================
Grid
========================================*/

.programs-grid{

    display:grid;

    grid-template-columns:

        2fr
        1fr
        1fr;

    grid-auto-rows:280px;

    gap:25px;

    position:relative;

    z-index:2;

}

/*========================================
Featured Card
========================================*/

.program-card.featured{

    grid-row:span 2;

}

/*========================================
Cards
========================================*/

.program-card{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    cursor:pointer;

    box-shadow:

    0 20px 55px rgba(0,0,0,.08);

    transition:

    transform .45s,

    box-shadow .45s;

}

.program-card:hover{

    transform:

    translateY(-12px);

    box-shadow:

    0 35px 70px rgba(2,75,64,.14);

}

/*========================================
Images
========================================*/

.program-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:

    transform .7s ease;

}

.program-card:hover img{

    transform:

    scale(1.1);

}

/*========================================
Overlay
========================================*/

.program-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        transparent 15%,

        rgba(2,75,64,.88)

    );

}

/*========================================
Content
========================================*/

.program-content{

    position:absolute;

    left:35px;

    right:35px;

    bottom:35px;

    color:#fff;

}

.program-tag{

    display:inline-block;

    margin-bottom:18px;

    padding:8px 16px;

    border-radius:40px;

    background:#f68221;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.5px;

}

/*========================================
Icons
========================================*/

.program-icon{

    width:72px;

    height:72px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

    rgba(255,255,255,.15);

    backdrop-filter:blur(12px);

    font-size:2rem;

    margin-bottom:22px;

    transition:.45s;

}

.program-card:hover .program-icon{

    transform:

    rotate(10deg)

    scale(1.08);

    background:#f68221;

}

/*========================================
Typography
========================================*/

.program-content h3{

    font-size:2rem;

    margin-bottom:18px;

    line-height:1.3;

}

.program-card:not(.featured) h3{

    font-size:1.4rem;

}

.program-content p{

    line-height:1.8;

    color:

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

    margin-bottom:24px;

}

/*========================================
Button
========================================*/

.program-content a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.program-content a:hover{

    color:#f68221;

    gap:16px;

}

/*========================================
Footer
========================================*/

.program-footer{

    text-align:center;

    margin-top:80px;

}

.program-btn{

    display:inline-flex;

    align-items:center;

    gap:14px;

    background:#024b40;

    color:#fff;

    text-decoration:none;

    padding:18px 40px;

    border-radius:50px;

    font-weight:700;

    transition:.4s;

}

.program-btn:hover{

    background:#f68221;

    transform:

    translateY(-5px);

}

/*========================================
Responsive
========================================*/

@media(max-width:1100px){

.programs-grid{

grid-template-columns:1fr 1fr;

}

.program-card.featured{

grid-column:span 2;

}

}

@media(max-width:768px){

.programs-grid{

grid-template-columns:1fr;

grid-auto-rows:320px;

}

.program-card.featured{

grid-column:span 1;

grid-row:span 1;

}

.program-content{

left:25px;

right:25px;

bottom:25px;

}

.program-content h3{

font-size:1.7rem;

}

}

@media(max-width:480px){

.programs-section{

padding:90px 0;

}

.programs-header h2{

font-size:2rem;

}

.program-icon{

width:60px;

height:60px;

font-size:1.6rem;

}

}
/*==========================
        RESPONSIVE
===========================*/

@media(max-width:992px){

    .programs-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .program-card{

        padding:30px;

    }

}
/* ==================================================
   SUCCESS STORIES — PHOTO CARDS
================================================== */

.success-stories {
    position: relative;
    overflow: hidden;
    padding: 105px 20px;
    background: linear-gradient(180deg, #f8fbfa 0%, #ffffff 100%);
}

.success-stories .container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
}

/* Section heading */
.success-stories-heading {
    max-width: 740px;
    margin: 0 auto 52px;
    text-align: center;
}

.success-stories-heading .success-stories-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    color: #f68221;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.success-stories-heading .success-stories-eyebrow::before,
.success-stories-heading .success-stories-eyebrow::after {
    content: "";
    width: 25px;
    height: 2px;
    border-radius: 2px;
    background: #f68221;
}

.success-stories-heading h2 {
    margin: 0 0 16px;
    color: #024b40;
    font-size: clamp(2rem, 4vw, 2.8rem);
    line-height: 1.18;
    font-weight: 800;
}

.success-stories-heading h2 span {
    color: #f68221;
}

.success-stories-heading p {
    max-width: 650px;
    margin: 0 auto;
    color: #657570;
    font-size: 16px;
    line-height: 1.8;
}

/* Responsive photo-card grid */
.success-stories-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

.success-story-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(2, 75, 64, 0.09);
    border-radius: 20px;
    box-shadow: 0 10px 32px rgba(2, 75, 64, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.success-story-card:hover {
    transform: translateY(-7px);
    border-color: rgba(246, 130, 33, 0.4);
    box-shadow: 0 18px 42px rgba(2, 75, 64, 0.14);
}

/* Photo area */
.success-story-image {
    position: relative;
    height: 250px;
    overflow: hidden;
    background: #e8f0ed;
}

.success-story-image::after {
    content: "";
    position: absolute;
    inset: 35% 0 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 15%, rgba(0, 35, 30, 0.42) 100%);
}

.success-story-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.55s ease;
}

.success-story-card:hover .success-story-image img {
    transform: scale(1.045);
}

.success-story-tag {
    position: absolute;
    z-index: 1;
    left: 14px;
    bottom: 14px;
    max-width: calc(100% - 28px);
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 30px;
    background: rgba(2, 75, 64, 0.9);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.3px;
}

/* Testimonial content */
.success-story-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 23px 22px 25px;
}

.quote-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: rgba(246, 130, 33, 0.12);
}

.quote-icon i {
    color: #f68221;
    font-size: 23px;
    line-height: 1;
}

.success-story-content blockquote {
    margin: 0;
    color: #50615c;
    font-size: 14px;
    font-style: normal;
    line-height: 1.8;
}

.success-story-person {
    width: 100%;
    margin-top: auto;
    padding-top: 21px;
}

.success-story-person h3 {
    margin: 0 0 6px;
    color: #024b40;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.success-story-person p {
    display: inline-block;
    margin: 0;
    color: #7a8984;
    font-size: 12px;
    font-weight: 600;
}

/* Tablet */
@media (max-width: 1100px) {
    .success-stories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .success-story-image {
        height: 300px;
    }

    .success-story-content {
        padding: 26px;
    }

    .success-story-content blockquote {
        font-size: 15px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .success-stories {
        padding: 72px 17px;
    }

    .success-stories-heading {
        margin-bottom: 34px;
    }

    .success-stories-heading p {
        font-size: 15px;
    }

    .success-stories-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        max-width: 430px;
        margin: 0 auto;
    }

    .success-story-image {
        height: 310px;
    }

    .success-story-content {
        padding: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .success-story-card,
    .success-story-image img {
        transition: none;
    }

    .success-story-card:hover,
    .success-story-card:hover .success-story-image img {
        transform: none;
    }
}


/*=====================================================
                OUR PARTNERS
======================================================*/

.partners-section{

    position:relative;

    overflow:hidden;

    padding:130px 0;

    background:
    linear-gradient(
        135deg,
        #ffffff 0%,
        #f8fbfa 50%,
        #eef8f5 100%);

}

/*========================================
Background Decorations
========================================*/

.partners-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    left:-180px;

    top:-180px;

    border-radius:50%;

    background:

    radial-gradient(
        rgba(2,75,64,.08),
        transparent 70%);

    filter:blur(55px);

}

.partners-section::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-170px;

    bottom:-170px;

    border-radius:50%;

    background:

    radial-gradient(
        rgba(246,130,33,.08),
        transparent 70%);

    filter:blur(55px);

}

/*========================================
Header
========================================*/

.partners-header{

    max-width:850px;

    margin:auto auto 90px;

    text-align:center;

    position:relative;

    z-index:2;

}

.partners-header h2{

    font-size:clamp(2.8rem,5vw,4.5rem);

    color:#024b40;

    line-height:1.2;

    margin:22px 0;

}

.partners-header h2 span{

    color:#f68221;

}

.partners-header p{

    color:#667572;

    line-height:1.9;

    font-size:1.1rem;

}

/*========================================
Grid
========================================*/

.partners-grid{

    display:grid;

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

    gap:28px;

    position:relative;

    z-index:2;

}

/*========================================
Partner Card
========================================*/

.partner-card{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    height:170px;

    background:

    rgba(255,255,255,.85);

    backdrop-filter:blur(18px);

    border-radius:26px;

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

    box-shadow:

    0 20px 45px rgba(0,0,0,.06);

    transition:

    transform .45s,

    box-shadow .45s;

}

.partner-card:hover{

    transform:

    translateY(-10px);

    box-shadow:

    0 30px 65px rgba(2,75,64,.12);

}

/*========================================
Logo
========================================*/

.partner-card img{

    width:70%;

    max-height:80px;

    object-fit:contain;

    filter:

    grayscale(100%);

    opacity:.75;

    transition:

    .45s;

}

.partner-card:hover img{

    filter:

    grayscale(0);

    opacity:1;

    transform:

    scale(1.05);

}

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

.partner-cta{

    margin-top:90px;

    text-align:center;

    padding:60px;

    border-radius:35px;

    background:

    linear-gradient(
        135deg,
        #024b40,
        #04695c);

    color:#fff;

    position:relative;

    overflow:hidden;

}

.partner-cta h3{

    font-size:2rem;

    margin-bottom:18px;

}

.partner-cta p{

    max-width:700px;

    margin:auto;

    line-height:1.9;

    opacity:.92;

}

/*========================================
Button
========================================*/

.partner-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-top:35px;

    background:#f68221;

    color:#fff;

    text-decoration:none;

    padding:18px 38px;

    border-radius:50px;

    font-weight:700;

    transition:.4s;

}

.partner-btn:hover{

    transform:

    translateY(-5px);

    background:#fff;

    color:#024b40;

}

/*========================================
Responsive
========================================*/

@media(max-width:1100px){

.partners-grid{

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

}

}

@media(max-width:768px){

.partners-grid{

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

}

.partner-card{

height:150px;

}

.partner-cta{

padding:40px 25px;

}

}

@media(max-width:500px){

.partners-grid{

grid-template-columns:1fr;

}

.partners-section{

padding:90px 0;

}

}

/*==================================================
            DARK PARTNERS
==================================================*/

body.dark .partners-section{

    background:#0f172a;

}

body.dark .partner-logo{

    background:#1e293b;

}

body.dark .partners-slider::before{

    background:linear-gradient(to right,#0f172a,transparent);

}

body.dark .partners-slider::after{

    background:linear-gradient(to left,#0f172a,transparent);

}
/*==================================================
                GET INVOLVED
==================================================*/

.involved-section{

    padding:120px 0;

    background:linear-gradient(180deg,#f8fafc,#ffffff);

    position:relative;

    overflow:hidden;

}

.involved-grid{

    display:grid;

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

    gap:35px;

    margin-top:70px;

}

/* Card */

.involved-card{

    background:#ffffff;

    border-radius:25px;

    padding:45px 35px;

    text-align:center;

    transition:.45s;

    position:relative;

    overflow:hidden;

    border:1px solid rgba(0,0,0,.05);

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

}

.involved-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,#16a34a,#22c55e,#f97316);

    transform:scaleX(0);

    transform-origin:left;

    transition:.45s;

}

.involved-card:hover::before{

    transform:scaleX(1);

}

.involved-card:hover{

    transform:translateY(-12px);

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

}

/* Icon */

.involved-icon{

    width:95px;

    height:95px;

    margin:auto;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#16a34a,#22c55e);

    color:#fff;

    font-size:40px;

    margin-bottom:25px;

    box-shadow:0 18px 40px rgba(34,197,94,.25);

    transition:.4s;

}

.involved-card:hover .involved-icon{

    transform:rotateY(180deg);

}

/* Text */

.involved-card h3{

    font-size:1.7rem;

    margin-bottom:15px;

    color:var(--primary);

}

.involved-card p{

    color:var(--gray);

    line-height:1.8;

    margin-bottom:30px;

}

/* Button */

.involved-card a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    font-weight:600;

    color:#16a34a;

    transition:.3s;

}

.involved-card a:hover{

    gap:16px;

}

.involved-card:nth-child(1) .involved-icon{

    background:linear-gradient(135deg,#16a34a,#22c55e);

}

.involved-card:nth-child(2) .involved-icon{

    background:linear-gradient(135deg,#2563eb,#3b82f6);

}

.involved-card:nth-child(3) .involved-icon{

    background:linear-gradient(135deg,#ea580c,#fb923c);

}

@keyframes involvedFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

.involved-icon{

    animation:involvedFloat 3s ease-in-out infinite;

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

    .involved-grid{

        grid-template-columns:1fr;

    }

}
/*==================================================
            DARK GET INVOLVED
==================================================*/

body.dark .involved-section{

    background:#0f172a;

}

body.dark .involved-card{

    background:#1e293b;

    border-color:#334155;

}

body.dark .involved-card h3{

    color:#ffffff;

}

body.dark .involved-card p{

    color:#cbd5e1;

}

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

.impact-section{

    position:relative;

    overflow:hidden;

    padding:130px 0;

    background:
    linear-gradient(
        135deg,
        #ffffff 0%,
        #f8fbfa 50%,
        #eef8f5 100%);

}

/*========================================
Background Decoration
========================================*/

.impact-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    top:-180px;

    left:-150px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(2,75,64,.08),
        transparent 70%);

    filter:blur(45px);

}

.impact-section::after{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    right:-140px;

    bottom:-160px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(246,130,33,.08),
        transparent 70%);

    filter:blur(45px);

}

/*========================================
Header
========================================*/

.impact-header{

    max-width:820px;

    margin:auto auto 90px;

    text-align:center;

    position:relative;

    z-index:2;

}

.impact-header h2{

    font-size:clamp(2.8rem,5vw,4.5rem);

    color:#024b40;

    line-height:1.15;

    margin:22px 0;

}

.impact-header h2 span{

    color:#f68221;

}

.impact-header p{

    font-size:1.1rem;

    line-height:1.9;

    color:#667572;

}

/*========================================
Layout
========================================*/

.impact-wrapper{

    display:grid;

    grid-template-columns:1.15fr 1fr;

    gap:70px;

    align-items:center;

    position:relative;

    z-index:2;

}

/*========================================
Image
========================================*/

.impact-image{

    position:relative;

}

.impact-image img{

    width:100%;

    border-radius:32px;

    display:block;

    box-shadow:

    0 30px 70px rgba(2,75,64,.12);

}

/*========================================
Badge
========================================*/

.impact-badge{

    position:absolute;

    left:30px;

    bottom:30px;

    display:flex;

    align-items:center;

    gap:12px;

    background:

    rgba(255,255,255,.92);

    backdrop-filter:blur(12px);

    color:#024b40;

    padding:16px 24px;

    border-radius:50px;

    font-weight:700;

    box-shadow:

    0 15px 35px rgba(0,0,0,.08);

}

.impact-badge i{

    color:#f68221;

    font-size:1.3rem;

}

/*========================================
Statistics Grid
========================================*/

.impact-stats{

    display:grid;

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

    gap:25px;

}

/*========================================
Impact Card
========================================*/

.impact-card{

    position:relative;

    overflow:hidden;

    background:

    rgba(255,255,255,.82);

    backdrop-filter:blur(15px);

    border-radius:24px;

    padding:35px;

    text-align:center;

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

    box-shadow:

    0 18px 45px rgba(0,0,0,.07);

    transition:

    transform .45s,

    box-shadow .45s;

}

.impact-card:hover{

    transform:

    translateY(-10px);

    box-shadow:

    0 30px 65px rgba(2,75,64,.12);

}

/*========================================
Icon
========================================*/

.impact-icon{

    width:80px;

    height:80px;

    margin:auto;

    margin-bottom:22px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

    linear-gradient(
        135deg,
        #024b40,
        #04695c);

    color:#fff;

    font-size:2rem;

    transition:.45s;

}

.impact-card:hover .impact-icon{

    background:

    linear-gradient(
        135deg,
        #f68221,
        #ff9b38);

    transform:

    rotate(10deg)
    scale(1.08);

}

/*========================================
Numbers
========================================*/

.impact-card h3{

    display:inline-block;

    font-size:3rem;

    color:#024b40;

    font-weight:800;

}

.impact-card span{

    font-size:2rem;

    color:#f68221;

    font-weight:800;

}

.impact-card p{

    margin-top:14px;

    color:#667572;

    line-height:1.7;

}

/*========================================
Responsive
========================================*/

@media(max-width:1100px){

.impact-wrapper{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.impact-stats{

grid-template-columns:1fr;

}

.impact-badge{

left:20px;

right:20px;

bottom:20px;

justify-content:center;

}

}

@media(max-width:480px){

.impact-section{

padding:90px 0;

}

.impact-header h2{

font-size:2rem;

}

.impact-card{

padding:28px;

}

.impact-card h3{

font-size:2.5rem;

}

}
/*=====================================================
        IMPACT - PART 2B
        Premium Effects
======================================================*/

/*========================================
Animated Gradient Border
========================================*/

.impact-card::before{

    content:"";

    position:absolute;

    inset:0;

    padding:1px;

    border-radius:24px;

    background:
    linear-gradient(
        135deg,
        rgba(2,75,64,.18),
        rgba(246,130,33,.22),
        rgba(2,75,64,.18));

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    opacity:0;

    transition:.4s;

}

.impact-card:hover::before{

    opacity:1;

}

/*========================================
Glass Reflection
========================================*/

.impact-card::after{

    content:"";

    position:absolute;

    top:-120%;

    left:-50%;

    width:35%;

    height:320%;

    transform:rotate(25deg);

    background:
    linear-gradient(

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    pointer-events:none;

}

.impact-card:hover::after{

    animation:impactReflection .9s ease;

}

@keyframes impactReflection{

    from{

        transform:
        translateX(0)
        rotate(25deg);

    }

    to{

        transform:
        translateX(500px)
        rotate(25deg);

    }

}

/*========================================
Floating Number Glow
========================================*/

.impact-card h3{

    position:relative;

}

.impact-card h3::after{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:90px;

    height:90px;

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

    border-radius:50%;

    background:

    radial-gradient(

        rgba(246,130,33,.16),

        transparent 70%);

    z-index:-1;

    opacity:0;

    transition:.4s;

}

.impact-card:hover h3::after{

    opacity:1;

}

/*========================================
Icon Pulse
========================================*/

.impact-icon{

    position:relative;

}

.impact-icon::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px dashed rgba(255,255,255,.30);

    animation:impactRotate 16s linear infinite;

}

@keyframes impactRotate{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(360deg);

    }

}

.impact-icon::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:50%;

    background:inherit;

    z-index:-1;

    opacity:.25;

    animation:impactPulse 3s ease infinite;

}

@keyframes impactPulse{

    0%{

        transform:scale(1);

        opacity:.3;

    }

    70%{

        transform:scale(1.45);

        opacity:0;

    }

    100%{

        transform:scale(1);

        opacity:0;

    }

}

/*========================================
Badge Hover
========================================*/

.impact-badge{

    transition:.4s;

}

.impact-badge:hover{

    transform:

    translateY(-4px);

    box-shadow:

    0 18px 45px rgba(2,75,64,.12);

}

/*========================================
Image Zoom
========================================*/

.impact-image{

    overflow:hidden;

    border-radius:32px;

}

.impact-image img{

    transition:

    transform .8s ease;

}

.impact-image:hover img{

    transform:scale(1.08);

}

/*========================================
Card Glow
========================================*/

.impact-card:hover{

    box-shadow:

        0 35px 70px rgba(2,75,64,.12),

        0 0 40px rgba(246,130,33,.08);

}

/*========================================
Section Grid Pattern
========================================*/

.impact-section{

    background-image:

    linear-gradient(
        rgba(2,75,64,.03) 1px,
        transparent 1px),

    linear-gradient(
        90deg,
        rgba(2,75,64,.03) 1px,
        transparent 1px);

    background-size:60px 60px;

}

/*========================================
Heading Underline
========================================*/

.impact-header h2{

    position:relative;

}

.impact-header h2::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-18px;

    transform:translateX(-50%);

    width:120px;

    height:5px;

    border-radius:30px;

    background:

    linear-gradient(
        90deg,
        #024b40,
        #f68221);

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

.footer{

    position:relative;

    overflow:hidden;

    background:#012f28;

    color:#d7e7e3;

    padding-top:90px;

}

.footer::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        rgba(255,255,255,.02),

        transparent);

    pointer-events:none;

}

/*========================================
Grid
========================================*/

.footer-grid{

    display:grid;

    grid-template-columns:

    2fr
    1fr
    1fr
    1.3fr
    1.5fr;

    gap:45px;

    padding-bottom:70px;

}

/*========================================
Logo
========================================*/

.footer-about img{

    width:180px;

    margin-bottom:25px;

}

.footer-about p{

    line-height:1.9;

    margin-bottom:30px;

}

/*========================================
Titles
========================================*/

.footer h3{

    color:#fff;

    margin-bottom:25px;

    position:relative;

}

.footer h3::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:55px;

    height:3px;

    border-radius:30px;

    background:#f68221;

}

/*========================================
Links
========================================*/

.footer ul{

    list-style:none;

    padding:0;

}

.footer li{

    margin-bottom:14px;

}

.footer a{

    color:#d7e7e3;

    text-decoration:none;

    transition:.35s;

}

.footer a:hover{

    color:#f68221;

    padding-left:6px;

}

/*========================================
Contact
========================================*/

.footer-contact li{

    display:flex;

    align-items:flex-start;

    gap:12px;

}

.footer-contact i{

    color:#f68221;

    margin-top:3px;

}

/*========================================
Newsletter
========================================*/

.newsletter{

    display:flex;

    flex-direction:column;

    gap:15px;

    margin-top:25px;

}

.newsletter input{

    padding:16px 20px;

    border:none;

    border-radius:50px;

    outline:none;

    font-size:.95rem;

}

.newsletter button{

    padding:16px;

    border:none;

    border-radius:50px;

    background:#f68221;

    color:#fff;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

}

.newsletter button:hover{

    background:#fff;

    color:#024b40;

}

/*========================================
Social
========================================*/

.footer-social{

    display:flex;

    gap:15px;

}

.footer-social a{

    width:46px;

    height:46px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

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

    font-size:1.2rem;

    transition:.35s;

}

.footer-social a:hover{

    background:#f68221;

    color:#fff;

    transform:translateY(-5px);

}

/*========================================
Bottom
========================================*/

.footer hr{

    border:none;

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

}

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:30px 0;

    flex-wrap:wrap;

    gap:20px;

}

.footer-bottom div{

    display:flex;

    gap:25px;

}

/*========================================
Back To Top
========================================*/

#backToTop{

    position:fixed;

    right:30px;

    bottom:30px;

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

    background:#f68221;

    color:#fff;

    font-size:1.3rem;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:.4s;

    z-index:999;

}

#backToTop.show{

    opacity:1;

    visibility:visible;

}

#backToTop:hover{

    background:#024b40;

    transform:translateY(-5px);

}

/*========================================
Responsive
========================================*/

@media(max-width:1200px){

.footer-grid{

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

}

}

@media(max-width:768px){

.footer-grid{

grid-template-columns:1fr;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

.footer-bottom div{

justify-content:center;

flex-wrap:wrap;

}

.cta-buttons{

flex-direction:column;

align-items:center;

}

.cta-buttons a{

width:280px;

justify-content:center;

}

}

@media(max-width:480px){

.footer{

padding-top:70px;

}

.footer-cta{

padding:90px 0;

}

.cta-content h2{

font-size:2rem;

}

}
/*=========================================
        WAVE SEPARATOR
==========================================*/

.footer-wave{

    position:relative;

    line-height:0;

    margin-bottom:-2px;

    overflow:hidden;

}

.footer-wave svg{

    display:block;

    width:100%;

    height:140px;

}

.footer-wave .wave1{

    animation:waveMove 8s ease-in-out infinite alternate;

    transform-origin:center;

}

@keyframes waveMove{

    0%{

        transform:
        translateX(0)
        scaleY(1);

    }

    50%{

        transform:
        translateX(-20px)
        scaleY(1.04);

    }

    100%{

        transform:
        translateX(20px)
        scaleY(.98);

    }

}

/* =========================================================
        HOMEPAGE GALLERY SECTION
========================================================= */

.home-gallery {

    padding: 120px 0;

    background: #f8f9fa;

    position: relative;

}


/* =========================
        SECTION HEADER
========================= */

.home-gallery-header {

    text-align: center;

    max-width: 750px;

    margin: 0 auto 70px;

}

.home-gallery-label {

    display: inline-block;

    color: var(--accent);

    font-size: .85rem;

    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 15px;

}

.home-gallery-header h2 {

    color: var(--primary);

    font-size: 3.2rem;

    line-height: 1.2;

    margin-bottom: 18px;

}

.home-gallery-header h2 span {

    color: var(--accent);

}

.home-gallery-header p {

    color: var(--gray);

    max-width: 650px;

    margin: auto;

    line-height: 1.8;

}



/* =========================
        ROW HEADER
========================= */

.home-gallery-row-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 25px;

}

.home-gallery-row-header > div span {

    color: var(--accent);

    font-size: .75rem;

    font-weight: 700;

    letter-spacing: 2px;

}

.home-gallery-row-header h3 {

    color: var(--primary);

    font-size: 1.7rem;

    margin-top: 5px;

}

.home-gallery-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--primary);

    font-weight: 600;

    transition: .3s ease;

}

.home-gallery-link i {

    font-size: 1.2rem;

    transition: .3s ease;

}

.home-gallery-link:hover {

    color: var(--accent);

}

.home-gallery-link:hover i {

    transform: translateX(5px);

}



/* =========================
        PHOTO GRID
========================= */

.home-photo-grid {

    display: grid;

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

    gap: 20px;

}

.home-photo-card {

    position: relative;

    height: 280px;

    overflow: hidden;

    border-radius: 20px;

    display: block;

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

}

.home-photo-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .6s ease;

}

.home-photo-card::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
        to top,
        rgba(2,75,64,.85),
        transparent 60%
    );

    opacity: .8;

    transition: .4s ease;

}

.home-photo-overlay {

    position: absolute;

    left: 22px;

    bottom: 20px;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 10px;

    color: #fff;

    font-weight: 600;

}

.home-photo-overlay i {

    font-size: 1.2rem;

    color: var(--accent);

}

.home-photo-card:hover img {

    transform: scale(1.08);

}

.home-photo-card:hover::after {

    opacity: 1;

}





/* =========================
        BOTTOM BUTTON
========================= */

.home-gallery-bottom {

    display: flex;

    justify-content: center;

    margin-top: 60px;

}

.home-gallery-main-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 15px 30px;

    background: var(--primary);

    color: #fff;

    border-radius: 50px;

    font-weight: 600;

    transition: .35s ease;

}

.home-gallery-main-btn i {

    transition: .35s ease;

}

.home-gallery-main-btn:hover {

    background: var(--accent);

    transform: translateY(-4px);

}

.home-gallery-main-btn:hover i {

    transform: translateX(5px);

}



/* =========================
        TABLET
========================= */

@media (max-width: 992px) {

    .home-photo-grid {

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

    }

    .home-video-grid {

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

    }

}



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

@media (max-width: 600px) {

    .home-gallery {

        padding: 80px 0;

    }

    .home-gallery-header h2 {

        font-size: 2.3rem;

    }

    .home-gallery-row-header {

        align-items: flex-start;

        flex-direction: column;

        gap: 12px;

    }

    .home-photo-grid {

        grid-template-columns: 1fr;

    }

    .home-photo-card {

        height: 260px;

    }

    .home-video-grid {

        grid-template-columns: 1fr;

    }

    .home-video-thumbnail {

        height: 220px;

    }

}

/* ==================================================
   VIDEO HIGHLIGHTS
================================================== */

.gallery-video-section {

    padding: 110px 0;

    background: #ffffff;
}


/* ==================================================
   VIDEO GRID
================================================== */

.gallery-video-grid {

    display: grid;

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

    gap: 30px;

    margin-top: 60px;
}


/* ==================================================
   VIDEO CARD
================================================== */

.gallery-video-card {

    overflow: hidden;

    border-radius: 24px;

    background: #ffffff;

    border: 1px solid rgba(2, 75, 64, 0.08);

    box-shadow:
        0 10px 30px rgba(2, 75, 64, 0.09);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.gallery-video-card:hover {

    transform: translateY(-7px);

    box-shadow:
        0 20px 45px rgba(2, 75, 64, 0.15);
}


/* ==================================================
   VIDEO WRAPPER
================================================== */

.gallery-video-wrapper {

    position: relative;

    width: 100%;

    height: 330px;

    overflow: hidden;

    background: #024b40;
}


/* ==================================================
   VIDEO
================================================== */

.gallery-video-wrapper video {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    opacity: 0.82;

    transition:
        transform 0.5s ease,
        opacity 0.5s ease;
}


.gallery-video-card:hover
.gallery-video-wrapper video {

    transform: scale(1.04);

    opacity: 0.68;
}


/* ==================================================
   VIDEO OVERLAY
================================================== */

.gallery-video-wrapper::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(2, 75, 64, 0.02),
            rgba(2, 75, 64, 0.35)
        );
}


/* ==================================================
   PLAY BUTTON
================================================== */

.gallery-play-button {

    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 5;

    width: 72px;
    height: 72px;

    display: flex;

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

    border: none;

    border-radius: 50%;

    background: #f68221;

    color: #ffffff;

    font-size: 29px;

    cursor: pointer;

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

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

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


.gallery-play-button:hover {

    background: #024b40;

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

    box-shadow:
        0 16px 35px rgba(0, 0, 0, 0.3);
}


/* ==================================================
   VIDEO CONTENT
================================================== */

.gallery-video-content {

    padding: 25px 28px 30px;

    background: #ffffff;
}


/* ==================================================
   CATEGORY
================================================== */

.gallery-video-category {

    display: inline-block;

    margin-bottom: 10px;

    color: #f68221;

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;
}


/* ==================================================
   TITLE
================================================== */

.gallery-video-content h3 {

    margin: 0 0 9px;

    color: #024b40;

    font-size: 1.35rem;

    font-weight: 700;
}


/* ==================================================
   DESCRIPTION
================================================== */

.gallery-video-content p {

    margin: 0;

    color: #64748b;

    font-size: 0.9rem;

    line-height: 1.7;
}


/* ==================================================
   VIDEO MODAL
================================================== */

.gallery-video-modal {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

    background:
        rgba(2, 75, 64, 0.94);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}


.gallery-video-modal.active {

    opacity: 1;

    visibility: visible;
}


/* ==================================================
   MODAL CONTENT
================================================== */

.gallery-video-modal-content {

    width: min(1000px, 95vw);

    max-height: 90vh;

    overflow: hidden;

    border-radius: 20px;

    background: #000000;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.35);
}


/* ==================================================
   MODAL VIDEO
================================================== */

.gallery-video-player {

    display: block;

    width: 100%;

    max-height: 85vh;

    background: #000000;
}


/* ==================================================
   CLOSE BUTTON
================================================== */

.gallery-video-modal-close {

    position: fixed;

    top: 25px;
    right: 30px;

    z-index: 10000;

    width: 48px;
    height: 48px;

    display: flex;

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

    border: none;

    border-radius: 50%;

    background: #f68221;

    color: #ffffff;

    font-size: 24px;

    cursor: pointer;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}


.gallery-video-modal-close:hover {

    background: #ffffff;

    color: #024b40;

    transform: rotate(90deg);
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 850px) {

    .gallery-video-grid {

        grid-template-columns: 1fr;

        gap: 25px;
    }

}


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

@media (max-width: 600px) {

    .gallery-video-section {

        padding: 75px 0;
    }


    .gallery-video-grid {

        margin-top: 40px;
    }


    .gallery-video-wrapper {

        height: 250px;
    }


    .gallery-video-content {

        padding: 22px;
    }


    .gallery-play-button {

        width: 62px;
        height: 62px;

        font-size: 24px;
    }


    .gallery-video-modal {

        padding: 15px;
    }


    .gallery-video-modal-close {

        top: 15px;

        right: 15px;
    }

}

/*==================================================
        NEW OUR PURPOSE — MISSION & VISION
==================================================*/

.mission-vision {
    position: relative;
    padding: 110px 0;
    background: #f8fbfa;
    overflow: hidden;
}


/*==================================================
        SECTION HEADER
==================================================*/

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

.mv-header .section-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 18px;

    color: #f68221;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
}

.mv-header .section-label span {
    display: block;
    width: 35px;
    height: 2px;
    background: #f68221;
}

.mv-header h2 {
    margin: 0;

    color: #024b40;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
}


/*==================================================
        MISSION & VISION GRID
==================================================*/

.mv-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;

    max-width: 1100px;
    margin: 0 auto;
}


/*==================================================
        CARDS
==================================================*/

.mv-card {
    position: relative;

    padding: 55px 50px;

    background: #ffffff;

    border-radius: 24px;

    border: 1px solid rgba(2, 75, 64, 0.08);

    box-shadow:
        0 18px 50px rgba(2, 75, 64, 0.08);

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* Top accent line */

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

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background: #024b40;
}


/* Vision gets orange accent */

.mv-card.vision::before {
    background: #f68221;
}


/* Hover */

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

    box-shadow:
        0 25px 60px rgba(2, 75, 64, 0.13);
}


/*==================================================
        ICON
==================================================*/

.mv-icon {
    width: 72px;
    height: 72px;

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

    margin-bottom: 28px;

    border-radius: 18px;

    background: rgba(2, 75, 64, 0.09);

    color: #024b40;

    font-size: 32px;
}


.mv-card.vision .mv-icon {
    background: rgba(246, 130, 33, 0.10);
    color: #f68221;
}


/*==================================================
        LABEL
==================================================*/

.mv-card .mini-title {
    display: block;

    margin-bottom: 18px;

    color: #f68221;

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

    letter-spacing: 2px;
}


/*==================================================
        TEXT
==================================================*/

.mv-card p {
    margin: 0;

    color: #4f625f;

    font-size: 18px;
    line-height: 1.9;
}


/*==================================================
        RESPONSIVE
==================================================*/

@media (max-width: 900px) {

    .mv-grid {
        grid-template-columns: 1fr;
        max-width: 700px;
    }

}


@media (max-width: 768px) {

    .mission-vision {
        padding: 85px 0;
    }

    .mv-header {
        margin-bottom: 45px;
    }

    .mv-header h2 {
        font-size: 34px;
    }

    .mv-card {
        padding: 40px 32px;
    }

    .mv-card p {
        font-size: 17px;
        line-height: 1.8;
    }

}


@media (max-width: 480px) {

    .mission-vision {
        padding: 70px 0;
    }

    .mv-header h2 {
        font-size: 29px;
    }

    .mv-card {
        padding: 35px 25px;
        border-radius: 20px;
    }

    .mv-icon {
        width: 62px;
        height: 62px;
        font-size: 27px;
    }

    .mv-card p {
        font-size: 16px;
        line-height: 1.75;
    }

}