/* E:\trust_website\style.css */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&family=Marcellus&family=Noto+Serif+Devanagari:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');

:root {
  /* Premium Divine Temple-inspired Theme Colors */
  --primary: #F57C00;     /* Sacred Fire Orange */
  --secondary: #E65100;   /* Deep Saffron */
  --saffron: #E65100;     /* Deep Saffron */
  --gold: #D4AF37;        /* Temple Gold */
  --gold-light: #E6C77A;  /* Soft Gold */
  --gold-dark: #A4801B;   /* Dark Gold */
  --gold-glow: rgba(212, 175, 55, 0.15);
  
  /* Orange and Saffron variations for UI compatibility */
  --orange: #F57C00;
  --orange-light: #FF9800;
  --orange-dark: #E65100;
  --orange-glow: rgba(245, 124, 0, 0.15);
  
  --maroon: #E65100;
  --maroon-light: #FF7043;
  --maroon-dark: #BF360C;
  
  --light-orange: #FFB74D;
  --light-orange-soft: #FFE082;

  --bg: #FFFFFF;          /* Pure White */
  --bg-alt: #FFF8E7;      /* Warm Cream */
  --heading-color: #E65100; /* Deep Saffron */
  --text-color: #4A3520;    /* Text: #4A3520 */
  --text-muted: rgba(74, 53, 32, 0.7);
  
  --panel-bg: #FFFFFF;    /* White Cards */
  --panel-border: #D4AF37; /* Thin Gold border */
  
  --radius-lg: 18px;      /* Cards border radius */
  --radius-md: 12px;      /* Buttons border radius */
  --radius-sm: 8px;
  
  --shadow: 0 10px 30px rgba(74, 53, 32, 0.05);
  --shadow-hover: 0 15px 35px rgba(212, 175, 55, 0.12), 0 0 15px rgba(212, 175, 55, 0.08);
  
  --warm-ivory: #FFF8E7;

  /* Typography */
  --font-heading: 'Cinzel Decorative', 'Marcellus', 'Times New Roman', serif;
  --font-serif: 'Marcellus', 'Times New Roman', serif;
  --font-sans: 'Poppins', 'Noto Serif Devanagari', system-ui, sans-serif;
}

/* Card overrides to display dark text on White background */
.panel, .upcoming-card, .dev-card, .dev-card-micro, .hero-card, .glossary-card {
  color: var(--text-color);
  background: var(--panel-bg);
  border: 1px solid var(--gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s ease;
}

.panel:hover, .upcoming-card:hover, .dev-card:hover, .dev-card-micro:hover, .hero-card:hover, .glossary-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold-light);
  box-shadow: var(--shadow-hover);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  color: var(--text-color);
  background-color: #FFFDF8;
  background-image: linear-gradient(rgba(255, 248, 231, 0.97), rgba(255, 248, 231, 0.97)), url("images/mandala.svg");
  background-size: 240px 240px;
  background-repeat: repeat;
  line-height: 1.7;
  overflow-x: hidden;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: var(--radius-sm);
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gold-light);
}

a {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

img {
  display: block;
  width: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}



.container {
  width: min(1200px, calc(100% - 3rem));
  margin: 0 auto;
}

/* Section styling with subtle repeating mandala watermark pattern */
.section {
  padding: 2.8rem 0;
  position: relative;
  background: transparent;
}

/* Offset anchor-scroll targets so the fixed topbar doesn't cover the heading */
#home, #about, #events, #gallery, #members, #contact {
  scroll-margin-top: 90px;
}

@media (max-width: 768px) {
  #home, #about, #events, #gallery, #members, #contact {
    scroll-margin-top: 140px;
  }
}

@media (max-width: 600px) {
  #home, #about, #events, #gallery, #members, #contact {
    scroll-margin-top: 200px;
  }
}

/* Alternate sections background: Ivory Warmth with watermark */
.section:nth-of-type(even) {
  background: rgba(255, 252, 245, 0.4);
}

/* Headings styling */
h1, h2, h3, h4, .brand, .cursive-font {
  font-family: var(--font-heading);
  color: var(--heading-color);
}

.section-heading {
  margin-bottom: 2.2rem;
  text-align: center;
  position: relative;
}

.section-heading h2 {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  color: var(--heading-color);
  margin-bottom: 0.5rem;
  position: relative;
  display: inline-block;
  text-shadow: 0 1px 4px rgba(122, 12, 12, 0.05);
}

/* Underline design for headings (gold divider style) */
.section-heading h2::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--gold) 50%, var(--secondary) 100%);
  border-radius: 999px;
}

.section-heading p {
  color: var(--text-color);
  opacity: 0.85;
  font-size: 1.1rem;
  max-width: 60ch;
  margin: 0.8rem auto 0;
  font-family: var(--font-sans);
}

/* Glassmorphism Panel styles */
.panel {
  background: var(--panel-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  opacity: 0;
  transition: opacity 0.4s ease;
}

.panel:hover::before {
  opacity: 1;
}

.panel:hover {
  transform: translateY(-6px);
  border-color: var(--gold-light);
  box-shadow: var(--shadow-hover);
}

/* Navigation bar */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(85, 14, 14, 0.88); /* Solid/translucent maroon with 88% opacity for perfect readability */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.45);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transition: background 0.5s ease, backdrop-filter 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

.topbar.scrolled-glass {
  background: rgba(90, 15, 15, 0.94); /* Glass Maroon */
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.55);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
}

.topbar.scrolled-solid {
  background: #651515; /* Solid Maroon */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 2px solid #D4AF37;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 32px; /* 32px padding on extreme edges */
  width: 100%;
  max-width: 100%;
}

.brand {
  font-size: 1.6rem;
  font-weight: 700;
  color: #FFFFFF; /* High contrast White */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.3s ease, transform 0.3s ease;
}

.brand:hover {
  color: var(--primary); /* Sacred Fire Orange (#F57C00) */
  transform: scale(1.02);
}

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

.nav-links a {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: #FFFFFF; /* High contrast White */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  position: relative;
  padding: 0.3rem 0;
  transition: color 0.35s cubic-bezier(0.16, 1, 0.3, 1), text-shadow 0.35s ease;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold); /* Temple Gold */
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.35s ease;
}

.nav-links a:hover {
  color: var(--primary); /* Sacred Fire Orange (#F57C00) */
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-links a.active {
  color: #FFE082 !important; /* Premium Gold active highlight */
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}

.nav-links a.active::after {
  width: 100% !important;
  background: linear-gradient(90deg, #D4AF37, #FFE082) !important;
}

/* ==========================================================================
   FULLSCREEN CINEMATIC DEVOTIONAL HERO SECTION (100VH)
   ========================================================================== */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 650px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Fullscreen Background Carousel */
.hero-carousel-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
}

.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform-origin: center center;
  will-change: transform;
}

/* Ken Burns Pan & Zoom Animations for Active Slides */
.hero-slide.active .kenburns-1 {
  animation: kenburns-zoom-in 16s ease-in-out infinite alternate;
}
.hero-slide.active .kenburns-2 {
  animation: kenburns-pan-left 16s ease-in-out infinite alternate;
}
.hero-slide.active .kenburns-3 {
  animation: kenburns-pan-right 16s ease-in-out infinite alternate;
}
.hero-slide.active .kenburns-4 {
  animation: kenburns-zoom-out 16s ease-in-out infinite alternate;
}
.hero-slide.active .kenburns-5 {
  animation: kenburns-zoom-pan 16s ease-in-out infinite alternate;
}

@keyframes kenburns-zoom-in {
  0% { transform: scale(1) translate3d(0, 0, 0); }
  100% { transform: scale(1.15) translate3d(0, -10px, 0); }
}

@keyframes kenburns-pan-left {
  0% { transform: scale(1.08) translate3d(15px, 0, 0); }
  100% { transform: scale(1.15) translate3d(-15px, 0, 0); }
}

@keyframes kenburns-pan-right {
  0% { transform: scale(1.12) translate3d(-15px, -5px, 0); }
  100% { transform: scale(1.05) translate3d(15px, 5px, 0); }
}

@keyframes kenburns-zoom-out {
  0% { transform: scale(1.18) translate3d(0, 0, 0); }
  100% { transform: scale(1.02) translate3d(0, 10px, 0); }
}

@keyframes kenburns-zoom-pan {
  0% { transform: scale(1.05) translate3d(-10px, 10px, 0); }
  100% { transform: scale(1.16) translate3d(10px, -10px, 0); }
}

/* Devotional Overlay: Warm Temple Lighting Effect */
.hero-devotional-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      rgba(20, 8, 5, 0.20),
      rgba(20, 8, 5, 0.13)
    ),
    linear-gradient(
      rgba(212, 175, 55, 0.08),
      rgba(232, 122, 31, 0.05)
    );
}

/* Corner & Background Decorations */
/* Corner & Background Decorations */
.hero-decor {
  position: absolute;
  pointer-events: none;
  z-index: 3;
}

/* Symmetrical Mandalas (Background Watermarks) */
.decor-mandala-topleft {
  top: -60px;
  left: -60px;
  width: 320px;
  height: 320px;
  opacity: 0.07;
}

.decor-mandala-topright {
  top: -60px;
  right: -60px;
  width: 320px;
  height: 320px;
  opacity: 0.07;
}

.decor-mandala-topleft img,
.decor-mandala-topright img {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.3));
}

/* Top Left & Right Temple Bells (Synchronized Continuous Ringing Animation) */
.decor-bell-topleft,
.decor-bell-topright {
  top: 70px;
  width: 50px;
  height: auto;
  z-index: 4;
  transform-origin: top center;
  animation: sway-temple-bell 2.8s ease-in-out infinite alternate;
}

.decor-bell-topleft {
  left: 5%;
}

.decor-bell-topright {
  right: 5%;
}

.decor-bell-topright img,
.decor-bell-topleft img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.65));
}

@keyframes sway-temple-bell {
  0% { transform: rotate(-8deg); }
  100% { transform: rotate(8deg); }
}



.decor-temple-bottom {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1200px;
  height: 120px;
  opacity: 0.05;
  object-fit: contain;
  object-position: bottom center;
}

.decor-temple-bottom img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

/* Glassmorphism Content Card */
.hero-content-wrapper {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1200px;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

.hero-glass-card {
  position: relative;
  isolation: isolate;
  overflow: visible;
  width: 720px;
  max-width: 100%;
  /* No glass at all: no tint, no blur, no border and no shadow, so the
     background photograph behind the hero stays completely sharp and is
     never covered by a visible card. Readability comes purely from the
     feathered gradient veil in ::before plus the text shadows below. */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 28px;
  box-shadow: none;
  padding: 50px 45px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease-out;
  will-change: transform;
}

/* Readability veil: a very subtle dark gradient that sits only behind the
   text area and fades completely to transparent well before its edges, so
   it never reads as a card. It darkens nothing but the immediate text bed. */
.hero-glass-card::before {
  content: '';
  position: absolute;
  inset: -4% -10%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 48%,
    rgba(16, 6, 3, 0.38) 0%,
    rgba(16, 6, 3, 0.30) 35%,
    rgba(16, 6, 3, 0.16) 58%,
    rgba(16, 6, 3, 0.05) 74%,
    rgba(16, 6, 3, 0) 86%
  );
}

@keyframes hero-glass-shine {
  0% { left: -35%; }
  35% { left: 130%; }
  100% { left: 130%; }
}

/* Staggered Timeline Animation System */
.animate-item {
  opacity: 0;
  animation: hero-fade-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes hero-fade-up {
  0% {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Trust Logo Styling (Fade + Scale) */
.hero-logo-box {
  margin-bottom: 12px;
}

.hero-logo-box.animate-item {
  animation: hero-fade-scale 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--delay, 0.4s);
}

@keyframes hero-fade-scale {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.hero-trust-logo {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #D4AF37;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
}

/* Heading Styling */
.hero-main-title {
  font-family: 'Noto Sans Devanagari', 'Poppins', sans-serif;
  font-size: clamp(36px, 4.5vw, 62px);
  font-weight: 800;
  line-height: 1.22;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Golden-orange luminous identity shared with the navigation brand name,
   lifted brighter into warm gold / cream so the heading reads clearly against
   the unblurred photograph. Uses drop-shadow (not text-shadow) so both the
   dark contrast shadow and the golden glow sit behind the rendered gradient
   instead of bleeding through the transparent glyph fill. */
.title-line-1,
.title-line-2 {
  background: linear-gradient(
    90deg,
    #F9A825 0%,
    #FFC85C 20%,
    #FFE9A8 42%,
    #FFFBEE 50%,
    #FFE9A8 58%,
    #FFC85C 80%,
    #F9A825 100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer-anim 5s linear infinite;
  display: block;
}

.title-line-1 {
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 700;
  letter-spacing: 0.5px;
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 12px rgba(255, 205, 110, 0.38));
}

/* "महामंगलपाठ" — the focal line: a touch warmer and brighter, with a refined
   two-stage golden-orange glow (tight halo + wide soft bloom). */
.title-line-2 {
  font-size: clamp(38px, 5.2vw, 68px);
  font-weight: 800;
  letter-spacing: 1px;
  background: linear-gradient(
    90deg,
    #F59300 0%,
    #FFBE4D 18%,
    #FFE39A 42%,
    #FFFDF4 50%,
    #FFE39A 58%,
    #FFBE4D 82%,
    #F59300 100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  filter:
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 10px rgba(255, 190, 90, 0.5))
    drop-shadow(0 0 26px rgba(240, 152, 48, 0.32));
}

/* Subtitle Styling */
.hero-subtitle {
  font-family: 'Noto Sans Devanagari', 'Poppins', sans-serif;
  color: #FFFFFF;
  font-size: clamp(14px, 1.8vw, 19px);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 14px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 2px 12px rgba(0, 0, 0, 0.45);
}

/* Description */
.hero-description {
  color: #FFFAF0; /* Bright warm white */
  font-size: 18px;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto 24px;
  opacity: 1;
  font-weight: 400;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Buttons Row */
.hero-btn-row {
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

/* Primary Button (Gold) */
.btn-primary-gold {
  background: linear-gradient(135deg, #D4AF37 0%, #F5C242 50%, #B8860B 100%);
  color: #4A0A0A;
  border: 1px solid #FFE082;
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}

.btn-primary-gold .btn-icon-arrow {
  transition: transform 0.3s ease;
  font-size: 14px;
}

.btn-primary-gold:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 35px rgba(212, 175, 55, 0.75), 0 0 20px rgba(232, 122, 31, 0.5);
}

.btn-primary-gold:hover .btn-icon-arrow {
  transform: translateX(6px);
}

/* Secondary Button (Transparent Golden Border -> Filled Maroon) */
.btn-secondary-trans {
  background: transparent;
  color: #FFF9EF;
  border: 1.5px solid #D4AF37;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-secondary-trans:hover {
  background: #651515;
  color: #FFF9EF;
  border-color: #D4AF37;
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(101, 21, 21, 0.6), 0 0 15px rgba(212, 175, 55, 0.3);
}

/* Statistics Counters Row */
.hero-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  width: 100%;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 230, 180, 0.25);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 12px 10px;
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 16px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-item:hover {
  background: rgba(255, 244, 224, 0.16);
  border-color: rgba(212, 175, 55, 0.55);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.stat-icon {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 2px;
}

.stat-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.hero-stats-row .stat-number,
.hero-stats-row .stat-text {
  font-size: 20px;
  font-weight: 800;
  color: #FFE082;
  font-family: 'Poppins', sans-serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65), 0 2px 8px rgba(0, 0, 0, 0.5);
  line-height: 1.25;
}

.hero-stats-row .stat-label {
  font-size: 12px;
  color: #FFF9EF;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65), 0 1px 6px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

/* Scroll Indicator (Bottom Center) */
.hero-scroll-indicator {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  text-align: center;
}

.hero-scroll-indicator a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: #FFF9EF;
  transition: opacity 0.3s ease;
}

.hero-scroll-indicator a:hover {
  opacity: 0.8;
}

.scroll-text {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  color: #D4AF37;
}

.scroll-arrows {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 28px;
  overflow: hidden;
}

.scroll-arrows .arrow {
  font-size: 14px;
  color: #D4AF37;
  line-height: 10px;
  animation: scroll-bounce 1.8s infinite;
}

.scroll-arrows .arrow-1 { animation-delay: 0s; }
.scroll-arrows .arrow-2 { animation-delay: 0.2s; }
.scroll-arrows .arrow-3 { animation-delay: 0.4s; }

@keyframes scroll-bounce {
  0% { opacity: 0; transform: translateY(-10px); }
  50% { opacity: 1; }
  100% { opacity: 0; transform: translateY(10px); }
}

.card-divider {
  display: flex;
  justify-content: center;
  margin: 0.5rem 0 1.5rem;
  width: 100%;
}

.card-divider img {
  width: 180px;
  height: auto;
  opacity: 0.8;
}

/* Interactive Buttons */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 2.2rem;
  border-radius: var(--radius-md); /* 12px border radius */
  font-weight: 600;
  font-family: var(--font-sans);
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px rgba(245, 124, 0, 0.2);
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--primary); /* Sacred Fire Orange */
  color: #FFFFFF;
  border: 1px solid var(--primary);
  box-shadow: 0 5px 15px rgba(245, 124, 0, 0.25);
}

.btn-primary:hover {
  background: var(--gold); /* Golden hover background */
  border-color: var(--gold);
  color: var(--text-color); /* Dark brown text */
  box-shadow: 0 8px 22px rgba(212, 175, 55, 0.3);
  transform: translateY(-3px);
}

.btn-secondary {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
  box-shadow: none;
}

.btn-secondary:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--text-color);
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(212, 175, 55, 0.3);
}

/* About Section */
.about-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  align-items: stretch;
}

.about-grid > .panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

.about-image {
  padding: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-image::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 1.5rem;
  background: linear-gradient(135deg, var(--primary), var(--gold));
  z-index: -1;
  opacity: 0.4;
  filter: blur(6px);
}

.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: transform 0.4s ease;
}

.about-image:hover img {
  transform: scale(1.03);
}

.about-text {
  justify-content: space-between;
}

.about-text h3 {
  color: var(--primary);
  font-size: 1.7rem;
  margin-bottom: 1rem;
}

.about-text p {
  color: var(--text-color);
  opacity: 0.9;
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
}

.about-text ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: auto;
}

.about-text li {
  color: var(--text-color);
  font-size: 1.1rem;
  font-family: var(--font-serif);
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.about-text li::before {
  content: '✦';
  color: var(--gold);
  font-size: 1.3rem;
}

/* Upcoming Events section */
.upcoming-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  background: var(--panel-bg);
  border: 1px solid var(--gold);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: all 0.5s ease;
}

.upcoming-card:hover {
  transform: translateY(-8px);
  border-color: var(--gold-light);
  box-shadow: var(--shadow-hover);
}

.upcoming-card img {
  height: 100%;
  min-height: 380px;
  object-fit: cover;
}

.upcoming-card:hover img {
  transform: scale(1.04);
}

.upcoming-info {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.upcoming-info h3 {
  font-size: 2.1rem;
  color: var(--primary);
  margin-bottom: 1rem;
}

.upcoming-info p {
  color: var(--text-color);
  opacity: 0.85;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

.upcoming-info .glow {
  color: var(--primary);
  font-weight: 700;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  padding: 0.6rem 1.2rem;
  background: rgba(183, 28, 28, 0.05);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  width: fit-content;
}

.hover-panel {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  background: var(--panel-bg);
  border: 1px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 1.2rem;
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  max-width: 300px;
  box-shadow: var(--shadow);
  z-index: 10;
}

.hover-panel strong {
  display: block;
  font-family: var(--font-serif);
  color: var(--secondary);
  font-size: 1.15rem;
  margin-bottom: 0.3rem;
}

.hover-panel p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.upcoming-card:hover .hover-panel {
  opacity: 1;
  transform: translateY(0);
}

/* Gallery Slider */
.gallery-wrapper {
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  position: relative;
  padding: 1rem 0;
  will-change: transform;
}

.gallery-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  will-change: transform;
}

.gallery-img {
  width: calc((100% - 4.5rem) / 4);
  flex: 0 0 calc((100% - 4.5rem) / 4);
  height: 320px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--gold);
  box-shadow: var(--shadow);
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  object-fit: cover;
  object-position: center;
  box-sizing: border-box;
}

.gallery-img:hover {
  transform: translateY(-8px);
  border-color: var(--gold-light);
  box-shadow: var(--shadow-hover);
}

/* Glossary and Dev connection */
.glossary-wrap {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2.5rem;
  align-items: stretch;
}

.glossary-card {
  background: #FFFFFF;
  border: 1px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 3rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.social-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.social-list a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: var(--radius-md);
  background: rgba(245, 124, 0, 0.02);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--text-color);
}

.social-list a span {
  font-size: 1.4rem;
  transition: transform 0.3s ease;
}

.social-list a:hover {
  background: var(--primary); /* Sacred Fire Orange */
  border-color: var(--primary);
  transform: translateY(-2px);
  color: #FFFFFF;
}

.social-list a:hover span {
  transform: scale(1.2) rotate(5deg);
}

.social-list .phone-btn {
  background: rgba(245, 124, 0, 0.06);
  border-color: rgba(245, 124, 0, 0.2);
  color: var(--secondary);
  font-family: var(--font-serif);
  font-size: 1.2rem;
}

.social-list .phone-btn:hover {
  background: var(--secondary);
  border-color: var(--secondary);
  color: #FFFFFF;
}

.dev-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--maroon) 0%, var(--orange) 100%);
  border: 1px solid var(--panel-border);
  color: #FFFFFF; /* Pure White text */
  padding: 3rem 2rem;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.dev-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--maroon-light) 0%, var(--orange-light) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.dev-btn-content {
  position: relative;
  z-index: 2;
}

.dev-btn .dev-tag {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--maroon);
  margin-bottom: 0.8rem;
  display: inline-block;
  font-weight: 700;
}

.dev-btn h3 {
  font-size: 2.2rem;
  color: var(--text);
  margin-bottom: 0.8rem;
  text-shadow: none;
}

.dev-btn p {
  color: var(--text-muted);
  max-width: 30ch;
  margin: 0 auto;
}

.dev-btn:hover {
  transform: translateY(-6px);
  border-color: rgba(128, 12, 37, 0.3);
  box-shadow: 0 30px 60px rgba(128, 12, 37, 0.1), 0 0 25px rgba(230, 81, 0, 0.05);
}

.dev-btn:hover::before {
  opacity: 1;
}

/* ==========================================================================
   PREMIUM DEVOTIONAL FOOTER (#footer)
   ========================================================================== */
.footer-devotional {
  position: relative;
  background: linear-gradient(180deg, #500C0C 0%, #3B0808 60%, #2A0505 100%);
  color: #FFF9EF;
  padding: 80px 0 56px;
  overflow: hidden;
  border-top: 2px solid #D4AF37;
  box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.4);
}

/* Subtle corner mandala artwork (~0.9% opacity) */
.footer-bg-mandala {
  position: absolute;
  width: 520px;
  height: 520px;
  opacity: 0.009;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.25));
}

.footer-bg-mandala.mandala-left {
  top: -140px;
  left: -160px;
  animation: slow-rotate 180s linear infinite;
}

.footer-bg-mandala.mandala-right {
  bottom: -140px;
  right: -160px;
  animation: slow-rotate 180s linear infinite reverse;
}

/* Extended Top Golden Decorative Divider */
.footer-top-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;
  margin-bottom: 3.8rem;
  position: relative;
  z-index: 2;
}

.footer-top-divider .footer-line {
  width: 240px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #D4AF37 50%, transparent);
}

.footer-top-divider .footer-diya-top {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 2px 10px rgba(232, 122, 31, 0.8));
  animation: pulse-diya-glow 3s ease-in-out infinite alternate;
}

.footer-main-container {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
}

/* 4-Column Sequential Fade-Up Animations */
@keyframes footerFadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.footer-col-stagger {
  animation: footerFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--stagger-delay, 0.1s);
}

/* 4-Column Responsive Grid Layout with Balanced Quick Links & Expanded Contact Column */
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.82fr 1.38fr 0.85fr;
  gap: 4.5rem;
  margin-bottom: 4rem;
}

.footer-col {
  display: flex;
  flex-direction: column;
}

/* Column 1: Brand & Logo (78px Logo, 350px Max-Width Description) */
.footer-brand-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 1.6rem;
}

.footer-logo {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #D4AF37;
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.45);
}

.footer-trust-name {
  font-family: 'Noto Sans Devanagari', 'Poppins', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: #FFF9EF;
  margin: 0;
  line-height: 1.3;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.footer-mission-text {
  color: rgba(255, 249, 239, 0.82);
  font-size: 0.94rem;
  line-height: 1.75;
  margin: 0;
  font-weight: 400;
  max-width: 350px;
}

/* Titles & Golden Underline Accent */
.footer-col-title {
  font-family: 'Noto Sans Devanagari', 'Poppins', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #D4AF37;
  margin: 0 0 8px 0;
  letter-spacing: 0.5px;
}

.footer-title-underline {
  width: 44px;
  height: 2px;
  background: linear-gradient(90deg, #D4AF37, transparent);
  margin-bottom: 1.5rem;
  border-radius: 2px;
}

/* Column 2: Quick Links with Golden Devotional Bullets & Hover Animation */
.footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.devotional-bullet {
  color: #D4AF37;
  font-size: 0.85rem;
  display: inline-block;
  transition: transform 0.3s ease, color 0.3s ease;
}

.footer-links-list li a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 249, 239, 0.82);
  text-decoration: none;
  font-size: 0.93rem;
  font-weight: 500;
  position: relative;
  padding-bottom: 2px;
  transition: all 0.3s ease;
}

.footer-links-list li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1.5px;
  background: linear-gradient(90deg, #D4AF37, transparent);
  transition: width 0.3s ease;
}

.footer-links-list li a:hover {
  color: #FFE082;
  transform: translateX(4px);
}

.footer-links-list li a:hover::after {
  width: 100%;
}

.footer-links-list li a:hover .devotional-bullet {
  transform: translateX(4px) scale(1.15);
  color: #FFF3C4;
}

/* Column 3: Contact Info with Soft 12px Glow & Single-Line URL */
.footer-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-contact-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(255, 249, 239, 0.82);
  font-size: 0.93rem;
  line-height: 1.5;
}

.footer-contact-list li .contact-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.45);
  color: #D4AF37;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.25);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.footer-contact-list li:hover .contact-icon {
  transform: scale(1.08);
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.45);
}

.footer-contact-list li a {
  color: rgba(255, 249, 239, 0.82);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-url-link {
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.92rem;
}

.footer-contact-list li a:hover {
  color: #D4AF37;
}

/* Column 4: Social Media Circular Buttons (Scale 1.08, Rotate 5°, Lift 5px) */
.footer-social-desc {
  color: rgba(255, 249, 239, 0.8);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 0 1.4rem 0;
}

.footer-social-icons {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-social-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid #D4AF37;
  color: #FFF9EF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  transition: all 0.35s ease;
}

.footer-social-btn:hover {
  transform: translateY(-5px) scale(1.08) rotate(5deg);
  background: #D4AF37;
  color: #500C0C;
  border-color: #FFF9EF;
  box-shadow: 0 8px 22px rgba(212, 175, 55, 0.5);
}

/* Devotional Phrase (Font Weight 700, 1px Letter Spacing) */
.footer-devotional-phrase {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;
  margin: 2.5rem 0 2rem;
}

.footer-devotional-phrase .phrase-line {
  flex: 1;
  max-width: 280px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5) 50%, transparent);
}

.footer-devotional-phrase .phrase-text {
  font-family: 'Noto Sans Devanagari', 'Poppins', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #D4AF37;
  margin: 0;
  letter-spacing: 1px;
  animation: dadi-glow-pulse 4s ease-in-out infinite;
}

@keyframes dadi-glow-pulse {
  0%, 100% {
    text-shadow: 0 2px 6px rgba(212, 175, 55, 0.3);
    color: #D4AF37;
  }
  50% {
    text-shadow: 0 4px 18px rgba(212, 175, 55, 0.75), 0 0 25px rgba(232, 122, 31, 0.45);
    color: #FFF3C4;
  }
}

/* Bottom Bar, Soft Golden 2026 Year & Developer Name Links */
.footer-bottom-bar {
  border-top: 1px solid rgba(212, 175, 55, 0.25);
  padding-top: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.copyright-text {
  color: rgba(255, 249, 239, 0.75);
  font-size: 0.9rem;
  margin: 0;
}

.copyright-gold {
  color: #D4AF37;
  font-weight: 700;
  font-family: var(--font-sans);
}

.trust-name-white {
  color: #FFF9EF;
  font-weight: 600;
}

.rights-reserved-subtle {
  color: rgba(255, 249, 239, 0.65);
  font-weight: 400;
}

.developer-credit-text {
  color: rgba(255, 249, 239, 0.85);
  font-size: 0.88rem;
  margin: 0;
}

.dev-prefix-white {
  color: rgba(255, 249, 239, 0.9);
  font-weight: 400;
}

.dev-amp {
  color: rgba(255, 249, 239, 0.7);
  margin: 0 2px;
}

.dev-name-link {
  color: #D4AF37;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  display: inline-block;
  position: relative;
  padding-bottom: 2px;
  transition: color 0.3s ease, text-shadow 0.3s ease;
  cursor: pointer;
}

.dev-name-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1.5px;
  background: #D4AF37;
  transition: width 0.3s ease;
}

.dev-name-link:hover {
  color: #FFF3C4;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.dev-name-link:hover::after {
  width: 100%;
}

/* Floating Scroll to Top Button (60px, Upward Arrow & Golden Hover Glow) */
.scroll-to-top-btn {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 9999;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #651515 0%, #3B0808 100%);
  color: #D4AF37;
  border: 1.5px solid #D4AF37;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 15px rgba(212, 175, 55, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: all 0.3s ease;
}

@keyframes btn-scroll-pulse {
  0%, 100% {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 15px rgba(212, 175, 55, 0.3);
  }
  50% {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 25px rgba(212, 175, 55, 0.6);
  }
}

.scroll-to-top-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  animation: btn-scroll-pulse 6s ease-in-out infinite;
}

.scroll-to-top-btn:hover {
  background: #D4AF37;
  color: #500C0C;
  border-color: #FFF9EF;
  box-shadow: 0 12px 30px rgba(212, 175, 55, 0.75), 0 0 25px rgba(232, 122, 31, 0.5);
  transform: translateY(-4px) scale(1.08);
}

/* Footer Responsive Breakpoints */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

@media (max-width: 640px) {
  .footer-devotional {
    padding: 3.5rem 0 1.8rem;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .footer-bottom-bar {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  .footer-devotional-phrase .phrase-line {
    max-width: 60px;
  }
  .scroll-to-top-btn {
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
  }
}

/* Developer cards details in developer.html */
.dev-container {
  width: min(1000px, calc(100% - 3rem));
  margin: 0 auto;
  padding: 4rem 0;
}

.dev-header {
  text-align: center;
  margin-bottom: 4rem;
}

.dev-header h1 {
  font-size: 3rem;
  color: var(--heading-color);
  margin-bottom: 0.8rem;
}

.dev-header p {
  color: var(--text-muted);
  font-size: 1.15rem;
}

.dev-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--primary);
  font-family: var(--font-serif);
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.dev-back-link:hover {
  color: var(--secondary);
  transform: translateX(-4px);
}

.dev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 2.5rem;
  justify-content: center;
}

.dev-card {
  background: var(--panel-bg);
  border: 1px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dev-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--gold));
  opacity: 0.8;
}

.dev-card:hover {
  transform: translateY(-8px);
  border-color: var(--gold-light);
  box-shadow: var(--shadow-hover);
}

.dev-profile {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 2rem;
  align-items: flex-start;
}

.dev-profile img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--gold);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  transition: transform 0.4s ease, border-color 0.4s ease;
}

.dev-card:hover .dev-profile img {
  transform: scale(1.05) rotate(3deg);
  border-color: var(--gold-light);
}

.dev-info h2 {
  font-size: 1.8rem;
  color: var(--heading-color);
  margin-bottom: 0.3rem;
}

.dev-info .pill {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: rgba(183, 28, 28, 0.05);
  border: 1px solid rgba(183, 28, 28, 0.15);
  color: var(--primary);
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 1.2rem;
}

.dev-info p {
  color: var(--text-color);
  opacity: 0.85;
  font-size: 1.05rem;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.dev-info p strong {
  color: var(--primary);
}

.dev-contact {
  margin-top: 1.5rem;
  border-top: 1px solid rgba(212, 175, 55, 0.15);
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.dev-contact a {
  color: var(--primary);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.dev-contact a:hover {
  color: var(--secondary);
  text-decoration: underline;
}

/* Responsiveness adjustments */
@media (max-width: 990px) {
  .decor-bell-topleft,
  .decor-bell-topright {
    top: 65px;
    width: 40px;
  }
  .decor-bell-topleft { left: 2.5%; }
  .decor-bell-topright { right: 2.5%; }
  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
  }
  .hero-glass-card {
    padding: 2.5rem;
  }
  .btn-row {
    justify-content: center;
  }
  .about-grid, .upcoming-card, .glossary-wrap {
    grid-template-columns: 1fr;
  }
  .about-image img {
    height: 380px;
  }
  .upcoming-card img {
    min-height: 300px;
  }
  .gallery-img {
    width: calc((100% - 1.5rem) / 2);
    flex: 0 0 calc((100% - 1.5rem) / 2);
    height: 280px;
  }
}

@media (max-width: 600px) {
  .decor-bell-topleft,
  .decor-bell-topright {
    top: 50px;
    width: 32px;
  }
  .decor-bell-topleft { left: 10px; }
  .decor-bell-topright { right: 10px; }
  .topbar-inner {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }
  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem;
  }
  .hero-glass-card {
    padding: 1.8rem 1.2rem 1.4rem;
  }
  .hero-main-title {
    font-size: 2.2rem;
  }
  .hero-stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding-top: 16px;
  }
  .hero-stats-row .stat-item {
    padding: 8px 6px;
    border-radius: 12px;
  }
  .hero-stats-row .stat-icon {
    font-size: 18px;
    margin-bottom: 0;
  }
  .hero-stats-row .stat-number,
  .hero-stats-row .stat-text {
    font-size: 17px;
  }
  .hero-stats-row .stat-label {
    font-size: 11px;
  }
  .hero-scroll-indicator {
    display: none;
  }
  .section {
    padding: 2.4rem 0;
  }
  .dev-grid {
    grid-template-columns: 1fr;
  }
  .gallery-img {
    width: 100%;
    flex: 0 0 100%;
    height: 250px;
  }
  .dev-profile {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .dev-profile img {
    margin: 0 auto 1.5rem;
  }
  .footer-inner {
    flex-direction: column;
    text-align: center;
  }
}

/* Brand Icon Colors */
.social-icon {
  font-size: 1.4rem;
  transition: transform 0.3s ease;
}
.facebook-color {
  color: #1877F2;
}
.instagram-color {
  color: #E1306C;
}
.youtube-color {
  color: #FF0000;
}
.email-color {
  color: #EA4335;
}

/* Floating YouTube Video Widget */
.floating-video-container {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  width: 200px;
  height: 350px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow), 0 0 20px var(--orange-glow);
  border: 1px solid rgba(201, 162, 39, 0.45);
  z-index: 1000;
  background: #000;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  aspect-ratio: 9/16;
}

.floating-video-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.floating-video-container .close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1002;
  transition: background 0.3s ease;
}

.floating-video-container .close-btn:hover {
  background: var(--orange-dark);
}

@media (max-width: 768px) {
  .floating-video-container {
    bottom: 1.5rem;
    left: 1.5rem;
    width: 130px;
    height: 230px;
  }
}

@media (max-width: 600px) {
  .floating-video-container {
    display: none;
  }
}

/* Brand & Hero Logo styles */
.brand-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--orange);
  box-shadow: 0 0 8px var(--orange-glow);
  transition: transform 0.3s ease;
}

.brand:hover .brand-logo {
  transform: rotate(15deg) scale(1.05);
  border-color: var(--light-orange);
}

.hero-logo-wrapper {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.8rem;
}

.hero-logo {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--orange);
  box-shadow: 0 0 15px var(--orange-glow);
  animation: logo-shimmer 4s ease-in-out infinite;
}

.hero-logo-wrapper .eyebrow {
  margin-bottom: 0;
}

@keyframes logo-shimmer {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 15px var(--orange-glow);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 0 22px rgba(255, 112, 67, 0.6);
  }
}

/* ==========================================================================
   REFINED CONTACT & DEVELOPERS SECTION (#contact)
   ========================================================================== */
.contact-section {
  position: relative;
  background-color: #FFFDF8;
  background-image: 
    radial-gradient(circle at 50% 30%, rgba(212, 175, 55, 0.06) 0%, transparent 65%),
    linear-gradient(rgba(255, 249, 239, 0.96), rgba(255, 249, 239, 0.96)),
    url("images/mandala.svg");
  background-size: 100% 100%, 100% 100%, 280px 280px;
  background-repeat: no-repeat, no-repeat, repeat;
  padding: 3.8rem 0 3.5rem;
  overflow: hidden;
}

/* Subtle corner mandala artwork (<5% opacity) */
.contact-bg-mandala {
  position: absolute;
  width: 420px;
  height: 420px;
  opacity: 0.035;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.3));
}

.contact-bg-mandala.mandala-left {
  top: -80px;
  left: -100px;
  animation: slow-rotate 160s linear infinite;
}

.contact-bg-mandala.mandala-right {
  bottom: -80px;
  right: -100px;
  animation: slow-rotate 160s linear infinite reverse;
}

/* Glass-like Social Contact Container */
.social-contact-container {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(212, 175, 55, 0.45);
  border-radius: 24px;
  padding: 2.5rem 2.8rem;
  box-shadow: 0 16px 45px rgba(101, 21, 21, 0.06), 0 0 25px rgba(212, 175, 55, 0.15);
  max-width: 1140px;
  margin: 2rem auto 2.5rem;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 2;
}

.social-contact-container:hover {
  background: rgba(255, 255, 255, 0.98);
  border-color: #D4AF37;
  box-shadow: 0 22px 55px rgba(101, 21, 21, 0.1), 0 0 35px rgba(212, 175, 55, 0.28);
}

.social-cards-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem;
  width: 100%;
}

.social-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 64px;
  padding: 0 26px;
  min-width: 175px;
  white-space: nowrap;
  background: #FFFDF8;
  border: 1.5px solid rgba(212, 175, 55, 0.4);
  border-radius: 16px;
  color: #2C1A1D;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.98rem;
  box-shadow: 0 4px 15px rgba(101, 21, 21, 0.04);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.social-card-btn:hover,
.social-card-btn:focus-visible {
  transform: translateY(-4px) scale(1.03);
  border-color: #D4AF37;
  background: #FFFFFF;
  box-shadow: 0 10px 28px rgba(212, 175, 55, 0.35), 0 0 15px rgba(212, 175, 55, 0.2);
  color: #651515;
}

.social-card-btn:focus-visible {
  outline: 2px solid #D4AF37;
  outline-offset: 3px;
}

.social-icon-wrapper {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.facebook-bg { background: rgba(24, 119, 242, 0.12); color: #1877F2; }
.instagram-bg { background: rgba(225, 48, 108, 0.12); color: #E1306C; }
.email-bg { background: rgba(234, 67, 53, 0.12); color: #EA4335; }
.youtube-bg { background: rgba(255, 0, 0, 0.12); color: #FF0000; }
.phone-bg { background: rgba(255, 255, 255, 0.25); color: #FFF9EF; }

.social-card-btn:hover .social-icon-wrapper {
  transform: scale(1.12) rotate(6deg);
}

.social-card-label {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* Phone Button Specifics - Exactly matching 64px height & Single-line phone text */
.phone-card-btn {
  height: 64px;
  padding: 0 28px;
  min-width: 220px;
  white-space: nowrap;
  background: linear-gradient(135deg, #D4AF37 0%, #E87A1F 100%);
  border: 1.5px solid #FFE082;
  color: #FFFFFF !important;
  animation: phone-pulse-glow 4s ease-in-out infinite;
}

.phone-card-btn .social-card-label {
  color: #FFFFFF;
  font-weight: 800;
  white-space: nowrap;
}

@keyframes phone-pulse-glow {
  0%, 100% {
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4), 0 0 0 0 rgba(232, 122, 31, 0.35);
  }
  50% {
    box-shadow: 0 8px 26px rgba(212, 175, 55, 0.6), 0 0 0 8px rgba(232, 122, 31, 0);
  }
}

.phone-card-btn:hover,
.phone-card-btn:focus-visible {
  background: linear-gradient(135deg, #E6C77A 0%, #E87A1F 100%);
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 12px 32px rgba(232, 122, 31, 0.6);
  border-color: #FFFFFF;
  color: #FFFFFF !important;
}

/* Trust Core Purpose & Resolutions Segment (Sankalp Cards) */
.sankalp-section-wrapper {
  margin-top: 1.5rem;
  position: relative;
  z-index: 2;
}

/* The segment now ends at the diya divider, so no trailing gap below it. */
.sankalp-heading-wrapper {
  text-align: center;
  margin-bottom: 0;
}

.sankalp-section-title {
  font-family: 'Noto Sans Devanagari', 'Poppins', sans-serif;
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  font-weight: 700;
  color: #651515;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.sankalp-title-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  /* small balanced gap below the diya so it closes the section cleanly */
  margin: 0.5rem auto 1rem;
}

.sankalp-title-divider .sankalp-line {
  width: 90px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #D4AF37 50%, transparent);
}

.sankalp-title-divider .sankalp-diya-icon {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 2px 4px rgba(232, 122, 31, 0.5));
}

/* Contact Responsive Breakpoints */
@media (max-width: 1024px) {
  .social-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .contact-section {
    padding: 2.8rem 0 2.5rem;
  }
  .social-contact-container {
    padding: 1.8rem 1.2rem;
    margin: 1.5rem auto 2rem;
  }
  .social-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 540px) {
  .social-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* Custom Divine Redesign Helper Styles */
.section-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.4rem 0;
  margin: 0;
  background: transparent;
  position: relative;
  z-index: 2;
}

.section-divider img {
  width: min(220px, 50vw);
  height: auto;
  opacity: 0.85;
}

.footer-ornament-container {
  background: transparent;
  padding: 1.5rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  border-top: 1px dashed rgba(212, 175, 55, 0.3);
}

.diya-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 0.5rem;
}

.footer-diya {
  width: 45px;
  height: 45px;
  animation: flicker-diya 1.5s infinite alternate;
}

.footer-lotus {
  width: 42px;
  height: 42px;
  animation: float-lotus 3s ease-in-out infinite alternate;
  opacity: 0.85;
}

@keyframes float-lotus {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-5px) scale(1.06); }
}

@keyframes flicker-diya {
  0%, 100% {
    transform: scale(1) rotate(-1deg);
    filter: drop-shadow(0 0 5px rgba(245, 124, 0, 0.6));
  }
  50% {
    transform: scale(1.05) rotate(1deg);
    filter: drop-shadow(0 0 12px rgba(230, 81, 0, 0.85));
  }
}

/* ==========================================================================
   ULTRA-PREMIUM UPCOMING EVENT SECTION (SHRI RANI SATI DADI JI)
   ========================================================================== */

.ultra-events-section {
  position: relative;
  background-color: #FFF8F0; /* Warm cream background */
  padding: 70px 0 62px 0;
  overflow: hidden;
  font-family: 'Noto Sans Devanagari', 'Hind', 'Poppins', sans-serif;
  animation: ultraFadeUp 1s ease-out forwards;
}

/* Ambient Golden Glow Effect */
.ultra-ambient-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75vw;
  height: 700px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.16) 0%, rgba(122, 31, 42, 0.05) 45%, rgba(255, 248, 240, 0) 75%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

/* Corner Watermarks (Mandala & Lotus) */
.ultra-watermark {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: 0.07;
  transition: opacity 0.5s ease;
}

.ultra-watermark img {
  width: 100%;
  height: 100%;
  filter: sepia(1) saturate(6) hue-rotate(5deg);
}

.watermark-top-left {
  top: -50px;
  left: -50px;
  width: 340px;
  height: 340px;
}

.watermark-top-right {
  top: -50px;
  right: -50px;
  width: 320px;
  height: 320px;
  transform: scaleX(-1);
}

.watermark-bottom-left {
  bottom: -50px;
  left: -50px;
  width: 320px;
  height: 320px;
  transform: scaleY(-1);
}

.watermark-bottom-right {
  bottom: -50px;
  right: -50px;
  width: 340px;
  height: 340px;
  transform: rotate(180deg);
}

/* Main Container */
.ultra-events-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header Section */
.ultra-section-header {
  text-align: center;
  margin-bottom: 55px;
}

.ultra-header-title {
  font-family: 'Noto Sans Devanagari', 'Hind', sans-serif;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 800;
  color: #7A1F2A; /* Maroon */
  letter-spacing: -0.5px;
  margin-bottom: 12px;
  text-shadow: 0 2px 10px rgba(122, 31, 42, 0.08);
}

.ultra-header-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 14px 0 20px 0;
}

.ultra-header-divider .ultra-line {
  height: 1.5px;
  width: 120px;
  background: linear-gradient(90deg, transparent, #D4AF37, transparent);
}

.ultra-lotus-icon {
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 2px 5px rgba(212, 175, 55, 0.45));
}

.ultra-header-subtitle {
  color: #7D5230; /* Light Brown */
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: 500;
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.8;
}

/* Main Card */
/* Background Temple Silhouette */
.ultra-bg-silhouette {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.04; /* 3-5% opacity */
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.ultra-bg-silhouette img {
  width: 75%;
  max-width: 850px;
  filter: sepia(1) saturate(3) hue-rotate(330deg);
}

.ultra-main-card {
  width: 84%; /* Increased overall width from 70% to 84% */
  max-width: 1280px;
  margin: 0 auto;
  background: linear-gradient(145deg, #FFFFFF 0%, #FFFDF8 100%);
  border-radius: 24px;
  border: 1.5px solid rgba(212, 175, 55, 0.45);
  box-shadow: 0 20px 50px rgba(212, 175, 55, 0.18);
  padding: 28px 36px; /* Reduced vertical height by 15-20px */
  display: grid;
  /* 44/56 split expressed in fr, not %. Percentages resolve against the full
     content box, so "44% + 56%" plus the 36px gap overflowed the card by
     exactly one gap and pushed the right column (and its info boxes) past the
     right padding. fr units divide the space that is left after the gap, so
     both columns stay inside the card with equal 36px insets on either side.
     minmax(0, …) stops long unbroken text from re-inflating a column. */
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  gap: 36px;
  align-items: center;
  position: relative;
  z-index: 2;
  overflow: hidden;
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Decorative Golden Top Accent Line */
.ultra-main-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 4%;
  right: 4%;
  height: 2.5px;
  background: linear-gradient(90deg, transparent, #D4AF37 25%, #F5D77F 50%, #D4AF37 75%, transparent);
  z-index: 3;
  border-radius: 2px;
  pointer-events: none;
}

.ultra-main-card:hover {
  box-shadow: 0 25px 60px rgba(212, 175, 55, 0.28);
  border-color: rgba(212, 175, 55, 0.7);
}

/* Special Poster Badge */
.poster-top-badge-wrapper {
  text-align: center;
  margin-bottom: 8px;
  width: 100%;
}

.poster-special-badge {
  display: inline-block;
  background: #7A1F2A;
  color: #FFFDF7;
  font-weight: 700;
  font-size: 1rem; /* slightly larger & more prominent */
  padding: 5px 18px;
  border-radius: 50px;
  border: 1px solid rgba(212, 175, 55, 0.6);
  box-shadow: 0 4px 12px rgba(122, 31, 42, 0.2);
  letter-spacing: 0.7px;
}

/* Left Side Image & Premium Golden Frame */
.ultra-card-left {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: ultraImageZoom 1s ease-out 0.2s backwards;
  will-change: transform, opacity;
}

.ultra-image-wrapper {
  position: relative;
  width: 100%;
  border-radius: 20px; /* 20px rounded corners */
  overflow: hidden;
  border: 2px solid #D4AF37; /* Thin golden frame 2px */
  box-shadow: 0 15px 35px rgba(212, 175, 55, 0.22), 0 5px 15px rgba(122, 31, 42, 0.1); /* Soft golden shadow */
  padding: 12px;
  background: rgba(122, 31, 42, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  will-change: transform;
}

.ultra-image-wrapper:hover {
  transform: scale(1.03); /* Hover zoom 1.03 */
  box-shadow: 0 22px 48px rgba(212, 175, 55, 0.38), 0 8px 20px rgba(122, 31, 42, 0.15); /* Stronger golden shadow */
  border-color: #F5D77F;
}

/* Subtle Golden Corner Ornaments */
.corner-ornament {
  position: absolute;
  color: #D4AF37;
  font-size: 0.9rem;
  line-height: 1;
  opacity: 0.85;
  z-index: 2;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(212, 175, 55, 0.5);
}

.corner-ornament.top-left { top: 6px; left: 8px; }
.corner-ornament.top-right { top: 6px; right: 8px; }
.corner-ornament.bottom-left { bottom: 6px; left: 8px; }
.corner-ornament.bottom-right { bottom: 6px; right: 8px; }

.ultra-event-image {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 14px;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: block;
}

/* Right Side Content */
.ultra-card-right {
  min-width: 0; /* keeps the column inside its grid track */
  display: flex;
  flex-direction: column;
  justify-content: center;
  animation: ultraSlideRight 1s ease-out 0.3s backwards;
  will-change: transform, opacity;
}

/* Badge sits a little lower and is centred so it reads as the top line of the
   heading group, with a small balanced gap down to the heading itself. */
.ultra-badge-wrapper {
  text-align: center;
  margin-top: 14px;
  margin-bottom: 12px;
}

.ultra-badge {
  /* inline-flex + equal gap keeps "पधारो" symmetrically placed between the
     two Swastik symbols; stays inline so the badge sits exactly where it did. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  line-height: 1.3;
  background: #7A1F2A; /* Maroon capsule */
  color: #FFFDF7;
  font-weight: 700;
  font-size: 0.92rem;
  /* wider, but vertical padding held so the capsule does not get taller */
  padding: 7px 36px;
  border-radius: 50px;
  /* refined warm-gold edge with a soft outer glow and a fine inner highlight */
  border: 1px solid rgba(212, 175, 55, 0.75);
  box-shadow:
    0 4px 14px rgba(122, 31, 42, 0.22),
    0 0 18px rgba(212, 175, 55, 0.22),
    inset 0 1px 0 rgba(255, 233, 175, 0.18);
  letter-spacing: 0.8px;
}

/* Swastik symbols: rich devotional golden-yellow, bright enough to read
   against the maroon capsule behind them. */
.ultra-badge .badge-swastik {
  color: #FFC72C;
  font-size: 1.15rem;
  letter-spacing: 0;
  flex: none;
}

/* "पधारो": larger and bolder, in the badge's existing gold/cream tone. */
.ultra-badge .badge-text {
  color: #FFFDF7;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  /* letter-spacing adds a trailing gap after the last glyph; cancel it so the
     word is optically centred between the two symbols rather than 0.8px left. */
  margin-right: -0.8px;
}

.ultra-event-heading {
  font-family: 'Noto Sans Devanagari', 'Hind', sans-serif;
  font-size: clamp(2.3rem, 3.8vw, 52px);
  font-weight: 800;
  color: #7A1F2A;
  line-height: 1.22;
  /* centred so the badge and heading read as one cohesive heading group */
  text-align: center;
  margin-bottom: 10px;
  text-shadow: 0 2px 8px rgba(122, 31, 42, 0.06);
  animation: ultraFadeDown 0.8s ease-out 0.2s backwards;
}

.ultra-card-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  width: 100%;
}

.ultra-card-divider .card-line {
  height: 1.5px;
  flex: 1;
  background: linear-gradient(90deg, #D4AF37, rgba(212, 175, 55, 0.15));
}

.card-lotus-icon {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 1px 3px rgba(212, 175, 55, 0.4));
}

.ultra-event-description {
  color: #4A2E1B;
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 16px;
  font-weight: 400;
  animation: ultraFadeUp 0.8s ease-out 0.3s backwards;
}

/* 2x2 Event Information Cards Grid.
   Two equal minmax(0, 1fr) columns with a matching 14px row/column gap: the
   four boxes are identical in width, evenly spaced, and flush with the right
   column's edges, so their outer indentation matches the card padding on both
   sides. box-sizing keeps the border inside that measured width. */
.event-info-grid-2x2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 16px;
  width: 100%;
}

.event-grid-card {
  box-sizing: border-box;
  min-width: 0;
  background: #FFFFFF;
  border: 1.5px solid rgba(212, 175, 55, 0.4);
  border-radius: 16px;
  padding: 15px 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.08);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  will-change: transform;
}

/* Staggered Animations for 2x2 Info Cards */
.event-grid-card:nth-child(1) { animation: ultraFadeUp 0.5s ease-out 0.3s backwards; }
.event-grid-card:nth-child(2) { animation: ultraFadeUp 0.5s ease-out 0.4s backwards; }
.event-grid-card:nth-child(3) { animation: ultraFadeUp 0.5s ease-out 0.5s backwards; }
.event-grid-card:nth-child(4) { animation: ultraFadeUp 0.5s ease-out 0.6s backwards; }

.event-grid-card:hover {
  transform: translateY(-5px); /* Lift upward by 5px */
  border-color: rgba(212, 175, 55, 0.75);
  box-shadow: 0 12px 28px rgba(212, 175, 55, 0.22);
}

.event-card-icon-box {
  width: 42px;
  height: 42px;
  min-width: 42px;
  background: #7A1F2A; /* Maroon square */
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(122, 31, 42, 0.2);
  border: 1px solid rgba(212, 175, 55, 0.3);
  transition: transform 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
  will-change: transform;
}

/* Icon scale animation on hover */
.event-grid-card:hover .event-card-icon-box {
  transform: scale(1.1);
  background: #922634;
  box-shadow: 0 6px 14px rgba(122, 31, 42, 0.35);
}

.event-card-icon {
  font-size: 1.2rem;
}

/* Modern location-pin (Font Awesome) in the venue card: it is a glyph rather
   than a colour emoji, so it needs an explicit colour to read on the maroon box. */
.venue-card .event-card-icon.fa-location-dot {
  color: #FFFDF7;
}

/* Organizer (4th) icon rendered white for better visibility on the maroon box.
   Transparent fill + zero-offset text-shadow recolours the colour emoji. */
.event-info-grid-2x2 .event-grid-card:nth-child(4) .event-card-icon {
  color: transparent;
  text-shadow: 0 0 0 #FFFFFF;
}

.event-card-details {
  display: flex;
  flex-direction: column;
  /* lets the text column shrink inside the flex row and wrap instead of
     pushing the box wider than its grid track */
  min-width: 0;
  overflow-wrap: break-word;
}

.event-card-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #7A1F2A;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.event-card-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: #4A2E1B;
  line-height: 1.4;
}

/* Live Countdown Timer */
.devotional-countdown-container {
  margin-bottom: 16px;
  padding: 14px 18px;
  background: linear-gradient(145deg, #FFFDF8 0%, #FFF9EC 100%);
  border: 1.5px solid rgba(212, 175, 55, 0.45);
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(212, 175, 55, 0.12);
  animation: ultraScaleFade 0.8s ease-out 0.65s backwards;
  will-change: transform, opacity;
}

.countdown-heading {
  font-family: 'Noto Sans Devanagari', 'Hind', sans-serif;
  font-size: 1.02rem;
  font-weight: 800;
  color: #7A1F2A;
  text-align: center;
  margin-bottom: 10px;
  letter-spacing: 0.3px;
}

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

.countdown-card {
  background: linear-gradient(135deg, #FFFDF8 0%, #FFF4D9 100%);
  border: 1.5px solid rgba(212, 175, 55, 0.45);
  border-radius: 14px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 15px rgba(212, 175, 55, 0.12);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}

.countdown-card:hover {
  transform: translateY(-3px);
  border-color: #D4AF37;
  box-shadow: 0 10px 22px rgba(212, 175, 55, 0.25);
}

.countdown-number {
  font-size: 1.75rem;
  font-weight: 800;
  color: #7A1F2A;
  line-height: 1.1;
  font-family: 'Outfit', sans-serif;
}

.countdown-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: #D4AF37;
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.countdown-expired-msg {
  text-align: center;
  font-family: 'Noto Sans Devanagari', 'Hind', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: #7A1F2A;
  line-height: 1.5;
  padding: 8px;
}

/* Enhanced Devotional Invitation Card */
.devotional-invitation-card {
  background: linear-gradient(135deg, #FFFDF8 0%, #FFF4D9 100%);
  border: 1.5px solid rgba(212, 175, 55, 0.6);
  border-radius: 18px;
  padding: 13px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.18);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  animation: ultraFadeUp 0.8s ease-out 0.75s backwards;
  will-change: transform;
}

.devotional-invitation-card:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 30px rgba(212, 175, 55, 0.28);
}

.invitation-ornament {
  font-size: 1.25rem;
}

.invitation-text {
  font-family: 'Noto Sans Devanagari', 'Hind', sans-serif;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 700;
  color: #7A1F2A;
  margin: 0;
  text-align: center;
  letter-spacing: 0.4px;
}

/* Additional Keyframes */
@keyframes ultraFadeDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ultraScaleFade {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Full-Screen Lightbox Modal for Event Poster */
.poster-modal {
  position: fixed;
  inset: 0;
  background: rgba(20, 5, 8, 0.88);
  backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.poster-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.poster-modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #FFFFFF;
  padding: 18px;
  border-radius: 20px;
  border: 2px solid #D4AF37;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
  animation: modalZoom 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes modalZoom {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes ultraFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.poster-modal-close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 40px;
  height: 40px;
  background: #7A1F2A;
  color: #FFFDF7;
  border: 2px solid #D4AF37;
  border-radius: 50%;
  font-size: 1.6rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.poster-modal-close:hover {
  background: #D4AF37;
  color: #7A1F2A;
  transform: scale(1.1);
}

.poster-modal-img {
  max-width: 85vw;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 12px;
}

.poster-modal-caption {
  margin-top: 10px;
  font-family: 'Noto Sans Devanagari', 'Hind', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #7A1F2A;
}

/* Footer Section */
.ultra-events-footer {
  margin-top: 50px;
  text-align: center;
}

.ultra-footer-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 16px;
}

.ultra-footer-divider .footer-line {
  height: 1.5px;
  width: 140px;
  background: linear-gradient(90deg, transparent, #D4AF37, transparent);
}

.footer-lotus {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 1px 3px rgba(212, 175, 55, 0.4));
}

.ultra-contact-info {
  font-size: 1.15rem;
  font-weight: 600;
  color: #7D5230; /* Brown text */
}

.contact-num {
  color: #7A1F2A;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-num:hover {
  color: #D4AF37;
  text-decoration: underline;
}

/* Keyframe Animations */
@keyframes ultraFadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ultraImageZoom {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ultraSlideRight {
  from {
    opacity: 0;
    transform: translateX(35px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ultraPop {
  0% {
    opacity: 0;
    transform: scale(0.88);
  }
  70% {
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Responsive Design */
@media (max-width: 992px) {
  .ultra-main-card {
    grid-template-columns: 1fr;
    padding: 36px 30px;
    gap: 38px;
    width: 92%;
  }

  .ultra-image-wrapper {
    padding: 10px;
  }

  .ultra-event-heading {
    font-size: 44px;
  }
}

@media (max-width: 600px) {
  .ultra-events-section {
    padding: 46px 0 38px 0;
  }

  .ultra-section-header {
    margin-bottom: 35px;
  }

  .ultra-header-divider .ultra-line {
    width: 60px;
  }

  .ultra-main-card {
    padding: 24px 18px;
    width: 95%;
    border-radius: 20px;
    gap: 26px;
  }

  .ultra-image-wrapper {
    padding: 10px;
    border-radius: 16px;
  }

  .ultra-event-heading {
    font-size: 32px;
  }

  .countdown-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .countdown-number {
    font-size: 1.35rem;
  }

  .countdown-label {
    font-size: 0.72rem;
  }

  .event-info-grid-2x2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .event-grid-card {
    padding: 14px 12px;
  }

  .devotional-invitation-card {
    padding: 16px 14px;
  }

  .ultra-watermark {
    display: none;
  }

  .ultra-footer-divider .footer-line {
    width: 70px;
  }
}

/* ==========================================================================
   ABOUT US REDESIGN SECTION (EXCLUSIVELY FOR #about)
   ========================================================================== */

.about-redesign-section {
  position: relative;
  background-color: #FFF8F0; /* Warm cream background */
  padding: 70px 0;
  overflow: hidden;
  font-family: 'Noto Sans Devanagari', 'Hind', 'Poppins', sans-serif;
  animation: aboutFadeUp 1s ease-out forwards;
}

/* Background Mandala & Temple Silhouette Watermarks */
.about-bg-mandala {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: 0.04; /* 4% opacity */
}

.about-bg-mandala img {
  width: 100%;
  height: 100%;
  filter: sepia(1) saturate(5) hue-rotate(5deg);
}

.mandala-left {
  top: -80px;
  left: -80px;
  width: 380px;
  height: 380px;
}

.mandala-right {
  bottom: -80px;
  right: -80px;
  width: 400px;
  height: 400px;
  transform: rotate(180deg);
}

.about-bg-temple {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1200px;
  height: 220px;
  opacity: 0.03; /* 3% opacity faint temple silhouette */
  pointer-events: none;
  z-index: 1;
}

.about-bg-temple img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

.about-ambient-glow {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vw;
  height: 600px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, rgba(122, 31, 42, 0.04) 45%, rgba(255, 248, 240, 0) 75%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

/* Container */
.about-container {
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 1240px;
  margin: 0 auto;
}

/* Section Header */
.about-section-header {
  text-align: center;
  margin-bottom: 60px;
}

.about-eyebrow {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 700;
  color: #7A1F2A;
  background: rgba(122, 31, 42, 0.06);
  padding: 6px 20px;
  border-radius: 50px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

.about-main-heading {
  font-family: 'Noto Sans Devanagari', 'Hind', sans-serif;
  font-size: clamp(2.3rem, 4.5vw, 3.4rem);
  font-weight: 800;
  color: #7A1F2A; /* Maroon */
  letter-spacing: -0.5px;
  margin-bottom: 14px;
  text-shadow: 0 2px 8px rgba(122, 31, 42, 0.06);
}

.about-header-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 14px 0 20px 0;
}

.about-header-divider .divider-line {
  height: 1.5px;
  width: 110px;
  background: linear-gradient(90deg, transparent, #D4AF37, transparent);
}

.about-header-divider .divider-lotus {
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 2px 4px rgba(212, 175, 55, 0.45));
}

.about-header-subtitle {
  color: #7D5230; /* Light Brown */
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: 500;
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.8;
}

/* Two-Column Main Layout */
.about-two-column-grid {
  display: grid;
  grid-template-columns: 48% 52%;
  gap: 40px;
  align-items: center;
  margin-bottom: 60px;
}

/* Left Column: Image Card */
.about-image-column {
  height: 100%;
  display: flex;
}

.about-image-card {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.about-image-frame {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 480px;
  border-radius: 20px; /* 20px rounded corners */
  overflow: hidden;
  border: 1.5px solid rgba(212, 175, 55, 0.5); /* Premium golden border */
  box-shadow: 0 18px 45px rgba(212, 175, 55, 0.18), 0 10px 25px rgba(122, 31, 42, 0.12); /* Soft shadow */
}

.about-featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Fill left container cleanly */
  object-position: center;
  border-radius: 18px;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Subtle Hover Zoom Effect */
.about-image-frame:hover .about-featured-img {
  transform: scale(1.03);
}

.about-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 65%, rgba(122, 31, 42, 0.3) 100%);
  pointer-events: none;
}

.about-image-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 175, 55, 0.5);
  padding: 10px 20px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  z-index: 3;
}

.about-image-badge .badge-icon {
  font-size: 1.2rem;
  color: #D4AF37;
}

.about-image-badge .badge-text {
  font-size: 0.95rem;
  font-weight: 700;
  color: #7A1F2A;
}

/* Right Column: Text & 4 Pillars */
.about-content-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-intro-text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #4A2E1B;
  margin-bottom: 24px;
  background: #FFFFFF;
  padding: 24px 28px;
  border-radius: 18px;
  border: 1.5px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.08);
}

.about-intro-text strong {
  color: #7A1F2A;
}

/* 4 Structured Pillars Grid */
.about-pillars-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.about-pillar-card {
  background: #FFFFFF;
  border: 1.5px solid rgba(212, 175, 55, 0.35);
  border-radius: 18px;
  padding: 20px 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.06);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.about-pillar-card:hover {
  transform: translateY(-4px);
  border-color: rgba(212, 175, 55, 0.7);
  box-shadow: 0 12px 30px rgba(212, 175, 55, 0.16);
}

.pillar-icon-box {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: #7A1F2A; /* Maroon square */
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(122, 31, 42, 0.2);
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.pillar-icon {
  font-size: 1.25rem;
}

/* Bright golden icons for the Vision (1st) and Values (3rd) pillars only.
   Transparent fill + a zero-offset, zero-blur text-shadow re-renders the
   colour emoji as a solid gold glyph. Colour-only: the icon box, sizes,
   spacing and layout are all untouched. Mission (2nd) and Services (4th)
   keep their original emoji colours. */
.about-pillars-grid .about-pillar-card:nth-child(1) .pillar-icon,
.about-pillars-grid .about-pillar-card:nth-child(3) .pillar-icon {
  color: transparent;
  text-shadow: 0 0 0 #FFD700;
}

.pillar-info {
  display: flex;
  flex-direction: column;
}

.pillar-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: #7A1F2A;
  margin-bottom: 4px;
}

.pillar-desc {
  font-size: 0.92rem;
  line-height: 1.6;
  color: #5C3A21;
}

/* Centered Quote Box */
.about-quote-wrapper {
  margin: 50px 0;
  display: flex;
  justify-content: center;
}

.about-quote-box {
  position: relative;
  background: linear-gradient(135deg, #7A1F2A 0%, #5E141E 100%); /* Maroon Gradient */
  border: 2px solid #D4AF37; /* Gold Border */
  border-radius: 24px;
  padding: 38px 50px;
  text-align: center;
  max-width: 860px;
  width: 100%;
  box-shadow: 0 15px 40px rgba(122, 31, 42, 0.25), 0 0 25px rgba(212, 175, 55, 0.2);
  overflow: hidden;
}

.quote-mark {
  position: absolute;
  font-family: Georgia, serif;
  font-size: 5rem;
  color: rgba(212, 175, 55, 0.25);
  line-height: 1;
  pointer-events: none;
}

.left-quote {
  top: 10px;
  left: 24px;
}

.right-quote {
  bottom: -15px;
  right: 24px;
}

.about-quote-text {
  font-family: 'Noto Sans Devanagari', 'Hind', sans-serif;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  font-weight: 800;
  color: #FFFDF7;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.about-quote-sub {
  font-size: 1.05rem;
  font-weight: 600;
  color: #D4AF37;
}

/* Four Feature Cards Grid */
.about-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-bottom: 60px;
}

.about-feature-card {
  background: #FFFFFF;
  border: 1.5px solid rgba(212, 175, 55, 0.4);
  border-radius: 20px;
  padding: 28px 22px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.08);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.about-feature-card:hover {
  transform: translateY(-6px);
  border-color: #D4AF37;
  box-shadow: 0 18px 40px rgba(212, 175, 55, 0.22);
}

.feature-icon-wrapper {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px auto;
  background: rgba(122, 31, 42, 0.06);
  border: 1.5px solid rgba(212, 175, 55, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-icon {
  font-size: 1.8rem;
}

.feature-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #7A1F2A;
  margin-bottom: 8px;
}

.feature-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #5C3A21;
}

/* Statistics Section */
.about-stats-container {
  background: linear-gradient(145deg, #FFFFFF 0%, #FFFDF8 100%);
  border: 1.5px solid rgba(212, 175, 55, 0.45);
  border-radius: 24px;
  padding: 36px 30px;
  box-shadow: 0 15px 45px rgba(212, 175, 55, 0.14);
}

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

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-right: 1px dashed rgba(212, 175, 55, 0.35);
}

.stat-card:last-child {
  border-right: none;
}

.stat-number-box {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Noto Sans Devanagari', 'Poppins', sans-serif;
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 800;
  color: #7A1F2A;
  line-height: 1;
  margin-bottom: 8px;
}

.stat-number-text {
  font-family: 'Noto Sans Devanagari', 'Hind', sans-serif;
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  font-weight: 800;
  color: #7A1F2A;
}

.stat-plus {
  color: #D4AF37;
  margin-left: 2px;
}

.stat-label {
  font-size: 1rem;
  font-weight: 600;
  color: #7D5230;
}

/* Animations */
@keyframes aboutFadeUp {
  from {
    opacity: 0;
    transform: translateY(35px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Rules for About Redesign */
@media (max-width: 992px) {
  .about-two-column-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .about-image-frame {
    min-height: 380px;
    max-height: 480px;
  }

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

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

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

  .stat-card {
    border-right: none;
    border-bottom: 1px dashed rgba(212, 175, 55, 0.35);
    padding-bottom: 18px;
  }

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

@media (max-width: 600px) {
  .about-redesign-section {
    padding: 42px 0;
  }

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

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

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

  .stat-card {
    border-bottom: 1px dashed rgba(212, 175, 55, 0.35);
  }

  .stat-card:last-child {
    border-bottom: none;
  }

  .about-quote-box {
    padding: 28px 20px;
  }

  .left-quote, .right-quote {
    display: none;
  }

  .about-image-frame {
    min-height: 300px;
  }

  .about-bg-mandala {
    display: none;
  }
}

/* ==========================================================================
   ULTRA-PREMIUM DEVOTIONAL FLOATING GALLERY CAROUSEL
   ========================================================================== */
.gallery-redesign-section {
  position: relative;
  background: #FFF8F0; /* Warm cream background */
  padding: 58px 0 66px 0;
  overflow: hidden;
  border-top: 1px solid rgba(212, 175, 55, 0.25);
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}

/* Ambient Golden Glow */
.gallery-ambient-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 950px;
  height: 950px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, rgba(255, 248, 240, 0) 70%);
  pointer-events: none;
  z-index: 1;
}

/* Faint Temple Silhouette (3-5% Opacity) */
.gallery-bg-silhouette {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.04;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.gallery-bg-silhouette img {
  width: 80%;
  max-width: 900px;
  filter: sepia(1) saturate(3) hue-rotate(330deg);
}

/* Corner Mandala Watermark Patterns */
.gallery-watermark {
  position: absolute;
  width: 240px;
  height: 240px;
  opacity: 0.05;
  pointer-events: none;
  z-index: 1;
}

.gallery-watermark img {
  width: 100%;
  height: 100%;
  filter: sepia(1) saturate(3) hue-rotate(330deg);
}

.gallery-watermark.watermark-top-left { top: -30px; left: -30px; transform: rotate(-15deg); }
.gallery-watermark.watermark-top-right { top: -30px; right: -30px; transform: rotate(15deg); }
.gallery-watermark.watermark-bottom-left { bottom: -30px; left: -30px; transform: rotate(15deg); }
.gallery-watermark.watermark-bottom-right { bottom: -30px; right: -30px; transform: rotate(-15deg); }

.gallery-section-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
}

/* 1. Section Header & Spacing */
.gallery-section-header {
  text-align: center;
  margin-bottom: 24px;
  padding: 0 20px;
  animation: ultraFadeDown 0.8s ease-out backwards;
}

.gallery-header-title {
  font-family: 'Noto Sans Devanagari', 'Hind', sans-serif;
  font-size: clamp(2.2rem, 3.8vw, 44px);
  font-weight: 800;
  color: #7A1F2A; /* Temple Maroon */
  letter-spacing: 0.5px;
  margin-bottom: 14px;
  text-shadow: 0 2px 8px rgba(122, 31, 42, 0.06);
}

.gallery-header-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}

.gallery-header-divider .gallery-line {
  height: 1.5px;
  width: 120px;
  background: linear-gradient(90deg, transparent, #D4AF37, transparent);
}

.gallery-diya-ornament {
  font-size: 1.5rem;
  filter: drop-shadow(0 2px 5px rgba(212, 175, 55, 0.5));
}

.gallery-header-subtitle {
  color: #7D5230;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: 500;
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.7;
}

/* 8. Refined Elegant Gallery Counter Section Label (No Pill Button Background) */
.gallery-counter-label {
  text-align: center;
  margin: 0 auto 35px auto;
  animation: ultraFadeUp 0.8s ease-out backwards;
  animation-delay: 0.2s;
}

.gallery-counter-text {
  font-family: 'Noto Sans Devanagari', 'Hind', sans-serif;
  font-weight: 700;
  font-size: 1.12rem;
  color: #7A1F2A; /* Temple Maroon typography */
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.gallery-counter-icon {
  font-size: 1.1rem;
  filter: drop-shadow(0 1px 3px rgba(212, 175, 55, 0.5));
}

.gallery-counter-subline {
  height: 1.5px;
  width: 90px;
  background: linear-gradient(90deg, transparent, #D4AF37, transparent);
  margin: 8px auto 0 auto;
}

/* 2, 3, 7. Full-Width Continuous Infinite Carousel Showcase */
.gallery-carousel-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  padding: 24px 0 45px 0; /* Increased bottom padding for balanced whitespace */
  animation: ultraFadeUp 0.9s ease-out backwards;
  animation-delay: 0.35s;
}

.gallery-track {
  display: flex;
  gap: 24px; /* Constant 24px spacing between cards */
  width: max-content;
  animation: galleryContinuousMarquee 34s linear infinite; /* Smooth continuous animation */
  will-change: transform;
  align-items: center;
}

/* Pause on Hover */
.gallery-carousel-wrapper:hover .gallery-track {
  animation-play-state: paused;
}

@keyframes galleryContinuousMarquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - 12px)); /* Seamless half-track loop */
  }
}

/* 1, 2. Variable Width Gallery Cards with Fixed Height (285px) */
.gallery-card {
  height: 285px; /* Uniform 285px height for all photos */
  width: auto; /* Natural width according to original aspect ratio */
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.35s ease-out;
  will-change: transform;
  display: flex;
}

.gallery-card-inner {
  position: relative;
  height: 100%;
  width: auto;
  border-radius: 22px; /* Rounded corners 22px */
  overflow: hidden;
  border: 2px solid #D4AF37; /* Thin premium golden border */
  box-shadow: 0 10px 25px rgba(122, 31, 42, 0.12); /* Soft premium shadow */
  background: #FFFDF8; /* Warm cream background */
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  will-change: transform;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 1, 2, 3. Complete Natural Image Display (Same Height 285px, Auto Aspect Width, 0% Padding, 0% Crop) */
.gallery-card-img {
  height: 285px;
  width: auto;
  max-height: 285px;
  object-fit: cover; /* Fills image bounds tightly without side padding */
  object-position: center;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: block;
}

/* 5. Hover Effects (Scale 1.05, Upward 6px, Golden Glow) */
.gallery-card:hover .gallery-card-inner {
  transform: translateY(-6px) scale(1.05); /* 6px upward + 1.05 scale */
  border-color: #F5D77F;
  box-shadow: 0 20px 45px rgba(212, 175, 55, 0.38); /* Golden glow */
}

.gallery-card:hover .gallery-card-img {
  transform: scale(1.04);
}


/* 8 & 12. Ultra-Premium Lightbox Modal Backdrop (rgba(0,0,0,0.85) + 10px blur) */
.gallery-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85); /* rgba(0,0,0,0.85) backdrop */
  backdrop-filter: blur(10px); /* 10px blur filter */
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.gallery-modal.active {
  opacity: 1;
  pointer-events: auto;
}

/* 2. Modal Layout (Width 92vw, Max 1150px) */
.gallery-modal-content {
  position: relative;
  width: 92vw;
  max-width: 1150px;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #16080B; /* Deep temple maroon-black */
  padding: 16px 20px;
  border-radius: 24px;
  border: 2px solid #D4AF37; /* Golden border */
  box-shadow: 0 30px 85px rgba(0, 0, 0, 0.9), 0 0 50px rgba(212, 175, 55, 0.35);
  animation: modalZoom 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: hidden;
}

@keyframes modalZoom {
  0% { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1.0); opacity: 1; }
}

/* 11. Topbar Controls & Zoom Buttons */
.gallery-modal-topbar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  z-index: 10;
}

.gallery-modal-zoom-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.modal-zoom-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #F5D77F;
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.modal-zoom-btn:hover {
  background: #D4AF37;
  color: #16080B;
  transform: scale(1.08);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
}

/* 5. Close Button (Maroon, Gold border, Scale 1.1 + Rotate 15deg on hover) */
.gallery-modal-close {
  width: 38px;
  height: 38px;
  background: #7A1F2A;
  color: #FFFDF7;
  border: 1.5px solid #D4AF37;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s ease, box-shadow 0.3s ease;
}

.gallery-modal-close:hover {
  background: #D4AF37;
  color: #7A1F2A;
  transform: scale(1.1) rotate(15deg); /* Scale 1.1 & rotate 15 deg */
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.75);
}

/* 4. Previous / Next Circular Buttons (Increased diameter 64px, 28px chevrons ❮ ❯, Scale 1.15 + Soft Glow + #5E1720 on hover) */
.gallery-modal-nav {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  width: 64px; /* 64px diameter */
  height: 64px;
  background: #7A1F2A; /* Maroon background */
  color: #FFFDF7;
  border: 1.5px solid #D4AF37; /* Gold border */
  border-radius: 50%;
  font-size: 28px; /* 28-30px arrow size */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); /* Elevated box-shadow */
  transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 250ms ease, box-shadow 250ms ease;
  z-index: 25;
}

.gallery-modal-nav:hover {
  background: #5E1720; /* Slightly darker maroon on hover */
  color: #FFFDF7;
  transform: translateY(-50%) scale(1.15); /* Scale to 1.15 */
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.8); /* Soft golden glow */
}

.gallery-modal-nav.prev-btn { left: 18px; }
.gallery-modal-nav.next-btn { right: 18px; }

/* 1, 5. Main Image Display Viewport (Increased height ~72vh, 94-95% viewing area, 0% crop/stretch) */
.gallery-modal-img-wrapper {
  position: relative;
  width: 95%; /* 94-95% of available image viewing area */
  height: 72vh; /* Increased container height by 40-60px */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.5);
  user-select: none;
}

.gallery-modal-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* Always preserve original aspect ratio */
  border-radius: 12px;
  transition: transform 280ms ease-out, opacity 280ms ease-out; /* 250-300ms micro-animation */
  will-change: transform, opacity;
}

/* 4. Floating Information Card Below Image (margin-top: -15px, radius 18px, shadow 0 15px 35px) */
.gallery-modal-info-card {
  width: 92%;
  margin-top: -15px; /* Appears as a premium floating card overlapping slightly */
  background: rgba(22, 8, 11, 0.92); /* Rich deep maroon-black floating card */
  border: 1.5px solid rgba(212, 175, 55, 0.45); /* Golden subline border */
  border-radius: 18px; /* 18px border radius */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.55); /* Elevated floating card shadow */
  padding: 14px 22px; /* Increased internal padding for breathing space */
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 12;
}

.gallery-modal-info-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 5. Image Hierarchy: 5. Counter ("7 / 8") */
.gallery-modal-counter {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  color: #16080B;
  background: #D4AF37; /* Golden pill */
  padding: 2px 12px;
  border-radius: 16px;
  letter-spacing: 0.5px;
}

/* Keyboard Hint */
.gallery-keyboard-hint {
  font-size: 0.75rem;
  font-weight: 600;
  color: #F5D77F;
  opacity: 0.85;
  letter-spacing: 0.3px;
}

/* 3, 5. Image Hierarchy: 6. Thumbnail Strip Navigation */
.gallery-modal-thumbnails {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  padding: 4px 6px;
  width: 92%;
  overflow-x: auto;
  justify-content: center;
  scrollbar-width: thin;
  scrollbar-color: #D4AF37 transparent;
}

.thumb-item {
  width: 64px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid rgba(212, 175, 55, 0.3);
  opacity: 0.65; /* Inactive thumbnail opacity 0.65 */
  cursor: pointer;
  transition: transform 250ms ease, opacity 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
}

.thumb-item:hover {
  opacity: 1; /* Hover thumbnail opacity 1 */
  transform: scale(1.03); /* Hover scale 1.03 */
}

/* 3. Active Thumbnail (2.5px Gold border, Soft glow, Scale 1.08, z-index 5) */
.thumb-item.active {
  opacity: 1;
  border: 2.5px solid #D4AF37; /* 2.5px Gold border */
  transform: scale(1.08); /* Scale 1.08 */
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.6); /* Soft golden glow */
  z-index: 5; /* Highest z-index */
}

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

/* 13. Responsive Breakpoints */
@media (max-width: 992px) {
  .gallery-modal-content {
    width: 95vw;
    padding: 14px;
  }
  .gallery-modal-img-wrapper {
    width: 96%;
    height: 58vh;
  }
  .gallery-modal-info-card,
  .gallery-modal-thumbnails {
    width: 96%;
  }
  .gallery-modal-nav.prev-btn { left: 12px; }
  .gallery-modal-nav.next-btn { right: 12px; }
}

@media (max-width: 600px) {
  .gallery-modal-content {
    padding: 12px 10px;
    border-radius: 18px;
  }
  .gallery-modal-nav {
    width: 40px;
    height: 40px;
    font-size: 1.8rem;
  }
  .gallery-modal-nav.prev-btn { left: 6px; }
  .gallery-modal-nav.next-btn { right: 6px; }
  .gallery-modal-img-wrapper {
    width: 100%;
    height: 52vh;
  }
  .gallery-modal-info-card {
    width: 100%;
    padding: 8px 12px;
  }
  .gallery-keyboard-hint {
    font-size: 0.68rem;
  }
  .gallery-modal-thumbnails {
    width: 100%;
    justify-content: flex-start;
  }
  .thumb-item {
    width: 54px;
    height: 38px;
  }
}

/* ==========================================================================
   TRUST MEMBERS SECTION (सदस्य)
   ========================================================================== */
/* ==========================================================================
   REFINED LUXURY TRUST MEMBERS SECTION (सदस्य)
   =====================================================/* ==========================================================================
   REFINED LUXURY TRUST MEMBERS SECTION (सदस्य)
   ========================================================================== */
.members-section {
  position: relative;
  background-color: #FFFDF8;
  background-image: 
    radial-gradient(circle at 50% 30%, rgba(212, 175, 55, 0.08) 0%, transparent 65%),
    linear-gradient(rgba(255, 248, 231, 0.97), rgba(255, 248, 231, 0.97)),
    url("images/mandala.svg");
  background-size: 100% 100%, 100% 100%, 280px 280px;
  background-repeat: no-repeat, no-repeat, repeat;
  padding: 4.2rem 0 3.8rem;
  overflow: hidden;
}

/* Subtle corner mandala artwork */
.members-bg-mandala {
  position: absolute;
  width: 450px;
  height: 450px;
  opacity: 0.035;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.3));
}

.members-bg-mandala.mandala-left {
  top: -100px;
  left: -120px;
  animation: slow-rotate 160s linear infinite;
}

.members-bg-mandala.mandala-right {
  bottom: -100px;
  right: -120px;
  animation: slow-rotate 160s linear infinite reverse;
}

.members-ambient-glow {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, rgba(232, 122, 31, 0.05) 50%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* Section Header */
.members-header {
  text-align: center;
  margin-bottom: 2.2rem;
  position: relative;
  z-index: 2;
}

.members-header h2 {
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  color: #651515;
  font-weight: 800;
  margin-bottom: 0.5rem;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(101, 21, 21, 0.08);
}

.members-header-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin: 0.6rem 0 1.2rem;
}

.members-header-divider .divider-line {
  width: 90px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #D4AF37 50%, transparent);
}

.members-header-divider .divider-diya {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 2px 6px rgba(232, 122, 31, 0.6));
  animation: pulse-diya-glow 3s ease-in-out infinite alternate;
}

@keyframes pulse-diya-glow {
  0% { transform: scale(1); filter: drop-shadow(0 2px 5px rgba(232, 122, 31, 0.5)); }
  100% { transform: scale(1.1); filter: drop-shadow(0 4px 12px rgba(232, 122, 31, 0.8)); }
}

.members-subtitle {
  color: #4A3520;
  font-size: 1.25rem;
  max-width: 780px;
  margin: 0 auto;
  line-height: 1.8;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* Toggle Buttons - Reduced vertical spacing by 25px */
.members-tabs-wrapper {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.6rem;
  position: relative;
  z-index: 2;
}

.members-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF8E7 100%);
  border: 1.5px solid #D4AF37;
  color: #651515;
  font-size: 1.12rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(101, 21, 21, 0.06);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.members-tab-btn .tab-badge {
  background: rgba(212, 175, 55, 0.18);
  color: #651515;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.92rem;
  border: 1px solid rgba(212, 175, 55, 0.45);
  font-weight: 700;
}

.members-tab-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(212, 175, 55, 0.3);
  border-color: #E87A1F;
}

.members-tab-btn.active {
  background: linear-gradient(135deg, #651515 0%, #7A1212 50%, #4A0A0A 100%);
  color: #FFF9EF;
  border-color: #D4AF37;
  box-shadow: 0 12px 35px rgba(101, 21, 21, 0.35), 0 0 25px rgba(212, 175, 55, 0.4);
  transform: scale(1.03);
}

.members-tab-btn.active .tab-badge {
  background: rgba(212, 175, 55, 0.35);
  color: #FFF9EF;
  border-color: #FFE082;
}

/* Tab Contents */
.members-tab-content {
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  position: relative;
  z-index: 2;
}

.members-tab-content.active {
  display: block;
  opacity: 1;
}

/* Carousel Container - Slightly expanded container width for 15-20% wider cards */
.members-carousel-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 45px;
  margin: 0 auto 1.5rem;
  max-width: 1320px;
}

.carousel-track-container {
  width: 100%;
  overflow: hidden;
  border-radius: 24px;
  padding: 18px 6px;
}

.carousel-track {
  display: flex;
  gap: 22px;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
  user-select: none;
}

/* Member Cards - Refined 15-20% wider, 25px taller, Soft Ivory/Cream Tint & Layered Glow */
.member-card {
  flex: 0 0 calc((100% - 88px) / 5); /* Exactly 5 cards per view on desktop */
  min-width: 0;
  background: linear-gradient(145deg, #FFFDF8 0%, #FFF8E7 60%, #FFF3D6 100%);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 22px;
  padding: 34px 22px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  box-shadow: 0 12px 35px rgba(101, 21, 21, 0.05), 0 2px 6px rgba(212, 175, 55, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  min-height: 235px;
}

/* Shimmer Gold Shine Effect */
.member-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -130%;
  width: 70%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.25), transparent);
  transform: skewX(-25deg);
  transition: left 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.member-card:hover::before {
  left: 160%;
}

.member-card:hover {
  transform: translateY(-8px);
  border-color: #D4AF37;
  background: linear-gradient(145deg, #FFFFFF 0%, #FFF5DC 100%);
  box-shadow: 0 22px 50px rgba(101, 21, 21, 0.14), 0 0 30px rgba(212, 175, 55, 0.32);
}

.member-emblem-box {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFF9EF 0%, #FFE8B8 50%, #F5C242 100%);
  border: 2px solid #D4AF37;
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.35), inset 0 0 12px rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
  transition: transform 0.4s ease;
}

.member-card:hover .member-emblem-box {
  transform: scale(1.08) rotate(5deg);
  box-shadow: 0 8px 22px rgba(212, 175, 55, 0.5), inset 0 0 15px rgba(255, 255, 255, 1);
}

.member-emblem-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(101, 21, 21, 0.22));
}

.member-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #651515;
  margin-bottom: 12px;
  line-height: 1.4;
  font-family: var(--font-sans);
  min-height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: break-word;
}

.member-type-tag {
  font-size: 0.85rem;
  font-weight: 600;
  color: #E87A1F;
  background: rgba(232, 122, 31, 0.08);
  border: 1px solid rgba(232, 122, 31, 0.22);
  padding: 5px 16px;
  border-radius: 999px;
}

/* Nav buttons - Enlarged by 10-15% (54px), smooth hover scale */
.carousel-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #651515;
  color: #D4AF37;
  border: 1.5px solid #D4AF37;
  box-shadow: 0 8px 24px rgba(101, 21, 21, 0.35), 0 0 15px rgba(212, 175, 55, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.carousel-nav-btn:hover {
  background: #D4AF37;
  color: #651515;
  border-color: #FFF9EF;
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.65), 0 0 20px rgba(232, 122, 31, 0.4);
  transform: translateY(-50%) scale(1.12);
}

.carousel-nav-btn.prev-btn { left: -8px; }
.carousel-nav-btn.next-btn { right: -8px; }

/* Pagination Dots - Polished Indicator Pill */
.carousel-dots-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.3);
  border: 1px solid rgba(212, 175, 55, 0.5);
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.carousel-dot.active {
  width: 32px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #651515 0%, #801818 100%);
  border-color: #D4AF37;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
}

/* Mid-Section Decorative Divider */
.members-mid-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin: 3.5rem auto 1rem;
  max-width: 600px;
}

.members-mid-divider .mid-divider-line {
  flex: 1;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #D4AF37 50%, transparent);
}

.members-mid-divider .mid-divider-icon {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 2px 5px rgba(212, 175, 55, 0.4));
}

/* Statistics Cards at Bottom - Soft Ivory Gradient & Refined Hierarchy */
.members-stats-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 2.5rem auto 3.5rem;
  max-width: 920px;
  position: relative;
  z-index: 2;
}

.members-stat-card {
  background: linear-gradient(145deg, #FFFDF8 0%, #FFF8E7 60%, #FFF3D6 100%);
  border: 1.5px solid #D4AF37;
  border-radius: 22px;
  padding: 30px 22px;
  text-align: center;
  box-shadow: 0 12px 32px rgba(101, 21, 21, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.members-stat-card:hover {
  transform: translateY(-6px);
  border-color: #E87A1F;
  box-shadow: 0 18px 40px rgba(212, 175, 55, 0.25);
}

.members-stat-icon {
  font-size: 2.2rem;
  margin-bottom: 8px;
  filter: drop-shadow(0 2px 4px rgba(212, 175, 55, 0.4));
}

.members-stat-val {
  font-size: 2.7rem;
  font-weight: 800;
  color: #651515;
  font-family: var(--font-sans);
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}

.members-stat-lbl {
  font-size: 1.02rem;
  font-weight: 700;
  color: #4A3520;
  font-family: 'Noto Sans Devanagari', 'Poppins', sans-serif;
}

/* Closing Devotional Area */
.members-closing-area {
  max-width: 850px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.members-closing-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin-bottom: 2.2rem;
}

.members-closing-divider .closing-line {
  width: 120px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #D4AF37 50%, transparent);
}

.members-closing-divider .closing-ornament {
  width: 140px;
  height: auto;
  opacity: 0.8;
}

.members-quote-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: linear-gradient(135deg, rgba(101, 21, 21, 0.04) 0%, rgba(212, 175, 55, 0.12) 100%);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 20px;
  padding: 24px 36px;
  margin-bottom: 1.6rem;
  box-shadow: 0 10px 30px rgba(101, 21, 21, 0.05), 0 0 15px rgba(212, 175, 55, 0.1);
}

.quote-diya-left, .quote-diya-right {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 2px 5px rgba(232, 122, 31, 0.5));
}

.quote-text {
  font-family: var(--font-serif);
  font-size: 1.28rem;
  font-weight: 600;
  color: #651515;
  margin: 0;
  font-style: italic;
  line-height: 1.7;
  text-shadow: 0 1px 4px rgba(212, 175, 55, 0.25);
}

.members-signature {
  font-family: 'Noto Sans Devanagari', 'Poppins', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #651515;
  letter-spacing: 1px;
  display: inline-block;
  padding: 6px 20px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.3);
}

/* Responsive adjustments */
@media (max-width: 1023px) {
  .member-card {
    flex: 0 0 calc((100% - 44px) / 3);
  }
}

@media (max-width: 767px) {
  .members-carousel-wrapper {
    padding: 0 10px;
  }
  .member-card {
    flex: 0 0 100%;
  }
  .carousel-nav-btn {
    width: 38px;
    height: 38px;
    font-size: 0.9rem;
  }
  .carousel-nav-btn.prev-btn { left: -5px; }
  .carousel-nav-btn.next-btn { right: -5px; }
  .members-stats-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .members-tabs-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .members-tab-btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
  .members-closing-divider .closing-line {
    width: 60px;
  }
}

/* Golden-Orange Brand Name with Passing Shine */
.wave-loading-text {
  position: relative;
  display: inline-block;
  color: #E65100;
  white-space: nowrap;
}

.wave-loading-text::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    #E65100 0%,
    #F57C00 20%,
    #FFD700 45%,
    #FFF6D9 50%,
    #FFD700 55%,
    #F57C00 80%,
    #E65100 100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer-anim 5s linear infinite;
  z-index: 2;
  pointer-events: none;
}

@keyframes shimmer-anim {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* ==========================================================================
   SEVA ACTIVITIES SECTION (हमारी सेवाएँ)
   Compact 3-card layout on the homepage + archive grid on seva.html.
   Palette matches the existing devotional system: warm cream ground,
   temple maroon (#7A1F2A) headings, temple gold (#D4AF37) accents.
   ========================================================================== */
.seva-section {
  position: relative;
  background: #FFF8F0; /* Warm cream, matching the gallery section */
  padding: 54px 0 60px 0;
  overflow: hidden;
  border-top: 1px solid rgba(212, 175, 55, 0.25);
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}

.seva-ambient-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 900px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, rgba(255, 248, 240, 0) 70%);
  pointer-events: none;
  z-index: 1;
}

.seva-watermark {
  position: absolute;
  width: 230px;
  height: 230px;
  opacity: 0.05;
  pointer-events: none;
  z-index: 1;
}

.seva-watermark img {
  width: 100%;
  height: 100%;
  filter: sepia(1) saturate(3) hue-rotate(330deg);
}

.seva-watermark-left { top: -30px; left: -30px; transform: rotate(-15deg); }
.seva-watermark-right { bottom: -30px; right: -30px; transform: rotate(15deg); }

.seva-container {
  position: relative;
  z-index: 2;
  width: 84%;
  max-width: 1280px;
  margin: 0 auto;
}

/* ---------- Section header (mirrors the gallery header rhythm) ---------- */
.seva-header {
  text-align: center;
  margin-bottom: 34px;
  animation: ultraFadeDown 0.8s ease-out backwards;
}

.seva-header-title {
  font-family: 'Noto Sans Devanagari', 'Hind', sans-serif;
  font-size: clamp(2.2rem, 3.8vw, 44px);
  font-weight: 800;
  color: #7A1F2A;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
  text-shadow: 0 2px 8px rgba(122, 31, 42, 0.06);
}

.seva-header-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}

.seva-header-divider .seva-line {
  height: 1.5px;
  width: 120px;
  background: linear-gradient(90deg, transparent, #D4AF37, transparent);
}

.seva-diya-ornament {
  font-size: 1.4rem;
  filter: drop-shadow(0 2px 5px rgba(212, 175, 55, 0.5));
}

.seva-header-subtitle {
  color: #7D5230;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: 500;
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ---------- Card grid: 3 across, equal columns, no overflow ---------- */
.seva-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  align-items: stretch;
  width: 100%;
}

.seva-card {
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1.5px solid rgba(212, 175, 55, 0.4);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.1);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
  will-change: transform;
}

/* Gentle lift on hover — no blur and no overlay is ever placed on the photo. */
.seva-card:hover {
  transform: translateY(-6px);
  border-color: rgba(212, 175, 55, 0.75);
  box-shadow: 0 16px 34px rgba(212, 175, 55, 0.24);
}

/* Entry animation only in the archive grid: carousel cards get reordered in
   the DOM, and re-inserting a node can restart its animation and flicker. */
.seva-grid .seva-card {
  animation: ultraFadeUp 0.6s ease-out var(--seva-delay, 0.1s) backwards;
}

/* ---------- Image-focused card media (one seva photo per card) ----------
   IMPORTANT — these photos are themselves multi-photo collages (group shots,
   banners and portrait 9:16 phone pictures, ratios 0.563 → 1.091) with faces
   running right up to all four edges. `object-fit: cover` would crop them and
   cut heads off, so the media box uses `contain`: the ENTIRE frame is always
   visible and nothing is ever trimmed. The 4/5 box is a middle ground between
   the tall 9:16 shots and the near-square ones, so the letterbox margins stay
   small; they are painted the same warm cream as the section, which reads as
   a soft mat around the photo rather than empty space. */
.seva-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(160deg, #FFFDF8 0%, #FFF4E2 100%);
  border-bottom: 1px solid rgba(212, 175, 55, 0.28);
  flex: none;
}

.seva-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* never crop — keeps every face in frame */
  object-position: center;
  display: block;
}

/* Fallback for browsers without aspect-ratio support. */
@supports not (aspect-ratio: 4 / 5) {
  .seva-card-media {
    height: 340px;
  }
}

/* NOTE: no zoom-on-hover for the image. Scaling it inside an overflow-hidden
   box would push the edges out of view — i.e. crop the very faces we are
   protecting. The card lift below is the hover feedback instead. */

/* ---------- Card body ---------- */
.seva-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 16px 18px 18px;
}

.seva-card-title {
  font-family: 'Noto Sans Devanagari', 'Hind', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #7A1F2A;
  line-height: 1.4;
  margin-bottom: 10px;
  overflow-wrap: break-word;
}

.seva-card-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.28);
}

.seva-meta-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: #4A2E1B;
  line-height: 1.45;
  overflow-wrap: break-word;
}

.seva-meta-icon {
  flex: none;
  margin-top: 3px;
  font-size: 0.85rem;
  color: #B8860B;
}

.seva-card-desc {
  color: #5C4126;
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0;
  overflow-wrap: break-word;
}

/* ==========================================================================
   "हाल की सेवा गतिविधियाँ" — horizontal carousel holding the 3 latest services
   ========================================================================== */
.seva-recent-block {
  width: 100%;
  animation: ultraFadeUp 0.7s ease-out 0.2s backwards;
}

.seva-recent-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 18px;
}

.seva-recent-title {
  font-family: 'Noto Sans Devanagari', 'Hind', sans-serif;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 700;
  color: #7A1F2A;
  line-height: 1.35;
  margin: 0;
}

/* Shell is the positioning context for the two arrows, which sit at the far
   left and far right ends of the picture row, vertically centred on it. */
.seva-carousel-shell {
  position: relative;
  width: 100%;
}

.seva-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  color: #7A1F2A;
  background: rgba(255, 255, 255, 0.94);
  border: 1.5px solid rgba(212, 175, 55, 0.65);
  box-shadow: 0 6px 18px rgba(122, 31, 42, 0.22);
  transition: background 0.3s ease, color 0.3s ease,
              box-shadow 0.3s ease, border-color 0.3s ease;
}

.seva-nav-prev { left: 10px; }
.seva-nav-next { right: 10px; }

.seva-nav-btn:hover {
  background: #7A1F2A;
  color: #FFFDF7;
  border-color: rgba(212, 175, 55, 0.95);
  box-shadow: 0 10px 24px rgba(122, 31, 42, 0.34);
}

.seva-nav-btn:focus-visible {
  outline: 2px solid #D4AF37;
  outline-offset: 2px;
}

/* Viewport clips the track; the track itself slides. */
.seva-carousel-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 6px 0 10px; /* room for the hover lift and card shadow */
}

.seva-carousel-track {
  display: flex;
  column-gap: 24px;
  width: 100%;
  will-change: transform;
}

/* 3 cards visible on desktop; the gap is subtracted so nothing overflows. */
.seva-carousel-track .seva-card {
  flex: 0 0 calc((100% - 48px) / 3);
  max-width: calc((100% - 48px) / 3);
}

/* ---------- Impact / statistics row ---------- */
.seva-stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(212, 175, 55, 0.35);
  animation: ultraFadeUp 0.7s ease-out 0.35s backwards;
}

.seva-stat-item {
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 16px 12px;
  text-align: center;
  background: #FFFFFF;
  border: 1.5px solid rgba(212, 175, 55, 0.4);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.1);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.35s ease, border-color 0.35s ease;
}

.seva-stat-item:hover {
  transform: translateY(-4px);
  border-color: rgba(212, 175, 55, 0.75);
  box-shadow: 0 12px 26px rgba(212, 175, 55, 0.22);
}

.seva-stat-icon {
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: 4px;
}

.seva-stat-value {
  font-family: 'Noto Sans Devanagari', 'Hind', sans-serif;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  font-weight: 800;
  color: #7A1F2A;
  line-height: 1.2;
}

.seva-stat-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #7D5230;
  line-height: 1.35;
}

/* ---------- Archive call-to-action ---------- */
.seva-cta-wrapper {
  text-align: center;
  margin-top: 34px;
  animation: ultraFadeUp 0.7s ease-out 0.5s backwards;
}

.seva-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Secondary "join the seva" button — maroon counterpart to the gold one. */
.seva-join-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 34px;
  border-radius: 999px;
  font-family: 'Noto Sans Devanagari', 'Hind', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #7A1F2A;
  background: #FFFFFF;
  border: 1.5px solid rgba(212, 175, 55, 0.7);
  box-shadow: 0 6px 18px rgba(122, 31, 42, 0.12);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.35s ease,
              color 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.seva-join-btn:hover {
  transform: scale(1.05);
  background: #7A1F2A;
  color: #FFFDF7;
  border-color: #D4AF37;
  box-shadow: 0 12px 30px rgba(122, 31, 42, 0.4), 0 0 16px rgba(212, 175, 55, 0.3);
}

.seva-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 38px;
  border-radius: 999px;
  font-family: 'Noto Sans Devanagari', 'Hind', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #4A0A0A;
  background: linear-gradient(135deg, #D4AF37 0%, #F5C242 50%, #B8860B 100%);
  border: 1px solid #FFE082;
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease;
}

.seva-cta-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 35px rgba(212, 175, 55, 0.75), 0 0 20px rgba(232, 122, 31, 0.5);
}

.seva-cta-arrow {
  font-size: 0.9rem;
  transition: transform 0.3s ease;
}

.seva-cta-btn:hover .seva-cta-arrow {
  transform: translateX(6px);
}

.seva-cta-note {
  margin-top: 12px;
  color: #7D5230;
  font-size: 0.92rem;
  font-weight: 500;
}

/* ==========================================================================
   SEVA ARCHIVE PAGE (seva.html)
   Reuses every card style above; only the page shell differs.
   ========================================================================== */
.seva-archive-page {
  position: relative;
  padding: 40px 0 70px 0;
}

.seva-archive-page .seva-grid {
  row-gap: 30px;
}

.seva-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
  padding: 9px 22px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1.5px solid rgba(212, 175, 55, 0.5);
  color: #7A1F2A;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.seva-back-link:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.85);
  box-shadow: 0 8px 20px rgba(212, 175, 55, 0.25);
}

.seva-archive-logo {
  width: 68px;
  height: 68px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #D4AF37;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
  margin: 0 auto 14px;
}

.seva-archive-count {
  display: inline-block;
  margin-top: 6px;
  padding: 5px 20px;
  border-radius: 50px;
  background: #7A1F2A;
  color: #FFFDF7;
  font-size: 0.9rem;
  font-weight: 700;
  border: 1px solid rgba(212, 175, 55, 0.6);
  box-shadow: 0 4px 12px rgba(122, 31, 42, 0.2);
}

/* ---------- Responsive ---------- */
/* Tablet: 2 cards visible in the carousel, 2 columns in the archive grid. */
@media (max-width: 992px) {
  .seva-container {
    width: 92%;
  }

  .seva-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

  .seva-carousel-track {
    column-gap: 20px;
  }

  .seva-carousel-track .seva-card {
    flex: 0 0 calc((100% - 20px) / 2);
    max-width: calc((100% - 20px) / 2);
  }

  .seva-stats-row {
    gap: 14px;
  }

  .seva-stat-item {
    padding: 14px 10px;
  }
}

/* Mobile: 1 card visible in the carousel, single-column archive grid. */
@media (max-width: 600px) {
  .seva-section {
    padding: 44px 0 48px 0;
  }

  .seva-container {
    width: 95%;
  }

  .seva-header {
    margin-bottom: 26px;
  }

  .seva-header-divider .seva-line {
    width: 60px;
  }

  .seva-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .seva-recent-head {
    text-align: center;
  }

  .seva-carousel-track {
    column-gap: 16px;
  }

  .seva-carousel-track .seva-card {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .seva-card-body {
    padding: 14px 15px 16px;
  }

  /* Arrows tuck to the very edges of the single visible picture. */
  .seva-nav-btn {
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
  }

  .seva-nav-prev { left: 6px; }
  .seva-nav-next { right: 6px; }

  /* 2 x 2 statistics so the tiles stay readable on a phone. */
  .seva-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 26px;
    padding-top: 22px;
  }

  .seva-stat-item {
    padding: 13px 8px;
    border-radius: 14px;
  }

  .seva-stat-icon {
    font-size: 1.3rem;
  }

  .seva-stat-label {
    font-size: 0.78rem;
  }

  .seva-cta-row {
    flex-direction: column;
    gap: 12px;
  }

  .seva-cta-btn,
  .seva-join-btn {
    width: 100%;
    justify-content: center;
    padding: 13px 24px;
    font-size: 1rem;
  }

  .seva-watermark {
    display: none;
  }
}

/* Respect reduced-motion: no sliding animation, no hover lift. */
@media (prefers-reduced-motion: reduce) {
  .seva-carousel-track {
    transition: none !important;
  }

  .seva-card,
  .seva-card-media img {
    transition: none;
  }
}

/* ==========================================================================
   RESPONSIVE REFINEMENTS
   Breakpoints: <=600 phone | 601-1024 tablet | 1025-1440 laptop | >1440 desktop
   Appended last so these win over the older scattered rules above.
   ========================================================================== */

/* --- Global overflow guards -------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;   /* iOS must not inflate text on rotate */
}

body {
  overflow-x: hidden;
}

img,
video,
iframe {
  max-width: 100%;
}

/* Grid/flex children default to min-width:auto, so one long unbreakable
   string (the trust email) stretches its whole track. This was pinning the
   footer's contact column to 395px at every width. */
.footer-grid > *,
.footer-col,
.about-two-column-grid > *,
.about-pillars-grid > *,
.contact-grid > * {
  min-width: 0;
}

.footer-contact-list a,
.footer-contact-list li,
.contact-detail-value,
.dev-name-link {
  overflow-wrap: anywhere;
}

/* --- Navigation toggle (hidden on desktop, drawer below 1025) ----------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid rgba(212, 175, 55, 0.55);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.18);
  cursor: pointer;
  z-index: 1002;
}

.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto;
  border-radius: 2px;
  background: #FFFFFF;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

body.nav-open .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

body.nav-open .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

body.nav-open .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(20, 4, 4, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

body.nav-open .nav-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* --- Tablet and below: drawer navigation ------------------------------- */
@media (max-width: 1024px) {
  .nav-toggle {
    display: flex;
  }

  /* backdrop-filter on an ancestor makes it the containing block for
     position:fixed descendants, which would trap the drawer inside the
     header box. Drop the filter here and paint the bar opaque instead. */
  .topbar,
  .topbar.scrolled-glass,
  .topbar.scrolled-solid {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(85, 14, 14, 0.97);
  }

  .topbar-inner {
    flex-direction: row;         /* undo the old column stacking */
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0.75rem 18px;
  }

  .brand {
    font-size: 1.05rem;
    gap: 0.45rem;
    min-width: 0;
  }

  .brand .wave-loading-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .brand-logo {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
  }

  /* The drawer itself */
  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 82vw);
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 84px 0 32px;
    overflow-y: auto;
    background: linear-gradient(180deg, #500C0C 0%, #3B0808 100%);
    border-left: 1.5px solid rgba(212, 175, 55, 0.45);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1001;
  }

  body.nav-open .nav-links {
    transform: translateX(0);
  }

  .nav-links a {
    padding: 15px 26px;          /* >=44px tall touch target */
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(212, 175, 55, 0.16);
  }

  .nav-links a::after {
    display: none;               /* underline sweep makes no sense stacked */
  }

  .nav-links a:hover,
  .nav-links a.active {
    background: rgba(212, 175, 55, 0.12);
  }

  body.nav-open {
    overflow: hidden;            /* lock the page behind the drawer */
  }
}

/* --- Tablet layout ----------------------------------------------------- */
@media (min-width: 601px) and (max-width: 1024px) {
  .container {
    width: min(1200px, calc(100% - 2.5rem));
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
  }

  .about-pillars-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section {
    padding: 2.4rem 0;
  }
}

/* --- Phone layout ------------------------------------------------------ */
@media (max-width: 600px) {
  .container {
    width: min(1200px, calc(100% - 1.75rem));
  }

  .topbar-inner {
    padding: 0.6rem 14px;
  }

  .brand {
    font-size: 0.95rem;
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .about-pillars-grid,
  .about-two-column-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-social-icons {
    flex-wrap: wrap;
  }

  /* Keep the floating video from swallowing a phone screen. */
  .floating-video-container {
    width: 116px;
    height: auto;
    bottom: 12px;
    left: 12px;
  }
}

/* Very narrow phones */
@media (max-width: 380px) {
  .brand .wave-loading-text {
    max-width: 150px;
  }

  .floating-video-container {
    width: 96px;
  }
}

/* --- Laptop ------------------------------------------------------------ */
@media (min-width: 1025px) and (max-width: 1440px) {
  .topbar-inner {
    padding: 1rem 24px;
  }

  .nav-links {
    gap: 1.25rem;
  }

  .nav-links a {
    font-size: 1rem;
    white-space: nowrap;         /* stop links breaking onto two lines */
  }

  .brand {
    font-size: 1.3rem;
  }

  /* Ratio columns, but no track may be pinned by its content. */
  .footer-grid {
    grid-template-columns: 1.4fr 0.82fr 1.38fr 0.85fr;
    gap: 2.75rem;
  }
}

@media (min-width: 1441px) {
  .footer-grid {
    grid-template-columns: 1.4fr 0.82fr 1.38fr 0.85fr;
  }
}

/* --- Touch devices: no hover-only affordances -------------------------- */
@media (hover: none) {
  .panel:hover,
  .upcoming-card:hover,
  .dev-card:hover,
  .hero-card:hover,
  .glossary-card:hover {
    transform: none;
  }
}