/* ═══════════════════════════════════════════
   I LEARN EDUCATION — LANDING PAGE STYLES
   Light theme · Premium · Creative
═══════════════════════════════════════════ */

/* ── Variables ──────────────────────────── */
:root {
  --navy:       #1a1a2e;
  --navy-light: #16213e;
  --accent:     #f4a261;
  --accent2:    #e76f51;
  --teal:       #2a9d8f;
  --white:      #ffffff;
  --off-white:  #f8f9fa;
  --light-gray: #f1f3f5;
  --mid-gray:   #6c757d;
  --dark-gray:  #343a40;
  --text:       #212529;
  --text-light: #495057;
  --border:     #dee2e6;
  --radius:     14px;
  --radius-sm:  8px;
  --shadow-sm:  0 2px 12px rgba(0,0,0,.07);
  --shadow:     0 8px 32px rgba(0,0,0,.10);
  --shadow-lg:  0 20px 60px rgba(0,0,0,.15);
  --transition: .3s cubic-bezier(.4,0,.2,1);
  --font:       'Poppins', sans-serif;
}

/* ── Reset ──────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; overflow-x:hidden; max-width:100%; }
body { font-family:var(--font); color:var(--text); background:var(--white); line-height:1.7; overflow-x:hidden; max-width:100%; }
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:var(--font); }
input, select, textarea { font-family:var(--font); }

/* ── Utilities ──────────────────────────── */
.container { max-width:1180px; margin:0 auto; padding:0 24px; }
.section-pad { padding:96px 0; }
.center { text-align:center; }
.mt-2 { margin-top:1.5rem; }
.mt-3 { margin-top:2rem; }

/* ── Section Header ─────────────────────── */
.section-head { margin-bottom:56px; }
.section-head h2 { font-size:clamp(2rem,4vw,2.8rem); font-weight:800; color:var(--navy); line-height:1.2; margin:.5rem 0 1rem; }
.section-head p  { color:var(--text-light); font-size:1.05rem; max-width:580px; margin:0 auto; }
.section-tag {
  display:inline-block;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:.35rem 1rem;
  border-radius:50px;
  margin-bottom:.75rem;
}

/* ── Buttons ────────────────────────────── */
.btn {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.75rem 1.75rem;
  border-radius:50px;
  font-size:.95rem;
  font-weight:600;
  transition:var(--transition);
  cursor:pointer;
  border:2px solid transparent;
}
.btn-primary {
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;
  box-shadow:0 4px 20px rgba(244,162,97,.35);
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(244,162,97,.5); }
.btn-outline {
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.6);
}
.btn-outline:hover { background:rgba(255,255,255,.15); border-color:#fff; }
.btn-whatsapp {
  background:linear-gradient(135deg,#25d366,#128c7e);
  color:#fff;
  box-shadow:0 4px 20px rgba(37,211,102,.3);
}
.btn-whatsapp:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(37,211,102,.45); }
.btn-block { width:100%; justify-content:center; }
.btn-lg { padding:.9rem 2rem; font-size:1rem; }
.btn-course {
  font-size:.82rem;
  font-weight:600;
  color:var(--accent2);
  padding:.4rem 0;
  border:none;
  background:none;
  transition:var(--transition);
  display:inline-flex;
  align-items:center;
  gap:.3rem;
}
.btn-course:hover { gap:.6rem; color:var(--accent); }
.btn-insta {
  background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  color:#fff;
  font-size:.82rem;
  padding:.45rem 1.2rem;
  border-radius:50px;
  font-weight:600;
}
.btn-insta:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(220,39,67,.35); }

/* ═══════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════ */
.navbar {
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  padding:18px 0;
  transition:background var(--transition), padding var(--transition), box-shadow var(--transition);
}
.navbar.scrolled {
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding:12px 0;
  box-shadow:0 2px 24px rgba(0,0,0,.08);
}
.nav-container {
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nav-logo img {
  height:48px;
  width:auto;
  transition:var(--transition);
}
.nav-links {
  display:flex;
  align-items:center;
  gap:8px;
}
.nav-link {
  padding:.5rem .85rem;
  border-radius:8px;
  font-size:.9rem;
  font-weight:500;
  color:var(--navy-light);
  transition:var(--transition);
}
.nav-link:hover, .nav-link.active {
  color:var(--accent);
  background:rgba(244,162,97,.08);
}
.nav-btn {
  padding:.55rem 1.35rem;
  border-radius:50px;
  font-size:.88rem;
  font-weight:600;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;
  transition:var(--transition);
  box-shadow:0 3px 14px rgba(244,162,97,.3);
}
.nav-btn:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(244,162,97,.45); }
.hamburger {
  display:none;
  flex-direction:column;
  gap:5px;
  padding:4px;
}
.hamburger span {
  display:block;
  width:24px; height:2px;
  background:var(--navy);
  border-radius:2px;
  transition:var(--transition);
}
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* ═══════════════════════════════════════════
   CINEMATIC HERO SEQUENCE — WHITE BACKGROUND
═══════════════════════════════════════════ */
.hero-sequence-section {
  position:relative;
  background:#ffffff;
  overflow:hidden;
}

.canvas-container {
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ffffff;
}

#hero-canvas {
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:75%;
  height:100%;
  display:block;
}

/* Subtle vignette for white background — top/bottom fade only */
.canvas-overlay {
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:50%;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0)   12%,
    rgba(255,255,255,0)   82%,
    rgba(255,255,255,0.55) 100%
  );
  pointer-events:none;
  z-index:2;
}

/* Text overlay wrapper */
.hero-text-overlay {
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:6;
}

/* Each text block (heading + sub) */
.hero-seq-block {
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
  opacity:0;
  text-align:center;
  padding:0 24px;
  width:100%;
}

/* Big cinematic heading */
.hero-seq-text {
  font-size:clamp(2.4rem, 6.5vw, 6rem);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.06em;
  line-height:1.05;
  background:linear-gradient(135deg, var(--navy) 0%, var(--accent) 55%, var(--accent2) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,0.06));
  margin:0;
}

/* Subtitle below heading */
.hero-seq-sub {
  font-size:clamp(.8rem, 1.6vw, 1.05rem);
  font-weight:500;
  color:var(--mid-gray);
  letter-spacing:.06em;
  text-transform:uppercase;
  -webkit-text-fill-color:initial;
}

/* ── Scroll Indicator ── */
.hero-scroll-indicator {
  position:absolute;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  z-index:8;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  transition:opacity .5s;
}
.hero-scroll-indicator span {
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mid-gray);
}
.scroll-dot-track {
  width:2px;
  height:44px;
  background:var(--border);
  border-radius:2px;
  overflow:hidden;
  position:relative;
}
.scroll-dot {
  position:absolute;
  top:-100%;
  left:0;
  width:2px;
  height:40%;
  background:linear-gradient(to bottom, var(--accent), var(--accent2));
  border-radius:2px;
  animation:scroll-dot-anim 1.6s ease-in-out infinite;
}
@keyframes scroll-dot-anim {
  0%   { top:-40%; }
  100% { top:140%; }
}

/* ── Hero Progress Bar (thin line at bottom of hero) ── */
.hero-progress-bar {
  position:absolute;
  bottom:0; left:0; right:0;
  height:3px;
  background:var(--border);
  z-index:8;
}
.hero-progress-fill {
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  transition:width .1s linear;
  border-radius:0 2px 2px 0;
}

/* Floating Enquiry Card */
.hero-enquiry-float {
  position:absolute;
  left:25%; top:50%;
  transform:translate(-50%, -50%);
  z-index:10;
  width:340px;
}
.glass-card {
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow-lg);
}
.enquiry-header {
  display:flex;
  align-items:center;
  gap:.85rem;
  margin-bottom:1.4rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--border);
}
.enquiry-header i.fa-whatsapp {
  font-size:2rem;
  color:#25d366;
  background:rgba(37,211,102,.1);
  width:48px; height:48px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.enquiry-header h3 { font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:.1rem; }
.enquiry-header p  { font-size:.78rem; color:var(--mid-gray); }

/* Enquiry Form */
.enquiry-form .form-row,
.enquiry-form-full .form-row { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.form-group { margin-bottom:.85rem; }
.form-group label { display:block; font-size:.82rem; font-weight:600; color:var(--dark-gray); margin-bottom:.35rem; }
.form-group input,
.form-group select,
.form-group textarea {
  width:100%;
  padding:.65rem 1rem;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:.88rem;
  color:var(--text);
  background:var(--white);
  transition:var(--transition);
  outline:none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(244,162,97,.15);
}
.form-group select { appearance:none; cursor:pointer; }
.form-group textarea { resize:vertical; }

/* ═══════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════ */
.about-section { background:var(--white); overflow:hidden; }
.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
  margin-bottom:72px;
}
.about-text h3 {
  font-size:1.75rem;
  font-weight:700;
  color:var(--navy);
  line-height:1.3;
  margin-bottom:1rem;
}
.about-text p { color:var(--text-light); margin-bottom:1.25rem; }
.check-list { margin-bottom:1.25rem; }
.check-list li {
  display:flex;
  align-items:center;
  gap:.65rem;
  color:var(--text-light);
  margin-bottom:.6rem;
  font-size:.95rem;
}
.check-list li i { color:var(--teal); font-size:1rem; flex-shrink:0; }

.stats-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.stat-card {
  background:var(--off-white);
  border-radius:var(--radius);
  padding:28px 24px;
  text-align:center;
  border:1px solid var(--border);
  transition:var(--transition);
}
.stat-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.stat-card.accent { background:linear-gradient(135deg,var(--accent),var(--accent2)); border-color:transparent; }
.stat-card.accent .stat-num,
.stat-card.accent .stat-plus,
.stat-card.accent p { color:#fff !important; }
.stat-num { font-size:2.6rem; font-weight:800; color:var(--navy); line-height:1; }
.stat-plus { font-size:1.8rem; font-weight:800; color:var(--accent); }
.stat-card p { font-size:.85rem; font-weight:500; color:var(--text-light); margin-top:.4rem; }

.features-row {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.feature-badge {
  background:var(--off-white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px 20px;
  text-align:center;
  transition:var(--transition);
}
.feature-badge:hover {
  border-color:var(--accent);
  box-shadow:0 8px 32px rgba(244,162,97,.15);
  transform:translateY(-4px);
}
.badge-icon {
  width:56px; height:56px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 1rem;
  font-size:1.4rem;
  color:#fff;
  box-shadow:0 4px 16px rgba(244,162,97,.3);
}
.feature-badge h4 { font-size:.95rem; font-weight:700; color:var(--navy); margin-bottom:.35rem; }
.feature-badge p  { font-size:.82rem; color:var(--text-light); }

/* ═══════════════════════════════════════════
   CREATIVE SHOWCASE
═══════════════════════════════════════════ */
.creative-section {
  background:var(--navy);
  padding:80px 0;
  position:relative;
  overflow:hidden;
}
.creative-bg-anim {
  position:absolute;
  bottom:0; left:0; right:0;
  opacity:.25;
  pointer-events:none;
}
.creative-path-svg { width:100%; height:auto; display:block; }
.creative-inner {
  position:relative;
  z-index:2;
  text-align:center;
}
.creative-tagline h2 {
  font-size:clamp(2.2rem,5vw,3.5rem);
  font-weight:900;
  color:#fff;
  margin-bottom:.75rem;
}
.creative-tagline h2 span { color:var(--accent); }
.creative-tagline p { color:rgba(255,255,255,.6); font-size:1.05rem; margin-bottom:2.5rem; }
.tools-orbit {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
}
.tool-pill {
  display:flex;
  align-items:center;
  gap:.6rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.85);
  padding:.6rem 1.35rem;
  border-radius:50px;
  font-size:.88rem;
  font-weight:500;
  transition:var(--transition);
  cursor:default;
}
.tool-pill:hover {
  background:rgba(244,162,97,.15);
  border-color:var(--accent);
  color:var(--accent);
  transform:translateY(-3px);
}
.tool-pill i { color:var(--accent); font-size:.9rem; }

/* Particles */
.particles-wrapper {
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:1;
}
.particle {
  position:absolute;
  border-radius:50%;
  opacity:.25;
  animation:float-up linear infinite;
}
@keyframes float-up {
  0%   { transform:translateY(0) rotate(0deg); opacity:.25; }
  100% { transform:translateY(-100vh) rotate(360deg); opacity:0; }
}

/* ═══════════════════════════════════════════
   COURSES — Premium Redesign
═══════════════════════════════════════════ */
.courses-section { background:var(--off-white); }

/* ── Filter Tabs ── */
.course-filters {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-bottom:48px;
}
.filter-btn {
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.55rem 1.15rem;
  border-radius:50px;
  border:1.5px solid var(--border);
  background:var(--white);
  color:var(--text-light);
  font-size:.85rem;
  font-weight:500;
  cursor:pointer;
  transition:var(--transition);
  white-space:nowrap;
}
.filter-btn i { font-size:.8rem; }
.filter-btn .filter-count {
  background:var(--light-gray);
  color:var(--mid-gray);
  font-size:.7rem;
  font-weight:700;
  padding:.1rem .45rem;
  border-radius:50px;
}
.filter-btn:hover {
  border-color:var(--accent);
  color:var(--accent);
}
.filter-btn.active {
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-color:transparent;
  color:#fff;
  box-shadow:0 4px 14px rgba(244,162,97,.35);
}
.filter-btn.active .filter-count {
  background:rgba(255,255,255,.25);
  color:#fff;
}

/* ── Courses Grid ── */
.courses-grid2 {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

/* Course card v2 */
.cc2 {
  background:var(--white);
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  display:flex;
  flex-direction:column;
  transition:var(--transition);
  position:relative;
}
.cc2:hover {
  transform:translateY(-7px);
  box-shadow:0 20px 48px rgba(0,0,0,.12);
  border-color:transparent;
}
.cc2.hidden { display:none; }

/* Header band */
.cc2-head {
  background:linear-gradient(135deg, var(--hclr), color-mix(in srgb, var(--hclr) 70%, black));
  padding:22px 16px 18px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  min-height:90px;
}
/* Watermark code */
.cc2-code {
  position:absolute;
  top:50%; left:12px;
  transform:translateY(-50%);
  font-size:2.4rem;
  font-weight:900;
  color:rgba(255,255,255,.12);
  letter-spacing:-.02em;
  line-height:1;
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
}
/* Icon circle */
.cc2-ico {
  width:44px; height:44px;
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(6px);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  flex-shrink:0;
  transition:var(--transition);
  z-index:1;
}
.cc2:hover .cc2-ico {
  background:rgba(255,255,255,.3);
  transform:scale(1.08) rotate(-4deg);
}

/* Body */
.cc2-body {
  padding:18px 18px 12px;
  flex:1;
}
.cc2-level {
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.22rem .75rem;
  border-radius:50px;
  display:inline-block;
  margin-bottom:.6rem;
}
.level-master   { background:#f3e8ff; color:#7c3aed; }
.level-adv      { background:#e0f2fe; color:#0369a1; }
.level-diploma  { background:#dcfce7; color:#16a34a; }
.level-cert     { background:#fff7ed; color:#c2410c; }
.level-expert   { background:#fef9c3; color:#a16207; }

.cc2-body h3 {
  font-size:.95rem;
  font-weight:700;
  color:var(--navy);
  line-height:1.35;
  margin-bottom:.5rem;
}
.cc2-body p {
  font-size:.8rem;
  color:var(--text-light);
  line-height:1.6;
}

/* Footer */
.cc2-foot {
  padding:12px 18px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--border);
  gap:.75rem;
}
.cc2-more {
  font-size:.8rem;
  font-weight:600;
  color:var(--hclr, var(--accent2));
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  transition:var(--transition);
}
.cc2-more i { font-size:.7rem; transition:transform var(--transition); }
.cc2-more:hover { gap:.55rem; }
.cc2-more:hover i { transform:translateX(3px); }

.cc2-wa {
  width:34px; height:34px;
  background:linear-gradient(135deg,#25d366,#128c7e);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:1rem;
  transition:var(--transition);
  flex-shrink:0;
}
.cc2-wa:hover { transform:scale(1.12); box-shadow:0 4px 14px rgba(37,211,102,.4); }

.no-results {
  text-align:center;
  color:var(--mid-gray);
  padding:48px 0;
  font-size:1rem;
}

/* ═══════════════════════════════════════════
   DEMO VIDEOS
═══════════════════════════════════════════ */
.videos-section { background:var(--white); }
.videos-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}
.video-card {
  background:var(--off-white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:var(--transition);
}
.video-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.yt-embed-wrap {
  position:relative;
  padding-bottom:56.25%;
  height:0;
  overflow:hidden;
}
.yt-embed-wrap iframe {
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  border:0;
}
.video-info { padding:20px 24px; }
.video-tag {
  font-size:.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--accent2);
  background:rgba(231,111,81,.08);
  padding:.2rem .75rem;
  border-radius:50px;
  display:inline-block;
  margin-bottom:.6rem;
}
.video-info h4 { font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:.3rem; }
.video-info p  { font-size:.85rem; color:var(--text-light); }

/* ═══════════════════════════════════════════
   INSTAGRAM REELS — Manual Cards
═══════════════════════════════════════════ */
.reels-section {
  background:linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  position:relative;
  overflow:hidden;
}
.reels-section::before {
  content:'';
  position:absolute;
  inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none;
}
.reels-section .section-tag {
  background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  border-color:rgba(240,148,51,.3);
}
.reels-section .section-head h2 { color:#fff; }
.reels-section .section-head p  { color:rgba(255,255,255,.65); }

/* Grid */
.reels-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-bottom:2.5rem;
}

/* Individual reel card */
.reel-card {
  position:relative;
  aspect-ratio:9/16;
  border-radius:16px;
  overflow:hidden;
  display:block;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 8px 32px rgba(0,0,0,.45);
  transition:transform .35s cubic-bezier(.25,.8,.25,1), box-shadow .35s ease;
}
.reel-card:hover {
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 20px 50px rgba(0,0,0,.6);
}

/* Gradient backgrounds — unique per card */
.reel-bg {
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transition:transform .6s ease;
}
.reel-card:hover .reel-bg { transform:scale(1.06); }

.reel-bg-1 {
  background:linear-gradient(160deg,#6a0572 0%,#f4a261 60%,#e76f51 100%);
}
.reel-bg-2 {
  background:linear-gradient(160deg,#0f3460 0%,#16213e 40%,#e94560 100%);
}
.reel-bg-3 {
  background:linear-gradient(160deg,#134e5e 0%,#71b280 60%,#2a9d8f 100%);
}
.reel-bg-4 {
  background:linear-gradient(160deg,#373b44 0%,#4286f4 60%,#373b44 100%);
}

/* Noise texture overlay on each card */
.reel-bg::after {
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.18);
}

/* Overlay layout */
.reel-overlay {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:16px;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.30) 0%,
    transparent 35%,
    transparent 55%,
    rgba(0,0,0,.70) 100%
  );
  z-index:1;
}

/* Top — badge */
.reel-top {
  display:flex;
  justify-content:flex-start;
}
.reel-badge {
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  color:#fff;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.04em;
  padding:.3rem .75rem;
  border-radius:50px;
  text-transform:uppercase;
}

/* Center — play button */
.reel-center {
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1;
}
.reel-play-btn {
  width:60px; height:60px;
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:2px solid rgba(255,255,255,.4);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:1.3rem;
  padding-left:4px; /* optical center for play icon */
  transition:all .3s ease;
  box-shadow:0 4px 20px rgba(0,0,0,.3);
}
.reel-card:hover .reel-play-btn {
  background:rgba(255,255,255,.9);
  color:var(--navy);
  transform:scale(1.12);
  border-color:#fff;
}

/* Bottom — handle + CTA */
.reel-bottom {
  display:flex;
  flex-direction:column;
  gap:6px;
}
.reel-handle {
  color:rgba(255,255,255,.8);
  font-size:.72rem;
  font-weight:500;
}
.reel-watch {
  color:#fff;
  font-size:.8rem;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:5px;
  opacity:0;
  transform:translateY(6px);
  transition:all .3s ease;
}
.reel-card:hover .reel-watch {
  opacity:1;
  transform:translateY(0);
}

/* Follow button */
.reels-follow { margin-top:.5rem; }
.btn-insta-follow {
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:linear-gradient(135deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  color:#fff;
  font-size:.95rem;
  font-weight:600;
  padding:.85rem 2rem;
  border-radius:50px;
  text-decoration:none;
  transition:transform .3s ease, box-shadow .3s ease;
  box-shadow:0 6px 24px rgba(220,39,67,.35);
}
.btn-insta-follow:hover {
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 12px 32px rgba(220,39,67,.5);
  color:#fff;
}
.btn-insta-follow i:first-child { font-size:1.2rem; }
.btn-insta-follow i:last-child  { font-size:.8rem; }

/* Responsive */
@media (max-width:900px) {
  .reels-grid { grid-template-columns:repeat(2,1fr); gap:16px; }
}
@media (max-width:500px) {
  .reels-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .reel-card { border-radius:12px; }
  .reel-play-btn { width:48px; height:48px; font-size:1rem; }
  .reel-handle { font-size:.65rem; }
}

/* ═══════════════════════════════════════════
   REEL POPUP MODAL
═══════════════════════════════════════════ */
.reel-modal {
  position:fixed;
  inset:0;
  z-index:2000;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}
.reel-modal.open {
  opacity:1;
  visibility:visible;
  pointer-events:all;
}

/* Dark backdrop */
.reel-modal-backdrop {
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.85);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

/* Inner wrapper */
.reel-modal-inner {
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  transform:scale(.88) translateY(20px);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.reel-modal.open .reel-modal-inner {
  transform:scale(1) translateY(0);
}

/* Phone frame */
.reel-phone {
  width:300px;
  background:#111;
  border-radius:36px;
  border:3px solid #2a2a2a;
  box-shadow:
    0 0 0 1px #444,
    0 30px 80px rgba(0,0,0,.7),
    inset 0 0 0 1px #000;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* Top notch bar */
.reel-phone-top {
  height:28px;
  background:#0a0a0a;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.reel-phone-camera {
  width:10px; height:10px;
  background:#222;
  border-radius:50%;
  border:1px solid #333;
}

/* Screen (iframe) */
.reel-phone-screen {
  flex:1;
  background:#000;
  overflow:hidden;
  position:relative;
}
.reel-iframe-wrap {
  width:100%;
  padding-bottom:177.78%; /* 9:16 */
  position:relative;
  overflow:hidden;
}
.reel-iframe-wrap iframe {
  position:absolute;
  inset:-2px;
  width:calc(100% + 4px);
  height:calc(100% + 4px);
  border:none;
  background:#000;
}

/* Bottom home bar */
.reel-phone-bottom {
  height:22px;
  background:#0a0a0a;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.reel-phone-bar {
  width:80px; height:4px;
  background:#333;
  border-radius:2px;
}

/* Controls */
.reel-modal-controls {
  display:flex;
  align-items:center;
  gap:14px;
}
.reel-modal-close {
  width:44px; height:44px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.1);
  color:#fff;
  font-size:1.1rem;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .25s ease;
  backdrop-filter:blur(6px);
}
.reel-modal-close:hover {
  background:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.5);
  transform:scale(1.1) rotate(90deg);
}
.reel-modal-open {
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  color:#fff;
  font-size:.85rem;
  font-weight:600;
  padding:.55rem 1.2rem;
  border-radius:50px;
  text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease;
  box-shadow:0 4px 16px rgba(220,39,67,.4);
}
.reel-modal-open:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(220,39,67,.55);
  color:#fff;
}

/* Loading state */
.reel-phone-screen::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,#1a1a2e,#16213e);
  z-index:0;
  transition:opacity .3s ease;
}
.reel-phone-screen.loaded::before { opacity:0; pointer-events:none; }

/* Mobile */
@media (max-width:480px) {
  .reel-phone { width:260px; border-radius:28px; }
  .reel-modal-controls { flex-direction:column; gap:10px; }
}

/* ═══════════════════════════════════════════
   PROCESS
═══════════════════════════════════════════ */
.process-section { background:var(--white); }
.process-timeline {
  display:flex;
  align-items:flex-start;
  gap:0;
  position:relative;
}
.process-connector {
  flex:1;
  height:2px;
  background:linear-gradient(90deg,var(--accent),var(--teal));
  margin-top:68px;
  opacity:.3;
}
.process-step {
  width:220px;
  flex-shrink:0;
  text-align:center;
  position:relative;
}
.step-number {
  font-size:3.5rem;
  font-weight:900;
  color:var(--light-gray);
  line-height:1;
  margin-bottom:.35rem;
  font-feature-settings:"tnum";
  transition:var(--transition);
}
.process-step:hover .step-number { color:rgba(244,162,97,.2); }
.step-icon-wrap {
  width:64px; height:64px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto .85rem;
  font-size:1.4rem;
  color:#fff;
  box-shadow:0 6px 20px rgba(244,162,97,.35);
  transition:var(--transition);
}
.process-step:hover .step-icon-wrap { transform:scale(1.1); box-shadow:0 10px 28px rgba(244,162,97,.5); }
.process-step h4 { font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:.4rem; }
.process-step p  { font-size:.83rem; color:var(--text-light); line-height:1.6; }

/* ═══════════════════════════════════════════
   ENQUIRY SECTION
═══════════════════════════════════════════ */
.enquiry-section { background:linear-gradient(135deg,var(--navy) 0%,var(--navy-light) 100%); overflow:hidden; }
.enquiry-wrap {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
.enquiry-left h2 {
  font-size:2.2rem;
  font-weight:800;
  color:#fff;
  margin:.5rem 0 1rem;
  line-height:1.25;
}
.enquiry-left p { color:rgba(255,255,255,.7); margin-bottom:1.75rem; }
.contact-quick { display:flex; flex-direction:column; gap:.75rem; }
.quick-link {
  display:flex;
  align-items:center;
  gap:.75rem;
  color:rgba(255,255,255,.8);
  font-size:.92rem;
  transition:var(--transition);
}
.quick-link a { color:inherit; }
.quick-link:hover, .quick-link a:hover { color:var(--accent); }
.quick-link i {
  color:var(--accent);
  width:20px;
  flex-shrink:0;
}
.enquiry-right {
  background:var(--white);
  border-radius:var(--radius);
  padding:36px 32px;
  box-shadow:var(--shadow-lg);
}
.enquiry-form-full .form-group label { color:var(--dark-gray); }

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
.footer { background:var(--navy); padding:72px 0 0; color:rgba(255,255,255,.75); }
.footer-grid {
  display:grid;
  grid-template-columns:1.8fr 1fr 1fr 1.4fr;
  gap:48px;
  padding-bottom:56px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-logo { height:52px; margin-bottom:1rem; }
.footer-brand p { font-size:.88rem; line-height:1.75; max-width:300px; margin-bottom:1.5rem; }
.social-links { display:flex; gap:12px; }
.social-links a {
  width:40px; height:40px;
  border-radius:10px;
  background:rgba(255,255,255,.07);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.7);
  font-size:1rem;
  transition:var(--transition);
  border:1px solid rgba(255,255,255,.1);
}
.social-links a:hover { background:var(--accent); border-color:var(--accent); color:#fff; transform:translateY(-3px); }
.footer-col h4 { font-size:.95rem; font-weight:700; color:#fff; margin-bottom:1.25rem; }
.footer-col ul li { margin-bottom:.6rem; }
.footer-col ul a {
  font-size:.88rem;
  color:rgba(255,255,255,.6);
  transition:var(--transition);
}
.footer-col ul a:hover { color:var(--accent); padding-left:4px; }
.footer-contact p {
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  font-size:.88rem;
  margin-bottom:.8rem;
}
.footer-contact i { color:var(--accent); margin-top:3px; flex-shrink:0; width:16px; }
.footer-contact a { color:rgba(255,255,255,.7); transition:var(--transition); }
.footer-contact a:hover { color:var(--accent); }
.footer-bottom {
  padding:20px 0;
  text-align:center;
  font-size:.83rem;
  color:rgba(255,255,255,.4);
}
.footer-bottom i { color:var(--accent2); }

/* ═══════════════════════════════════════════
   FLOATING ELEMENTS
═══════════════════════════════════════════ */
.wa-float {
  position:fixed;
  bottom:32px; right:32px;
  width:58px; height:58px;
  background:linear-gradient(135deg,#25d366,#128c7e);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.6rem;
  box-shadow:0 6px 24px rgba(37,211,102,.45);
  z-index:900;
  transition:var(--transition);
  animation:wa-pulse 2.5s ease-in-out infinite;
}
.wa-float:hover { transform:scale(1.12); box-shadow:0 8px 32px rgba(37,211,102,.6); }
@keyframes wa-pulse {
  0%,100% { box-shadow:0 6px 24px rgba(37,211,102,.45); }
  50%      { box-shadow:0 6px 36px rgba(37,211,102,.75); }
}

.back-top {
  position:fixed;
  bottom:32px; right:100px;
  width:44px; height:44px;
  background:var(--navy);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  z-index:900;
  box-shadow:var(--shadow);
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
  transition:var(--transition);
}
.back-top.visible { opacity:1; pointer-events:all; transform:translateY(0); }
.back-top:hover { background:var(--accent); transform:translateY(-3px); }

/* ═══════════════════════════════════════════
   GSAP INITIAL STATES
═══════════════════════════════════════════ */
[data-animate] { opacity:0; }

/* ═══════════════════════════════════════════
   MOBILE STICKY ENQUIRY BAR + DRAWER
═══════════════════════════════════════════ */
.mobile-enquiry-bar {
  display:none; /* shown only on mobile via media query */
  position:fixed;
  bottom:0; left:0; right:0;
  z-index:950;
  background:var(--navy);
  padding:12px 20px;
  padding-bottom:max(12px, env(safe-area-inset-bottom, 12px));
  align-items:center;
  justify-content:space-between;
  box-shadow:0 -4px 24px rgba(0,0,0,.2);
  border-top:2px solid var(--accent);
}
.mob-enq-left {
  display:flex;
  align-items:center;
  gap:.6rem;
  color:#fff;
  font-size:.9rem;
  font-weight:600;
}
.mob-enq-left i {
  font-size:1.4rem;
  color:#25d366;
}
.mob-enq-toggle {
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;
  border:none;
  border-radius:50px;
  padding:.55rem 1.25rem;
  font-size:.85rem;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:.5rem;
  transition:var(--transition);
}
.mob-enq-toggle:hover { transform:scale(1.04); }

/* Drawer */
.mobile-enquiry-drawer {
  position:fixed;
  bottom:0; left:0; right:0;
  z-index:960;
  background:var(--white);
  border-radius:20px 20px 0 0;
  box-shadow:0 -8px 40px rgba(0,0,0,.2);
  transform:translateY(100%);
  transition:transform .38s cubic-bezier(.4,0,.2,1);
  max-height:88svh;       /* svh = small viewport height — avoids browser UI overlap */
  max-height:88vh;        /* fallback for browsers without svh */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  display:flex;
  flex-direction:column;
}
.mobile-enquiry-drawer.open { transform:translateY(0); }

/* Drag handle pill */
.mobile-enquiry-drawer::before {
  content:'';
  display:block;
  width:40px; height:4px;
  background:var(--border);
  border-radius:4px;
  margin:12px auto 0;
  flex-shrink:0;
}

.mob-drawer-inner {
  padding:16px 20px 24px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  flex:1;
  /* Safe area for home bar on iPhone */
  padding-bottom:max(24px, env(safe-area-inset-bottom, 24px));
}
.mob-drawer-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border);
}
.mob-drawer-head h4 { font-size:1rem; font-weight:700; color:var(--navy); }
.mob-drawer-head p  { font-size:.78rem; color:var(--mid-gray); margin-top:.15rem; }
.mob-drawer-close {
  width:32px; height:32px;
  border-radius:50%;
  background:var(--light-gray);
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; color:var(--dark-gray);
  transition:var(--transition);
  flex-shrink:0;
}
.mob-drawer-close:hover { background:var(--border); }
/* Compact form spacing inside drawer */
.mob-form .form-group { margin-bottom:10px; }
.mob-form input,
.mob-form select {
  font-size:16px; /* 16px prevents iOS zoom on focus */
  padding:.6rem .9rem;
}
.mob-form .btn { padding:.7rem 1rem; font-size:.92rem; margin-top:4px; }

/* Backdrop */
.mob-drawer-backdrop {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  z-index:955;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s;
}
.mob-drawer-backdrop.show { opacity:1; pointer-events:all; }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width:1200px) {
  .courses-grid2 { grid-template-columns:repeat(3,1fr); }
}

@media (max-width:1100px) {
  .hero-enquiry-float { width:300px; }
  .features-row { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
}

@media (max-width:900px) {
  .about-grid { grid-template-columns:1fr; gap:40px; }
  .process-timeline { flex-direction:column; align-items:center; gap:0; }
  .process-connector { width:2px; height:40px; background:linear-gradient(var(--accent),var(--teal)); margin:0 auto; }
  .enquiry-wrap { grid-template-columns:1fr; gap:40px; }
  .hero-enquiry-float { position:static; width:100%; transform:none; margin:20px auto 0; padding:0 24px; }
  .hero-section { flex-direction:column; }
  .courses-grid2 { grid-template-columns:repeat(2,1fr); }
  .hero-seq-text { font-size:clamp(2rem, 7vw, 3.5rem); }
  .hero-seq-sub { font-size:.78rem; }

  /* Mobile Layout for Sequence Canvas */
  #hero-canvas, .canvas-overlay {
    width:100%;
    height:100%;
    top:auto;
    bottom:0;
    right:0;
  }
  .hero-text-overlay {
    width:100%;
    height:50%;
    top:0;
    bottom:auto;
    left:0;
  }
  .hero-enquiry-float {
    left:50%;
    top:25%;
    transform:translate(-50%, -50%);
  }
}

@media (max-width:768px) {
  /* Hero scroll indicator — hide on mobile (touch devices scroll differently) */
  .hero-scroll-indicator { display:none; }
  /* Progress bar stays visible */
  .hero-progress-bar { height:2px; }
  .hamburger { display:flex; }
  .nav-links {
    position:fixed;
    top:0; right:-100%;
    width:300px; height:100vh;
    background:rgba(255,255,255,0.95);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    flex-direction:column;
    align-items:flex-start;
    padding:90px 24px 32px;
    gap:8px;
    transition:right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index:999;
    box-shadow:-8px 0 32px rgba(0,0,0,.1);
  }
  .nav-links.open { right:0; }
  .nav-links li { width: 100%; }
  .nav-link, .navbar.scrolled .nav-link { 
    color:var(--navy); 
    font-size: 1.05rem;
    font-weight: 600;
    width: 100%;
    padding: 12px 18px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .nav-links .nav-link:hover, .nav-links .nav-link.active {
    background: rgba(244,162,97,.12);
    color: var(--accent2);
    transform: translateX(4px);
  }
  .nav-btn { 
    margin-top:1.5rem; 
    width:100%; 
    justify-content:center; 
    padding: 14px;
    font-size: 1.05rem;
  }
  .section-pad { padding:64px 0; }
  .features-row { grid-template-columns:1fr 1fr; }
  .videos-grid { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  /* ── Hero slider — perfect mobile fit ── */
  .hero-section {
    min-height:100svh;
    height:100svh;
    overflow:hidden;
  }
  .hero-swiper {
    min-height:100svh;
    height:100svh;
  }
  .hero-slide {
    min-height:100svh;
    height:100svh;
    align-items:flex-end;
  }
  .slide-content {
    padding:80px 20px 90px; /* top:navbar, bottom:pagination+btns */
    max-width:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
  }
  .hero-text {
    max-width:100%;
    width:100%;
  }
  .hero-tag  { font-size:.7rem; margin-bottom:.7rem; }
  .hero-title {
    font-size:clamp(2rem,8vw,2.8rem);
    margin-bottom:.7rem;
    line-height:1.1;
  }
  .hero-sub {
    font-size:.88rem;
    margin-bottom:1.1rem;
    line-height:1.6;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .hero-btns { gap:.6rem; flex-direction:row; flex-wrap:wrap; }
  .hero-btns .btn { padding:.62rem 1.25rem; font-size:.85rem; flex:1; min-width:130px; justify-content:center; }
  /* Hide arrows on mobile — swipe gesture used */
  .hero-prev, .hero-next { display:none !important; }
  .hero-pagination { bottom:62px !important; }
  .hero-enquiry-float { display:none; }
  .footer-grid { grid-template-columns:1fr; }
  /* ── Full enquiry form: force show on mobile ── */
  .enquiry-section { display:block !important; }
  .enquiry-wrap    { display:grid !important; grid-template-columns:1fr !important; gap:28px; }
  .enquiry-left, .enquiry-right { display:block !important; }
  .enquiry-right { padding:24px 20px; }
  /* Mobile enquiry bar */
  .mobile-enquiry-bar { display:flex; }
  body { padding-bottom:68px; }
  .wa-float { bottom:88px; }
  .back-top { bottom:88px; right:90px; }
  /* Filter tabs scroll */
  .course-filters {
    flex-wrap:nowrap;
    overflow-x:auto;
    justify-content:flex-start;
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-left:-24px;
    margin-right:-24px;
    padding-left:24px;
    padding-right:24px;
  }
  .course-filters::-webkit-scrollbar { display:none; }
  .filter-btn { flex-shrink:0; }
}

/* ═══════════════════════════════════════════
   MOBILE ≤600px  — single-column courses
═══════════════════════════════════════════ */
@media (max-width:600px) {

  /* ── Courses: 1 card per row, vertical layout ── */
  .courses-grid2 {
    grid-template-columns:1fr;
    gap:14px;
  }

  /* Reset card to vertical (don't use row layout) */
  .cc2 {
    flex-direction:column;
    border-radius:14px;
  }

  /* Header band — compact but full-width */
  .cc2-head {
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    min-height:unset;
    padding:14px 16px;
    gap:10px;
  }

  /* Watermark code — left aligned, smaller */
  .cc2-code {
    position:static;
    transform:none;
    font-size:1.5rem;
    font-weight:900;
    color:rgba(255,255,255,.2);
    line-height:1;
    flex:1;
    order:1;
  }

  /* Icon — always visible, right side of header */
  .cc2-ico {
    width:42px;
    height:42px;
    font-size:1.1rem;
    border-radius:11px;
    order:2;
    flex-shrink:0;
    background:rgba(255,255,255,.22);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    border:1px solid rgba(255,255,255,.3);
  }

  /* Body */
  .cc2-body {
    padding:14px 16px 10px;
  }
  .cc2-level { font-size:.66rem; padding:.2rem .65rem; margin-bottom:.5rem; }
  .cc2-body h3 {
    font-size:.95rem;
    line-height:1.3;
    margin-bottom:.4rem;
  }
  .cc2-body p {
    font-size:.82rem;
    line-height:1.55;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  /* Footer */
  .cc2-foot {
    padding:10px 16px 14px;
    gap:.6rem;
    border-top:1px solid var(--border);
  }
  .cc2-more { font-size:.82rem; }
  .cc2-wa {
    width:34px; height:34px;
    border-radius:9px;
    font-size:.95rem;
  }
}

/* ═══════════════════════════════════════════
   MOBILE ≤480px  — hero, drawer, enquiry
═══════════════════════════════════════════ */
@media (max-width:480px) {

  /* Features */
  .features-row { grid-template-columns:1fr; }

  /* Enquiry form rows — single column */
  .enquiry-form .form-row,
  .enquiry-form-full .form-row { grid-template-columns:1fr; }

  /* Hero buttons stack */
  .hero-btns { flex-direction:column; align-items:stretch; }
  .hero-btns .btn { justify-content:center; }

  /* ── Hero slider — full viewport, no overflow ── */
  .hero-section {
    min-height:100svh;
    overflow:hidden;
  }
  .hero-swiper {
    min-height:100svh;
    height:100svh;
  }
  .hero-slide {
    min-height:100svh;
    height:100svh;
    align-items:flex-end;
    padding-bottom:0;
  }
  .slide-content {
    padding:72px 20px 100px;
    width:100%;
    max-width:100%;
  }
  .hero-text {
    max-width:100%;
    width:100%;
  }
  .hero-title { font-size:2.1rem; line-height:1.1; }
  .hero-sub   { font-size:.88rem; margin-bottom:1.2rem; }
  .hero-tag   { font-size:.68rem; margin-bottom:.65rem; }
  .hero-btns .btn { padding:.65rem 1.2rem; font-size:.88rem; }
  .hero-pagination { bottom:70px !important; }

  /* ── Full enquiry section — force display ── */
  .enquiry-section {
    display:block !important;
    padding:56px 0 !important;
  }
  .enquiry-wrap {
    display:flex !important;
    flex-direction:column !important;
    gap:28px;
  }
  .enquiry-left {
    display:block !important;
  }
  .enquiry-left h2 {
    font-size:1.6rem;
  }
  .enquiry-right {
    display:block !important;
    padding:24px 20px;
    border-radius:14px;
  }
  .enquiry-form-full .form-group {
    margin-bottom:12px;
  }
  .enquiry-form-full input,
  .enquiry-form-full select,
  .enquiry-form-full textarea {
    font-size:16px; /* prevent iOS zoom */
    padding:.65rem .9rem;
  }
  .enquiry-form-full .btn { padding:.8rem 1rem; }

  /* ── Mobile enquiry drawer — safe fit ── */
  .mob-drawer-inner {
    padding:20px 18px;
    /* Extra bottom space for home-bar phones */
    padding-bottom:calc(28px + env(safe-area-inset-bottom, 16px));
  }
  .mob-drawer-head {
    margin-bottom:16px;
    padding-bottom:14px;
  }
  .mob-form .form-group { margin-bottom:10px; }
  .mob-form input,
  .mob-form select {
    font-size:16px;
    padding:.62rem .9rem;
  }
  .mob-form .btn-whatsapp {
    padding:.78rem 1rem;
    font-size:.92rem;
    margin-top:4px;
  }

  /* Drawer drag handle visual */
  .mobile-enquiry-drawer::before {
    content:'';
    display:block;
    width:40px; height:4px;
    background:var(--border);
    border-radius:4px;
    margin:12px auto 4px;
    flex-shrink:0;
  }
}