/* ============ RESET & BASE ============ */
     *,
     *::before,
     *::after {
         box-sizing: border-box;
         margin: 0;
         padding: 0;
         /* outline:1px solid red; */
     }

     html {
         scroll-behavior: smooth;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale
     }

     :root {
         --royal: #153E90;
         --royal-dark: #0f2d6b;
         --gold: #F4B400;
         --gold-dark: #d99f00;
         --white: #FFFFFF;
         --light: #F8F9FA;
         --gray: #1F2937;
         --gray-soft: #6B7280;
         --border: rgba(21, 62, 144, .08);
         --shadow-sm: 0 4px 12px rgba(21, 62, 144, .06);
         --shadow-md: 0 10px 30px rgba(21, 62, 144, .10);
         --shadow-lg: 0 20px 60px rgba(21, 62, 144, .15);
         --gradient: linear-gradient(135deg, #153E90 0%, #F4B400 100%);
         --gradient-dark: linear-gradient(135deg, #041538 50%, #785800);
         --gradient-soft: linear-gradient(135deg, rgba(21, 62, 144, .08) 0%, rgba(244, 180, 0, .08) 100%);
         --radius: 20px;
         --radius-lg: 28px;
         --ease: cubic-bezier(.22, 1, .36, 1);
     }

     body {
         font-family: 'Inter', system-ui, sans-serif;
         color: var(--gray);
         background: var(--white);
         line-height: 1.65;
         overflow-x: hidden;
         /* width: 100%; */
     }

     h1,
     h2,
     h3,
     h4,
     h5 {
         font-family: 'Poppins', sans-serif;
         font-weight: 800;
         line-height: 1.15;
         color: var(--gray);
         letter-spacing: -.02em
     }

     h1 {
         font-size: clamp(2.2rem, 5vw, 4.2rem)
     }

     h2 {
         font-size: clamp(1.8rem, 3.6vw, 3rem)
     }

     h3 {
         font-size: clamp(1.2rem, 2vw, 1.6rem)
     }

     p {
         color: var(--gray-soft);
         font-size: clamp(.95rem, 1.1vw, 1.05rem)
     }

     a {
         color: inherit;
         text-decoration: none;
         transition: all .3s var(--ease)
     }

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

     section {
         padding: clamp(4rem, 8vw, 7rem) 0;
         position: relative
     }

     .container {
         width: min(1240px, 95%);
         margin: 0 auto;
         padding: 2px 7px;
         overflow-x: hidden;
         overflow-y: hidden;
     }

     .gradient-text {
         background: var(--gradient-dark);
         -webkit-background-clip: text;
         background-clip: text;
         color: transparent
     }

     .section-head {
         text-align: center;
         max-width: 720px;
         margin: 0 auto 3.5rem
     }

     .section-head .eyebrow {
         display: inline-block;
         padding: .4rem 1rem;
         background: var(--gradient-soft);
         color: var(--royal);
         border-radius: 999px;
         font-size: .8rem;
         font-weight: 600;
         letter-spacing: .08em;
         text-transform: uppercase;
         margin-bottom: 1rem
     }

     .section-head h2 {
         margin-bottom: 1rem
     }

     .section-head p {
         font-size: 1.05rem
     }

     /* ============ BUTTONS ============ */
     .btn {
         display: inline-flex;
         align-items: center;
         gap: .6rem;
         padding: .95rem 1.8rem;
         /* border-radius: 999px; */
         font-family: 'Inter', sans-serif;
         font-weight: 600;
         font-size: .95rem;
         border: none;
         cursor: pointer;
         transition: all .35s var(--ease);
         position: relative;
         overflow: hidden
     }

     .btn-primary {
         background: #001541;
         /* background: var(--royal); */
         color: #fff;
         /* box-shadow: 0 10px 25px rgba(21, 62, 144, .3) */
     }

     .btn-primary:hover {
         background: var(--royal-dark);
         transform: translateY(-3px);
         /* box-shadow: 0 15px 35px rgba(21, 62, 144, .4) */
     }

     .btn-gold {
         background: var(--gold);
         color: var(--gray);
         /* box-shadow: 0 10px 25px rgba(244, 180, 0, .35) */
     }

     .btn-gold-dark {
         background: var(--gold-dark);
         color: var(--gray);
     }

     .btn-gold-dark:hover {
         background: var(--gold-dark);
         color: rgb(255, 255, 255);
         transform: translateY(-3px)
     }

     .btn-gold:hover {
         background: var(--gold-dark);
         color: rgb(255, 255, 255);
         transform: translateY(-3px)
     }

     .btn-outline {
         background: rgba(255, 255, 255, .15);
         color: #fff;
         border: 1.5px solid rgba(255, 255, 255, .4);
         backdrop-filter: blur(10px)
     }

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

     .btn-ghost {
         background: transparent;
         color: var(--royal);
         border: 1.5px solid var(--border)
     }

     .btn-ghost:hover {
         background: var(--royal);
         color: #fff;
         border-color: var(--royal)
     }

     .btn i {
         transition: transform .3s var(--ease)
     }

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

     /* ============ NAVBAR ============ */
     .navbar {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         z-index: 1000;
         padding: 1.2rem 0;
         transition: all .4s var(--ease)
     }

     .navbar.scrolled {
         background: rgba(255, 255, 255, .95);
         backdrop-filter: blur(20px);
         box-shadow: 0 4px 30px rgba(0, 0, 0, .06);
         padding: .8rem 0
     }

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

     .navbar .container {
    overflow: visible;
}

     .logo {
         display: flex;
         align-items: center;
         gap: .7rem;
         font-family: 'Poppins', sans-serif;
         font-weight: 800;
         font-size: 1.15rem;
         color: #d0cfcf;
         transition: color .3s
     }

     .navbar.scrolled .logo {
         color: var(--gray)
     }

     .logo-mark {
         width: 42px;
         height: 42px;

         border-radius: 50%;
         /* background: var(--gradient); */
         background: rgb(228, 228, 228);
         backdrop-filter: blur(20px);
         display: flex;
         justify-content: center;
         place-items: center;
         color: #b6b4b4;
         font-size: 1.2rem;
         /* box-shadow: 0 8px 20px rgba(21, 62, 144, .3) */
     }

     .logo span small {
         display: block;
         font-size: .65rem;
         font-weight: 500;
         letter-spacing: .1em;
         opacity: .7;
         text-transform: uppercase
     }

     .nav-links {
         display: flex;
         align-items: center;
         gap: 2rem;
         list-style: none
     }

     .nav-links a {
         color: #e0dfdf;
         font-weight: 500;
         font-size: .95rem;
         position: relative;
         padding: .3rem 0
     }

     .navbar.scrolled .nav-links a {
         color: var(--gray)
     }

     .nav-links a::after {
         content: '';
         position: absolute;
         left: 0;
         bottom: -4px;
         width: 0;
         height: 2px;
         /* background: var(--gold); */
         transition: width .3s var(--ease)
     }

     /* .nav-links a:hover::after,
     .nav-links a.active::after {
         width: 100%
     } */

     .nav-cta {
         padding: .7rem 1.4rem;
         background: var(--gold);
         color: var(--gray);
         border-radius: 999px;
         font-weight: 600;
         font-size: .9rem
     }

     .nav-cta:hover {
         background: var(--gold-dark);
         transform: translateY(-2px)
     }

     .navbar.scrolled .nav-cta {
         background: var(--royal);
         color: #fff
     }

     .navbar.scrolled .nav-cta:hover {
         background: var(--royal-dark)
     }

     .hamburger {
         display: none;
         width: 42px;
         height: 42px;
         border-radius: 12px;
         background: transparent;
         /* background: rgba(255, 255, 255, .15); */
         /* backdrop-filter: blur(10px); */
         border: none;
         cursor: pointer;
         position: relative;
         z-index: 1001
     }

     .navbar.scrolled .hamburger {
         background: var(--light)
     }

     .hamburger span {
         display: block;
         width: 20px;
         height: 2px;
         background: #bdbdbd;
         margin: 4px auto;
         transition: all .3s var(--ease);
         border-radius: 2px
     }

     .navbar.scrolled .hamburger span {
         background: var(--gray);
     }

     .hamburger.active span:nth-child(1) {
         transform: translateY(6px) rotate(45deg)
     }

     .hamburger.active span:nth-child(2) {
         opacity: 0
     }

     .hamburger.active span:nth-child(3) {
         transform: translateY(-6px) rotate(-45deg)
     }

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

     .dropdown-trigger {
         display: flex;
         align-items: center;
         gap: .4rem;
     }

     .dd-arrow {
         font-size: .7rem;
         transition: transform .3s var(--ease);
     }

     .has-dropdown.open .dd-arrow,
     .has-dropdown:hover .dd-arrow {
         transform: rotate(180deg);
     }

     .dropdown-menu {
         position: absolute;
         top: calc(100% + 14px);
         left: 50%;
         transform: translateX(-50%) translateY(8px);
         min-width: 220px;
         background: #fff;
         /* border-radius: var(--radius); */
         box-shadow: var(--shadow-lg);
         border: 1px solid var(--border);
         list-style: none;
         padding: .6rem;
         opacity: 0;
         visibility: hidden;
         transition: all .3s var(--ease);
         z-index: 1001;
     }

     /* Desktop: hover to open */
     @media (hover: hover) {
         .has-dropdown:hover .dropdown-menu {
             opacity: 1;
             visibility: visible;
             transform: translateX(-50%) translateY(0);
         }
     }

     /* Touch/click: toggled via JS with .open class */
     .has-dropdown.open .dropdown-menu {
         opacity: 1;
         visibility: visible;
         transform: translateX(-50%) translateY(0);
     }

     .dropdown-menu li a {
         display: block;
         padding: .7rem 1rem;
         /* border-radius: 10px; */
         font-size: .88rem;
         font-weight: 500;
         color: var(--gray);
         transition: all .25s var(--ease);
     }

     .dropdown-menu li a:hover {
         background: #e2e2e2;
         color: var(--royal);
         padding-left: 1.3rem;
     }

     /* Mobile: dropdown becomes an inline expanding list inside the slide-out menu */
     @media (max-width: 768px) {
         .dropdown-menu {
             position: static;
             transform: none;
             box-shadow: none;
             border: none;
             max-height: 0;
             opacity: 1;
             visibility: visible;
             padding: 0;
             overflow: hidden;
             transition: max-height .35s var(--ease);
         }

         .has-dropdown.open .dropdown-menu {
    max-height: 300px;
    padding: .4rem 0 .4rem 2.5rem;
    /* border-left: 2px solid var(--border); */
    margin-left: 5rem;
}
     }

     /* ============ HERO ============ */
     .hero {
         min-height: 85vh;
         display: flex;
         align-items: center;
         padding: 8rem 0 4rem;
         position: relative;
         overflow: hidden;
         background: linear-gradient(135deg, #7B3F00 0%, rgb(1, 1, 36) 50%, #7B3F00 100%)
     }

     /* .hero::before {
         content: '';
         position: absolute;
         inset: 0;
         /* background: url('https://assets.pinterest.com/ext/embed.html?id=139541288430111819') center/cover; */
         /* background: url('../Images/hero1.jfif ') center/cover;
         filter: blur(2px);
         opacity: 1;

         mix-blend-mode: luminosity
     } */

     /* .hero::after {
         content: '';
         position: absolute;
         inset: 0; */
         /* background: linear-gradient(135deg, rgba(0, 0, 0, 0.459) 0%, rgba(0, 34, 106, 0.619) 50%, rgba(3, 14, 36, 0.85) 100%) */
     /* }  */

     .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(2px);
    mix-blend-mode: luminosity;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 1.6s ease, transform 8s ease;
}

.hero-slide.active {
    opacity: 1;
    transform: scale(1);
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(135deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 10, .65) 100%);
}

     .hero .container {
         position: relative;
         z-index: 2
     }

     /* .hero-grid {
            display: grid;
            grid-template-columns: 1.1fr 1fr;
            gap: 4rem;
            align-items: center
        } */

     .hero-grid {
         display: flex;
         /* grid-template-columns: 1.1fr 1fr; */
         justify-content: center;
         align-items: center
     }

     /* I added this block of code below */
     .hero-left {
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
         gap: 3rem;
     }

     .hero-left h1 {
         text-align: center;
         margin-bottom: 2rem;
         font-weight: 600;
         font-size: 4rem;
     }

     .hero-left p {
         display: none;
     }


     .hero h1 {
         color: #fff;
         margin-bottom: 1.5rem
     }


     .hero-sub {
         color: rgba(255, 255, 255, .85);
         font-size: clamp(1rem, 1.2vw, 1.15rem);
         margin-bottom: 2rem;
         /* max-width: 560px */
     }

     .hero-ctas {
         display: flex;
         gap: 1rem;
         flex-wrap: wrap;
         margin-bottom: 2.5rem
     }

     .hero-trust {
         display: none;
         /* display: flex; */
         flex-wrap: wrap;
         gap: 1.5rem;
         color: rgba(255, 255, 255, .85);
         font-size: .9rem
     }

     .hero-trust span {
         display: flex;
         align-items: center;
         gap: .5rem
     }

     .hero-trust i {
         color: var(--gold)
     }

     /* Hero Right Visual */
     .hero-visual {
         position: relative;
         height: 560px
     }

     .hero-main-img {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         width: 78%;
         aspect-ratio: 4/5;
         border-radius: var(--radius-lg);
         overflow: hidden;
         box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
         animation: floatMain 6s ease-in-out infinite
     }

     .hero-main-img img {
         width: 100%;
         height: 100%;
         object-fit: cover
     }


     .hero-stat {
         position: absolute;
         background: rgba(255, 255, 255, .95);
         backdrop-filter: blur(20px);
         border-radius: var(--radius);
         padding: 1rem 1.3rem;
         box-shadow: 0 15px 40px rgba(0, 0, 0, .2);
         display: flex;
         align-items: center;
         gap: .9rem;
         min-width: 180px
     }

     .hero-stat .icon {
         width: 42px;
         height: 42px;
         border-radius: 12px;
         background: var(--gradient);
         display: grid;
         place-items: center;
         color: #fff;
         font-size: 1.1rem;
         flex-shrink: 0
     }


     .hero-scroll {
         position: absolute;
         bottom: 2rem;
         left: 50%;
         transform: translateX(-50%);
         color: rgba(255, 255, 255, .7);
         font-size: .8rem;
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: .5rem;
         z-index: 2
     }

     .hero-scroll .mouse {
         width: 24px;
         height: 40px;
         border: 2px solid rgba(255, 255, 255, .5);
         border-radius: 12px;
         position: relative
     }

     .hero-scroll .mouse::after {
         content: '';
         position: absolute;
         top: 8px;
         left: 50%;
         transform: translateX(-50%);
         width: 3px;
         height: 8px;
         background: rgba(255, 255, 255, .8);
         border-radius: 2px;
         animation: scrollDot 1.8s infinite
     }

     @keyframes scrollDot {
         0% {
             top: 8px;
             opacity: 1
         }

         100% {
             top: 22px;
             opacity: 0
         }
     }

     .curve-divider {
         position: absolute;
         bottom: -1px;
         left: 0;
         width: 100%;
         line-height: 0
     }

     .curve-divider svg {
         width: 100%;
         height: 80px;
         display: block
     }

     /* ============ ABOUT ============ */
     .about {
         overflow: hidden;
         /*I added this line*/
         background: var(--light)
     }

     .about-grid {
         display: grid;
         grid-template-columns: 1fr 1.1fr;
         gap: 4rem;
         align-items: center
     }

     .about-img {
         position: relative;
         /* border-radius: var(--radius-lg); */
         overflow: hidden;
         box-shadow: var(--shadow-lg);
         aspect-ratio: 4/5
     }

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

     .about-img::before {
         content: '';
         position: absolute;
         inset: 0;
         background: linear-gradient(135deg, rgba(21, 62, 144, .15), transparent);
         z-index: 1
     }

     .about-float {
         position: absolute;
         bottom: -30px;
         right: -30px;
         background: #fff;
         padding: 1.5rem 2rem;
         border-radius: var(--radius);
         box-shadow: var(--shadow-lg);
         display: flex;
         align-items: center;
         gap: 1rem;
         z-index: 2
     }

     .about-float .big {
         font-family: 'Poppins', sans-serif;
         font-weight: 800;
         font-size: 2.5rem;
         background: var(--gradient);
         -webkit-background-clip: text;
         background-clip: text;
         color: transparent;
         line-height: 1
     }

     .about-float .lbl {
         font-size: .85rem;
         color: var(--gray-soft);
         font-weight: 500
     }

     .about-content h2 {
         margin-bottom: 1.2rem
     }

     .about-content>p {
         margin-bottom: 2rem
     }

     .mv-grid {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 1.2rem;
         margin-bottom: 2rem
     }

     .mv-card {
         background: #fff;
         padding: 1.5rem;
         border-radius: var(--radius);
         box-shadow: var(--shadow-sm);
         border: 1px solid var(--border);
         transition: all .4s var(--ease)
     }

     .mv-card:hover {
         transform: translateY(-6px);
         box-shadow: var(--shadow-md);
         border-color: var(--gold)
     }

     .mv-card i {
         width: 44px;
         height: 44px;
         border-radius: 12px;
         background: var(--gradient-soft);
         /* color: var(--royal); */
         color: rgb(0, 0, 74);
         display: grid;
         place-items: center;
         font-size: 1.2rem;
         margin-bottom: .8rem
     }

     .mv-card h4 {
         font-size: 1.05rem;
         margin-bottom: .4rem;
         font-weight: 700
     }

     .mv-card p {
         font-size: .88rem
     }

     .values {
         display: flex;
         flex-wrap: wrap;
         gap: .6rem
     }

     .value-tag {
         padding: .5rem 1rem;
         background: #fff;
         border: 1px solid var(--border);
         border-radius: 999px;
         font-size: .85rem;
         font-weight: 500;
         color: var(--royal);
         transition: all .3s
     }

     .value-tag:hover {
         background: var(--royal);
         color: #fff;
         border-color: var(--royal);
         transform: translateY(-2px)
     }

     /* ============ IMPACT CARDS ============ */
     .pd-t{
        padding-top: 10rem;
     }
     .impact-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
         gap: 1.5rem
     }

     .impact-card {
         background: #fff;
         padding: 2rem;
         border-radius: var(--radius);
         border: 1px solid var(--border);
         transition: all .4s var(--ease);
         position: relative;
         overflow: hidden
     }

     .impact-card::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 4px;
         background: var(--gradient);
         transform: scaleX(0);
         transform-origin: left;
         transition: transform .4s var(--ease)
     }

     .impact-card:hover {
         transform: translateY(-8px);
         box-shadow: var(--shadow-lg);
         border-color: transparent
     }

     /* .impact-card:hover::before {
            transform: scaleX(1)
        } */

     .impact-icon {
         width: 64px;
         height: 64px;
         border-radius: 18px;
         background: var(--gradient-soft);
         display: grid;
         place-items: center;
         color: rgb(0, 0, 74);
         /* color: var(--royal); */
         font-size: 1.6rem;
         margin-bottom: 1.3rem;
         transition: all .4s var(--ease)
     }

     /* .impact-card:hover .impact-icon {
            background: var(--gradient);
            color: #fff;
            transform: rotate(-6deg) scale(1.05)
        } */

     .impact-card h3 {
         margin-bottom: .6rem;
         font-size: 1.2rem
     }

     .impact-card p {
         font-size: .92rem
     }

     /* ============ PROGRAMS ============ */
     .programs {
         background: var(--light)
     }

     .program {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 4rem;
         align-items: center;
         margin-bottom: 5rem
     }

     .program:last-child {
         margin-bottom: 0
     }

     .program.reverse {
         direction: rtl
     }

     .program.reverse>* {
         direction: ltr
     }

     .program-img {
         position: relative;
         /* border-radius: var(--radius-lg); */
         overflow: hidden;
         aspect-ratio: 4/3;
         box-shadow: var(--shadow-lg)
     }

     .program-img img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: transform .8s var(--ease)
     }

     .program:hover .program-img img {
         transform: scale(1.05)
     }

     .program-img .tag {
         position: absolute;
         top: 1.2rem;
         left: 1.2rem;
         padding: .5rem 1rem;
         background: rgba(255, 255, 255, .95);
         backdrop-filter: blur(10px);
         border-radius: 999px;
         font-size: .8rem;
         font-weight: 600;
         color: var(--royal)
     }

     .program-content .eyebrow {
         display: inline-block;
         padding: .35rem .9rem;
         background: var(--gradient-soft);
         color: var(--royal);
         border-radius: 999px;
         font-size: .75rem;
         font-weight: 600;
         letter-spacing: .08em;
         text-transform: uppercase;
         margin-bottom: 1rem
     }

     .program-content h3 {
         font-size: clamp(1.5rem, 2.4vw, 2rem);
         margin-bottom: 1rem
     }

     .program-content>p {
         margin-bottom: 1.5rem
     }

     .program-features {
         list-style: none;
         margin-bottom: 1.8rem
     }

     .program-features li {
         display: flex;
         align-items: flex-start;
         gap: .8rem;
         padding: .6rem 0;
         color: var(--gray)
     }

     .program-features i {
         color: var(--gold-dark);
         margin-top: .25rem;
         font-size: .9rem
     }

     /* ============ TIMELINE ============ */
     .timeline {
         position: relative;
         max-width: 900px;
         margin: 0 auto;
         padding: 2rem 0
     }

     .timeline::before {
         content: '';
         position: absolute;
         left: 50%;
         top: 0;
         bottom: 0;
         width: 3px;
         background: var(--gradient);
         transform: translateX(-50%);
         border-radius: 3px
     }

     .tl-item {
         position: relative;
         width: 50%;
         padding: 1.5rem 3rem;
         margin-bottom: 1rem
     }

     .tl-item:nth-child(odd) {
         left: 0;
         text-align: right
     }

     .tl-item:nth-child(even) {
         left: 50%
     }

     .tl-dot {
         position: absolute;
         top: 2rem;
         width: 20px;
         height: 20px;
         border-radius: 50%;
         background: var(--gold);
         border: 4px solid #fff;
         box-shadow: 0 0 0 3px var(--royal);
         z-index: 2
     }

     .tl-item:nth-child(odd) .tl-dot {
         right: -10px
     }

     .tl-item:nth-child(even) .tl-dot {
         left: -10px
     }

     .tl-content {
         background: #fff;
         padding: 1.5rem;
         border-radius: var(--radius);
         box-shadow: var(--shadow-sm);
         border: 1px solid var(--border);
         transition: all .3s var(--ease)
     }

     .tl-content:hover {
         transform: translateY(-4px);
         box-shadow: var(--shadow-md)
     }

     .tl-year {
         font-family: 'Poppins', sans-serif;
         font-weight: 800;
         color: var(--royal);
         font-size: 1.1rem;
         margin-bottom: .3rem
     }

     .tl-content h4 {
         font-size: 1.05rem;
         margin-bottom: .4rem
     }

     .tl-content p {
         font-size: .88rem
     }

     /* ============ MAP ============ */
     .map-section {
         background: var(--light)
     }

     .map-wrap {
         display: grid;
         grid-template-columns: 1.2fr 1fr;
         gap: 3rem;
         align-items: center
     }

     .map-svg {
         width: 100%;
         max-width: 560px;
         margin: 0 auto
     }

     .map-svg path {
         fill: #e5e9f2;
         stroke: #fff;
         stroke-width: 1.5;
         transition: all .3s var(--ease);
         cursor: pointer
     }

     .map-svg .state {
         fill: #d4dced
     }

     .map-svg .active {
         fill: var(--royal);
         filter: drop-shadow(0 4px 12px rgba(21, 62, 144, .35))
     }

     .map-svg .active:hover {
         fill: var(--gold)
     }

     .map-svg text {
         font-family: 'Inter', sans-serif;
         font-size: 9px;
         font-weight: 600;
         fill: var(--gray);
         pointer-events: none
     }

     .map-svg .active-label {
         fill: #fff
     }

     .map-info {
         background: #fff;
         padding: 2rem;
         border-radius: var(--radius-lg);
         box-shadow: var(--shadow-md);
         border: 1px solid var(--border);
         min-height: 280px;
         transition: all .4s var(--ease)
     }

     .map-info h3 {
         margin-bottom: .5rem;
         color: var(--royal)
     }

     .map-info .stats {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 1rem;
         margin-top: 1.5rem
     }

     .map-info .stat {
         padding: 1rem;
         background: var(--light);
         border-radius: 14px
     }

     .map-info .stat .num {
         font-family: 'Poppins', sans-serif;
         font-weight: 800;
         font-size: 1.6rem;
         color: var(--royal);
         line-height: 1
     }

     .map-info .stat .lbl {
         font-size: .8rem;
         color: var(--gray-soft);
         margin-top: .2rem
     }

     /* ============ GALLERY ============ */
     .gallery-filters {
         display: flex;
         justify-content: center;
         gap: .6rem;
         flex-wrap: wrap;
         margin-bottom: 2.5rem
     }

     .filter-btn {
         padding: .6rem 1.3rem;
         background: #fff;
         border: 1px solid var(--border);
         border-radius: 999px;
         font-size: .88rem;
         font-weight: 500;
         cursor: pointer;
         transition: all .3s var(--ease);
         color: var(--gray)
     }

     .filter-btn.active,
     .filter-btn:hover {
         background: var(--royal);
         color: #fff;
         border-color: var(--royal)
     }

     .gallery-grid {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         grid-auto-rows: 220px;
         gap: 1rem
     }

     .gallery-item {
         position: relative;
         border-radius: var(--radius);
         overflow: hidden;
         cursor: pointer;
         box-shadow: var(--shadow-sm);
         transition: all .4s var(--ease)
     }

     .gallery-item img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: transform .6s var(--ease)
     }

     .gallery-item::after {
         content: '';
         position: absolute;
         inset: 0;
         background: linear-gradient(180deg, transparent 50%, rgba(2, 17, 46, 0.85));
         opacity: 0;
         transition: opacity .4s var(--ease)
     }

     .gallery-item:hover img {
         transform: scale(1.08)
     }

     .gallery-item:hover::after {
         opacity: 1
     }

     .gallery-item .cap {
         position: absolute;
         bottom: 1rem;
         left: 1rem;
         right: 1rem;
         color: #fff;
         z-index: 2;
         opacity: 0;
         transform: translateY(10px);
         transition: all .4s var(--ease)
     }

     .gallery-item:hover .cap {
         opacity: 1;
         transform: translateY(0)
     }

     .gallery-item .cap h4 {
         color: #fff;
         font-size: 1rem;
         margin-bottom: .2rem
     }

     .gallery-item .cap span {
         font-size: .78rem;
         opacity: .85
     }

     .gallery-item.tall {
         grid-row: span 2
     }

     .gallery-item.wide {
         grid-column: span 2
     }

     /* Lightbox */
     .lightbox {
         position: fixed;
         inset: 0;
         background: rgba(0, 0, 0, .92);
         z-index: 2000;
         display: none;
         align-items: center;
         justify-content: center;
         padding: 2rem;
         backdrop-filter: blur(10px)
     }

     .lightbox.active {
         display: flex
     }

     .lightbox img {
         max-width: 90%;
         max-height: 90vh;
         border-radius: var(--radius);
         box-shadow: 0 30px 80px rgba(0, 0, 0, .5)
     }

     .lightbox-close {
         position: absolute;
         top: 2rem;
         right: 2rem;
         width: 48px;
         height: 48px;
         border-radius: 50%;
         background: rgba(255, 255, 255, .15);
         color: #fff;
         border: none;
         cursor: pointer;
         font-size: 1.3rem;
         backdrop-filter: blur(10px)
     }

     /* ============ TESTIMONIALS ============ */
     .testimonials {
         background: linear-gradient(135deg, #020814 0%, #153E90 100%);
         color: #fff;
         position: relative;
         overflow: hidden
     }

     .testimonials::before {
         content: '';
         position: absolute;
         inset: 0;
         background: url('https://images.unsplash.com/photo-1529390079861-591de354faf5?w=1920&q=80') center/cover;
         opacity: .08;
         filter: blur(16px);
         mix-blend-mode: luminosity
     }

     .testimonials .section-head h2,
     .testimonials .section-head p {
         color: #fff
     }

     .testimonials .section-head p {
         opacity: .8
     }

     .testimonials .section-head .eyebrow {
         /* background: rgba(255, 255, 255, .1); */
         background: transparent;
         color: var(--gold)
     }

     .testi-swiper {
         padding: 2rem 0 4rem
     }

     .testi-card {
         background: rgba(255, 255, 255, .08);
         backdrop-filter: blur(20px);
         border: 1px solid rgba(255, 255, 255, .15);
         padding: 2.5rem;
         border-radius: var(--radius-lg);
         height: 100%
     }

     .testi-card .quote-mark {
         font-family: 'Poppins', sans-serif;
         font-size: 4rem;
         line-height: .5;
         color: var(--gold);
         margin-bottom: 1rem;
         opacity: .8
     }

     .testi-card p {
         color: rgba(255, 255, 255, .92);
         font-size: 1.05rem;
         font-style: italic;
         margin-bottom: 1.8rem;
         line-height: 1.7
     }

     .testi-person {
         display: flex;
         align-items: center;
         gap: 1rem
     }

     .testi-person img {
         width: 54px;
         height: 54px;
         border-radius: 50%;
         object-fit: cover;
         border: 3px solid var(--gold)
     }

     .testi-person h5 {
         color: #fff;
         font-size: 1rem;
         margin-bottom: .15rem
     }

     .testi-person span {
         font-size: .82rem;
         color: var(--gold)
     }

     .swiper-pagination-bullet {
         background: #fff;
         opacity: .4
     }

     .swiper-pagination-bullet-active {
         background: var(--gold);
         opacity: 1
     }

     /* ============ LEADERSHIP ============ */
     .leaders-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
         gap: 2rem
     }

     .leader-card {
         background: #fff;
         border-radius: var(--radius-lg);
         overflow: hidden;
         box-shadow: var(--shadow-sm);
         border: 1px solid var(--border);
         transition: all .4s var(--ease);
         text-align: center
     }

     .leader-card:hover {
         transform: translateY(-10px);
         box-shadow: var(--shadow-lg)
     }

     .leader-img {
         aspect-ratio: 1;
         overflow: hidden;
         position: relative;
         background: var(--gradient-soft)
     }

     .leader-img img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: transform .6s var(--ease)
     }

     .leader-card:hover .leader-img img {
         transform: scale(1.06)
     }

     .leader-info {
         padding: 1.8rem 1.5rem
     }

     .leader-info h4 {
         font-size: 1.15rem;
         margin-bottom: .3rem
     }

     .leader-info .role {
         color: black;
         font-weight: 600;
         font-size: .85rem;
         margin-bottom: .8rem;
         display: block
     }

     .leader-info p {
         font-size: .88rem;
         margin-bottom: 1rem
     }

     .leader-social {
         display: flex;
         justify-content: center;
         gap: .6rem
     }

     .leader-social a {
         width: 36px;
         height: 36px;
         border-radius: 50%;
         background: var(--light);
         color: var(--royal);
         display: grid;
         place-items: center;
         font-size: .9rem
     }

     .leader-social a:hover {
         background: var(--royal);
         color: #fff;
         transform: translateY(-3px)
     }

     /* ============ COUNTERS ============ */
     .counters {
         /* background: var(--gradient); */
         background: linear-gradient(45deg, rgb(0, 0, 163), black);
         color: #fff;
         position: relative;
         overflow: hidden
     }

     .counters::before {
         content: '';
         position: absolute;
         filter: blur(16px);
         inset: 0;
         opacity: 3;
         background: radial-gradient(circle at 20% 50%, rgba(244, 180, 0, .2), transparent 50%), radial-gradient(circle at 80% 50%, rgba(255, 255, 255, .1), transparent 50%)
     }

     .counters-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
         gap: 2rem;
         position: relative;
         z-index: 1
     }

     .counter {
         text-align: center;
         padding: 1.5rem
     }

     .counter .num {
         font-family: 'Poppins', sans-serif;
         font-weight: 800;
         font-size: clamp(2.5rem, 4.5vw, 3.8rem);
         line-height: 1;
         margin-bottom: .5rem;
         color: #fff
     }

     .counter .lbl {
         font-size: 1rem;
         opacity: .9;
         font-weight: 500
     }

     .counter .icon {
         width: 60px;
         height: 60px;
         border-radius: 50%;
         /* background: rgba(255, 255, 255, .15); */
         backdrop-filter: blur(10px);
         display: grid;
         place-items: center;
         margin: 0 auto 1rem;
         font-size: 1.4rem
     }

     /* ============ GET INVOLVED ============ */
     .involved-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
         gap: 1.5rem
     }

     .involved-card {
         background: #fff;
         padding: 2.2rem 1.8rem;
         border-radius: var(--radius-lg);
         border: 1px solid var(--border);
         transition: all .4s var(--ease);
         position: relative;
         overflow: hidden
     }

     .involved-card::before {
         content: '';
         position: absolute;
         top: -50%;
         right: -50%;
         width: 200%;
         height: 200%;
         background: var(--gradient);
         opacity: 0;
         transition: opacity .4s var(--ease)
     }

     .involved-card:hover {
         transform: translateY(-8px);
         box-shadow: var(--shadow-lg);
         border-color: transparent
     }

     .involved-card>* {
         position: relative;
         z-index: 1
     }

     .involved-card .icon {
         width: 70px;
         height: 70px;
         border-radius: 20px;
         /* background: var(--gradient-soft); */
         /* color: var(--royal); */
         color: rgb(0, 0, 74);
         display: grid;
         place-items: center;
         font-size: 1.8rem;
         margin-bottom: 1.3rem;
         transition: all .4s var(--ease)
     }

     /* .involved-card:hover .icon {
            background: var(--gradient);
            color: #fff;
            transform: rotate(-6deg)
        } */

     .involved-card h3 {
         margin-bottom: .7rem;
         font-size: 1.25rem
     }

     .involved-card p {
         font-size: .92rem;
         margin-bottom: 1.3rem
     }

     .involved-card .link {
         color: var(--royal);
         font-weight: 600;
         font-size: .9rem;
         display: inline-flex;
         align-items: center;
         gap: .4rem
     }

     .involved-card:hover .link {
         color: var(--gold)
     }

     /* ============ DONATION ============ */
     .donation {
         background: var(--light)
     }

     .donation-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
         gap: 1.8rem
     }

     .donate-card {
         background: #fff;
         padding: 2.5rem 2rem;
         border-radius: var(--radius-lg);
         border: 1px solid var(--border);
         transition: all .4s var(--ease);
         position: relative;
         overflow: hidden
     }

     .donate-card.featured {
         background: var(--gradient-dark);
         color: #fff;
         border: none;
     }

     .donate-card.featured * {
         color: #fff
     }

     .donate-card.featured .donate-amount {
         color: var(--gold)
     }

     /* .donate-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-lg)
        } */

     /* .donate-card.featured:hover {
            transform: scale(1.03) translateY(-8px)
        } */

     .donate-card .badge {
         position: absolute;
         top: 1.2rem;
         right: 1.2rem;
         padding: .3rem .8rem;
         background: var(--gold);
         color: var(--gray);
         font-size: .7rem;
         font-weight: 700;
         border-radius: 999px;
         letter-spacing: .05em;
         text-transform: uppercase
     }

     .donate-card .icon {
         width: 60px;
         height: 60px;
         border-radius: 18px;
         /* background: var(--gradient-soft); */
         color: var(--royal);
         display: grid;
         place-items: center;
         font-size: 1.5rem;
         margin-bottom: 1.2rem
     }

     .donate-card.featured .icon {
         /* background: rgba(255, 255, 255, .18); */
         color: #fff
     }

     .donate-card h3 {
         margin-bottom: .5rem;
         font-size: 1.35rem;
         margin-top: 6pc;
     }

     .donate-amount {
         font-family: 'Poppins', sans-serif;
         font-weight: 800;
         font-size: 1.8rem;
         color: var(--royal);
         margin: 1rem 0
     }

     .donate-card ul {
         list-style: none;
         margin: 1.2rem 0
     }

     .donate-card ul li {
         display: flex;
         align-items: flex-start;
         gap: .6rem;
         padding: .4rem 0;
         font-size: .9rem
     }

     .donate-card ul li i {
         color: var(--gold);
         margin-top: .25rem
     }

     .donate-card.featured ul li i {
         color: #fff
     }

     .donate-card .btn {
         width: 100%;
         justify-content: center;
         margin-top: 1rem
     }

     /* ============ CONTACT ============ */
     .contact-grid {
         display: grid;
         grid-template-columns: 1.1fr 1fr;
         gap: 4rem;
         align-items: start
     }

     .contact-left h2 {
         margin-bottom: 1rem
     }

     .contact-left>p {
         margin-bottom: 2rem;
         max-width: 520px
     }

     .info-cards {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 1rem;
         margin-bottom: 2rem
     }

     .info-card {
         background: rgba(255, 255, 255, .7);
         backdrop-filter: blur(20px);
         border: 1px solid var(--border);
         padding: 1.3rem;
         border-radius: var(--radius);
         transition: all .3s var(--ease)
     }

     .info-card:hover {
         transform: translateY(-4px);
         box-shadow: var(--shadow-md);
         border-color: var(--gold)
     }

     .info-card i {
         width: 40px;
         height: 40px;
         border-radius: 12px;
         /* background: var(--gradient); */
         /* color: #fff; */
         color: rgb(0, 0, 74);
         display: grid;
         place-items: center;
         margin-bottom: .8rem;
         font-size: 1rem
     }

     .info-card h5 {
         font-size: .78rem;
         color: var(--gray-soft);
         text-transform: uppercase;
         letter-spacing: .08em;
         margin-bottom: .3rem;
         font-weight: 600
     }

     .info-card p {
         color: var(--gray);
         font-weight: 600;
         font-size: .95rem
     }

     .connect-cards {
         display: flex;
         flex-direction: column;
         gap: 1rem
     }

     .connect-card {
         background: #fff;
         padding: 1.3rem 1.5rem;
         border-radius: var(--radius);
         border: 1px solid var(--border);
         display: flex;
         align-items: center;
         gap: 1rem;
         transition: all .4s var(--ease);
         cursor: pointer
     }

     .connect-card:hover {
         transform: translateX(6px);
         box-shadow: var(--shadow-md);
         border-color: var(--gold)
     }

     .connect-card .icon {
         width: 50px;
         height: 50px;
         border-radius: 14px;
         /* background: var(--gradient-soft); */
         color: var(--royal);
         display: grid;
         place-items: center;
         font-size: 1.2rem;
         flex-shrink: 0;
         transition: all .3s var(--ease)
     }

     /* .connect-card:hover .icon {
            background: var(--gradient);
            color: #fff
        } */

     .connect-card h5 {
         font-size: 1rem;
         margin-bottom: .2rem
     }

     .connect-card p {
         font-size: .85rem;
         margin: 0
     }

     .connect-card .arrow {
         margin-left: auto;
         color: var(--royal);
         font-size: 1.1rem;
         transition: transform .3s var(--ease)
     }

     .connect-card:hover .arrow {
         transform: translateX(4px);
         color: var(--gold)
     }

     .social-row {
         display: flex;
         gap: .7rem;
         margin-top: 1.5rem
     }

     .social-row a {
         width: 44px;
         height: 44px;
         border-radius: 50%;
         background: #fff;
         border: 1px solid var(--border);
         color: var(--royal);
         display: grid;
         place-items: center;
         transition: all .3s var(--ease)
     }

     .social-row a:hover {
         background: var(--royal);
         color: #fff;
         border-color: var(--royal);
         transform: translateY(-3px)
     }

     .cta-banner {
         margin-top: 3rem;
         padding: 2.5rem;
         /* background: var(--gradient); */
         /* background: url(Images/img\ 9.jpg); */
         background-size: cover;

         border-radius: var(--radius-lg);
         color: #fff;
         text-align: center;
         position: relative;
         overflow: hidden
     }

     .cta-banner img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: transform .6s var(--ease)
     }

     .cta-banner::before {
         content: '';
         position: absolute;
         inset: 0;
         background: radial-gradient(circle at 30% 50%, rgba(244, 180, 0, .2), transparent 60%)
     }

     .cta-banner>* {
         position: relative;
         z-index: 1
     }

     .cta-banner h3 {
         color: #fff;
         font-size: clamp(1.3rem, 2.2vw, 1.8rem);
         margin-bottom: 1.2rem
     }

     .cta-banner .btns {
         display: flex;
         gap: .8rem;
         justify-content: center;
         flex-wrap: wrap
     }

     /* ============ FAQ ============ */
     .faq {
         background: var(--light)
     }

     .faq-wrap {
         max-width: 820px;
         margin: 0 auto
     }

     .faq-item {
         background: #fff;
         /* border-radius: var(--radius); */
         margin-bottom: .8rem;
         border: 1px solid var(--border);
         overflow: hidden;
         transition: all .3s var(--ease)
     }

     .faq-item.active {
         border-color: var(--royal);
         box-shadow: var(--shadow-md)
     }

     .faq-q {
         padding: 1.3rem 1.6rem;
         display: flex;
         justify-content: space-between;
         align-items: center;
         cursor: pointer;
         font-weight: 600;
         color: var(--gray);
         font-size: 1rem;
         transition: color .3s
     }

     .faq-item.active .faq-q {
         color: var(--royal)
     }

     .faq-q i {
         color: var(--royal);
         transition: transform .3s var(--ease)
     }

     .faq-item.active .faq-q i {
         transform: rotate(180deg);
         color: var(--gold)
     }

     .faq-a {
         max-height: 0;
         overflow: hidden;
         transition: max-height .4s var(--ease)
     }

     .faq-a-inner {
         padding: 0 1.6rem 1.3rem;
         color: var(--gray-soft);
         font-size: .95rem;
         line-height: 1.7
     }

     /* ============ FOOTER ============ */
     footer {
         background: #030b1d;
         color: rgba(255, 255, 255, .75);
         padding: 4.5rem 0 1.5rem;
         position: relative;
         overflow: hidden
     }

     footer::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         height: 1px;
         background: linear-gradient(90deg, transparent, var(--gold), transparent)
     }

     .foot-grid {
         display: grid;
         grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
         gap: 3rem;
         margin-bottom: 3rem
     }

     .foot-brand .logo {
         color: #fff;
         margin-bottom: 1.2rem
     }

     .foot-brand p {
         font-size: .92rem;
         line-height: 1.7;
         margin-bottom: 1.5rem
     }

     .foot-social {
         display: flex;
         gap: .6rem
     }

     .foot-social a {
         width: 38px;
         height: 38px;
         border-radius: 50%;
         background: rgba(255, 255, 255, .08);
         color: #fff;
         display: grid;
         place-items: center;
         transition: all .3s var(--ease)
     }

     .foot-social a:hover {
         background: var(--gold);
         color: var(--gray);
         transform: translateY(-3px)
     }

     .foot-col h5 {
         color: #fff;
         font-size: 1rem;
         margin-bottom: 1.2rem;
         font-family: 'Poppins', sans-serif;
         font-weight: 700
     }

     .foot-col ul {
         list-style: none
     }

     .foot-col ul li {
         margin-bottom: .6rem
     }

     .foot-col ul a {
         font-size: .9rem;
         transition: all .3s
     }

     .foot-col ul a:hover {
         color: var(--gold);
         padding-left: 4px
     }

     .newsletter {
         display: flex;
         gap: .5rem;
         margin-top: 1rem
     }

     .newsletter input {
         flex: 1;
         padding: .75rem 1rem;
         background: rgba(255, 255, 255, .08);
         border: 1px solid rgba(255, 255, 255, .15);
         border-radius: 999px;
         color: #fff;
         font-size: .88rem;
         outline: none;
         transition: all .3s
     }

     .newsletter input::placeholder {
         color: rgba(255, 255, 255, .5)
     }

     .newsletter input:focus {
         border-color: var(--gold);
         background: rgba(255, 255, 255, .12)
     }

     .newsletter button {
         padding: .75rem 1.2rem;
         background: var(--gold);
         color: var(--gray);
         border: none;
         border-radius: 999px;
         cursor: pointer;
         font-weight: 600;
         transition: all .3s var(--ease)
     }

     .newsletter button:hover {
         background: var(--gold-dark);
         transform: translateY(-2px)
     }

     .foot-bottom {
         padding-top: 1.5rem;
         border-top: 1px solid rgba(255, 255, 255, .1);
         display: flex;
         justify-content: space-between;
         align-items: center;
         flex-wrap: wrap;
         gap: 1rem;
         font-size: .85rem
     }

     .foot-bottom .tp {
         display: flex;
         gap: 3pc;
         cursor: pointer;
     }

     /* ============ BACK TO TOP ============ */
     .back-top {
         position: fixed;
         bottom: 2rem;
         right: 2rem;
         width: 48px;
         height: 48px;
         border-radius: 50%;
         /* background: var(--royal); */
         background: rgb(0, 0, 37);
         color: #fff;
         border: none;
         cursor: pointer;
         display: grid;
         place-items: center;
         box-shadow: 0 10px 30px rgba(21, 62, 144, .4);
         opacity: 0;
         visibility: hidden;
         transform: translateY(20px);
         transition: all .3s var(--ease);
         z-index: 999
     }

     .back-top.show {
         opacity: 1;
         visibility: visible;
         transform: translateY(0)
     }

     .back-top:hover {
         /* background: var(--gold); */
         background: rgb(86, 86, 255);
         color: var(--gray);
         transform: translateY(-4px)
     }

     /* ============ SCROLL PROGRESS ============ */
     .scroll-progress {
         position: fixed;
         top: 0;
         left: 0;
         height: 3px;
         /* background: var(--gradient); */
         background: white;
         z-index: 1100;
         width: 0;
         transition: width .1s linear
     }

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

         .hero-grid,
         .about-grid,
         .program,
         .map-wrap,
         .contact-grid {
             grid-template-columns: 1fr;
             gap: 3rem
         }

         .program.reverse {
             direction: ltr
         }

         .hero-visual {
             height: 480px;
             max-width: 500px;
             margin: 0 auto
         }

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

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

     @media(max-width:768px) {
         .hamburger {
             display: block
         }



         .nav-links {
             position: fixed;
             top: 0;
             right: -100%;
             width: 80%;
             max-width: 340px;
             height: 100vh;
             background: #fff;
             flex-direction: column;
             align-items: flex-start;
             padding: 6rem 2rem 2rem;
             gap: 1.5rem;
             transition: right .4s var(--ease);
             box-shadow: -10px 0 40px rgba(0, 0, 0, .1)
         }

         .nav-links.active {
             right: 0
         }

         .nav-links a {
             color: var(--gray);
             font-size: 1.05rem
         }

         .nav-cta {
             margin-top: 1rem
         }

         .hero {
             padding-top: 7rem
         }

         .hero-visual {
             height: 420px
         }

         /* .hero-stat.s1,
.hero-stat.s2,
.hero-stat.s3{
    display:none;
} */

         /* .hero-stat.s1,
            .hero-stat.s2,
            .hero-stat.s3 {
                min-width: 150px;
                padding: .8rem 1rem
            } */
         /* .about-float{
    right:10px;
    bottom:10px;
} */
         /* .blob{
    display:block;
} */
         .hero-stat .num {
             font-size: 1.15rem
         }

         .mv-grid {
             grid-template-columns: 1fr
         }

         .info-cards {
             grid-template-columns: 1fr
         }

         .timeline::before {
             left: 20px
         }

         .tl-item {
             width: 100%;
             padding-left: 50px;
             padding-right: 0;
             text-align: left !important;
             left: 0 !important
         }

         .tl-item .tl-dot {
             left: 10px !important;
             right: auto !important
         }

         .gallery-grid {
             grid-template-columns: repeat(2, 1fr);
             grid-auto-rows: 180px
         }

         .gallery-item.wide {
             grid-column: span 2
         }

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

         .foot-bottom {
             flex-direction: column;
             text-align: center
         }

         .donate-card.featured {
             transform: none
         }

         .donate-card.featured:hover {
             transform: translateY(-8px)
         }
     }

     @media(max-width:480px) {
         .hero-left h1 {
             font-size: 1.8rem;
             font-weight: 600;
         }

         .hero-visual {
             display: none;
         }

         .back-top {
             display: none;
             bottom: 1.5rem;
             right: 1.5rem;
             width: 42px;
             height: 42px
         }

         .hero-ctas {
             flex-direction: column
         }

         .hero-ctas .btn {
             width: 100%;
             justify-content: center
         }

         .hero-trust {
             flex-direction: column;
             gap: .6rem
         }

         .hero-sub-img {
             width: 38%
         }

         .gallery-grid {
             grid-template-columns: 1fr;
             grid-auto-rows: 220px
         }

         .gallery-item.wide,
         .gallery-item.tall {
             grid-column: span 1;
             grid-row: span 1
         }

         .cta-banner {
             display: none;
         }
     }

     /* Reduced motion */
     @media(prefers-reduced-motion:reduce) {

         *,
         *::before,
         *::after {
             animation-duration: .01ms !important;
             animation-iteration-count: 1 !important;
             transition-duration: .01ms !important
         }
     }

     /* Loader */
     .loader {
         height: 100vh;
         width: 100%;
         position: fixed;
         outline: 2px solid red;
         inset: 0;
         background: #fff;
         z-index: 9999;
         display: flex;
         justify-content: center;
         place-items: center;
         transition: opacity .5s, visibility .5s
     }

     .loader img {
         width: 100px;
         height: 100px;
     }

     .loader.hide {
         opacity: 0;
         visibility: hidden
     }

     .loader-mark {
         width: 400px;
         height: 100px;
         border-radius: 18px;
         /* background: var(--gradient); */
         background: transparent;
         display: grid;
         place-items: center;
         color: #fff;
         font-size: 1.6rem;
         animation: loaderPulse 1.2s ease-in-out infinite
     }

     .loader-mark h1 {
         font-size: 1rem;
         text-align: center;
     }

     @keyframes loaderPulse {

         0%,
         100% {
             transform: scale(1);
             opacity: 1
         }

         50% {
             transform: scale(1.1);
             opacity: .8
         }
     }