/* ============================================================
DESIGN SYSTEM – Qena Digital Academy
============================================================ */

/* ---------- CSS Variables ---------- */
:root {
--primary-navy: #023786;
--primary-dark-navy: #041d53;
--primary-deep-blue: #032665;
--primary-muted-blue: #004791;

--accent-gold: #f6a123;
--accent-blue: #0763aa;
--accent-cyan: #149fcb;
--accent-light-cyan: #14bbe2;
--accent-light-green: #0eb461;

--text-dark-blue: #213c74;
--text-white: #ffffff;

--bg-white: #ffffff;
--bg-light: #f8fafc;

--font-arabic: "Tajawal", "Cairo", "IBM Plex Sans Arabic", sans-serif;
--font-english: "Inter Tight", "Inter", "Roboto", sans-serif;

--shadow-card: 0 18px 45px rgba(4, 29, 83, 0.1);
--shadow-card-hover: 0 24px 60px rgba(4, 29, 83, 0.16);
--shadow-nav: 0 12px 32px rgba(4, 29, 83, 0.08);
--shadow-soft: 0 10px 30px rgba(4, 29, 83, 0.08);

--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 18px;
--radius-xl: 24px;
--radius-xxl: 28px;
--radius-full: 9999px;

--transition: 0.3s ease;
--transition-slow: 0.55s ease;

--container-max: 1240px;
--gutter: 24px;

--hero-gradient: linear-gradient(
120deg,
#023786 0%,
#02317b 12%,
#032665 43%,
#041f58 73%,
#041d53 100%
);
}

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
font-family: var(--font-arabic);
background: var(--bg-white);
color: var(--text-dark-blue);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-theme {
--bg-white: #071a3f;
--bg-light: #0b214d;
--text-dark-blue: #eaf3ff;
--primary-dark-navy: #03112d;
--shadow-card: 0 18px 45px rgba(0, 0, 0, 0.28);
--shadow-card-hover: 0 24px 60px rgba(0, 0, 0, 0.38);
--shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.22);
--shadow-nav: 0 12px 32px rgba(0, 0, 0, 0.22);
background: #071a3f;
color: #eaf3ff;
}

a {
text-decoration: none;
color: inherit;
}

img {
display: block;
max-width: 100%;
height: auto;
}

ul {
list-style: none;
}

.container {
width: min(100% - var(--gutter) * 2, var(--container-max));
margin-inline: auto;
padding-inline: 0;
}

/* ---------- Typography Helpers ---------- */
.text-gold {
color: var(--accent-gold);
}
.text-cyan {
color: var(--accent-cyan);
}
.text-light-cyan {
color: var(--accent-light-cyan);
}
.text-white {
color: var(--text-white);
}
.text-dark-blue {
color: var(--text-dark-blue);
}

.fw-700 {
font-weight: 700;
}
.fw-800 {
font-weight: 800;
}

/* ---------- Buttons ---------- */
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--accent-gold);
color: var(--primary-dark-navy);
font-family: var(--font-arabic);
font-weight: 700;
font-size: 18px;
padding: 14px 36px;
border: none;
border-radius: var(--radius-full);
cursor: pointer;
box-shadow: 0 14px 30px rgba(246, 161, 35, 0.24);
transition: var(--transition);
text-decoration: none;
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px rgba(246, 161, 35, 0.35);
}

.btn-secondary-dark {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: transparent;
color: var(--text-white);
font-family: var(--font-arabic);
font-weight: 700;
font-size: 18px;
padding: 14px 36px;
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: var(--radius-full);
cursor: pointer;
transition: var(--transition);
text-decoration: none;
}
.btn-secondary-dark:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--text-white);
}

.btn-secondary-light {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: transparent;
color: var(--primary-navy);
font-family: var(--font-arabic);
font-weight: 700;
font-size: 18px;
padding: 14px 36px;
border: 1px solid var(--primary-navy);
border-radius: var(--radius-full);
cursor: pointer;
transition: var(--transition);
text-decoration: none;
}
.btn-secondary-light:hover {
background: var(--primary-navy);
color: var(--text-white);
}

.btn-whatsapp {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
background: var(--accent-gold);
color: var(--primary-dark-navy);
font-family: var(--font-arabic);
font-weight: 700;
font-size: 22px;
padding: 18px 44px;
border: none;
border-radius: var(--radius-full);
cursor: pointer;
box-shadow: 0 14px 30px rgba(246, 161, 35, 0.25);
transition: var(--transition);
text-decoration: none;
}
.btn-whatsapp:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 20px 45px rgba(77, 246, 35, 0.35);
background: var(--accent-light-green);
color: var(--text-white);
}


/* ---------- Badges ---------- */
.badge-gold {
background: rgba(246, 161, 35, 0.14);
color: #694000;
padding: 4px 16px;
border-radius: var(--radius-full);
font-size: 14px;
font-weight: 700;
display: inline-block;
}
.badge-cyan {
background: rgba(20, 187, 226, 0.14);
color: #004d65;
padding: 4px 16px;
border-radius: var(--radius-full);
font-size: 14px;
font-weight: 700;
display: inline-block;
}

/* ============================================================
HEADER / NAVBAR
============================================================ */
.navbar {
position: sticky;
top: 0;
z-index: 1000;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: var(--shadow-nav);
transition: var(--transition);
border-bottom: 1px solid rgba(2, 55, 134, 0.06);
}
.navbar.scrolled {
box-shadow: 0 8px 28px rgba(4, 29, 83, 0.1);
}

.navbar .container {
display: flex;
align-items: center;
justify-content: space-between;
height: 74px;
padding-block: 8px;
}

.navbar-brand {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.navbar-brand .logo-wrapper {
width: 46px;
height: 46px;
/* border-radius: var(--radius-md);
background: var(--hero-gradient); */
display: flex;
align-items: center;
justify-content: center;
color: var(--text-white);
font-weight: 800;
font-size: 14px;
font-family: var(--font-english);
flex-shrink: 0;
letter-spacing: -0.5px;
}
.navbar-brand .logo-wrapper img {
    width: 90%;
}
.navbar-brand .brand-text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.navbar-brand .brand-text .ar {
font-family: var(--font-arabic);
font-weight: 800;
font-size: 20px;
color: var(--primary-dark-navy);
}
.navbar-brand .brand-text .en {
font-family: var(--font-english);
font-weight: 500;
font-size: 12px;
color: var(--accent-cyan);
letter-spacing: 2.8px;
margin-top: 5px;
}

.navbar-links {
display: flex;
align-items: center;
gap: 32px;
}
.navbar-links a {
font-family: var(--font-arabic);
font-weight: 500;
font-size: 16px;
color: var(--text-dark-blue);
transition: var(--transition);
position: relative;
white-space: nowrap;
}
.navbar-links a::after {
content: "";
position: absolute;
bottom: -4px;
right: 0;
width: 0;
height: 2px;
background: var(--accent-gold);
transition: var(--transition);
}
.navbar-links a:hover::after,
.navbar-links a.active::after {
width: 100%;
}
.navbar-links a:hover {
color: var(--primary-navy);
}

.navbar-actions {
display: flex;
align-items: center;
gap: 16px;
flex-shrink: 0;
}
.theme-toggle {
width: 60px;
height: 30px;
border: 1px solid rgba(2, 55, 134, 0.22);
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.76);
color: var(--primary-navy);
display: inline-grid;
grid-template-columns: 1fr 1fr;
align-items: center;
justify-items: center;
gap: 0;
cursor: pointer;
position: relative;
box-shadow: var(--shadow-soft);
transition: var(--transition);
}
.theme-toggle::before {
content: "";
position: absolute;
inset: 3px auto 3px 3px;
width: 22px;
border-radius: 50%;
background: var(--accent-gold);
box-shadow: 0 6px 14px rgba(246, 161, 35, 0.28);
transition: var(--transition);
}
.theme-toggle .fa-moon {
position: absolute;
z-index: 1;
font-size: 15px;
right: 5px;
transition: var(--transition);
}
.theme-toggle .fa-sun {
    position: absolute;
    z-index: 1;
    font-size: 15px;
    left: 5px;
    transition: var(--transition);
    }
.theme-toggle__light {
color: var(--primary-dark-navy);

}
.theme-toggle__dark {
color: rgba(4, 29, 83, 0.42);
}
body.dark-theme .theme-toggle {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.18);
color: var(--text-white);
}
body.dark-theme .theme-toggle::before {
transform: translateX(30px);
background: var(--accent-cyan);
box-shadow: 0 6px 14px rgba(20, 187, 226, 0.26);
}
body.dark-theme .theme-toggle__light {
color: rgba(255, 255, 255, 0.45);
}
body.dark-theme .theme-toggle__dark {
color: var(--text-white);
}
body.dark-theme .hamburger span,
body.dark-theme .hamburger.active span {
background: var(--text-white);
}
.navbar-actions .btn-login {
background: transparent;
color: var(--primary-navy);
font-family: var(--font-arabic);
font-weight: 700;
font-size: 15px;
padding: 8px 20px;
border: 1px solid var(--primary-navy);
border-radius: var(--radius-full);
cursor: pointer;
transition: var(--transition);
}
.navbar-actions .btn-login:hover {
background: var(--primary-navy);
color: var(--text-white);
}

/* Mobile Hamburger */
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 6px;
z-index: 1001;
}
.hamburger span {
display: block;
width: 26px;
height: 2.5px;
background: var(--primary-dark-navy);
border-radius: 2px;
transition: var(--transition);
transform-origin: center;
}
.hamburger.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile menu overlay */
.mobile-menu-overlay {
display: none;
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 998;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0;
transition: opacity 0.3s ease;
}
.mobile-menu-overlay.open {
display: block;
opacity: 1;
}

.mobile-menu {
position: fixed;
top: 0;
right: -100%;
width: 85%;
max-width: 360px;
height: 100vh;
background: var(--bg-white);
padding: 80px 30px 40px;
z-index: 999;
transition: right 0.35s cubic-bezier(0.22, 1, 0.36, 1);
overflow-y: auto;
box-shadow: -8px 0 40px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
gap: 8px;
}
.mobile-menu.open {
right: 0;
}

.mobile-menu .mobile-brand {
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(2, 55, 134, 0.06);
margin-bottom: 12px;
}
.mobile-menu .mobile-brand .logo-wrapper {
width: 40px;
height: 40px;

display: flex;
align-items: center;
justify-content: right;

flex-shrink: 0;
}
.mobile-menu .mobile-brand .brand-text .ar {
font-family: var(--font-arabic);
font-weight: 800;
font-size: 18px;
color: var(--primary-dark-navy);
}
.mobile-menu .mobile-brand .brand-text .en {
font-family: var(--font-english);
font-weight: 800;
font-size: 12px;
color: var(--accent-cyan);
letter-spacing: 0.15em;
}

.mobile-menu a {
font-family: var(--font-arabic);
font-weight: 500;
font-size: 18px;
color: var(--text-dark-blue);
padding: 12px 0;
border-bottom: 1px solid rgb(2 55 134 / 18%);
transition: var(--transition);
display: flex;
align-items: center;
gap: 10px;
}
.mobile-menu a:hover {
color: var(--primary-navy);
padding-right: 8px;
}

.mobile-menu .btn-login-mobile {
margin-top: 16px;
background: var(--primary-navy);
color: var(--text-white);
border: none;
padding: 14px;
border-radius: var(--radius-md);
font-family: var(--font-arabic);
font-weight: 700;
font-size: 18px;
cursor: pointer;
width: 100%;
text-align: center;
transition: var(--transition);
}
.mobile-menu .btn-login-mobile:hover {
background: var(--primary-dark-navy);
}

/* ============================================================
HERO SECTION (MERGED)
============================================================ */
.qda-hero {
position: relative;
min-height: 85vh;
display: flex;
align-items: center;
background: radial-gradient(
ellipse at 70% 30%,
#eaf8ff 0%,
#f8fafc 45%,
#ffffff 100%
);
overflow: hidden;
padding: 40px 0 60px;
}

.qda-hero__bg-deco {
position: absolute;
pointer-events: none;
z-index: 0;
}

.qda-hero__bg-deco--circle-1 {
width: 500px;
height: 500px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(20, 187, 226, 0.06) 0%,
transparent 70%
);
top: -120px;
left: -100px;
}

.qda-hero__bg-deco--circle-2 {
width: 350px;
height: 350px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(246, 161, 35, 0.05) 0%,
transparent 70%
);
bottom: -80px;
right: -60px;
}

.qda-hero__bg-deco--circle-3 {
width: 180px;
height: 180px;
border-radius: 50%;
border: 1px solid rgba(2, 55, 134, 0.04);
top: 20%;
right: 10%;
}

.qda-hero__bg-deco--circle-4 {
width: 120px;
height: 120px;
border-radius: 50%;
border: 1px solid rgba(20, 187, 226, 0.06);
bottom: 25%;
left: 8%;
}

.qda-hero__bg-deco--dots {
position: absolute;
top: 15%;
right: 5%;
width: 120px;
height: 120px;
opacity: 0.06;
background-image: radial-gradient(
circle,
var(--primary-navy) 1.5px,
transparent 1.5px
);
background-size: 12px 12px;
}

.qda-hero__bg-deco--dots-2 {
position: absolute;
bottom: 20%;
left: 3%;
width: 80px;
height: 80px;
opacity: 0.05;
background-image: radial-gradient(
circle,
var(--accent-cyan) 1.5px,
transparent 1.5px
);
background-size: 10px 10px;
}

.qda-hero__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: top;
width: 100%;
}

/* Hero Content */
.qda-hero__content {
display: flex;
flex-direction: column;
gap: 20px;
}

.qda-hero__badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(2, 55, 134, 0.06);
border: 1px solid rgba(2, 55, 134, 0.08);
border-radius: var(--radius-full);
padding: 6px 18px 6px 20px;
font-size: 14px;
font-weight: 500;
color: var(--primary-navy);
width: fit-content;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}

.qda-hero__badge .highlight {
color: var(--accent-gold);
font-weight: 700;
}

.qda-hero__badge .icon {
font-size: 16px;
}

.qda-hero__title {
font-family: var(--font-arabic);
font-weight: 800;
font-size: 52px;
line-height: 1.15;
color: var(--primary-dark-navy);
letter-spacing: -0.01em;
}

.qda-hero__title .highlight-cyan {
color: var(--accent-light-cyan);
display: inline-block;
animation: qda-pulse-cyan 3s ease-in-out infinite;
}

@keyframes qda-pulse-cyan {
0%,
100% {
text-shadow: 0 0 8px rgba(20, 187, 226, 0.2);
}
50% {
text-shadow: 0 0 25px rgba(20, 187, 226, 0.4);
}
}

.qda-hero__desc {
font-family: var(--font-arabic);
font-size: 20px;
line-height: 1.8;
color: var(--text-dark-blue);
opacity: 0.8;
max-width: 560px;
}

.qda-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 4px;
}

.qda-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-arabic);
font-weight: 700;
font-size: 18px;
padding: 14px 36px;
border: none;
border-radius: var(--radius-full);
cursor: pointer;
transition: var(--transition);
text-decoration: none;
}

.qda-btn--primary {
background: var(--accent-gold);
color: var(--primary-dark-navy);
box-shadow: 0 14px 30px rgba(246, 161, 35, 0.24);
}

.qda-btn--primary:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px rgba(246, 161, 35, 0.35);
}

.qda-btn--secondary {
background: transparent;
color: var(--primary-navy);
border: 1.5px solid var(--primary-navy);
}

.qda-btn--secondary:hover {
background: var(--primary-navy);
color: var(--text-white);
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(2, 55, 134, 0.15);
}

.qda-hero__stats {
display: flex;
flex-wrap: wrap;
gap: 24px 34px;
margin-top: 8px;
padding-top: 24px;
border-top: 1px solid rgba(2, 55, 134, 0.06);
}

.qda-hero__stat {
display: grid;
grid-template-columns: 46px auto;
align-items: center;
gap: 12px;
min-width: 148px;
text-align: right;
}

.qda-hero__stat-icon {
width: 46px;
height: 46px;
border-radius: 16px;
display: inline-grid;
place-items: center;
background: linear-gradient(135deg, rgba(246, 161, 35, 0.18), rgba(20, 187, 226, 0.14));
color: var(--primary-dark-navy);
font-size: 20px;
box-shadow: inset 0 0 0 1px rgba(246, 161, 35, 0.24);
}

.qda-hero__stat-content {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}

.qda-hero__stat .number {
font-family: var(--font-english);
font-weight: 800;
font-size: 28px;
color: var(--primary-dark-navy);
line-height: 1.2;
}

.qda-hero__stat .label {
font-size: 14px;
color: var(--text-dark-blue);
opacity: 0.6;
font-weight: 500;
white-space: nowrap;
}

.qda-hero__stat-divider {
width: 1px;
background: rgba(2, 55, 134, 0.08);
align-self: stretch;
}

/* ============================================================
HERO VISUAL — Merged with new character shell
============================================================ */
.qda-hero__visual {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 20px 0;
min-height: 580px;
}

/* New decorative circles */
.qda-hero__circle {
position: absolute;
z-index: 1;
border-radius: 50%;
opacity: 0.85;
}
.qda-hero__circle--one {
width: 72px;
height: 72px;
left: 84px;
bottom: 42px;
background: rgba(246, 161, 35, 0.18);
}
.qda-hero__circle--two {
width: 42px;
height: 42px;
right: 76px;
top: 54px;
background: rgba(20, 187, 226, 0.2);
}

/* Rings (from final design) */
.qda-hero__ring {
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: 0;
}

.qda-hero__ring--1 {
width: 105%;
height: 105%;
border: 1px solid rgba(2, 55, 134, 0.04);
animation: qda-spin-slow 35s linear infinite;
}

.qda-hero__ring--2 {
width: 115%;
height: 115%;
border: 1px solid rgba(20, 187, 226, 0.05);
animation: qda-spin-slow 45s linear infinite reverse;
}

.qda-hero__ring--3 {
width: 92%;
height: 92%;
border: 1px dashed rgba(246, 161, 35, 0.06);
animation: qda-spin-slow 25s linear infinite;
}

@keyframes qda-spin-slow {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

/* New Image Shell */
.qda-hero__image-shell {
position: relative;
width: min(100%, 520px);
aspect-ratio: 1 / 1.08;
display: grid;
place-items: center center;
margin: 0;
z-index: 2;
}

.qda-hero__image-shell::before {
content: "";
position: absolute;
width: 88%;
aspect-ratio: 1;
left: 50%;
bottom: 50%;
transform: translate(-50%, 50%);
border-radius: 50%;
background: radial-gradient(
circle,
rgba(20, 187, 226, 0.26) 0%,
rgba(20, 159, 203, 0.12) 48%,
transparent 72%
);
box-shadow:
inset 0 0 0 1px rgba(20, 159, 203, 0.16),
0 28px 80px rgba(20, 159, 203, 0.18);
}

.qda-hero__image-shell::after {
content: "";
position: absolute;
width: 72%;
height: 30px;
left: 50%;
bottom: 18px;
transform: translateX(-50%);
border-radius: 50%;
background: rgba(4, 29, 83, 0.1);
filter: blur(10px);
}

.qda-hero__character {
position: relative;
z-index: 2;
width: min(94%, 460px);
height: auto;
object-fit: contain;
filter: drop-shadow(0 28px 34px rgba(4, 29, 83, 0.16));
}

.qda-hero__image-shell.is-fallback {
min-height: 420px;
border-radius: 32px;
border: 1px dashed rgba(2, 55, 134, 0.28);
background: rgba(255, 255, 255, 0.68);
}

.qda-hero__image-shell.is-fallback::before {
content: "صورة الشخصية التعليمية غير متاحة";
width: auto;
height: auto;
aspect-ratio: auto;
inset: 50% auto auto 50%;
transform: translate(-50%, -50%);
padding: 18px 24px;
border-radius: 20px;
background: rgba(20, 159, 203, 0.1);
color: var(--primary-dark-navy);
font-weight: 800;
text-align: center;
}

.qda-hero__character.is-hidden {
display: none;
}

/* ============================================================
FLOATING CARDS (from final design, gold theme)
============================================================ */
.qda-floating-card {
position: absolute;
background: var(--accent-gold);
border-radius: var(--radius-full);
padding: 10px 20px 10px 18px;
box-shadow: 0 12px 32px rgba(246, 161, 35, 0.25);
display: flex;
align-items: center;
gap: 10px;
z-index: 3;
font-family: var(--font-arabic);
font-weight: 700;
font-size: 14px;
color: var(--primary-dark-navy);
white-space: nowrap;
animation: qda-float 4s ease-in-out infinite;
border: none;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}

.qda-floating-card .icon-circle {
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 13px;
font-weight: 800;
background: rgba(255, 255, 255, 0.3);
color: var(--primary-dark-navy);
}

/* Positions */
.qda-floating-card--1 {
top: 4%;
right: 7%;
animation-delay: 0s;
}

.qda-floating-card--2 {
bottom: 25%;
right: 0%;
animation-delay: 1.2s;
}

.qda-floating-card--3 {
top: 40%;
left: 0%;
animation-delay: 2.4s;
}

/* Floating animation */
@keyframes qda-float {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(-8px);
}
}

@media (prefers-reduced-motion: reduce) {
.qda-floating-card {
animation: none;
}
.qda-hero__ring--1,
.qda-hero__ring--2,
.qda-hero__ring--3 {
animation: none;
}
.qda-hero__title .highlight-cyan {
animation: none;
text-shadow: none;
}
}

/* ============================================================
SECTION COMMON
============================================================ */
.section {
padding: 80px 0;
}
.section-light {
background: var(--bg-light);
}
.section-white {
background: var(--bg-white);
}
.section-dark {
background: var(--primary-dark-navy);
color: var(--text-white);
}
.section-dark .section-subtitle {
color: rgba(255, 255, 255, 0.7);
}

.section-header {
text-align: center;
margin-bottom: 50px;
}
.section-header .section-tag {
display: inline-block;
font-size: 14px;
font-weight: 700;
color: var(--accent-cyan);
letter-spacing: 0.5px;
margin-bottom: 8px;
}
.section-header .section-title {
font-family: var(--font-arabic);
font-weight: 800;
font-size: 40px;
line-height: 1.25;
color: var(--text-dark-blue);
}
.section-dark .section-header .section-title {
color: var(--text-white);
}
.section-header .section-subtitle {
font-size: 18px;

opacity: 0.75;
max-width: 640px;
margin-inline: auto;
margin-top: 8px;
}

/* ============================================================
COURSES SECTION
============================================================ */
.courses-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}

.course-card {
background: var(--bg-white);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-card);
overflow: hidden;
transition:
transform 0.28s ease,
box-shadow 0.28s ease,
border-color 0.28s ease;
display: flex;
flex-direction: column;
border: 1px solid rgba(2, 55, 134, 0.04);
will-change: transform;
}
.course-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-card-hover);
border-color: rgba(246, 161, 35, 0.15);
}

.course-card .card-image {
aspect-ratio: 16 / 9;
background: var(--hero-gradient);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-white);

position: relative;
overflow: hidden;
}
.course-card .card-image .img-placeholder {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.7;
transition: transform 0.35s ease, opacity 0.35s ease;
}
.course-card:hover .card-image .img-placeholder {
transform: scale(1.04);
opacity: 0.82;
}
.course-card .card-image .icon-overlay {
position: absolute;
font-size: 52px;
opacity: 0.3;
}

.course-card .card-body {
padding: 24px 26px 28px;
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.course-card .card-body .course-tag {
display: inline-flex;
align-self: flex-start;
font-size: 12px;
font-weight: 700;
padding: 3px 14px;
border-radius: var(--radius-full);
}
.course-card .card-body .course-tag.gold {
background: rgba(246, 161, 35, 0.12);
color: #694000;
}
.course-card .card-body .course-tag.cyan {
background: rgba(20, 187, 226, 0.12);
color: #004d65;
}

.course-card .card-body h3 {
font-family: var(--font-arabic);
font-weight: 700;
font-size: 22px;
color: var(--text-dark-blue);
}
.course-card .card-body p {
font-size: 16px;
color: var(--text-dark-blue);
opacity: 0.7;
line-height: 1.7;
flex: 1;
}
.course-card .card-body .btn-card {
margin-top: 12px;
background: var(--accent-cyan);
color: var(--text-white);
border: none;
padding: 12px 24px;
border-radius: var(--radius-full);
font-family: var(--font-arabic);
font-weight: 700;
font-size: 16px;
cursor: pointer;
transition: var(--transition);
width: fit-content;
align-self: flex-start;
}
.course-card .card-body .btn-card:hover {
background: var(--accent-blue);
transform: scale(1.03);
}

/* ============================================================
WHY CHOOSE US
============================================================ */
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 28px;
}

.feature-card {
background: var(--bg-white);
border-radius: var(--radius-lg);
padding: 32px 28px;
box-shadow: var(--shadow-soft);
text-align: center;
transition: var(--transition);
border: 1px solid rgba(2, 55, 134, 0.04);
}
.feature-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-card-hover);
border-color: rgba(246, 161, 35, 0.12);
}
.feature-card .icon-circle {
width: 68px;
height: 68px;
border-radius: 50%;
background: rgba(2, 55, 134, 0.06);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
color: var(--primary-navy);
font-size: 30px;
transition: var(--transition);
}
.feature-card:hover .icon-circle {
background: var(--primary-navy);
color: var(--text-white);
}
.feature-card h4 {
font-family: var(--font-arabic);
font-weight: 700;
font-size: 20px;
color: var(--text-dark-blue);
margin-bottom: 6px;
}
.feature-card p {
font-size: 16px;
color: var(--text-dark-blue);
opacity: 0.7;
line-height: 1.7;
}

/* ============================================================
STUDENTS / SOCIAL PROOF (Carousel)
============================================================ */
.students-section {
background: var(--primary-dark-navy);
color: var(--text-white);
padding: 80px 0 100px;
}
.students-section .section-header .section-title {
color: var(--text-white);
}
.students-section .section-header .section-subtitle {
color: rgba(240, 240, 240, 0.856);
}

.students-carousel {
position: relative;
overflow: hidden;
padding: 0 10px;
direction: ltr;
}

.students-track {
display: flex;
gap: 24px;
transition: transform 0.5s ease;
will-change: transform;
}

.student-card {
flex: 0 0 calc(33.333% - 16px);
min-width: 260px;
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-xl);
overflow: hidden;
transition: var(--transition);
direction: rtl;
}
.student-card:hover {
transform: translateY(-6px);
border-color: rgba(20, 187, 226, 0.25);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.student-card .video-thumb {
aspect-ratio: 16 / 9;
background: rgba(255, 255, 255, 0.04);
position: relative;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
overflow: hidden;
}
.student-card .video-thumb .thumb-placeholder {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.4;
background: linear-gradient(135deg, #023786, #041d53);
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
}
.student-card .video-thumb .play-btn {
position: absolute;
width: 60px;
height: 60px;
border-radius: 50%;
background: rgba(20, 187, 226, 0.85);
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
color: var(--text-white);
}
.student-card .video-thumb .play-btn:hover {
transform: scale(1.12);
background: var(--accent-light-cyan);
}
.student-card .video-thumb .play-btn svg {
width: 28px;
height: 28px;
fill: currentColor;
}

.student-card .student-info {
padding: 18px 22px 24px;
}
.student-card .student-info h4 {
font-family: var(--font-arabic);
font-weight: 700;
font-size: 20px;
color: var(--accent-light-cyan);
}
.student-card .student-info p {
font-size: 15px;
color: rgba(255, 255, 255, 0.65);
margin-top: 2px;
}

.carousel-controls {
display: flex;
justify-content: center;
gap: 16px;
margin-top: 32px;
}
.carousel-controls button {
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
background: var(--accent-cyan);
color: var(--text-white);
font-size: 24px;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
}
.carousel-controls button:hover {
background: var(--accent-light-cyan);
transform: scale(1.06);
}
.carousel-controls button:disabled {
opacity: 0.3;
cursor: not-allowed;
transform: none;
}

.carousel-dots {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 18px;
}
.carousel-dots span {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
cursor: pointer;
transition: var(--transition);
}
.carousel-dots span.active {
background: var(--accent-gold);
transform: scale(1.2);
}

/* ============================================================
TESTIMONIALS
============================================================ */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}

.testimonial-card {
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius-xl);
padding: 28px 26px;
transition: var(--transition);
display: flex;
flex-direction: column;
gap: 12px;
}
.testimonial-card:hover {
transform: translateY(-4px);
border-color: rgba(20, 187, 226, 0.15);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}
.testimonial-card .t-header {
display: flex;
align-items: center;
gap: 14px;
}
.testimonial-card .t-header .avatar {
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--hero-gradient);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 20px;
color: var(--text-white);
flex-shrink: 0;
}
.testimonial-card .t-header .t-name {
font-family: var(--font-arabic);
font-weight: 700;
font-size: 18px;
color: var(--text-white);
}
.testimonial-card .t-header .t-stars {
color: var(--accent-gold);
font-size: 16px;
letter-spacing: 2px;
}
.testimonial-card .t-body {
font-size: 16px;
line-height: 1.8;
color: rgba(255, 255, 255, 0.75);
}
.testimonial-card .t-tag {
align-self: flex-start;
font-size: 12px;
font-weight: 700;
padding: 2px 14px;
border-radius: var(--radius-full);
background: rgba(20, 187, 226, 0.12);
color: var(--accent-light-cyan);
}

/* ============================================================
INSTRUCTOR
============================================================ */
.instructor-section {
background: var(--primary-dark-navy);
color: var(--text-white);
padding: 80px 0;
}

.instructor-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}

.instructor-image {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.instructor-image .img-wrapper {
width: 100%;
max-width: 500px;
min-height: 560px;
aspect-ratio: 5 / 6;
border-radius: var(--radius-xl);
overflow: hidden;
background:
radial-gradient(circle at 50% 16%, rgba(20, 187, 226, 0.24), transparent 34%),
linear-gradient(180deg, #eef7ff 0%, #d7ebff 48%, #023786 100%);
position: relative;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
display: flex;
align-items: flex-end;
justify-content: center;
padding: 26px 22px 0;
}
.instructor-image .img-wrapper .placeholder-img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center bottom;
opacity: 1;
position: relative;
z-index: 2;
filter: drop-shadow(0 24px 34px rgba(4, 29, 83, 0.22));
}
.instructor-image .img-wrapper .glow-ring {
position: absolute;
top: 8%;
right: 50%;
width: 76%;
height: 54%;
border-radius: 50%;
transform: translateX(50%);
background: radial-gradient(
circle,
rgba(246, 161, 35, 0.24) 0%,
rgba(20, 187, 226, 0.12) 42%,
transparent 72%
);
pointer-events: none;
z-index: 1;
}

.instructor-content .pre-title {
font-size: 16px;
color: var(--accent-light-cyan);
font-weight: 500;
margin-bottom: 4px;
}
.instructor-content h2 {
font-family: var(--font-arabic);
font-weight: 800;
font-size: 40px;
color: var(--text-white);
margin-bottom: 12px;
}
.instructor-content p {
font-size: 18px;
line-height: 1.85;
color: rgba(255, 255, 255, 0.75);
max-width: 540px;
}
.instructor-content .instructor-meta {
display: flex;
flex-wrap: wrap;
gap: 20px 40px;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.instructor-content .instructor-meta .meta-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
color: rgba(255, 255, 255, 0.7);
}
.instructor-content .instructor-meta .meta-item svg {
color: var(--accent-gold);
width: 20px;
height: 20px;
stroke-width: 2;
}
.instructor-content .btn-instructor {
margin-top: 28px;
}

/* ============================================================
LEARNING PATH — TIMELINE
============================================================ */
.path-section {
background: var(--bg-light);
padding: 80px 0;
}

.path-timeline {
position: relative;
display: flex;
flex-direction: column;
gap: 0;
padding: 20px 0 10px;
max-width: 900px;
margin: 0 auto;
}

.path-timeline::before {
content: "";
position: absolute;
top: 40px;
bottom: 40px;
right: 32px;
width: 3px;
background: linear-gradient(
to bottom,
var(--accent-cyan),
var(--accent-gold)
);
opacity: 0.2;
border-radius: 2px;
}

.path-step {
position: relative;
padding-right: 80px;
padding-bottom: 40px;
display: flex;
flex-direction: column;
gap: 4px;
}
.path-step:last-child {
padding-bottom: 0;
}

.path-step .step-marker {
position: absolute;
right: 12px;
top: 0;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--accent-gold);
color: var(--primary-dark-navy);
font-family: var(--font-english);
font-weight: 900;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 20px rgba(246, 161, 35, 0.25);
z-index: 2;
transition: var(--transition);
flex-shrink: 0;
}
.path-step:hover .step-marker {
transform: scale(1.08);
box-shadow: 0 8px 30px rgba(246, 161, 35, 0.35);
}

.path-step .step-content {
background: var(--bg-white);
border-radius: var(--radius-lg);
padding: 20px 28px;
box-shadow: var(--shadow-soft);
border: 1px solid rgba(2, 55, 134, 0.04);
transition: var(--transition);
}
.path-step:hover .step-content {
box-shadow: var(--shadow-card-hover);
transform: translateX(-4px);
border-color: rgba(246, 161, 35, 0.1);
}

.path-step .step-content h4 {
font-family: var(--font-arabic);
font-weight: 700;
font-size: 20px;
color: var(--text-dark-blue);
margin-bottom: 2px;
}
.path-step .step-content p {
font-size: 16px;
color: var(--text-dark-blue);
opacity: 0.7;
line-height: 1.7;
margin: 0;
}

.path-step .step-connector {
position: absolute;
right: 33px;
top: 22px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--accent-cyan);
border: 2px solid var(--bg-light);
box-shadow: 0 0 0 3px rgba(20, 187, 226, 0.15);
z-index: 1;
}

/* ============================================================
CONTACT CTA
============================================================ */
.contact-cta {
background: var(--hero-gradient);
padding: 80px 0;
text-align: center;
position: relative;
overflow: hidden;
}
.contact-cta::before {
content: "";
position: absolute;
top: -30%;
left: -10%;
width: 60%;
height: 160%;
background: radial-gradient(
circle at 20% 50%,
rgba(20, 187, 226, 0.06) 0%,
transparent 70%
);
pointer-events: none;
}
.contact-cta::after {
content: "";
position: absolute;
bottom: -20%;
right: -5%;
width: 50%;
height: 120%;
background: radial-gradient(
circle at 80% 80%,
rgba(246, 161, 35, 0.05) 0%,
transparent 70%
);
pointer-events: none;
}

.contact-cta .container {
position: relative;
z-index: 2;
}
.contact-cta h2 {
font-family: var(--font-arabic);
font-weight: 800;
font-size: 38px;
color: var(--text-white);
max-width: 700px;
margin: 0 auto 12px;
}
.contact-cta p {
font-size: 20px;
color: rgba(223, 223, 223, 0.75);
max-width: 570px;
margin: 0 auto 32px;
}

/* ============================================================
FOOTER
============================================================ */
.footer {
background: var(--primary-dark-navy);
color: var(--text-white);
padding: 60px 0 20px;
border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 40px;
}

.footer-brand .logo-wrapper {

display: flex;
align-items: center;
justify-content: right;
margin-bottom: 10px;
}
.footer-brand .logo-wrapper img{
    margin: 5px;
}
.footer-brand h3 {
font-family: var(--font-arabic);
font-weight: 800;
font-size: 22px;
color: var(--text-white);
}
.footer-brand p {
font-size: 15px;
color: rgba(255, 255, 255, 0.55);
max-width: 300px;
line-height: 1.8;
margin-top: 6px;
}

.footer-links h4 {
font-family: var(--font-arabic);
font-weight: 700;
font-size: 18px;
color: var(--text-white);
margin-bottom: 14px;
}
.footer-links ul {
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-links ul a {
font-size: 15px;
color: rgba(255, 255, 255, 0.55);
transition: var(--transition);
}
.footer-links ul a:hover {
color: var(--accent-gold);
padding-right: 4px;
}

.footer-social {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 4px;
}
.footer-social a {
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.5);
transition: var(--transition);
border: 1px solid rgba(255, 255, 255, 0.04);
}
.footer-social a:hover {
background: var(--accent-gold);
color: var(--primary-dark-navy);
transform: translateY(-3px);
border-color: var(--accent-gold);
}
.footer-social a svg {
width: 20px;
height: 20px;
stroke-width: 2;
}

.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.05);
padding-top: 20px;
text-align: center;
font-size: 14px;
color: rgba(255, 255, 255, 0.3);
}

/* ============================================================
DARK THEME
============================================================ */
body.dark-theme .navbar {
background: rgba(3, 17, 45, 0.88);
box-shadow: var(--shadow-nav);
}
body.dark-theme .navbar.scrolled {
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
}
body.dark-theme .navbar-brand .brand-text .ar,
body.dark-theme .navbar-links a,
body.dark-theme .section-title,
body.dark-theme .course-card .card-body h3,
body.dark-theme .feature-card h4,
body.dark-theme .path-step .step-content h4,
body.dark-theme .faq-item .faq-question {
color: #f3f8ff;
}
body.dark-theme .navbar-links a:hover {
color: var(--accent-light-cyan);
}
body.dark-theme .navbar-actions .btn-login {
color: var(--accent-light-cyan);
border-color: rgba(20, 187, 226, 0.5);
}
body.dark-theme .navbar-actions .btn-login:hover {
background: var(--accent-cyan);
color: var(--text-white);
}
body.dark-theme .mobile-menu {
background: #061737;
box-shadow: -12px 0 32px rgba(0, 0, 0, 0.32);
}
body.dark-theme .mobile-menu a,
body.dark-theme .mobile-menu .brand-text .ar {
color: #f3f8ff;
}
body.dark-theme .section-light,
body.dark-theme .path-section {
background: #081d44;
}
body.dark-theme .section-white,
body.dark-theme .qda-hero {
background: #071a3f;
}
body.dark-theme .section-subtitle,
body.dark-theme .course-card .card-body p,
body.dark-theme .feature-card p,
body.dark-theme .path-step .step-content p,
body.dark-theme .faq-item .faq-answer,
body.dark-theme .qda-hero__desc {
color: rgba(234, 243, 255, 0.72);
opacity: 1;
}
body.dark-theme .course-card,
body.dark-theme .feature-card,
body.dark-theme .path-step .step-content,
body.dark-theme .faq-item {
background: rgba(255, 255, 255, 0.055);
border-color: rgba(255, 255, 255, 0.1);
box-shadow: var(--shadow-card);
}
body.dark-theme .course-card:hover,
body.dark-theme .feature-card:hover,
body.dark-theme .faq-item:hover {
border-color: rgba(246, 161, 35, 0.24);
box-shadow: var(--shadow-card-hover);
}
body.dark-theme .course-card .card-image {
background: linear-gradient(135deg, #023786, #03112d);
}
body.dark-theme .feature-card .icon-circle {
background: rgba(20, 187, 226, 0.12);
color: var(--accent-light-cyan);
}
body.dark-theme .qda-hero__stats {
border-top-color: rgba(255, 255, 255, 0.1);
}
body.dark-theme .qda-hero__stat .number {
color: var(--text-white);
}
body.dark-theme .qda-hero__stat .label {
color: rgba(234, 243, 255, 0.68);
opacity: 1;
}
body.dark-theme .qda-hero__stat-divider {
background: rgba(255, 255, 255, 0.12);
}
body.dark-theme .qda-hero__stat-icon {
background: linear-gradient(135deg, rgba(246, 161, 35, 0.16), rgba(20, 187, 226, 0.18));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
color: var(--accent-gold);
}
body.dark-theme .qda-hero__stat {
background: rgba(255, 255, 255, 0.065);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
body.dark-theme .path-timeline::before {
background: rgba(20, 187, 226, 0.28);
}
body.dark-theme .back-to-top {
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
}
body.dark-theme .qda-hero__title {
color: var(--text-white);
}
body.dark-theme .qda-btn--secondary {
color: var(--text-white);
border-color: rgba(255, 255, 255, 0.62);
background: rgba(255, 255, 255, 0.04);
}
body.dark-theme .qda-btn--secondary:hover {
background: var(--accent-cyan);
border-color: var(--accent-cyan);
color: var(--text-white);
box-shadow: 0 14px 32px rgba(20, 187, 226, 0.22);
}
body.dark-theme .course-card .card-body .course-tag.gold {
background: rgba(246, 161, 35, 0.2);
color: #fff2d9;
}
body.dark-theme .course-card .card-body .course-tag.cyan {
background: rgba(20, 187, 226, 0.18);
color: #dff8ff;
}

/* ============================================================
BACK TO TOP
============================================================ */
.back-to-top {
position: fixed;
bottom: 30px;
left: 30px;
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--accent-gold);
color: var(--primary-dark-navy);
border: none;
cursor: pointer;
box-shadow: 0 8px 24px rgba(246, 161, 35, 0.3);
transition: var(--transition);
opacity: 0;
visibility: hidden;
transform: translateY(20px);
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(246, 161, 35, 0.4);
}

/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
.qda-hero__inner {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}
.qda-hero__content {
align-items: center;
order: 2;
}
.qda-hero__desc {
max-width: 100%;
}
.qda-hero__actions {
justify-content: center;
}
.qda-hero__stats {
justify-content: center;
}
.qda-hero__visual {
order: 1;
}
.qda-hero__image-shell {
max-width: 400px;
}
.qda-hero__title {
font-size: 42px;
}

.instructor-grid {
grid-template-columns: 1fr;
text-align: center;
}
.instructor-image .img-wrapper {
max-width: 430px;
min-height: 500px;
}
.instructor-content p {
max-width: 100%;
}
.instructor-content .instructor-meta {
justify-content: center;
}
.instructor-content .btn-instructor {
justify-content: center;
display: flex;
}

.testimonials-grid {
grid-template-columns: 1fr 1fr;
}

.footer-grid {
grid-template-columns: 1fr 1fr;
}

.student-card {
flex: 0 0 calc(50% - 12px);
}

.qda-floating-card--1 {
top: 2%;
right: -2%;
}
.qda-floating-card--2 {
bottom: 8%;
right: -4%;
}
.qda-floating-card--3 {
top: 42%;
left: -4%;
}
.qda-hero__circle--one {
left: 34px;
bottom: 22px;
}
.qda-hero__circle--two {
right: 34px;
top: 24px;
}
}

@media (max-width: 768px) {
.navbar-links {
display: none;
}
.navbar-actions .btn-login {
display: none;
}
.hamburger {
display: flex;
}
.navbar .container {
height: 64px;
}
.navbar-brand .brand-text .ar {
font-size: 17px;
}
.navbar-brand .brand-text .en {
font-size: 10px;
}
.navbar-brand .logo-wrapper {
width: 38px;
height: 38px;

}

.qda-hero {
min-height: auto;
padding: 30px 0 50px;
}
.qda-hero__inner {
gap: 30px;
}
.qda-hero__title {
font-size: 32px;
}
.qda-hero__desc {
font-size: 17px;
}
.qda-hero__badge {
font-size: 12px;
padding: 4px 14px 4px 16px;
}
.qda-btn {
font-size: 15px;
padding: 12px 28px;
width: 100%;
justify-content: center;
}
.qda-hero__actions {
flex-direction: column;
width: 100%;
max-width: 380px;
}
.qda-hero__stats {
width: 100%;
max-width: 560px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
justify-content: center;
padding-top: 20px;
}
.qda-hero__stat {
grid-template-columns: 40px auto;
gap: 10px;
min-width: 0;
padding: 10px;
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.52);
box-shadow: 0 10px 24px rgba(4, 29, 83, 0.06);
}
.qda-hero__stat-icon {
width: 40px;
height: 40px;
border-radius: 14px;
font-size: 18px;
}
.qda-hero__stat .number {
font-size: 22px;
}
.qda-hero__stat .label {
font-size: 13px;
white-space: normal;
line-height: 1.35;
}
.qda-hero__stat-divider {
display: none;
}
.qda-hero__image-shell {
max-width: 300px;
}
.qda-hero__visual {
min-height: 480px;
}

.qda-floating-card {
font-size: 11px;
padding: 6px 14px 6px 12px;
gap: 6px;
}
.qda-floating-card .icon-circle {
width: 24px;
height: 24px;
font-size: 11px;
}
.qda-floating-card--1 {
top: 0%;
right: 0%;
animation-delay: 0s;
}
.qda-floating-card--2 {
bottom: 4%;
right: -2%;
animation-delay: 1.2s;
}
.qda-floating-card--3 {
top: 40%;
left: -4%;
animation-delay: 2.4s;
}

.qda-hero__bg-deco--circle-1 {
width: 200px;
height: 200px;
top: -60px;
left: -40px;
}
.qda-hero__bg-deco--circle-2 {
width: 150px;
height: 150px;
bottom: -40px;
right: -30px;
}
.qda-hero__bg-deco--circle-3,
.qda-hero__bg-deco--circle-4,
.qda-hero__bg-deco--dots,
.qda-hero__bg-deco--dots-2 {
display: none;
}
.qda-hero__ring--1,
.qda-hero__ring--2,
.qda-hero__ring--3 {
display: none;
}
.qda-hero__circle--one {
left: 18px;
bottom: 14px;
width: 48px;
height: 48px;
}
.qda-hero__circle--two {
right: 18px;
top: 16px;
width: 32px;
height: 32px;
}

.section {
padding: 50px 0;
}
.section-header .section-title {
font-size: 30px;
}

.courses-grid {
grid-template-columns: 1fr;
max-width: 420px;
margin-inline: auto;
}

.features-grid {
grid-template-columns: 1fr 1fr;
}

.testimonials-grid {
grid-template-columns: 1fr;
}

.student-card {
flex: 0 0 calc(100% - 0px);
}

.path-step {
padding-right: 60px;
padding-bottom: 28px;
}
.path-timeline::before {
right: 20px;
top: 30px;
bottom: 30px;
}
.path-step .step-marker {
right: 0px;
width: 36px;
height: 36px;
font-size: 15px;
}
.path-step .step-connector {
right: 19px;
top: 16px;
width: 8px;
height: 8px;
}
.path-step .step-content {
padding: 16px 20px;
}
.path-step .step-content h4 {
font-size: 18px;
}
.path-step .step-content p {
font-size: 15px;
}

.contact-cta h2 {
font-size: 28px;
}
.contact-cta p {
font-size: 17px;
}
.btn-whatsapp {
font-size: 18px;
padding: 14px 28px;
}

.footer-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.footer-brand p {
max-width: 100%;
}

.instructor-content h2 {
font-size: 30px;
}
.instructor-image .img-wrapper {
max-width: 340px;
min-height: 420px;
padding-inline: 16px;
}
.instructor-content p {
font-size: 16px;
}

.mobile-menu {
width: 80%;
padding: 70px 24px 30px;
}
}

@media (max-width: 480px) {
.qda-hero__title {
font-size: 26px;
}
.qda-hero__stats {
max-width: 320px;
grid-template-columns: 1fr;
gap: 10px;
margin-top: 4px;
padding-top: 18px;
}
.qda-hero__stat {
grid-template-columns: 42px 1fr;
padding: 12px 14px;
text-align: right;
}
.qda-hero__stat-icon {
width: 42px;
height: 42px;
font-size: 18px;
}
.qda-hero__stat .number {
font-size: 24px;
}
.qda-hero__stat .label {
font-size: 13px;
}
.qda-hero__desc {
font-size: 15px;
}
.qda-hero__image-shell {
max-width: 240px;
}
.qda-hero__visual {
min-height: 420px;
}
.qda-floating-card {
font-size: 10px;
padding: 4px 12px 4px 10px;
}
.qda-floating-card .icon-circle {
width: 20px;
height: 20px;
font-size: 9px;
}
.qda-floating-card--1 {
top: -2%;
right: -2%;
}
.qda-floating-card--2 {
bottom: 0%;
right: -4%;
}
.qda-floating-card--3 {
top: 38%;
left: -6%;
}
.qda-btn {
font-size: 14px;
padding: 10px 20px;
}
.qda-hero__circle--one {
left: 8px;
bottom: 8px;
width: 36px;
height: 36px;
}
.qda-hero__circle--two {
right: 8px;
top: 10px;
width: 24px;
height: 24px;
}

.features-grid {
grid-template-columns: 1fr;
}
.section-header .section-title {
font-size: 26px;
}
.btn-whatsapp {
font-size: 16px;
padding: 12px 20px;
width: 100%;
justify-content: center;
}
.contact-cta h2 {
font-size: 24px;
}
.back-to-top {
width: 44px;
height: 44px;
bottom: 16px;
left: 16px;
font-size: 20px;
}
.mobile-menu {
width: 100%;
max-width: 100%;
padding: 60px 20px 30px;
}
}

/* ============================================================
UTILITY: Fade-up animations
============================================================ */
.fade-up {
opacity: 0;
transform: translateY(40px);
transition:
opacity 0.7s ease,
transform 0.7s ease;
}
.fade-up.visible {
opacity: 1;
transform: translateY(0);
}

/* ============================================================
Video Modal
============================================================ */
.video-modal {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(8px);
z-index: 2000;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
.video-modal.open {
display: flex;
}
.video-modal .modal-content {
background: var(--bg-white);
border-radius: var(--radius-xl);
max-width: 640px;
width: 100%;
padding: 40px 30px 30px;
text-align: center;
position: relative;
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4);
}
.video-modal .modal-content .close-modal {
position: absolute;
top: 12px;
left: 16px;
font-size: 28px;
background: none;
border: none;
cursor: pointer;
color: var(--text-dark-blue);
opacity: 0.5;
transition: var(--transition);
}
.video-modal .modal-content .close-modal:hover {
opacity: 1;
}
.video-modal .modal-content .modal-icon {
font-size: 64px;
margin-bottom: 12px;
}
.video-modal .modal-content h3 {
font-family: var(--font-arabic);
font-weight: 700;
font-size: 22px;
color: var(--text-dark-blue);
}
.video-modal .modal-content p {
font-size: 16px;
color: var(--text-dark-blue);
opacity: 0.7;
margin-top: 6px;
}
.video-modal .modal-content .btn-close-modal {
margin-top: 20px;
background: var(--primary-navy);
color: var(--text-white);
border: none;
padding: 10px 32px;
border-radius: var(--radius-full);
font-family: var(--font-arabic);
font-weight: 700;
font-size: 16px;
cursor: pointer;
transition: var(--transition);
}
.video-modal .modal-content .btn-close-modal:hover {
background: var(--primary-dark-navy);
}