/* Shared site layer: mobile navigation + small-screen safety nets. */
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
[id]{scroll-margin-top:96px}

.q-jsburger{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-inline-start:auto;border:1px solid #E2E8F0;border-radius:8px;background:#fff;color:#0F172A;cursor:pointer;flex:none}
.q-jsburger .cs-icon{font-size:24px}
.q-drawer{position:fixed;inset:72px 0 0 0;z-index:70;background:#fff;padding:16px 16px 32px;overflow-y:auto;border-top:1px solid #E2E8F0;display:flex;flex-direction:column;gap:4px}
.q-drawer[hidden]{display:none}
.q-drawer a{display:flex;align-items:center;gap:8px;min-height:52px;padding:0 12px;border-radius:8px;font-size:17px;font-weight:500;color:#0F172A;text-decoration:none}
.q-drawer a[aria-current]{background:#EBEDFF;color:#0B1A6B}
.q-drawer__sep{height:1px;background:#E2E8F0;margin:12px 0}
.q-drawer__cta{justify-content:center;margin-top:8px;border:1px solid #2440DC;color:#2440DC !important;font-weight:600 !important}
body.q-menu-open{overflow:hidden}

@media (max-width: 1180px){
  .q-nav__in{gap:16px;height:72px}
  .q-nav__in > nav,
  .q-nav__in > div:last-of-type:not(.q-jsburger){display:none !important}
  .q-jsburger{display:inline-flex}
}
@media (max-width: 860px){
  /* Inline multi-column grids in footers / cards collapse on phones */
  .cs-footer .cs-container > div[style*="grid-template-columns"]{grid-template-columns:1fr 1fr !important}
  .q-tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-inline:-16px;padding-inline:16px}
  .q-tblwrap > .q-tbl{min-width:680px}
}
@media (max-width: 560px){
  .cs-footer .cs-container > div[style*="grid-template-columns"]{grid-template-columns:1fr !important}
}

/* ---------- Responsive layer for the q-* page components ---------- */
@media (max-width: 1100px){
  .q-tr,.q-pg,.q-ls,.q-cm,.q-sk,.q-who,.q-podium{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .q-pil,.q-ch,.q-plans{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .q-jr{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  .q-cos{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  .q-split,.q-split--57,.q-fq,.q-in,.q-ins{gap:40px}
  .q-h1{font-size:56px}
  .q-h1s{font-size:48px}
}
@media (max-width: 860px){
  .q-w{padding-inline:16px}
  .q-sec{padding-block:72px}
  .q-head{margin-bottom:36px}
  .q-ph-hero{padding-block:40px 64px}
  .q-split,.q-split--57,.q-fq,.q-in,.q-ins,.q-rf,
  .q-tr,.q-pg,.q-ls,.q-cm,.q-sk,.q-who,.q-podium,.q-pil,.q-ch{grid-template-columns:minmax(0,1fr) !important}
  .q-jr{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .q-ck,.q-st3,.q-st4,.q-mx{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .q-mx > div:nth-child(odd){border-inline-start:0}
  .q-mx > div:nth-child(n+3){border-top:1px solid var(--line)}
  /* inline grids authored in the markup */
  main [style*="grid-template-columns"],.page [style*="grid-template-columns"]:not(.cs-footer *){grid-template-columns:minmax(0,1fr) !important}
  .q-h1{font-size:40px;line-height:1.3}
  .q-h1s{font-size:36px;line-height:1.3}
  .q-h2,.q-end .q-h2{font-size:30px;line-height:1.35}
  .q-big{font-size:44px}
  .q-cs b{font-size:34px}
  .q-pr h3{font-size:22px}
  .q-lead{font-size:16px !important}
  .q-pr,.q-pc{min-height:0}
  .q-end{padding:56px 20px}
  .q-en{position:static}
  .q-toc{position:static}
  .q-rc{width:300px;padding:22px}
  .q-tile{width:280px}
  .q-rail{margin-top:40px;padding-bottom:56px}
  .q-hero__cta,.q-reas,.q-totals,.q-band,.q-gate__f{flex-wrap:wrap}
  .q-hero__cta > *{flex:1 1 220px;justify-content:center}
  .q-b{height:52px;padding:0 20px;white-space:normal;text-align:center}
  .q-crumb{flex-wrap:wrap}
  .q-art section{padding:20px}
  .q-u summary{gap:12px;padding:16px;flex-wrap:wrap}
  .q-u__m{white-space:normal}
  .q-stick{width:calc(100% - 32px)}
  .q-shape,.q-end__sh{opacity:.35}
  .page main [style*="display: flex"],.page section [style*="display: flex"]{flex-wrap:wrap}
  .page section [style*="display: flex"] > .q-b{flex:1 1 auto;justify-content:center}
  .wa{bottom:84px}
}
@media (max-width: 560px){
  .q-jr,.q-ck,.q-plans,.q-cos{grid-template-columns:minmax(0,1fr) !important}
  .q-cos{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .q-h1{font-size:34px}
  .q-h1s{font-size:32px}
  .q-h2,.q-end .q-h2{font-size:26px}
  .q-hero__cta > *{flex-basis:100%}
}
@media (max-width: 860px){
  .q-stick{bottom:8px;padding:8px;gap:8px}
  .q-stick > :first-child{display:none}
  .q-stick > :last-child{flex:1;flex-wrap:nowrap !important}
  .q-stick > :last-child > *{flex:1 1 0;justify-content:center;padding:0 10px;font-size:14px}
  .q-h1[style*="font-size"]{font-size:40px !important}
}
@media (max-width: 560px){ .q-h1[style*="font-size"]{font-size:34px !important} }
@media (max-width: 860px){
  .q-u summary{flex-wrap:wrap}
  .q-u__t{flex:1 1 calc(100% - 100px) !important}
  .q-u__m{order:5;flex-basis:100%;padding-inline-start:56px}
  .q-lec{flex-wrap:wrap}
}
@media (max-width: 860px){
  .q-end[style*="flex-direction: row"]{flex-direction:column !important;padding:32px 20px !important;gap:24px}
  .q-end[style*="flex-direction: row"] > a{align-self:stretch !important;justify-content:center}
}
@media (max-width: 860px){ .cs-footer [style*="display: flex"]{flex-wrap:wrap} }
/* Track & diploma heroes: text column holds the buttons and details; video alone on the left.
   On phones: text, buttons, video, then the rest. */
@media (max-width: 860px){
  .q-ph-hero .q-split:has(.q-hero-r){row-gap:22px}
  .q-hero-r{display:contents}
  .q-ph-hero .q-split > .q-gate{order:1}
  .q-hero-r > .q-hero__cta ~ *{order:2}
}

/* Curriculum: sub-group headings inside a unit (e.g. homework video groups) */
.q-lsub{margin:16px 0 2px;padding-top:4px;font-size:13px;font-weight:700;color:var(--navy,#14213D)}
.q-lec bdi,.q-lsub bdi{font-family:inherit;overflow-wrap:anywhere;text-align:start}

/* Listing pages (/tracks, /diplomas): illustration beside the hero text, after the buttons on phones */
.q-lvis{display:block;border:1px solid var(--line,#E2E8F0);border-radius:12px;overflow:hidden;box-shadow:0 24px 48px rgba(15,23,42,0.10);aspect-ratio:16/10;background:#FAF9F6;transition:transform 250ms ease,box-shadow 250ms ease}
.q-lvis:hover{transform:translateY(-4px);box-shadow:0 28px 56px rgba(15,23,42,0.14)}
.q-lvis svg{display:block;width:100%;height:100%}
@media (max-width: 860px){ .q-ph-hero .q-split > .q-lvis{order:1} }

/* Free-lecture and quiz forms: invalid e-mail flagged by site.js */
.q-fld.is-bad .q-err{display:flex}
.q-fld.is-bad .q-in{border-color:#B91C1C}

/* Pricing: original price struck through in red above the price you pay */
.q-plan__was{display:block;margin:4px 0 2px;font-size:18px;font-weight:600;line-height:1.3;color:#DC2626;text-decoration:line-through;text-decoration-thickness:2px}

/* Footer logo: academy name under CSkilled, same wording as the header */
.cs-footer .cs-logo__text{display:flex;flex-direction:column;line-height:1.3}
.cs-footer .cs-logo__tag{font-size:12px;font-weight:500;color:#475569}

/* Pricing: Instapay and Fawry are Egypt-only, so hide them on the USD tab */
body:has(#cur-u:checked) .q-trust2 .q-egp-only{display:none}
/* Free-lecture form: «رجوع» on its own line under the note */
.q-form .q-back{display:block;align-self:center;margin-top:2px}
/* Free-lecture player: the real video fills the frame once it starts */
.q-gate__m .q-vid{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2;background:#000}

/* Curriculum: free lectures are clickable and play in the page's player */
.q-lec--play{cursor:pointer;border-radius:8px;padding-inline:8px;margin-inline:-8px;transition:background-color 150ms ease}
.q-lec--play:hover,.q-lec--play:focus-visible{background:#ECFDF5;outline:none}
.q-lec--play:hover bdi{color:#047857}

/* Track and diploma video poster: illustration + play ring */
.q-gate__m .q-art{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#fff}
.q-art__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(64px,11vw,104px);height:clamp(64px,11vw,104px);border-radius:999px;border:clamp(4px,0.6vw,6px) solid rgba(255,255,255,0.95);background:rgba(6,41,133,0.28);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(6,41,133,0.3);pointer-events:none;transition:transform 200ms ease}
.q-art__play .cs-icon{font-size:clamp(40px,7vw,62px);text-shadow:0 2px 10px rgba(6,41,133,0.45)}
.q-gate__m:hover .q-art__play{transform:translate(-50%,-50%) scale(1.08)}

/* Living section backgrounds: faint grid or dots that fade out, and a slowly drifting glow */
.q-sec{position:relative;isolation:isolate;overflow:clip}
.q-sec::before,.q-sec::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.q-sec::before{inset:0;background-image:linear-gradient(rgba(36,64,220,0.07) 1px,transparent 1px),linear-gradient(90deg,rgba(36,64,220,0.07) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 75% 65% at 85% 0%,#000 0%,transparent 72%);mask-image:radial-gradient(ellipse 75% 65% at 85% 0%,#000 0%,transparent 72%)}
.q-sec::after{width:560px;height:560px;border-radius:50%;top:-220px;left:-180px;background:radial-gradient(circle,rgba(47,85,240,0.16) 0%,rgba(47,85,240,0.05) 45%,transparent 68%);animation:qGlow 22s ease-in-out infinite alternate}
.q-sec:nth-of-type(even)::before{background-image:radial-gradient(rgba(36,64,220,0.16) 1.3px,transparent 1.5px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 10% 100%,#000 0%,transparent 70%);mask-image:radial-gradient(ellipse 60% 70% at 10% 100%,#000 0%,transparent 70%)}
.q-sec:nth-of-type(even)::after{top:auto;bottom:-240px;left:auto;right:-160px;background:radial-gradient(circle,rgba(124,140,240,0.2) 0%,rgba(34,211,238,0.06) 45%,transparent 68%);animation-duration:26s;animation-direction:alternate-reverse}
.q-sec:nth-of-type(3n)::after{background:radial-gradient(circle,rgba(34,211,238,0.14) 0%,rgba(47,85,240,0.05) 45%,transparent 68%)}
.q-sec:nth-of-type(3n)::before{-webkit-mask-image:radial-gradient(ellipse 70% 60% at 15% 0%,#000 0%,transparent 72%);mask-image:radial-gradient(ellipse 70% 60% at 15% 0%,#000 0%,transparent 72%)}
@keyframes qGlow{0%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,40px) scale(1.12)}100%{transform:translate(-30px,90px) scale(0.94)}}
/* floating code glyphs, added by site.js to roomy sections */
.q-deco{position:absolute;z-index:-1;pointer-events:none;font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:700;color:rgba(36,64,220,0.13);user-select:none;animation:qFloat 9s ease-in-out infinite;direction:ltr}
@keyframes qFloat{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-14px) rotate(var(--r,0deg))}}
@media (max-width: 700px){.q-sec::after{width:360px;height:360px}.q-deco{display:none}}
@media (prefers-reduced-motion: reduce){.q-sec::after,.q-deco{animation:none}}

/* Student stories: video posters that play the student's video in place */
/* student stories: light tinted thumbnails with a grid, like the course illustrations */
.q-story__m{background-color:var(--s1);background-image:linear-gradient(#0629850F 1px,transparent 1px),linear-gradient(90deg,#0629850F 1px,transparent 1px);background-size:24px 24px;background-position:center;border-bottom:1px solid var(--s2);overflow:clip}
.q-story__m::before{content:"";position:absolute;left:50%;top:44%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:999px;background:var(--s2);opacity:0.55;pointer-events:none}
.q-story__m iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2}
.q-story__play{position:absolute;inset:0;border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#0F172A;font:inherit}
.q-story__q{position:absolute;top:-14px;inset-inline-start:22px;font-family:Georgia,serif;font-size:150px;line-height:1;color:var(--s3);opacity:0.22}
.q-story__ring{width:76px;height:76px;border-radius:999px;border:5px solid #FFFFFF;background:#062985;color:#FFFFFF;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px #06298540;transition:transform 200ms ease}
.q-story__ring .cs-icon{font-size:46px}
.q-story__name{font-size:18px;font-weight:700;color:#0F172A}
.q-story__tag{position:absolute;bottom:14px;inset-inline-start:16px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.04em;color:var(--s3);background:#FFFFFF;border:1px solid var(--s2);border-radius:999px;padding:3px 10px}
.q-lc:hover .q-story__ring,.q-story__play:focus-visible .q-story__ring{transform:scale(1.08)}

/* Curriculum module titles (English names, as on the course) */
.q-u__t b bdi{font-family:inherit;font-weight:700;font-size:inherit;color:inherit}

/* Track/diploma page video (Google Drive) in the top player */
.q-gate__hit--full{right:0 !important;left:0 !important;border:0;background:transparent;padding:0;cursor:pointer}
.q-gate__m[data-yt] iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3;background:#000}

/* WhatsApp button: the same green pill as on the home page */
.q-wa{position:fixed;bottom:20px;left:20px;z-index:90;display:inline-flex;align-items:center;gap:0;height:52px;padding:0 8px;border-radius:999px;background:#fff;border:1px solid #E2E8F0;box-shadow:0 12px 32px rgba(15,23,42,0.18);color:#0F172A;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:15px;font-weight:600;text-decoration:none;transition:padding 250ms ease,gap 250ms ease}
.q-wa .cs-icon{width:34px;height:34px;border-radius:999px;background:#16A34A;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:20px}
.q-wa > span:last-child{display:inline-block;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width 300ms ease,opacity 200ms ease}
.q-wa:hover,.q-wa:focus-visible{gap:10px;padding:0 20px 0 14px;color:#0F172A}
.q-wa:hover > span:last-child,.q-wa:focus-visible > span:last-child{max-width:220px;opacity:1}
@media (max-width: 700px){.q-wa{bottom:14px;left:14px;height:48px;padding:0 7px}}
/* language tabs (merged DSA curriculum) */
.q-lt__bar{display:inline-flex;gap:6px;padding:6px;margin-bottom:20px;border:1px solid #E2E8F0;border-radius:14px;background:#F8FAFC}
.q-lt__bar label{display:flex;align-items:baseline;gap:8px;padding:10px 20px;border-radius:10px;cursor:pointer;color:#475569;font-size:15px;transition:background .2s,color .2s}
.q-lt__bar label b{font-size:16px}
.q-lt__bar label span{font-size:13px}
.q-lt__bar label:hover{color:#062985}
#lt-py:checked~.q-lt__bar label[for=lt-py],#lt-cpp:checked~.q-lt__bar label[for=lt-cpp]{background:#062985;color:#FFFFFF}
#lt-py:focus-visible~.q-lt__bar label[for=lt-py],#lt-cpp:focus-visible~.q-lt__bar label[for=lt-cpp]{outline:2px solid #2440DC;outline-offset:2px}
.q-lt__p{display:none}
#lt-py:checked~.q-lt__p--py,#lt-cpp:checked~.q-lt__p--cpp{display:block}
/* instructor page: YouTube videos, the player loads on click */
.q-ivid{position:relative;aspect-ratio:16/9;background:#0A101D;overflow:hidden}
.q-ivid img{display:block;width:100%;height:100%;object-fit:cover}
.q-ivid__play{position:absolute;inset:0;border:0;padding:0;background:rgba(6,41,133,0.18);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#FFFFFF;transition:background 200ms ease}
.q-ivid__play .cs-icon{width:68px;height:68px;border-radius:999px;background:#062985;border:4px solid #FFFFFF;display:flex;align-items:center;justify-content:center;font-size:40px;box-shadow:0 12px 30px rgba(2,8,40,0.35);transition:transform 200ms ease}
.q-ivid__play:hover .cs-icon,.q-ivid__play:focus-visible .cs-icon{transform:scale(1.08)}
.q-ivid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.q-frame__cap b{font-size:14px;color:#0F172A;margin-bottom:2px}

/* a11y: breadcrumb contrast on tinted heroes */
html .q-crumb,html .q-crumb a{color:#334155}


/* phones: the WhatsApp button floats above the sticky bar instead of covering its buttons */
@media (max-width:700px){body:has(.q-stick) .q-wa{bottom:86px}}
/* free-lecture list under the player (#gate) */
.q-fl{list-style:none;margin:0;padding:0 14px 16px;display:grid;gap:4px;max-height:248px;overflow:auto}
.q-fl__g{font-size:12px;font-weight:700;color:var(--mut,#64748B);padding:8px 8px 2px;text-align:start}
.q-fl button,.q-fl__link{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:1px solid transparent;border-radius:8px;background:transparent;font:inherit;font-size:14px;color:#0F172A;text-align:start;cursor:pointer;text-decoration:none}
.q-fl button:hover,.q-fl button:focus-visible,.q-fl__link:hover{background:#F1F5F9;outline:none}
.q-fl button.is-on{background:#EEF2FF;border-color:#C7D2FE;color:#062985;font-weight:600}
.q-fl__n{flex:none;width:24px;height:24px;border-radius:999px;background:#E2E8F0;color:#334155;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.q-fl button.is-on .q-fl__n{background:#2440DC;color:#fff}
.q-fl__link{color:#2440DC;font-size:13px}
.q-fl bdi{font-family:inherit;overflow-wrap:anywhere}
html[data-theme="dark"] .q-fl button,html[data-theme="dark"] .q-fl__g{color:#e2e8f0}
html[data-theme="dark"] .q-fl button:hover,html[data-theme="dark"] .q-fl button:focus-visible{background:#1f2937}
html[data-theme="dark"] .q-fl button.is-on{background:#1e293b;border-color:#334155;color:#c7d2fe}
/* intro videos (instructor page, FAQ) */
.q-iv-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.q-iv{margin:0;border:1px solid #E2E8F0;border-radius:8px;overflow:clip;background:#fff;display:flex;flex-direction:column}
.q-iv figcaption{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px;border-top:1px solid #E2E8F0}
.q-iv figcaption b{font-size:16px;color:#0F172A}
.q-iv figcaption span{font-size:14px;line-height:1.7;color:#475569}
@media (max-width:900px){.q-iv-g{grid-template-columns:minmax(0,1fr)}}
html[data-theme="dark"] .q-iv{background:#111827;border-color:rgba(148,163,184,.18)}
html[data-theme="dark"] .q-iv figcaption{border-color:rgba(148,163,184,.18)}
html[data-theme="dark"] .q-iv figcaption b{color:#e2e8f0}
html[data-theme="dark"] .q-iv figcaption span{color:#94a3b8}
@media (min-width:901px){.q-iv-g--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:920px;margin-inline:auto}}
.q-vid--out{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px;text-align:center;color:#fff;background:#0A101D}
.q-vid--out bdi{font-size:15px;font-weight:700;line-height:1.4}