/* ============================================================
   Prakruti Mitra Mandal — beta/assets/css/style.css
   Main stylesheet for the revamped PMM website.

   Table of Contents:
   1.  Design Tokens (CSS Custom Properties)
   2.  Base & Reset
   3.  Typography
   4.  Utilities & Helpers
   5.  Image Placeholder
   6.  Topbar
   7.  Navbar
   8.  Floating Social Sidebar
   9.  Hero Slider (Swiper)
   10. Section Headings
   11. Our Mission Section
   12. Impact Stats Bar
   13. Our Divisions (Committee Cards)
   14. River Initiative Callout
   15. YouTube Video Facade
   16. Awards & Recognition
   17. Latest Activities (Event Cards)
   18. Donation CTA Section
   19. Gallery Strip
   20. Contact Strip
   21. Footer
   22. Page Transitions & Scroll Animations
   23. Responsive Breakpoints
   ============================================================ */


/* ── 1. DESIGN TOKENS ──────────────────────────────────────── */
:root {
  --green-dark:    #2D6A4F;
  --green-mid:     #52B788;
  --green-light:   #B7E4C7;
  --green-pale:    #D8F3DC;
  --earth:         #8B6914;
  --earth-light:   #F4E4B0;
  --bg:            #F8FAF8;
  --bg-dark:       #1B3A2D;
  --text:          #1B3A2D;
  --text-muted:    #5A7A6A;
  --white:         #ffffff;
  --shadow-sm:     0 2px 12px rgba(45, 106, 79, 0.10);
  --shadow-md:     0 8px 32px rgba(45, 106, 79, 0.15);
  --shadow-lg:     0 16px 48px rgba(45, 106, 79, 0.20);
  --radius-sm:     8px;
  --radius-md:     12px;
  --radius-lg:     20px;
  --transition:    0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --font-head:     'Outfit', sans-serif;
  --font-body:     'Inter', sans-serif;
  --font-gujarati: 'Noto Sans Gujarati', sans-serif;
}


/* ── 2. BASE & RESET ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  /* Subtle fade-in on every page load.
     No `forwards` fill-mode: it would leave <body> permanently treated as
     having an active transform (per spec), which makes <body> a containing
     block for position:fixed descendants — breaking any fixed-position
     overlay (lightboxes, modals) appended to <body>, since their `fixed`
     positioning would then resolve against the full document height
     instead of the viewport. The animation's end state is visually
     identical to the element's normal resting state, so dropping
     `forwards` changes nothing visually. */
  animation: pageFadeIn 0.45s ease;
}

@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

a { color: var(--green-dark); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--green-mid); }


/* ── 3. TYPOGRAPHY ─────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }
h4 { font-size: 1.1rem; }

.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-mid);
  margin-bottom: 10px;
}

.lead {
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1.8;
}

/* Gujarati script — used for header sub-brand and hero slides */
.gujarati {
  font-family: var(--font-gujarati);
  font-size: 0.9em;
  font-weight: 400;
}


/* ── 4. UTILITIES & HELPERS ────────────────────────────────── */
.section-pad      { padding: 88px 0; }
.section-pad-sm   { padding: 56px 0; }
.bg-green-dark    { background: var(--bg-dark); color: var(--white); }
.bg-green-pale    { background: var(--green-pale); }
.bg-earth-light   { background: var(--earth-light); }
.text-green       { color: var(--green-dark); }
.text-green-mid   { color: var(--green-mid); }
.text-muted-green { color: var(--text-muted); }

/* PMM primary button */
.btn-pmm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green-dark);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 28px;
  border-radius: 50px;
  border: 2px solid transparent;
  transition: background var(--transition), letter-spacing var(--transition), transform var(--transition);
}
.btn-pmm:hover {
  background: var(--green-mid);
  color: var(--white);
  letter-spacing: 0.04em;
  transform: translateY(-2px);
}

/* PMM outline button */
.btn-pmm-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 28px;
  border-radius: 50px;
  border: 2px solid rgba(255,255,255,0.7);
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.btn-pmm-outline:hover {
  background: rgba(255,255,255,0.15);
  border-color: var(--white);
  color: var(--white);
  transform: translateY(-2px);
}


/* ── 5. IMAGE PLACEHOLDER ──────────────────────────────────── */
/* Shown whenever an image file doesn't exist yet */
.img-placeholder {
  background: linear-gradient(135deg, var(--green-pale), var(--green-light));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--green-dark);
  gap: 10px;
  min-height: 200px;
  border-radius: var(--radius-md);
  width: 100%;
}
.img-placeholder i    { font-size: 2.2rem; opacity: 0.45; }
.img-placeholder span { font-size: 0.78rem; opacity: 0.65; font-style: italic; }


/* ── 6. TOPBAR ─────────────────────────────────────────────── */
/* Slim strip above the navbar: phone + social icons */
.site-topbar {
  background: var(--bg-dark);
  color: rgba(255,255,255,0.75);
  font-size: 0.82rem;
  padding: 7px 0;
  line-height: 1;
}
.site-topbar a {
  color: rgba(255,255,255,0.75);
  margin-left: 14px;
  transition: color var(--transition);
}
.site-topbar a:hover { color: var(--green-light); }
.site-topbar .topbar-social a {
  font-size: 0.9rem;
  margin-left: 12px;
}


/* ── 7. NAVBAR ─────────────────────────────────────────────── */
.site-navbar {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 10px 0;
  transition: box-shadow var(--transition), padding var(--transition);
  z-index: 1030;
}
.site-navbar.scrolled {
  box-shadow: var(--shadow-sm);
  padding: 6px 0;
}

/* Brand: logo + Gujarati tagline */
.navbar-brand-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.navbar-brand-wrap img { height: 52px; width: auto; }
.brand-text { line-height: 1.2; }
.brand-en {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  color: var(--green-dark);
}
.brand-gu {
  display: block;
  font-family: var(--font-gujarati);
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Nav links */
.site-navbar .nav-link {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--text);
  padding: 6px 14px;
  position: relative;
  transition: color var(--transition);
}
.site-navbar .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--green-mid);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition);
  border-radius: 2px;
}
.site-navbar .nav-link:hover,
.site-navbar .nav-link.active { color: var(--green-dark); }
.site-navbar .nav-link:hover::after,
.site-navbar .nav-link.active::after { transform: scaleX(1); }

/* Dropdown */
.site-navbar .dropdown-menu {
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 8px 0;
  min-width: 220px;
  animation: dropIn 0.2s ease;
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Open Committees/Events dropdowns on hover on desktop (matches
   navbar-expand-lg's 992px breakpoint); mobile keeps click-to-toggle
   since there's no hover on touch devices. */
@media (min-width: 992px) {
  .site-navbar .nav-item.dropdown:hover > .dropdown-menu,
  .site-navbar .nav-item.dropdown:focus-within > .dropdown-menu {
    display: block;
  }
}
.site-navbar .dropdown-item {
  font-family: var(--font-head);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  padding: 8px 20px;
  transition: background var(--transition), color var(--transition), padding-left var(--transition);
}
.site-navbar .dropdown-item:hover {
  background: var(--green-pale);
  color: var(--green-dark);
  padding-left: 26px;
}

/* Donate button in nav */
.nav-donate-btn {
  background: var(--green-dark);
  color: var(--white) !important;
  border-radius: 50px;
  padding: 8px 20px !important;
  font-weight: 600 !important;
  transition: background var(--transition), transform var(--transition) !important;
}
.nav-donate-btn::after { display: none !important; }
.nav-donate-btn:hover {
  background: var(--green-mid) !important;
  color: var(--white) !important;
  transform: translateY(-1px);
}


/* ── 8. FLOATING SOCIAL SIDEBAR ────────────────────────────── */
/* Fixed left edge — desktop only */
.social-sidebar {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.social-sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--green-dark);
  color: var(--white);
  padding: 10px 12px;
  font-size: 1rem;
  width: 44px;
  overflow: hidden;
  white-space: nowrap;
  transition: width var(--transition), background var(--transition);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  text-decoration: none;
}
.social-sidebar a:hover {
  width: 140px;
  color: var(--white);
}
.social-sidebar a .social-label {
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity var(--transition);
}
.social-sidebar a:hover .social-label { opacity: 1; }
/* Brand colours on hover */
.social-sidebar .ss-whatsapp:hover   { background: #25D366; }
.social-sidebar .ss-facebook:hover   { background: #1877F2; }
.social-sidebar .ss-instagram:hover  { background: #E1306C; }
.social-sidebar .ss-youtube:hover    { background: #FF0000; }


/* ── 9. HERO SLIDER ────────────────────────────────────────── */
.hero-swiper {
  width: 100%;
  height: 100vh;
  min-height: 560px;
  max-height: 900px;
  position: relative;
}

.hero-slide {
  position: relative;
  overflow: hidden;
}

/* Ken Burns zoom animation on each slide image */
.hero-slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform-origin: center;
  animation: kenBurns 30s ease-in-out forwards;
}
@keyframes kenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

.hero-slide-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    animation: heroZoom 30s linear forwards;
}
@keyframes heroZoom {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.08);
    }
}

/* Dark overlay for text readability */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.25) 0%,
    rgba(27, 58, 45, 0.65) 60%,
    rgba(27, 58, 45, 0.80) 100%
  );
}

.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 5vw;
  max-width: 860px;
  color: var(--white);
}

.hero-label {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green-light);
  margin-bottom: 14px;
  opacity: 0;
  animation: heroFadeUp 0.7s ease 0.3s forwards;
}
.hero-title {
  font-family: var(--font-head);
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.18;
  color: var(--white);
  margin-bottom: 10px;
  opacity: 0;
  animation: heroFadeUp 0.7s ease 0.5s forwards;
}
.hero-title-gu {
  font-family: var(--font-gujarati);
  font-size: clamp(1.1rem, 2.5vw, 1.8rem);
  font-weight: 400;
  color: var(--green-light);
  margin-bottom: 20px;
  opacity: 0;
  animation: heroFadeUp 0.7s ease 0.65s forwards;
}
.hero-sub {
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  color: rgba(255,255,255,0.88);
  margin-bottom: 32px;
  max-width: 520px;
  line-height: 1.6;
  opacity: 0;
  animation: heroFadeUp 0.7s ease 0.8s forwards;
}
.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  opacity: 0;
  animation: heroFadeUp 0.7s ease 1s forwards;
}

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Swiper pagination dots */
.hero-swiper .swiper-pagination-bullet {
  background: rgba(255,255,255,0.5);
  width: 10px; height: 10px;
  opacity: 1;
  transition: background var(--transition), width var(--transition);
  border-radius: 5px;
}
.hero-swiper .swiper-pagination-bullet-active {
  background: var(--green-light);
  width: 28px;
}

/* Swiper nav arrows */
.hero-swiper .swiper-button-next,
.hero-swiper .swiper-button-prev {
  color: rgba(255,255,255,0.8);
  transition: color var(--transition), transform var(--transition);
}
.hero-swiper .swiper-button-next:hover,
.hero-swiper .swiper-button-prev:hover {
  color: var(--white);
  transform: scale(1.15);
}

/* Scroll-down indicator */
.hero-scroll-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.65);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: bounce 2s infinite;
}
.hero-scroll-hint i { font-size: 1.2rem; }
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}


/* ── 10. SECTION HEADINGS ──────────────────────────────────── */
.section-heading { margin-bottom: 48px; }
.section-heading h2 { margin-bottom: 14px; }
.section-heading .section-divider {
  display: block;
  width: 52px;
  height: 3px;
  background: linear-gradient(90deg, var(--green-dark), var(--green-mid));
  border-radius: 3px;
  margin: 0 0 18px 0;        /* left-aligned, sits directly below .section-label */
}
/* Only centre it when the parent heading is explicitly centred */
.section-heading.text-center .section-divider,
.text-center .section-divider {
  margin-left: auto;
  margin-right: auto;
}
.section-heading p { color: var(--text-muted); max-width: 600px; }
.section-heading.text-center p { margin: 0 auto; }


/* ── 11. OUR MISSION SECTION ───────────────────────────────── */
.mission-section { background: var(--white); }

.mission-pillar-card {
  text-align: center;
  padding: 40px 28px;
  border-radius: var(--radius-lg);
  background: var(--bg);
  border: 1px solid var(--green-pale);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  height: 100%;
}
.mission-pillar-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
  border-color: var(--green-light);
}
.mission-pillar-icon {
  width: 72px;
  height: 72px;
  background: var(--green-pale);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 1.8rem;
  color: var(--green-dark);
  transition: background var(--transition), transform var(--transition);
}
.mission-pillar-card:hover .mission-pillar-icon {
  background: var(--green-light);
  transform: scale(1.1) rotate(-5deg);
}
.mission-pillar-card h3 { margin-bottom: 12px; font-size: 1.2rem; }
.mission-pillar-card p  { color: var(--text-muted); font-size: 0.93rem; }


/* ── 12. IMPACT STATS BAR ──────────────────────────────────── */
.impact-section {
  background: linear-gradient(135deg, var(--green-dark) 0%, #1a4a35 100%);
  color: var(--white);
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}
/* Subtle leaf pattern overlay */
.impact-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.impact-stat {
  text-align: center;
  padding: 20px 16px;
  position: relative;
}
.impact-stat + .impact-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: rgba(255,255,255,0.15);
}
.impact-icon {
  font-size: 2.2rem;
  margin-bottom: 10px;
  color: var(--green-light);
  display: block;
}
.impact-number {
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  color: var(--white);
  display: block;
}
.impact-number .impact-plus {
  color: var(--green-light);
}
.impact-label {
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255,255,255,0.72);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 6px;
  display: block;
}


/* ── 13. OUR DIVISIONS (COMMITTEE CARDS) ───────────────────── */
.divisions-section { background: var(--bg); }

.division-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  height: 100%;
  display: flex;
  flex-direction: column;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.division-card:hover {
  transform: translate3d(0, -8px, 0);
  box-shadow: var(--shadow-lg);
}

.division-card-img-wrap {
  overflow: hidden;
  aspect-ratio: 4/3;
  position: relative;
  transform: translateZ(0);
}
.division-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  will-change: transform;
}
.division-card:hover .division-card-img { transform: translateZ(0) scale(1.07); }

/* Category badge on image */
.division-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--green-dark);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 50px;
}

.division-card-body {
  padding: 22px 24px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.division-card-icon {
  width: 44px;
  height: 44px;
  background: var(--green-pale);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-dark);
  font-size: 1.1rem;
  margin-bottom: 14px;
  transition: background var(--transition);
}
.division-card:hover .division-card-icon { background: var(--green-light); }

.division-card-title {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  position: relative;
  display: inline-block;
}
.division-card-title::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--green-mid);
  transition: width var(--transition);
  border-radius: 2px;
}
.division-card:hover .division-card-title::after { width: 100%; }

.division-card p {
  font-size: 0.88rem;
  color: var(--text-muted);
  flex: 1;
  margin-bottom: 16px;
}
.division-card-link {
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--green-dark);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--transition), color var(--transition);
}
.division-card-link:hover {
  color: var(--green-mid);
  gap: 10px;
}


/* ── 14. RIVER INITIATIVE CALLOUT ──────────────────────────── */
.river-callout {
  position: relative;
  padding: 100px 0;
  background: var(--bg-dark);
  overflow: hidden;
}
.river-callout-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
}
.river-callout-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(27,58,45,0.92) 0%, rgba(45,106,79,0.75) 100%);
}
.river-callout-content {
  position: relative;
  z-index: 2;
  color: var(--white);
  text-align: center;
}
.river-callout-tag {
  display: inline-block;
  background: var(--green-mid);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 50px;
  margin-bottom: 20px;
}
.river-callout h2 { color: var(--white); margin-bottom: 16px; }
.river-callout p  { color: rgba(255,255,255,0.82); max-width: 600px; margin: 0 auto 28px; }


/* ── 15. YOUTUBE VIDEO FACADE ──────────────────────────────── */
.video-section { background: var(--green-pale); }

.yt-facade-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  aspect-ratio: 16/9;
}
.yt-facade-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.yt-facade-wrap:hover img { transform: scale(1.03); }

/* Dark overlay on facade */
.yt-facade-overlay {
  position: absolute;
  inset: 0;
  background: rgba(27, 58, 45, 0.4);
  transition: background var(--transition);
}
.yt-facade-wrap:hover .yt-facade-overlay {
  background: rgba(27, 58, 45, 0.55);
}

/* Play button */
.yt-play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 5;
}
.yt-play-btn .play-circle {
  width: 80px;
  height: 80px;
  background: rgba(255,255,255,0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.yt-play-btn .play-circle i {
  font-size: 1.8rem;
  color: var(--green-dark);
  margin-left: 4px; /* optical centre for play triangle */
  transition: color var(--transition);
}
.yt-facade-wrap:hover .play-circle {
  transform: scale(1.12);
  background: var(--white);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.yt-facade-wrap:hover .play-circle i { color: var(--green-mid); }

/* When the iframe is loaded, remove facade styles */
.yt-facade-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Video section caption */
.video-caption { margin-top: 20px; }
.video-caption h3 { font-size: 1.3rem; margin-bottom: 6px; }
.video-caption p  { color: var(--text-muted); font-size: 0.93rem; }


/* ── 16. AWARDS & RECOGNITION ──────────────────────────────── */
.awards-section { background: var(--white); }

.award-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 24px;
  background: var(--bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--green-pale);
  border-left: 4px solid var(--green-mid);
  transition: transform var(--transition), box-shadow var(--transition), border-left-color var(--transition);
  height: 100%;
}
.award-card:hover {
  transform: translateX(5px);
  box-shadow: var(--shadow-md);
  border-left-color: var(--green-dark);
}
.award-photo-wrap {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
}
.award-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.award-card:hover .award-photo-wrap img { transform: scale(1.1); }
.award-trophy-icon {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  background: var(--earth-light);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--earth);
}
.award-info h4  { font-size: 0.95rem; margin-bottom: 4px; }
.award-info p   { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 0; line-height: 1.5; }
.award-year {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--green-dark);
  color: var(--white);
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
}

/* Awards carousel — 4 award cards per slide (2x2 grid), paged with Swiper */
.awards-swiper {
  padding-bottom: 50px;
}
.awards-swiper .swiper-slide {
  height: auto;
}
.awards-swiper .swiper-pagination-bullet {
  background: var(--green-mid);
  opacity: 0.4;
  width: 9px;
  height: 9px;
  transition: background var(--transition), width var(--transition), opacity var(--transition);
}
.awards-swiper .swiper-pagination-bullet-active {
  background: var(--green-dark);
  opacity: 1;
  width: 24px;
  border-radius: 5px;
}
.awards-swiper .swiper-button-next,
.awards-swiper .swiper-button-prev {
  top: 45%;
  width: 40px;
  height: 40px;
  background: var(--white);
  border: 1px solid var(--green-pale);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  color: var(--green-dark);
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.awards-swiper .swiper-button-next::after,
.awards-swiper .swiper-button-prev::after {
  font-size: 0.9rem;
  font-weight: 700;
}
.awards-swiper .swiper-button-next:hover,
.awards-swiper .swiper-button-prev:hover {
  background: var(--green-dark);
  color: var(--white);
  box-shadow: var(--shadow-md);
}
.awards-swiper .swiper-button-next.swiper-button-disabled,
.awards-swiper .swiper-button-prev.swiper-button-disabled {
  opacity: 0.25;
  cursor: default;
}
@media (max-width: 767.98px) {
  .awards-swiper .swiper-button-next,
  .awards-swiper .swiper-button-prev {
    display: none;
  }
}


/* ── 17. LATEST ACTIVITIES (EVENT CARDS) ───────────────────── */
.activities-section { background: var(--bg); }

.pmm-event-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.pmm-event-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.event-card-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
}
.event-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.pmm-event-card:hover .event-card-img-wrap img { transform: scale(1.06); }

/* Date badge overlay */
.event-date-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--green-dark);
  color: var(--white);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  text-align: center;
  min-width: 52px;
  line-height: 1.2;
}
.event-date-badge .day  { display: block; font-family: var(--font-head); font-size: 1.4rem; font-weight: 800; }
.event-date-badge .mon  { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.85; }

/* Committee tag */
.event-committee-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--green-pale);
  color: var(--green-dark);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 50px;
  margin-bottom: 10px;
}

.event-card-body {
  padding: 20px 22px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.event-card-title {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.35;
  transition: color var(--transition);
}
.pmm-event-card:hover .event-card-title { color: var(--green-dark); }

.event-card-meta {
  font-size: 0.82rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
}
.event-card-excerpt {
  font-size: 0.88rem;
  color: var(--text-muted);
  flex: 1;
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.event-read-more {
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--green-dark);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--transition), color var(--transition);
}
.event-read-more:hover { color: var(--green-mid); gap: 10px; }

/* Placeholder event card skeleton */
.event-card-placeholder .event-card-img-wrap {
  background: linear-gradient(135deg, var(--green-pale), var(--green-light));
  display: flex;
  align-items: center;
  justify-content: center;
}
.event-card-placeholder .event-card-img-wrap i {
  font-size: 2.5rem;
  color: var(--green-dark);
  opacity: 0.3;
}


/* ── 18. DONATION CTA SECTION ──────────────────────────────── */
.donate-section {
  position: relative;
  padding: 100px 0;
  background: var(--bg-dark);
  overflow: hidden;
}
.donate-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.25;
}
.donate-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(27,58,45,0.96) 0%, rgba(45,106,79,0.88) 100%);
}
.donate-content {
  position: relative;
  z-index: 2;
  color: var(--white);
  text-align: center;
}
.donate-content h2  { color: var(--white); margin-bottom: 10px; }
.donate-content p   { color: rgba(255,255,255,0.82); max-width: 520px; margin: 0 auto 36px; }

.qr-card {
  display: inline-block;
  background: var(--white);
  padding: 24px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition), box-shadow var(--transition);
  text-align: center;
  max-width: 260px;
  margin: 0 auto;
}
.qr-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 0 4px var(--green-mid), var(--shadow-lg);
}
.qr-card img {
  width: 160px;
  height: 160px;
  margin: 0 auto 14px;
}
.qr-upi-id {
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--green-dark);
  margin-bottom: 8px;
}
.qr-80g-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.qr-80g-note strong { color: var(--green-dark); }

.donate-80g-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(183, 228, 199, 0.15);
  border: 1px solid rgba(183, 228, 199, 0.3);
  color: var(--green-light);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 8px 20px;
  border-radius: 50px;
  margin-bottom: 28px;
}


/* ── 19. GALLERY STRIP ─────────────────────────────────────── */
.gallery-strip-section { background: var(--white); }

.gallery-strip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 200px);
  gap: 10px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* First item spans 2 rows */
.gallery-strip-grid .gallery-item:first-child {
  grid-row: span 2;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.gallery-item:hover img { transform: scale(1.1); }

.gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(27,58,45,0.75) 0%, transparent 50%);
  opacity: 0;
  transition: opacity var(--transition);
  display: flex;
  align-items: flex-end;
  padding: 14px;
}
.gallery-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-item-overlay span {
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}


/* ── 20. CONTACT STRIP ─────────────────────────────────────── */
.contact-strip { background: var(--bg); border-top: 1px solid var(--green-pale); }

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}
.contact-info-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: var(--green-pale);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-dark);
  font-size: 1rem;
  transition: background var(--transition), transform var(--transition);
}
.contact-info-item:hover .contact-info-icon {
  background: var(--green-light);
  transform: scale(1.1);
}
.contact-info-text strong { display: block; font-size: 0.82rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px; }
.contact-info-text a, .contact-info-text span { font-size: 0.95rem; color: var(--text); }
.contact-info-text a:hover { color: var(--green-dark); }

.map-embed {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.map-embed iframe {
  width: 100%;
  height: 300px;
  border: none;
  display: block;
}


/* ── 21. FOOTER ────────────────────────────────────────────── */
.site-footer { background: var(--bg-dark); color: rgba(255,255,255,0.75); }

.footer-main {
  padding: 64px 0 40px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand img   { height: 48px; margin-bottom: 14px; min-width: 15rem; }
.footer-brand p     { font-size: 0.88rem; line-height: 1.7; max-width: 280px; }
.footer-brand-gu    { font-family: var(--font-gujarati); font-size: 0.85rem; color: var(--green-light); margin-top: 4px; }

.footer-col h5 {
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--white);
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li + li { margin-top: 8px; }
.footer-col ul li a {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.65);
  transition: color var(--transition), padding-left var(--transition);
  display: inline-block;
}
.footer-col ul li a:hover {
  color: var(--green-light);
  padding-left: 4px;
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  font-size: 0.9rem;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.footer-social a:hover {
  background: var(--green-mid);
  color: var(--white);
  transform: translateY(-3px);
}

/* Footer bottom bar: tagline + credits */
.footer-bottom {
  background: rgba(0,0,0,0.2);
  padding: 14px 0;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
}
.footer-tagline { font-style: italic; color: var(--green-light); opacity: 0.9; }
.footer-credit-developer {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--green-mid);
  transition: color var(--transition);
}
.footer-credit-developer:hover { color: var(--green-light); }


/* ── 22. PAGE TRANSITIONS & GLOBAL ANIMATIONS ──────────────── */
/* Used with AOS — override defaults for a nature feel */
[data-aos] { will-change: transform, opacity; }

/* Stagger helper classes (used in JS via data-aos-delay) */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }

/* Pulse glow — used on impact numbers after CountUp finishes */
@keyframes pulseGlow {
  0%, 100% { text-shadow: none; }
  50% { text-shadow: 0 0 20px rgba(183, 228, 199, 0.5); }
}
.impact-number.counted { animation: pulseGlow 1.5s ease 3; }


/* ── 23. RESPONSIVE BREAKPOINTS ────────────────────────────── */

/* Tablet (≤ 991px) */
@media (max-width: 991px) {
  .section-pad    { padding: 64px 0; }
  .hero-swiper    { height: 75vh; }
  .hero-content   { padding: 0 5vw; }

  /* Hide floating social sidebar on tablets and below */
  .social-sidebar { display: none; }

  .impact-stat + .impact-stat::before { display: none; }
  .gallery-strip-grid { grid-template-rows: repeat(2, 160px); }

  .footer-main { padding: 48px 0 32px; }
}

/* Mobile (≤ 767px) */
@media (max-width: 767px) {
  .section-pad    { padding: 48px 0; }
  .section-pad-sm { padding: 36px 0; }
  .hero-swiper    { height: 88vh; min-height: 480px; }

  .hero-title     { font-size: 1.9rem; }
  .hero-sub       { font-size: 0.92rem; }
  .hero-ctas      { gap: 10px; }

  /* Impact stats: 2-col grid on mobile */
  .impact-stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .impact-stat      { border-bottom: 1px solid rgba(255,255,255,0.1); }

  /* Division cards: 1-col on small mobile */
  .gallery-strip-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 140px);
  }
  .gallery-strip-grid .gallery-item:first-child { grid-row: span 1; }

  .donate-section { padding: 72px 0; }

  /* Footer: stack columns */
  .footer-col { margin-bottom: 28px; }
  .footer-bottom .d-flex { flex-direction: column; text-align: center; gap: 6px; }

  .brand-gu { display: none; } /* hide on very small screens */
}

/* Very small (≤ 380px) */
@media (max-width: 380px) {
  .hero-swiper  { height: 95vh; }
  .btn-pmm, .btn-pmm-outline { padding: 10px 20px; font-size: 0.88rem; }
}