/* ============================================================
    QISMET ACADEMY — PREMIUM UI STYLESHEET  v2.0
    Palette Updated: Pure White Background, Flat UI & #248F59 
  ============================================================ */

  /* ── RESET ─────────────────────────────────────────────── */
  *,*::before,*::after {
      margin:0;
      padding:0;
      box-sizing:border-box;
  }

  html {
      scroll-behavior:smooth;
      font-size:16px;
      -webkit-font-smoothing:antialiased;
  }

  body {
      font-family:'Plus Jakarta Sans',sans-serif;
      background:var(--white);
      color:var(--body);
      line-height:1.7;
      overflow-x:hidden;
      cursor:auto;
  }

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

  ul {
      list-style:none;
  }

  button {
      cursor:pointer;
      font-family:inherit;
      border:none;
      background:none;
  }

  input,textarea,select {
      font-family:inherit;
  }

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

  /* ── CSS VARS ───────────────────────────────────────────── */
  :root {
      /* #248F59 Color Palette */
    --g900:#11472B;
      /* Darkest accent */
    --g800:#1B6A42;
      /* Gradient dark */
    --g700:#248F59;
      /* Base Brand Color */
    --g500:#33B271;
      /* Gradient light */
    --g300:#8BD6B0;
      /* Borders / accents */
    --g100:#E4F6ED;
      /* Lightest tint for labels / backgrounds */
    
    --teal:#38B2AC;
      --ink:#0F1F16;
      --body:#2A3D30;
      --muted:#6B8C76;
      --white:#FFFFFF;
      --off:#FFFFFF;
      /* Mapped to pure white */
    
    --sh1:0 2px 12px rgba(36,143,89,.07);
      --sh2:0 8px 32px rgba(36,143,89,.12);
      --sh3:0 20px 60px rgba(36,143,89,.18);
      --r4:4px;
      --r8:8px;
      --r12:12px;
      --r16:16px;
      --r24:24px;
      --r999:999px;
      --ease:cubic-bezier(.25,.46,.45,.94);
      --spring:cubic-bezier(.34,1.56,.64,1);
  }

  /* ── WRAP ───────────────────────────────────────────────── */
  .wrap {
      max-width:1200px;
      margin:0 auto;
      padding:0 28px;
  }

  /* ── SECTION HELPERS ────────────────────────────────────── */
  .section {
      padding:112px 0;
  }

  .sec-label {
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:.72rem;
      font-weight:700;
      letter-spacing:.15em;
      text-transform:uppercase;
      color:var(--g700);
      background:var(--g100);
      padding:5px 14px;
      border-radius:var(--r999);
      border:1px solid var(--g300);
      margin-bottom:18px;
  }

  .sec-label--light {
      color:var(--g700);
      background:var(--white);
      border-color:var(--white);
  }

  .sec-title {
      font-family:'Fraunces',serif;
      font-size:clamp(2rem,3.8vw,3rem);
      font-weight:700;
      line-height:1.18;
      color:var(--ink);
      margin-bottom:18px;
  }

  .sec-title--light {
      color:var(--white);
  }

  .sec-sub {
      font-size:1.05rem;
      color:var(--muted);
      max-width:560px;
  }

  .sec-sub--light {
      color:rgba(255,255,255,.9);
  }

  .sec-header {
      text-align:center;
      margin-bottom:64px;
  }

  .sec-header .sec-sub {
      margin:0 auto;
  }

  /* ── BUTTONS ────────────────────────────────────────────── */
  .btn-primary {
      display:inline-flex;
      align-items:center;
      gap:10px;
      background:linear-gradient(135deg,var(--g700),var(--g500));
      color:var(--white);
      padding:14px 32px;
      border-radius:var(--r999);
      font-weight:700;
      font-size:.95rem;
      border:none;
      transition:all .3s var(--ease);
      box-shadow:0 4px 20px rgba(36,143,89,.35);
      position:relative;
      overflow:hidden;
  }

  .btn-primary::after {
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(135deg,var(--g800),var(--g700));
      opacity:0;
      transition:opacity .3s;
  }

  .btn-primary:hover::after {
      opacity:1;
  }

  .btn-primary>* {
      position:relative;
      z-index:1;
  }

  .btn-primary:hover {
      transform:translateY(-2px);
      box-shadow:0 8px 28px rgba(36,143,89,.45);
  }

  .btn-primary:active {
      transform:translateY(0);
  }

  .btn-ghost {
      display:inline-flex;
      align-items:center;
      gap:10px;
      background:var(--white);
      color:var(--g700);
      padding:14px 28px;
      border-radius:var(--r999);
      font-weight:600;
      font-size:.95rem;
      border:1px solid var(--white);
      box-shadow:0 4px 15px rgba(0,0,0,.05);
      transition:all .3s var(--ease);
  }

  .btn-ghost:hover {
      background:var(--g100);
      border-color:var(--g100);
      transform:translateY(-2px);
  }

  .btn-ghost .fa-play {
      font-size:.75rem;
  }

  .btn-ghost-sm {
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:.88rem;
      font-weight:700;
      color:var(--g700);
      border:1.5px solid var(--g300);
      padding:10px 22px;
      border-radius:var(--r999);
      transition:all .3s var(--ease);
  }

  .btn-ghost-sm:hover {
      background:var(--g700);
      color:var(--white);
      border-color:var(--g700);
  }

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



  /* ── PRELOADER ──────────────────────────────────────────── */
  #preloader {
      position: fixed;
      inset: 0;
      background: #248F59;
      z-index: 99999;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity .7s var(--ease), visibility .7s;
  }

  #preloader.out {
      opacity: 0;
      visibility: hidden;
  }

  .pre-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
  }

  .pre-logo-wrapper {
      position: relative;
      width: 100px;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .pre-ring-svg {
      position: absolute;
      width: 100%;
      height: 100%;
      inset: 0;
  }

  .pre-ring {
      animation: preRing 1.4s var(--ease) forwards;
      stroke: #1a5236;
      stroke-width: 2;
  }

  @keyframes preRing {
      to {
          stroke-dashoffset: 0;
      }
  }

  .pre-logo-img {
      width: 60px;
      height: auto;
      position: relative;
      z-index: 1;
      animation: preLogo 1s var(--ease) both;
  }

  @keyframes preLogo {
      from {
          opacity: 0;
          transform: scale(0.8);
      }
      to {
          opacity: 1;
          transform: scale(1);
      }
  }

  @keyframes preText {
      from {
          opacity: 0;
          transform: translateY(10px);
      }
      to {
          opacity: 1;
          transform: none;
      }
  }

  /* ── NAVBAR ─────────────────────────────────────────────── */
  #navbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      padding: 16px 20px;
      pointer-events: none;
      transition: padding 0.35s var(--ease);
  }

  .nav-wrap {
      max-width: 1200px;
      margin: 0 auto;
      padding: 14px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      pointer-events: auto;
      /* Glassmorphism removed -> Solid Flat BG */
    background: #248F59;
      opacity: 0.95;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 18px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.16);
      transition: all 0.35s var(--ease);
  }

  #navbar.solid .nav-wrap {
      background: #1f5339;
      /* Darker solid background on scroll */
    border-color: rgba(255, 255, 255, 0.12);
      box-shadow: 0 12px 38px rgba(0, 0, 0, 0.24);
      transform: translateY(2px);
  }

  .logo {
      display: flex;
      align-items: center;
      flex-shrink: 0;
  }

  .logo-img {
      height: 35px;
      width: auto;
      object-fit: contain;
      display: block;
  }

  .nav-links {
      display: flex;
      align-items: center;
      gap: 2px;
  }

  .nl-item {
      font-size: 0.9rem;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.82);
      padding: 8px 14px;
      border-radius: 10px;
      transition: all 0.25s var(--ease);
      position: relative;
      white-space: nowrap;
  }

  .nl-item::after {
      content: '';
      position: absolute;
      bottom: 4px;
      left: 14px;
      right: 14px;
      height: 1.5px;
      background: var(--g500);
      transform: scaleX(0);
      transition: transform 0.3s var(--ease);
      transform-origin: left;
  }

  .nl-item:hover::after, .nl-item.active::after {
      transform: scaleX(1);
  }

  .nl-item:hover {
      color: #fff;
  }

  .nav-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
  }

  .btn-donate-nav {
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      padding: 10px 22px;
      border-radius: 999px;
      font-weight: 700;
      font-size: 0.88rem;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.3s var(--ease);
      border: 1px solid rgba(255, 255, 255, 0.12);
      white-space: nowrap;
  }

  .btn-donate-nav:hover {
      background: var(--g500);
      border-color: var(--g500);
      color: #fff;
  }

  .hamburger {
      display: none;
      flex-direction: column;
      gap: 7px;
      padding: 8px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .h-bar {
      display: block;
      width: 24px;
      height: 2px;
      background: #fff;
      border-radius: 4px;
      transition: all 0.35s var(--ease);
  }

  .hamburger.open .h-bar:first-child {
      transform: translateY(9px) rotate(45deg);
  }

  .hamburger.open .h-bar:last-child {
      transform: translateY(-9px) rotate(-45deg);
  }

  @media (max-width: 768px) {
  #navbar {
          padding: 12px 16px;
      }

  #navbar.solid {
          padding: 10px 16px;
      }

  .nav-wrap {
          padding: 8px 16px;
      }

  .nav-links {
          display: none;
      }

  .hamburger {
          display: flex;
      }

  .btn-donate-nav {
          padding: 8px 16px;
          font-size: .82rem;
      }

  }

  /* ── MOBILE DRAWER ──────────────────────────────────────── */
  .mobile-drawer {
      position:fixed;
      top:0;
      right:-100%;
      bottom:0;
      width:300px;
      background:var(--g900);
      z-index:2000;
      transition:right .4s var(--ease);
      display:flex;
      flex-direction:column;
  }

  .mobile-drawer.open {
      right:0;
  }

  .drawer-overlay {
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.5);
      z-index:1999;
      opacity:0;
      visibility:hidden;
      transition:all .4s;
      /* Blur removed for solid overlay */;
  }

  .drawer-overlay.show {
      opacity:1;
      visibility:visible;
  }

  .drawer-inner {
      display:flex;
      flex-direction:column;
      height:100%;
      padding:80px 32px 40px;
  }

  .drawer-links {
      display:flex;
      flex-direction:column;
      gap:4px;
      flex:1;
  }

  .drawer-links a {
      font-size:1.05rem;
      font-weight:600;
      color:rgba(255,255,255,.8);
      padding:13px 16px;
      border-radius:var(--r12);
      transition:all .25s;
  }

  .drawer-links a:hover {
      color:var(--white);
      background:rgba(255,255,255,.08);
  }

  .drawer-donate {
      margin-top:16px;
      background:var(--g500)!important;
      color:var(--white)!important;
      text-align:center;
      border-radius:var(--r999)!important;
      font-weight:700!important;
  }

  .drawer-footer p {
      font-size:.82rem;
      color:rgba(255,255,255,.35);
      line-height:1.6;
  }

  /* ── REVEAL ANIMATION ───────────────────────────────────── */
  [data-reveal] {
      opacity:0;
      transform:translateY(28px);
      transition:opacity .7s var(--ease),transform .7s var(--ease);
  }

  [data-reveal].revealed {
      opacity:1;
      transform:none;
  }

  /* ── HERO ───────────────────────────────────────────────── */
  .hero {
      min-height: 100vh;
      background-color: #0a1510;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      padding: 140px 0 100px;
      text-align: center;
  }

  .hero-carousel {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      overflow: hidden;
  }

  .carousel-track {
      position: relative;
      width: 100%;
      height: 100%;
  }

  .carousel-slide {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 1s ease-in-out;
  }

  .carousel-slide.active {
      opacity: 1;
      z-index: 1;
  }

  .carousel-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
  }

  .carousel-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 4;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: none;
      /* Glassmorphism removed -> Solid Flat BG */
    background: #333;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
  }

  .carousel-arrow:hover {
      background: var(--g700);
      transform: translateY(-50%) scale(1.08);
  }

  .carousel-arrow:focus {
      outline: 2px solid var(--g500);
      outline-offset: 3px;
  }

  .arrow-prev {
      left: 24px;
  }

  .arrow-next {
      right: 24px;
  }

  .carousel-dots {
      position: absolute;
      bottom: 40px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 12px;
      z-index: 4;
  }

  .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.4);
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      padding: 0;
  }

  .dot.active {
      background: var(--g700);
      width: 28px;
      border-radius: 5px;
  }

  .hero-overlay {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background: linear-gradient(140deg, rgba(10, 21, 16, 0.45) 0%, rgba(13, 33, 25, 0.4) 45%, rgba(19, 45, 36, 0.45) 100%);
  }

  .hero-noise {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      opacity: 0.4;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
  }

  .hero-grid-lines {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background-image: linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
      background-size: 50px 50px;
  }

  .hero-wrap {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 28px;
      position: relative;
      z-index: 3;
  }

  .hero-center {
      max-width: 850px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
  }

  .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      border-radius: 99px;
      background: #248F59;
      border: 1px solid #1a6b42;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #fff;
      margin-bottom: 30px;
  }

  .eyebrow-dot {
      width: 8px;
      height: 8px;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 0 0 4px #fff;
      animation: eyebrowPulse 2s ease infinite;
  }

  @keyframes eyebrowPulse {
  0%, 100% {
          box-shadow: 0 0 0 4px rgba(36, 143, 89, 0.25);
          opacity: 1;
      }

  50% {
          box-shadow: 0 0 0 8px rgba(36, 143, 89, 0.08);
          opacity: 0.85;
      }

  }

  .hero-h1 {
      margin-bottom: 24px;
  }

  .hero-logo-img {
      display: block;
      margin: 0 auto 10px auto;
      height: clamp(2.5rem, 6vw, 5rem);
      width: auto;
      object-fit: contain;
  }

  .hero-green {
      display: block;
      font-family: 'Inter', sans-serif;
      font-size: clamp(2.2rem, 6vw, 5.2rem);
      font-weight: 900;
      line-height: 0.9;
      letter-spacing: -0.04em;
      color: #1bbe6c;
      text-transform: uppercase;
  }

  .hero-sub {
      font-size: 1.1rem;
      color: rgba(255,255,255,0.7);
      max-width: 600px;
      line-height: 1.6;
      margin-bottom: 40px;
  }

  .hero-actions {
      display: flex;
      gap: 15px;
      margin-bottom: 60px;
      flex-wrap: wrap;
      justify-content: center;
  }

  .hero-metrics {
      display: flex;
      align-items: center;
      gap: 30px;
      padding: 24px 40px;
      border-radius: 30px;
      /* Glassmorphism removed -> Solid Flat BG */
    background: #11141E;
      border: 1px solid rgba(255, 255, 255, 0.05);
  }



  @media (max-width: 992px) {
  .hero {
          padding: 120px 0 90px;
      }

  .hero-metrics {
          gap: 20px;
          padding: 20px 24px;
      }

  .hm-item strong {
          font-size: 1.8rem;
      }

  }

  @media (max-width: 768px) {
  .hero {
          padding: 110px 0 80px;
      }

  .hero-wrap {
          padding: 0 20px;
      }

  .hero-sub {
          font-size: 1rem;
          margin-bottom: 32px;
      }

  .hero-actions {
          gap: 12px;
          margin-bottom: 40px;
      }

  .hero-metrics {
          flex-direction: column;
          gap: 18px;
          padding: 22px 20px;
          border-radius: 24px;
      }

  .hm-sep {
          width: 40px;
          height: 1px;
      }

  .carousel-arrow {
          width: 40px;
          height: 40px;
      }

  .arrow-prev {
          left: 14px;
      }

  .arrow-next {
          right: 14px;
      }

  .carousel-dots {
          bottom: 24px;
      }

  .hero-scroll {
          bottom: 30px;
      }

  .hs-line {
          height: 36px;
      }

  }

  @media (max-width: 480px) {
  .hero-eyebrow {
          font-size: 0.62rem;
          padding: 7px 12px;
          gap: 8px;
          margin-bottom: 22px;
      }

  .hero-logo-img {
          margin-bottom: 8px;
      }

  .hero-sub {
          font-size: 0.95rem;
      }

  .carousel-arrow {
          width: 36px;
          height: 36px;
      }

  }

  /* ── MARQUEE ────────────────────────────────────────────── */
  .marquee-bar {
      background:var(--g800);
      padding:16px 0;
      overflow:hidden;
      border-top:1px solid rgba(255,255,255,.06);
      border-bottom:1px solid rgba(255,255,255,.06);
  }

  .mq-track {
      display:flex;
      width:max-content;
      animation:mqScroll 30s linear infinite;
  }

  .mq-track:hover {
      animation-play-state:paused;
  }

  .mq-set {
      display:flex;
      gap:52px;
      padding-right:52px;
  }

  .mq-set span {
      font-size:.82rem;
      font-weight:700;
      letter-spacing:.06em;
      color:var(--g100);
      white-space:nowrap;
      display:flex;
      align-items:center;
      gap:10px;
  }

  .mq-set span i {
      font-size:.45rem;
      color:var(--g500);
  }

  @keyframes mqScroll {
  from {
          transform:translateX(0);
      }

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

  }

  /* ── ABOUT ──────────────────────────────────────────────── */
  .about-sec {
      background: var(--white);
      padding: 120px 0;
  }

  .about-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
  }

  .about-vis {
      position: relative;
      width: 100%;
  }

  .av-glass-slider {
      position: relative;
      padding: 18px;
      border-radius: 28px;
      /* Glassmorphism removed -> Solid Flat BG */
    background: var(--g100);
      border: 1px solid var(--g300);
      box-shadow: 0 20px 60px rgba(18, 38, 28, 0.05);
      overflow: hidden;
  }

  .av-slider-top {
      display: flex;
      justify-content: flex-start;
      margin-bottom: 14px;
      position: relative;
      z-index: 2;
  }




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

  50% {
          transform: scale(1.15);
          opacity: 0.8;
      }

  }

  .av-carousel {
      position: relative;
      display: flex;
      align-items: center;
      gap: 12px;
  }

  .av-track {
      position: relative;
      flex: 1;
      overflow: hidden;
      border-radius: 22px;
      height: 460px;
  }

  .av-slide {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border-radius: 22px;
      background: var(--g100);
      opacity: 0;
      transition: opacity 0.6s ease;
  }

  .av-slide.active {
      opacity: 1;
  }

  .av-slide img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center;
  }

  .av-nav {
      flex-shrink: 0;
      width: 46px;
      height: 46px;
      border: none;
      border-radius: 50%;
      /* Glassmorphism removed -> Solid Flat BG */
    background: var(--white);
      border: 1px solid var(--g300);
      color: var(--g800);
      font-size: 1rem;
      cursor: pointer;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
      transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .av-nav:hover {
      transform: scale(1.06);
      background: var(--g100);
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
  }

  .av-nav:active {
      transform: scale(0.95);
  }

  .av-slider-bottom {
      position: relative;
      z-index: 2;
      display: flex;
      justify-content: center;
      margin-top: 20px;
  }

  .av-dots {
      display: flex;
      align-items: center;
      gap: 10px;
  }

  .av-dot {
      width: 10px;
      height: 10px;
      border: none;
      border-radius: 999px;
      background: rgba(36, 143, 89, 0.22);
      cursor: pointer;
      transition: all 0.3s ease;
      padding: 0;
  }

  .av-dot:hover {
      background: rgba(36, 143, 89, 0.35);
  }

  .av-dot.active {
      width: 30px;
      background: var(--g700);
      box-shadow: 0 8px 18px rgba(36, 143, 89, 0.25);
  }

  .about-body h2 {
      margin-bottom: 16px;
  }

  .about-lead {
      font-size: 1.05rem;
      color: var(--body);
      line-height: 1.8;
      margin-bottom: 14px;
  }

  .about-lead strong {
      color: var(--g800);
  }

  .about-body-p {
      font-size: 0.95rem;
      color: var(--muted);
      line-height: 1.8;
      margin-bottom: 28px;
  }

  .about-pillars {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 32px;
  }

  .ap-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--body);
  }

  .ap-item i {
      width: 22px;
      height: 22px;
      background: var(--g100);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.65rem;
      color: var(--g700);
      flex-shrink: 0;
  }

  @media (max-width: 1024px) {
  .about-layout {
          gap: 50px;
      }

  .av-track {
          height: 400px;
      }

  }

  @media (max-width: 768px) {
  .about-sec {
          padding: 90px 0;
      }

  .about-layout {
          grid-template-columns: 1fr;
          gap: 40px;
      }

  .av-glass-slider {
          padding: 14px;
          border-radius: 22px;
      }

  .av-track {
          height: 320px;
          border-radius: 18px;
      }

  .av-nav {
          width: 40px;
          height: 40px;
          font-size: 0.9rem;
      }

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

  }

  @media (max-width: 480px) {
  .av-carousel {
          gap: 8px;
      }

  .av-track {
          height: 260px;
          border-radius: 16px;
      }

  .av-nav {
          width: 36px;
          height: 36px;
          font-size: 0.8rem;
      }

  .av-slider-top {
          margin-bottom: 10px;
      }

  .av-mini-badge {
          padding: 8px 12px;
          font-size: 0.7rem;
      }

  .av-slider-bottom {
          margin-top: 14px;
      }

  .av-dots {
          gap: 6px;
      }

  .av-dot {
          width: 8px;
          height: 8px;
      }

  .av-dot.active {
          width: 24px;
      }

  }

  /* ── MISSION & VISION ───────────────────────────────────── */
  .mvv-sec {
      background: #248F59;
      padding: 80px 0;
      position: relative;
      overflow: hidden;
  }

  .mvv-sec::before {  
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 600px 400px at 50% 0%, rgba(255, 255, 255, 0.08), transparent);
      pointer-events: none;
  }

  .mvv-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2px;
      position: relative;
      z-index: 1;
  }

  .mvv-card {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.06);
      padding: 48px 40px;
      transition: all 0.35s var(--ease);
      position: relative;
      overflow: hidden;
  }

  .mvv-card:first-child {
      border-radius: var(--r16) 0 0 var(--r16);
  }

  .mvv-card:last-child {
      border-radius: 0 var(--r16) var(--r16) 0;
  }

  /* Slightly dark gradient on hover */
  .mvv-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(0, 0, 0, 0.15), transparent);
      opacity: 0;
      transition: opacity 0.35s;
      pointer-events: none;
  }

  .mvv-card:hover::before {
      opacity: 1;
  }

  /* Card becomes slightly darker when hovered */
  .mvv-card:hover {
      background: rgba(0, 0, 0, 0.12);
      transform: translateY(-4px);
      border-color: rgba(255, 255, 255, 0.1);
  }

  .mvv-featured {
      background: rgba(0, 0, 0, 0.06) !important;
      border-color: rgba(255, 255, 255, 0.1) !important;
  }

  .mvv-num {
      font-family: 'Fraunces', serif;
      font-size: 3.5rem;
      font-weight: 900;
      color: rgba(255, 255, 255, 0.1);
      position: absolute;
      top: 16px;
      right: 24px;
      line-height: 1;
      pointer-events: none;
  }

  .mvv-icon-wrap {
      width: 52px;
      height: 52px;
      background: rgba(255, 255, 255, 0.15); /* Made icon bg stand out against the green */
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: var(--r12);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      color: #ffffff;
      margin-bottom: 20px;
  }

  .mvv-card h3 {
      font-family: 'Fraunces', serif;
      font-size: 1.3rem;
      color: #ffffff;
      margin-bottom: 14px;
  }

  .mvv-card p {
      font-size: 0.9rem;
      color: #ffffff;
      line-height: 1.8;
  }

  @media (max-width: 768px) {
      .mvv-grid {
          grid-template-columns: 1fr;
          gap: 2px;
      }

      .mvv-card:first-child {
          border-radius: var(--r16) var(--r16) 0 0;
      }

      .mvv-card:last-child {
          border-radius: 0 0 var(--r16) var(--r16);
      }

      .mvv-card {
          padding: 36px 28px;
      }
  }


  /* ── COMMON DYNAMIC CARD STYLES ─────────────────────────── */
  .empty-state {
      grid-column: 1 / -1;
      background: var(--white);
      border: 1px dashed var(--g300);
      border-radius: var(--r16);
      padding: 28px;
      text-align: center;
      color: var(--muted);
  }

  .empty-state--full {
      grid-column: 1 / -1;
  }

  .card-media {
      margin-bottom: 14px;
      overflow: hidden;
      border-radius: var(--r12);
  }

  .card-media img, .nc-image, .tm-avatar img, .tc-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
  }

  /* ── PROGRAMS ───────────────────────────────────────────── */
  .programs-sec {
      background: var(--white);
  }

  .prog-filter {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 52px;
  }

  .pf-btn {
      padding: 9px 24px;
      border-radius: var(--r999);
      border: 1.5px solid var(--g300);
      color: var(--muted);
      font-weight: 700;
      font-size: .85rem;
      background: var(--white);
      cursor: pointer;
      transition: all .25s var(--ease);
  }

  .pf-btn:hover {
      border-color: var(--g500);
      color: var(--g700);
  }

  .pf-btn.active {
      background: var(--g700);
      border-color: var(--g700);
      color: var(--white);
      box-shadow: 0 4px 16px rgba(36,143,89,.3);
  }

  .pf-btn[data-filter="upcoming"].active {
      background: #d97706;
      border-color: #d97706;
      box-shadow: 0 4px 16px rgba(217,119,6,.3);
  }

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

  .prog-card {
      background: var(--white);
      border: 1px solid rgba(36,143,89,.1);
      border-radius: var(--r16);
      padding: 32px 28px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      transition: all .35s var(--ease);
      position: relative;
      overflow: hidden;
      cursor: pointer;
  }

  .prog-card::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--g500), var(--teal));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .35s var(--ease);
  }

  .prog-card[data-cat="upcoming"]::after {
      background: linear-gradient(90deg, #f59e0b, #f97316);
  }

  .prog-card:hover::after {
      transform: scaleX(1);
  }

  .prog-card:hover {
      box-shadow: var(--sh2);
      transform: translateY(-6px);
      border-color: rgba(36,143,89,.25);
  }

  .prog-card[data-cat="upcoming"]:hover {
      border-color: rgba(245,158,11,.25);
  }

  .prog-card.hidden {
      display: none;
  }

  .pc-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
  }

  .pc-icon {
      width: 52px;
      height: 52px;
      border-radius: var(--r12);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
      color: var(--white);
      flex-shrink: 0;
  }

  .pc-icon.ongoing-i {
      background: linear-gradient(135deg, var(--g700), var(--g500));
  }

  .pc-icon.upcoming-i {
      background: linear-gradient(135deg, #d97706, #f59e0b);
  }

  .pc-badge {
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 4px 12px;
      border-radius: var(--r999);
  }

  .pc-badge.ongoing-b {
      color: var(--g700);
      background: var(--g100);
      border: 1px solid var(--g300);
  }

  .pc-badge.upcoming-b {
      color: #d97706;
      background: #fef3c7;
      border: 1px solid #fde68a;
  }

  .prog-card h3 {
      font-family: 'Fraunces', serif;
      font-size: 1.1rem;
      color: var(--ink);
      font-weight: 700;
      line-height: 1.4;
  }

  .pc-subtitle {
      display: block;
      font-family: 'Inter', sans-serif;
      font-size: .8rem;
      font-weight: 500;
      color: var(--muted);
      margin-top: 4px;
  }

  .prog-card::before {
      content: '\f0b2';
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      position: absolute;
      bottom: 16px;
      right: 20px;
      font-size: .85rem;
      color: var(--muted);
      opacity: 0;
      transition: opacity .3s var(--ease);
  }

  .prog-card:hover::before {
      opacity: 0.4;
  }

  /* ── PROGRAM DETAIL MODAL ───────────────────────────────── */
  .prog-modal {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s ease;
  }

  .prog-modal.open {
      opacity: 1;
      pointer-events: all;
  }

  .prog-modal-backdrop {
      position: absolute;
      inset: 0;
      /* Glassmorphism removed -> Solid Flat Overlay */
    background: rgba(0, 0, 0, 0.85);
  }

  .prog-modal-panel {
      position: relative;
      z-index: 1;
      background: var(--white);
      border-radius: 24px;
      width: 100%;
      max-width: 700px;
      max-height: 88vh;
      overflow-y: auto;
      padding: 52px 48px;
      transform: translateY(32px) scale(0.97);
      transition: transform .4s cubic-bezier(.22, 1, .36, 1);
      box-shadow: 0 48px 96px rgba(0, 0, 0, 0.22);
      scrollbar-width: thin;
      scrollbar-color: var(--g300) transparent;
  }

  .prog-modal-panel::-webkit-scrollbar {
      width: 5px;
  }

  .prog-modal-panel::-webkit-scrollbar-thumb {
      background: var(--g300);
      border-radius: 99px;
  }

  .prog-modal.open .prog-modal-panel {
      transform: translateY(0) scale(1);
  }

  .prog-modal-close {
      position: absolute;
      top: 18px;
      right: 18px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1.5px solid var(--g300);
      background: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      color: var(--muted);
      cursor: pointer;
      transition: all .2s ease;
      z-index: 2;
  }

  .prog-modal-close:hover {
      background: var(--g100);
      border-color: var(--g700);
      color: var(--ink);
  }

  .pmd-header {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 22px;
  }

  .pmd-title {
      font-family: 'Fraunces', serif;
      font-size: 1.6rem;
      font-weight: 800;
      color: var(--ink);
      line-height: 1.3;
      margin-bottom: 4px;
  }

  .pmd-subtitle {
      font-size: .9rem;
      color: var(--muted);
      line-height: 1.5;
      margin-bottom: 0;
  }

  .pmd-divider {
      height: 1px;
      background: var(--g100);
      margin: 24px 0;
  }

  .pmd-desc p {
      font-size: .95rem;
      color: var(--body);
      line-height: 1.9;
      margin-bottom: 18px;
  }

  .pmd-desc p:last-child {
      margin-bottom: 0;
  }

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

  .prog-modal-panel {
          padding: 36px 22px;
          border-radius: 20px;
          max-height: 92vh;
      }

  .pmd-title {
          font-size: 1.25rem;
      }

  }

  /* ── IMPACT ─────────────────────────────────────────────── */
  .impact-sec {
      position: relative;
      padding: 100px 0;
      background: #fff;
      overflow: hidden;
  }

  .impact-bg-layer {
      position: absolute;
      inset: 0;
      background: #248F59;
      pointer-events: none;
  }

  .impact-sec .wrap {
      position: relative;
      z-index: 2;
  }

  /* force heading text visible on white bg */
  .impact-sec .sec-header--light {
      text-align: center;
      margin-bottom: 64px;
  }

  .impact-sec .sec-label--light {
      color: #fff;
      background: #368953;
      border: 1px solid #21a159;
  }

  .impact-sec .sec-title--light {
      color: #fff;
  }

  .impact-sec .sec-sub--light {
      color: #ffffff;
  }

  .impact-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
  }

  .impact-card {
      background: #248F59;
      border: 1px solid #21a159;
      border-radius: var(--r16);
      padding: 36px 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 16px;
      transition: all .35s var(--ease);
      position: relative;
      overflow: hidden;
  }

  .impact-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: var(--r16);
      background: linear-gradient(135deg, rgba(36,143,89,0.08), rgba(36,143,89,0.03));
      opacity: 0;
      transition: opacity .35s;
  }

  .impact-card:hover::before {
      opacity: 1;
  }

  .impact-card:hover {
      transform: translateY(-6px);
      border-color: rgba(36,143,89,.25);
      box-shadow: 0 16px 48px rgba(0,0,0,.08);
  }

  .ic-icon {
      width: 58px;
      height: 58px;
      background: linear-gradient(135deg, #248F59, #31AE6E);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      color: #fff;
  }

  .ic-body {
      display: flex;
      flex-direction: column;
      align-items: center;
  }

  .ic-body strong {
      display: block;
      font-family: 'Fraunces', serif;
      font-size: 2.6rem;
      font-weight: 900;
      color: #fff;
      line-height: 1;
  }

  .ic-body sup {
      font-size: 1.2rem;
      color: #e3dbdb;
      line-height: 1;
  }

  .ic-body span {
      display: block;
      font-size: .82rem;
      color: #dbd0d0;
      letter-spacing: .08em;
      margin-top: 6px;
  }

  /* responsive */
  @media (max-width: 1024px) {
      .impact-grid {
          grid-template-columns: repeat(2, 1fr);
      }
  }

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

      .impact-sec {
          padding: 80px 0;
      }
  }


  /* ── TEAM ───────────────────────────────────────────────── */
  .team-sec {
      background:var(--white);
  }

  .team-card .tm-avatar img {
      width:100%;
      height:100%;
      border-radius:50%;
      object-fit:cover;
  }

  .team-grid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
      gap:24px;
      justify-content:center;
      align-items:stretch;
      max-width:1200px;
      margin:0 auto;
  }

  .team-card {
      background:var(--white);
      border:1px solid var(--g100);
      border-radius:var(--r16);
      overflow:hidden;
      box-shadow:var(--sh1);
      transition:all .35s var(--ease);
      position:relative;
      height:100%;
  }

  .team-card:hover {
      transform:translateY(-8px);
      box-shadow:var(--sh3);
      border-color:var(--g300);
  }

  .tmcard-bg {
      height:100px;
      background:linear-gradient(135deg,var(--g900),var(--g700));
      position:relative;
  }

  .team-card:nth-child(2) .tmcard-bg {
      background:linear-gradient(135deg,var(--g800),var(--teal));
  }

  .team-card:nth-child(3) .tmcard-bg {
      background:linear-gradient(135deg,var(--g700),var(--g500));
  }

  .team-card:nth-child(4) .tmcard-bg {
      background:linear-gradient(135deg,var(--g900),var(--g800));
  }

  .tm-avatar {
      width:72px;
      height:72px;
      background:linear-gradient(135deg,var(--g500),var(--teal));
      border-radius:50%;
      border:4px solid var(--white);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:1.6rem;
      color:var(--white);
      margin:-36px auto 0;
      position:relative;
      z-index:1;
      box-shadow:var(--sh1);
  }

  .tm-body {
      padding:16px 20px 24px;
      text-align:center;
  }

  .tm-body h3 {
      font-family:'Fraunces',serif;
      font-size:1rem;
      color:var(--ink);
      font-weight:700;
      margin-bottom:6px;
  }

  .tm-role {
      display:inline-block;
      font-size:.72rem;
      font-weight:700;
      letter-spacing:.08em;
      color:var(--g700);
      background:var(--g100);
      padding:3px 12px;
      border-radius:var(--r999);
      border:1px solid var(--g300);
      margin-bottom:12px;
  }

  .tm-body p {
      font-size:.82rem;
      color:var(--muted);
      line-height:1.6;
      margin-bottom:16px;
  }

  /* ── DONATE ─────────────────────────────────────────────── */
.donate-sec {
    background: #248F59;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.donate-noise {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
}

.donate-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.donate-left p {
    color: rgba(255,255,255,.85);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 40px;
}

/* Override light text classes for white background */
.donate-sec .sec-label--light {
    color: rgba(255,255,255,.9);
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.25);
}

.donate-sec .sec-title--light {
    color: #fff;
}

.donate-tiers {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
}

.dt-item {
    display: flex;
    gap: 20px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--r16);
    padding: 22px;
    transition: all .3s var(--ease);
}

.dt-item:hover {
    background: rgba(255,255,255,.12);
    transform: translateY(-3px);
    border-color: rgba(255,255,255,.2);
    box-shadow: 0 12px 30px rgba(0,0,0,.15);
}

.dt-icon {
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,.15);
    border-radius: var(--r12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    flex-shrink: 0;
}

.dt-content {
    flex: 1;
}


.dt-desc {
    font-size: .95rem;
    color: #fff;
    line-height: 1.6;
}

/* Payment Card Styles */
.donate-payment-card {
    background: #fff;
    border-radius: var(--r24);
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
}

.payment-title {
    font-family: 'Fraunces', serif;
    font-size: 1.8rem;
    color: #111827;
    margin-bottom: 10px;
}

.payment-subtitle {
    font-size: .95rem;
    color: #6B7280;
    margin-bottom: 30px;
    line-height: 1.6;
}

.upi-qr-section {
    background: #F9FAFB;
    border-radius: var(--r16);
    padding: 30px;
    margin-bottom: 25px;
    border: 1px solid #E5E7EB;
}

.qr-placeholder {
    margin-bottom: 25px;
}

.qr-image-placeholder {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 0 auto;
    background: #fff;
    border-radius: var(--r12);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #248F59;
    overflow: hidden;
}

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

.qr-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #248F59;
    color: #fff;
    text-align: center;
    padding: 8px;
    font-size: .85rem;
    font-weight: 600;
}

.upi-id-section {
    margin-bottom: 25px;
}

.upi-label {
    font-size: .9rem;
    color: #374151;
    margin-bottom: 8px;
    font-weight: 600;
}

.upi-id-wrapper {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.upi-id-input {
    flex: 1;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #D1D5DB;
    border-radius: var(--r12);
    font-size: .95rem;
    color: #111827;
    font-family: monospace;
    letter-spacing: 0.5px;
}

.upi-id-input:focus {
    outline: none;
    border-color: #248F59;
    box-shadow: 0 0 0 3px rgba(36,143,89,.15);
}

.copy-btn {
    padding: 12px 20px;
    background: #248F59;
    color: #fff;
    border: none;
    border-radius: var(--r12);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    transition: all .25s;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 90px;
    justify-content: center;
}

.copy-btn:hover {
    background: #1a5236;
    transform: translateY(-1px);
}

.copy-success {
    font-size: .85rem;
    color: #059669;
    opacity: 0;
    transition: opacity .3s;
    height: 0;
    overflow: hidden;
}

.copy-success.show {
    opacity: 1;
    height: auto;
    margin-top: 5px;
}



.payment-note {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    font-size: .85rem;
    color: #6B7280;
    padding-top: 15px;
    border-top: 1px solid #E5E7EB;
}

.payment-note i {
    color: #248F59;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .donate-layout {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    
    .donate-payment-card {
        padding: 30px;
    }
    
    .qr-image-placeholder {
        width: 200px;
        height: 200px;
    }
}

@media (max-width: 640px) {
    .donate-sec {
        padding: 70px 0;
    }
    
    .dt-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .dt-icon {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
    
    .qr-image-placeholder {
        width: 180px;
        height: 180px;
    }
    
    .upi-id-wrapper {
        flex-direction: column;
    }
    
    .copy-btn {
        width: 100%;
    }
}


  /* ── CONTACT ────────────────────────────────────────────── */
  .contact-sec {
      background:var(--white);
  }

  .contact-layout {
      display:grid;
      grid-template-columns:1fr 1.4fr;
      gap:60px;
      align-items:start;
  }

  .cl-info-grid {
      display:flex;
      flex-direction:column;
      gap:20px;
      margin-bottom:28px;
  }

  .cl-item {
      display:flex;
      align-items:flex-start;
      gap:16px;
      background:var(--white);
      border-radius:var(--r12);
      padding:16px 18px;
      border:1px solid rgba(36,143,89,.1);
      transition:all .25s var(--ease);
  }

  .cl-item:hover {
      border-color:var(--g300);
      transform:translateX(4px);
  }

  .cl-icon {
      width:44px;
      height:44px;
      background:linear-gradient(135deg,var(--g700),var(--g500));
      border-radius:var(--r8);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:1rem;
      color:var(--white);
      flex-shrink:0;
  }

  .cl-item b {
      display:block;
      font-size:.85rem;
      color:var(--ink);
      margin-bottom:2px;
  }

  .cl-item span {
      font-size:.85rem;
      color:var(--muted);
  }

  .cl-socials {
      display:flex;
      gap:10px;
      margin-bottom:24px;
  }

  .cl-socials a {
      width:40px;
      height:40px;
      border-radius:50%;
      background:var(--white);
      border:1.5px solid var(--g300);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:.9rem;
      color:var(--muted);
      transition:all .25s var(--ease);
  }

  .cl-socials a:hover {
      background:var(--g700);
      color:var(--white);
      border-color:var(--g700);
  }

  .contact-form {
      background:var(--white);
      border-radius:var(--r24);
      border: 1px solid var(--g100);
      padding:44px 40px;
      box-shadow:var(--sh1);
      display:flex;
      flex-direction:column;
      gap:20px;
  }

  .cf-row {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:20px;
  }

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

  .cf-group label {
      font-size:.82rem;
      font-weight:700;
      color:var(--body);
  }

  .cf-group input, .cf-group select, .cf-group textarea {
      padding:13px 16px;
      border:1.5px solid var(--g300);
      border-radius:var(--r12);
      font-size:.9rem;
      color:var(--ink);
      background:var(--white);
      outline:none;
      transition:all .25s var(--ease);
      resize:vertical;
  }

  .cf-group input:focus, .cf-group select:focus, .cf-group textarea:focus {
      border-color:var(--g500);
      background:var(--white);
      box-shadow:0 0 0 3px rgba(36,143,89,.12);
  }

  .cf-group input.err, .cf-group select.err, .cf-group textarea.err {
      border-color:#ef4444;
  }

  .cf-err {
      font-size:.75rem;
      color:#ef4444;
      min-height:16px;
  }

  .cf-success {
      display:none;
      background:var(--g100);
      border:1px solid var(--g300);
      border-radius:var(--r12);
      padding:14px 18px;
      color:var(--g800);
      font-size:.88rem;
      font-weight:600;
      align-items:center;
      gap:10px;
  }

  .cf-success.show {
      display:flex;
  }

  .cf-success i {
      font-size:1.1rem;
      color:var(--g500);
  }

  /* ── FOOTER ─────────────────────────────────────────────── */
  .site-footer {
      background: #248F59;
      color: #ffffff;
  }

  .sf-top {
      padding: 80px 0 52px;
  }

  .sf-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1.8fr;
      gap: 52px;
  }

  .sf-brand p {
      font-size: .88rem;
      color: #ffffff;
      line-height: 1.8;
      margin-top: 18px;
      margin-bottom: 24px;
  }

  .sf-socials {
      display: flex;
      gap: 10px;
  }

  .sf-socials a {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #ffffff;
      border: 1px solid #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .82rem;
      color: #248F59;
      transition: all .25s var(--ease);
  }

  .sf-socials a:hover {
      background: #ffffff;
      color: #248F59;
      border-color: #ffffff;
  }

  .sf-links h4 {
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: #ffffff;
      margin-bottom: 20px;
  }

  .sf-links ul {
      display: flex;
      flex-direction: column;
      gap: 10px;
  }

  .sf-links a {
      font-size: .88rem;
      color: #ffffff;
      transition: color .25s;
  }

  .sf-links a:hover {
      color: #ffffff;
      opacity: 0.8;
  }

  .sf-newsletter h4 {
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: #ffffff;
      margin-bottom: 12px;
  }

  .sf-newsletter p {
      font-size: .86rem;
      color: #ffffff;
      margin-bottom: 18px;
      line-height: 1.7;
  }

  .nl-form {
      display: flex;
      border: 1px solid #ffffff;
      border-radius: var(--r999);
      overflow: hidden;
      background: #ffffff;
  }

  .nl-form input {
      flex: 1;
      padding: 11px 18px;
      background: transparent;
      border: none;
      outline: none;
      font-size: .86rem;
      color: #248F59;
  }

  .nl-form input::placeholder {
      color: rgba(36, 143, 89, 0.6);
  }

  .nl-form button {
      padding: 11px 18px;
      background: #248F59;
      color: #ffffff;
      font-size: 1rem;
      transition: background .25s;
      flex-shrink: 0;
      border: none;
      cursor: pointer;
  }

  .nl-form button:hover {
      background: #1a5236;
  }

  .nl-ok {
      display: none;
      margin-top: 10px;
      font-size: .8rem;
      color: #ffffff;
      align-items: center;
      gap: 6px;
  }

  .nl-ok.show {
      display: flex;
  }

  .sf-bottom {
      border-top: 1px solid #ffffff;
      padding: 22px 0;
  }

  .sf-bottom-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
  }

  .sf-bottom-inner p {
      font-size: .82rem;
      color: #ffffff;
  }

  .sf-legal {
      display: flex;
      gap: 20px;
  }

  .sf-legal a {
      font-size: .8rem;
      color: #ffffff;
      transition: color .25s;
  }

  .sf-legal a:hover {
      color: #ffffff;
      opacity: 0.8;
  }


  /* ── BACK TO TOP ────────────────────────────────────────── */
  .btt {
      position:fixed;
      bottom:28px;
      right:28px;
      z-index:900;
      width:48px;
      height:48px;
      background:var(--g700);
      color:var(--white);
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:.95rem;
      box-shadow:0 4px 20px rgba(36,143,89,.4);
      transition:all .35s var(--spring);
      opacity:0;
      visibility:hidden;
      transform:translateY(16px) scale(.8);
  }

  .btt.show {
      opacity:1;
      visibility:visible;
      transform:translateY(0) scale(1);
  }

  .btt:hover {
      background:var(--g800);
      transform:translateY(-3px) scale(1.06);
  }

  /* ── TOAST ──────────────────────────────────────────────── */
  .toast-box {
      position:fixed;
      bottom:90px;
      right:28px;
      z-index:9999;
      display:flex;
      flex-direction:column;
      gap:10px;
      pointer-events:none;
  }

  .toast-item {
      background:var(--ink);
      color:var(--white);
      padding:13px 20px;
      border-radius:var(--r12);
      font-size:.88rem;
      box-shadow:var(--sh3);
      border-left:3px solid var(--g500);
      transform:translateX(120%);
      opacity:0;
      transition:all .4s var(--spring);
      pointer-events:auto;
      max-width:300px;
  }

  .toast-item.in {
      transform:translateX(0);
      opacity:1;
  }

  /* ── RESPONSIVE ─────────────────────────────────────────── */
  @media(max-width:1080px) {
  .prog-grid {
          grid-template-columns:repeat(2,1fr);
      }

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

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

  .sf-grid {
          grid-template-columns:1fr 1fr;
          gap:36px;
      }

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

  .mvv-card:first-child {
          border-radius:var(--r16) var(--r16) 0 0;
      }

  .mvv-card:last-child {
          border-radius:0 0 var(--r16) var(--r16);
      }

  }

  @media(max-width:900px) {
  .hero-wrap {
          grid-template-columns:1fr;
          text-align:center;
      }

  .hero-right {
          display:none;
      }

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

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

  .hero-sub {
          margin:0 auto 36px;
      }

  .about-layout {
          grid-template-columns:1fr;
          gap:48px;
      }

  .donate-layout {
          grid-template-columns:1fr;
          gap:40px;
      }

  .contact-layout {
          grid-template-columns:1fr;
          gap:40px;
      }

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

  .news-side {
          flex-direction:column;
      }

  }

  @media(max-width:768px) {
  .nav-links {
          display:none;
      }

  .hamburger {
          display:flex;
      }

  .section {
          padding:80px 0;
      }

  .hero {
          padding:110px 0 80px;
      }

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

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

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

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

  .cf-row {
          grid-template-columns:1fr;
      }

  .contact-form {
          padding:28px 22px;
      }

  .donate-form-card {
          padding:28px 22px;
      }

  body {
          cursor:auto;
      }

  button {
          cursor:pointer;
      }

  }

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

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

  .dfc-amounts {
          grid-template-columns:1fr 1fr;
      }

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

  .hero-h1 {
          font-size:2.4rem;
      }

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

  .hm-sep {
          display:none;
      }

  .hero-metrics {
          gap:20px;
      }

  }