/* main.css - Hanuman Temple (Maharatri Design Inspired) */
:root{
  --primary-saffron:#d97706;
  --dark-gold:#8b4513;
  --deep-red:#7f1d1d;
  --light-gold:#fef3c7;
  --accent-orange:#ea580c;
  --dark-bg:#1a1a1a;
  --light-text:#f5f5f5;
  --dev-font:'Playfair Display', serif;
  --sans-font:'Poppins', sans-serif;
  --accent-font:'Cinzel', serif;
}

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans-font);color:#333;background:#fff;line-height:1.6}
html{scroll-behavior:smooth}

/* Typography */
h1,h2,h3,h4,h5,h6{font-family:var(--accent-font);color:var(--dark-gold)}
.section-title{
  font-size:3rem;
  font-family:var(--dev-font);
  color:var(--primary-saffron);
  text-transform:uppercase;
  letter-spacing:2px;
  margin-bottom:1rem;
}

/* Header & Navbar */
.site-header{
  background:linear-gradient(135deg, #fff 0%, #fffbeb 100%);
  border-bottom:3px solid var(--primary-saffron);
}
.site-header .logo{
  width:100px;
  height:100px;
  object-fit:contain;
  border-radius:50%;
}
.temple-name{
  font-family:var(--dev-font);
  color:var(--primary-saffron);
  font-size:1.3rem;
  font-weight:700;
}
.navbar-nav .nav-link{
  font-family:var(--accent-font);
  color:var(--dark-gold);
  margin-left:1rem;
  text-transform:uppercase;
  font-size:0.9rem;
  letter-spacing:1px;
  transition:all 0.3s ease;
  font-weight: bold;
}
.navbar-nav .nav-link:hover{
  color:var(--primary-saffron);
  text-shadow:0 2px 4px rgba(217,119,6,0.2);
}

/* Hero Section */
.hero-section{
  position:relative;
  background-size:cover;
  background-position:center;
  padding:10rem 0;
  min-height:600px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-section::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(45deg, rgba(127, 29, 29, 0.7), rgb(0 0 0 / 60%), rgba(139, 69, 19, 0.5));
  z-index:1;
}
.hero-content{
  position:relative;
  z-index:2;
  text-align:center;
  color:#fff;
  text-shadow:2px 2px 8px rgba(0,0,0,0.5);
}
.hero-content h1{
  font-size:4.5rem;
  font-family:var(--dev-font);
  color:var(--light-gold);
  text-shadow:3px 3px 6px rgba(0,0,0,0.7);
  margin-bottom:1rem;
  letter-spacing:2px;
}
.hero-content .lead{
  font-size:1.4rem;
  color:#fff;
  margin-bottom:2rem;
  font-style:italic;
  font-family:var(--dev-font);
}

/* Buttons */
.btn-warning{
  background:var(--primary-saffron);
  border-color:var(--primary-saffron);
  color:#fff;
  font-family:var(--accent-font);
  font-size:1rem;
  padding:0.8rem 2rem;
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:600;
  transition:all 0.3s ease;
}
.btn-warning:hover{
  background:var(--accent-orange);
  border-color:var(--accent-orange);
  transform:translateY(-2px);
  box-shadow:0 8px 16px rgba(217,119,6,0.3);
}

/* About Section */
#about-preview{
  /* padding:4rem 0; */
  /* background:#fafaf8; */
}
#about-preview h2{
  font-size:2.5rem;
  margin-bottom:1.5rem;
}
#about-preview img{
  border-radius:8px;
  box-shadow:0 10px 30px rgba(217,119,6,0.15);
  border:3px solid var(--primary-saffron);
}

/* Timings Section */
.timings-section{
  background:linear-gradient(135deg, var(--dark-gold) 0%, var(--deep-red) 100%);
  color:#fff;
  padding:4rem 0;
}
.timings-section h3{
  color:var(--light-gold);
  font-family:var(--dev-font);
  font-size:2.5rem;
  text-align:center;
  margin-bottom:3rem;
  text-transform:uppercase;
  letter-spacing:2px;
}
.timing-card{
  background:rgba(255,255,255,0.1);
  backdrop-filter:blur(10px);
  border:2px solid rgba(254,243,199,0.3);
  padding:2rem;
  border-radius:8px;
  text-align:center;
  transition:all 0.3s ease;
}
.timing-card:hover{
  background:rgba(255,255,255,0.15);
  transform:translateY(-5px);
  border-color:var(--light-gold);
  box-shadow:0 15px 35px rgba(0,0,0,0.3);
}
.timing-card h5{
  color:var(--light-gold);
  font-family:var(--accent-font);
  font-size:1.3rem;
  margin-bottom:0.5rem;
  text-transform:uppercase;
}
.timing-card p{
  font-size:1rem;
  color:#fff;
  margin:0;
  font-weight:600;
}

/* Services Section */
#services{
  /* padding:4rem 0; */
}
.service-box{
  background:#fff;
  border-radius:8px;
  padding:2.5rem;
  border-top:4px solid var(--primary-saffron);
  text-align:center;
  transition:all 0.3s ease;
  box-shadow:0 5px 15px rgba(0,0,0,0.08);
}
.service-box:hover{
  transform:translateY(-8px);
  box-shadow:0 15px 35px rgba(217,119,6,0.15);
}
.service-box i{
  color:var(--primary-saffron);
  margin-bottom:1rem;
}
.service-box h5{
  color:var(--dark-gold);
  margin-bottom:0.5rem;
}

/* Video Section */
.video-section{
  background:
    radial-gradient(circle at top left, rgba(254,243,199,0.95), rgba(254,243,199,0) 45%),
    linear-gradient(135deg, #fff8ee 0%, #fff 50%, #fff3df 100%);
}
.video-eyebrow{
  display:inline-block;
  margin-bottom:1rem;
  padding:0.4rem 0.9rem;
  border-radius:999px;
  background:rgba(217,119,6,0.12);
  color:var(--primary-saffron);
  font-size:0.85rem;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
}
.video-title{
  font-family:var(--dev-font);
  font-size:2.6rem;
  color:var(--dark-gold);
  margin-bottom:1rem;
}
.video-description{
  font-size:1.05rem;
  color:#5b4636;
  margin-bottom:1rem;
}
.video-note{
  color:var(--primary-saffron);
  font-size:0.95rem;
  font-weight:500;
}
.video-frame-wrap{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  padding:0.75rem;
  background:linear-gradient(135deg, var(--deep-red) 0%, var(--dark-gold) 55%, var(--primary-saffron) 100%);
}
.video-frame-wrap iframe{
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  min-height:320px;
  border:0;
  border-radius:12px;
  background:#000;
}

/* Gallery */
.gallery-thumb{
  height:300px;
  object-fit:cover;
  width:100%;
  border-radius:8px;
  transition:all 0.3s ease;
  border:2px solid transparent;
}
.gallery-thumb:hover{
  transform:scale(1.05);
  border-color:var(--primary-saffron);
  box-shadow:0 8px 20px rgba(217,119,6,0.2);
}
.gallery-thumb-click{
  height:320px;
  object-fit:cover;
  width:100%;
  cursor:pointer;
  border-radius:8px;
  transition:all 0.3s ease;
}
.gallery-thumb-click:hover{
  transform:scale(1.05);
  box-shadow:0 10px 25px rgba(217,119,6,0.25);
}

/* Devotional Quote */
.devotional-quote{
  background:linear-gradient(135deg, var(--primary-saffron) 0%, var(--accent-orange) 50%, var(--dark-gold) 100%);
  color:#fff;
  padding:3rem;
  border-radius:8px;
  text-align:center;
  margin:2rem 0 0 0;
}
.devotional-quote h4{
  font-family:var(--dev-font);
  font-size:1.8rem;
  color:var(--light-gold);
  margin-bottom:1rem;
  font-style:italic;
}

.donation-section{
  background:
    radial-gradient(circle at top right, rgba(254,243,199,0.9), rgba(254,243,199,0) 42%),
    linear-gradient(135deg, #fffaf0 0%, #ffffff 55%, #fff1dc 100%);
  border:1px solid rgba(217,119,6,0.16);
  border-radius:24px;
  box-shadow:0 18px 40px rgba(139,69,19,0.08);
  padding:2rem;
}

.donation-eyebrow{
  display:inline-block;
  padding:0.45rem 0.85rem;
  border-radius:999px;
  background:rgba(217,119,6,0.12);
  color:var(--primary-saffron);
  font-size:0.82rem;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
}

.donation-details-card{
  background:#fff;
  border-radius:18px;
  border:1px solid rgba(217,119,6,0.15);
  box-shadow:0 12px 30px rgba(127,29,29,0.06);
  padding:1.5rem;
}

.donation-label{
  color:#9a6a3f;
  font-size:0.85rem;
  font-weight:600;
  letter-spacing:0.4px;
  text-transform:uppercase;
}

.donation-value{
  color:var(--dark-gold);
  font-size:1rem;
  font-weight:700;
  word-break:break-word;
}

.donation-qr-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100%;
  padding:1.5rem;
  background:#fff;
  border:1px solid rgba(217,119,6,0.18);
  border-radius:22px;
  box-shadow:0 14px 32px rgba(139,69,19,0.1);
  text-align:center;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}

.donation-qr-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px rgba(217,119,6,0.16);
}

.donation-qr-image{
  width:100%;
  max-width:260px;
  border-radius:18px;
  border:6px solid #fff7ec;
  box-shadow:0 10px 24px rgba(0,0,0,0.08);
}

/* Footer */
.site-footer{
  background:linear-gradient(135deg, var(--dark-bg) 0%, var(--dark-gold) 100%);
  color:var(--light-text);
  padding-top:3rem;
}
.site-footer h5{
  color:var(--light-gold);
  font-family:var(--accent-font);
  margin-bottom:1rem;
  text-transform:uppercase;
  letter-spacing:1px;
}
.site-footer a{
  color:var(--light-text);
  text-decoration:none;
  transition:color 0.3s ease;
}
.site-footer a:hover{
  color:var(--light-gold);
}
.social-icons a{
  display:inline-block;
  width:40px;
  height:40px;
  line-height:40px;
  text-align:center;
  border-radius:50%;
  background:rgba(254,243,199,0.1);
  transition:all 0.3s ease;
  margin-right:0.5rem;
}
.social-icons a:hover{
  background:var(--primary-saffron);
  transform:translateY(-3px);
}

/* Page Loader */
#page-loader{
  position:fixed;
  inset:0;
  background:linear-gradient(135deg, #ff0000 0%, #fff 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
#page-loader .spinner{
  text-align:center;
}
#page-loader .spinner img{
  width:120px;
  /* animation:spin 2s linear infinite; */
}
@keyframes spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

/* Responsive */
@media (max-width:768px){
  .hero-section{padding:6rem 0;min-height:400px}
  .hero-content h1{font-size:2.5rem}
  .hero-content .lead{font-size:1rem}
  .service-box{padding:1.5rem}
  .video-title{font-size:2rem}
  .video-frame-wrap iframe{min-height:220px}
  .gallery-thumb{height:100%}
  .timings-section h3{font-size:1.8rem}
  .timing-card{padding:1.5rem}
  .timing-card p{font-size:1.3rem}
  .donation-section{padding:1.4rem}
  .site-header .logo{width:60px;height:60px}
  .temple-name{font-size:1rem}
  button.navbar-toggler {
    margin: 0 10px;
  }
  .gallery-thumb-click{
    height:100%;
  }
}

@media (max-width:420px){

  .site-header .logo{width:40px;height:40px}
  img.logo.me-2{margin-right:0.1rem !important}
  .temple-name{font-size:0.9rem}
}

/* Accessibility */
/* a:focus{outline:3px solid var(--primary-saffron);outline-offset:2px} */
button:focus{outline:3px solid var(--primary-saffron);outline-offset:2px}

/* =========================================
   Pournami Annadanam Section
   ========================================= */
.annadanam-section{
  background:
    radial-gradient(circle at top left, rgba(254,243,199,0.95), rgba(254,243,199,0) 38%),
    linear-gradient(135deg, #fff8ef 0%, #fffdf9 48%, #fff2df 100%);
  padding:5rem 0;
  position:relative;
  overflow:hidden;
}
.annadanam-section .container{
  max-width:1180px;
  position:relative;
  z-index:1;
}
.annadanam-section .row{
  --bs-gutter-x:2rem;
  --bs-gutter-y:2rem;
}
.annadanam-section::before{
  content:'';
  position:absolute;
  inset:auto -120px -140px auto;
  width:320px;
  height:320px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(217,119,6,0.12) 0%, rgba(217,119,6,0.02) 55%, rgba(217,119,6,0) 72%);
  pointer-events:none;
}
.annadanam-eyebrow{
  display:inline-block;
  padding:0.45rem 1rem;
  border-radius:999px;
  background:rgba(217,119,6,0.1);
  color:var(--primary-saffron);
  font-size:0.82rem;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  margin-bottom:0.75rem;
  border:1px solid rgba(217,119,6,0.12);
}
.annadanam-section h2{
  font-family:var(--dev-font);
  color:var(--dark-gold);
  font-size:3rem;
  margin-bottom:0.75rem;
  line-height:1.12;
}
.annadanam-section .section-lead{
  color:#6b4c2a;
  font-size:1.08rem;
  max-width:700px;
  margin:0 auto;
  line-height:1.7;
}
.annadanam-story-card{
  background:#fff;
  border-radius:28px;
  border:1px solid rgba(217,119,6,0.12);
  box-shadow:0 20px 45px rgba(139,69,19,0.08);
  padding:2.5rem;
  height:100%;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.annadanam-story-card::after{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:6px;
  background:linear-gradient(180deg, var(--primary-saffron) 0%, var(--accent-orange) 100%);
}
.annadanam-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1.25rem;
  margin-bottom:1.5rem;
}
.annadanam-mini-label{
  display:inline-block;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:#9a6a3f;
  margin-bottom:0.55rem;
}
.annadanam-story-card h3{
  font-family:var(--accent-font);
  color:var(--dark-gold);
  font-size:1.6rem;
  margin:0;
  line-height:1.25;
}
.annadanam-icon-badge{
  width:64px;
  height:64px;
  border-radius:20px;
  background:linear-gradient(135deg, #fff3dc 0%, #ffe2be 100%);
  color:var(--primary-saffron);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  box-shadow:0 10px 22px rgba(217,119,6,0.14);
  flex-shrink:0;
}
.annadanam-copy{
  color:#5a4030;
  line-height:1.8;
  margin-bottom:1.85rem;
  font-size:1rem;
  max-width:62ch;
}
.annadanam-feature-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1.1rem;
  margin-bottom:2rem;
}
.annadanam-feature-card{
  display:flex;
  align-items:flex-start;
  gap:0.85rem;
  background:#fffaf2;
  border:1px solid rgba(217,119,6,0.1);
  border-radius:18px;
  padding:1.1rem 1rem;
  min-height:104px;
}
.annadanam-feature-card i{
  color:var(--primary-saffron);
  width:18px;
  flex-shrink:0;
  margin-top:0.18rem;
}
.annadanam-feature-card strong{
  display:block;
  color:var(--dark-gold);
  font-size:1rem;
  margin-bottom:0.25rem;
  line-height:1.35;
}
.annadanam-feature-card span{
  display:block;
  color:#6c5141;
  font-size:0.9rem;
  line-height:1.6;
}
.annadanam-actions{
  display:flex;
  gap:0.85rem;
  flex-wrap:wrap;
  align-items:center;
  margin-top:auto;
}

.annadanam-actions .btn{
  min-width:220px;
  padding:0.85rem 1.6rem;
}
.btn-annadanam-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:180px;
  padding:0.8rem 1.45rem;
  border-radius:999px;
  border:1px solid rgba(217,119,6,0.2);
  background:#fff7ec;
  color:var(--dark-gold);
  text-decoration:none;
  font-family:var(--accent-font);
  font-size:0.92rem;
  font-weight:700;
  letter-spacing:0.5px;
  transition:transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.btn-annadanam-secondary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(217,119,6,0.12);
  background:#fff2db;
  color:var(--dark-gold);
}
.annadanam-support-card{
  background:linear-gradient(155deg, #6f200f 0%, #8b4513 46%, #c56c16 100%);
  border-radius:28px;
  padding:2.45rem;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color:#fff;
  box-shadow:0 22px 50px rgba(127,29,29,0.24);
  position:relative;
  overflow:hidden;
}
.annadanam-support-card::before{
  content:'';
  position:absolute;
  top:-70px;
  right:-70px;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(254,243,199,0.22) 0%, rgba(254,243,199,0) 72%);
}
.annadanam-support-tag{
  display:inline-flex;
  align-self:flex-start;
  padding:0.4rem 0.85rem;
  border-radius:999px;
  background:rgba(255,255,255,0.12);
  color:#fff9de;
  font-size:0.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.2px;
  border:1px solid rgba(255,255,255,0.12);
  position:relative;
  z-index:1;
}
.annadanam-support-icon{
  width:74px;
  height:74px;
  border-radius:22px;
  background:rgba(255,255,255,0.12);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.6rem;
  color:var(--light-gold);
  margin:1.35rem 0 1rem;
  position:relative;
  z-index:1;
}
.annadanam-support-card h3{
  font-family:var(--dev-font);
  color:#fff8d8;
  font-size:2rem;
  margin-bottom:0.9rem;
  position:relative;
  z-index:1;
  line-height:1.15;
}
.annadanam-support-card p{
  color:rgba(255,255,255,0.88);
  font-size:1rem;
  margin-bottom:1.5rem;
  line-height:1.7;
  position:relative;
  z-index:1;
}
.annadanam-support-list{
  display:flex;
  flex-direction:column;
  gap:0.9rem;
  margin-bottom:1.8rem;
  padding:1.15rem 0;
  border-top:1px solid rgba(255,255,255,0.12);
  border-bottom:1px solid rgba(255,255,255,0.12);
  position:relative;
  z-index:1;
}
.annadanam-support-item{
  display:flex;
  align-items:center;
  gap:0.7rem;
  color:#fff8ea;
  font-size:0.94rem;
  line-height:1.55;
}
.annadanam-support-item span{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#ffe199;
  box-shadow:0 0 0 5px rgba(255,225,153,0.14);
  flex-shrink:0;
}
.annadanam-support-actions{
  display:flex;
  flex-direction:column;
  gap:0.9rem;
  position:relative;
  z-index:1;
  margin-top:auto;
}
.btn-annadanam-donate{
  background:var(--light-gold);
  color:var(--dark-gold);
  font-family:var(--accent-font);
  font-weight:700;
  font-size:0.9rem;
  padding:0.8rem 1.75rem;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:1px;
  border:none;
  transition:background 0.25s ease,transform 0.25s ease,box-shadow 0.25s ease;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:54px;
}
.btn-annadanam-donate:hover{
  background:#fff;
  color:var(--dark-gold);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,0.2);
}
.btn-annadanam-join{
  background:rgba(255,255,255,0.08);
  color:var(--light-gold);
  border:1px solid rgba(254,243,199,0.36);
  font-family:var(--accent-font);
  font-weight:600;
  font-size:0.88rem;
  padding:0.78rem 1.5rem;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:1px;
  transition:background 0.25s ease,border-color 0.25s ease,transform 0.25s ease;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:52px;
}
.btn-annadanam-join:hover{
  background:rgba(254,243,199,0.15);
  border-color:var(--light-gold);
  color:var(--light-gold);
  transform:translateY(-2px);
}
@media(max-width:768px){
  .annadanam-section{padding:3.5rem 0}
  .annadanam-section .row{--bs-gutter-x:1rem;--bs-gutter-y:1.25rem}
  .annadanam-section h2{font-size:2.15rem}
  .annadanam-section .section-lead{font-size:0.98rem;max-width:100%}
  .annadanam-story-card,
  .annadanam-support-card{padding:1.5rem;border-radius:22px}
  .annadanam-card-head{align-items:center;gap:0.9rem;margin-bottom:1.15rem}
  .annadanam-icon-badge{width:54px;height:54px;border-radius:16px;font-size:1.2rem}
  .annadanam-copy{margin-bottom:1.4rem}
  .annadanam-feature-grid{grid-template-columns:1fr;gap:0.85rem;margin-bottom:1.5rem}
  .annadanam-feature-card{min-height:auto;padding:1rem}
  .annadanam-actions{flex-direction:column;gap:0.75rem}
  .annadanam-actions .btn,
  .btn-annadanam-secondary{width:100%;min-width:0;margin-right:0}
  .annadanam-support-card h3{font-size:1.7rem}
  .annadanam-support-icon{margin:1rem 0 0.85rem}
  .annadanam-support-list{padding:1rem 0;margin-bottom:1.4rem}
  .annadanam-section::before{width:220px;height:220px;right:-90px;bottom:-120px}
}