/* ================= CSS VARIABLES & THEME ================= */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  /* HEADER & FOOTER COLORS */
  --bg-header: #002855;
  --header-text: #82CAFA;
  --header-text-hover: #D4E6F1;
  
  /* WEBSITE BODY COLORS */
  --bg-body: #EBF5FB;
  --bg-section-alt: #D4E6F1;
  --bg-card: #FFFFFF;
  
  /* TEXT COLORS */
  --text-main: #002855;
  --text-muted: #154360;
  
  /* ACCENTS & BORDERS */
  --accent-gold: #DCA836;
  --accent-gold-hover: #F4C454;
  --border-color: #AED6F1;
}

html { scroll-behavior:smooth; }
body { font-family:'Lato', sans-serif; background:var(--bg-body); color:var(--text-main); overflow-x:hidden; }

/* ================= NAVIGATION & DROPDOWN ================= */
nav { position:sticky; top:0; width:100%; z-index:990; background:var(--bg-header); border-bottom:2px solid var(--accent-gold); }

/* Header ko wide banaya aur flexible space diya */
.nav-inner { max-width:1400px; width: 100%; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:0 1rem; height:76px; gap: 10px; }

/* Logo section space maintain karega */
.nav-brand { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.nav-logo { width:46px; height:46px; border-radius:50%; background:var(--header-text); display:flex; align-items:center; justify-content:center; font-family:'Cinzel', serif; font-size:0.65rem; font-weight:700; color:var(--bg-header); text-align:center; line-height:1.2; padding:4px; }
.nav-title-group { display:flex; flex-direction:column; }
.nav-title { font-family:'Cinzel', serif; font-size:clamp(0.9rem, 1.2vw, 1.1rem); font-weight:700; color:var(--header-text); letter-spacing:0.08em; white-space:nowrap; }
.nav-sub { font-size:clamp(0.55rem, 0.8vw, 0.65rem); color:var(--header-text-hover); letter-spacing:0.1em; text-transform:uppercase; margin-top:2px; white-space:nowrap; }

/* Menus ko auto-adjust hone ke liye flexible container diya */
.nav-links { display:flex; align-items:center; justify-content:flex-end; gap:clamp(1px, 0.4vw, 5px); flex:1; flex-wrap:nowrap; }

/* AUTO-SHRINK MAGIC: clamp() ki madad se menu items jagah ke hisaab se chote honge */
.nav-links a, .nav-links .dropbtn { color:var(--header-text); text-decoration:none; font-size:clamp(0.55rem, 0.75vw, 0.75rem); font-weight:700; padding:clamp(0.3rem, 0.4vw, 0.5rem) clamp(0.3rem, 0.5vw, 0.65rem); border-radius:4px; transition:all 0.3s ease; letter-spacing:0.03em; text-transform:uppercase; cursor:pointer; white-space:nowrap; }
.nav-links a:hover, .nav-links a.active, .dropdown:hover .dropbtn { color:var(--header-text-hover); background:rgba(255,255,255,0.1); }

/* DROPDOWN MENU */
.dropdown { position: relative; display: flex; align-items: center; }

/* INVISIBLE BRIDGE: Yeh code mouse ko gap cross karte waqt menu band hone se rokega */
.dropdown::after { content: ''; position: absolute; left: 0; bottom: -15px; width: 100%; height: 15px; }

/* margin-top: 10px hata kar top: calc(100% + 5px) kiya gaya hai */
.dropdown-content { display: none; position: absolute; background-color: var(--bg-card); min-width: 220px; box-shadow: 0 8px 24px rgba(0, 40, 85, 0.15); z-index: 1000; border-radius: 6px; top: calc(100% + 5px); left: 0; border: 1px solid var(--border-color); overflow: hidden; margin-top: 0; }

.dropdown-content a { color: var(--text-main) !important; padding: 12px 16px !important; text-decoration: none; display: block; font-size: 0.8rem !important; border-radius: 0 !important; border-bottom: 1px solid var(--border-color); text-transform: capitalize !important; transition: all 0.2s ease; white-space: nowrap; }
.dropdown-content a:last-child { border-bottom: none; }
.dropdown-content a:hover { background-color: var(--bg-section-alt) !important; color: var(--accent-gold) !important; padding-left: 22px !important; }
.dropdown:hover .dropdown-content { display: block; }

/* CTA Button (Register Now) auto-adjust */
.nav-cta { background:var(--accent-gold) !important; color:var(--bg-header) !important; padding:clamp(0.3rem, 0.5vw, 0.5rem) clamp(0.6rem, 1vw, 1rem) !important; border-radius:4px !important; margin-left:clamp(2px, 0.5vw, 5px); transition: 0.3s; flex-shrink:0; }
.nav-cta:hover { background:var(--accent-gold-hover) !important; transform: translateY(-2px); }

/* MOBILE MENU */
.burger { display:none; flex-direction:column; gap:6px; cursor:pointer; background:none; border:none; padding:4px; }
.burger span { display:block; width:25px; height:2px; background:var(--header-text); border-radius:2px; }
.mob-menu { display:none; background:var(--bg-header); flex-direction:column; padding:1.5rem; gap:0; border-bottom:2px solid var(--accent-gold); }
.mob-menu.open { display:flex; }
.mob-menu a { color:var(--header-text); text-decoration:none; font-weight:700; font-size:0.95rem; padding:0.8rem 0; border-bottom:1px solid rgba(255,255,255,0.1); text-transform:uppercase; white-space:normal; }
.mob-menu a:hover { color:var(--header-text-hover); }

/* MOBILE DROPDOWN */
.mob-dropdown-content { display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.03); margin-bottom: 5px; border-radius: 4px; }
.mob-dropdown-content a { padding-left: 2rem !important; font-size: 0.85rem !important; border-bottom: 1px dashed rgba(255, 255, 255, 0.1) !important; color: var(--header-text-hover) !important; text-transform: capitalize !important; }
.mob-dropdown-content a:last-child { border-bottom: none !important; }

/* ================= COMMON UI COMPONENTS ================= */
.btn-primary { background:var(--accent-gold); color:var(--bg-header); padding:0.85rem 2.2rem; border-radius:4px; font-weight:700; font-size:0.9rem; text-decoration:none; display:inline-block; transition:all 0.3s; letter-spacing:0.05em; text-transform:uppercase; box-shadow:0 5px 15px rgba(0,0,0,0.1); }
.btn-primary:hover { background:var(--accent-gold-hover); transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.2); }
.btn-outline { background:transparent; color:var(--header-text); padding:0.8rem 2rem; border-radius:4px; font-weight:700; font-size:0.9rem; text-decoration:none; display:inline-block; transition:all 0.3s; border:2px solid var(--header-text); letter-spacing:0.05em; text-transform:uppercase; }
.btn-outline:hover { background:rgba(255,255,255,0.1); color:var(--header-text-hover); border-color:var(--header-text-hover); }

section { padding:5rem 1.5rem; }
.container { max-width:1060px; margin:0 auto; }
.sec-tag { display:inline-flex; align-items:center; gap:8px; color:var(--text-muted); font-size:0.75rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; margin-bottom:0.8rem; }
.sec-tag::before { content:'◈'; font-size:0.8rem; }
.sec-h { font-family:'Playfair Display', serif; font-size:clamp(2rem, 4vw, 3rem); font-weight:700; color:var(--text-main); line-height:1.2; margin-bottom:1rem; }
.sec-h span { color:var(--accent-gold); }
.gline { width:70px; height:3px; border-radius:2px; background:var(--accent-gold); margin-bottom:2rem; }
.gline.center { margin-left:auto; margin-right:auto; }

/* ================= INDEX & COMMON SECTION STYLES ================= */
#hero { width:100%; background:var(--bg-body); padding:0; margin:0; text-align:center; }
#hero img { width:100%; height:auto; display:block; max-height:85vh; object-fit:cover; object-position:center top; border-bottom: 2px solid var(--border-color); }
.hero-action-bar { background:var(--bg-header); padding:1.5rem; display:flex; justify-content:center; gap:1.5rem; flex-wrap:wrap; border-bottom:2px solid var(--accent-gold); }

.cd-strip { background:var(--bg-section-alt); border-bottom:1px solid var(--border-color); padding:1.5rem; display:flex; align-items:center; justify-content:center; gap:2.5rem; flex-wrap:wrap; }
.cd-lbl-main { color:var(--text-muted); font-size:0.8rem; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; }
.cd-units { display:flex; gap:1.5rem; align-items:center; }
.cd-unit { text-align:center; }
.cd-num { font-family:'Playfair Display', serif; font-size:2.5rem; font-weight:700; color:var(--text-main); display:block; line-height:1; }
.cd-unit-lbl { font-size:0.65rem; color:var(--text-muted); letter-spacing:0.12em; text-transform:uppercase; margin-top:6px; display:block; }
.cd-sep { color:var(--text-muted); font-size:2rem; font-weight:300; }

#about { background:var(--bg-body); }
.about-text { max-width: 900px; margin: 0 auto; text-align: center; }
.about-text p { font-size:1.05rem; color:var(--text-muted); line-height:1.9; margin-bottom:1.2rem; }
.about-text strong { color:var(--text-main); }
.about-text a { color:var(--text-main); font-weight:700; text-decoration:none; }
.about-text a:hover { text-decoration:underline; }

.stats-row { display:grid; grid-template-columns:repeat(4, 1fr); gap:1.5rem; margin-top:2.5rem; margin-bottom:3rem; }
.stat-box { background:var(--bg-card); border:1px solid var(--border-color); border-radius:6px; padding:1.5rem; text-align:center; box-shadow:0 5px 15px rgba(0,0,0,0.03); }
.stat-num { font-family:'Playfair Display', serif; font-size:2.2rem; font-weight:700; color:var(--text-main); display:block; margin-bottom:0.5rem; }
.stat-lbl { font-size:0.75rem; color:var(--text-muted); font-weight:700; letter-spacing:0.1em; text-transform:uppercase; }

/* ======== SLIDER FIX: Height badhai aur object-fit contain kiya ======== */
.slider-box { width: 100%; height: 600px; background: var(--bg-body); border-radius: 8px; border: 1px solid var(--border-color); box-shadow: 0 10px 30px rgba(0,40,85,0.1); overflow: hidden; position: relative; display: flex; }
.slider-track { display: flex; width: 100%; height: 100%; transition: transform 0.8s ease-in-out; }
.slide { min-width: 100%; height: 100%; object-fit: contain; object-position: center; }

#highlights { background:var(--bg-section-alt); }
.hl-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; margin-top:3rem; }
.hl-card { background:var(--bg-card); border-radius:6px; border:1px solid var(--border-color); padding:2rem 1.5rem; transition:transform 0.3s, box-shadow 0.3s; }
.hl-card:hover { transform:translateY(-5px); border-color:var(--text-main); box-shadow:0 10px 25px rgba(0,0,0,0.08); }
.hl-ico { font-size:2rem; margin-bottom:1rem; color:var(--accent-gold); }
.hl-card h3 { font-family:'Playfair Display', serif; font-size:1.2rem; font-weight:700; color:var(--text-main); margin-bottom:0.8rem; }
.hl-card p { font-size:0.9rem; color:var(--text-muted); line-height:1.7; }

#patrons { background:var(--bg-body); }
.patrons-grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:1.5rem; margin-top:3rem; }
.patron-card { text-align:center; padding:2rem 1rem; background:var(--bg-card); border:1px solid var(--border-color); border-radius:6px; transition:transform 0.3s; }
.patron-card:hover { transform:translateY(-5px); border-color:var(--text-main); }

/* ======== PATRONS IMAGE FIX: Box ko gol karke overflow hidden kiya ======== */
.patron-av { width:110px; height:110px; border-radius:50%; background:var(--bg-section-alt); border:3px solid var(--border-color); margin:0 auto 1.2rem; display:flex; align-items:center; justify-content:center; overflow:hidden; font-size:2rem; }
.patron-av img { width: 100%; height: 100%; object-fit: cover; display:block; }

.patron-card h4 { font-family:'Playfair Display', serif; font-size:1rem; font-weight:700; color:var(--text-main); margin-bottom:6px; line-height:1.3; }
.patron-card .ptit { font-size:0.85rem; color:var(--text-muted); margin-bottom:4px; }
.patron-card .pinst { font-size:0.75rem; color:var(--text-muted); font-weight:700; letter-spacing:0.05em; text-transform:uppercase; }

#comm-prev { background:var(--bg-section-alt); text-align:center; }
.comm-cards { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; margin-top:3rem; }
.comm-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:6px; padding:2.5rem 1.5rem; text-align:center; transition:0.3s; }
.comm-card:hover { border-color:var(--text-main); }
.comm-role { font-size:0.75rem; color:var(--text-muted); letter-spacing:0.15em; text-transform:uppercase; font-weight:700; margin-bottom:1rem; }
.comm-card h3 { font-family:'Playfair Display', serif; font-size:1.3rem; color:var(--text-main); margin-bottom:0.5rem; }
.comm-card p { font-size:0.9rem; color:var(--text-muted); }
.comm-btn { display:inline-block; background:var(--bg-header); color:var(--header-text); padding:0.8rem 2rem; border-radius:4px; font-weight:700; font-size:0.9rem; text-decoration:none; transition:all 0.3s; letter-spacing:0.05em; text-transform:uppercase; margin-top:2rem;}
.comm-btn:hover { background:var(--text-main); color:var(--white); }

#venue { background:var(--bg-body); }
.venue-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.venue-map { height:300px; background:var(--bg-card); border-radius:8px; border:1px solid var(--border-color); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:1rem; color:var(--text-main); font-size:1rem; }
.venue-map .map-ico { font-size:3rem; }
.vrow { display:flex; align-items:flex-start; gap:1.2rem; padding:1.2rem 0; border-bottom:1px solid var(--border-color); }
.vrow:last-child { border:none; }
.vico { width:40px; height:40px; flex-shrink:0; border-radius:50%; background:var(--bg-section-alt); border:1px solid var(--border-color); display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.vrow strong { display:block; font-size:1rem; color:var(--text-main); font-weight:700; margin-bottom:4px; }
.vrow span { font-size:0.95rem; color:var(--text-muted); line-height:1.6; display:block; }

#payment { background:var(--bg-section-alt); }
.pay-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; margin-top:3rem; }
.pay-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:8px; padding:2.5rem; box-shadow:0 10px 30px rgba(0,40,85,0.05); }
.pay-card h3 { font-family:'Playfair Display', serif; color:var(--accent-gold); font-size:1.4rem; margin-bottom:1.5rem; padding-bottom:1rem; border-bottom:1px solid var(--border-color); }
.prow { display:flex; align-items:flex-start; gap:1rem; padding:0.8rem 0; border-bottom:1px dashed var(--border-color); }
.prow:last-child { border:none; }
.pico { font-size:1.1rem; width:25px; flex-shrink:0; }
.plbl { font-size:0.8rem; color:var(--text-muted); font-weight:700; text-transform:uppercase; letter-spacing:0.05em; min-width:120px; }
.pval { font-size:0.95rem; color:var(--text-main); font-weight:700; }
.qr-card { text-align:center; }
.qr-box { width:180px; height:180px; background:var(--bg-body); border:2px dashed var(--accent-gold); border-radius:8px; margin:0 auto 1.5rem; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; color:var(--text-main); }
.flink { font-size:0.9rem; color:var(--text-muted); line-height:1.8; }

/* ================= FOOTER ================= */
footer { background:var(--bg-header); border-top:4px solid var(--accent-gold); padding:4rem 1.5rem 2rem; }
.footer-inner { max-width:1060px; margin:0 auto; display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:3rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,0.1); }
.f-logo { font-family:'Cinzel', serif; font-size:1.4rem; font-weight:700; color:var(--header-text); letter-spacing:0.1em; margin-bottom:1rem; }
.f-brand p { color:var(--header-text-hover); font-size:0.95rem; line-height:1.8; }
.f-org { margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,0.1); }
.f-col h4 { color:var(--header-text); font-size:0.85rem; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; margin-bottom:1.5rem; }
.f-col a { display:block; color:var(--header-text-hover); text-decoration:none; font-size:0.95rem; margin-bottom:0.8rem; transition:color 0.2s; }
.f-col a:hover { color:var(--header-text); }
.f-col p { color:var(--header-text-hover); font-size:0.95rem; line-height:1.8; }
.footer-btm { max-width:1060px; margin:2rem auto 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.footer-btm p { color:var(--header-text-hover); font-size:0.85rem; }
.footer-btm a { color:var(--accent-gold); text-decoration:none; }
.footer-btm a:hover { color:var(--accent-gold-hover); }

/* ================= RESPONSIVE ================= */
@media(max-width:900px){
  .about-grid, .venue-grid, .pay-grid { grid-template-columns:1fr; }
  .stats-row { grid-template-columns:1fr 1fr; }
  .slider-box { height:400px; } /* Slider height on tablet */
  .hl-grid { grid-template-columns:1fr 1fr; }
  .patrons-grid { grid-template-columns:repeat(3, 1fr); }
  .comm-cards { grid-template-columns:1fr; }
  .nav-links { display:none; }
  .burger { display:flex; }
  .footer-inner { grid-template-columns:1fr 1fr; }
}
@media(max-width:600px){
  .stats-row { grid-template-columns:1fr; }
  .slider-box { height:280px; } /* Slider height on mobile */
  .hl-grid, .attr-grid { grid-template-columns:1fr; }
  .patrons-grid { grid-template-columns:1fr 1fr; }
  section { padding:3.5rem 1.25rem; }
  .footer-inner { grid-template-columns:1fr; }
  .hero-action-bar { flex-direction:column; align-items:stretch; text-align:center; }
  .cd-strip { flex-direction:column; gap:1rem; }
}