/* ================================================================
   JANSAHYOG UJJAWAL FOUNDATION
   Master Stylesheet — style.css
   ================================================================
   SECTIONS:
   01. Google Fonts Import
   02. CSS Variables (Design Tokens)
   03. Reset & Base Styles
   04. Layout — Container
   05. Preloader
   06. Topbar
   07. Navbar & Hamburger
   08. Marquee / Ticker
   09. Page Hero (Inner Pages)
   10. Section Commons (Tags, Titles, Dividers)
   11. Buttons
   12. Form Styles
   13. Hero Slider (Home Page)
   14. About Section
   15. Causes Section
   16. Impact Section
   17. Programs Section
   18. Gallery Section
   19. Volunteer CTA Section
   20. Testimonials Section
   21. Donate Section
   22. Contact Section
   23. WhatsApp Float & Back To Top
   24. Footer
   25. Reveal / Scroll Animations
   26. Utility Classes
   27. Responsive — 1024px
   28. Responsive — 768px
   29. Responsive — 480px
   ================================================================ */


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


/* ================================================================
   02. CSS VARIABLES (DESIGN TOKENS)
   ================================================================ */
:root {

  /* ---- Brand Colors ---- */
  --blue:           #1A9FD4;   /* Primary Blue */
  --green:          #5BAD2F;   /* Primary Green */
  --dark-blue:      #0d7aab;   /* Darker Blue (hover, topbar) */
  --dark-green:     #3d8a1a;   /* Darker Green (hover) */
  --light-blue:     #e8f6fd;   /* Light Blue Background Tint */
  --light-green:    #edf7e3;   /* Light Green Background Tint */
  --deep-dark:      #0a2540;   /* Deep Dark Navy (hero, sections) */

  /* ---- Neutral Colors ---- */
  --white:          #ffffff;
  --off-white:      #f9fbfd;
  --light-bg:       #F0F8FC;   /* Section Light Blue Background */
  --light-green-bg: #f2faea;   /* Section Light Green Background */
  --text-dark:      #1e2d3d;   /* Headings, strong text */
  --text-mid:       #4a5568;   /* Body paragraphs */
  --text-light:     #718096;   /* Captions, meta, placeholders */
  --border:         #e2e8f0;   /* Default border */
  --border-dark:    #cbd5e0;   /* Stronger border */

  /* ---- Shadows ---- */
  --shadow-sm:    0 4px 14px rgba(26,159,212,0.08);
  --shadow:       0 10px 40px rgba(26,159,212,0.10);
  --shadow-hover: 0 20px 60px rgba(26,159,212,0.20);
  --shadow-dark:  0 10px 40px rgba(0,0,0,0.15);
  --shadow-green: 0 10px 36px rgba(91,173,47,0.15);

  /* ---- Border Radius ---- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius:      16px;
  --radius-lg:   22px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* ---- Transitions ---- */
  --transition:      all 0.3s ease;
  --transition-slow: all 0.55s ease;
  --transition-fast: all 0.15s ease;

  /* ---- Z-Index Scale ---- */
  --z-base:      1;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-fixed:     500;
  --z-modal:     800;
  --z-toast:     900;
  --z-preloader: 99999;
}


/* ================================================================
   03. RESET & BASE STYLES
   ================================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden !important; /* यह लाइन स्क्रीन को हिलने नहीं देगी */
  position: relative;
  scroll-behavior: smooth;
  font-family: 'Poppins', sans-serif;
  color: var(--text-dark);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

/* Images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Links */
a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

/* Lists */
ul, ol { list-style: none; }

/* Buttons */
button {
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  border: none;
  background: none;
  outline: none;
}

/* Inputs */
input, textarea, select {
  font-family: 'Poppins', sans-serif;
  outline: none;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  font-weight: 700;
  color: var(--text-dark);
}

/* Paragraphs */
p { line-height: 1.8; }


/* ================================================================
   04. LAYOUT — CONTAINER
   ================================================================ */
.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box; /* इससे पैडिंग स्क्रीन के बाहर नहीं भागेगी */
}

/* Wider / Narrower Variants */
.container-lg  { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.container-sm  { max-width: 960px;  margin: 0 auto; padding: 0 24px; }
.container-xs  { max-width: 720px;  margin: 0 auto; padding: 0 24px; }


/* ================================================================
   05. PRELOADER
   ================================================================ */
#preloader {
  position: fixed;
  inset: 0;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-preloader);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Hide state — add this class via JS after page load */
#preloader.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}


.pre-inner {
  text-align: center;
}

/* Logo in preloader */
.pre-inner img {
  height: 68px;
  margin: 0 auto 20px;
  animation: preloaderPulse 1.4s ease infinite;
}

/* Optional brand name text */
.pre-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.pre-sub {
  font-size: 12px;
  color: var(--text-light);
  font-style: italic;
  margin-bottom: 20px;
}

/* Loading bar track */
.pre-bar {
  width: 200px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin: 0 auto;
}

/* Loading bar fill */
.pre-fill {
  height: 100%;
  background: var(--blue);
  border-radius: 2px;
  animation: preloaderFill 1.8s ease forwards;
}

@keyframes preloaderPulse {
  0%, 100% { transform: scale(1);     opacity: 1;   }
  50%       { transform: scale(1.06); opacity: 0.8; }
}

@keyframes preloaderFill {
  from { width: 0%;   }
  to   { width: 100%; }
}


/* ================================================================
   06. TOPBAR
   ================================================================ */
.topbar {
  background: var(--dark-blue);
  color: white;
  padding: 9px 0;
  font-size: 13px;
  position: relative;
  z-index: var(--z-sticky);
}

.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Left — phone, email, location */
.topbar-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.topbar a {
  color: rgba(255,255,255,0.88);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 16px;
  font-size: 13px;
  transition: color 0.25s;
}

.topbar a:hover { color: white; }

.topbar a i {
  font-size: 11px;
  opacity: 0.75;
}

/* Right — social icons */
.topbar-social {
  display: flex;
  align-items: center;
  gap: 6px;
}

.topbar-social a {
  margin: 0;
  width: 28px;
  height: 28px;
  background: rgba(255,255,255,0.13);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: background 0.3s, transform 0.3s;
}

.topbar-social a:hover {
  background: rgba(255,255,255,0.3);
  transform: translateY(-2px);
}


/* ================================================================
   07. NAVBAR & HAMBURGER
   ================================================================ */
.navbar {
  background: white;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
  position: sticky;
  top: 0;
  z-index: 1050;  /* var(--z-fixed) ki jagah */
  transition: box-shadow 0.3s, background 0.3s;
}

/* Scrolled state — add via JS on scroll */
.navbar.scrolled {
  box-shadow: 0 4px 28px rgba(26,159,212,0.13);
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  padding-bottom: 12px;
  gap: 16px;
  position: relative; 
  background: white;  
  z-index: 20;        
}

/* ================================================================
   Logo (Clean & Fresh)
   ================================================================ */
.nav-logo {
  margin-left: -10px;
  display: flex;
  align-items: center;
}

.nav-logo img {
  height: 58px;
  transition: transform 0.3s ease;
  display: block;
}

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


/* Nav links wrapper */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Individual nav link */
.nav-menu a {
  color: var(--text-dark);
  font-weight: 500;
  font-size: 14px;
  padding: 8px 13px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 5px;
  transition: var(--transition);
  position: relative;
}

/* Underline indicator on hover/active */
.nav-menu a::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--blue);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.nav-menu a:hover         { color: var(--blue); }
.nav-menu a:hover::after  { width: 55%; }
.nav-menu a.active        { color: var(--blue); }
.nav-menu a.active::after { width: 55%; }

/* Donate CTA button in nav */
.nav-donate {
  background: var(--blue)           !important;
  color: white                      !important;
  padding: 10px 22px                !important;
  border-radius: var(--radius-full) !important;
  font-weight: 700                  !important;
  margin-left: 8px;
  box-shadow: 0 4px 14px rgba(26,159,212,0.35);
  transition: var(--transition);
}

.nav-donate::after { display: none !important; }

.nav-donate:hover {
  background: var(--dark-blue) !important;
  transform: translateY(-2px)  !important;
  box-shadow: 0 8px 22px rgba(26,159,212,0.45) !important;
}

/* Hamburger toggle (mobile only) */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  border: none;
  background: none;
  position: relative; /* Naya add kiya */
  z-index: 1060;      /* Menu ke upar rahega tabhi (X) button pe click hoga */
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-dark);
  border-radius: 2px;
  transition: var(--transition);
}

/* Hamburger → X animation */
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }




/* ================================================================
   RESPONSIVE — 1280px tak hamburger + drawer (FINAL & PERFECT)
   ================================================================ */
@media (max-width: 1280px) {

  .hamburger { 
    display: flex; 
  }

  .nav-menu {
    position: absolute; /* 👈 Dhyan rahe, isko absolute hi rakhna hai */
    top: 100%;          /* 👈 Header (safed patti) jahan khatam hogi, ye wahi se shuru hoga */
    left: -100%;
    width: 275px;
    height: 100vh;
    background: white;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 20px 20px 40px;
    gap: 8px;
    box-shadow: 4px 10px 25px rgba(0,0,0,0.1);
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;        /* 👈 SABSE ZAROORI: Ye menu ko hamesha header ke peeche rakhega */
    overflow-y: auto;
  }

  .nav-menu.open { 
    left: 0; 
  }

  .nav-menu a {
    font-size: 15px !important;
    padding: 12px 16px !important;
    width: 100%;
    border-radius: 8px;
    color: var(--text-dark);
  }

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

  .nav-menu a:hover,
  .nav-menu a.active {
    background: rgba(26, 159, 212, 0.08); 
    color: var(--blue) !important;
  }

  /* Donate Button */
  .nav-donate {
    width: 100% !important; 
    margin-left: 0 !important;
    margin-top: 16px;
    text-align: center;
    justify-content: center;
    padding: 12px 22px !important;
    border-radius: var(--radius-full) !important;
    color: white !important;
    background: var(--blue) !important;
  }

  .nav-menu a.nav-donate:hover {
    background: var(--dark-blue) !important;
    color: white !important;
  }
}







/* ================================================================
   08. MARQUEE / ANNOUNCEMENT TICKER
   ================================================================ */
.marquee-wrap {
  background: #5BAD2F;
  padding: 12px 0;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.marquee-track {
  display: flex;
  gap: 56px;
  animation: marqueeAnim 26s linear infinite;
  white-space: nowrap;
  width: max-content;
}

/* Pause on hover */
.marquee-wrap:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-track span {
  color: white;
  font-size: 13.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.marquee-track span i {
  font-size: 11px;
  opacity: 0.85;
}

@keyframes marqueeAnim {
  from { transform: translateX(0);    }
  to   { transform: translateX(-50%); }
}


/* ================================================================
   09. PAGE HERO — Inner Pages (About, Gallery, Contact etc.)
   ================================================================ */
.page-hero {
  background: var(--deep-dark);
  padding: 84px 0 64px;
  position: relative;
  overflow: hidden;
}

/* Decorative shape — top right */
.page-hero-shape-1 {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: var(--blue);
  opacity: 0.06;
  top: -150px;
  right: -100px;
  pointer-events: none;
}

/* Decorative shape — bottom left */
.page-hero-shape-2 {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: var(--green);
  opacity: 0.06;
  bottom: -80px;
  left: -60px;
  pointer-events: none;
}

/* Content wrapper */
.page-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
}

.page-hero-content h1 {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 800;
  margin-bottom: 14px;
  line-height: 1.2;
  color: white;
}

/* Colored words inside heading */
.page-hero-content h1 .blue  { color: #7dd3fc; }
.page-hero-content h1 .green { color: #86efac; }

.page-hero-content p {
  font-size: 16px;
  color: rgba(255,255,255,0.75);
  max-width: 560px;
  margin: 0 auto 24px;
  line-height: 1.85;
}

/* Breadcrumb navigation */
.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.16);
  padding: 7px 20px;
  border-radius: var(--radius-full);
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  margin-bottom: 22px;
}

.breadcrumb a         { color: rgba(255,255,255,0.78); }
.breadcrumb a:hover   { color: white; }
.breadcrumb .sep      { opacity: 0.4; }
.breadcrumb .current  { color: #86efac; font-weight: 600; }


/* ================================================================
   10. SECTION COMMONS — Tags, Titles, Dividers, Headers
   ================================================================ */

/* All sections default padding */
section { padding: 88px 0; }

/* Small label pill above heading */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(26,159,212,0.08);
  color: var(--blue);
  padding: 6px 16px;
  border-radius: var(--radius-full);
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid rgba(26,159,212,0.18);
  margin-bottom: 14px;
}

/* Green variant */
.section-tag.green {
  background: rgba(91,173,47,0.08);
  color: var(--dark-green);
  border-color: rgba(91,173,47,0.2);
}

/* White variant (dark backgrounds) */
.section-tag.white {
  background: rgba(255,255,255,0.1);
  color: white;
  border-color: rgba(255,255,255,0.2);
}

/* Main section heading */
.section-title {
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 800;
  line-height: 1.22;
  margin-bottom: 14px;
  color: var(--text-dark);
}

/* Colored highlight words in heading */
.section-title .ab { color: var(--blue);  }
.section-title .ag { color: var(--green); }
.section-title .aw { color: white;        }

/* Subtitle/description below heading */
.section-sub {
  font-size: 16px;
  color: var(--text-mid);
  line-height: 1.88;
  max-width: 580px;
}

/* Horizontal accent divider */
.divider {
  width: 52px;
  height: 4px;
  border-radius: 2px;
  margin: 14px 0 22px;
  display: block;
}

.divider.blue   { background: var(--blue);  }
.divider.green  { background: var(--green); }
.divider.white  { background: white;        }

/* Center align divider */
.divider.center { margin-left: auto; margin-right: auto; }

/* Section header block */
.section-header           { margin-bottom: 54px; }
.section-header.center    { text-align: center; }
.section-header.center .section-sub { margin: 0 auto; }


/* ================================================================
   11. BUTTONS
   ================================================================ */

/* --- Solid Blue --- */
.btn-blue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue);
  color: white;
  padding: 15px 34px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 15px;
  border: none;
  box-shadow: 0 6px 22px rgba(26,159,212,0.38);
  transition: var(--transition);
  cursor: pointer;
}
.btn-blue:hover {
  background: var(--dark-blue);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(26,159,212,0.45);
}

/* --- Solid Green --- */
.btn-green {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green);
  color: white;
  padding: 15px 34px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 15px;
  border: none;
  box-shadow: 0 6px 22px rgba(91,173,47,0.35);
  transition: var(--transition);
  cursor: pointer;
}
.btn-green:hover {
  background: var(--dark-green);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(91,173,47,0.42);
}

/* --- Outline White (on dark backgrounds) --- */
.btn-outline-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: white;
  padding: 14px 34px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 15px;
  border: 2px solid rgba(255,255,255,0.5);
  transition: var(--transition);
  cursor: pointer;
}
.btn-outline-white:hover {
  background: rgba(255,255,255,0.13);
  border-color: white;
  transform: translateY(-3px);
}

/* --- Outline Blue --- */
.btn-outline-blue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--blue);
  padding: 14px 34px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 15px;
  border: 2px solid var(--blue);
  transition: var(--transition);
  cursor: pointer;
}
.btn-outline-blue:hover {
  background: var(--blue);
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(26,159,212,0.32);
}

/* --- Solid White (on colored backgrounds) --- */
.btn-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  color: var(--blue);
  padding: 15px 32px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 15px;
  border: none;
  box-shadow: 0 6px 22px rgba(0,0,0,0.15);
  transition: var(--transition);
  cursor: pointer;
}
.btn-white:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.2);
}

/* --- Outline White Soft --- */
.btn-white-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: white;
  padding: 14px 32px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 15px;
  border: 2px solid rgba(255,255,255,0.6);
  transition: var(--transition);
  cursor: pointer;
}
.btn-white-outline:hover {
  background: rgba(255,255,255,0.13);
  border-color: white;
  transform: translateY(-2px);
}

/* --- Small Button Variant --- */
.btn-sm {
  padding: 9px 22px !important;
  font-size: 13px  !important;
}


/* ================================================================
   12. FORM STYLES
   ================================================================ */

/* Form group wrapper */
.form-group { margin-bottom: 18px; }

/* Label */
.form-group label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-dark);
}

/* Required asterisk */
.form-group label span { color: #e53e3e; }

/* Input / Textarea / Select */
.form-control {
  width: 100%;
  padding: 13px 17px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  color: var(--text-dark);
  background: white;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.form-control:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(26,159,212,0.08);
}

.form-control::placeholder { color: var(--text-light); }

/* Textarea */
textarea.form-control {
  resize: vertical;
  min-height: 130px;
  line-height: 1.7;
}

/* Select */
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
}

/* 2-column grid row */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Form success / error message */
.form-msg {
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  margin-top: 12px;
  display: none;
}
.form-msg.success { background: #e8f9ee; color: #276749; border: 1px solid #c3f0d2; display: block; }
.form-msg.error   { background: #fff5f5; color: #c53030; border: 1px solid #fed7d7; display: block; }


/* ================================================================
   13. HERO SLIDER — Home Page Full Banner
   ================================================================ */

/* Main slider wrapper */
.hero-slider {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  max-height: 820px;
  overflow: hidden;
}

/* ---- Individual Slide ---- */
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 1;
  transition: opacity 1s ease;
}

/* Active slide */
.slide.active {
  opacity: 1;
  z-index: 2;
}

/* ---- Slide Background Image ---- */
.slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(1);
  transition: transform 7s ease;
}

/* Ken Burns zoom-in on active slide */
.slide.active .slide-bg {
  transform: scale(1.07);
}

/* ---- Dark Gradient Overlay ---- */
.slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(10, 37, 64, 0.84) 0%,
    rgba(10, 37, 64, 0.56) 52%,
    rgba(10, 37, 64, 0.14) 100%
  );
  z-index: 1;
}

/* ---- Slide Content ---- */
.slide-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
}

.slide-content .container { width: 100%; }

/* Text block inside slide */
.slide-text {
  max-width: 680px;
  color: white;
}

/* ---- Slide Label / Tag ---- */
.slide-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  padding: 6px 20px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 20px;
  /* Animation — starts hidden */
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}

/* Pulsing green dot */
.slide-tag .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7ee8a2;
  flex-shrink: 0;
  animation: dotPulse 2s ease infinite;
}

@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(126,232,162,0.30); }
  50%       { box-shadow: 0 0 0 6px rgba(126,232,162,0.10); }
}

/* ---- Slide Heading ---- */
.slide-text h1 {
  font-size: clamp(27px, 5vw, 60px)  !important;
  font-weight: 800  !important;
  line-height: 1.12;
  margin-bottom: 18px;
  color: white;
  /* Animation */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease 0.4s, transform 0.7s ease 0.4s;
}

/* Colored words */
.slide-text h1 .blue  { color: #7dd3fc; }
.slide-text h1 .green { color: #86efac; }

/* ---- Slide Paragraph ---- */
.slide-text p {
  font-size: 17px;
  line-height: 1.88;
  color: rgba(255,255,255,0.82);
  margin-bottom: 34px;
  max-width: 560px;
  /* Animation */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease 0.6s, transform 0.7s ease 0.6s;
}

/* ---- Slide Buttons ---- */
.slide-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  /* Animation */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease 0.8s, transform 0.7s ease 0.8s;
}

/* Animate in all slide elements when slide becomes active */
.slide.active .slide-tag,
.slide.active .slide-text h1,
.slide.active .slide-text p,
.slide.active .slide-btns {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Stats Bar at Bottom of Slider ---- */
.hero-stats-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(10, 37, 64, 0.76);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,0.09);
  padding: 18px 0;
  z-index: 10;
}

.hero-stats-grid {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* Single stat item */
.hstat {
  display: flex;
  align-items: center;
  gap: 12px;
  color: white;
  padding: 4px 14px;
  border-right: 1px solid rgba(255,255,255,0.09);
}

.hstat:last-child { border-right: none; }

/* Icon circle */
.hstat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: white;
  flex-shrink: 0;
}

.hstat-icon.blue  { background: var(--blue);  box-shadow: 0 4px 14px rgba(26,159,212,0.4);  }
.hstat-icon.green { background: var(--green); box-shadow: 0 4px 14px rgba(91,173,47,0.35); }

/* Number */
.hstat-num        { font-size: 24px; font-weight: 900; color: #7dd3fc; line-height: 1; }
.hstat-num.green  { color: #86efac; }

/* Label */
.hstat-lbl { font-size: 11.5px; color: rgba(255,255,255,0.62); font-weight: 500; }

/* ---- Prev / Next Arrow Buttons ---- */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(0.88);
  z-index: 10;
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,0.12);
  border: 2px solid rgba(255,255,255,0.24);
  border-radius: 50%;
  color: white;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);

  /* ✅ Default: Hidden */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease,
              visibility 0.35s ease,
              transform 0.35s ease,
              background 0.3s ease,
              border-color 0.3s ease;
}

/* ✅ Slider pe hover aane par show ho */
.hero-slider:hover .slider-arrow {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) scale(1);
}

/* ✅ Arrow pe directly hover */
.hero-slider:hover .slider-arrow:hover {
  background: var(--blue);
  border-color: var(--blue);
  transform: translateY(-50%) scale(1.08);
}

.slider-arrow.prev { left: 24px;  }
.slider-arrow.next { right: 24px; }



/* ================================================================
   MOBILE HERO — FINAL FIX
================================================================ */
@media (max-width: 768px) {

  /* ---- Hero Slider ---- */
  .hero-slider {
    position: relative;
    width: 100%;
    min-height: 100svh;
    overflow: hidden;
  }

  /* ---- Each Slide ---- */
  .slide {
    position: absolute;
    inset: 0;
    min-height: 100svh;
  }

  /* ---- Background Image Fix ---- */
  .slide-bg {
    position: absolute;
    inset: 0;
    /* ✅ Cover rakho taaki zoom kaam kare */
    background-size: cover !important;
    /* ✅ Top center — image ka top part dikhao */
    background-position: top center !important;
    background-repeat: no-repeat !important;
    width: 100%;
    height: 100%;
    /* ✅ Zoom animation — scale se shuru */
    transform: scale(1.1);
    transition: transform 7s ease !important;
  }

  /* ✅ Active slide pe zoom in hoga */
  .slide.active .slide-bg {
    transform: scale(1) !important;
  }

  /* ---- Overlay — Bottom pe zyada dark ---- */
  .slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(10,37,64,0.30) 0%,
      rgba(10,37,64,0.60) 40%,
      rgba(10,37,64,0.88) 100%
    ) !important;
    z-index: 1;
  }

  /* ---- Slide Content ---- */
  .slide-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;         /* vertically center */
    padding-top: 70px;           /* navbar height */
    padding-bottom: 180px;       /* stats bar height */
  }

  .slide-content .container {
    width: 100%;
    padding: 0 18px;
  }

  /* ---- Slide Tag ---- */
  .slide-tag {
    font-size: 10.5px;
    padding: 4px 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }

  /* ---- Heading ---- */
  .slide-text h1 {
    font-size: clamp(24px, 6.5vw, 36px);
    line-height: 1.2;
    margin-bottom: 10px;
  }

  /* ---- Paragraph ---- */
  .slide-text p {
    font-size: 13px;
    line-height: 1.65;
    margin-bottom: 16px;
    color: rgba(255,255,255,0.85);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ---- Buttons ---- */
  .slide-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .slide-btns a {
    flex: 1;
    min-width: 130px;
    justify-content: center;
    padding: 11px 12px;
    font-size: 13px;
  }

  /* ---- Stats Bar — Bilkul neeche ---- */
  .hero-stats-bar {
    position: absolute !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0;
    right: 0;
    z-index: 20;
    padding: 10px 0;
    background: rgba(10,37,64,0.96) !important;
  }

  /* ---- Stats Grid 2 Col ---- */
  .hero-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    padding: 0 6px;
  }

  .hstat {
    padding: 7px 10px;
    gap: 8px;
    border-right: 1px solid rgba(255,255,255,0.07);
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }

  .hstat:nth-child(2),
  .hstat:nth-child(4) { border-right: none; }

  .hstat:nth-child(3),
  .hstat:nth-child(4) { border-bottom: none; }

  /* 5th item — center full width */
  .hstat:nth-child(5) {
    grid-column: 1 / -1;
    justify-content: center;
    border-right: none;
    border-bottom: none;
  }

  .hstat-icon { width: 30px; height: 30px; font-size: 12px; }
  .hstat-num  { font-size: 17px; }
  .hstat-lbl  { font-size: 9.5px; }

  /* ---- Dots ---- */
  .slider-dots {
    bottom: 185px !important;
    z-index: 15;
  }

  /* ---- Counter ---- */
  .slide-counter {
    bottom: 185px !important;
    font-size: 11px;
    z-index: 15;
  }

  /* ---- Progress ---- */
  .slider-progress {
    bottom: 179px !important;
    z-index: 15;
  }

  /* ---- Arrows Hidden ---- */
  .slider-arrow {
    display: none !important;
  }
}


@media (max-width: 768px) {

  /* ✅ MAIN FIX — max-height remove karo */
  .hero-slider {
    height: 100svh !important;
    min-height: 620px !important;
    max-height: none !important;   /* ← yahi tha asli problem */
  }

  /* ✅ Slide bhi same height */
  .slide {
    height: 100svh !important;
    min-height: 620px !important;
    max-height: none !important;
  }

  /* ✅ Background image full cover */
  .slide-bg {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center center !important;
    height: 100% !important;
    max-height: none !important;
  }

}




/* ---- Dot Indicators ---- */
.slider-dots {
  position: absolute;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

/* Individual dot */
.sdot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.32);
  cursor: pointer;
  transition: all 0.35s ease;
  border: none;
  padding: 0;
}

/* Active dot stretches to pill */
.sdot.active {
  background: white;
  width: 28px;
  border-radius: 5px;
}

/* ---- Slide Counter (01 / 04) ---- */
.slide-counter {
  position: absolute;
  bottom: 94px;
  right: 32px;
  color: rgba(255,255,255,0.58);
  font-size: 13px;
  font-weight: 600;
  z-index: 10;
  font-family: 'Poppins', sans-serif;
  line-height: 1;
}

.slide-counter .current {
  color: white;
  font-size: 24px;
  font-weight: 900;
}

/* ---- Progress Bar ---- */
.slider-progress {
  position: absolute;
  bottom: 84px;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,0.1);
  z-index: 10;
}

/* Fill bar — animated via JS class toggle */
.slider-progress-fill {
  height: 100%;
  background: var(--blue);
  width: 0%;
  transition: width 0s linear;
}

.slider-progress-fill.animating {
  transition: width 5s linear;
  width: 100%;
}







/* ================================================================
   14. ABOUT SECTION
   ================================================================ */

.about-section {
  background: white;
}

/* ---- 2 Column Grid ---- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

/* ---- Image Side ---- */
.about-img-wrap {
  position: relative;
  padding-bottom: 22px; /* badge ke liye space */
  padding-right: 22px;
}

.about-img-main {
  width: 100%;
  height: 460px;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: var(--shadow);
  display: block;
  transition: transform 0.5s ease;
}

.about-img-main:hover {
  transform: scale(1.01);
}

/* ---- Floating Badge (04+ Years) ---- */
.about-img-badge {
  position: absolute;
  bottom: 0px;
  right: 0px;
  background: #0a2540  !important;
  color: white;
  padding: 20px 28px;
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 12px 36px rgba(26,159,212,0.38);
  z-index: 2;
  animation: badgeFloat 3.5s ease-in-out infinite;
}

@keyframes badgeFloat {
  0%, 100% { transform: translateY(0);   }
  50%       { transform: translateY(-6px); }
}

.about-img-badge .years {
  font-size: 42px;
  font-weight: 800 !important;
  line-height: 1;
  display: block;
}

.about-img-badge .years-lbl {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.88;
  margin-top: 5px;
  display: block;
  white-space: nowrap;
}

/* Decorative dot pattern behind image */
.about-img-wrap::before {
  content: '';
  position: absolute;
  top: -16px;
  left: -16px;
  width: 120px;
  height: 120px;
  background-image: radial-gradient(circle, rgba(26,159,212,0.25) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  border-radius: 8px;
  z-index: 0;
  pointer-events: none;
}

/* Decorative green line accent */
.about-img-wrap::after {
  content: '';
  position: absolute;
  bottom: 40px;
  right: -8px;
  width: 5px;
  height: 80px;
  background: var(--green);
  border-radius: 3px;
  z-index: 0;
}

/* ---- Text Side ---- */
.about-text {
  padding-left: 8px;
}

.about-text .section-sub {
  margin-bottom: 10px;
}

/* ---- Feature List ---- */
.about-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 28px;
  margin-bottom: 32px;
}

/* Single Feature Row */
.about-feature {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: var(--transition);
}

.about-feature:hover {
  background: var(--light-bg);
  border-color: var(--border);
}

/* Feature Icon Box */
.about-feature-icon {
  width: 50px;
  height: 50px;
  min-width: 50px;
  border-radius: 14px;
  background: rgba(26,159,212,0.08);
  border: 1px solid rgba(26,159,212,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: var(--transition);
}

.about-feature:hover .about-feature-icon {
  background: var(--blue);
  border-color: var(--blue);
}

/* Feature Text */
.about-feature-text { flex: 1; }

.about-feature h4 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--text-dark);
  transition: color 0.3s;
}

.about-feature:hover h4 { color: var(--blue); }

.about-feature p {
  font-size: 13.5px;
  color: var(--text-mid);
  line-height: 1.7;
  margin: 0;
}

/* ---- CTA Buttons ---- */
.about-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* ---- Trust Badges ---- */
.about-trust {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.about-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-mid);
  font-weight: 500;
}

.about-trust-item i {
  font-size: 16px;
  color: var(--green);
}



/* ================================================================
   15. CAUSES SECTION
   ================================================================ */
.causes-section { background: var(--light-bg); }

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

/* Card */
.cause-card {
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
  border: 1px solid var(--border);
}

.cause-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-hover);
  border-color: transparent;
}

/* Image */
.cause-card-img-wrap { overflow: hidden; }

.cause-card-img {
  width: 100%;
  height: 202px;
  object-fit: cover;
  transition: transform 0.55s ease;
  display: block;
}

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

/* Body */
.cause-card-body { padding: 26px; }

/* Icon badge */
.cause-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  margin-bottom: 14px;
}

.cause-icon.blue      { background: var(--blue);      box-shadow: 0 6px 18px rgba(26,159,212,0.30); }
.cause-icon.green     { background: var(--green);     box-shadow: 0 6px 18px rgba(91,173,47,0.28);  }
.cause-icon.dark-blue { background: var(--dark-blue); box-shadow: 0 6px 18px rgba(13,122,171,0.28); }

.cause-card-body h3 { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.cause-card-body p  { font-size: 13.5px; color: var(--text-mid); line-height: 1.78; margin-bottom: 18px; }

/* Progress bar */
.cause-progress-wrap  { margin-bottom: 16px; }

.cause-progress-info  {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 7px;
}

.cpct-blue  { color: var(--blue);  }
.cpct-green { color: var(--green); }

.cause-progress-bar {
  height: 7px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.cause-progress-fill {
  height: 100%;
  border-radius: 4px;
  animation: fillBar 2s ease forwards;
}

.fill-blue  { background: var(--blue);  }
.fill-green { background: var(--green); }

@keyframes fillBar { from { width: 0; } }

/* Learn More link */
.cause-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blue);
  font-weight: 600;
  font-size: 13.5px;
  transition: gap 0.3s;
}

.cause-link:hover { gap: 10px; color: var(--dark-blue); }


/* ================================================================
   16. IMPACT / STATS SECTION
   ================================================================ */
.impact-section {
  background: var(--deep-dark);
  position: relative;
  overflow: hidden;
}

/* Optional background image overlay */
.impact-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/impact-bg.jpg') center/cover no-repeat;
  opacity: 0.05;
  pointer-events: none;
}

.impact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  position: relative;
  z-index: 1;
}

/* Stat card */
.impact-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-lg);
  padding: 38px 18px;
  text-align: center;
  color: white;
  transition: var(--transition);
}

.impact-card:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-8px);
  border-color: rgba(255,255,255,0.2);
}

/* Icon circle */
.ic-icon {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin: 0 auto 18px;
}

.ic-icon.blue  { background: var(--blue);  box-shadow: 0 8px 24px rgba(26,159,212,0.40); }
.ic-icon.green { background: var(--green); box-shadow: 0 8px 24px rgba(91,173,47,0.40);  }

/* Counter number */
.ic-num        { font-size: 46px; font-weight: 900; color: #7dd3fc; line-height: 1; margin-bottom: 8px; }
.ic-num.green  { color: #86efac; }

/* Label */
.ic-label { font-size: 13.5px; color: rgba(255,255,255,0.70); font-weight: 500; }


/* ================================================================
   17. PROGRAMS SECTION
   ================================================================ */
.programs-section { background: white; }

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

/* Program card */
.program-card {
  border-radius: var(--radius-lg);
  padding: 34px 26px;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  background: white;
  transition: var(--transition);
}

/* Top color accent line */
.program-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.program-card.blue-top::before  { background: var(--blue);  }
.program-card.green-top::before { background: var(--green); }

.program-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-hover);
  transform: translateY(-6px);
}

/* Program icon box */
.prog-icon {
  width: 62px;
  height: 62px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 18px;
}

.prog-icon.blue-bg  { background: rgba(26,159,212,0.09); border: 1px solid rgba(26,159,212,0.15); }
.prog-icon.green-bg { background: rgba(91,173,47,0.09);  border: 1px solid rgba(91,173,47,0.15);  }

.program-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.program-card p  { font-size: 13.5px; color: var(--text-mid); line-height: 1.82; margin-bottom: 18px; }

/* Tags */
.prog-tags { display: flex; flex-wrap: wrap; gap: 7px; }

.prog-tag {
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 13px;
  border-radius: 20px;
}

.prog-tag.blue  { background: rgba(26,159,212,0.09); color: var(--blue);       }
.prog-tag.green { background: rgba(91,173,47,0.09);  color: var(--dark-green); }


/* ================================================================
   18. GALLERY SECTION
   ================================================================ */
.gallery-section { background: var(--light-bg); }

/* Masonry-style grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.gallery-item {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: var(--border);
}

/* First item spans 2×2 */
.gallery-item:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
}

/* Images */
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 190px;
  transition: transform 0.55s ease;
  display: block;
}

.gallery-item:nth-child(1) img { min-height: 390px; }

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

/* Hover overlay */
.gallery-overlay {
  position: absolute;
  inset: 0;
  background: var(--blue);
  opacity: 0;
  transition: opacity 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-overlay i { font-size: 28px; color: white; }

.gallery-item:hover .gallery-overlay { opacity: 0.55; }


/* ================================================================
   19. VOLUNTEER CTA SECTION
   ================================================================ */
.volunteer-section {
  background: var(--blue);
  padding: 80px 0;
}

.volunteer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
}

.volunteer-text h2 {
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 800;
  color: white;
  margin-bottom: 12px;
}

.volunteer-text p {
  font-size: 16px;
  color: rgba(255,255,255,0.85);
  max-width: 500px;
  line-height: 1.82;
}

.volunteer-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  flex-shrink: 0;
}


/* ================================================================
   20. TESTIMONIALS SECTION
   ================================================================ */
.testimonials-section { background: white; }

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

/* Card */
.testimonial-card {
  background: var(--light-bg);
  border-radius: var(--radius-lg);
  padding: 34px 28px;
  border: 1px solid var(--border);
  transition: var(--transition);
}

.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: transparent;
  background: white;
}

/* Large quote symbol */
.quote-icon {
  font-size: 56px;
  color: var(--blue);
  line-height: 1;
  margin-bottom: 12px;
  font-weight: 700;
  opacity: 0.7;
}

/* Star rating */
.stars {
  color: #f6ad55;
  font-size: 14px;
  margin-bottom: 14px;
  letter-spacing: 3px;
}

.testimonial-card p {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.88;
  margin-bottom: 22px;
  font-style: italic;
}

/* Author row */
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.author-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: block;
}

.author-name { font-size: 14.5px; font-weight: 700; color: var(--text-dark); }
.author-role { font-size: 12.5px; color: var(--text-light); margin-top: 2px; }


/* ================================================================
   21. DONATE SECTION
   ================================================================ */
.donate-section { background: var(--light-bg); }

.donate-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* Amount quick-select buttons */
.donate-amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 22px 0;
}

.amount-btn {
  padding: 14px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: white;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-dark);
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
}

.amount-btn:hover,
.amount-btn.active {
  border-color: var(--blue);
  background: rgba(26,159,212,0.06);
  color: var(--blue);
  transform: translateY(-2px);
}

/* Donate form card */
.donate-form {
  background: white;
  border-radius: var(--radius-xl);
  padding: 44px;
  box-shadow: var(--shadow);
}

.donate-form h3 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 22px;
  color: var(--text-dark);
}

/* Full-width donate submit button */
.donate-btn-full {
  width: 100%;
  padding: 16px;
  background: var(--blue);
  color: white;
  border: none;
  border-radius: var(--radius-full);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(26,159,212,0.38);
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.donate-btn-full:hover {
  background: var(--dark-blue);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(26,159,212,0.45);
}

/* Trust badges below button */
.donate-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-light);
  flex-wrap: wrap;
}

.donate-trust i.blue  { color: var(--blue);  }
.donate-trust i.green { color: var(--green); }


/* ================================================================
   22. CONTACT SECTION
   ================================================================ */
.contact-section { background: white; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 52px;
  align-items: start;
}

/* Info card */
.contact-info-card {
  background: var(--dark-blue);
  border-radius: var(--radius-xl);
  padding: 44px;
  color: white;
}

.contact-info-card h3     { font-size: 24px; font-weight: 700; color: white; margin-bottom: 12px; }
.contact-info-card > p    { color: rgba(255,255,255,0.78); font-size: 14.5px; line-height: 1.8; margin-bottom: 32px; }

/* Single contact item */
.contact-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.contact-item-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: rgba(255,255,255,0.13);
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.contact-item h4 { font-size: 12.5px; color: rgba(255,255,255,0.58); font-weight: 500; margin-bottom: 4px; }
.contact-item p  { color: white; font-size: 14.5px; font-weight: 600; }

/* Form card */
.contact-form-card {
  background: var(--light-bg);
  border-radius: var(--radius-xl);
  padding: 44px;
}

.contact-form-card h3 { font-size: 24px; font-weight: 700; margin-bottom: 26px; color: var(--text-dark); }

/* Submit button */
.submit-btn {
  background: var(--green);
  color: white;
  padding: 15px 40px;
  border: none;
  border-radius: var(--radius-full);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(91,173,47,0.35);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.submit-btn:hover {
  background: var(--dark-green);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(91,173,47,0.42);
}


/* ================================================================
   23. WHATSAPP FLOAT & BACK TO TOP
   ================================================================ */

/* WhatsApp floating button */
.whatsapp-float {
  position: fixed;
  bottom: 88px;
  right: 26px;
  width: 52px;
  height: 52px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  box-shadow: 0 6px 22px rgba(37,211,102,0.48);
  z-index: var(--z-fixed);
  animation: waBounce 2.4s ease infinite;
  transition: transform 0.3s;
  text-decoration: none;
}

.whatsapp-float:hover {
  animation: none;
  transform: scale(1.12);
  box-shadow: 0 10px 30px rgba(37,211,102,0.55);
}

@keyframes waBounce {
  0%, 100% { transform: translateY(0);   }
  50%       { transform: translateY(-7px); }
}

/* Back to Top button */
#backToTop {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 46px;
  height: 46px;
  background: var(--blue);
  color: white;
  border: none;
  border-radius: 13px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(26,159,212,0.42);
  z-index: var(--z-fixed);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Hidden by default */
  opacity: 0;
  transform: translateY(20px);
  transition: var(--transition);
  pointer-events: none;
}

/* Show state — toggle via JS */
#backToTop.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

#backToTop:hover {
  background: var(--dark-blue);
  transform: translateY(-4px);
}


/* ================================================================
   24. FOOTER
   ================================================================ */
footer {
  background: #0a1628;
  color: white;
  padding: 78px 0 0;
}

/* 4-column grid */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 46px;
  padding-bottom: 54px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* Logo */
.footer-logo {
  height: 54px;
  margin-bottom: 18px;
  filter: brightness(10) saturate(0);
  display: block;
}

/* About text */
.footer-about p {
  font-size: 13.5px;
  color: rgba(255,255,255,0.52);
  line-height: 1.88;
  margin-bottom: 22px;
}

/* Social icons */
.footer-social {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.72);
  font-size: 14px;
  transition: var(--transition);
}

/* Social hover colors */
.footer-social a.fb:hover { background: #1877f2; color: white; transform: translateY(-4px); }
.footer-social a.ig:hover { background: #e1306c; color: white; transform: translateY(-4px); }
.footer-social a.yt:hover { background: #ff0000; color: white; transform: translateY(-4px); }
.footer-social a.tw:hover { background: #1da1f2; color: white; transform: translateY(-4px); }
.footer-social a.wa:hover { background: #25d366; color: white; transform: translateY(-4px); }
.footer-social a.li:hover { background: #0077b5; color: white; transform: translateY(-4px); }

/* Column heading */
.footer-col h4 {
  font-size: 15px;
  font-weight: 700;
  color: white;
  margin-bottom: 18px;
  padding-bottom: 11px;
  border-bottom: 2px solid var(--blue);
  display: inline-block;
}

/* Footer links */
.footer-links li { margin-bottom: 12px; }

.footer-links a {
  font-size: 13.5px;
  color: rgba(255,255,255,0.52);
  display: flex;
  align-items: center;
  gap: 7px;
  transition: var(--transition);
}

.footer-links a i {
  font-size: 9px;
  color: var(--green);
  flex-shrink: 0;
}

.footer-links a:hover {
  color: white;
  padding-left: 5px;
}

/* Newsletter column */
.footer-newsletter p {
  font-size: 13.5px;
  color: rgba(255,255,255,0.52);
  margin-bottom: 16px;
  line-height: 1.75;
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.newsletter-form input {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.07);
  color: white;
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.3s;
}

.newsletter-form input:focus       { border-color: var(--blue); }
.newsletter-form input::placeholder { color: rgba(255,255,255,0.32); }

.newsletter-form button {
  padding: 13px;
  background: var(--green);
  border: none;
  border-radius: var(--radius-sm);
  color: white;
  font-size: 13.5px;
  font-weight: 600;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
}

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

/* Footer bottom bar */
.footer-bottom {
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.footer-bottom p        { font-size: 13px; color: rgba(255,255,255,0.36); }
.footer-bottom p span   { color: var(--green); }

.footer-bottom-links    { display: flex; gap: 20px; }

.footer-bottom-links a  {
  font-size: 13px;
  color: rgba(255,255,255,0.36);
  transition: color 0.3s;
}

.footer-bottom-links a:hover { color: white; }


/* ================================================================
   25. REVEAL / SCROLL ANIMATIONS
   ================================================================ */

/* Default — fade up */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* From left */
.reveal-left {
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* From right */
.reveal-right {
  opacity: 0;
  transform: translateX(36px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Zoom in */
.reveal-zoom {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-zoom.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays — add to children */
.delay-1 { transition-delay: 0.1s !important; }
.delay-2 { transition-delay: 0.2s !important; }
.delay-3 { transition-delay: 0.3s !important; }
.delay-4 { transition-delay: 0.4s !important; }
.delay-5 { transition-delay: 0.5s !important; }


/* ================================================================
   26. UTILITY CLASSES
   ================================================================ */

/* Text Colors */
.text-blue      { color: var(--blue)      !important; }
.text-green     { color: var(--green)     !important; }
.text-dark      { color: var(--text-dark) !important; }
.text-mid       { color: var(--text-mid)  !important; }
.text-light-c   { color: var(--text-light)!important; }
.text-white     { color: white            !important; }

/* Background Colors */
.bg-blue        { background: var(--blue)      !important; }
.bg-green       { background: var(--green)     !important; }
.bg-light       { background: var(--light-bg)  !important; }
.bg-dark        { background: var(--deep-dark) !important; }
.bg-white       { background: white            !important; }

/* Text Align */
.text-center { text-align: center; }
.text-left   { text-align: left;   }
.text-right  { text-align: right;  }

/* Display */
.d-flex         { display: flex; }
.d-grid         { display: grid; }
.d-block        { display: block; }
.d-none         { display: none; }
.items-center   { align-items: center; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.flex-wrap      { flex-wrap: wrap; }

/* Spacing */
.mt-0  { margin-top: 0;    }
.mt-sm { margin-top: 12px; }
.mt-md { margin-top: 24px; }
.mt-lg { margin-top: 40px; }
.mb-0  { margin-bottom: 0;    }
.mb-sm { margin-bottom: 12px; }
.mb-md { margin-bottom: 24px; }
.mb-lg { margin-bottom: 40px; }

/* Widths */
.w-full  { width: 100%; }
.w-auto  { width: auto; }

/* Border Radius */
.rounded-sm   { border-radius: var(--radius-sm);   }
.rounded      { border-radius: var(--radius);      }
.rounded-lg   { border-radius: var(--radius-lg);   }
.rounded-full { border-radius: var(--radius-full); }

/* Shadows */
.shadow-sm  { box-shadow: var(--shadow-sm); }
.shadow     { box-shadow: var(--shadow);    }
.shadow-lg  { box-shadow: var(--shadow-hover); }

/* Overflow */
.overflow-hidden { overflow: hidden; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }

/* Z-index helpers */
.z-1  { z-index: 1;  }
.z-2  { z-index: 2;  }
.z-10 { z-index: 10; }


/* ================================================================
   27. RESPONSIVE — MAX 1024px (Tablet Landscape)
   ================================================================ */
@media (max-width: 1024px) {

  /* Footer grid → 2 columns */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }

  /* Sections grids → 2 columns */
  .causes-grid,
  .programs-grid    { grid-template-columns: repeat(2, 1fr); }
  .impact-grid      { grid-template-columns: repeat(2, 1fr); }

  /* About gap reduce */
  .about-grid { gap: 44px; }

  /* Gallery → 3 columns */
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ================================================================
   28. RESPONSIVE — MAX 768px (Tablet Portrait / Mobile)
   ================================================================ */
@media (max-width: 768px) {

  /* Sections padding reduce */
  section { padding: 60px 0; }

  /* Hide topbar contact links */
  .topbar-left { display: none; }

  /* Mobile nav menu — dropdown */
  .nav-menu {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    padding: 16px 24px 24px;
    box-shadow: 0 16px 44px rgba(0,0,0,0.12);
    border-top: 2px solid var(--border);
    z-index: 999;
    gap: 4px;
  }

  .nav-menu.open { display: flex; }

  .nav-menu a {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
  }

  .nav-donate {
    margin-left: 0;
    margin-top: 8px;
    justify-content: center;
    width: 100%;
  }

  /* Show hamburger */
  .hamburger { display: flex; }

  /* Hero slider */
  .hero-slider    { height: 100svh; min-height: 560px; max-height: none; }
  .slide-text     { max-width: 100%; }
  .slide-text h1  { font-size: 28px; }
  .slide-text p   { font-size: 15px; }
  .slide-overlay  { background: rgba(10, 37, 64, 0.78); }

  .slider-arrow         { width: 40px; height: 40px; font-size: 14px; }
  .slider-arrow.prev    { left: 12px; }
  .slider-arrow.next    { right: 12px; }

  .hero-stats-bar   { position: relative; }
  .hero-stats-grid  { gap: 8px; }
  .hstat            { border-right: none; padding: 6px 8px; }
  .hstat-num        { font-size: 20px; }

  .slider-dots      { bottom: 16px; }
  .slide-counter    { display: none; }
  .slider-progress  { bottom: 8px; }

  /* About, Donate, Contact → single column */
  .about-grid,
  .donate-grid,
  .contact-grid     { grid-template-columns: 1fr; }

  .about-img-main   { height: 300px; }
  .about-img-badge  { right: 10px; bottom: 10px; }

  /* Cause, Programs, Testimonials → 1 column */
  .causes-grid,
  .programs-grid,
  .testimonials-grid { grid-template-columns: 1fr; }

  /* Gallery → 2 columns */
  .gallery-grid     { grid-template-columns: repeat(2, 1fr); }
  .gallery-item:nth-child(1) { grid-column: span 2; }

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

  /* Volunteer → stack */
  .volunteer-inner  { flex-direction: column; text-align: center; }
  .volunteer-btns   { justify-content: center; }

  /* Form row → single column */
  .form-row         { grid-template-columns: 1fr; }

  /* Footer */
  .footer-grid      { grid-template-columns: 1fr; }

  /* Page hero */
  .page-hero        { padding: 60px 0 48px; }
}


/* ================================================================
   29. RESPONSIVE — MAX 480px (Mobile Small)
   ================================================================ */
@media (max-width: 480px) {

  /* Container padding tighter */
  .container { padding: 0 16px; }

  /* Hide topbar completely */
  .topbar { display: none; }

  /* Nav logo smaller */
  .nav-logo img { height: 48px; }

  /* Hero */
  .slide-text h1  { font-size: 24px; line-height: 1.2; }
  .slide-btns     { flex-direction: column; }

  /* Section titles smaller */
  .section-title  { font-size: 24px; }

  /* Donate amounts → 2 columns */
  .donate-amounts { grid-template-columns: repeat(2, 1fr); }
  .donate-form    { padding: 28px 22px; }

  /* Contact / About cards smaller padding */
  .contact-info-card,
  .contact-form-card { padding: 28px 22px; }

  /* Gallery → 1 column on very small */
  .gallery-grid   { grid-template-columns: 1fr; }
  .gallery-item:nth-child(1) { grid-column: span 1; }

  /* Footer */
  .footer-grid    { gap: 28px; }
  .footer-bottom  { flex-direction: column; text-align: center; gap: 8px; }

  /* Buttons */
  .btn-blue, .btn-green,
  .btn-outline-blue, .btn-outline-white,
  .btn-white, .btn-white-outline { padding: 13px 24px; font-size: 14px; }
}