/* Qirat o Azan design v3 */
:root{--pri:#1800a8;--acc:#6d5dfc;--dark:#0b1a33;--tint:#f3f4ff;--ink:#1b2236;--mut:#56607a;--line:#e1e4f3}
@supports(color:color-mix(in srgb,red,blue)){:root{--tint:color-mix(in srgb,var(--pri) 6%,#fff);--line:color-mix(in srgb,var(--pri) 14%,#fff)}}
*,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:clip}body{margin:0;font:16px/1.7 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:#fff;overflow-x:hidden}
[dir=rtl],[dir=auto]{font-family:"Noto Naskh Arabic","Noto Nastaliq Urdu","Amiri","Scheherazade New",serif}
img,video{max-width:100%;height:auto;display:block}a{color:var(--pri);text-underline-offset:3px}
h1,h2,h3{line-height:1.25;color:var(--dark);margin:0 0 .6em;font-family:Georgia,"Times New Roman",serif}h1{font-size:clamp(1.9rem,4.5vw,3rem)}h2{font-size:clamp(1.4rem,3vw,2rem);margin-top:1.4em}h3{font-size:1.15rem}
.sec h2:not(.center)::after,.sec h2.center::after{content:"";display:block;width:54px;height:4px;border-radius:4px;margin-top:.5rem;background:linear-gradient(90deg,var(--pri),var(--acc))}.center h2::after,h2.center::after{margin-left:auto;margin-right:auto}
.wrap{max-width:1180px;margin:0 auto;padding:0 1.1rem}.narrow{max-width:820px}.center{text-align:center}.sr,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip:focus{position:fixed;top:8px;left:8px;background:#fff;padding:.5rem 1rem;z-index:99}.hp{position:absolute;left:-9999px}
.prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;background:linear-gradient(90deg,var(--pri),var(--acc))}
/* header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
.hdr::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,var(--dark),var(--pri),var(--acc))}
.hdr.scrolled{box-shadow:0 8px 24px rgba(11,26,51,.12)}.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.5rem;padding-bottom:.5rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--dark)}.brand img{transition:transform .5s}.brand:hover img{transform:rotate(8deg) scale(1.06)}.brand b{display:block;font-family:Georgia,serif;font-size:1.15rem}.brand small{display:block;font-size:.72rem;color:var(--mut)}
.nav{display:flex;align-items:center;gap:.15rem;flex-wrap:wrap;justify-content:flex-end}.nav a:not(.btn){position:relative;padding:.45rem .6rem;text-decoration:none;color:var(--ink);font-size:.92rem;border-radius:6px;transition:color .2s}
.nav a:not(.btn)::after{content:"";position:absolute;left:.6rem;right:.6rem;bottom:.2rem;height:2px;background:linear-gradient(90deg,var(--pri),var(--acc));transform:scaleX(0);transform-origin:left;transition:transform .3s}.nav a:not(.btn):hover{color:var(--pri)}.nav a:not(.btn):hover::after{transform:scaleX(1)}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:.55rem;cursor:pointer}.burger span{display:block;width:22px;height:2px;background:var(--dark);margin:4px 0;transition:.3s}.burger[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}.burger[aria-expanded=true] span:nth-child(2){opacity:0}.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* buttons */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.45rem;justify-content:center;padding:.72rem 1.3rem;border-radius:999px;border:2px solid transparent;text-decoration:none;cursor:pointer;font:inherit;font-weight:600;font-size:.95rem;line-height:1.2;transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.btn::after{content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .6s}.btn:hover::after{left:130%}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}
.btn.sm{padding:.45rem .95rem;font-size:.85rem}.btn.block{display:flex;width:100%;margin:.5rem 0}
.btn.pri{color:#fff;background:linear-gradient(135deg,var(--pri),color-mix(in srgb,var(--pri) 65%,var(--acc)));box-shadow:0 6px 16px rgba(24,0,168,.28)}@supports not (color:color-mix(in srgb,red,blue)){.btn.pri{background:var(--pri)}}.btn.pri:hover{box-shadow:0 10px 24px rgba(24,0,168,.38)}
.btn.ghost{border-color:var(--pri);color:var(--pri);background:transparent}.btn.ghost:hover{background:var(--pri);color:#fff}.btn.ghost.light{border-color:#fff;color:#fff}.btn.ghost.light:hover{background:#fff;color:var(--dark)}
.btn.wa{color:#fff;background:var(--dark);background:linear-gradient(135deg,var(--dark),color-mix(in srgb,var(--dark) 55%,var(--pri)));box-shadow:0 6px 16px rgba(11,26,51,.3)}.btn.wa svg{color:#25d366;flex:none}.btn.wa:hover{box-shadow:0 10px 22px rgba(11,26,51,.4)}
.btns{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0}.btns.c{justify-content:center}
/* hero */
.hero{background:radial-gradient(circle at 80% 20%,color-mix(in srgb,var(--acc) 40%,transparent),transparent 45%),linear-gradient(135deg,var(--dark),var(--pri));background-color:var(--dark);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;width:760px;height:760px;right:-220px;top:-180px;z-index:-1;opacity:.16;animation:spin 90s linear infinite;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.2'%3E%3Crect x='-60' y='-60' width='120' height='120'/%3E%3Crect x='-60' y='-60' width='120' height='120' transform='rotate(45)'/%3E%3Ccircle r='72'/%3E%3Ccircle r='42'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.hero::after{content:"";position:absolute;left:-120px;bottom:-160px;width:420px;height:420px;z-index:-1;opacity:.1;animation:spin 120s linear infinite reverse;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.5'%3E%3Crect x='-60' y='-60' width='120' height='120'/%3E%3Crect x='-60' y='-60' width='120' height='120' transform='rotate(45)'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.hero h1{color:#fff}.hero-in{display:grid;grid-template-columns:1.3fr 1fr;gap:2rem;align-items:center;padding-top:3.5rem;padding-bottom:3.5rem}.hero-in>div:first-child>*{animation:up .8s both}.hero-in>div:first-child>*:nth-child(2){animation-delay:.1s}.hero-in>div:first-child>*:nth-child(3){animation-delay:.2s}.hero-in>div:first-child>*:nth-child(4){animation-delay:.3s}
.hero-art{background:#fff;border-radius:28px;padding:1.3rem;justify-self:center;max-width:380px;position:relative;z-index:1;box-shadow:0 30px 60px rgba(0,0,0,.35);animation:float 6s ease-in-out infinite}.hero-art::before{content:"";position:absolute;inset:-10px;border-radius:34px;border:2px solid rgba(255,255,255,.35);animation:pulse 3s ease-in-out infinite}
.lead{font-size:1.15rem;opacity:.95}.lead2{font-size:1.1rem;color:var(--mut)}.eyebrow{display:inline-block;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);padding:.25rem .8rem;border-radius:99px;text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;font-weight:700}
.sec{padding:3.4rem 0}.alt{background:linear-gradient(180deg,var(--tint),#fff)}.cta{background:radial-gradient(circle at 20% 0,color-mix(in srgb,var(--acc) 35%,transparent),transparent 50%),linear-gradient(135deg,var(--dark),var(--pri));background-color:var(--dark);color:#fff;padding:3.4rem 0}.cta h2{color:#fff;margin-top:0}.cta h2::after{background:#fff}
/* cards */
.grid{display:grid;gap:1.3rem;margin:1.5rem 0}.c4{grid-template-columns:repeat(4,1fr)}.c3{grid-template-columns:repeat(3,1fr)}.c2{grid-template-columns:repeat(2,1fr)}
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 4px 14px rgba(11,26,51,.06);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--pri),var(--acc));transform:scaleX(0);transform-origin:left;transition:transform .45s;z-index:2}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(24,0,168,.16);border-color:var(--acc)}.card:hover::before{transform:scaleX(1)}
.card-b{padding:1.15rem;display:flex;flex-direction:column;gap:.55rem;flex:1}.card h3{margin:0}.card h3 a{text-decoration:none}.card p{margin:0}.side.card:hover,.side .card:hover{transform:none}
.facts{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.35rem}.facts li{font-size:.76rem;background:var(--tint);color:var(--pri);border:1px solid var(--line);border-radius:99px;padding:.1rem .6rem}
.price,.fee{font-weight:800;color:var(--pri);font-size:1.2rem}.card .btns{margin:.4rem 0}
.card-foot{margin-top:auto;display:grid;gap:.55rem;padding-top:.5rem}.card-foot .btns{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.card-foot .btn{width:100%;padding:.62rem .4rem;font-size:.88rem;text-align:center}
.card-b>.btns{margin-top:auto}.card-b>.btns .btn{flex:1 1 140px}.card-b>.btns:last-child{padding-top:.5rem}
.grid>*,.two>*,.hero-in>*{min-width:0}.card h3,.card p{overflow-wrap:anywhere}.tbl td{overflow-wrap:break-word}.tbl td[data-label=Format]{min-width:100px}.facts li{white-space:nowrap}
.hero.small .hero-in,.hero.small>.wrap{padding-top:3rem;padding-bottom:3rem}.hero.small .btns{justify-content:center}.ftr .dev{font-weight:400;color:#c9c3ff}
/* teachers */
.t-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}.teacher{height:100%}.t-photo{aspect-ratio:4/5;background:var(--tint);overflow:hidden}.t-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.teacher:hover .t-photo img{transform:scale(1.06)}
.t-ph{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font:700 4rem Georgia,serif;color:#fff;background:linear-gradient(135deg,var(--pri),var(--acc))}
.teacher h3{min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.t-q{height:5.6em;overflow:hidden;font-size:.9rem;color:var(--mut)}.t-q p{margin:0 0 .2rem}.t-act{min-height:2.2rem}.teacher .btn.wa{margin-top:auto}
.dlg{border:0;border-radius:18px;max-width:min(92vw,480px);padding:1.4rem;box-shadow:0 30px 70px rgba(0,0,0,.4);animation:pop .3s}.dlg::backdrop{background:rgba(11,26,51,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
/* tables */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:18px;border:1px solid var(--line);box-shadow:0 10px 30px rgba(11,26,51,.08);background:#fff;margin:1.2rem 0}
.tbl{width:100%;border-collapse:separate;border-spacing:0;min-width:760px}
.tbl thead{background:linear-gradient(90deg,var(--dark),var(--pri))}.tbl thead th{background:transparent;color:#fff;padding:1rem .9rem;text-align:left;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.tbl td,.tbl tbody th{padding:.95rem .9rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:.92rem;transition:background .2s}
.tbl tbody tr:nth-child(even) td,.tbl tbody tr:nth-child(even) th{background:color-mix(in srgb,var(--pri) 3%,#fff)}
.tbl tbody tr:hover td,.tbl tbody tr:hover th{background:var(--tint)}.tbl tbody tr:last-child td,.tbl tbody tr:last-child th{border-bottom:0}
.tbl tbody th{min-width:180px;font-weight:700;border-left:4px solid transparent}.tbl tbody tr:hover th{border-left-color:var(--pri)}.tbl tbody th a{text-decoration:none;color:var(--dark)}.tbl tbody th a:hover{color:var(--pri)}
.tbl td.tp{max-width:340px;font-size:.84rem;color:var(--mut);line-height:1.55}.tbl small{color:var(--mut)}.tbl td.act{white-space:nowrap}
.pill{display:inline-block;justify-self:start;white-space:nowrap;background:linear-gradient(135deg,var(--pri),var(--acc));color:#fff;border-radius:99px;padding:.3rem .85rem;font-size:.92rem;font-weight:800;box-shadow:0 4px 10px rgba(24,0,168,.22)}
/* faq */
.faq{border:1px solid var(--line);border-radius:14px;background:#fff;margin:.7rem 0;padding:.1rem 1.1rem;transition:box-shadow .3s,border-color .3s}.faq:hover,.faq[open]{box-shadow:0 8px 22px rgba(24,0,168,.1);border-color:var(--acc)}
.faq summary{cursor:pointer;font-weight:700;padding:.8rem 2rem .8rem 0;color:var(--dark);list-style:none;position:relative}.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:var(--tint);color:var(--pri);display:grid;place-items:center;font-size:1.2rem;transition:transform .3s,background .3s}.faq[open] summary::after{content:"\2212";background:var(--pri);color:#fff;transform:translateY(-50%) rotate(180deg)}.faq[open] p{animation:up .35s both}.faq p{padding-bottom:.9rem;color:var(--mut)}
.crumbs{padding-top:.8rem;font-size:.85rem}.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0}.crumbs li+li::before{content:"/";margin-right:.4rem;color:#9aa3c0}
.two{display:grid;grid-template-columns:1fr 340px;gap:2rem;align-items:start}.side{position:sticky;top:90px}.dl{margin:0 0 1rem}.dl dt{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}.dl dd{margin:0 0 .6rem}
.topics{list-style:none;counter-reset:t;columns:2;gap:2rem;padding:0}.topics li{counter-increment:t;break-inside:avoid;margin-bottom:.55rem;padding-left:2.3rem;position:relative}.topics li::before{content:counter(t);position:absolute;left:0;top:.1rem;width:1.6rem;height:1.6rem;border-radius:50%;background:linear-gradient(135deg,var(--pri),var(--acc));color:#fff;font-size:.75rem;font-weight:700;display:grid;place-items:center}
.check{list-style:none;padding:0}.check li{padding-left:1.8rem;position:relative;margin:.45rem 0}.check li::before{content:"\2713";position:absolute;left:0;top:.1rem;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--tint);color:var(--pri);font-weight:800;font-size:.8rem;display:grid;place-items:center}
.steps{list-style:none;counter-reset:s;padding:0}.steps li{counter-increment:s;position:relative;margin:.8rem 0;padding:.9rem 1rem .9rem 3.6rem;background:#fff;border:1px solid var(--line);border-radius:14px;transition:transform .3s,box-shadow .3s}.steps li:hover{transform:translateX(6px);box-shadow:0 8px 20px rgba(24,0,168,.1)}.steps li::before{content:counter(s);position:absolute;left:.9rem;top:50%;transform:translateY(-50%);width:2rem;height:2rem;border-radius:50%;background:linear-gradient(135deg,var(--pri),var(--acc));color:#fff;font-weight:800;display:grid;place-items:center}
.prose h2,.prose h3{margin-top:1.2em}.prose video,main video{width:100%;max-width:100%;border-radius:18px;margin:1.4rem 0;background:#000;box-shadow:0 18px 40px rgba(11,26,51,.25)}.prose blockquote{margin:1rem 0;padding:.8rem 1.2rem;border-left:4px solid var(--pri);background:var(--tint);border-radius:0 12px 12px 0}
.form{display:grid;gap:1rem;max-width:560px}.form label{display:grid;gap:.3rem;font-weight:600;font-size:.92rem}.form input,.form select,.form textarea{font:inherit;padding:.75rem .85rem;border:1px solid #c4c9e0;border-radius:12px;width:100%;background:#fff;transition:border-color .2s,box-shadow .2s}.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--pri);box-shadow:0 0 0 4px color-mix(in srgb,var(--pri) 18%,transparent)}.small{font-size:.85rem;color:var(--mut)}
.notice{padding:1rem 1.2rem;border-radius:14px;margin:1rem 0}.notice.ok{background:var(--tint);border:1px solid var(--acc)}.notice.bad{background:#fdecea;border:1px solid #f0b4ad}.notice ul{margin:0;padding-left:1.2rem}
/* footer */
.ftr{position:relative;background:linear-gradient(160deg,var(--dark),color-mix(in srgb,var(--pri) 55%,var(--dark)));background-color:var(--dark);color:#d9ddf3;padding-top:3rem}.ftr::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--acc),var(--pri),var(--acc))}.ftr h2{color:#fff;font-size:1.05rem;margin-top:0}.ftr h2::after{display:none}.ftr a{color:#c9c3ff;text-decoration:none;transition:color .2s,padding .2s}.ftr li a:hover{color:#fff;padding-left:4px}.ftr .btn.wa{color:#fff}.ftr ul{list-style:none;padding:0;margin:0}.ftr li{margin:.4rem 0}.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:2rem}.ftr-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;border-top:1px solid rgba(255,255,255,.16);margin-top:2rem;padding-top:1rem;padding-bottom:1.2rem;font-size:.88rem}.ftr-bot a{color:#fff;font-weight:700}
/* floating whatsapp */
.fab{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:40;width:56px;height:56px;border-radius:50%;background:var(--dark);background:linear-gradient(135deg,var(--dark),var(--pri));color:#25d366;display:grid;place-items:center;box-shadow:0 8px 22px rgba(11,26,51,.45);transition:transform .25s}.fab:hover{transform:scale(1.1)}.fab::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--acc);opacity:.5;animation:ring 2.2s ease-out infinite;z-index:-1}
/* motion */
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}.rv.in{opacity:1;transform:none}
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}@keyframes float{50%{transform:translateY(-12px)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.2;transform:scale(1.04)}}@keyframes ring{to{transform:scale(1.7);opacity:0}}@keyframes pop{from{opacity:0;transform:scale(.92)}}
@media(max-width:1100px){.c4{grid-template-columns:repeat(2,1fr)}.hero-in{gap:1.5rem}}
@media(max-width:980px){.c4{grid-template-columns:repeat(2,1fr)}.c3{grid-template-columns:repeat(2,1fr)}.two,.hero-in{grid-template-columns:1fr}.side{position:static}.hero-art{max-width:260px}}
@media(max-width:1100px){.burger{display:block}.nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;align-items:stretch;padding:.8rem 1.1rem;border-bottom:3px solid var(--acc);box-shadow:0 14px 24px rgba(0,0,0,.1)}.nav.open{display:flex;animation:up .3s both}.hdr{position:relative}.nav a:not(.btn)::after{display:none}}
@media(max-width:900px){
.tbl-wrap{border:0;box-shadow:none;background:transparent;overflow:visible}.tbl{min-width:0;display:block}.tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.tbl tbody{display:grid;gap:1rem}
.tbl tbody tr{display:block;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 6px 18px rgba(11,26,51,.08)}.tbl tbody tr:nth-child(even) td,.tbl tbody tr:nth-child(even) th{background:transparent}
.tbl tbody th{display:block;min-width:0;background:linear-gradient(135deg,var(--dark),var(--pri))!important;padding:.9rem 1rem;border:0}.tbl tbody th a{color:#fff}
.tbl td{display:grid;grid-template-columns:96px 1fr;gap:.6rem;padding:.65rem 1rem;max-width:none!important}.tbl td::before{content:attr(data-label);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--pri)}.tbl td.act{display:block;white-space:normal}.tbl td.act .btn{width:100%}}
@media(max-width:640px){.card-foot .btns{grid-template-columns:1fr}.c4,.c3,.c2,.ftr-grid{grid-template-columns:1fr}.topics{columns:1}.t-grid{grid-template-columns:repeat(2,1fr);gap:.8rem}.t-grid .card-b{padding:.7rem}.t-q{font-size:.82rem}.brand small{display:none}.sec{padding:2.2rem 0}.hero-in{padding-top:2.2rem;padding-bottom:2.2rem}}
@media(max-width:380px){.t-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}html{scroll-behavior:auto}}