@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url('../fonts/cairo-arabic-latin.woff2') format('woff2');
}
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 700 800;
font-display: swap;
src: url('../fonts/cairo-bold-arabic-latin.woff2') format('woff2');
}
@font-face {
font-family: 'Tajawal';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url('../fonts/tajawal-arabic-latin.woff2') format('woff2');
}
@font-face {
font-family: 'Tajawal';
font-style: normal;
font-weight: 700 800;
font-display: swap;
src: url('../fonts/tajawal-bold-arabic-latin.woff2') format('woff2');
}
@font-face {
font-family: 'Amiri';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/amiri-arabic-latin.woff2') format('woff2');
}
@font-face {
font-family: 'Amiri';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/amiri-bold-arabic-latin.woff2') format('woff2');
}
*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e2e8f0}
html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:var(--active-arabic-font),'Cairo',sans-serif}
body{margin:0;line-height:inherit}
hr{height:0;color:inherit;border-top-width:1px}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0}
a{color:inherit;text-decoration:inherit}
b,strong{font-weight:bolder}
code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:1em}
small{font-size:80%}
table{text-indent:0;border-color:inherit;border-collapse:collapse}
button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}
button,select{text-transform:none}
button,[type='button'],[type='reset'],[type='submit']{-webkit-appearance:button;background-color:transparent;background-image:none;cursor:pointer}
p,blockquote,dl,dd,figure,pre{margin:0}
ol,ul,menu{list-style:none;margin:0;padding:0}
img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}
img,video{max-width:100%;height:auto}
[hidden]{display:none}
@keyframes tw-pulse{50%{opacity:.5}}
@keyframes tw-ping{75%,100%{transform:scale(2);opacity:0}}
@keyframes tw-bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,0.2,1)}}
@keyframes tw-spin{to{transform:rotate(360deg)}}
.-translate-y-full{transform:translateY(-100%)}
.absolute{position:absolute}
.accent-emerald-850{accent-color:#0F5132}
.accent-emerald-900{accent-color:#0B3B24}
.accent-gold-500{accent-color:#D4AF37}
.accent-red-600{accent-color:#dc2626}
.accent-red-700{accent-color:#b91c1c}
.animate-bounce{animation:tw-bounce 1s infinite}
.animate-ping{animation:tw-ping 1s cubic-bezier(0,0,0.2,1) infinite}
.animate-pulse{animation:tw-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite}
.aspect-\[4\/4\.3\]{aspect-ratio:4/4.3}
.backdrop-blur{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.backdrop-blur-md{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.backdrop-blur-sm{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.bg-amber-100{background-color:#fef3c7}
.bg-amber-100\/70{background-color:rgba(254,243,199,0.7)}
.bg-amber-100\/80{background-color:rgba(254,243,199,0.8)}
.bg-amber-100\/90{background-color:rgba(254,243,199,0.9)}
.bg-amber-200\/80{background-color:rgba(253,230,138,0.8)}
.bg-amber-400{background-color:#fbbf24}
.bg-amber-50{background-color:#fffbeb}
.bg-amber-50\/60{background-color:rgba(255,251,235,0.6)}
.bg-amber-50\/70{background-color:rgba(255,251,235,0.7)}
.bg-amber-500{background-color:#f59e0b}
.bg-amber-500\/20{background-color:rgba(245,158,11,0.2)}
.bg-amber-600{background-color:#d97706}
.bg-black\/65{background-color:rgba(0,0,0,0.65)}
.bg-emerald-100{background-color:#d1fae5}
.bg-emerald-400{background-color:#34d399}
.bg-emerald-50{background-color:#ecfdf5}
.bg-emerald-50\/40{background-color:rgba(236,253,245,0.4)}
.bg-emerald-50\/60{background-color:rgba(236,253,245,0.6)}
.bg-emerald-50\/70{background-color:rgba(236,253,245,0.7)}
.bg-emerald-50\/80{background-color:rgba(236,253,245,0.8)}
.bg-emerald-500{background-color:#10b981}
.bg-emerald-500\/20{background-color:rgba(16,185,129,0.2)}
.bg-emerald-600{background-color:#059669}
.bg-emerald-700{background-color:#047857}
.bg-emerald-800{background-color:#065f46}
.bg-emerald-850{background-color:#0F5132}
.bg-emerald-850\/10{background-color:rgba(15,81,50,0.1)}
.bg-emerald-850\/90{background-color:rgba(15,81,50,0.9)}
.bg-emerald-900{background-color:#0B3B24}
.bg-emerald-900\/10{background-color:rgba(11,59,36,0.1)}
.bg-emerald-900\/80{background-color:rgba(11,59,36,0.8)}
.bg-emerald-950{background-color:#062315}
.bg-emerald-950\/90{background-color:rgba(6,35,21,0.9)}
.bg-gold-400{background-color:#E5C453}
.bg-gold-500{background-color:#D4AF37}
.bg-gold-500\/15{background-color:rgba(212,175,55,0.15)}
.bg-gold-500\/20{background-color:rgba(212,175,55,0.2)}
.bg-gold-500\/25{background-color:rgba(212,175,55,0.25)}
.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}
.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}
.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}
.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}
.bg-navy-850{background-color:#0A192F}
.bg-navy-900{background-color:#071120}
.bg-navy-900\/70{background-color:rgba(7,17,32,0.7)}
.bg-navy-900\/75{background-color:rgba(7,17,32,0.75)}
.bg-navy-900\/80{background-color:rgba(7,17,32,0.8)}
.bg-navy-900\/85{background-color:rgba(7,17,32,0.85)}
.bg-navy-900\/90{background-color:rgba(7,17,32,0.9)}
.bg-navy-950{background-color:#040a14}
.bg-navy-950\/90{background-color:rgba(4,10,20,0.9)}
.bg-red-100{background-color:#fee2e2}
.bg-red-50{background-color:#fef2f2}
.bg-red-500{background-color:#ef4444}
.bg-red-500\/20{background-color:rgba(239,68,68,0.2)}
.bg-red-500\/25{background-color:rgba(239,68,68,0.25)}
.bg-red-500\/30{background-color:rgba(239,68,68,0.3)}
.bg-red-600{background-color:#dc2626}
.bg-red-700{background-color:#b91c1c}
.bg-red-900{background-color:#7f1d1d}
.bg-sand-100{background-color:#F7F2E7}
.bg-sand-100\/80{background-color:rgba(247,242,231,0.8)}
.bg-sand-100\/90{background-color:rgba(247,242,231,0.9)}
.bg-sand-200{background-color:#EFE6D2}
.bg-sand-200\/70{background-color:rgba(239,230,210,0.7)}
.bg-sand-50{background-color:#FDFBF7}
.bg-sand-50\/60{background-color:rgba(253,251,247,0.6)}
.bg-sand-50\/70{background-color:rgba(253,251,247,0.7)}
.bg-sand-50\/95{background-color:rgba(253,251,247,0.95)}
.bg-sky-400{background-color:#38bdf8}
.bg-slate-100{background-color:#f1f5f9}
.bg-slate-200{background-color:#e2e8f0}
.bg-slate-300{background-color:#cbd5e1}
.bg-slate-800{background-color:#1e293b}
.bg-slate-900{background-color:#0f172a}
.bg-slate-950{background-color:#020617}
.bg-transparent{background-color:transparent}
.bg-white{background-color:#ffffff}
.bg-white\/10{background-color:rgba(255,255,255,0.1)}
.bg-white\/15{background-color:rgba(255,255,255,0.15)}
.bg-white\/5{background-color:rgba(255,255,255,0.05)}
.bg-white\/95{background-color:rgba(255,255,255,0.95)}
.block{display:block}
.border{border-width:1px}
.border-0{border-width:0px}
.border-2{border-width:2px}
.border-amber-100{border-color:#fef3c7}
.border-amber-200{border-color:#fde68a}
.border-amber-300{border-color:#fcd34d}
.border-amber-400{border-color:#fbbf24}
.border-amber-500\/40{border-color:rgba(245,158,11,0.4)}
.border-amber-600{border-color:#d97706}
.border-amber-900\/15{border-color:rgba(120,53,15,0.15)}
.border-b{border-bottom-width:1px}
.border-b-2{border-bottom-width:2px}
.border-b-4{border-bottom-width:4px}
.border-collapse{border-collapse:collapse}
.border-dashed{border-style:dashed}
.border-double{border-style:double}
.border-emerald-100{border-color:#d1fae5}
.border-emerald-200{border-color:#a7f3d0}
.border-emerald-200\/80{border-color:rgba(167,243,208,0.8)}
.border-emerald-300{border-color:#6ee7b7}
.border-emerald-300\/80{border-color:rgba(110,231,183,0.8)}
.border-emerald-500{border-color:#10b981}
.border-emerald-500\/30{border-color:rgba(16,185,129,0.3)}
.border-emerald-500\/40{border-color:rgba(16,185,129,0.4)}
.border-emerald-700{border-color:#047857}
.border-emerald-700\/40{border-color:rgba(4,120,87,0.4)}
.border-emerald-800\/20{border-color:rgba(6,95,70,0.2)}
.border-emerald-850{border-color:#0F5132}
.border-emerald-850\/20{border-color:rgba(15,81,50,0.2)}
.border-emerald-850\/30{border-color:rgba(15,81,50,0.3)}
.border-emerald-850\/40{border-color:rgba(15,81,50,0.4)}
.border-emerald-900\/10{border-color:rgba(11,59,36,0.1)}
.border-emerald-900\/15{border-color:rgba(11,59,36,0.15)}
.border-emerald-900\/20{border-color:rgba(11,59,36,0.2)}
.border-gold-400{border-color:#E5C453}
.border-gold-400\/30{border-color:rgba(229,196,83,0.3)}
.border-gold-400\/40{border-color:rgba(229,196,83,0.4)}
.border-gold-400\/50{border-color:rgba(229,196,83,0.5)}
.border-gold-400\/60{border-color:rgba(229,196,83,0.6)}
.border-gold-400\/70{border-color:rgba(229,196,83,0.7)}
.border-gold-500{border-color:#D4AF37}
.border-gold-500\/20{border-color:rgba(212,175,55,0.2)}
.border-gold-500\/25{border-color:rgba(212,175,55,0.25)}
.border-gold-500\/30{border-color:rgba(212,175,55,0.3)}
.border-gold-500\/40{border-color:rgba(212,175,55,0.4)}
.border-gold-500\/50{border-color:rgba(212,175,55,0.5)}
.border-gold-500\/60{border-color:rgba(212,175,55,0.6)}
.border-gold-500\/70{border-color:rgba(212,175,55,0.7)}
.border-gold-500\/80{border-color:rgba(212,175,55,0.8)}
.border-navy-850{border-color:#0A192F}
.border-navy-900{border-color:#071120}
.border-navy-900\/15{border-color:rgba(7,17,32,0.15)}
.border-red-200{border-color:#fecaca}
.border-red-300{border-color:#fca5a5}
.border-red-400{border-color:#f87171}
.border-red-400\/30{border-color:rgba(248,113,113,0.3)}
.border-red-500{border-color:#ef4444}
.border-s-4{border-inline-start-width:4px}
.border-slate-100{border-color:#f1f5f9}
.border-slate-200{border-color:#e2e8f0}
.border-slate-300{border-color:#cbd5e1}
.border-slate-700{border-color:#334155}
.border-t{border-top-width:1px}
.border-t-2{border-top-width:2px}
.border-t-4{border-top-width:4px}
.border-transparent{border-color:transparent}
.border-white\/10{border-color:rgba(255,255,255,0.1)}
.border-white\/15{border-color:rgba(255,255,255,0.15)}
.border-white\/20{border-color:rgba(255,255,255,0.2)}
.border-y{border-top-width:1px;border-bottom-width:1px}
.bottom-2{bottom:0.5rem}
.bottom-3{bottom:0.75rem}
.bottom-5{bottom:1.25rem}
.col-span-full{grid-column:1 / -1}
.cursor-pointer{cursor:pointer}
.divide-slate-200 > :not([hidden]) ~ :not([hidden]){border-color:#e2e8f0}
.divide-y > :not([hidden]) ~ :not([hidden]){border-top-width:1px}
.duration-200{transition-duration:200ms}
.duration-300{transition-duration:300ms}
.empty\:hidden{display:none}
.end-5{inset-inline-end:1.25rem}
.fixed{position:fixed}
.flex{display:flex}
.flex-1{flex:1 1 0%}
.flex-col{flex-direction:column}
.flex-nowrap{flex-wrap:nowrap}
.flex-wrap{flex-wrap:wrap}
.focus\:bg-gold-500:focus{background-color:#D4AF37}
.focus\:border-emerald-850:focus{border-color:#0F5132}
.focus\:border-gold-400:focus{border-color:#E5C453}
.focus\:border-gold-500:focus{border-color:#D4AF37}
.focus\:fixed:focus{position:fixed}
.focus\:font-extrabold:focus{font-weight:800}
.focus\:not-sr-only:focus{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal}
.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}
.focus\:px-4:focus{padding-left:1rem;padding-right:1rem}
.focus\:py-2:focus{padding-top:0.5rem;padding-bottom:0.5rem}
.focus\:rounded-xl:focus{border-radius:0.75rem}
.focus\:start-2:focus{inset-inline-start:0.5rem}
.focus\:text-navy-900:focus{color:#071120}
.focus\:top-2:focus{top:0.5rem}
.focus\:z-\[9999\]:focus{z-index:9999}
.font-alexandria{font-family:'Cairo',sans-serif}
.font-almarai{font-family:'Tajawal',sans-serif}
.font-amiri{font-family:'Amiri',serif}
.font-arabic{font-family:var(--active-arabic-font),'Cairo',sans-serif}
.font-black{font-weight:900}
.font-bold{font-weight:700}
.font-cairo{font-family:'Cairo',sans-serif}
.font-extrabold{font-weight:800}
.font-ibm-arabic{font-family:'Cairo',sans-serif}
.font-kufi{font-family:'Cairo',sans-serif}
.font-medium{font-weight:500}
.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.font-normal{font-weight:400}
.font-readex{font-family:'Cairo',sans-serif}
.font-semibold{font-weight:600}
.font-tajawal{font-family:'Tajawal',sans-serif}
.from-amber-50{--tw-gradient-from:#fffbeb;--tw-gradient-to:rgba(255,255,255,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-amber-50\/70{--tw-gradient-from:rgba(255,251,235,0.7);--tw-gradient-to:rgba(255,255,255,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-emerald-50{--tw-gradient-from:#ecfdf5;--tw-gradient-to:rgba(255,255,255,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-emerald-850{--tw-gradient-from:#0F5132;--tw-gradient-to:rgba(255,255,255,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-emerald-950{--tw-gradient-from:#062315;--tw-gradient-to:rgba(255,255,255,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-navy-850{--tw-gradient-from:#0A192F;--tw-gradient-to:rgba(255,255,255,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-navy-900\/90{--tw-gradient-from:rgba(7,17,32,0.9);--tw-gradient-to:rgba(255,255,255,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-white{--tw-gradient-from:#ffffff;--tw-gradient-to:rgba(255,255,255,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.gap-1{gap:0.25rem}
.gap-1\.5{gap:0.375rem}
.gap-10{gap:2.5rem}
.gap-2{gap:0.5rem}
.gap-2\.5{gap:0.625rem}
.gap-3{gap:0.75rem}
.gap-3\.5{gap:0.875rem}
.gap-4{gap:1rem}
.gap-5{gap:1.25rem}
.gap-6{gap:1.5rem}
.grid{display:grid}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.group:hover .group-hover\:scale-105{transform:scale(1.05)}
.grow{flex-grow:1}
.h-1\.5{height:0.375rem}
.h-10{height:2.5rem}
.h-11{height:2.75rem}
.h-12{height:3rem}
.h-14{height:3.5rem}
.h-16{height:4rem}
.h-2{height:0.5rem}
.h-2\.5{height:0.625rem}
.h-20{height:5rem}
.h-3{height:0.75rem}
.h-32{height:8rem}
.h-36{height:9rem}
.h-4{height:1rem}
.h-40{height:10rem}
.h-48{height:12rem}
.h-5{height:1.25rem}
.h-52{height:13rem}
.h-7{height:1.75rem}
.h-8{height:2rem}
.h-9{height:2.25rem}
.h-\[46vh\]{height:46vh}
.h-full{height:100%}
.hidden{display:none}
.hover\:-translate-y-1:hover{transform:translateY(-0.25rem)}
.hover\:bg-amber-200:hover{background-color:#fde68a}
.hover\:bg-amber-400:hover{background-color:#fbbf24}
.hover\:bg-amber-50:hover{background-color:#fffbeb}
.hover\:bg-amber-700:hover{background-color:#b45309}
.hover\:bg-emerald-100:hover{background-color:#d1fae5}
.hover\:bg-emerald-200:hover{background-color:#a7f3d0}
.hover\:bg-emerald-50:hover{background-color:#ecfdf5}
.hover\:bg-emerald-600:hover{background-color:#059669}
.hover\:bg-emerald-700:hover{background-color:#047857}
.hover\:bg-emerald-800:hover{background-color:#065f46}
.hover\:bg-emerald-850:hover{background-color:#0F5132}
.hover\:bg-emerald-900:hover{background-color:#0B3B24}
.hover\:bg-gold-400:hover{background-color:#E5C453}
.hover\:bg-gold-500:hover{background-color:#D4AF37}
.hover\:bg-gold-500\/15:hover{background-color:rgba(212,175,55,0.15)}
.hover\:bg-gold-500\/30:hover{background-color:rgba(212,175,55,0.3)}
.hover\:bg-gold-500\/35:hover{background-color:rgba(212,175,55,0.35)}
.hover\:bg-gold-500\/40:hover{background-color:rgba(212,175,55,0.4)}
.hover\:bg-navy-900:hover{background-color:#071120}
.hover\:bg-red-100:hover{background-color:#fee2e2}
.hover\:bg-red-50:hover{background-color:#fef2f2}
.hover\:bg-red-500:hover{background-color:#ef4444}
.hover\:bg-red-500\/30:hover{background-color:rgba(239,68,68,0.3)}
.hover\:bg-red-600:hover{background-color:#dc2626}
.hover\:bg-red-700:hover{background-color:#b91c1c}
.hover\:bg-red-800:hover{background-color:#991b1b}
.hover\:bg-sand-100:hover{background-color:#F7F2E7}
.hover\:bg-sand-100\/50:hover{background-color:rgba(247,242,231,0.5)}
.hover\:bg-sand-200:hover{background-color:#EFE6D2}
.hover\:bg-sand-200\/70:hover{background-color:rgba(239,230,210,0.7)}
.hover\:bg-sand-50:hover{background-color:#FDFBF7}
.hover\:bg-slate-200:hover{background-color:#e2e8f0}
.hover\:bg-slate-900:hover{background-color:#0f172a}
.hover\:bg-white:hover{background-color:#ffffff}
.hover\:bg-white\/10:hover{background-color:rgba(255,255,255,0.1)}
.hover\:bg-white\/15:hover{background-color:rgba(255,255,255,0.15)}
.hover\:bg-white\/20:hover{background-color:rgba(255,255,255,0.2)}
.hover\:bg-white\/25:hover{background-color:rgba(255,255,255,0.25)}
.hover\:bg-white\/60:hover{background-color:rgba(255,255,255,0.6)}
.hover\:border-gold-500:hover{border-color:#D4AF37}
.hover\:border-gold-500\/60:hover{border-color:rgba(212,175,55,0.6)}
.hover\:opacity-90:hover{opacity:0.9}
.hover\:shadow-md:hover{box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1)}
.hover\:text-amber-600:hover{color:#d97706}
.hover\:text-gold-400:hover{color:#E5C453}
.hover\:text-navy-900:hover{color:#071120}
.hover\:text-white:hover{color:#ffffff}
.hover\:underline:hover{text-decoration-line:underline}
.inline{display:inline}
.inline-block{display:inline-block}
.inline-flex{display:inline-flex}
.inset-0{top:0;right:0;bottom:0;left:0}
.inset-x-3{left:0.75rem;right:0.75rem}
.italic{font-style:italic}
.items-center{align-items:center}
.items-end{align-items:flex-end}
.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.justify-end{justify-content:flex-end}
.leading-loose{line-height:2}
.leading-relaxed{line-height:1.625}
.leading-snug{line-height:1.375}
.leading-tight{line-height:1.25}
.left-2{left:0.5rem}
.left-3{left:0.75rem}
.line-through{text-decoration-line:line-through}
.m-0{margin:0px}
.max-h-40{max-height:10rem}
.max-h-48{max-height:12rem}
.max-h-60{max-height:15rem}
.max-h-72{max-height:18rem}
.max-h-80{max-height:20rem}
.max-h-96{max-height:24rem}
.max-h-\[420px\]{max-height:420px}
.max-h-\[44vh\]{max-height:44vh}
.max-h-\[46vh\]{max-height:46vh}
.max-h-\[520px\]{max-height:520px}
.max-h-\[52vh\]{max-height:52vh}
.max-h-\[540px\]{max-height:540px}
.max-h-\[600px\]{max-height:600px}
.max-h-\[680px\]{max-height:680px}
.max-h-\[90vh\]{max-height:90vh}
.max-h-\[92vh\]{max-height:92vh}
.max-h-\[94vh\]{max-height:94vh}
.max-w-2xl{max-width:42rem}
.max-w-3xl{max-width:48rem}
.max-w-4xl{max-width:56rem}
.max-w-5xl{max-width:64rem}
.max-w-6xl{max-width:72rem}
.max-w-7xl{max-width:80rem}
.max-w-\[240px\]{max-width:240px}
.max-w-\[290px\]{max-width:290px}
.max-w-\[340px\]{max-width:340px}
.max-w-\[65\%\]{max-width:65%}
.max-w-\[95vw\]{max-width:95vw}
.max-w-full{max-width:100%}
.max-w-lg{max-width:32rem}
.max-w-md{max-width:28rem}
.max-w-xl{max-width:36rem}
.mb-0\.5{margin-bottom:0.125rem}
.mb-1{margin-bottom:0.25rem}
.mb-1\.5{margin-bottom:0.375rem}
.mb-2{margin-bottom:0.5rem}
.mb-2\.5{margin-bottom:0.625rem}
.mb-4{margin-bottom:1rem}
.me-1{margin-inline-end:0.25rem}
.me-1\.5{margin-inline-end:0.375rem}
.me-2{margin-inline-end:0.5rem}
.min-h-\[140px\]{min-height:140px}
.min-h-\[150px\]{min-height:150px}
.min-h-\[290px\]{min-height:290px}
.min-h-\[360px\]{min-height:360px}
.min-h-\[380px\]{min-height:380px}
.min-h-\[44px\]{min-height:44px}
.min-h-\[60px\]{min-height:60px}
.min-h-\[700px\]{min-height:700px}
.min-h-\[740px\]{min-height:740px}
.min-h-screen{min-height:100vh}
.min-w-0{min-width:0px}
.min-w-\[200px\]{min-width:200px}
.min-w-\[240px\]{min-width:240px}
.min-w-\[260px\]{min-width:260px}
.min-w-\[44px\]{min-width:44px}
.ms-1{margin-inline-start:0.25rem}
.ms-2{margin-inline-start:0.5rem}
.mt-0\.5{margin-top:0.125rem}
.mt-1{margin-top:0.25rem}
.mt-12{margin-top:3rem}
.mt-2{margin-top:0.5rem}
.mt-2\.5{margin-top:0.625rem}
.mt-3{margin-top:0.75rem}
.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.mx-1{margin-left:0.25rem;margin-right:0.25rem}
.mx-auto{margin-left:auto;margin-right:auto}
.my-4{margin-top:1rem;margin-bottom:1rem}
.my-auto{margin-top:auto;margin-bottom:auto}
.object-contain{object-fit:contain}
.object-cover{object-fit:cover}
.object-top{object-position:top}
.opacity-0{opacity:0.0}
.opacity-100{opacity:1.0}
.opacity-30{opacity:0.3}
.opacity-60{opacity:0.6}
.opacity-65{opacity:0.65}
.opacity-75{opacity:0.75}
.opacity-80{opacity:0.8}
.origin-center{transform-origin:center}
.overflow-auto{overflow:auto}
.overflow-hidden{overflow:hidden}
.overflow-x-auto{overflow-x:auto}
.overflow-y-auto{overflow-y:auto}
.p-0\.5{padding:0.125rem}
.p-1{padding:0.25rem}
.p-1\.5{padding:0.375rem}
.p-2{padding:0.5rem}
.p-2\.5{padding:0.625rem}
.p-3{padding:0.75rem}
.p-3\.5{padding:0.875rem}
.p-4{padding:1rem}
.p-5{padding:1.25rem}
.p-6{padding:1.5rem}
.p-8{padding:2rem}
.pb-16{padding-bottom:4rem}
.pb-2{padding-bottom:0.5rem}
.pb-2\.5{padding-bottom:0.625rem}
.pb-3{padding-bottom:0.75rem}
.pb-4{padding-bottom:1rem}
.pb-5{padding-bottom:1.25rem}
.pl-9{padding-left:2.25rem}
.placeholder-slate-400{color:#94a3b8}
.pr-1{padding-right:0.25rem}
.pr-4{padding-right:1rem}
.pt-1{padding-top:0.25rem}
.pt-2{padding-top:0.5rem}
.pt-2\.5{padding-top:0.625rem}
.pt-3{padding-top:0.75rem}
.pt-4{padding-top:1rem}
.pt-5{padding-top:1.25rem}
.px-1{padding-left:0.25rem;padding-right:0.25rem}
.px-1\.5{padding-left:0.375rem;padding-right:0.375rem}
.px-2{padding-left:0.5rem;padding-right:0.5rem}
.px-2\.5{padding-left:0.625rem;padding-right:0.625rem}
.px-3{padding-left:0.75rem;padding-right:0.75rem}
.px-3\.5{padding-left:0.875rem;padding-right:0.875rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-8{padding-left:2rem;padding-right:2rem}
.py-0\.2{padding-top:0.05rem;padding-bottom:0.05rem}
.py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem}
.py-1{padding-top:0.25rem;padding-bottom:0.25rem}
.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem}
.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem}
.py-3\.5{padding-top:0.875rem;padding-bottom:0.875rem}
.py-5{padding-top:1.25rem;padding-bottom:1.25rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.relative{position:relative}
.rounded{border-radius:0.25rem}
.rounded-2xl{border-radius:1rem}
.rounded-3xl{border-radius:1.5rem}
.rounded-full{border-radius:9999px}
.rounded-lg{border-radius:0.5rem}
.rounded-md{border-radius:0.375rem}
.rounded-xl{border-radius:0.75rem}
.scale-100{transform:scale(1)}
.scale-95{transform:scale(0.95)}
.selection\:bg-gold-500\/30{background-color:rgba(212,175,55,0.3)}
.selection\:text-emerald-950{color:#062315}
.self-start{align-self:flex-start}
.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px -1px rgba(0,0,0,0.1)}
.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,0.25)}
.shadow-inner{box-shadow:inset 0 2px 4px 0 rgba(0,0,0,0.05)}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -4px rgba(0,0,0,0.1)}
.shadow-md{box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1)}
.shadow-sm{box-shadow:0 1px 2px 0 rgba(0,0,0,0.05)}
.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 8px 10px -6px rgba(0,0,0,0.1)}
.shrink-0{flex-shrink:0}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]){margin-top:0.125rem}
.space-y-1 > :not([hidden]) ~ :not([hidden]){margin-top:0.25rem}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]){margin-top:0.375rem}
.space-y-12 > :not([hidden]) ~ :not([hidden]){margin-top:3rem}
.space-y-16 > :not([hidden]) ~ :not([hidden]){margin-top:4rem}
.space-y-2 > :not([hidden]) ~ :not([hidden]){margin-top:0.5rem}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]){margin-top:0.625rem}
.space-y-3 > :not([hidden]) ~ :not([hidden]){margin-top:0.75rem}
.space-y-3\.5 > :not([hidden]) ~ :not([hidden]){margin-top:0.875rem}
.space-y-4 > :not([hidden]) ~ :not([hidden]){margin-top:1rem}
.space-y-5 > :not([hidden]) ~ :not([hidden]){margin-top:1.25rem}
.space-y-6 > :not([hidden]) ~ :not([hidden]){margin-top:1.5rem}
.space-y-8 > :not([hidden]) ~ :not([hidden]){margin-top:2rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
.sticky{position:sticky}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.text-\[10px\]{font-size:10px}
.text-\[11px\]{font-size:11px}
.text-amber-300{color:#fcd34d}
.text-amber-600{color:#d97706}
.text-amber-800{color:#92400e}
.text-amber-900{color:#78350f}
.text-amber-950{color:#451a03}
.text-base{font-size:1rem;line-height:1.5rem}
.text-center{text-align:center}
.text-emerald-200{color:#a7f3d0}
.text-emerald-300{color:#6ee7b7}
.text-emerald-800{color:#065f46}
.text-emerald-850{color:#0F5132}
.text-emerald-900{color:#0B3B24}
.text-emerald-950{color:#062315}
.text-gold-400{color:#E5C453}
.text-gold-500{color:#D4AF37}
.text-gold-600{color:#B59024}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-navy-850{color:#0A192F}
.text-navy-900{color:#071120}
.text-red-100{color:#fee2e2}
.text-red-200{color:#fecaca}
.text-red-300{color:#fca5a5}
.text-red-600{color:#dc2626}
.text-red-700{color:#b91c1c}
.text-red-800{color:#991b1b}
.text-red-900{color:#7f1d1d}
.text-sand-100{color:#F7F2E7}
.text-sand-100\/85{color:rgba(247,242,231,0.85)}
.text-sand-100\/90{color:rgba(247,242,231,0.9)}
.text-sand-200{color:#EFE6D2}
.text-sand-200\/70{color:rgba(239,230,210,0.7)}
.text-sand-200\/75{color:rgba(239,230,210,0.75)}
.text-sand-200\/80{color:rgba(239,230,210,0.8)}
.text-sand-200\/85{color:rgba(239,230,210,0.85)}
.text-sand-50{color:#FDFBF7}
.text-slate-400{color:#94a3b8}
.text-slate-500{color:#64748b}
.text-slate-600{color:#475569}
.text-slate-700{color:#334155}
.text-sm{font-size:0.875rem;line-height:1.25rem}
.text-start{text-align:start}
.text-white{color:#ffffff}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-xs{font-size:0.75rem;line-height:1rem}
.to-amber-50{--tw-gradient-to:#fffbeb}
.to-amber-50\/70{--tw-gradient-to:rgba(255,251,235,0.7)}
.to-emerald-900{--tw-gradient-to:#0B3B24}
.to-emerald-950{--tw-gradient-to:#062315}
.to-gold-500{--tw-gradient-to:#D4AF37}
.to-navy-900{--tw-gradient-to:#071120}
.to-transparent{--tw-gradient-to:transparent}
.to-white{--tw-gradient-to:#ffffff}
.top-0{top:0px}
.top-16{top:4rem}
.top-2{top:0.5rem}
.tracking-tight{letter-spacing:-0.025em}
.tracking-wide{letter-spacing:0.025em}
.tracking-wider{letter-spacing:0.05em}
.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}
.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}
.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}
.translate-y-0{transform:translateY(0px)}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.underline{text-decoration-line:underline}
.uppercase{text-transform:uppercase}
.via-amber-50\/40{--tw-gradient-to:rgba(255,255,255,0);--tw-gradient-stops:var(--tw-gradient-from),rgba(255,251,235,0.4),var(--tw-gradient-to)}
.via-emerald-700{--tw-gradient-to:rgba(255,255,255,0);--tw-gradient-stops:var(--tw-gradient-from),#047857,var(--tw-gradient-to)}
.via-emerald-900{--tw-gradient-to:rgba(255,255,255,0);--tw-gradient-stops:var(--tw-gradient-from),#0B3B24,var(--tw-gradient-to)}
.via-navy-900\/20{--tw-gradient-to:rgba(255,255,255,0);--tw-gradient-stops:var(--tw-gradient-from),rgba(7,17,32,0.2),var(--tw-gradient-to)}
.via-white{--tw-gradient-to:rgba(255,255,255,0);--tw-gradient-stops:var(--tw-gradient-from),#ffffff,var(--tw-gradient-to)}
.w-1\.5{width:0.375rem}
.w-10{width:2.5rem}
.w-11{width:2.75rem}
.w-12{width:3rem}
.w-14{width:3.5rem}
.w-16{width:4rem}
.w-2{width:0.5rem}
.w-2\.5{width:0.625rem}
.w-20{width:5rem}
.w-4{width:1rem}
.w-5{width:1.25rem}
.w-7{width:1.75rem}
.w-8{width:2rem}
.w-9{width:2.25rem}
.w-full{width:100%}
.whitespace-nowrap{white-space:nowrap}
.whitespace-pre-line{white-space:pre-line}
.z-10{z-index:10}
.z-30{z-index:30}
.z-40{z-index:40}
.z-50{z-index:50}
@media (min-width:640px){.sm\:col-span-2{grid-column:span 2 / span 2}.sm\:col-span-3{grid-column:span 3 / span 3}.sm\:col-span-4{grid-column:span 4 / span 4}.sm\:col-span-5{grid-column:span 5 / span 5}.sm\:col-span-7{grid-column:span 7 / span 7}.sm\:col-span-8{grid-column:span 8 / span 8}.sm\:flex-row{flex-direction:row}.sm\:gap-2{gap:0.5rem}.sm\:gap-3{gap:0.75rem}.sm\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:grow-0{flex-grow:0}.sm\:h-11{height:2.75rem}.sm\:h-60{height:15rem}.sm\:inline{display:inline}.sm\:inline-flex{display:inline-flex}.sm\:items-center{align-items:center}.sm\:min-w-\[340px\]{min-width:340px}.sm\:p-10{padding:2.5rem}.sm\:p-5{padding:1.25rem}.sm\:p-7{padding:1.75rem}.sm\:p-8{padding:2rem}.sm\:px-3\.5{padding-left:0.875rem;padding-right:0.875rem}.sm\:px-4{padding-left:1rem;padding-right:1rem}.sm\:self-auto{align-self:auto}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-base{font-size:1rem;line-height:1.5rem}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sm\:text-sm{font-size:0.875rem;line-height:1.25rem}.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}.sm\:w-11{width:2.75rem}}
@media (min-width:768px){.md\:block{display:block}.md\:col-span-1{grid-column:span 1 / span 1}.md\:col-span-2{grid-column:span 2 / span 2}.md\:col-span-3{grid-column:span 3 / span 3}.md\:col-span-4{grid-column:span 4 / span 4}.md\:col-span-5{grid-column:span 5 / span 5}.md\:flex-row{flex-direction:row}.md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:inline{display:inline}.md\:items-center{align-items:center}.md\:items-end{align-items:flex-end}.md\:self-auto{align-self:auto}}
@media (min-width:1024px){.lg\:col-span-12{grid-column:span 12 / span 12}.lg\:col-span-3{grid-column:span 3 / span 3}.lg\:col-span-4{grid-column:span 4 / span 4}.lg\:col-span-5{grid-column:span 5 / span 5}.lg\:col-span-6{grid-column:span 6 / span 6}.lg\:col-span-7{grid-column:span 7 / span 7}.lg\:col-span-8{grid-column:span 8 / span 8}.lg\:col-span-9{grid-column:span 9 / span 9}.lg\:flex-row{flex-direction:row}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:items-center{align-items:center}.lg\:justify-end{justify-content:flex-end}.lg\:py-16{padding-top:4rem;padding-bottom:4rem}.lg\:text-5xl{font-size:3rem;line-height:1}}
@media (min-width:1280px){.xl\:flex{display:flex}.xl\:hidden{display:none}.xl\:min-h-\[64px\]{min-height:64px}.xl\:text-lg{font-size:1.125rem;line-height:1.75rem}}
@media (min-width:1536px){.2xl\:block{display:block}.2xl\:inline{display:inline}.2xl\:inline-block{display:inline-block}.2xl\:px-2\.5{padding-left:0.625rem;padding-right:0.625rem}.2xl\:text-xs{font-size:0.75rem;line-height:1rem}}
#landing-section-credentials,
#landing-section-tracks,
#landing-section-reviews,
footer {
content-visibility: auto;
contain-intrinsic-size: auto 480px;
}
:root {
--brand-primary: #0F5132;
--brand-primary-dark: #0B3B24;
--brand-dark: #0A192F;
--brand-bg: #FDFBF7;
--brand-surface: #F7F2E7;
--brand-border-soft: #EFE6D2;
--brand-secondary: #D4AF37;
--brand-secondary-light: #E5C453;
--brand-secondary-dark: #B59024;
--active-arabic-font: 'Cairo', 'Cairo-Fallback-Local', sans-serif;
}
*, *::before, *::after {
user-select: text !important;
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
}
::selection {
background-color: #0A192F !important;
color: #D4AF37 !important;
}
::-moz-selection {
background-color: #0A192F !important;
color: #D4AF37 !important;
}
body {
background-color: var(--brand-bg);
color: var(--brand-dark);
font-family: var(--active-arabic-font), 'Inter', sans-serif;
overflow-x: hidden;
transition: background-color 0.25s ease, color 0.25s ease;
}
[dir="ltr"] body {
font-family: 'Inter', var(--active-arabic-font), sans-serif;
}
.font-classical-ar {
font-family: 'Amiri', var(--active-arabic-font), serif;
line-height: 2.1;
}
.arabic-tashkeel {
line-height: 2.05;
letter-spacing: 0.01em;
}
.islamic-pattern {
background-color: rgba(212, 175, 55, 0.03);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23d4af37' fill-opacity='0.18'/%3E%3Ccircle cx='16' cy='16' r='1' fill='%230f5132' fill-opacity='0.09'/%3E%3C/svg%3E");
background-size: 28px 28px;
}
.hero-gradient {
background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-primary) 62%, var(--brand-primary-dark) 100%);
}
.gold-border-glow {
box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.35), 0 12px 30px -8px rgba(10, 25, 47, 0.12);
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.gold-border-glow:hover {
box-shadow: 0 0 0 1.5px rgba(212, 175, 55, 0.55), 0 18px 36px -10px rgba(10, 25, 47, 0.18);
}
.micro-btn {
transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.micro-btn:hover {
transform: translateY(-1px);
}
.micro-btn:active {
transform: translateY(0) scale(0.98);
}
.smart-navbar {
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
will-change: transform;
}
.smart-navbar.nav-hidden {
transform: translateY(-100%);
}
@font-face {
font-family: 'Cairo-Fallback-Local';
src: local('Segoe UI'), local('Tahoma'), local('Arial'), local('Noto Sans Arabic'), local('sans-serif');
font-display: swap;
size-adjust: 103%;
ascent-override: 96%;
descent-override: 24%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Amiri-Fallback-Local';
src: local('Traditional Arabic'), local('Geeza Pro'), local('Times New Roman'), local('Noto Naskh Arabic'), local('serif');
font-display: swap;
size-adjust: 106%;
ascent-override: 98%;
descent-override: 26%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Tajawal-Fallback-Local';
src: local('Segoe UI'), local('Tahoma'), local('Arial'), local('sans-serif');
font-display: swap;
size-adjust: 101%;
ascent-override: 95%;
descent-override: 23%;
line-gap-override: 0%;
}
.flip-card-perspective {
perspective: 1100px;
contain: layout style;
touch-action: pan-y;
}
.flip-card-inner {
display: grid;
grid-template-areas: "card-face";
position: relative;
width: 100%;
min-height: 490px;
transition: transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);
transform-style: preserve-3d;
transform: translate3d(0, 0, 0);
will-change: transform;
contain: layout style paint;
}
.flip-card-inner.is-flipped {
transform: translate3d(0, 0, 0) rotateY(180deg);
}
.flip-card-front, .flip-card-back {
grid-area: card-face;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0, 0, 0);
will-change: transform;
contain: layout style paint;
}
.flip-card-back {
transform: translate3d(0, 0, 0) rotateY(180deg);
}
.perf-cv-card,
#view-curriculum #curriculum-library-container .gold-border-glow,
#view-flashcards #hub-grid-cards-container > div {
content-visibility: auto;
contain-intrinsic-size: 320px;
}
.naskh-font {
font-family: 'Amiri', serif;
}
.en-font {
font-family: 'Inter', sans-serif;
direction: ltr;
text-align: left;
}
.lesson-iframe-container {
position: relative;
width: 100%;
overflow: hidden;
border-radius: 1rem;
background-color: var(--brand-bg);
}
#importer-preview-iframe {
width: 100% !important;
height: clamp(500px, calc(100vh - 230px), 780px) !important;
min-height: 500px !important;
max-height: 82vh !important;
display: block !important;
border: 0 !important;
}
#classroom-html-iframe {
width: 100% !important;
height: clamp(540px, calc(100vh - 200px), 860px) !important;
min-height: 540px !important;
max-height: 84vh !important;
display: block !important;
border: 0 !important;
}
#hw-preview-iframe {
width: 100% !important;
height: clamp(380px, 65vh, 660px) !important;
min-height: 380px !important;
max-height: 72vh !important;
display: block !important;
border: 0 !important;
}
@media (max-width: 640px) {
#importer-preview-iframe,
#classroom-html-iframe {
height: clamp(420px, calc(100vh - 170px), 660px) !important;
min-height: 420px !important;
}
}
#view-classroom.classroom-fullscreen-active #classroom-html-iframe,
#view-classroom:fullscreen #classroom-html-iframe,
#view-classroom:-webkit-full-screen #classroom-html-iframe {
height: calc(100vh - 135px) !important;
max-height: calc(100vh - 135px) !important;
min-height: 420px !important;
}
::-webkit-scrollbar {
width: 7px;
height: 7px;
}
::-webkit-scrollbar-track {
background: var(--brand-surface);
}
::-webkit-scrollbar-thumb {
background: var(--brand-primary);
border-radius: 9999px;
}
@media print {
@page {
size: A4 portrait;
margin: 12mm;
}
html, body {
background: #FFFFFF !important;
color: #000000 !important;
font-size: 11pt !important;
overflow: visible !important;
}
#top-utility-bar,
#main-smart-navbar,
#admin-control-ribbon,
#toast-container,
footer,
.no-print,
button,
input[type="file"],
select#analytics-student-select,
#analytics-header-controls {
display: none !important;
}
main > section:not(#view-analytics) {
display: none !important;
}
#view-analytics {
display: block !important;
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
.print-report-card {
box-shadow: none !important;
border: 1px solid #cbd5e1 !important;
break-inside: avoid;
page-break-inside: avoid;
background: #ffffff !important;
color: #000000 !important;
margin-bottom: 12px !important;
}
.print-only-header {
display: block !important;
}
input, textarea {
border: none !important;
background: transparent !important;
padding: 0 !important;
resize: none !important;
}
}
.print-only-header {
display: none;
}
.font-cairo { font-family: 'Cairo', sans-serif !important; }
.font-alexandria { font-family: 'Alexandria', sans-serif !important; }
.font-tajawal { font-family: 'Tajawal', sans-serif !important; }
.font-almarai { font-family: 'Almarai', sans-serif !important; }
.font-readex { font-family: 'Readex Pro', sans-serif !important; }
.font-ibm-arabic { font-family: 'IBM Plex Sans Arabic', sans-serif !important; }
.font-amiri { font-family: 'Amiri', serif !important; }
.font-kufi { font-family: 'Noto Kufi Arabic', sans-serif !important; }
html[dir="rtl"], html[dir="rtl"] body {
direction: rtl;
text-align: start;
}
html[dir="ltr"], html[dir="ltr"] body {
direction: ltr;
text-align: start;
}
.arabic-lesson-content, .font-classical-ar, .arabic-tashkeel, [lang="ar-content"] {
direction: rtl;
unicode-bidi: isolate;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.flip-card-inner {
transition: none !important;
}
}
@media (max-width: 480px) {
html, body, main {
max-width: 100vw !important;
overflow-x: clip !important;
}
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: 2px solid var(--brand-secondary) !important;
outline-offset: 2px !important;
}
p, h1, h2, h3, h4, h5, h6, li, blockquote, label, td, th {
unicode-bidi: isolate;
}
textarea, input[type="text"], input[type="search"], .bidi-plaintext {
unicode-bidi: plaintext;
text-align: start;
}
bdi, .bdi-isolate {
unicode-bidi: isolate;
display: inline-block;
}
#view-classroom.classroom-fullscreen-active,
#view-classroom:fullscreen,
#view-classroom:-webkit-full-screen {
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
height: 100vh !important;
z-index: 9990 !important;
background-color: var(--brand-bg) !important;
overflow-y: auto !important;
padding: 1rem 1.5rem !important;
margin: 0 !important;
box-sizing: border-box !important;
}
#view-classroom.classroom-fullscreen-active #classroom-top-control-bar,
#view-classroom:fullscreen #classroom-top-control-bar {
position: sticky !important;
top: 0 !important;
z-index: 9995 !important;
box-shadow: 0 10px 25px -5px rgba(10, 25, 47, 0.35) !important;
}
#view-classroom.classroom-fullscreen-active #classroom-main-stage,
#view-classroom:fullscreen #classroom-main-stage {
min-height: calc(100vh - 110px) !important;
}
#landing-section-credentials,
#landing-section-tracks,
#landing-section-reviews,
#site-main-footer {
content-visibility: auto;
contain-intrinsic-size: auto 600px;
}
.backdrop-blur-sm,
.backdrop-blur-md,
.backdrop-blur {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
@media (max-width: 767.98px) {
#top-utility-bar {
display: none !important;
}
#main-smart-navbar:not(:has(#mobile-nav-drawer:not(.hidden))) {
max-height: 64px !important;
}
}
:where(header button, header a, header select, #landing-section-hero button, #landing-section-hero a, .cefr-pill) {
min-height: 44px;
min-width: 44px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
.flip-card-3d:focus-visible,
.micro-btn:focus-visible {
outline: 3px solid #D4AF37 !important;
outline-offset: 2px !important;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after,
.animate-pulse,
.animate-ping,
.animate-bounce,
.micro-btn,
.flip-card-inner,
.flip-card-3d {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}