@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Rozha+One&display=swap');

:root {
  --primary-navy: #1e293b;
  --secondary-navy: #334155;
  --accent-saffron: #d95d1e;
  --accent-saffron-dark: #b84b12;
  --accent-gold: #b8860b;
  --bg-cream: #faf7f2;
  --card-bg: #ffffff;
  --text-dark: #1e293b;
  --text-muted: #64748b;
  --border-light: #e8e2d9;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--text-dark);
  background-color: var(--bg-cream);
  overflow-x: hidden;
}

h1, h2, h3, .font-serif-heading {
  font-family: 'Marcellus', serif;
}

.font-sacred {
  font-family: 'Rozha One', serif;
}

/* Eye-Friendly Glassmorphism Navigation */
.glass-nav {
  background: rgba(250, 247, 242, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(232, 226, 217, 0.85);
}

.glass-card {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-light);
}

/* Light Theme Cards */
.bg-cream-soft {
  background-color: #faf7f2;
}

.bg-cream-accent {
  background-color: #f5efe6;
}

.border-subtle {
  border-color: #e8e2d9;
}

/* Continuous Infinite Marquee: Auto-Movable Images */
.marquee-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 45s linear infinite;
}

.marquee-track-reverse {
  display: flex;
  width: max-content;
  animation: marqueeScrollReverse 45s linear infinite;
}

.marquee-wrapper:hover .marquee-track,
.marquee-wrapper:hover .marquee-track-reverse {
  animation-play-state: paused;
}

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes marqueeScrollReverse {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.marquee-item {
  flex-shrink: 0;
  width: 280px;
  height: 190px;
  margin: 0 10px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 16px rgba(184, 134, 11, 0.08);
  border: 1px solid #e8e2d9;
  background: #fdfbf7;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.marquee-item:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 28px rgba(217, 93, 30, 0.18);
}

/* Hero Carousel Slide Animation */
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(0.98);
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f5efe6;
}

::-webkit-scrollbar-thumb {
  background: #d4c9b8;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #b84b12;
}

/* Floating Elements & Animations */
@keyframes floatGentle {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

.animate-float {
  animation: floatGentle 4s ease-in-out infinite;
}

/* Lightbox Modal */
.lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(30, 41, 59, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(12px);
}

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

/* Mobile sticky donation bar */
.mobile-donate-bar {
  display: none;
}

@media (max-width: 767px) {
  .mobile-donate-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(232, 226, 217, 0.9);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
  }
}

/* QR Code shine */
.qr-container {
  position: relative;
  overflow: hidden;
}

.qr-container::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transform: rotate(30deg);
  animation: qrShine 6s infinite;
}

@keyframes qrShine {
  0% { transform: translateX(-100%) rotate(30deg); }
  20%, 100% { transform: translateX(100%) rotate(30deg); }
}


/* =====================================================================
   FINAL COLOUR PALETTE (Vastu & Design)
     White / Soft Cream  -> website base & background
     Deep Yellow / Saffron -> main banner & headings
     Bright Green        -> "Donate Now" / call-to-action buttons
     Sky Blue            -> highlights & supporting icons
   Colours are CSS variables below, so they can be tuned in one place.
   ===================================================================== */

html {
  --v-cream: #FFFDF7;
  --v-cream-2: #FFF8E7;
  --v-cream-border: #F0E6CC;
  --v-yellow: #F5A800;
  --v-saffron: #FF9933;
  --v-saffron-text: #C77700;      /* readable saffron for headings on cream */
  --v-on-yellow: #3A2400;         /* dark text on yellow bars */
  --v-green: #16A34A;
  --v-green-dark: #128A3E;
  --v-green-light: #22C55E;
  --v-sky: #0EA5E9;
  --v-sky-dark: #0369A1;
  --v-sky-soft: #E0F2FE;
}

/* ---------- WHITE / SOFT CREAM — base & background ---------- */
html body,
html [class*="bg-[#FAF7F2]"],
html [class*="bg-[#fdfbf7]"],
html .bg-cream-soft {
  background-color: var(--v-cream) !important;
}
html .bg-cream-accent,
html [class*="bg-[#F5EFE6]"] {
  background-color: var(--v-cream-2) !important;
}
html #home,
html [class*="from-[#F5EFE6]"] {
  background-image: linear-gradient(to bottom, var(--v-cream-2), var(--v-cream) 60%, var(--v-cream)) !important;
}
html .glass-nav {
  background: rgba(255, 253, 247, 0.96);
  border-bottom-color: var(--v-cream-border);
}
html .glass-card { border-color: var(--v-cream-border); }
html [class*="border-[#E8E2D9]"],
html .border-subtle { border-color: var(--v-cream-border) !important; }
html .marquee-item { background: #fff; border-color: var(--v-cream-border); }
html ::-webkit-scrollbar-track { background: var(--v-cream-2); }

/* ---------- DEEP YELLOW / SAFFRON — main banner & headings ---------- */
/* top announcement bar */
html body > header {
  background-image: linear-gradient(90deg, var(--v-yellow), var(--v-saffron)) !important;
  color: var(--v-on-yellow) !important;
}
html body > header a:hover { color: #fff !important; }
html body > header [class*="text-orange-300"],
html body > header [class*="text-amber-200"] { color: var(--v-on-yellow) !important; }
html body > header [class*="bg-amber-300"] { background-color: #fff !important; }

/* impact strip / gradient banners & badges (buttons excluded on purpose) */
html [class*="from-orange-"][class*="bg-gradient"]:not(a):not(button) {
  background-image: linear-gradient(90deg, var(--v-yellow), var(--v-saffron)) !important;
  color: var(--v-on-yellow) !important;
}
html [class*="from-orange-"][class*="bg-gradient"]:not(a):not(button) [class*="text-white"],
html [class*="from-orange-"][class*="bg-gradient"]:not(a):not(button) [class*="text-orange-100"],
html [class*="from-orange-"][class*="bg-gradient"]:not(a):not(button) [class*="text-amber-100"] {
  color: var(--v-on-yellow) !important;
}
html [class*="divide-orange-"] > * { border-color: rgba(58, 36, 0, 0.2) !important; }

/* headings */
html h1:not([class*="text-white"]),
html h2:not([class*="text-white"]),
html .font-sacred:not([class*="text-white"]) {
  color: var(--v-saffron-text) !important;
}
html .bg-clip-text {
  background-image: linear-gradient(90deg, var(--v-yellow), var(--v-saffron)) !important;
}
html .uppercase[class*="tracking-widest"][class*="text-orange-"] {
  color: var(--v-saffron-text) !important;
}

/* ---------- BRIGHT GREEN — "Donate Now" / call-to-action ---------- */
html a[href^="donate.html"][class*="bg-"],
html #direct-upi-pay-btn,
html .mobile-donate-bar a,
html .donation-preset-chip[class*="bg-orange-600"] {
  background-image: linear-gradient(135deg, var(--v-green-light), var(--v-green)) !important;
  background-color: var(--v-green) !important;
  color: #fff !important;
  border-color: var(--v-green) !important;
  --tw-ring-color: var(--v-green-light);
  box-shadow: 0 6px 16px rgba(22, 163, 74, 0.30) !important;
}
html a[href^="donate.html"][class*="bg-"]:hover,
html #direct-upi-pay-btn:hover,
html .mobile-donate-bar a:hover {
  background-image: linear-gradient(135deg, var(--v-green), var(--v-green-dark)) !important;
  box-shadow: 0 10px 22px rgba(22, 163, 74, 0.38) !important;
}

/* ---------- SKY BLUE — highlights & supporting icons ---------- */
html i[class*="text-orange-"],
html i[class*="text-amber-"],
html i[class*="text-rose-"],
html i[class*="text-emerald-"] { color: var(--v-sky) !important; }
html [class*="bg-slate-9"] i[class*="text-orange-"],
html footer i[class*="text-orange-"] { color: #38BDF8 !important; }

/* icon chips (soft tiles) */
html [class*="w-9"][class*="h-9"][class*="rounded-xl"],
html [class*="w-12"][class*="h-12"][class*="rounded-2xl"]:is([class*="bg-orange-100"], [class*="bg-rose-100"], [class*="bg-amber-100"], [class*="bg-indigo-100"], [class*="bg-emerald-100"]) {
  background-color: var(--v-sky-soft) !important;
  color: var(--v-sky-dark) !important;
}
/* solid icon tiles */
html [class*="w-12"][class*="h-12"][class*="rounded-2xl"]:is([class*="bg-orange-600"], [class*="bg-amber-600"]) {
  background-color: var(--v-sky) !important;
  box-shadow: 0 6px 14px rgba(14, 165, 233, 0.28) !important;
  color: #fff !important;
}
html [class*="w-12"][class*="h-12"][class*="rounded-2xl"]:is([class*="bg-orange-600"], [class*="bg-amber-600"]) i { color: #fff !important; }

/* highlight pills / badges / small dots */
html [class*="bg-orange-100"][class*="text-orange-800"] {
  background-color: var(--v-sky-soft) !important;
  border-color: #BAE6FD !important;
  color: var(--v-sky-dark) !important;
}
html [class*="bg-orange-100"][class*="text-orange-800"] [class*="bg-orange-600"],
html [class*="rounded-full"][class*="bg-orange-500"] { background-color: var(--v-sky) !important; }
html [class*="border-orange-500/30"] { border-color: rgba(14, 165, 233, 0.35) !important; }
html button[class*="hover:bg-orange-600"]:hover { background-color: var(--v-sky) !important; }
html span[class*="bg-orange-600"][class*="uppercase"] { background-color: var(--v-sky) !important; }