/* ==============================
   ROOT COLORS (SIKH PALETTE)
============================== */
:root{
  --khalsa-blue:#0A2A66;
  --nishan-saffron:#FF9933;
  --spiritual-gold:#C9A24D;
  --cream-bg:#FFF4E6;
  --white:#ffffff;
  --text-dark:#2a2a2a;
}

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

body{
  font-family:"Georgia","Times New Roman",serif;
  line-height:1.7;
  color:var(--text-dark);
  background:var(--white);
  overflow-x:hidden;
}

/* ==============================
   HEADER
============================== */
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 28px;
  background:var(--khalsa-blue);
  color:#fff;
  position:sticky;
  top:0;
  z-index:1000;
}

.logo{
  font-size:1.3rem;
  font-weight:bold;
}

.main-nav a{
  color:#fff;
  margin:0 12px;
  text-decoration:none;
  font-size:.95rem;
  border-bottom:2px solid transparent;
}

.main-nav a:hover{
  border-bottom:2px solid var(--nishan-saffron);
}

.lang-toggle button{
  background:transparent;
  border:1px solid #fff;
  color:#fff;
  padding:6px 12px;
  cursor:pointer;
}
.lang-toggle button:hover{
  background:var(--nishan-saffron);
  color:#000;
}

/* ==============================
   HERO
============================== */
.hero{
  min-height:70vh;
  background:
    linear-gradient(
      rgba(10,42,102,0.65),
      rgba(10,42,102,0.65)
    ),
    url("/assets/images/hero.jpg") center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:120px 20px 80px;
  position:relative;
}
.overlay{
  position:absolute;
  inset:0;
  background:rgba(10,42,102,.65);
}

.hero-content{
  position:relative;
  text-align:center;
  max-width:900px;
  color:#fff;
}

.hero-content h1{
  font-size:3rem;
  margin-bottom:15px;
}

.hero-content p{
  font-size:1.2rem;
}

/* HERO CTA */
.hero-actions{margin-top:30px}

.donate-btn{
  background:linear-gradient(135deg,var(--nishan-saffron),var(--spiritual-gold));
  padding:18px 40px;
  border-radius:50px;
  color:#000;
  text-decoration:none;
  font-weight:bold;
  font-size:1.2rem;
  box-shadow:0 10px 26px rgba(0,0,0,.35);
  display:inline-block;
  transition:.3s;
}
.donate-btn:hover{transform:translateY(-4px)}

/* ==============================
   FADE-IN
============================== */
.fade{
  opacity:0;
  transform:translateY(30px);
  transition:all .7s ease;
}
.fade.show{
  opacity:1;
  transform:none;
}

/* ==============================
   SECTION BASE
============================== */
.section{
  padding:80px 20px;
  text-align:center;
}

.section h2{
  font-size:2rem;
  margin-bottom:25px;
  color:var(--khalsa-blue);
}

.section.cream{background:var(--cream-bg)}
.section.blue{background:var(--khalsa-blue);color:#fff}
.section.blue h2{color:#fff}

/* ==============================
   BABA JI
============================== */
.baba-spotlight{
  background:var(--cream-bg);
  padding:80px 20px;
  border-top:6px solid var(--nishan-saffron);
  border-bottom:6px solid var(--nishan-saffron);
}

.baba-card{
  max-width:1200px;
  margin:auto;
  display:flex;
  gap:40px;
  align-items:flex-start;
}

.baba-image{flex:0 0 320px}
.baba-image img{
  width:100%;
  border:5px solid var(--spiritual-gold);
}

.baba-text{flex:1}
.baba-text h2{margin-bottom:14px}

.baba-text p{
  margin-bottom:14px;
  text-align:justify;
}

.punjabi-text{
  font-size:1.15rem;
  line-height:1.9;
}

.quote-box{
  background:#fff;
  padding:16px;
  border-left:5px solid var(--spiritual-gold);
  font-style:italic;
  margin:20px 0;
}

.read-more-btn{
  font-weight:bold;
  color:var(--khalsa-blue);
  text-decoration:none;
}

.baba-news{
  margin-top:15px;
  padding:12px;
  background:#fff;
  border-left:4px solid var(--spiritual-gold);
}

/* ==============================
   LIVE KIRTAN
============================== */
.kirtan-btn{
  background:#fff;
  border:3px solid var(--nishan-saffron);
  padding:18px 32px;
  font-size:1.2rem;
  border-radius:45px;
  cursor:pointer;
  margin-top:25px;
}
.kirtan-btn:hover{background:var(--nishan-saffron)}

/* ==============================
   TWO COLUMN
============================== */
.two-col{
  max-width:1200px;
  margin:40px auto 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}

.col{
  background:#fff;
  padding:30px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

/* DAILY PROGRAM */
.schedule-list div{
  padding:12px 0;
  border-bottom:1px solid #eee;
}

/* HUKAMNAMA */
.hukamnama-col img{
  width:100%;
  border:4px solid var(--spiritual-gold);
  margin:15px 0;
}

/* ==============================
   EVENTS
============================== */
.event-scroll{
  max-height:360px;
  overflow-y:auto;
}

.event-scroll img{
  width:100%;
  margin-bottom:15px;
  border:3px solid var(--spiritual-gold);
}

.event-item{
  border-bottom:1px solid #eee;
  padding-bottom:15px;
  margin-bottom:20px;
}

/* ==============================
   GURMAT
============================== */
.gurmukhi{
  font-size:2rem;
  color:var(--khalsa-blue);
  margin:20px 0;
}
.english{max-width:700px;margin:auto}

/* ==============================
   GALLERY
============================== */
.gallery{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:25px;
}

.photo-card{
  background:#fff;
  border:1px solid var(--spiritual-gold);
  padding:12px;
}

/* ==============================
   MAP
============================== */
.map-box iframe{
  width:100%;
  height:320px;
  border:0;
}

/* ==============================
   FOOTER
============================== */
footer{
  background:var(--khalsa-blue);
  color:#fff;
  text-align:center;
  padding:30px 15px;
}

/* ==============================
   FLOATING DONATE
============================== */
.floating-donate{
  position:fixed;
  right:20px;
  bottom:20px;
  background:linear-gradient(135deg,var(--nishan-saffron),var(--spiritual-gold));
  padding:14px 22px;
  border-radius:50px;
  color:#000;
  text-decoration:none;
  font-weight:bold;
  z-index:9999;
}

/* ==============================
   MOBILE
============================== */
@media(max-width:768px){
  .main-nav{display:none}
  .hero-content h1{font-size:2rem}
  .baba-card{flex-direction:column;text-align:center}
  .baba-image{max-width:260px;margin:auto}
  .baba-text p{text-align:left}
  .two-col{grid-template-columns:1fr}
  .gurmukhi{font-size:1.6rem}
}
/* ==============================
   MEDIA / NEWS GALLERY FIX
============================== */

.gallery{
  max-width:1200px;
  margin:40px auto 0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:30px;
  align-items:stretch;
}

.photo-card{
  background:#fff;
  border:1px solid var(--spiritual-gold);
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  padding:12px;
  display:flex;
  flex-direction:column;
}

.photo-card img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  border-bottom:1px solid #eee;
}

.photo-card .caption{
  padding-top:10px;
  font-size:0.95rem;
  line-height:1.5;
  text-align:center;
  flex-grow:1;
}

/* Prevent overlap caused by floats (safety) */
.photo-card,
.gallery{
  clear:both;
}

/* ==============================
   MOBILE FIX
============================== */
@media(max-width:768px){
  .gallery{
    grid-template-columns:1fr;
    gap:20px;
  }
}
/* ==============================
   CORE TEACHINGS – PREMIUM DESIGN
============================== */
.teachings-section{
  background:linear-gradient(180deg,#fff,#fdf6ec);
}

.teachings-grid{
  max-width:1200px;
  margin:50px auto 0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:30px;
}

.teaching-card{
  background:#fff;
  padding:30px 25px;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  text-align:center;
  transition:.4s ease;
  border-top:5px solid var(--spiritual-gold);
}

.teaching-card:hover{
  transform:translateY(-8px);
}

.teaching-icon{
  font-size:2.4rem;
  display:block;
  margin-bottom:12px;
  color:var(--khalsa-blue);
}

.teaching-card h3{
  color:var(--khalsa-blue);
  margin-bottom:10px;
}

.teaching-card p{
  font-size:1rem;
  color:#444;
}

/* ==============================
   TIMELINE – DESIGNER STYLE
============================== */
.timeline-section{
  position:relative;
}

.timeline-modern{
  max-width:900px;
  margin:50px auto 0;
  position:relative;
  padding-left:30px;
}

.timeline-modern::before{
  content:"";
  position:absolute;
  left:8px;
  top:0;
  bottom:0;
  width:3px;
  background:linear-gradient(
    to bottom,
    var(--spiritual-gold),
    var(--nishan-saffron)
  );
}

.timeline-row{
  position:relative;
  padding:0 0 40px 30px;
}

.timeline-dot{
  position:absolute;
  left:-2px;
  top:5px;
  width:18px;
  height:18px;
  background:var(--spiritual-gold);
  border-radius:50%;
  box-shadow:0 0 0 5px rgba(201,162,77,.25);
}

.timeline-content{
  background:#fff;
  padding:20px 25px;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  transition:.4s;
}

.timeline-row:hover .timeline-content{
  transform:translateX(6px);
}

.timeline-content .year{
  font-weight:bold;
  color:var(--khalsa-blue);
  display:block;
  margin-bottom:6px;
  font-size:1.1rem;
}

/* ==============================
   FADE-IN ENHANCEMENT
============================== */
.fade{
  opacity:0;
  transform:translateY(40px);
  transition:all .9s cubic-bezier(.25,.8,.25,1);
}

.fade.show{
  opacity:1;
  transform:none;
}

/* ==============================
   MOBILE
============================== */
@media(max-width:768px){
  .timeline-modern{
    padding-left:20px;
  }
  .timeline-content{
    padding:18px;
  }
}
/* ==============================
   AWARDS & RECOGNITION
============================== */
.awards-grid{
  max-width:1000px;
  margin:40px auto 0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;
}

.award-card{
  background:#fff;
  padding:30px;
  text-align:center;
  font-size:1.05rem;
  box-shadow:0 8px 22px rgba(0,0,0,0.08);
  border-top:4px solid var(--spiritual-gold);
  border-radius:10px;
  transition:.3s;
}

.award-card:hover{
  transform:translateY(-6px);
}
/* Projects Grid */
.projects-grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:25px;
  padding:20px;
}

.project-card{
  background:var(--white);
  border:1px solid var(--spiritual-gold);
  padding:18px;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  border-radius:6px;
  transition:0.3s ease;
}

.project-card:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 20px rgba(0,0,0,0.12);
}

.project-card h3{
  color:var(--khalsa-blue);
  margin-bottom:8px;
  font-size:1.25rem;
}
.project-card p{
  font-size:1rem;
  line-height:1.6;
}

/* ======================
   PROJECT HERO BACKGROUND
====================== */
.hero-projects{
  min-height:70vh;
  background:url("assets/images/projects-hero.jpg") center/cover no-repeat;
}

/* ======================
   TIMELINE ROYAL
====================== */
.timeline-royal{
  padding:80px 20px;
  background:var(--cream-bg);
}
.timeline-container{
  max-width:900px;
  margin:auto;
  position:relative;
}
.timeline-container:before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:5px;
  background:linear-gradient(to bottom,var(--spiritual-gold),var(--nishan-saffron));
  transform:translateX(-50%);
}

.timeline-item{
  position:relative;
  margin-bottom:60px;
  display:flex;
  justify-content:flex-end;
}
.timeline-item:nth-child(even){
  justify-content:flex-start;
}

.timeline-year{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  background:var(--khalsa-blue);
  color:#fff;
  padding:8px 18px;
  font-weight:bold;
  border-radius:30px;
  box-shadow:0 4px 14px rgba(0,0,0,0.3);
}

.timeline-card{
  width:40%;
  padding:22px;
  background:#fff;
  border-left:6px solid var(--spiritual-gold);
  box-shadow:0 10px 30px rgba(0,0,0,0.12);
  transition:.3s;
}
.timeline-item:nth-child(even) .timeline-card{
  border-left:none;
  border-right:6px solid var(--spiritual-gold);
}

/* ======================
   FEATURED PROJECT CARD
====================== */
.featured-project{
  max-width:1000px;
  margin:auto;
  background:linear-gradient(135deg,var(--khalsa-blue),#0a204d);
  color:#fff;
  padding:50px 30px;
  text-align:center;
  border-radius:10px;
  box-shadow:0 16px 40px rgba(0,0,0,0.35);
}
.featured-project h3{
  color:var(--nishan-saffron);
  margin:10px 0;
}

/* ======================
   CTA SECTION
====================== */
.dark-cta{
  background:linear-gradient(135deg,#041a40,var(--khalsa-blue));
  color:#fff;
  text-align:center;
}
.dark-cta .donate-btn.big{
  padding:20px 48px;
  font-size:1.3rem;
}
/* ===============================
   PROJECT HERO
================================ */
.hero-projects{
  min-height:60vh;
  background:url("assets/images/projects/hero.jpg") center/cover no-repeat;
}

/* ===============================
   IMPACT COUNTERS
================================ */
.impact-section{
  background:var(--khalsa-blue);
  padding:70px 20px;
}

.impact-grid{
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:30px;
  text-align:center;
}

.impact-card{
  background:#fff;
  padding:35px 20px;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.impact-card h2{
  font-size:3rem;
  color:var(--nishan-saffron);
}

/* ===============================
   TIMELINE IMAGE CARDS
================================ */
.timeline-container{
  max-width:1100px;
  margin:auto;
  position:relative;
}

.timeline-item{
  display:flex;
  margin:60px 0;
  position:relative;
}

.timeline-year{
  min-width:80px;
  font-weight:bold;
  color:var(--spiritual-gold);
}

.timeline-card{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 15px 35px rgba(0,0,0,.2);
  transition:.4s;
}

.timeline-card:hover{
  transform:translateY(-8px);
}

.timeline-card img{
  width:100%;
  height:220px;
  object-fit:cover;
  cursor:pointer;
  border-bottom:4px solid var(--spiritual-gold);
}

.timeline-content-inner{
  padding:25px;
}

/* ===============================
   LIGHTBOX
================================ */
#lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

#lightbox img{
  max-width:90%;
  max-height:90%;
  border:6px solid #fff;
  border-radius:8px;
}

/* ===============================
   SCROLL ANIMATION
================================ */
.reveal{
  opacity:0;
  transform:translateY(60px);
  transition:all .9s cubic-bezier(.22,.61,.36,1);
}
.reveal.show{
  opacity:1;
  transform:none;
}

/* ===============================
   MOBILE
================================ */
@media(max-width:768px){
  .timeline-item{
    flex-direction:column;
  }
  .timeline-year{
    margin-bottom:10px;
  }
}
/* =====================================================
   SEVA & KAAR SEWA — ISOLATED STYLES
===================================================== */

.seva-page .hero{
  height:70vh;
  background:url("assets/images/hero-gurdwara.jpg") center/cover no-repeat;
  position:relative;
}

.seva-page .overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
}

.seva-page .hero-content{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:#fff;
  text-align:center;
  max-width:900px;
}

.seva-page .section{
  padding:90px 20px;
  text-align:center;
}

.seva-page .section.light{
  background:var(--cream-bg);
}

/* ======================
   SEVA INTRO LIST
====================== */
.seva-page .seva-list{
  max-width:700px;
  margin:30px auto;
  text-align:left;
  font-size:1.05rem;
}

.seva-page blockquote{
  max-width:900px;
  margin:50px auto;
  padding:25px;
  background:#fff;
  border-left:6px solid var(--spiritual-gold);
  font-style:italic;
}

/* ======================
   SEVA GALLERY
====================== */
.seva-page .gallery{
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:28px;
}

.seva-page .gallery img{
  width:100%;
  border:4px solid var(--spiritual-gold);
  cursor:pointer;
  transition:.3s;
}

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

/* ======================
   SEVA TIMELINE
====================== */
.seva-page .timeline{
  max-width:1000px;
  margin:60px auto 0;
}

.seva-page .timeline-item{
  display:flex;
  gap:35px;
  margin-bottom:60px;
  align-items:center;
}

.seva-page .timeline-item img{
  width:240px;
  border:4px solid var(--spiritual-gold);
  border-radius:6px;
}

.seva-page .timeline-item div{
  text-align:left;
}

/* ======================
   DONATE CTA
====================== */
.seva-page .donate-btn{
  margin-top:30px;
  padding:18px 42px;
  font-size:1.2rem;
}

/* ======================
   LIGHTBOX
====================== */
.seva-page #lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.9);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.seva-page #lightbox img{
  max-width:90%;
  max-height:90%;
  border:6px solid #fff;
}

.seva-page #close{
  position:absolute;
  top:20px;
  right:30px;
  font-size:42px;
  color:#fff;
  cursor:pointer;
}

/* ======================
   SCROLL ANIMATION
====================== */
.seva-page .fade{
  opacity:0;
  transform:translateY(40px);
  transition:.9s ease;
}

.seva-page .fade.show{
  opacity:1;
  transform:none;
}

/* ======================
   MOBILE
====================== */
@media(max-width:768px){
  .seva-page .timeline-item{
    flex-direction:column;
    text-align:center;
  }
  .seva-page .timeline-item img{
    width:100%;
  }
}
/* ==============================
   SEVA PAGE – FINAL OVERRIDE
============================== */

body.seva-page .timeline-container{
  max-width:1100px;
  margin:auto;
  position:relative;
}

body.seva-page .timeline-item{
  display:flex;
  gap:30px;
  align-items:flex-start;
  margin:60px 0;
}

body.seva-page .timeline-year{
  min-width:80px;
  font-weight:bold;
  color:var(--spiritual-gold);
  font-size:1.1rem;
}

body.seva-page .timeline-card{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 15px 35px rgba(0,0,0,.18);
  width:100%;
}

body.seva-page .timeline-card img{
  width:100%;
  height:240px;
  object-fit:cover;
  border-bottom:4px solid var(--spiritual-gold);
}

body.seva-page .timeline-content-inner{
  padding:25px;
}

body.seva-page .timeline-modern{
  max-width:900px;
  margin:auto;
}

body.seva-page .timeline-modern .timeline-row{
  margin-bottom:35px;
}

body.seva-page .timeline-modern .year{
  font-weight:bold;
  color:var(--khalsa-blue);
  display:block;
  margin-bottom:6px;
}

body.seva-page .impact-section{
  background:var(--khalsa-blue);
}

body.seva-page .impact-card{
  background:#fff;
  border-radius:12px;
}

/* MOBILE */
@media(max-width:768px){
  body.seva-page .timeline-item{
    flex-direction:column;
  }
}
/* ===== ROOT COLORS ===== */
:root{
  --cream-bg:#f8f1e7;
  --spiritual-gold:#d4af37;
  --nishan-saffron:#ff9933;
  --khalsa-blue:#0b2c4d;
}

/* ===== GENERAL ===== */
.section{
  padding:70px 20px;
  text-align:center;
}

.section.cream{
  background:var(--cream-bg);
}

h2{
  color:#3a2e1e;
  margin-bottom:20px;
}

/* ===== VISION LIST ===== */
#visionList{
  list-style:inside disc;
  max-width:900px;
  margin:12px auto 36px;
  text-align:left;
}

#visionList li{
  padding:8px 0;
  font-size:1.05rem;
}

/* ===== STAIRCASE TIMELINE ===== */
.staircase{
  max-width:900px;
  margin:60px auto 0;
  position:relative;
}

.staircase::before{
  content:"";
  position:absolute;
  left:36px;
  top:0;
  bottom:0;
  width:4px;
  background:linear-gradient(to bottom, var(--spiritual-gold), transparent);
  opacity:.4;
}

.step{
  display:flex;
  align-items:flex-start;
  margin-bottom:60px;
  position:relative;
}

.step:nth-child(2){ margin-left:60px; }
.step:nth-child(3){ margin-left:120px; }
.step:nth-child(4){ margin-left:180px; }

.step-year{
  min-width:90px;
  font-weight:bold;
  color:var(--nishan-saffron);
  margin-right:18px;
  font-size:1.2rem;
}

.step-card{
  background:#fff;
  padding:22px 26px;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.1);
  position:relative;
}

.step-card::before{
  content:"";
  position:absolute;
  left:-12px;
  top:24px;
  width:12px;
  height:12px;
  background:var(--spiritual-gold);
  border-radius:50%;
}

/* ===== FOOTER ===== */
footer{
  background:var(--khalsa-blue);
  color:#fff;
  text-align:center;
  padding:22px 16px;
  font-size:.95rem;
}

/* ===== ANIMATIONS ===== */
.fade{ opacity:0; transform:translateY(20px); transition:.6s; }
.fade.show{ opacity:1; transform:none; }
.reveal{ opacity:0; transform:translateX(-20px); transition:.6s; }
.reveal.show{ opacity:1; transform:none; }

/* ===== MOBILE ===== */
@media(max-width:768px){
  .step,
  .step:nth-child(2),
  .step:nth-child(3),
  .step:nth-child(4){
    margin-left:0;
    flex-direction:column;
    padding-left:40px;
  }
}