/*
Theme Name: Yuqinoon Dark Luxury
Theme URI: https://yuqinoon.com
Author: Yuqinoon Islamic Center
Author URI: https://yuqinoon.com
Description: Dark luxury Islamic theme for Yuqinoon Islamic Center. Features golden gradient background, Cinzel Decorative + Pinyon Script typography, premium hero with mosque image, gold SVG icons, and animated badges.
Version: 4.5.8
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yuqinoon-starter
Tags: custom-logo, custom-menu, full-width-template
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
*/


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}

:root{
  --gold:#D4AF55;
  --gold2:#C8A030;
  --gold-light:#F0D070;
  --gold-grad:linear-gradient(135deg,#7A5508 0%,#C8A030 25%,#F0D070 50%,#C8A030 75%,#7A5508 100%);
  --text:#F2E8CC;
  --text-sub:rgba(242,232,204,0.52);
  --text-dim:rgba(242,232,204,0.25);
  --border:rgba(212,175,85,0.14);
  --border-hov:rgba(212,175,85,0.42);
}

::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:#030202}
::-webkit-scrollbar-thumb{background:#7A6020;border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}

/* ══════════════════════════════════════
   GRADIENT BACKGROUND
   Rich black → warm amber gradient
   Like velvet lit by candlelight
   ══════════════════════════════════════ */
body{
  font-family:'Inter',sans-serif;
  color:var(--text);
  min-height:100vh;
  background-color:#080706;
  background-image:
    /* TOP RIGHT — warm amber glow, main light source */
    radial-gradient(ellipse at 85% 0%, rgba(190,138,28,0.38) 0%, rgba(145,98,12,0.20) 25%, transparent 55%),
    /* BOTTOM LEFT — secondary warm glow */
    radial-gradient(ellipse at -8% 100%, rgba(168,118,18,0.26) 0%, rgba(125,85,8,0.14) 28%, transparent 52%),
    /* CENTER — deep luxurious dark */
    radial-gradient(ellipse at 48% 52%, rgba(4,3,2,0.82) 0%, transparent 62%),
    /* Subtle diagonal silk sheen */
    linear-gradient(135deg, rgba(180,130,20,0.04) 0%, transparent 40%, rgba(160,110,15,0.03) 70%, transparent 100%),
    /* Fine texture lines */
    repeating-linear-gradient(108deg,
      transparent 0px, transparent 155px,
      rgba(185,140,32,0.048) 155px, rgba(185,140,32,0.048) 156px,
      transparent 156px, transparent 310px,
      rgba(160,115,20,0.032) 310px, rgba(160,115,20,0.032) 310.5px,
      transparent 310.5px, transparent 490px),
    repeating-linear-gradient(54deg,
      transparent 0px, transparent 195px,
      rgba(165,118,22,0.040) 195px, rgba(165,118,22,0.040) 196px,
      transparent 196px, transparent 410px,
      rgba(205,158,38,0.025) 410px, rgba(205,158,38,0.025) 410.5px,
      transparent 410.5px, transparent 625px),
    /* Dark velvet base */
    linear-gradient(155deg,#0D0B08 0%,#080705 28%,#050402 55%,#0A0806 82%,#0D0B08 100%);
}

/* ─── ANIMATIONS ─── */
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes goldShimmer{0%{background-position:-300% center}100%{background-position:300% center}}

.f1{animation:fadeUp .85s .08s both}
.f2{animation:fadeUp .85s .22s both}
.f3{animation:fadeUp .85s .38s both}
.f4{animation:fadeUp .85s .54s both}

/* ─── NAVBAR ─── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:76px;padding:0 64px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(8,7,5,0.93);
  backdrop-filter:blur(30px);
  border-bottom:1px solid rgba(212,175,85,0.09);
}

/* LOGO — larger, prominent, with YUQINOON text */
.nav-brand{display:flex;align-items:center;gap:16px}
.nav-brand-img{
  height:62px;width:62px;
  object-fit:contain;
  /* Strong gold glow to make it pop against dark nav */
  filter:drop-shadow(0 0 14px rgba(212,175,85,0.55)) drop-shadow(0 0 4px rgba(212,175,85,0.4)) brightness(1.20) contrast(1.08);
}
.nav-brand-text{display:flex;flex-direction:column;gap:1px}
.nav-brand-name{
  font-family:'Cinzel',serif;
  font-size:18px;font-weight:700;letter-spacing:0.26em;
  color:var(--gold);
  text-shadow:0 0 28px rgba(212,175,85,0.35), 0 0 8px rgba(212,175,85,0.20);
  line-height:1;
}
.nav-brand-sub{
  font-family:'Inter',sans-serif;
  font-size:8px;font-weight:300;letter-spacing:0.28em;
  color:rgba(212,175,85,0.36);
  text-transform:uppercase;
}

.nav-links{display:flex;gap:44px}
.nav-links a{
  font-family:'Cinzel',serif;
  font-size:11px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(242,232,204,0.44);
  transition:color .3s;position:relative;padding-bottom:4px;
}
.nav-links a::after{
  content:'';position:absolute;bottom:0;left:0;right:0;
  height:1px;background:var(--gold);
  transform:scaleX(0);transition:transform .3s;transform-origin:center;
}
.nav-links a:hover,.nav-links a.active{color:var(--gold)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-cta{
  font-family:'Cinzel',serif;
  font-size:10.5px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;
  padding:10px 28px;
  background:var(--gold-grad);
  color:#060503;
  border-radius:1px;
  box-shadow:0 2px 22px rgba(160,110,15,0.30);
  transition:all .3s;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 5px 32px rgba(160,110,15,0.48)}
.nav-toggle{display:none} /* shown only on mobile via media query */

/* ─── BUTTONS ─── */
.btn-primary{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Cinzel',serif;
  font-size:11.5px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;
  padding:16px 42px;
  background:linear-gradient(135deg,#7A5508 0%,#C0980A 20%,#EDD060 46%,#C0980A 72%,#7A5508 100%);
  color:#050402;
  border:none;border-radius:1px;cursor:pointer;
  box-shadow:0 4px 28px rgba(130,90,8,0.42),inset 0 1px 0 rgba(255,255,255,0.18);
  transition:all .35s ease;
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 42px rgba(130,90,8,0.58),inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn-ghost{
  display:inline-flex;align-items:center;
  font-family:'Cinzel',serif;
  font-size:11.5px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;
  padding:15px 40px;
  background:transparent;color:rgba(242,232,204,0.58);
  border:1px solid rgba(212,175,85,0.28);border-radius:1px;cursor:pointer;
  transition:all .3s;
}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-enroll{
  display:flex;align-items:center;justify-content:center;
  font-family:'Cinzel',serif;
  font-size:10.5px;font-weight:600;letter-spacing:0.17em;text-transform:uppercase;
  width:100%;padding:13px;margin-top:22px;
  background:linear-gradient(135deg,#7A5508 0%,#C0980A 20%,#EDD060 46%,#C0980A 72%,#7A5508 100%);
  color:#050402;border:none;border-radius:1px;cursor:pointer;
  box-shadow:0 3px 20px rgba(130,90,8,0.35);transition:all .3s;
}
.btn-enroll:hover{transform:translateY(-2px);box-shadow:0 6px 32px rgba(130,90,8,0.52)}

/* ─── SECTION ELEMENTS ─── */
.sec-tag{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Cinzel',serif;
  font-size:10px;font-weight:500;letter-spacing:0.28em;text-transform:uppercase;
  color:var(--gold);margin-bottom:18px;
}
.sec-tag::before{content:'◆';font-size:6px}
.sec-h2{
  font-family:'Cinzel Decorative',serif;
  font-size:clamp(32px,3.3vw,52px);
  font-weight:300;line-height:1.15;
  color:var(--text);
}
.sec-h2 em{font-style:normal;color:var(--gold);font-family:'Pinyon Script',cursive;font-size:1.3em;line-height:1.1;display:inline-block;}
.sec-rule{width:50px;height:1px;background:linear-gradient(to right,var(--gold),transparent);margin:20px 0}
.sec-p{
  font-family:'Inter',sans-serif;
  font-size:14.5px;font-weight:300;
  color:var(--text-sub);line-height:1.96;margin-bottom:14px;
}

/* ─── HERO ─── */
.hero{
  min-height:100vh;
  padding:76px 64px 60px;
  display:flex;align-items:center;
  position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;
  top:25%;right:18%;
  width:680px;height:680px;border-radius:50%;
  background:radial-gradient(circle,rgba(165,115,18,0.07) 0%,transparent 68%);
  pointer-events:none;
}
.hero-inner{
  max-width:1280px;margin:0 auto;width:100%;
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
}
/* LEFT text */
.hero-bismillah{
  font-family:'Noto Naskh Arabic',serif;
  font-size:20px;color:rgba(212,175,85,0.76);
  direction:rtl;margin-bottom:30px;
  text-shadow:0 0 18px rgba(212,175,85,0.16);
}
.hero-h1{
  font-family:'Cinzel Decorative',serif;
  font-size:clamp(50px,6.5vw,88px);
  font-weight:300;line-height:1.10;color:var(--text);
}
.hero-h1 em{font-family:'Pinyon Script',cursive;
  font-style:normal;
  font-size:1.25em;
  line-height:1.1;
  display:block;
  background:linear-gradient(90deg,#7A5508,#EDD060,#FFF8DC,#EDD060,#7A5508);
  background-size:200% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:goldShimmer 5s linear infinite;
}
.hero-rule{width:56px;height:1px;background:linear-gradient(to right,var(--gold),transparent);margin:26px 0}
.hero-p{
  font-family:'Inter',sans-serif;
  font-size:15px;font-weight:300;
  color:var(--text-sub);line-height:1.92;max-width:465px;margin-bottom:38px;
}
.hero-btns{display:flex;gap:14px;align-items:center;flex-wrap:wrap}

/* RIGHT — ACTUAL SITE HERO IMAGE (the mosque/brand photo) */
.hero-right{position:relative;display:flex;justify-content:center;padding:20px 50px 20px 20px}
.hero-card{
  width:340px;border-radius:22px;overflow:hidden;
  border:1px solid rgba(212,175,85,0.26);
  box-shadow:0 36px 84px rgba(0,0,0,0.74),0 0 60px rgba(185,135,18,0.09);
  animation:float 5.8s ease-in-out infinite;
  position:relative;
}
/* 
  ACTUAL WEBSITE IMAGE — same mosque photo that appears on yuqinoon.com
  src: youqinoon-recreate-01.png (the hero/brand image with mosque)
*/
.hero-card-img{
  width:100%;height:480px;
  object-fit:cover;
  /* 
    youqinoon-recreate-01.png is 1600x1600:
    - Top ~40%: logo/brand text area
    - Bottom ~60%: mosque aerial photo (blue dome, minaret)
    Shift to 72% to show the mosque dome & minarets, not the logo
  */
  object-position:center 35%;
  display:block;
}
.hero-card-foot{
  position:absolute;bottom:0;left:0;right:0;
  padding:20px 20px;
  background:linear-gradient(to top,rgba(7,6,4,0.97) 52%,transparent);
}
.hfoot-verse{
  font-family:'Noto Naskh Arabic',serif;
  font-size:14px;color:var(--gold);
  direction:rtl;text-align:center;line-height:1.85;
}
.hfoot-ref{
  font-family:'Cinzel',serif;
  font-size:7px;letter-spacing:0.16em;
  color:rgba(212,175,85,0.40);
  text-align:center;margin-top:5px;text-transform:uppercase;
}
/* Badges */
.badge{
  position:absolute;
  background:rgba(9,8,6,0.96);
  backdrop-filter:blur(18px);
  border:1px solid rgba(212,175,85,0.30);
  border-radius:9px;padding:14px 22px;
  box-shadow:0 8px 28px rgba(0,0,0,0.70);
  display:flex;flex-direction:column;
}
/* Badges — 500+ on left side, 15+ top-right overlapping card corner */
.badge-l{bottom:80px;left:-10px;animation:float 4.5s ease-in-out infinite}
.badge-r{bottom:310px;right:10px;animation:float 6s .55s ease-in-out infinite}
.badge-num{
  font-family:'Cinzel',serif;
  font-size:28px;font-weight:700;color:var(--gold);
  letter-spacing:0.04em;line-height:1;
  display:block;
}
.badge-lbl{
  font-family:'Cinzel',serif;
  font-size:9px;letter-spacing:0.14em;
  color:rgba(212,175,85,0.75);
  text-transform:uppercase;margin-top:5px;
  font-weight:500;
  display:block;
}

/* ─── TICKER (scrolling words row) ─── */
.ticker{
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:14px 0;overflow:hidden;
  background:rgba(212,175,85,0.016);
}
.ticker-inner{
  display:flex;white-space:nowrap;
  animation:marquee 25s linear infinite;
}
.ticker-item{
  font-family:'Cinzel',serif;
  font-size:11px;letter-spacing:0.28em;
  color:rgba(212,175,85,0.36);padding:0 32px;text-transform:uppercase;
}
.ticker-dot{color:var(--gold);opacity:.45;font-size:7px;padding:0 6px}
/* keep old marquee classes too */
.marquee-wrap{
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:14px 0;overflow:hidden;
  background:rgba(212,175,85,0.016);
}
.marquee-inner{display:flex;white-space:nowrap;animation:marquee 25s linear infinite}
.mq-item{
  font-family:'Cinzel',serif;
  font-size:11px;letter-spacing:0.28em;
  color:rgba(212,175,85,0.36);padding:0 32px;text-transform:uppercase;
}
.mq-dot{color:var(--gold);opacity:.45;font-size:7px;padding:0 6px}

/* ─── ABOUT ─── */
.about{padding:115px 64px}
.about-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:86px;align-items:center}
.about-imgwrap{position:relative}
.about-img-wrap{position:relative}
.about-img{
  width:100%;height:480px;object-fit:cover;
  border-radius:3px;
  border:1px solid rgba(212,175,85,0.15);
  box-shadow:0 24px 66px rgba(0,0,0,0.62);
}
.about-card{
  position:absolute;bottom:-16px;left:18px;
  background:rgba(9,8,6,0.97);
  border:1px solid rgba(212,175,85,0.25);
  padding:18px 24px;border-radius:3px;
  box-shadow:0 8px 28px rgba(0,0,0,0.54);
}
.acard-ar{font-family:'Noto Naskh Arabic',serif;font-size:28px;color:var(--gold);direction:rtl}
.acard-sub{font-family:'Cinzel',serif;font-size:8px;letter-spacing:0.2em;color:rgba(212,175,85,0.38);margin-top:4px}
.about-badge{
  position:absolute;top:24px;right:16px;
  background:rgba(9,8,6,0.97);
  border:1px solid rgba(212,175,85,0.25);
  padding:16px 22px;border-radius:3px;text-align:center;
  box-shadow:0 6px 24px rgba(0,0,0,0.46);
}
.ab-lbl{font-family:'Cinzel',serif;font-size:8px;letter-spacing:0.2em;color:rgba(212,175,85,0.38);text-transform:uppercase}
.ab-year{font-family:'Cinzel Decorative',serif;font-size:38px;font-weight:300;color:var(--gold);line-height:1.1;margin:3px 0}
.ab-ar{font-family:'Noto Naskh Arabic',serif;font-size:13px;color:rgba(212,175,85,0.42)}
.ab-s{font-family:'Cinzel',serif;font-size:7px;letter-spacing:0.14em;color:rgba(212,175,85,0.26);text-transform:uppercase;margin-top:2px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:36px}
.stat{padding:20px 0;border-top:1px solid rgba(212,175,85,0.10)}
.stat-n{font-family:'Cinzel Decorative',serif;font-size:42px;font-weight:300;color:var(--gold);line-height:1}
.stat-l{font-family:'Cinzel',serif;font-size:8px;letter-spacing:0.18em;color:rgba(212,175,85,0.36);text-transform:uppercase;margin-top:5px}

/* ─── VERSE ─── */
.verse-sec{
  padding:90px 64px;text-align:center;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:radial-gradient(ellipse at center,rgba(165,115,16,0.08) 0%,transparent 62%);
}
.verse-ar{
  font-family:'Noto Naskh Arabic',serif;
  font-size:clamp(22px,3.5vw,44px);
  color:var(--gold);direction:rtl;line-height:2.0;
  text-shadow:0 0 44px rgba(212,175,85,0.22);
  max-width:920px;margin:0 auto 16px;
}
.verse-en{font-family:'Cinzel Decorative',serif;font-style:italic;font-size:20px;font-weight:300;color:var(--text-sub)}
.verse-ref{font-family:'Cinzel',serif;font-size:10px;letter-spacing:0.22em;color:rgba(212,175,85,0.28);text-transform:uppercase;margin-top:9px}

/* ─── COURSES ─── */
.courses{padding:115px 64px}
.courses-inner{max-width:1280px;margin:0 auto}
.courses-hd{text-align:center;margin-bottom:68px}
.courses-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ccard{
  background:rgba(255,255,255,0.020);
  border:1px solid var(--border);
  border-radius:3px;overflow:hidden;
  transition:all .4s ease;position:relative;
}
.ccard::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(135deg,#7A5508,#D4AF55,#EDD070,#D4AF55,#7A5508);
  opacity:0;transition:opacity .4s;
}
.ccard:hover{
  border-color:var(--border-hov);
  transform:translateY(-7px);
  box-shadow:0 24px 52px rgba(0,0,0,0.54),0 0 30px rgba(185,135,15,0.06);
}
.ccard:hover::before{opacity:1}
.ccard-img{width:100%;height:210px;object-fit:cover;display:block}
.ccard-body{padding:28px}
.ccard-lvl{font-family:'Cinzel',serif;font-size:9px;letter-spacing:0.22em;color:var(--gold);text-transform:uppercase;margin-bottom:10px}
.ccard-name{font-family:'Cinzel Decorative',serif;font-size:28px;font-weight:300;color:var(--text);margin-bottom:12px}
.ccard-desc{font-family:'Inter',sans-serif;font-size:13px;font-weight:300;color:var(--text-sub);line-height:1.84;margin-bottom:18px}
.ccard-list{list-style:none}
.ccard-list li{
  font-family:'Inter',sans-serif;font-size:12px;font-weight:300;
  color:rgba(242,232,204,0.33);padding:7px 0;
  border-bottom:1px solid rgba(212,175,85,0.06);
  display:flex;align-items:center;gap:9px;
}
.ccard-list li::before{content:'◆';color:var(--gold);font-size:5.5px}

/* ─── TESTIMONIALS ─── */
.testi{padding:100px 64px}
.testi-inner{max-width:1280px;margin:0 auto}
.testi-hd{text-align:center;margin-bottom:62px}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tcard{
  background:rgba(255,255,255,0.020);
  border:1px solid var(--border);
  border-radius:3px;padding:30px;
  transition:border-color .3s;
}
.tcard:hover{border-color:var(--border-hov)}
.stars{color:var(--gold);font-size:12px;letter-spacing:3px;margin-bottom:16px}
.tcard-text{
  font-family:'Cinzel Decorative',serif;
  font-style:italic;font-size:15px;font-weight:300;
  color:var(--text-sub);line-height:1.88;margin-bottom:20px;
}
.tcard-sep{height:1px;background:linear-gradient(to right,transparent,rgba(212,175,85,0.18),transparent);margin-bottom:18px}
.tcard-auth{display:flex;align-items:center;gap:12px}
.auth-av{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:rgba(212,175,85,0.09);border:1px solid rgba(212,175,85,0.22);
  display:flex;align-items:center;justify-content:center;
  font-family:'Cinzel Decorative',serif;font-size:16px;color:var(--gold);
}
.auth-name{font-family:'Cinzel',serif;font-size:11.5px;font-weight:500;letter-spacing:0.06em;color:var(--text)}
.auth-loc{font-family:'Inter',sans-serif;font-size:11px;font-weight:300;color:var(--text-dim);margin-top:2px}
.tcard-course{
  font-family:'Cinzel',serif;font-size:7.5px;letter-spacing:0.18em;
  color:rgba(212,175,85,0.40);text-transform:uppercase;
  padding:3px 10px;border:1px solid rgba(212,175,85,0.13);border-radius:1px;
  margin-left:auto;white-space:nowrap;
}

/* ─── CONTACT ─── */
.contact{padding:112px 64px;border-top:1px solid var(--border)}
.contact-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:86px;align-items:start}
.contact-imgwrap{position:relative}
.contact-img-col{position:relative}
.contact-form-col{display:flex;flex-direction:column;gap:0}
.contact-form{display:flex;flex-direction:column;gap:12px;margin-top:32px}
.contact-img{
  width:100%;border-radius:3px;
  border:1px solid rgba(212,175,85,0.14);
  box-shadow:0 16px 50px rgba(0,0,0,0.56);
}
.contact-overlay{
  position:absolute;bottom:0;left:0;right:0;padding:24px 28px;
  background:linear-gradient(to top,rgba(7,6,4,0.97) 55%,transparent);
  text-align:center;
}
.co-ar{font-family:'Noto Naskh Arabic',serif;font-size:20px;color:var(--gold);direction:rtl;line-height:1.8;text-shadow:0 0 24px rgba(212,175,85,0.26)}
.co-sub{font-family:'Cinzel',serif;font-size:8px;letter-spacing:0.18em;color:rgba(212,175,85,0.32);text-transform:uppercase;margin-top:5px}
.form{display:flex;flex-direction:column;gap:12px;margin-top:32px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.inp{
  width:100%;padding:14px 18px;
  background:rgba(255,255,255,0.022);
  border:1px solid rgba(212,175,85,0.12);
  border-radius:2px;
  font-family:'Inter',sans-serif;font-size:13px;font-weight:300;
  color:var(--text);outline:none;transition:border-color .3s;
}
.inp:focus{border-color:rgba(212,175,85,0.38)}
.inp::placeholder{color:var(--text-dim)}
.inp.ta{height:116px;resize:none}
.ci-wrap{margin-top:34px;display:flex;flex-direction:column;gap:15px}
.ci{display:flex;gap:14px;align-items:center}
.ci-ico{
  width:42px;height:42px;border-radius:8px;flex-shrink:0;
  background:rgba(212,175,85,0.08);border:1px solid rgba(212,175,85,0.22);
  display:flex;align-items:center;justify-content:center;font-size:15px;
}
.ci-l{font-family:'Cinzel',serif;font-size:8px;letter-spacing:0.16em;color:rgba(212,175,85,0.40);text-transform:uppercase}
.ci-v{font-family:'Inter',sans-serif;font-size:13px;font-weight:300;color:var(--text-sub);margin-top:3px}

/* ─── FOOTER ─── */
footer{
  padding:64px 64px 28px;
  border-top:1px solid rgba(212,175,85,0.07);
  background:linear-gradient(180deg,rgba(5,4,3,0.55),rgba(3,2,1,0.96));
}
.ft-inner{max-width:1280px;margin:0 auto}
.ft-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:52px;margin-bottom:48px}
.ft-name{font-family:'Cinzel',serif;font-size:15px;letter-spacing:0.24em;color:var(--gold);margin-bottom:4px}
.ft-ar{font-family:'Noto Naskh Arabic',serif;font-size:18px;color:rgba(212,175,85,0.34);margin-bottom:14px}
.ft-p{font-family:'Inter',sans-serif;font-size:12px;font-weight:300;color:var(--text-dim);line-height:1.94;max-width:255px}
.ft-ct{font-family:'Cinzel',serif;font-size:9px;letter-spacing:0.24em;color:var(--gold);text-transform:uppercase;margin-bottom:18px}
.ft-links{display:flex;flex-direction:column;gap:10px}
.ft-links a{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:300;color:var(--text-dim);transition:color .25s}
.ft-links a:hover{color:var(--gold)}
.ft-bot{border-top:1px solid rgba(212,175,85,0.07);padding-top:22px;display:flex;justify-content:space-between;align-items:center}
.ft-copy{font-family:'Inter',sans-serif;font-size:11px;font-weight:300;color:rgba(242,232,204,0.17)}
.ft-bism{font-family:'Noto Naskh Arabic',serif;font-size:14px;color:rgba(212,175,85,0.17)}

/* ─── PWA SECTION ─── */
.pwa-section{
  padding:100px 64px;
  border-top:1px solid var(--border);
  background:linear-gradient(135deg,rgba(12,9,3,0.6) 0%,rgba(20,14,4,0.4) 100%);
}
.pwa-inner{
  max-width:1280px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;
  gap:80px;align-items:center;
}
/* Left image column */
.pwa-img-col{position:relative}
.pwa-img-wrap{
  position:relative;
  border-radius:16px;overflow:hidden;
  border:1px solid rgba(212,175,85,0.18);
  box-shadow:0 30px 80px rgba(0,0,0,0.6),0 0 40px rgba(180,130,10,0.08);
}
.pwa-img{
  width:100%;height:500px;
  object-fit:cover;object-position:center center;
  display:block;
  filter:brightness(0.9) saturate(1.1);
}
.pwa-img-overlay{
  position:absolute;bottom:0;left:0;right:0;
  padding:20px 22px;
  background:linear-gradient(0deg,rgba(6,5,2,0.92) 0%,transparent 100%);
}
.pwa-overlay-badge{
  display:inline-flex;gap:12px;align-items:center;
  background:rgba(10,8,3,0.85);
  border:1px solid rgba(212,175,85,0.22);
  padding:12px 18px;border-radius:8px;
  backdrop-filter:blur(12px);
}
.pwa-ov-label{
  font-family:'Cinzel',serif;font-size:8px;
  letter-spacing:0.18em;color:rgba(212,175,85,0.5);
  text-transform:uppercase;
}
.pwa-ov-val{
  font-family:'Cinzel',serif;font-size:13px;font-weight:600;
  color:var(--gold);letter-spacing:0.08em;margin-top:2px;
}
/* Right content column */
.pwa-content-col{}
.pwa-features{
  display:flex;flex-direction:column;gap:20px;
  margin:28px 0 36px;
}
.pwa-feat{display:flex;gap:16px;align-items:flex-start}
.pwa-feat-ico{
  width:42px;height:42px;border-radius:8px;flex-shrink:0;
  background:rgba(212,175,85,0.07);
  border:1px solid rgba(212,175,85,0.16);
  display:flex;align-items:center;justify-content:center;
}
.pwa-feat-title{
  font-family:'Cinzel',serif;font-size:12px;font-weight:500;
  letter-spacing:0.06em;color:var(--text);margin-bottom:5px;
}
.pwa-feat-desc{
  font-family:'Inter',sans-serif;font-size:13px;
  font-weight:300;color:var(--text-sub);line-height:1.5;
}
.pwa-btns{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.pwa-install-btn{
  cursor:pointer;border:none;
  display:inline-flex;align-items:center;gap:10px;
}
.pwa-ios-btn{
  font-family:'Cinzel',serif;font-size:9.5px;font-weight:500;
  letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(212,175,85,0.55);
  background:transparent;
  border:1px solid rgba(212,175,85,0.18);
  padding:13px 20px;border-radius:1px;
  display:inline-flex;align-items:center;gap:8px;
  transition:all .3s;cursor:pointer;
}
.pwa-ios-btn:hover{color:var(--gold);border-color:rgba(212,175,85,0.40);background:rgba(212,175,85,0.04);}

/* ─── HERO CARD VERSE ─── */
.hero-card-verse{
  position:absolute;bottom:0;left:0;right:0;
  padding:18px 20px;
  background:linear-gradient(0deg,rgba(4,3,1,0.95) 0%,transparent 100%);
  text-align:center;
}
.hero-verse-ar{
  font-family:'Noto Naskh Arabic',serif;
  font-size:15px;color:rgba(212,175,85,0.85);
  direction:rtl;margin-bottom:4px;
}
.hero-verse-en{
  font-family:'Cinzel',serif;
  font-size:7.5px;letter-spacing:0.15em;
  color:rgba(242,232,204,0.45);text-transform:uppercase;
}

/* ─── COURSE CARDS ─── */
.course-card{
  background:linear-gradient(160deg,rgba(18,14,5,0.9),rgba(10,8,2,0.97));
  border:1px solid rgba(212,175,85,0.14);
  border-radius:4px;overflow:hidden;
  transition:transform .3s,box-shadow .3s;
}
.course-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 60px rgba(0,0,0,0.5),0 0 30px rgba(185,135,18,0.08);
}
.course-img-wrap{width:100%;height:220px;overflow:hidden}
.course-img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.course-card:hover .course-img{transform:scale(1.05)}
.course-body{padding:28px 26px 30px}
.course-level{
  font-family:'Cinzel',serif;font-size:9px;
  letter-spacing:0.2em;color:rgba(212,175,85,0.5);
  text-transform:uppercase;margin-bottom:10px;
}
.course-title{
  font-family:'Cinzel Decorative',serif;
  font-size:22px;font-weight:400;
  color:var(--text);letter-spacing:0.04em;
  margin-bottom:12px;
}
.course-desc{
  font-family:'Inter',sans-serif;font-size:13px;
  font-weight:300;color:var(--text-sub);
  line-height:1.7;margin-bottom:16px;
}
.course-list{
  list-style:none;padding:0;margin:0 0 24px;
  display:flex;flex-direction:column;gap:7px;
}
.course-list li{
  font-family:'Inter',sans-serif;font-size:12px;
  font-weight:300;color:var(--text-dim);
  padding-left:14px;position:relative;
}
.course-list li::before{
  content:'·';position:absolute;left:0;
  color:var(--gold);font-size:16px;line-height:1;top:-1px;
}
.course-btn{font-size:10px;padding:12px 24px;width:100%;text-align:center;justify-content:center}

/* ─── TESTIMONIALS ─── */
.testi-card{
  background:linear-gradient(160deg,rgba(18,14,5,0.85),rgba(10,8,2,0.95));
  border:1px solid rgba(212,175,85,0.12);
  border-radius:4px;padding:32px 28px;
  display:flex;flex-direction:column;gap:20px;
}
.testi-stars{color:var(--gold);font-size:13px;letter-spacing:2px}
.testi-q{
  font-family:'Cinzel',serif;
  font-size:11.5px;font-weight:400;letter-spacing:0.06em;
  color:rgba(242,232,204,0.7);line-height:1.9;
  text-transform:uppercase;flex:1;
}
.testi-author{display:flex;align-items:center;gap:12px}
.testi-avatar{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,rgba(212,175,85,0.25),rgba(212,175,85,0.08));
  border:1px solid rgba(212,175,85,0.25);
  display:flex;align-items:center;justify-content:center;
  font-family:'Cinzel',serif;font-size:14px;font-weight:600;
  color:var(--gold);flex-shrink:0;
}
.testi-info{flex:1}
.testi-name{
  font-family:'Cinzel',serif;font-size:11px;font-weight:500;
  letter-spacing:0.1em;color:var(--text);margin-bottom:3px;
}
.testi-loc{
  font-family:'Inter',sans-serif;font-size:11px;
  font-weight:300;color:var(--text-dim);
}
.testi-tag{
  font-family:'Cinzel',serif;font-size:8px;
  letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(212,175,85,0.5);
  border:1px solid rgba(212,175,85,0.18);
  padding:5px 9px;border-radius:2px;
  white-space:nowrap;
}

/* ─── ABOUT BADGE & LABEL ─── */
.about-img-label{
  position:absolute;bottom:20px;left:20px;
  background:rgba(6,5,2,0.90);
  border:1px solid rgba(212,175,85,0.22);
  padding:10px 16px;border-radius:6px;
  text-align:center;
}
.about-label-ar{
  font-family:'Noto Naskh Arabic',serif;
  font-size:16px;color:var(--gold);display:block;
}
.about-label-en{
  font-family:'Cinzel',serif;font-size:8px;
  letter-spacing:0.16em;color:rgba(242,232,204,0.4);
  text-transform:uppercase;display:block;margin-top:3px;
}

/* ─── ABOUT STATS ─── */
.about-stats{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0;margin-top:36px;border-top:1px solid rgba(212,175,85,0.08);
  padding-top:28px;
}
.stat{padding:16px 20px;border-right:1px solid rgba(212,175,85,0.08);border-bottom:1px solid rgba(212,175,85,0.08)}
.stat:nth-child(2n){border-right:none}
.stat-n{
  font-family:'Cinzel Decorative',serif;
  font-size:28px;font-weight:400;
  background:linear-gradient(90deg,#7A5508,#EDD060,#FFF8DC,#EDD060,#7A5508);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:4px;
}
.stat-l{
  font-family:'Cinzel',serif;font-size:9px;
  letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(242,232,204,0.35);
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — MOBILE & TABLET
   ═══════════════════════════════════════════════ */

/* ── TABLET (max 1024px) ── */
@media(max-width:1024px){
  .hero{padding:100px 32px 80px}
  .hero-inner{gap:40px}
  .hero-h1{font-size:clamp(38px,7vw,64px)}
  .about{padding:80px 32px}
  .about-inner{gap:48px}
  .courses{padding:80px 32px}
  .courses-grid{grid-template-columns:repeat(2,1fr)}
  .testi{padding:80px 32px}
  .testi-grid{grid-template-columns:repeat(2,1fr)}
  .contact{padding:80px 32px}
  .contact-inner{gap:48px}
  .pwa-section{padding:80px 32px}
  .pwa-inner{gap:48px}
  footer{padding:52px 32px 24px}
}

/* ── MOBILE (max 768px) ── */
@media(max-width:768px){

  /* NAV */
  nav{
    padding:14px 20px;
    flex-wrap:wrap;
    position:relative;
  }
  .nav-links{
    display:none;
    flex-direction:column;
    gap:0;
    width:100%;
    background:rgba(6,5,3,0.98);
    border:1px solid rgba(212,175,85,0.12);
    border-radius:4px;
    padding:12px 0;
    margin-top:10px;
    order:3;
  }
  .nav-links.open{display:flex}
  .nav-links a{
    padding:12px 24px;
    border-bottom:1px solid rgba(212,175,85,0.06);
    font-size:11px;
  }
  .nav-links a:last-child{border-bottom:none}
  .nav-cta{display:none}

  /* HAMBURGER BUTTON */
  .nav-toggle{
    display:flex;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
    padding:6px;
    background:none;
    border:none;
    margin-left:auto;
  }
  .nav-toggle span{
    display:block;width:22px;height:2px;
    background:rgba(212,175,85,0.8);
    border-radius:2px;
    transition:all 0.3s;
  }
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* HERO */
  .hero{padding:90px 20px 60px}
  .hero-inner{
    grid-template-columns:1fr;
    gap:40px;
    text-align:center;
  }
  .hero-bismillah{text-align:center}
  .hero-h1{font-size:clamp(34px,9vw,54px);text-align:center}
  .hero-rule{margin:20px auto}
  .hero-p{max-width:100%;text-align:center;font-size:14px}
  .hero-btns{justify-content:center;flex-wrap:wrap;gap:10px}
  .hero-right{
    justify-content:center;
    padding:10px 40px 20px;
  }
  .hero-card{width:260px}
  .hero-card-img{height:340px}
  .badge-l{bottom:50px;left:-5px}
  .badge-r{bottom:230px;right:-5px}
  .badge{padding:10px 16px}
  .badge-num{font-size:20px}
  .badge-lbl{font-size:8px}

  /* TICKER */
  .ticker{padding:10px 0}
  .ticker-item{font-size:9px;padding:0 18px}

  /* ABOUT */
  .about{padding:60px 20px}
  .about-inner{
    grid-template-columns:1fr;
    gap:36px;
  }
  .about-img{height:300px}
  .about-badge{top:16px;right:12px;padding:12px 16px}
  .ab-year{font-size:28px}
  .about-card{bottom:-10px;left:12px;padding:12px 16px}
  .acard-ar{font-size:20px}
  .stats{grid-template-columns:1fr 1fr}
  .stat-n{font-size:30px}

  /* VERSE */
  .verse-sec{padding:60px 20px}
  .verse-ar{font-size:clamp(16px,5vw,26px)}
  .verse-en{font-size:14px}

  /* COURSES */
  .courses{padding:60px 20px}
  .courses-grid{grid-template-columns:1fr;gap:20px}
  .sec-h2{font-size:clamp(24px,6vw,38px)}

  /* TESTIMONIALS */
  .testi{padding:60px 20px}
  .testi-grid{grid-template-columns:1fr;gap:16px}
  .testi-card{padding:24px 20px}

  /* CONTACT */
  .contact{padding:60px 20px}
  .contact-inner{
    grid-template-columns:1fr;
    gap:36px;
  }
  .contact-img{max-height:260px;object-fit:cover;object-position:center}
  .form-row{grid-template-columns:1fr}
  .ci-wrap{margin-top:20px}

  /* PWA */
  .pwa-section{padding:60px 20px}
  .pwa-inner{
    grid-template-columns:1fr;
    gap:36px;
  }
  .pwa-img{height:260px;object-fit:cover}
  .pwa-img-wrap{border-radius:12px}

  /* FOOTER */
  footer{padding:48px 20px 24px}
  .ft-grid{
    grid-template-columns:1fr 1fr;
    gap:32px;
  }
  .ft-name{font-size:18px}

  /* GENERAL */
  .sec-h2{font-size:clamp(22px,6vw,36px)}
  .btn-primary,.btn-ghost{padding:14px 24px;font-size:10px}
}

/* ── SMALL MOBILE (max 480px) ── */
@media(max-width:480px){
  .hero-h1{font-size:clamp(28px,10vw,44px)}
  .hero-card{width:220px}
  .hero-card-img{height:290px}
  .badge-r{bottom:200px}
  .ft-grid{grid-template-columns:1fr}
  .ft-p{max-width:100%}
  .courses-grid{grid-template-columns:1fr}
  .testi-grid{grid-template-columns:1fr}
  .about-inner{grid-template-columns:1fr}
}

/* Hide hamburger on desktop — must come BEFORE media queries */
/* ===== PORTAL OVERRIDES ===== */
.yqn-form-header{background:#0D1117 !important}
.yqn-form-wrap{background:#0D1117 !important}
.yqn-form{background:#0D1117 !important}
.yqn-form-header h2{color:#C8A45D !important}
.yqn-form-header p{color:#8B8579 !important}
.yqn-field input,.yqn-field select,.yqn-field textarea{background:rgba(255,255,255,0.04) !important;color:#E8E2D6 !important;border:1px solid rgba(200,164,93,0.25) !important}
.yqn-field label{color:#E8E2D6 !important}
.yqn-field label span{color:#C8A45D !important}
.yqn-check label{color:#8B8579 !important}
.yqn-role-toggle{border-color:rgba(200,164,93,0.15) !important}
.yqn-role-btn{background:rgba(255,255,255,0.02) !important;color:#8B8579 !important;border-color:rgba(200,164,93,0.15) !important}
.yqn-role-btn.active{background:rgba(200,164,93,0.08) !important;color:#C8A45D !important;box-shadow:inset 0 -3px 0 #C8A45D !important}
.yqn-between a{color:#C8A45D !important}
body.page .page-content{max-width:100% !important;padding:30px 20px !important}
body.page .page-hero{display:none !important}
.yqn-portal{max-width:100% !important;width:100% !important;padding:0 40px !important}