:root{
  --green-900:#0f3d1e; --green-800:#154a26; --green-700:#1c6b34; --green-600:#238b46;
  --green-500:#2fa458; --green-400:#4fbf74; --green-100:#e8f5ec; --green-50:#f4faf6;
  --earth:#c8a97e; --gold:#d9a441;
  --ink:#1a2b1f; --muted:#6b7a70; --bg:#ffffff;
  --shadow-sm:0 4px 12px rgba(15,61,30,.06);
  --shadow-md:0 12px 30px rgba(15,61,30,.10);
  --shadow-lg:0 24px 60px rgba(15,61,30,.14);
  --radius:14px;
}
*{box-sizing:border-box}
html,body{overflow-x:hidden;max-width:100vw;width:100%}
body{font-family:'Poppins',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65}
img{max-width:100%;height:auto}
iframe{max-width:100%}
h1,h2,h3,h4,h5,.display-title{font-family:'Playfair Display',serif;font-weight:700;color:var(--green-900)}
.section{padding:90px 0}
.section-sm{padding:60px 0}
.section-title{margin-bottom:14px}
.section-eyebrow{color:var(--green-600);font-weight:600;letter-spacing:2px;text-transform:uppercase;font-size:.8rem;display:inline-block;margin-bottom:10px}
.section-lead{color:var(--muted);max-width:720px;margin:0 auto 40px}
.text-muted-2{color:#c9d3cc}

/* Top bar */
.top-bar{background:var(--green-900);color:#dfe9e2;padding:8px 0;font-size:.85rem}
.top-bar a{color:#fff;margin-left:10px}
.social-icons a{color:#fff;margin-left:12px;transition:.2s}
.social-icons a:hover{color:var(--green-400)}

/* Nav */
.main-navbar{background:#fff;box-shadow:var(--shadow-sm);padding:14px 0}
.navbar-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.navbar-logo-img{height:52px;max-height:52px;width:auto;max-width:140px;object-fit:contain;flex-shrink:0;transition:all .3s ease}
.brand-logo{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--green-600),var(--green-400));display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.4rem;box-shadow:var(--shadow-sm)}
.brand-name{font-family:'Playfair Display',serif;font-weight:700;font-size:1.35rem;color:var(--green-900);display:block;line-height:1}
.brand-text small{color:var(--muted);font-size:.72rem}
.nav-link{color:var(--ink)!important;font-weight:500;padding:8px 14px!important;position:relative}
.nav-link.active,.nav-link:hover{color:var(--green-700)!important}
.nav-link.active::after{content:'';position:absolute;left:14px;right:14px;bottom:2px;height:2px;background:var(--green-600);border-radius:2px}
.btn-donate{background:linear-gradient(135deg,var(--green-600),var(--green-500));color:#fff!important;border-radius:50px;padding:10px 22px;font-weight:600;box-shadow:0 8px 20px rgba(35,139,70,.35)}
.btn-donate:hover{transform:translateY(-2px);color:#fff}

/* Hero */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;color:#fff;overflow:hidden}
.hero .swiper{width:100%;height:88vh;position:absolute;inset:0}
.hero-slide{background-size:cover;background-position:center;position:relative}
.hero-slide::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,rgba(15,61,30,.85),rgba(15,61,30,.35))}
.hero-content{position:relative;z-index:5;padding:60px 0}
.hero-content h1{font-size:clamp(2rem,4.6vw,4rem);color:#fff;line-height:1.1;margin-bottom:20px}
.hero-content p{font-size:1.15rem;max-width:640px;color:#e5f2ea}
.hero-buttons .btn{padding:12px 26px;border-radius:50px;font-weight:600}
.btn-primary-green{background:var(--green-500);border-color:var(--green-500);color:#fff}
.btn-primary-green:hover{background:var(--green-600);color:#fff}
.btn-outline-white{border:2px solid #fff;color:#fff;background:transparent}
.btn-outline-white:hover{background:#fff;color:var(--green-800)}

/* Feature strip */
.feature-strip{margin-top:-70px;position:relative;z-index:10}
.feature-card{background:#fff;border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-md);height:100%;transition:.3s}
.feature-card:hover{transform:translateY(-6px)}
.feature-card .icon{width:56px;height:56px;border-radius:14px;background:var(--green-100);color:var(--green-700);display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:14px}

/* About */
.about-img{border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lg);position:relative}
.about-img img{width:100%;display:block}
.about-badge{position:absolute;bottom:-20px;left:-20px;background:var(--green-600);color:#fff;border-radius:16px;padding:18px 22px;box-shadow:var(--shadow-md)}
.about-badge .num{font-size:2rem;font-weight:700;line-height:1}

/* Stats */
.stats{background:linear-gradient(135deg,var(--green-800),var(--green-600));color:#fff;padding:70px 0;position:relative;overflow:hidden}
.stats::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><path fill='none' stroke='%23ffffff11' stroke-width='1' d='M30 5 L55 20 L55 40 L30 55 L5 40 L5 20 Z'/></svg>") repeat;opacity:.5}
.stat-item{text-align:center;position:relative}
.stat-item .num{font-family:'Playfair Display',serif;font-size:3rem;font-weight:700;color:#fff;line-height:1}
.stat-item .label{color:#d5ecd9;letter-spacing:1px;text-transform:uppercase;font-size:.8rem;margin-top:6px}

/* Program cards */
.program-card{background:#fff;border-radius:var(--radius);padding:30px 26px;box-shadow:var(--shadow-sm);height:100%;transition:.3s;border:1px solid #eef4f0}
.program-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:var(--green-400)}
.program-card .icon{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,var(--green-100),#fff);color:var(--green-700);display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin-bottom:18px;border:1px solid #dfefe4}
.program-card h5{color:var(--green-900);margin-bottom:10px}
.program-card p{color:var(--muted);font-size:.95rem}

/* Project cards */
.project-card{border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow-sm);transition:.3s;height:100%}
.project-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.project-card .img{aspect-ratio:16/10;background:linear-gradient(135deg,var(--green-500),var(--green-700));background-size:cover;background-position:center;position:relative}
.project-card .body{padding:22px}
.project-card .meta{color:var(--green-600);font-size:.8rem;font-weight:600;letter-spacing:1px;text-transform:uppercase}
.project-card h5{margin:8px 0}
.project-card a.read-more{color:var(--green-700);font-weight:600;text-decoration:none}

/* Timeline */
.timeline{position:relative;padding:20px 0}
.timeline::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:3px;background:var(--green-100);transform:translateX(-50%)}
.timeline-item{position:relative;width:50%;padding:20px 40px}
.timeline-item:nth-child(odd){left:0;text-align:right}
.timeline-item:nth-child(even){left:50%}
.timeline-item .dot{position:absolute;top:26px;width:16px;height:16px;border-radius:50%;background:var(--green-600);border:4px solid #fff;box-shadow:0 0 0 3px var(--green-100)}
.timeline-item:nth-child(odd) .dot{right:-8px}
.timeline-item:nth-child(even) .dot{left:-8px}
.timeline-card{background:#fff;border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm);display:inline-block;text-align:left;max-width:100%}
@media(max-width:768px){
  .timeline::before{left:20px}
  .timeline-item{width:100%;left:0!important;padding-left:50px;text-align:left!important}
  .timeline-item .dot{left:12px!important;right:auto!important}
}

/* Gallery */
.gallery-item{border-radius:var(--radius);overflow:hidden;position:relative;aspect-ratio:4/3;background:var(--green-100)}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:.5s}
.gallery-item:hover img{transform:scale(1.08)}
.gallery-item .overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,61,30,.85),transparent 60%);opacity:0;transition:.3s;display:flex;align-items:flex-end;padding:20px;color:#fff}
.gallery-item:hover .overlay{opacity:1}
.gallery-filter .btn{border-radius:50px;margin:4px;padding:8px 18px;border:1px solid #e0e9e4;background:#fff;color:var(--ink);font-size:.9rem}
.gallery-filter .btn.active,.gallery-filter .btn:hover{background:var(--green-600);color:#fff;border-color:var(--green-600)}

/* Cards */
.card-modern{border:none;border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;transition:.3s;height:100%;background:#fff}
.card-modern:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.card-modern .thumb{aspect-ratio:16/10;background:linear-gradient(135deg,var(--green-500),var(--green-700));background-size:cover;background-position:center}
.card-modern .card-body{padding:22px}
.badge-soft{background:var(--green-100);color:var(--green-700);border-radius:50px;padding:5px 12px;font-size:.75rem;font-weight:600}

/* Testimonials */
.testimonial{background:#fff;border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-sm);height:100%}
.testimonial .stars{color:var(--gold);margin-bottom:10px}
.testimonial p{color:var(--ink);font-style:italic}
.testimonial .author{display:flex;align-items:center;gap:14px;margin-top:16px}
.testimonial .avatar{width:52px;height:52px;border-radius:50%;background:var(--green-100);display:flex;align-items:center;justify-content:center;color:var(--green-700);font-weight:700}

/* Partners */
.partner-logo{background:#fff;border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);text-align:center;height:100px;display:flex;align-items:center;justify-content:center;color:var(--green-800);font-weight:600}

/* CTA */
.cta-banner{background:linear-gradient(120deg,var(--green-800),var(--green-600));color:#fff;border-radius:24px;padding:60px;position:relative;overflow:hidden}
.cta-banner h2{color:#fff}
.cta-banner .btn{background:#fff;color:var(--green-800);border-radius:50px;padding:12px 28px;font-weight:600}

/* Page header */
.page-header{background:linear-gradient(120deg,var(--green-800),var(--green-600));color:#fff;padding:100px 0 70px;text-align:center;position:relative}
.page-header h1{color:#fff;font-size:clamp(2rem,4vw,3.2rem)}
.breadcrumb-nav a{color:#c8e2cf;text-decoration:none}
.breadcrumb-nav{color:#e5f2ea}

/* Forms */
.form-card{background:#fff;border-radius:var(--radius);padding:40px;box-shadow:var(--shadow-md)}
.form-control,.form-select{border-radius:10px;padding:12px 16px;border:1px solid #dfe6e0}
.form-control:focus,.form-select:focus{border-color:var(--green-500);box-shadow:0 0 0 4px rgba(47,164,88,.15)}

/* Footer */
.site-footer{background:#0b2f18;color:#c9d3cc;padding:70px 0 30px}
.footer-title{color:#fff;margin-bottom:18px;font-family:'Poppins',sans-serif;font-weight:600}
.footer-links{list-style:none;padding:0}
.footer-links li{margin-bottom:8px}
.footer-links a{color:#c9d3cc;text-decoration:none;transition:.2s}
.footer-links a:hover{color:var(--green-400);padding-left:4px}

/* Floating */
.whatsapp-float{position:fixed;bottom:22px;right:22px;width:54px;height:54px;background:#25d366;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;box-shadow:var(--shadow-md);z-index:100;transition:.2s}
.whatsapp-float:hover{transform:scale(1.1);color:#fff}
.back-to-top{position:fixed;bottom:22px;right:88px;width:46px;height:46px;background:var(--green-700);color:#fff;border-radius:50%;display:none;align-items:center;justify-content:center;box-shadow:var(--shadow-md);z-index:100;text-decoration:none}
.back-to-top.show{display:flex}

/* Admin */
.admin-body{background:#f4f6f5;font-family:'Poppins',sans-serif;min-height:100vh}
.admin-sidebar{width:260px;background:var(--green-900);color:#c9d3cc;min-height:100vh;padding:24px 0;position:fixed}
.admin-sidebar .brand{padding:0 24px 20px;border-bottom:1px solid #1c4d2f;color:#fff}
.admin-sidebar a{color:#c9d3cc;padding:11px 24px;display:flex;align-items:center;gap:10px;text-decoration:none;font-size:.92rem}
.admin-sidebar a:hover,.admin-sidebar a.active{background:#0e3c1d;color:#fff;border-left:3px solid var(--green-400)}
.admin-main{margin-left:260px;padding:26px}
.admin-topbar{background:#fff;border-radius:12px;padding:14px 22px;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow-sm);margin-bottom:22px}
.admin-card{background:#fff;border-radius:12px;padding:22px;box-shadow:var(--shadow-sm)}
.admin-stat{background:linear-gradient(135deg,var(--green-600),var(--green-500));color:#fff;border-radius:12px;padding:22px;box-shadow:var(--shadow-sm)}
.admin-stat.blue{background:linear-gradient(135deg,#1e6091,#2c88bd)}
.admin-stat.orange{background:linear-gradient(135deg,#c76b1e,#e69042)}
.admin-stat.purple{background:linear-gradient(135deg,#6b3fa0,#8a5bc4)}
.admin-stat .num{font-size:2.2rem;font-weight:700;font-family:'Playfair Display',serif}
@media(max-width:900px){
  .admin-sidebar{position:relative;width:100%;min-height:auto}
  .admin-main{margin-left:0}
}

/* =========================================================
   COMPREHENSIVE MOBILE OPTIMIZATIONS (< 992px & < 768px)
========================================================= */

@media(max-width:991px){
  .main-navbar{padding:10px 0}
  .navbar-logo-img{max-height:55px}
  .navbar-collapse{
    background:#ffffff;
    border-radius:14px;
    margin-top:12px;
    padding:14px 18px;
    box-shadow:0 12px 30px rgba(15,61,30,.12);
    border:1px solid #e2eee6;
    max-height:80vh;
    overflow-y:auto;
  }
  .navbar-nav .nav-item{
    border-bottom:1px solid #f0f6f2;
  }
  .navbar-nav .nav-item:last-child{
    border-bottom:none;
  }
  .navbar-nav .nav-link{
    padding:11px 8px!important;
    font-size:.95rem;
    display:block;
  }
  .navbar-nav .nav-link.active::after{
    left:8px;
    right:auto;
    width:30px;
    bottom:6px;
  }
}

@media(max-width:768px){
  .top-bar{display:none!important}
  .navbar-brand{gap:8px!important;max-width:calc(100% - 55px)!important;overflow:hidden}
  .navbar-logo-img{
    height:40px!important;
    max-height:40px!important;
    width:auto!important;
    max-width:95px!important;
    flex-shrink:0!important;
  }
  .brand-name{font-size:1.1rem!important;line-height:1}
  .brand-text small{font-size:.62rem!important;line-height:1.2!important;display:block!important}
  .navbar-toggler{
    flex-shrink:0!important;
    padding:6px 10px;
    font-size:1.1rem;
    border-color:#d0e4d6;
  }
  .navbar-toggler-icon{
    width:1.2em!important;
    height:1.2em!important;
  }
  .navbar-toggler:focus{
    box-shadow:0 0 0 3px rgba(35,139,70,.2);
  }

  /* Section & Spacing */
  .section{padding:50px 0}
  .section-sm{padding:35px 0}
  .display-title{font-size:1.75rem!important;line-height:1.25}
  .section-title{font-size:1.75rem!important;line-height:1.25}
  .section-lead{font-size:.95rem;margin-bottom:25px}
  .page-header{padding:60px 0 40px}
  .page-header h1{font-size:1.85rem!important}
  
  /* Hero Slider on Home */
  .hero{min-height:500px;height:auto;padding:30px 0}
  .hero .swiper{min-height:500px;height:100%}
  .hero-content{padding:40px 0 60px}
  .hero-content h1{font-size:clamp(1.6rem, 5.5vw, 2.2rem)!important;margin-bottom:14px}
  .hero-content p{font-size:.95rem;line-height:1.6}
  .hero-buttons .btn{padding:10px 22px;font-size:.92rem}

  /* Features & About */
  .feature-strip{margin-top:-20px}
  .feature-card{padding:20px 18px;border-radius:14px}
  .about-badge{
    left:10px!important;
    bottom:10px!important;
    padding:12px 18px!important;
    border-radius:12px!important;
  }
  .about-badge .num{font-size:1.5rem}

  /* Cards & Grid */
  .program-card{padding:22px 18px}
  .project-card{padding:20px 18px}
  .project-card .body{padding:18px 14px}
  .card-modern .card-body{padding:18px 16px}
  .testimonial{padding:20px 18px}
  .cta-banner{padding:35px 20px;border-radius:18px}
  .cta-banner h2{font-size:1.55rem!important}
  .cta-banner .btn{padding:10px 24px;font-size:.92rem}

  /* Form inputs & cards */
  .form-card{padding:22px 18px;border-radius:16px}
  .form-control,.form-select{
    font-size:16px!important; /* Prevents auto zoom on iOS */
    padding:10px 14px;
  }

  /* Timeline on Mobile */
  .timeline::before{left:16px}
  .timeline-item{padding-left:42px!important}
  .timeline-item .dot{left:8px!important;right:auto!important}
  .timeline-card{padding:18px 16px}

  /* Floating Action Buttons */
  .whatsapp-float{
    bottom:20px;
    right:18px;
    width:48px;
    height:48px;
    font-size:1.4rem;
  }
  .back-to-top{
    bottom:78px;
    right:20px;
    width:44px;
    height:44px;
    font-size:.95rem;
  }

  /* Footer */
  .site-footer{padding:50px 0 25px}
  .footer-title{margin-bottom:12px;font-size:1.05rem}
  .developer-credit{font-size:.85rem}
}

/* =========================================================
   UNIVERSAL INNER HERO PAGES OPTIMIZATION
========================================================= */
.about-hero, .vision-hero, .mission-hero, .goal-hero, .programs-hero, .projects-hero, .gallery-hero {
  min-height:60vh;
  height:auto!important;
  padding:85px 0 65px;
}

@media(max-width:768px){
  .about-hero, .vision-hero, .mission-hero, .goal-hero, .programs-hero, .projects-hero, .gallery-hero {
    min-height:auto!important;
    padding:55px 0 45px!important;
  }
  .about-hero .display-2,
  .mission-hero .display-2,
  .goal-hero .display-2,
  .programs-hero .display-2,
  .projects-hero .display-2,
  .gallery-hero .display-2,
  .vision-hero .display-3 {
    font-size:clamp(1.75rem, 6vw, 2.3rem)!important;
    line-height:1.25!important;
    margin-top:14px!important;
  }
  .hindi-heading, .hindi-title{
    font-size:clamp(1.05rem, 3.5vw, 1.35rem)!important;
    line-height:1.45!important;
    margin-top:12px!important;
  }
  .hero-text{
    font-size:.95rem!important;
    line-height:1.65!important;
    max-width:100%!important;
    margin-top:12px!important;
  }
  .mission-badge, .vision-badge, .section-tag{
    font-size:.78rem!important;
    padding:6px 14px!important;
    display:inline-block!important;
    line-height:1.4!important;
  }
  .btn-lg{
    font-size:.95rem!important;
    padding:10px 26px!important;
  }
  .pillar-card, .method-card, .objective-card{
    padding:20px 16px!important;
    border-radius:16px!important;
  }
  .quote-box, .vision-quote, .mission-quote{
    font-size:1rem!important;
    padding:16px 18px!important;
    line-height:1.6!important;
  }
  .empower-box{
    padding:22px 18px!important;
    border-radius:18px!important;
  }
  .stat-item .num{
    font-size:2.2rem!important;
  }
}

@media(max-width:480px){
  .navbar-logo-img{
    height:36px!important;
    max-height:36px!important;
    width:auto!important;
    max-width:80px!important;
  }
  .brand-name{font-size:1.05rem}
  .brand-text small{font-size:.6rem}
  .timeline-item{padding-left:36px!important}
  .timeline::before{left:14px}
  .timeline-item .dot{left:6px!important}
  .service-card, .feature-card, .program-card, .project-card{
    padding:18px 14px!important;
  }
}

