*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#030806;color:#f5f3ed;font-family:Arial,Helvetica,sans-serif;line-height:1.5}
.site-header{background:radial-gradient(circle at 50% 15%,rgba(25,86,48,.24),transparent 42%),#030806;border-bottom:1px solid rgba(220,184,90,.55)}
.brand{text-align:center;padding:32px 18px 28px}
.round-logo{display:block;width:170px;height:170px;object-fit:contain;margin:0 auto 14px;background:transparent;border:0}
.brand h1{margin:0;white-space:nowrap;font-family:Georgia,serif;font-size:clamp(29px,6vw,58px);letter-spacing:2px}
.subtitle{margin-top:5px;color:#dcb85a;font-size:clamp(16px,2.5vw,25px);font-weight:800;letter-spacing:5px}
.address{margin-top:8px;color:#c8cbc7;font-size:clamp(13px,2vw,18px)}
.main-nav{max-width:1080px;margin:0 auto;padding:18px;display:grid;grid-template-columns:repeat(6,1fr);gap:10px;background:rgba(3,14,9,.82)}
.main-nav a{min-height:56px;border:1px solid #806b2b;border-radius:12px;background:#062116;color:#f6f3e9;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:14px}
.main-nav a:hover{background:#0b3520;border-color:#dcb85a;color:#dcb85a}
.hero{max-width:1100px;margin:0 auto;padding:42px 20px;text-align:center;border-bottom:1px solid rgba(220,184,90,.35)}
.hero-kicker{color:#dcb85a;letter-spacing:5px;font-weight:700;font-size:13px}
.hero h2{font-family:Georgia,serif;font-size:clamp(30px,6vw,62px);margin:14px 0 0;letter-spacing:2px}
.hero-subtitle{color:#dcb85a;font-weight:800;letter-spacing:4px}
.hero p{color:#c8cbc7;margin:8px 0 0}
.live-card{max-width:1050px;margin:30px auto;padding:18px;display:grid;grid-template-columns:1fr 1.15fr;gap:20px;border:1px solid #806b2b;border-radius:18px;background:rgba(0,0,0,.38)}
.live-thumb{min-height:260px;border:1px solid #725c25;border-radius:14px;background:radial-gradient(circle at center,#0b4c2a,transparent 65%),#07160e;display:flex;flex-direction:column;align-items:center;justify-content:center}
.live-badge,.live-now{color:#ff3030;font-weight:900}
.khuthbah-art{text-align:center;font-family:Georgia,serif;font-size:34px;color:#dcb85a;margin-top:25px}
.live-info{display:flex;flex-direction:column;justify-content:center}
.live-info h2{font-family:Georgia,serif;font-size:34px;margin:8px 0}
.speaker{color:#dcb85a;font-size:18px}
.gold-btn{display:inline-block;align-self:flex-start;margin-top:12px;padding:12px 18px;border-radius:9px;background:#dcb85a;color:#10120f;text-decoration:none;font-weight:900}
.section{max-width:1100px;margin:0 auto;padding:48px 20px}
.section-heading{text-align:center}
.section-heading h2{font-family:Georgia,serif;font-size:34px;margin:0}
.section-line{width:80px;height:3px;background:#dcb85a;margin:12px auto 28px}
.next-prayer{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:18px 22px;border:1px solid #806b2b;border-radius:14px;background:#061c12;margin-bottom:16px}
.next-prayer small{display:block;color:#dcb85a;letter-spacing:2px;font-weight:800}
.next-prayer strong{font-size:23px}
.countdown{font-family:monospace;font-size:28px;font-weight:900;color:#dcb85a}
.prayer-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.final-card,.prayer-card,.info-card,.person-card{border:1px solid rgba(220,184,90,.4);border-radius:14px;background:rgba(5,30,19,.72)}
.prayer-card{padding:20px;text-align:center}
.prayer-card h3{margin:0;color:#dcb85a;font-size:18px}
.prayer-card p{margin:8px 0 0;font-size:20px;font-weight:800}
.prayer-card.next{box-shadow:0 0 0 2px #dcb85a inset}
.prayer-note{color:#9ca69f;font-size:12px}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.info-card{padding:22px}
.info-card h3{color:#e0bd65;margin-top:0}
.imam-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.person-card{
  padding:15px;
  text-align:center;
  display:block;
  color:inherit !important;
  text-decoration:none !important;
  cursor:pointer;
}

.person-card:link,
.person-card:visited,
.person-card:hover,
.person-card:active{
  color:inherit !important;
  text-decoration:none !important;
}

.person-card h3,
.person-card p,
.person-card .card-action{
  color:inherit !important;
  text-decoration:none !important;
}
.person-photo{height:250px;border-radius:10px;background:linear-gradient(135deg,#0b3b25,#020806);border:1px solid #806b2b;display:flex;align-items:center;justify-content:center}
.person-photo:after{content:"IMAM / KHATEEB";color:#dcb85a;font-weight:800;letter-spacing:2px}
.photo-note{text-align:center;color:#9ca69f;font-size:13px}
.media-box{padding:28px;border:1px solid rgba(220,184,90,.4);border-radius:14px;background:rgba(5,30,19,.72);text-align:center}
.media-box h3{color:#e0bd65}
.media-box .gold-btn{margin-left:auto;margin-right:auto}
.contact{text-align:center;padding:55px 20px;border-top:1px solid rgba(220,184,90,.35)}
.contact h2{font-family:Georgia,serif}
.contact p{color:#c8cbc7}
footer{text-align:center;padding:30px 20px;border-top:1px solid rgba(220,184,90,.35);color:#bfc4bf}
footer strong{color:#dcb85a}
footer small{display:block;margin-top:10px}
.back-top{position:fixed;right:18px;bottom:18px;width:52px;height:52px;border:1px solid #dcb85a;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#dcb85a;text-decoration:none;background:#07160f;font-size:24px}
code{color:#dcb85a}
@media(max-width:800px){
 .round-logo{width:145px;height:145px}
 .brand h1{font-size:32px;white-space:nowrap;letter-spacing:1px}
 .main-nav{grid-template-columns:repeat(2,1fr);padding:16px 14px}
 .main-nav a{min-height:58px}
 .hero h2{font-size:39px}
 .live-card{grid-template-columns:1fr;margin:22px 14px}
 .live-thumb{min-height:190px}
 .prayer-grid{grid-template-columns:1fr}
 .prayer-card{display:flex;justify-content:space-between;align-items:center;padding:15px 20px}
 .card-grid,.imam-grid{grid-template-columns:1fr}
 .section{padding:38px 14px}
}
@media(max-width:390px){
 .brand h1{font-size:28px}
 .subtitle{letter-spacing:3px}
 .address{font-size:12px}
 .hero h2{font-size:34px}
 .next-prayer{align-items:flex-start;flex-direction:column}
 .countdown{font-size:25px}
}
.service-btn,
.service-btn:visited,
.service-btn:hover,
.service-btn:active {
  display: block;
  color: inherit !important;
  text-decoration: none !important;
}
.person-card{
  display:block;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}

.person-card:hover{
  color:inherit;
  text-decoration:none;
}

.person-card h3,
.person-card p,
.person-card .card-action{
  color:inherit;
  text-decoration:none;
}

.person-card .card-action{
  display:inline-block;
}
/* Upcoming Programs */
#upcoming-programs{
  padding:40px 16px;
}

#upcoming-programs .program-posters{
  max-width:1100px;
  margin:25px auto 0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}

#upcoming-programs .program-poster{
  background:#061812;
  border:1px solid #dcb85a;
  border-radius:16px;
  padding:12px;
  text-align:center;
  box-shadow:0 8px 25px rgba(0,0,0,.35);
}

#upcoming-programs .program-poster img{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
}

#upcoming-programs .program-poster h3{
  color:#dcb85a;
  margin:14px 5px 6px;
  font-size:22px;
}

#upcoming-programs .program-poster p{
  color:#fff;
  margin:0 5px 8px;
  line-height:1.5;
}

@media(max-width:700px){
  #upcoming-programs .program-posters{
    grid-template-columns:1fr;
    gap:20px;
  }

  #upcoming-programs .program-poster h3{
    font-size:20px;
  }
}