:root {
  --primary: #815568;
  --primary-dark: #613F4E;
  --accent: #A16A82;
  --accent-hover: #613F4E;
  --bg-light: #F8F9FA;
  --bg-white: #FFFFFF;
  --bg-dark: #2B2D42;
  --text-dark: #2B2D42;
  --text-light: #8D99AE;
  --white: #FFFFFF;
}

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

body {
  font-family: Arial, sans-serif;
  color: var(--text-dark);
  background-color: var(--bg-light);
  overflow: hidden; 
}

/* Typography */
h1, h2, h3, h4 { font-family: 'Playfair Display', serif; font-weight: 700; line-height: 1.2; }
h1 { font-size: 5rem; margin-bottom: 0.5rem; color: var(--white); text-shadow: 0 4px 20px rgba(0,0,0,0.3); }
h2 { font-size: 3rem; margin-bottom: 1.5rem; color: #841e56; }
h3 { font-size: 1.5rem; margin-bottom: 1rem; }
p { font-size: 1.125rem; line-height: 1.6; margin-bottom: 1.5rem; }
.tagline { font-size: 1.5rem; color: var(--white); opacity: 0.9; margin-bottom: 3rem; font-weight: 300; }
.highlight-text { color: #d4c766; font-size: 1.25rem; font-weight: normal; margin-top: 1rem; }
.text-center { text-align: center; }

/* Utilities */
.mt-4 { margin-top: 2rem; }
.mt-2 { margin-top: 1rem; }
.mt-neg { margin-top: -2rem; }

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}
.modal-content {
  background: var(--white);
  padding: 3rem;
  border-radius: 20px;
  max-width: 500px;
  width: 90%;
  text-align: center;
  position: relative;
  transform: translateY(20px);
  transition: transform 0.5s ease;
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
.modal-overlay.active .modal-content {
  transform: translateY(0);
}
.modal-close {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-light);
}

/* Navbar */
.top-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 5vw;
  z-index: 100;
  background: transparent;
  transition: all 0.3s ease;
}
.top-navbar.scrolled {
  background-color: #841e56;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  padding: 1rem 5vw;
}
.navbar-left { display: flex; align-items: center; gap: 1rem; }
.hamburger { cursor: pointer; display: flex; align-items: center; justify-content: center; }
.navbar-brand {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--white);
  text-decoration: none;
}
.btn-donate { background-color: #d4c766; color: white !important; padding: 0.8rem 1.5rem; text-decoration: none; border-radius: 30px; font-weight: bold; transition: background-color 0.3s; }
.btn-donate:hover { background-color: #b144b7; }

/* Side Nav */
.side-nav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  background-color: #b144b7;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  display: flex;
  flex-direction: column;
}
.side-nav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: white; display: block; transition: 0.3s; }
.side-nav a:hover { color: #d4c766; }
.side-nav .side-nav-close { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; color: white; cursor: pointer; }
.side-nav.active { width: 250px; }

/* Horizontal Scroll Container */
.scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  width: 100vw;
  height: 100vh;
  scroll-behavior: smooth;
  scrollbar-width: none; 
}
.scroll-container::-webkit-scrollbar { display: none; }

/* Single Slide */
.slide {
  flex: 0 0 100vw;
  width: 100vw;
  height: 100vh;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  padding: 6rem 10vw 4rem; /* top padding for navbar */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Backgrounds & Parallax */
.parallax-layer {
  position: absolute;
  top: -10%; left: -10%; right: -10%; bottom: -10%;
  background-size: cover;
  background-position: center;
  z-index: 0;
  will-change: transform;
}
.bg-pattern {
  background-image: radial-gradient(var(--text-light) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.05;
}
.hero-bg {
  background-image: url('./desktop-banner.webp');
}
.overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(129, 85, 104, 0.4); 
  z-index: 1;
}

.slide.bg-dark { background-color: var(--primary-dark); color: var(--white); }
.slide.bg-dark h2 { color: var(--white); }
.slide.bg-white { background-color: var(--bg-white); }
.slide.bg-light { background-color: var(--bg-light); }
.slide.bg-warli { position: relative; }
.bg-warli .parallax-layer { background-image: url('./warli_bg.webp'); opacity: 0.15; }
.bg-warli-right { position: relative; background-color: #841e56;} 
.bg-warli-right .parallax-layer { background-image: url('./footerImg.webp'); background-size: contain; background-position: right bottom; background-repeat: no-repeat; opacity: 0.6; top: 0; bottom: 0; right: 0; left: 0; }
.bg-gond .parallax-layer { background-image: url('./impactBackground.webp'); opacity: 0.4; }
.bg-mandala .parallax-layer { background-image: url('./Gemini_Generated_Image_1o6k9p1o6k9p1o6k.webp'); opacity: 0.4; background-size: cover; background-position: center; background-repeat: no-repeat; }
.bg-doodle .parallax-layer { background-image: url('./musical_doodle_bg_1775935965296.webp'); opacity: 0.4; }
.bg-creative .parallax-layer { background-image: url('./creative_support_bg_1775936047032.webp'); opacity: 0.8; }
.bg-light-mandala .parallax-layer { background-image: url('./mandala_art_bg_1775935831365.webp'); opacity: 0.05; }
.bg-light-gond .parallax-layer { background-image: url('./gond_art_bg_1775935708222.webp'); opacity: 0.05; }
.impact-box { background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(5px); padding: 3rem; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); width: 80%; }
.impact-box h2, .impact-box p { color:#841e56 !important;}

/* Content Wrappers */
.content {
  z-index: 2;
  max-width: 1200px;
  width: 100%;
}
.full-width { max-width: 100%; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.5rem;
  font-family: inherit;
  font-size: 1.1rem;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  border-radius: 30px;
  border: none;
  transition: all 0.3s ease;
  z-index: 1;
}

.btn-primary { background-color: #841e56; color: white; }
.btn-primary:hover { background-color: #d4c766; transform: scale(1.05); }

.btn-subscribe { background-color: #d4c766; color: white; }
.btn-subscribe:hover { background-color: #841e56; transform: scale(1.05); }

.btn-secondary { background-color: white; color: #841e56 !important; }
.btn-secondary:hover { background-color: #f0f0f0; transform: scale(1.05); }

.btn-outline { background-color: transparent; border: 2px solid white; color: white !important; }
.btn-outline:hover { background-color: white; color: #841e56 !important; }

.btn-text { background: none !important; color: #841e56 !important; padding: 0; }
.btn-text:hover { transform: translateX(5px); }
.btn-large { padding: 1.5rem 3.5rem; font-size: 1.3rem; }
.cta-group { display: flex; gap: 1rem; justify-content: center; margin-bottom: 2rem; }
.hero-cta { justify-content: flex-start; }

/* Layouts */
.dual-column { border-radius: 20px; padding: 3rem; background: rgba(255, 255, 255, 0.85); display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }

.dual-column-footer { border-radius: 20px; padding: 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }

/* Carousel (Projects) */
.project-carousel { display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; padding-bottom: 2rem; }
.project-card { 
  flex: 1 1 280px; 
  background: var(--white); 
  border-radius: 20px; 
  overflow: hidden; 
  box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
  transition: transform 0.3s ease;
}
.project-card:hover { transform: translateY(-10px); }
.project-card img { width: 100%; height: 200px; object-fit: cover; }
.placeholder-img { width: 100%; height: 200px; background: var(--primary-dark); color: white; display:flex; align-items:center; justify-content:center; }
.card-content { padding: 2rem; }

/* Gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.gallery-grid img { width: 100%; height: 250px; object-fit: cover; border-radius: 15px; transition: transform 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.gallery-grid img:hover { transform: scale(1.03); }

/* Testimonials */
.testimonials-container { display: flex; gap: 2rem; justify-content: center; margin-top: 2rem; }
.testimonial-card { background: rgba(255,255,255,0.95); padding: 2.5rem; border-radius: 20px; box-shadow: 0 10px 30px rgba(129, 85, 104, 0.15); flex: 1; max-width: 400px; position: relative;}
.testimonial-card p { font-style: italic; color: var(--text-dark); }
.testimonial-author { font-weight: bold; color: var(--primary); margin-top: 1rem; }
.testimonial-card::before { content: "“"; font-size: 5rem; color: var(--primary); opacity: 0.2; position: absolute; top: -10px; left: 10px; font-family: 'Outfit'; }

/* Stats Grid */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin: 3rem 0; }
.stat-item h3 { display: inline-block; font-size: 4rem; color:#841e56; margin-bottom: 0.5rem;}
.stat-item span { display: inline-block; font-size: 3rem; font-weight: bold; color: #841e56; font-family: 'Playfair Display', serif; margin-left: 5px; }
.stat-item ul { list-style: none; padding: 0; margin: 0.5rem 0 0 0; text-align: center; }
.stat-item li { font-size: 1.1rem; line-height: 1.4; color: #841e56 !important;}

/* Forms */
.glass-form {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  padding: 3rem;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}
.box-content { background: rgba(255,255,255,0.85); padding: 3rem; border-radius: 20px; }

.input-group { margin-bottom: 1.5rem; }
input, textarea {
  width: 100%;
  padding: 1rem 1.5rem;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  background: var(--bg-white);
  transition: border-color 0.3s;
}
input:focus, textarea:focus { outline: none; border-color: var(--primary); }

/* Donation Options */
.donation-options { display: flex; justify-content: center; gap: 2rem; margin: 3rem 0; }
.donate-card { background: var(--white); padding: 3rem 2rem; border-radius: 20px; text-align: center; flex: 1; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 2px solid transparent; transition: transform 0.3s; }
.donate-card.featured { border-color: var(--accent); transform: scale(1.05); }

/* News Scroll */
.news-scroll { display: flex; gap: 2rem; }
.news-card { flex: 1; min-width: 300px; padding: 2rem; background: var(--white); border-radius: 20px; border-left: 4px solid var(--accent); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.news-date { color: var(--primary); font-weight: 600; margin-bottom: 0.5rem; }

/* Partner Grid */
.partner-grid { display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap; margin-top: 3rem; }
.partner-logo { font-size: 1.5rem; font-weight: 800; color: var(--text-light); text-transform: uppercase; letter-spacing: 2px; filter: grayscale(100%); opacity: 0.6; transition: all 0.3s; cursor: pointer;}
.partner-logo:hover { filter: grayscale(0%); opacity: 1; color: var(--primary); }

/* Footer */
.footer-slide { color: var(--white); }
.footer-slide h2, .footer-slide p { color: var(--white); text-shadow: 1px 1px 4px rgba(0,0,0,0.8); }
.contact-info a { color: #d4c766; text-decoration: none; text-shadow: 1px 1px 4px rgba(0,0,0,0.8); }
.social-links { color: var(--white); text-shadow: 1px 1px 4px rgba(0,0,0,0.8); }
.social-links a { color: var(--white); margin-right: 1rem; text-decoration: none; font-weight: 600; }
.footer-bottom { position: absolute; bottom: 2rem; left: 0; width: 100%; font-size: 0.9rem; color: var(--white); opacity: 0.9;}
.nl-form { display: flex; gap: 1rem; margin-top: 1.5rem; }

/* Animation Classes */
.fade-up { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* Dot Navigation - hidden since we added navbar, but keeping for smooth scrolling if needed */
.nav-dots { display: none; }

/* Responsive adjustments */
@media(max-width: 900px) {
  .scroll-container {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
  }
  .slide { 
    padding: 6rem 5vw 4rem; 
    width: 100%;
    height: auto;
    min-height: 100vh;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
   
  .hero-cta { flex-direction: column; align-items: stretch; }
  .social-icons { text-align: center; }
  .hero-bg { background-image: url('./mobile-cover.webp'); }
  .top-navbar { padding: 1rem 5vw; }
  .top-navbar.scrolled { padding: 0.8rem 5vw; }
  .navbar-brand { font-size: 1.2rem; }
  .btn-donate { padding: 0.5rem 1rem; font-size: 0.9rem; white-space: nowrap; }
  .dual-column { grid-template-columns: 1fr; gap: 2rem; }
  .dual-column-footer{ grid-template-columns: 1fr; gap: 2rem; }
  .gallery-grid { grid-template-columns: 1fr; }
  .testimonials-container { flex-direction: column; }
  h1 { font-size: 3rem; }
  .nav-dots { padding: 0.25rem 0.75rem; gap: 0.5rem; }
  .dot { width: 8px; height: 8px; }
  .donation-options { flex-direction: column; }
  .project-carousel { gap: 1rem; }
  .impact-box { width: 95%; padding: 1.5rem; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .stat-item h3 { font-size: 2.2rem; }
  .stat-item p { font-size: 0.9rem; }
  .nl-form { flex-direction: column; }
  .footer-bottom { position: relative; bottom: 0; margin-top: 2rem; }
  .bg-warli-right .parallax-layer { background-image: none; }

  #volunteer .text-content { align-items: center !important; text-align: center !important; }
  #volunteer .text-content .btn { white-space: nowrap; }

  #about .text-col .btn { display: flex; margin: 0 auto; width: max-content; }
}

/* Custom Hero Text Box & Animation Styles */
.hero-text-box {
  border-radius: 0;
  display: inline-block;
  margin-bottom: 1rem;
  opacity: 0;
  animation: slideInLeft 1s ease-out forwards 0.2s;
}

.hero-animated-title {
  font-size: 4.5rem;
  margin-bottom: 1rem;
  line-height: 1.2;
  text-shadow: none;
  color: var(--white);
  font-weight: bold;
}

.hero-subtitle {
  font-size: 1.5rem;
  color: var(--white);
  font-weight: 300;
  max-width: 600px;
  margin-top: 1.5rem;
  margin-bottom: 0;
}

.text-yellow {
  color: #d4c766; /* Bright gold/yellow */
  display: inline-block;
  animation: fadeInPop 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  animation-delay: 0.5s;
}

.has-brush-underline {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

/* Animations */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInPop {
  0% { opacity: 0; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes revealBrush {
  0% { clip-path: inset(0 100% 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 1; }
}

@media(max-width: 900px) {
  .hero-text-box {
    padding: 2rem;
  }
  .hero-animated-title { font-size: 2.5rem; }
  .hero-subtitle { font-size: 1.1rem; }
}

/* Custom Cards / Initiatives specific design */
.bg-initiatives { position: relative;}
.bg-initiatives .parallax-layer { background-image: url('warli_bg.webp'); opacity: 0.15; background-size: cover; background-position: center; }
.overlay-initiatives { display: none; }

.custom-cards {
  padding-bottom: 2rem;
}
.custom-card {
  min-width: 250px;
  max-width: 270px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex !important;
  flex-direction: column;
}
.custom-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.custom-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 15px 35px rgba(0,0,0,0.25);
  z-index: 5;
}
.custom-card .card-content {
  flex-grow: 1;
  padding: 1.5rem;
}
.custom-card h3 { margin-bottom: 0.5rem; color: var(--primary-dark); font-size: 1.3rem;}
.custom-card p { font-size: 0.9rem; color: var(--text-dark); margin-bottom: 0; }

/* Dual Column Impact Section */
.width-fixed {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.dual-column-layout {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: 100%;
}
.impact-image-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
}
.impact-mandala-img {
  width: 100%;
  max-width: 400px;
  max-height: 50vh;
  object-fit: contain;
}
.impact-layout .impact-box {
  flex: 1;
}

/* Media Blocks Strict Grid for horizontal view safety */
.media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  width: 100%;
  max-height: 65vh; /* Prevents overflow into horizontal layout */
}
.media-block {
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 450px; /* Fixed height for safety */
}
.youtube-block iframe {
  width: 100%;
  height: 100%;
}
.instagram-container {
  overflow-y: auto;
}

@media(max-width: 900px) {
  .dual-column-layout { flex-direction: column; text-align: center; gap: 2rem;}
  .impact-mandala-img { max-width: 250px; }
  .media-grid { grid-template-columns: 1fr; max-height: none; gap: 2rem; padding-bottom: 2rem; }
  .media-block { height: 350px; }
}

/* Media Gallery Auto-Carousel */
.gallery-carousel {
  width: 100vw;
  margin-left: calc(-50vw + 50%); /* allows full bleed ignoring container padding */
  overflow: hidden;
  position: relative;
  padding: 1rem 0;
  white-space: nowrap;
}
.gallery-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: scrollGallery 25s linear infinite;
}
.gallery-track:hover {
  animation-play-state: paused;
}
.gallery-img {
  width: 650px;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}
.gallery-img:hover {
  transform: scale(1.05);
}

@keyframes scrollGallery {
  0% { transform: translateX(0); }
  /* Each block is 350+20 = 370px. 5 blocks = 1850px */
  100% { transform: translateX(-1850px); }
}

@media(max-width: 900px) {
  .gallery-img {
    width: 250px;
    height: 180px;
  }
  @keyframes scrollGalleryMobile {
    0% { transform: translateX(0); }
    /* 250+20=270px. 5 blocks = 1350px */
    100% { transform: translateX(-1350px); }
  }
  .gallery-track {
    animation: scrollGalleryMobile 20s linear infinite;
  }
}

/* Shopping Cart Icon Hover */
.cart-icon { transition: transform 0.2s; display: inline-flex; align-items: center; justify-content: center; }
.cart-icon:hover { transform: scale(1.1); }

/* Global Scroll Next Button */
.global-scroll-next, .global-scroll-prev {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
  color: #841e56;
}
.global-scroll-next { right: 20px; }
.global-scroll-prev { left: 20px; }

.global-scroll-next:hover, .global-scroll-prev:hover {
  background: white;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
@media (max-width: 900px) {
  .global-scroll-next, .global-scroll-prev {
    display: none; /* Hide on mobile since scroll is vertical */
  }
}

/* Volunteer Section Adjustments */
.volunteer-dual-column {
  align-items: stretch !important; /* Force columns to share the maximum height */
}

.volunteer-quote {
  font-size: 2.8rem;
  font-style: italic; 
  color: #841e56 !important; 
  margin-bottom: 2.5rem; 
  line-height: 1.4; 
  text-shadow: none;
}

.volunteer-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Gracefully fills matching height regardless of aspect ratio */
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

@media(max-width: 900px) {
  .volunteer-quote {
    font-size: 2.2rem;
  }
}