/* ============ Islamic Wisdoms — styles.css ============ */
:root{
  --green:#0c4a2b;
  --green-dark:#0a3a22;
  --green-light:#e8f1ea;
  --gold:#c9a24a;
  --gold-light:#fbf3df;
  --cream:#fcfbf8;
  --text:#2b2b2b;
  --muted:#6b6b6b;
  --border:#e8e2d5;
  --white:#ffffff;
  --shadow:0 6px 24px rgba(12,74,43,.08);
  --header-h:88px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--cream);color:var(--text);line-height:1.6}
.arabic{font-family:'Amiri',serif;font-size:1.6rem;line-height:1.8;color:var(--green);direction:rtl;text-align:center}
.container{max-width:1240px;margin:0 auto;padding:0 24px}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}

/* HEADER */
.site-header{background:var(--white);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
.header-inner{display:flex;align-items:center;gap:20px;padding:12px 24px}
.logo{display:flex;align-items:center;flex-shrink:0}
.logo-img{height:64px;width:auto;object-fit:contain}
.main-nav{flex:1}
.main-nav ul{display:flex;justify-content:center;gap:22px;flex-wrap:wrap}
.main-nav a{font-size:14px;color:var(--text);padding:8px 0;position:relative;font-weight:500;white-space:nowrap}
.main-nav a.active,.main-nav a:hover{color:var(--green)}
.main-nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--green)}
.mobile-actions{display:none}
.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.icon-btn{width:40px;height:40px;border-radius:50%;background:var(--cream);border:1px solid var(--border);color:var(--green);cursor:pointer;font-size:14px;display:grid;place-items:center}
.icon-btn:hover{background:var(--green-light)}
#themeToggle{color:var(--gold)}
.btn-lang{background:var(--green);color:#fff;border:none;padding:10px 18px;border-radius:8px;font-family:'Amiri',serif;font-size:14px;cursor:pointer}
.btn-lang:hover{background:var(--green-dark)}
.mobile-toggle{display:none;background:none;border:1px solid var(--border);border-radius:8px;width:42px;height:42px;font-size:20px;color:var(--green);cursor:pointer;align-items:center;justify-content:center}

/* HERO */
.hero{padding:40px 0 20px;background:var(--cream);position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center}
.hero-text h2{font-family:'Playfair Display',serif;font-size:56px;line-height:1.1;color:var(--green);margin-bottom:20px}
.hero-text>p{font-size:17px;color:var(--muted);max-width:480px;margin-bottom:28px}
.hero-buttons{display:flex;gap:14px;margin-bottom:36px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:8px;font-weight:600;font-size:15px;cursor:pointer;transition:.2s;border:none}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-dark)}
.btn-outline{background:transparent;color:var(--green);border:2px solid var(--gold)}
.btn-outline:hover{background:var(--gold-light)}
.btn-outline-sm{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:6px;border:1.5px solid var(--green);color:var(--green);font-size:13px;font-weight:600;margin-top:14px}
.btn-outline-sm.gold{border-color:var(--gold);color:var(--gold)}
.btn-outline-sm:hover{background:var(--green-light)}
.hero-features{display:flex;gap:24px;background:var(--white);border:1px solid var(--border);border-radius:14px;padding:18px 22px;flex-wrap:wrap;box-shadow:var(--shadow)}
.feature{display:flex;align-items:center;gap:12px;font-size:13px}
.feature-icon{width:38px;height:38px;background:var(--gold-light);color:var(--gold);border-radius:8px;display:grid;place-items:center}
.feature strong{display:block;color:var(--green);font-size:13px}
.feature span{color:var(--muted);font-size:11px}

/* Arch Frame */
.hero-visual{position:relative}
.arch-frame{position:relative;background:url('https://images.unsplash.com/photo-1542379653-b204b32dd34b?w=1600&q=80') center/cover no-repeat;border-radius:200px 200px 18px 18px;height:560px;overflow:hidden;border:3px solid var(--gold);box-shadow:var(--shadow)}
.ayah-card{position:absolute;top:60px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border:2px solid var(--gold);border-radius:16px;padding:22px 28px;text-align:center;max-width:340px;width:calc(100% - 40px)}
.ayah-card .arabic{font-size:1.4rem;margin-bottom:10px}
.ayah-card .translation{font-size:13px;color:var(--text);margin-bottom:6px}
.ayah-card .reference{font-size:11px;color:var(--gold);font-weight:600}

/* PRAYER BAR */
.prayer-bar{padding:24px 0}
.prayer-grid{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:20px 28px;display:grid;grid-template-columns:auto 1fr auto auto;gap:30px;align-items:center;box-shadow:var(--shadow)}
.prayer-title{display:flex;align-items:center;gap:14px;color:var(--green)}
.prayer-title i{font-size:30px;color:var(--green)}
.prayer-title h3{font-size:16px;color:var(--green)}
.prayer-title p{font-size:12px;color:var(--muted);margin-top:2px}
.prayer-times{display:flex;justify-content:space-around;gap:24px;flex-wrap:wrap}
.pt{text-align:center;min-width:50px}
.pt span{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.pt strong{font-size:18px;color:var(--text);font-weight:700}
.pt.highlight span{color:var(--gold)}
.pt.highlight strong{color:var(--gold)}
.hijri{display:flex;align-items:center;gap:12px}
.hijri-icon{width:46px;height:46px;background:var(--gold-light);border-radius:10px;display:grid;place-items:center;color:var(--gold);font-size:20px;flex-shrink:0}
.hijri h4{font-size:14px;color:var(--green)}
.hijri p{font-size:12px;color:var(--muted)}
.daily-verse-btn{background:var(--green);color:#fff;padding:14px 22px;border-radius:12px;display:flex;align-items:center;gap:12px;transition:.2s}
.daily-verse-btn:hover{background:var(--green-dark)}
.daily-verse-btn i{font-size:24px;color:var(--gold)}
.daily-verse-btn strong{display:block;font-size:14px}
.daily-verse-btn span{font-size:11px;opacity:.85}

/* CATEGORIES */
.categories{padding:30px 0}
.cat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.cat-card{background:var(--white);border-radius:16px;padding:26px 22px;text-align:center;border:1px solid var(--border);box-shadow:var(--shadow);transition:.25s;display:flex;flex-direction:column}
.cat-card:hover{transform:translateY(-4px)}
.cat-card.green{background:linear-gradient(180deg,#f1f6f1,#fff)}
.cat-card.gold{background:linear-gradient(180deg,#fbf3df,#fff)}
.cat-icon{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;font-size:26px;color:#fff;background:var(--green)}
.cat-card.gold .cat-icon{background:var(--gold)}
.cat-card h3{font-family:'Playfair Display',serif;color:var(--green);font-size:22px;margin-bottom:10px}
.cat-card>p{font-size:13px;color:var(--muted);margin-bottom:16px}
.cat-card ul{text-align:left;margin-bottom:18px;flex:1}
.cat-card ul li{font-size:13px;padding:5px 0;color:var(--text);display:flex;align-items:center;gap:8px}
.cat-card ul li i{color:var(--green);font-size:11px}
.cat-card.gold ul li i{color:var(--gold)}
.num{display:inline-grid;place-items:center;width:22px;height:22px;background:var(--gold);color:#fff;border-radius:50%;font-size:11px;font-weight:700;flex-shrink:0}
.cat-card.green .num{background:var(--green)}
.cat-link{color:var(--green);font-weight:600;font-size:14px;border-top:1px solid var(--border);padding-top:14px}
.cat-card.gold .cat-link{color:var(--gold)}

/* PILLARS */
.pillars{padding:60px 0;background:var(--cream)}
.section-title{text-align:center;font-family:'Playfair Display',serif;color:var(--green);font-size:34px;margin-bottom:40px}
.pillars-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin-bottom:30px}
.pillar{text-align:center;padding:20px}
.pillar-icon{width:80px;height:80px;background:var(--gold-light);border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;font-size:34px;color:var(--gold)}
.pillar h4{font-family:'Playfair Display',serif;color:var(--green);font-size:20px;margin-bottom:8px}
.pillar p{font-size:13px;color:var(--muted)}
.center-btn{text-align:center}

/* DAILY */
.daily-section{padding:40px 0}
.daily-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.daily-card{background:var(--white);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.daily-head{padding:18px 24px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border)}
.dc-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:16px;flex-shrink:0}
.dc-icon.green{background:var(--green)}
.dc-icon.gold{background:var(--gold)}
.daily-head h3{font-family:'Playfair Display',serif;color:var(--green);font-size:20px}
.daily-body{display:grid;grid-template-columns:1fr auto;gap:20px;padding:24px;align-items:center}
.daily-body img{width:160px;height:130px;object-fit:cover;border-radius:12px}
.daily-body .arabic{text-align:right;font-size:1.5rem;margin-bottom:12px}
.daily-body .translation{font-size:14px;color:var(--text);margin-bottom:6px}
.daily-body .reference{font-size:12px;color:var(--gold);font-weight:600}

/* ARTICLES */
.articles-section{padding:40px 0 60px}
.articles-grid{display:grid;grid-template-columns:1fr 320px;gap:24px}
.articles-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:10px}
.articles-head h3{font-family:'Playfair Display',serif;color:var(--green);font-size:22px;display:flex;align-items:center;gap:10px}
.articles-head h3 i{color:var(--gold)}
.articles-head a{color:var(--green);font-size:13px;font-weight:600}
.articles-list{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.article-card{background:var(--white);border-radius:12px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow);transition:.2s}
.article-card:hover{transform:translateY(-3px)}
.article-card img{height:110px;object-fit:cover;width:100%}
.article-card h4{font-size:14px;padding:12px 12px 6px;color:var(--green);font-weight:700}
.article-card p{font-size:12px;color:var(--muted);padding:0 12px 8px}
.article-card small{display:block;padding:0 12px 12px;font-size:11px;color:var(--gold)}

/* SUBSCRIBE */
.subscribe-card{background:var(--green);color:#fff;border-radius:16px;padding:24px;box-shadow:var(--shadow)}
.subscribe-card h3{font-family:'Playfair Display',serif;font-size:20px;margin-bottom:10px;display:flex;align-items:center;gap:10px}
.subscribe-card h3 i{color:var(--gold)}
.subscribe-card p{font-size:13px;opacity:.9;margin-bottom:18px}
.subscribe-card input{width:100%;padding:12px 14px;border-radius:8px;border:none;margin-bottom:10px;font-size:13px}
.btn-subscribe{width:100%;background:var(--gold);color:#fff;border:none;padding:12px;border-radius:8px;font-weight:600;cursor:pointer;font-size:14px}
.btn-subscribe:hover{background:#b58c33}
.socials{display:flex;gap:12px;margin-top:18px;justify-content:center;flex-wrap:wrap}
.socials a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.15);display:grid;place-items:center;color:#fff;font-size:13px;transition:.2s}
.socials a:hover{background:var(--gold)}

/* FOOTER */
.site-footer{background:var(--green-dark);color:#cfd6cf;padding:50px 0 0;margin-top:20px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.4fr;gap:30px;padding-bottom:40px}
.footer-logo{height:80px;width:auto;background:#fff;padding:8px 14px;border-radius:10px}
.footer-socials{display:flex;gap:10px;margin-top:18px}
.footer-socials a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;font-size:12px}
.footer-socials a:hover{background:var(--gold)}
.site-footer h4{color:#fff;font-size:15px;margin-bottom:14px;font-family:'Playfair Display',serif}
.site-footer ul li{padding:5px 0}
.site-footer ul li a{font-size:13px;color:#cfd6cf}
.site-footer ul li a:hover{color:var(--gold)}
.footer-quote{font-style:italic;border-left:3px solid var(--gold);padding-left:16px}
.footer-quote p{font-size:14px;color:#fff;margin-bottom:8px}
.footer-quote small{color:var(--gold);font-size:12px}
.footer-bottom{text-align:center;padding:18px 0;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:#a0b0a4}

/* ============ RESPONSIVE ============ */
@media (max-width:1240px){
  .main-nav ul{gap:16px}
  .main-nav a{font-size:13px}
}

@media (max-width:1100px){
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .pillars-grid{grid-template-columns:repeat(3,1fr)}
  .articles-list{grid-template-columns:repeat(2,1fr)}
  .articles-grid{grid-template-columns:1fr}
  .prayer-grid{grid-template-columns:1fr 1fr;gap:20px}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .hero-text h2{font-size:44px}
}

@media (max-width:960px){
  .header-inner{padding:10px 20px}
  .logo-img{height:54px}
  .desktop-only{display:none}
  .mobile-toggle{display:inline-flex}
  .main-nav{
    position:absolute;
    top:100%;left:0;right:0;
    background:var(--white);
    border-bottom:1px solid var(--border);
    box-shadow:0 12px 24px rgba(0,0,0,.08);
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
    flex:none;
  }
  .main-nav.open{max-height:80vh;overflow-y:auto}
  .main-nav ul{flex-direction:column;align-items:stretch;gap:0;padding:8px 0}
  .main-nav ul li{border-bottom:1px solid var(--border)}
  .main-nav ul li:last-child{border-bottom:none}
  .main-nav a{display:block;padding:14px 24px;font-size:15px;width:100%}
  .main-nav a.active::after{display:none}
  .main-nav a.active{background:var(--green-light)}
  .mobile-actions{display:flex;padding:14px 24px;justify-content:center}
  .mobile-actions .btn-lang{width:100%}
}

@media (max-width:820px){
  .hero{padding:24px 0}
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero-text h2{font-size:38px}
  .arch-frame{height:420px;border-radius:160px 160px 14px 14px}
  .daily-grid{grid-template-columns:1fr}
  .daily-body{grid-template-columns:1fr}
  .daily-body img{width:100%;height:180px}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .pillars-grid{grid-template-columns:repeat(2,1fr)}
  .articles-list{grid-template-columns:repeat(2,1fr)}
  .prayer-grid{grid-template-columns:1fr;text-align:center}
  .prayer-title{justify-content:center}
  .hijri{justify-content:center}
  .daily-verse-btn{justify-content:center}
  .section-title{font-size:28px}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:560px){
  .container{padding:0 16px}
  .header-inner{padding:10px 16px;gap:10px}
  .logo-img{height:46px}
  .header-actions{gap:6px}
  .icon-btn{width:38px;height:38px}
  .hero-text h2{font-size:30px}
  .hero-text>p{font-size:15px}
  .hero-buttons .btn{padding:12px 18px;font-size:14px;flex:1;justify-content:center}
  .arch-frame{height:340px;border-radius:140px 140px 12px 12px}
  .ayah-card{padding:16px 18px;top:40px}
  .ayah-card .arabic{font-size:1.15rem}
  .cat-grid{grid-template-columns:1fr}
  .pillars-grid{grid-template-columns:1fr 1fr}
  .articles-list{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;text-align:center}
  .footer-brand{display:flex;flex-direction:column;align-items:center}
  .footer-quote{border-left:none;border-top:3px solid var(--gold);padding:14px 0 0}
  .pt strong{font-size:16px}
  .pt span{font-size:11px}
  .prayer-times{gap:14px}
  .section-title{font-size:24px}
}

@media (max-width:380px){
  .pillars-grid{grid-template-columns:1fr}
  .hero-text h2{font-size:26px}
}

/* DARK MODE */
body.dark{--cream:#0f1a14;--white:#152119;--text:#e8e8e8;--muted:#9aa39c;--border:#26352c;--green-light:#1d2a22;--gold-light:#2a2418}
body.dark .site-header{background:var(--white)}
body.dark .arabic{color:#e3c987}
body.dark .footer-logo{background:#fff}

/* ============ INNER PAGES STYLE ADDITIONS ============ */

/* CONTACT US */
.contact-banner {
  background: url('https://images.unsplash.com/photo-1542379653-b204b32dd34b?w=1600&q=80') center/cover no-repeat;
  position: relative;
  padding: 80px 0;
  color: #fff;
  border-bottom: 4px solid var(--gold);
}
.contact-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(12,74,43,0.92) 0%, rgba(12,74,43,0.85) 45%, rgba(0,0,0,0.4) 100%);
  z-index: 1;
}
.contact-banner-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
}
.contact-banner-text {
  max-width: 540px;
}
.contact-banner-text h2 {
  font-family: 'Playfair Display', serif;
  font-size: 48px;
  color: var(--gold);
  margin: 15px 0;
}
.contact-banner-text p {
  font-size: 15px;
  opacity: 0.9;
  line-height: 1.7;
  margin-bottom: 25px;
}
.contact-ayah {
  border-top: 1px solid rgba(201,162,74,0.3);
  padding-top: 20px;
  margin-top: 20px;
}
.contact-ayah .arabic {
  font-size: 1.5rem;
  color: var(--gold);
  text-align: left;
  direction: rtl;
  margin-bottom: 8px;
}
.contact-ayah .translation {
  font-size: 13px;
  opacity: 0.95;
  font-style: italic;
}
.contact-ayah .reference {
  font-size: 11px;
  color: var(--gold);
  font-weight: 600;
  margin-top: 4px;
}
.contact-help-section {
  padding: 60px 0 30px;
  text-align: center;
}
.contact-help-section h3 {
  font-family: 'Playfair Display', serif;
  font-size: 32px;
  color: var(--green);
  position: relative;
  display: inline-block;
  padding: 0 40px;
  margin-bottom: 12px;
}
.contact-help-section h3::before, .contact-help-section h3::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 30px;
  height: 1px;
  background: var(--gold);
}
.contact-help-section h3::before { left: 0; }
.contact-help-section h3::after { right: 0; }
.contact-help-section p {
  font-size: 14px;
  color: var(--muted);
  max-width: 600px;
  margin: 0 auto;
}
.contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding-bottom: 60px;
}
.contact-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 30px 20px;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.contact-card:hover {
  transform: translateY(-5px);
}
.contact-card-icon {
  width: 54px;
  height: 54px;
  background: var(--green);
  color: var(--gold);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 20px;
  margin-bottom: 18px;
}
.contact-card h4 {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  color: var(--green);
  margin-bottom: 10px;
}
.contact-card p, .contact-card a {
  font-size: 13px;
  color: var(--muted);
  word-break: break-word;
}
.contact-card-decor {
  width: 40px;
  height: 4px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-top: 15px;
}
.contact-bottom-bar {
  background: var(--green-dark);
  color: #fff;
  padding: 30px 0;
  text-align: center;
  border-top: 3px solid var(--gold);
}
.contact-bottom-bar i {
  font-size: 28px;
  color: var(--gold);
  margin-bottom: 12px;
}
.contact-bottom-bar p {
  font-style: italic;
  font-size: 14px;
  max-width: 700px;
  margin: 0 auto 6px;
}
.contact-bottom-bar small {
  color: var(--gold);
  font-weight: 600;
  font-size: 12px;
}

/* ABOUT US */
.about-split {
  padding: 60px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
.about-image-frame {
  border: 3px solid var(--gold);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.about-content h2 {
  font-family: 'Playfair Display', serif;
  font-size: 40px;
  color: var(--green);
  margin-bottom: 20px;
}
.about-content p {
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 18px;
  line-height: 1.7;
}
.about-values-list {
  margin-top: 20px;
}
.about-values-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  padding: 6px 0;
  color: var(--text);
}
.about-values-list li i {
  color: var(--gold);
}
.about-grid-section {
  background: var(--cream);
  padding: 60px 0;
}
.about-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.about-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 35px 28px;
  text-align: center;
  box-shadow: var(--shadow);
}
.about-card-icon {
  width: 60px;
  height: 60px;
  background: var(--gold-light);
  color: var(--gold);
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 24px;
  margin: 0 auto 20px;
}
.about-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: var(--green);
  margin-bottom: 12px;
}
.about-card p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

/* POLICY PAGES */
.policy-section {
  padding: 60px 0 80px;
}
.policy-container {
  max-width: 800px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 50px;
  box-shadow: var(--shadow);
}
.policy-header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 25px;
  margin-bottom: 35px;
  text-align: center;
}
.policy-header h1 {
  font-family: 'Playfair Display', serif;
  font-size: 38px;
  color: var(--green);
  margin-bottom: 10px;
}
.policy-date-badge {
  display: inline-block;
  background: var(--gold-light);
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 50px;
}
.policy-body {
  font-size: 15px;
  color: var(--text);
  line-height: 1.8;
}
.policy-body h2, .policy-body h3 {
  font-family: 'Playfair Display', serif;
  color: var(--green);
  margin: 30px 0 15px;
}
.policy-body h2 {
  font-size: 24px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.policy-body h3 {
  font-size: 20px;
}
.policy-body p {
  margin-bottom: 20px;
}
.policy-body ul {
  list-style: disc;
  margin-left: 20px;
  margin-bottom: 25px;
}
.policy-body ul li {
  padding: 4px 0;
  font-size: 14px;
}

/* RESPONSIVE ADDITIONS */
@media (max-width: 1100px) {
  .contact-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; }
  .about-split { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 768px) {
  .contact-banner-inner { grid-template-columns: 1fr; text-align: center; }
  .contact-banner-text { margin: 0 auto; }
  .contact-ayah .arabic { text-align: center; }
  .policy-container { padding: 30px 20px; }
  .policy-header h1 { font-size: 28px; }
}
@media (max-width: 480px) {
  .contact-cards-grid { grid-template-columns: 1fr; }
}

/* ========== INNER PAGES (QURAN, HISTORY, DUA, ETC.) ========== */
.page-hero {
  background: linear-gradient(135deg, var(--green) 0%, #0a3a22 100%);
  color: #fff;
  padding: 80px 0 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 30%, rgba(201,162,74,0.15), transparent 50%), radial-gradient(circle at 80% 70%, rgba(201,162,74,0.1), transparent 50%);
  pointer-events: none;
}
.page-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin-bottom: 14px;
  position: relative;
}
.page-hero p {
  max-width: 640px;
  margin: 0 auto;
  opacity: 0.9;
  font-size: 1.05rem;
  position: relative;
}
.page-hero .crumbs {
  margin-top: 18px;
  font-size: 0.9rem;
  opacity: 0.85;
  position: relative;
}
.page-hero .crumbs a {
  color: var(--gold);
  text-decoration: none;
}
.page-section {
  padding: 70px 0;
}
.page-section.alt {
  background: #f7f4ec;
}
.dark .page-section.alt {
  background: #0f2419;
}
.section-heading {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  text-align: center;
  color: var(--green);
  margin-bottom: 12px;
}
.dark .section-heading {
  color: var(--gold);
}
.section-sub {
  text-align: center;
  color: #666;
  max-width: 640px;
  margin: 0 auto 40px;
}
.dark .section-sub {
  color: #aaa;
}

/* Surah / Hadith / Dua list */
.list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.list-item {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 18px;
  transition: 0.3s;
  cursor: pointer;
  display: flex;
  gap: 14px;
  align-items: center;
}
.list-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(12,74,43,0.12);
  border-color: var(--gold);
}
.dark .list-item {
  background: #123526;
  border-color: #1e4a34;
  color: #eee;
}
.list-item .num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), #0a3a22);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.list-item .gold-num {
  background: linear-gradient(135deg, var(--gold), #a8801e);
}
.list-item h4 {
  margin: 0;
  font-size: 1rem;
  color: var(--green);
}
.dark .list-item h4 {
  color: var(--gold);
}
.list-item small {
  color: #888;
  font-size: 0.8rem;
}
.list-item .arabic-sm {
  font-family: 'Amiri', serif;
  font-size: 1.2rem;
  color: var(--green);
  margin-top: 2px;
}
.dark .list-item .arabic-sm {
  color: var(--gold);
}

/* Timeline (History) */
.timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 0;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--gold);
  transform: translateX(-50%);
}
.tl-item {
  position: relative;
  width: 50%;
  padding: 20px 40px;
  box-sizing: border-box;
}
.tl-item:nth-child(odd) {
  left: 0;
  text-align: right;
}
.tl-item:nth-child(even) {
  left: 50%;
}
.tl-item .dot {
  position: absolute;
  top: 28px;
  width: 16px;
  height: 16px;
  background: var(--gold);
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--gold);
}
.tl-item:nth-child(odd) .dot {
  right: -8px;
}
.tl-item:nth-child(even) .dot {
  left: -8px;
}
.tl-content {
  background: #fff;
  padding: 18px 20px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  border-left: 4px solid var(--green);
}
.dark .tl-content {
  background: #123526;
  color: #eee;
  border-color: var(--gold);
}
.tl-content .year {
  color: var(--gold);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 1px;
}
.tl-content h4 {
  margin: 6px 0 8px;
  color: var(--green);
  font-family: 'Playfair Display', serif;
}
.dark .tl-content h4 {
  color: var(--gold);
}
.tl-content p {
  margin: 0;
  color: #555;
  font-size: 0.92rem;
}
.dark .tl-content p {
  color: #bbb;
}
@media (max-width: 700px) {
  .timeline::before { left: 20px; }
  .tl-item { width: 100%; left: 0 !important; text-align: left !important; padding-left: 50px; padding-right: 10px; }
  .tl-item .dot { left: 12px !important; right: auto !important; }
}

/* About Grid */
.about-grid-alt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
.about-grid-alt img {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(12,74,43,0.15);
}
.about-grid-alt h2 {
  font-family: 'Playfair Display', serif;
  color: var(--green);
  font-size: 2rem;
  margin-bottom: 16px;
}
.dark .about-grid-alt h2 {
  color: var(--gold);
}
.about-grid-alt p {
  color: #555;
  line-height: 1.8;
  margin-bottom: 14px;
}
.dark .about-grid-alt p {
  color: #ccc;
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.value-card {
  background: #fff;
  padding: 26px;
  border-radius: 14px;
  text-align: center;
  border: 1px solid #eee;
  transition: 0.3s;
}
.value-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 10px 24px rgba(12,74,43,0.1);
}
.dark .value-card {
  background: #123526;
  border-color: #1e4a34;
  color: #eee;
}
.value-card i {
  font-size: 2rem;
  color: var(--gold);
  margin-bottom: 12px;
}
.value-card h4 {
  color: var(--green);
  margin-bottom: 8px;
  font-family: 'Playfair Display', serif;
}
.dark .value-card h4 {
  color: var(--gold);
}
.value-card p {
  color: #666;
  font-size: 0.92rem;
  margin: 0;
}
.dark .value-card p {
  color: #bbb;
}
@media (max-width: 820px) {
  .about-grid-alt { grid-template-columns: 1fr; }
}

/* Contact Grid */
.contact-grid-alt {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
}
.contact-info-alt {
  background: linear-gradient(135deg, var(--green), #0a3a22);
  color: #fff;
  padding: 36px;
  border-radius: 16px;
}
.contact-info-alt h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  margin-bottom: 8px;
}
.contact-info-alt p {
  opacity: 0.9;
  margin-bottom: 24px;
}
.contact-info-alt .ci-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 20px;
}
.contact-info-alt .ci-item i {
  width: 42px;
  height: 42px;
  background: rgba(201,162,74,0.2);
  color: var(--gold);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-info-alt .ci-item strong {
  display: block;
  margin-bottom: 2px;
}
.contact-info-alt .ci-item span {
  opacity: 0.85;
  font-size: 0.9rem;
}
.contact-form-alt {
  background: #fff;
  padding: 36px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}
.dark .contact-form-alt {
  background: #123526;
  color: #eee;
}
.contact-form-alt h3 {
  color: var(--green);
  font-family: 'Playfair Display', serif;
  margin-bottom: 8px;
}
.dark .contact-form-alt h3 {
  color: var(--gold);
}
.contact-form-alt .field {
  margin-bottom: 16px;
}
.contact-form-alt label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 6px;
  font-weight: 500;
}
.contact-form-alt input, .contact-form-alt textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.95rem;
  background: #f9f9f9;
  transition: 0.3s;
}
.dark .contact-form-alt input, .dark .contact-form-alt textarea {
  background: #0f2419;
  border-color: #1e4a34;
  color: #eee;
}
.contact-form-alt input:focus, .contact-form-alt textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: #fff;
}
.dark .contact-form-alt input:focus, .dark .contact-form-alt textarea:focus {
  background: #0a1e12;
}
.contact-form-alt textarea {
  resize: vertical;
  min-height: 120px;
}
.contact-form-alt button {
  background: linear-gradient(135deg, var(--green), #0a3a22);
  color: #fff;
  border: none;
  padding: 13px 32px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}
.contact-form-alt button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(12,74,43,0.25);
}
@media (max-width: 820px) {
  .contact-grid-alt { grid-template-columns: 1fr; }
}

/* Dua cards */
.dua-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}
.dua-card {
  background: #fff;
  border-radius: 16px;
  padding: 26px;
  border: 1px solid #eee;
  border-top: 4px solid var(--gold);
  transition: 0.3s;
}
.dua-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(12,74,43,0.12);
}
.dark .dua-card {
  background: #123526;
  border-color: #1e4a34;
  color: #eee;
}
.dua-card h4 {
  color: var(--green);
  font-family: 'Playfair Display', serif;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dark .dua-card h4 {
  color: var(--gold);
}
.dua-card h4 i {
  color: var(--gold);
}
.dua-card .arabic {
  font-family: 'Amiri', serif;
  font-size: 1.4rem;
  color: var(--green);
  direction: rtl;
  text-align: right;
  line-height: 1.9;
  margin-bottom: 12px;
}
.dark .dua-card .arabic {
  color: var(--gold);
}
.dua-card .translit {
  font-style: italic;
  color: #777;
  font-size: 0.9rem;
  margin-bottom: 8px;
}
.dark .dua-card .translit {
  color: #aaa;
}
.dua-card .translation {
  color: #555;
  font-size: 0.95rem;
  line-height: 1.6;
}
.dark .dua-card .translation {
  color: #ccc;
}
.dua-card .ref {
  margin-top: 12px;
  font-size: 0.82rem;
  color: var(--gold);
  font-weight: 600;
}

/* ========== INTERACTIVE QURAN READER ADDITIONS ========== */

/* Reading Preferences Bar */
.reading-prefs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 15px;
  box-shadow: var(--shadow);
}
.pref-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pref-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
}
.pref-btn-group {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.pref-btn {
  background: var(--white);
  border: none;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text);
  transition: all 0.2s ease;
}
.pref-btn.active {
  background: var(--green);
  color: #fff;
}
.pref-btn.theme-sepia-btn { background: #f4ecd8; color: #5b4636; }
.pref-btn.theme-sepia-btn.active { background: #e6d3a8; color: #5b4636; border: 1px solid #c8b27c; }
.pref-btn.theme-dark-btn { background: #1a1a1a; color: #e0e0e0; }
.pref-btn.theme-dark-btn.active { background: #333333; color: #fff; }

.pref-slider {
  width: 120px;
  cursor: pointer;
  accent-color: var(--green);
}

/* Reading Pane Container */
.quran-reading-pane {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  min-height: 400px;
}
.quran-reading-pane.theme-sepia {
  background-color: #f4ecd8 !important;
  color: #5b4636 !important;
  border-color: #e4d8bc !important;
}
.quran-reading-pane.theme-sepia .verse-row {
  border-bottom-color: rgba(91, 70, 54, 0.15);
}
.quran-reading-pane.theme-sepia .arabic-word:hover {
  background-color: rgba(12, 74, 43, 0.1);
  color: var(--green);
}
.quran-reading-pane.theme-dark {
  background-color: #121212 !important;
  color: #e0e0e0 !important;
  border-color: #292929 !important;
}
.quran-reading-pane.theme-dark .verse-row {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.quran-reading-pane.theme-dark .arabic-word:hover {
  background-color: rgba(201, 162, 74, 0.2);
  color: var(--gold);
}
.quran-reading-pane.theme-dark .verse-num-badge {
  background: #222;
  color: var(--gold);
  border-color: #333;
}

/* Verse Structure */
.verse-row {
  padding: 30px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.verse-row:last-child {
  border-bottom: none;
}
.verse-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.verse-num-badge {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  background: var(--cream);
}
.verse-actions {
  display: flex;
  gap: 10px;
}
.verse-action-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  padding: 5px;
  transition: color 0.2s ease;
}
.verse-action-btn:hover {
  color: var(--gold);
}
.verse-action-btn.bookmarked {
  color: var(--gold);
}

/* Text Sizing & Alignment */
.verse-arabic {
  direction: rtl;
  text-align: right;
  font-family: 'Amiri', serif;
  font-size: 2.2rem;
  line-height: 2.2;
  margin-bottom: 10px;
}
.verse-translation-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.translation-line {
  font-size: 15px;
  line-height: 1.6;
}
.translation-line.roman-urdu {
  color: var(--green);
  font-weight: 500;
}
.quran-reading-pane.theme-sepia .translation-line.roman-urdu {
  color: #632d13;
}
.quran-reading-pane.theme-dark .translation-line.roman-urdu {
  color: var(--gold);
}
.translation-line.standard {
  color: var(--muted);
}
.quran-reading-pane.theme-sepia .translation-line.standard {
  color: #706053;
}
.quran-reading-pane.theme-dark .translation-line.standard {
  color: #b0b0b0;
}

/* Word-by-word Tooltips */
.arabic-word {
  display: inline-block;
  cursor: help;
  padding: 2px 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
  position: relative;
}
.arabic-word:hover {
  background-color: var(--green-light);
}

/* Tooltip container element generated by JS */
.iw-wbw-tooltip {
  position: absolute;
  background: rgba(12, 74, 43, 0.96);
  color: #fff;
  border: 1px solid var(--gold);
  padding: 10px 14px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  z-index: 9999;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  transform: translate(-50%, -100%);
  margin-top: -8px;
}
.iw-wbw-tooltip::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: rgba(12, 74, 43, 0.96) transparent;
  display: block;
  width: 0;
}
.iw-wbw-tooltip .tooltip-roman {
  font-weight: 600;
  color: var(--gold);
}
.iw-wbw-tooltip .tooltip-english {
  opacity: 0.85;
}

/* Interactive Navigation Grid */
.surah-nav-card {
  transition: all 0.3s ease !important;
}
.surah-nav-card.active {
  border-color: var(--gold) !important;
  background-color: var(--green-light) !important;
  box-shadow: 0 8px 20px rgba(12,74,43,0.12) !important;
  transform: translateY(-2px);
}
.dark .surah-nav-card.active {
  background-color: #1e4a34 !important;
  color: #fff !important;
}

/* Narrative context cards */
.surah-context-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 30px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.surah-context-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gold-light);
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 50px;
  width: fit-content;
}
.surah-context-card h3 {
  font-family: 'Playfair Display', serif;
  color: var(--green);
  font-size: 22px;
  margin: 0;
}
.surah-context-card p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}

/* Bookmark List Item */
.bookmark-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bookmark-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.bookmark-item:hover {
  border-color: var(--gold);
  background: var(--cream);
}
.bookmark-item span {
  font-weight: 600;
  color: var(--green);
}
.bookmark-item i {
  color: var(--muted);
  transition: color 0.2s ease;
}
.bookmark-item i:hover {
  color: #ff3333;
}