/*
 * ╔══════════════════════════════════════════════════════╗
 * ║   World e Campus — Ultra-Modern Delight Edition     ║
 * ║   Playful · Pastel · Animated · Dark/Light Toggle   ║
 * ╚══════════════════════════════════════════════════════╝
 *
 * Fonts: Plus Jakarta Sans (body) + Fraunces (display)
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Fraunces:ital,wght@0,300;0,400;0,700;0,900;1,400;1,700&display=swap');

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DESIGN TOKENS — LIGHT MODE (Corporate Blue)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  /* Palette — corporate blue */
  --c-sky:        #dbeafe;
  --c-sky-mid:    #93c5fd;
  --c-blue:       #1565c0;
  --c-blue-deep:  #003c8f;
  --c-violet:     #0d47a1;
  --c-violet-soft:#e3f0ff;
  --c-pink:       #1976d2;
  --c-pink-soft:  #e8f4fd;
  --c-mint:       #0288d1;
  --c-mint-soft:  #e1f5fe;
  --c-amber:      #01579b;
  --c-amber-soft: #e3f0ff;

  /* Surfaces */
  --bg-body:      #f4f7fb;
  --bg-card:      #ffffff;
  --bg-card2:     #eaf1fb;
  --bg-glass:     rgba(255,255,255,0.80);
  --bg-frost:     rgba(244,247,251,0.90);

  /* Text */
  --tx-primary:   #0a1929;
  --tx-secondary: #1e3a5f;
  --tx-muted:     #4a6fa5;
  --tx-faint:     #90a4c2;

  /* Borders */
  --bd-base:      rgba(21,101,192,0.15);
  --bd-card:      rgba(21,101,192,0.10);

  /* Gradients */
  --grad-hero:    linear-gradient(135deg, #e3f0ff 0%, #dbeafe 40%, #e8f4fd 80%, #e1f5fe 100%);
  --grad-pill:    linear-gradient(135deg, #1565c0, #0d47a1);
  --grad-cta:     linear-gradient(135deg, #1565c0 0%, #0288d1 100%);
  --grad-section: linear-gradient(160deg, #f4f7fb 0%, #eaf1fb 100%);

  /* Shadows */
  --sh-sm:  0 2px 8px rgba(21,101,192,0.08), 0 1px 3px rgba(0,0,0,0.04);
  --sh-md:  0 8px 24px rgba(21,101,192,0.12), 0 2px 8px rgba(0,0,0,0.06);
  --sh-lg:  0 20px 48px rgba(21,101,192,0.16), 0 4px 16px rgba(0,0,0,0.08);
  --sh-glow-blue:   0 0 32px rgba(21,101,192,0.28);
  --sh-glow-pink:   0 0 32px rgba(2,136,209,0.25);
  --sh-glow-mint:   0 0 32px rgba(1,87,155,0.22);
  --sh-float:   0 16px 40px rgba(21,101,192,0.15), 0 4px 12px rgba(0,0,0,0.06);

  /* Radius */
  --r-sm:  10px;
  --r-md:  18px;
  --r-lg:  28px;
  --r-xl:  40px;
  --r-pill: 999px;

  /* Motion */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.18s;
  --t-med:  0.32s;
  --t-slow: 0.55s;

  /* Topbar height */
  --topbar-h: 42px;
  --header-h: 74px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DARK MODE TOKENS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html.dark {
  --bg-body:      #0d0f1a;
  --bg-card:      #141626;
  --bg-card2:     #1a1d2e;
  --bg-glass:     rgba(20,22,38,0.85);
  --bg-frost:     rgba(13,15,26,0.9);

  --tx-primary:   #f1f5f9;
  --tx-secondary: #cbd5e1;
  --tx-muted:     #94a3b8;
  --tx-faint:     #475569;

  --bd-base:      rgba(148,163,184,0.1);
  --bd-card:      rgba(148,163,184,0.08);

  --grad-hero:    linear-gradient(135deg, #1e1b4b 0%, #2d1f3d 35%, #0f2040 70%, #0d2818 100%);
  --grad-section: linear-gradient(160deg, #0d0f1a 0%, #141626 100%);

  --sh-sm:  0 2px 8px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2);
  --sh-md:  0 8px 24px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
  --sh-lg:  0 20px 48px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.3);
  --sh-float: 0 16px 40px rgba(99,102,241,0.25), 0 4px 12px rgba(0,0,0,0.3);
  --sh-glow-blue: 0 0 40px rgba(99,102,241,0.45);
  --sh-glow-pink: 0 0 40px rgba(244,114,182,0.4);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GLOBAL RESETS & BASE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  transition: background-color var(--t-slow) var(--ease-smooth),
              color var(--t-slow) var(--ease-smooth);
}

body {
  font-family: 'Plus Jakarta Sans', 'Nunito', sans-serif !important;
  background-color: var(--bg-body) !important;
  color: var(--tx-primary) !important;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color var(--t-slow) var(--ease-smooth),
              color var(--t-slow) var(--ease-smooth);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Fraunces', 'DM Serif Display', serif !important;
  color: var(--tx-primary) !important;
  transition: color var(--t-med) var(--ease-smooth);
}

p {
  color: var(--tx-secondary) !important;
  line-height: 1.8 !important;
  transition: color var(--t-med) var(--ease-smooth);
}

a { transition: all var(--t-fast) var(--ease-smooth); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ANIMATED BACKGROUND CANVAS (body pseudo)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 20% 10%,  rgba(21,101,192,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 55% 55% at 80% 20%,  rgba(2,136,209,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 50% 80%,  rgba(13,71,161,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 70% 40% at 10% 70%,  rgba(1,87,155,0.06) 0%, transparent 70%),
    var(--bg-body);
  animation: bgPulse 14s ease-in-out infinite alternate;
  transition: background var(--t-slow) var(--ease-smooth);
}

@keyframes bgPulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.7; }
  100% { opacity: 1; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FLOATING ORBS (decorative)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  filter: blur(60px);
  opacity: 0.55;
}
.orb-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, #90caf9, transparent);
  top: -100px; left: -150px;
  animation: orbDrift1 20s ease-in-out infinite;
}
.orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, #64b5f6, transparent);
  top: 20%; right: -100px;
  animation: orbDrift2 25s ease-in-out infinite;
}
.orb-3 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, #42a5f5, transparent);
  bottom: 10%; left: 10%;
  animation: orbDrift3 18s ease-in-out infinite;
}

html.dark .orb { opacity: 0.3; }

@keyframes orbDrift1 {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%       { transform: translate(80px, 60px) scale(1.08); }
  66%       { transform: translate(-40px, 100px) scale(0.95); }
}
@keyframes orbDrift2 {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%       { transform: translate(-70px, 50px) scale(1.1); }
}
@keyframes orbDrift3 {
  0%, 100% { transform: translate(0,0) scale(1); }
  40%       { transform: translate(60px, -40px) scale(1.05); }
  80%       { transform: translate(-30px, 20px) scale(0.92); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DARK / LIGHT TOGGLE SWITCH
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#theme-toggle {
  position: fixed;
  top: calc(var(--topbar-h) + var(--header-h) + 14px);
  right: 20px;
  z-index: 9999;
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--bd-base);
  border-radius: var(--r-pill);
  padding: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: var(--sh-md);
  cursor: pointer;
  transition: all var(--t-med) var(--ease-spring);
  user-select: none;
  width: 76px;
  height: 36px;
}

#theme-toggle:hover {
  box-shadow: var(--sh-lg);
  transform: scale(1.05);
}

#theme-toggle .toggle-track {
  width: 66px; height: 26px;
  background: linear-gradient(135deg, var(--c-amber-soft), var(--c-sky));
  border-radius: var(--r-pill);
  position: relative;
  transition: background var(--t-med) var(--ease-smooth);
}

html.dark #theme-toggle .toggle-track {
  background: linear-gradient(135deg, #1e1b4b, #0f2040);
}

#theme-toggle .toggle-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  position: absolute;
  top: 2px; left: 2px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  box-shadow: 0 2px 8px rgba(251,191,36,0.5);
  transition: all var(--t-med) var(--ease-spring);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
}

html.dark #theme-toggle .toggle-thumb {
  transform: translateX(40px);
  background: linear-gradient(135deg, #818cf8, #6366f1);
  box-shadow: 0 2px 8px rgba(99,102,241,0.6);
}

#theme-toggle .toggle-thumb::after {
  content: '☀️';
  font-size: 11px;
}
html.dark #theme-toggle .toggle-thumb::after {
  content: '🌙';
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TOP BAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#topbar {
  background: linear-gradient(90deg, #003c8f, #1565c0, #0288d1) !important;
  height: var(--topbar-h) !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden;
  position: relative;
}

#topbar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  animation: topbarShimmer 4s ease-in-out infinite;
}

@keyframes topbarShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

#topbar .contact-info,
#topbar .contact-info a,
#topbar .contact-info i {
  color: rgba(255,255,255,0.9) !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
}
#topbar .contact-info i { margin-right: 5px !important; }

#topbar .social-links a {
  color: rgba(255,255,255,0.8) !important;
  background: rgba(255,255,255,0.15) !important;
  border-radius: 50% !important;
  width: 26px !important; height: 26px !important;
  display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
  transition: all var(--t-fast) var(--ease-spring) !important;
  font-size: 0.72rem !important;
}
#topbar .social-links a:hover {
  background: rgba(255,255,255,0.32) !important;
  transform: translateY(-2px) scale(1.15) !important;
  color: #fff !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HEADER / NAV
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#header {
  background: var(--bg-glass) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid var(--bd-base) !important;
  box-shadow: 0 4px 24px rgba(99,102,241,0.08) !important;
  top: var(--topbar-h) !important;
  height: var(--header-h) !important;
  transition: all var(--t-med) var(--ease-smooth) !important;
}

#header .logo {
  height: var(--header-h) !important;
  display: flex !important;
  align-items: center !important;
}
#header .logo img {
  max-height: 46px !important;
  width: auto !important;
  transition: transform var(--t-med) var(--ease-spring) !important;
  filter: drop-shadow(0 2px 8px rgba(99,102,241,0.2));
}
#header .logo:hover img { transform: scale(1.04) rotate(-1deg) !important; }

/* Nav links */
#header .nav-menu > ul > li > a {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  color: var(--tx-secondary) !important;
  letter-spacing: 0.01em;
  padding: 7px 14px !important;
  border-radius: var(--r-sm) !important;
  transition: all var(--t-fast) var(--ease-spring) !important;
  position: relative;
}
#header .nav-menu > ul > li > a::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 50%;
  width: 0; height: 2px;
  background: var(--grad-pill);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width var(--t-med) var(--ease-spring);
}
#header .nav-menu > ul > li > a:hover::after { width: 70%; }
#header .nav-menu > ul > li > a:hover {
  color: var(--c-blue-deep) !important;
  background: rgba(99,102,241,0.06) !important;
}

/* Dropdown */
#header .nav-menu .drop-down ul {
  background: var(--bg-card) !important;
  border: 1px solid var(--bd-base) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-lg) !important;
  padding: 10px 6px !important;
  top: calc(100% + 14px) !important;
  backdrop-filter: blur(16px);
}
#header .nav-menu .drop-down ul li a {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.86rem !important;
  font-weight: 500 !important;
  color: var(--tx-secondary) !important;
  padding: 9px 14px !important;
  border-radius: var(--r-sm) !important;
  transition: all var(--t-fast) var(--ease-spring) !important;
}
#header .nav-menu .drop-down ul li a:hover {
  color: var(--c-blue-deep) !important;
  background: rgba(99,102,241,0.07) !important;
  padding-left: 18px !important;
}

/* CTA button */
#header .nav-menu .bg-warning {
  background: var(--grad-cta) !important;
  border-radius: var(--r-pill) !important;
  padding: 9px 22px !important;
  box-shadow: 0 4px 16px rgba(99,102,241,0.35) !important;
  transition: all var(--t-med) var(--ease-spring) !important;
  border: none !important;
  position: relative;
  overflow: hidden;
}
#header .nav-menu .bg-warning::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
  opacity: 0;
  transition: opacity var(--t-fast);
}
#header .nav-menu .bg-warning:hover::before { opacity: 1; }
#header .nav-menu .bg-warning:hover {
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 10px 28px rgba(99,102,241,0.45), var(--sh-glow-pink) !important;
}
#header .nav-menu .bg-warning a,
#header .nav-menu .getfreesession {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  animation: none !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  text-transform: none !important;
  background: none !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SCROLL PROGRESS BAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(135deg, #003c8f, #0288d1);
  border-radius: 0 3px 3px 0;
  z-index: 99999;
  width: 0%;
  transition: width 0.1s linear;
  box-shadow: 0 0 10px rgba(21,101,192,0.6);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HERO SECTION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#hero {
  background: var(--grad-hero) !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--topbar-h) + var(--header-h)) !important;
  transition: background var(--t-slow) var(--ease-smooth) !important;
}

/* Animated geometric shapes in hero */
#hero::before {
  content: '';
  position: absolute;
  width: 800px; height: 800px;
  border-radius: 50%;
  border: 2px solid rgba(21,101,192,0.15);
  top: -200px; right: -200px;
  animation: heroSpin 40s linear infinite;
}
#hero::after {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  border: 1.5px solid rgba(2,136,209,0.12);
  bottom: -150px; left: -150px;
  animation: heroSpin 60s linear infinite reverse;
}

@keyframes heroSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Hero floating dots */
.hero-dot {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: floatDot var(--dur, 8s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.hero-dot-1 { width: 12px; height: 12px; background: #90caf9; top: 25%; left: 12%; --dur: 7s; --delay: 0s; }
.hero-dot-2 { width: 8px;  height: 8px;  background: #64b5f6; top: 40%; right: 18%; --dur: 9s; --delay: 1s; }
.hero-dot-3 { width: 16px; height: 16px; background: #42a5f5; bottom: 30%; left: 25%; --dur: 11s; --delay: 2s; }
.hero-dot-4 { width: 10px; height: 10px; background: #1e88e5; top: 65%; right: 30%; --dur: 8s; --delay: 0.5s; }
.hero-dot-5 { width: 6px;  height: 6px;  background: #1565c0; top: 15%; right: 40%; --dur: 12s; --delay: 3s; }

@keyframes floatDot {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.7; }
  50%       { transform: translateY(-22px) scale(1.15); opacity: 1; }
}

#hero .container { position: relative; z-index: 2; }

#hero h1 {
  font-family: 'Fraunces', serif !important;
  font-size: clamp(3rem, 6vw, 5.5rem) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  color: var(--tx-primary) !important;
  letter-spacing: -0.03em;
  animation: heroFadeUp 0.8s var(--ease-spring) both;
}
#hero h1 span {
  background: linear-gradient(135deg, #003c8f, #1565c0, #0288d1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  animation: gradientShift 6s ease-in-out infinite;
  background-size: 200% 200%;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

#hero h3 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem) !important;
  color: var(--tx-secondary) !important;
  margin: 1.2rem 0 !important;
  line-height: 1.6 !important;
  animation: heroFadeUp 0.9s var(--ease-spring) 0.15s both;
}
#hero h3 span {
  background: var(--bg-glass) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid var(--bd-base) !important;
  border-radius: var(--r-lg) !important;
  padding: 12px 24px !important;
  box-shadow: var(--sh-sm) !important;
  display: inline-block !important;
  color: var(--tx-primary) !important;
  -webkit-text-fill-color: var(--tx-primary) !important;
}

#hero > .container > p {
  color: var(--tx-muted) !important;
  font-size: 1.05rem !important;
  animation: heroFadeUp 1s var(--ease-spring) 0.25s both;
}
#hero p[style*="margin:5px"] {
  color: var(--tx-faint) !important;
  font-style: italic !important;
  font-size: 0.82rem !important;
}

/* Hero CTA */
#hero .d-flex { animation: heroFadeUp 1s var(--ease-spring) 0.35s both; }

#hero .bg-warning {
  background: var(--grad-cta) !important;
  border-radius: var(--r-pill) !important;
  padding: 14px 32px !important;
  border: none !important;
  box-shadow: 0 8px 28px rgba(99,102,241,0.4), var(--sh-glow-blue) !important;
  transition: all var(--t-med) var(--ease-spring) !important;
  position: relative;
  overflow: hidden;
}
#hero .bg-warning::before {
  content: '';
  position: absolute;
  top: -50%; left: -60%;
  width: 220%; height: 200%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.22), transparent);
  transform: skewX(-20deg) translateX(-100%);
  transition: transform 0.6s var(--ease-smooth);
}
#hero .bg-warning:hover::before { transform: skewX(-20deg) translateX(100%); }
#hero .bg-warning:hover {
  transform: translateY(-4px) scale(1.04) !important;
  box-shadow: 0 16px 44px rgba(99,102,241,0.5), var(--sh-glow-pink) !important;
}
#hero .bg-warning .getfreesession,
#hero .bg-warning a {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  animation: none !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  text-transform: none !important;
  background: none !important;
}

/* Hero Watch Video */
#hero .btn-watch-video {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--tx-secondary) !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  margin-left: 16px !important;
  border: 2px solid var(--bd-base) !important;
  border-radius: var(--r-pill) !important;
  padding: 14px 24px !important;
  background: var(--bg-glass) !important;
  backdrop-filter: blur(8px) !important;
  transition: all var(--t-med) var(--ease-spring) !important;
}
#hero .btn-watch-video:hover {
  border-color: #1565c0 !important;
  color: #003c8f !important;
  background: #e3f0ff !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--sh-md) !important;
}
#hero .btn-watch-video i {
  font-size: 1.2rem !important;
  color: #1565c0 !important;
  animation: iconPulse 2.5s ease-in-out infinite;
}
@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.2); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GLOBAL SECTION CHROME
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
section {
  background: var(--bg-body) !important;
  transition: background var(--t-slow) var(--ease-smooth) !important;
}

.section-bg, section.section-bg {
  background: var(--bg-card2) !important;
}

/* Wavy dividers using clip-path */
section + section {
  position: relative;
}

/* Section titles */
.section-title {
  text-align: center !important;
  padding-bottom: 40px !important;
  position: relative;
}
.section-title::after {
  content: '';
  display: block;
  width: 60px; height: 4px;
  background: var(--grad-cta);
  border-radius: var(--r-pill);
  margin: 12px auto 0;
}

.section-title h2 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #1565c0 !important;
  background: #e3f0ff !important;
  display: inline-block;
  padding: 5px 16px !important;
  border-radius: var(--r-pill) !important;
  margin-bottom: 14px !important;
  border: 1px solid rgba(21,101,192,0.2) !important;
  transition: background var(--t-med), color var(--t-med);
}
html.dark .section-title h2 {
  background: rgba(21,101,192,0.15) !important;
}

.section-title h3 {
  font-family: 'Fraunces', serif !important;
  font-size: clamp(1.7rem, 3.5vw, 2.5rem) !important;
  font-weight: 700 !important;
  color: var(--tx-primary) !important;
  line-height: 1.2 !important;
  margin-bottom: 10px !important;
}
.section-title h3 span { color: #1565c0 !important; }
.section-title p {
  color: var(--tx-muted) !important;
  font-size: 1.05rem !important;
  max-width: 560px;
  margin: 0 auto;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BOARDS STRIP
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.team.section-bg:first-of-type,
section.team.section-bg[id=""] {
  background: var(--bg-card) !important;
  border-top: 1px solid var(--bd-card) !important;
  border-bottom: 1px solid var(--bd-card) !important;
  padding: 22px 0 !important;
}
.team.section-bg p b,
.team.section-bg p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.73rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--tx-faint) !important;
}
.team.section-bg img {
  filter: grayscale(50%) opacity(0.65);
  transition: all var(--t-med) var(--ease-spring) !important;
}
.team.section-bg img:hover {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.1) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ABOUT / PATHWAY SECTION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
section.about {
  padding: 80px 0 !important;
}

section.about h3 {
  font-family: 'Fraunces', serif !important;
  font-size: clamp(1.5rem, 3vw, 2.1rem) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--tx-primary) !important;
}
section.about p { color: var(--tx-secondary) !important; font-size: 1.03rem !important; }

section.about img {
  border-radius: var(--r-lg) !important;
  border: none !important;
  box-shadow: var(--sh-float) !important;
  transition: all var(--t-med) var(--ease-spring) !important;
  animation: floatCard 6s ease-in-out infinite;
}
section.about img:hover {
  transform: scale(1.03) rotate(1deg) !important;
  box-shadow: var(--sh-lg), var(--sh-glow-blue) !important;
}

@keyframes floatCard {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

/* GLOBAL CTA buttons */
.bg-warning {
  background: var(--grad-cta) !important;
  border-radius: var(--r-pill) !important;
  transition: all var(--t-med) var(--ease-spring) !important;
  border: none !important;
  position: relative;
  overflow: hidden;
}
.bg-warning:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 12px 32px rgba(99,102,241,0.4) !important;
}
.bg-warning .getfreesession,
.bg-warning a {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  animation: none !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  text-transform: none !important;
  background: none !important;
  font-size: 0.95rem !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PRIME LOCATIONS BANNER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
section#courses.services.text-white {
  background: transparent !important;
  padding: 40px 0 !important;
}
section#courses.services.text-white .bg-primary,
section#courses.services.text-white h3 {
  background: var(--grad-pill) !important;
  -webkit-text-fill-color: unset !important;
  color: #fff !important;
  border-radius: var(--r-lg) !important;
  padding: 16px 32px !important;
  box-shadow: var(--sh-md), var(--sh-glow-blue) !important;
  font-family: 'Fraunces', serif !important;
  font-size: 1.25rem !important;
  display: inline-block;
  animation: floatCard 7s ease-in-out infinite;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   STUDENTS MARQUEE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#kidsremarks {
  background: var(--bg-body) !important;
  padding: 60px 0 !important;
  overflow: hidden;
}
#kidsremarks .section-title h3 {
  color: var(--tx-primary) !important;
}

.ticker-item {
  background: var(--bg-card) !important;
  border: 1px solid var(--bd-card) !important;
  border-radius: var(--r-lg) !important;
  padding: 16px 14px 18px !important;
  width: 155px !important;
  text-align: center;
  box-shadow: var(--sh-sm) !important;
  transition: all var(--t-med) var(--ease-spring) !important;
  margin: 0 10px;
  position: relative;
  overflow: hidden;
}
.ticker-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-cta);
  border-radius: 0;
}
.ticker-item:hover {
  transform: translateY(-8px) scale(1.04) !important;
  box-shadow: var(--sh-float), var(--sh-glow-blue) !important;
  border-color: rgba(99,102,241,0.3) !important;
}
.ticker-item img {
  border-radius: var(--r-md) !important;
  border: none !important;
  width: 100% !important;
  height: 130px !important;
  object-fit: cover !important;
  box-shadow: var(--sh-sm) !important;
  transition: transform var(--t-med) var(--ease-spring) !important;
}
.ticker-item:hover img { transform: scale(1.06) !important; }
.ticker-item h5 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.87rem !important;
  font-weight: 700 !important;
  color: var(--tx-primary) !important;
  margin: 10px 0 5px !important;
}
.ticker-item h6 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #1565c0 !important;
  background: #e3f0ff !important;
  border-radius: var(--r-pill) !important;
  padding: 3px 10px !important;
  display: inline-block !important;
}
html.dark .ticker-item h6 { background: rgba(21,101,192,0.15) !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COURSES / ICON BOXES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
section#courses.services,
section.services {
  background: var(--bg-body) !important;
  padding: 70px 0 !important;
}

.icon-box {
  background: var(--bg-card) !important;
  border: 1px solid var(--bd-card) !important;
  border-radius: var(--r-lg) !important;
  padding: 28px 22px 24px !important;
  box-shadow: var(--sh-sm) !important;
  transition: all var(--t-med) var(--ease-spring) !important;
  position: relative;
  overflow: hidden;
}
.icon-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad-cta);
  border-radius: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med) var(--ease-spring);
}
.icon-box:hover {
  box-shadow: var(--sh-float) !important;
  transform: translateY(-10px) !important;
  border-color: rgba(99,102,241,0.25) !important;
}
.icon-box:hover::before { transform: scaleX(1); }

.icon-box .icon {
  border-radius: var(--r-md) !important;
  overflow: hidden;
  position: relative;
}
.icon-box .icon img {
  border-radius: var(--r-md) !important;
  transition: transform var(--t-med) var(--ease-spring) !important;
  width: 100%;
}
.icon-box:hover .icon img { transform: scale(1.07) !important; }

.icon-box h4 {
  font-family: 'Fraunces', serif !important;
  font-size: 1.18rem !important;
  color: var(--tx-primary) !important;
  margin: 14px 0 10px !important;
  text-align: center;
  font-weight: 700 !important;
}
.icon-box h4 a { color: var(--tx-primary) !important; }
.icon-box h4 a:hover { color: var(--c-violet) !important; }

.icon-box .btn-primary {
  background: var(--grad-cta) !important;
  border: none !important;
  border-radius: var(--r-pill) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.84rem !important;
  padding: 9px 22px !important;
  transition: all var(--t-med) var(--ease-spring) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(99,102,241,0.25) !important;
}
.icon-box .btn-primary:hover {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 10px 28px rgba(99,102,241,0.4) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PROMO BANNERS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
section[style*="background: #666"],
section[style*="background:#666"] {
  background: linear-gradient(135deg, #003c8f 0%, #1565c0 50%, #0288d1 100%) !important;
  padding: 36px 0 !important;
  border: none !important;
  position: relative;
  overflow: hidden;
}
section[style*="background: #666"]::before,
section[style*="background:#666"]::before {
  content: '';
  position: absolute;
  top: -60%; left: -20%;
  width: 140%; height: 200%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.08), transparent);
  animation: bannerPulse 5s ease-in-out infinite;
}
@keyframes bannerPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.05); opacity: 0.7; }
}
section[style*="background: #666"] h3,
section[style*="background:#666"] h3 {
  color: #fff !important;
  font-family: 'Fraunces', serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  margin-bottom: 16px !important;
  position: relative; z-index: 1;
  -webkit-text-fill-color: #fff !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LIVE SESSIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#experiencelivesessions {
  background: var(--bg-body) !important;
  padding: 70px 0 !important;
}
#experiencelivesessions .container.shadow-lg {
  background: var(--bg-card) !important;
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--bd-card) !important;
  box-shadow: var(--sh-lg) !important;
  padding: 40px !important;
}
#experiencelivesessions .testimonial-item img {
  border-radius: var(--r-md) !important;
  border: none !important;
  box-shadow: var(--sh-sm) !important;
  transition: all var(--t-med) var(--ease-spring) !important;
}
#experiencelivesessions .testimonial-item img:hover {
  transform: scale(1.04) rotate(-1deg) !important;
  box-shadow: var(--sh-float) !important;
}
#experiencelivesessions h3 {
  font-family: 'Fraunces', serif !important;
  font-weight: 700 !important;
  color: var(--tx-primary) !important;
  font-size: 1.1rem !important;
  margin-top: 12px !important;
}
.btn-watch-video {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #1565c0 !important;
  font-weight: 700 !important;
  font-size: 0.86rem !important;
  border: 2px solid #1565c0 !important;
  border-radius: var(--r-pill) !important;
  padding: 7px 18px !important;
  background: transparent !important;
  transition: all var(--t-med) var(--ease-spring) !important;
}
.btn-watch-video:hover {
  background: #1565c0 !important;
  color: #fff !important;
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 6px 18px rgba(21,101,192,0.35) !important;
}
.btn-watch-video i {
  animation: iconPulse 2s ease-in-out infinite !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SMART FEATURES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#about {
  background: var(--grad-section) !important;
  padding: 70px 0 !important;
}

#about .icon-box.text-center {
  background: var(--bg-card) !important;
  border: 1px solid var(--bd-card) !important;
  border-radius: var(--r-xl) !important;
  padding: 36px 20px !important;
  box-shadow: var(--sh-sm) !important;
  transition: all var(--t-med) var(--ease-spring) !important;
  position: relative;
  overflow: hidden;
}
/* Pastel accent per card */
#about .icon-box.text-center:nth-child(1) { border-top: 4px solid var(--c-blue) !important; }
#about .icon-box.text-center:nth-child(2) { border-top: 4px solid var(--c-pink) !important; }
#about .icon-box.text-center:nth-child(3) { border-top: 4px solid var(--c-mint) !important; }
#about .icon-box.text-center:nth-child(4) { border-top: 4px solid var(--c-amber) !important; }

#about .icon-box.text-center:hover {
  transform: translateY(-12px) rotate(-0.5deg) !important;
  box-shadow: var(--sh-float) !important;
}
#about .icon-box.text-center .icon img {
  border-radius: var(--r-md) !important;
  border: none !important;
  box-shadow: var(--sh-sm) !important;
  transition: transform var(--t-med) var(--ease-spring) !important;
}
#about .icon-box.text-center:hover .icon img { transform: scale(1.08) rotate(2deg) !important; }
#about .icon-box.text-center h5.title {
  font-family: 'Fraunces', serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--tx-primary) !important;
  padding: 14px 8px 0 !important;
  margin: 0 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PROGRESS MAP / MODEL SECTIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.model1, .model2 {
  background: var(--bg-card2) !important;
  padding: 60px 0 !important;
}
.model1 .section-title h3,
.model2 .section-title h3 { color: var(--tx-primary) !important; }
.model1 img, .model2 img {
  border-radius: var(--r-xl) !important;
  box-shadow: var(--sh-float) !important;
  transition: all var(--t-med) var(--ease-spring) !important;
  animation: floatCard 7s ease-in-out infinite;
}
.model1 img:hover, .model2 img:hover {
  transform: scale(1.03) !important;
  box-shadow: var(--sh-lg), var(--sh-glow-blue) !important;
  animation: none !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SUCCESS STORIES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#testimonials {
  background: linear-gradient(135deg, #1e1b4b 0%, #2e1065 50%, #0f172a 100%) !important;
  padding: 70px 0 !important;
  position: relative;
  overflow: hidden;
}
#testimonials::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(139,92,246,0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(244,114,182,0.2) 0%, transparent 50%);
  animation: testimonialBg 10s ease-in-out infinite alternate;
}
@keyframes testimonialBg {
  0%   { opacity: 1; }
  100% { opacity: 0.6; }
}

#testimonials .section-title h3 { color: #fff !important; }
#testimonials .testimonial-item {
  position: relative; z-index: 1;
}
#testimonials .testimonial-item p.text-white {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.12rem !important;
  line-height: 1.8 !important;
  color: rgba(255,255,255,0.88) !important;
  font-style: italic;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: var(--r-lg) !important;
  padding: 28px 32px !important;
  backdrop-filter: blur(8px);
}
#testimonials .testimonial-img {
  border-radius: 50% !important;
  border: 4px solid rgba(139,92,246,0.6) !important;
  box-shadow: 0 0 28px rgba(139,92,246,0.5) !important;
  width: 100px !important; height: 100px !important;
  object-fit: cover;
  animation: floatCard 6s ease-in-out infinite;
}
#testimonials p.text-white strong { color: #fff !important; font-size: 1rem !important; }
#testimonials .bx {
  color: #fde68a !important;
  font-size: 1.6rem !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SKILLS / PROGRESS BARS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#skills {
  background: var(--bg-body) !important;
  padding: 70px 0 !important;
}
#skills .skill {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  color: var(--tx-primary) !important;
  margin-bottom: 6px !important;
  display: block !important;
}
#skills .val {
  background: linear-gradient(135deg, #003c8f, #0288d1) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 800 !important;
}
#skills .progress {
  height: 10px !important;
  border-radius: var(--r-pill) !important;
  background: var(--bd-base) !important;
  margin-bottom: 28px !important;
  overflow: visible !important;
  position: relative;
}
#skills .progress-bar-wrap {
  border-radius: var(--r-pill) !important;
  overflow: hidden !important;
  height: 10px !important;
}
#skills .progress-bar {
  background: linear-gradient(90deg, #003c8f, #1565c0, #0288d1) !important;
  border-radius: var(--r-pill) !important;
  height: 10px !important;
  transition: width 1.5s var(--ease-smooth) !important;
  position: relative;
  overflow: hidden;
}
#skills .progress-bar::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: shimmer 2.5s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}
#skills .btn-primary {
  background: var(--grad-cta) !important;
  border: none !important;
  border-radius: var(--r-pill) !important;
  font-weight: 700 !important;
  padding: 11px 30px !important;
  transition: all var(--t-med) var(--ease-spring) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(99,102,241,0.3) !important;
}
#skills .btn-primary:hover {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 12px 32px rgba(99,102,241,0.45) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   STATS / COUNTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#counts {
  background: linear-gradient(135deg, #003c8f 0%, #1565c0 50%, #0288d1 100%) !important;
  padding: 60px 0 !important;
  position: relative;
  overflow: hidden;
}
#counts::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.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

#counts .count-box {
  text-align: center;
  padding: 32px 20px !important;
  background: rgba(255,255,255,0.1) !important;
  backdrop-filter: blur(12px) !important;
  border-radius: var(--r-xl) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
  transition: all var(--t-med) var(--ease-spring) !important;
  position: relative; z-index: 1;
}
#counts .count-box:hover {
  background: rgba(255,255,255,0.18) !important;
  transform: translateY(-8px) scale(1.03) !important;
  box-shadow: var(--sh-lg) !important;
}
#counts .count-box i {
  font-size: 2.8rem !important;
  color: rgba(255,255,255,0.85) !important;
  display: block;
  margin-bottom: 14px !important;
  animation: iconPulse 3s ease-in-out infinite;
}
#counts .count-box:nth-child(2) i { animation-delay: 0.5s; }
#counts .count-box:nth-child(3) i { animation-delay: 1s; }
#counts .count-box:nth-child(4) i { animation-delay: 1.5s; }

#counts .count-box span {
  font-family: 'Fraunces', serif !important;
  font-size: 2.6rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  line-height: 1 !important;
  display: block;
}
#counts .count-box p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.8) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-top: 8px !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TEAM
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#team.team {
  background: var(--bg-card2) !important;
  padding: 70px 0 !important;
}
.member {
  background: var(--bg-card) !important;
  border: 1px solid var(--bd-card) !important;
  border-radius: var(--r-xl) !important;
  overflow: hidden !important;
  box-shadow: var(--sh-sm) !important;
  transition: all var(--t-med) var(--ease-spring) !important;
}
.member:hover {
  transform: translateY(-10px) !important;
  box-shadow: var(--sh-float), var(--sh-glow-blue) !important;
  border-color: rgba(99,102,241,0.3) !important;
}
.member .member-img {
  background: linear-gradient(135deg, #dbeafe 0%, #e3f0ff 100%);
  padding: 20px !important;
  transition: background var(--t-med) var(--ease-smooth) !important;
}
html.dark .member .member-img {
  background: linear-gradient(135deg, rgba(99,102,241,0.2) 0%, rgba(139,92,246,0.2) 100%) !important;
}
.member .member-img img {
  border-radius: 50% !important;
  border: 4px solid rgba(255,255,255,0.8) !important;
  box-shadow: var(--sh-md) !important;
  transition: transform var(--t-med) var(--ease-spring) !important;
}
html.dark .member .member-img img { border-color: rgba(99,102,241,0.4) !important; }
.member:hover .member-img img { transform: scale(1.06) rotate(2deg) !important; }

.member .social {
  background: transparent !important;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}
.member .social a {
  color: #1565c0 !important;
  background: #e3f0ff !important;
  border-radius: 50% !important;
  width: 34px !important; height: 34px !important;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  transition: all var(--t-fast) var(--ease-spring) !important;
  border: 1px solid rgba(21,101,192,0.2) !important;
}
.member .social a:hover {
  background: var(--grad-cta) !important;
  color: #fff !important;
  transform: translateY(-3px) scale(1.15) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px rgba(99,102,241,0.35) !important;
}
.member .member-info { padding: 22px 20px 24px !important; }
.member .member-info h4 {
  font-family: 'Fraunces', serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--tx-primary) !important;
  text-align: center;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FORMS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#freetrial, #registerasateacher, #contact {
  background: var(--grad-section) !important;
  padding: 70px 0 !important;
}

.form-control {
  background: var(--bg-card) !important;
  border: 1.5px solid var(--bd-base) !important;
  border-radius: var(--r-md) !important;
  padding: 13px 18px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.93rem !important;
  color: var(--tx-primary) !important;
  transition: all var(--t-fast) var(--ease-smooth) !important;
  box-shadow: var(--sh-sm) !important;
}
.form-control:focus {
  border-color: #1565c0 !important;
  box-shadow: 0 0 0 4px rgba(21,101,192,0.12) !important;
  outline: none !important;
  background: var(--bg-card) !important;
}
.form-control::placeholder { color: var(--tx-faint) !important; }
.form-control option { background: var(--bg-card) !important; color: var(--tx-primary) !important; }

.btn.btn-primary {
  background: var(--grad-cta) !important;
  border: none !important;
  border-radius: var(--r-pill) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  padding: 14px 40px !important;
  color: #fff !important;
  box-shadow: 0 6px 22px rgba(99,102,241,0.35) !important;
  transition: all var(--t-med) var(--ease-spring) !important;
  letter-spacing: 0.02em;
  position: relative;
  overflow: hidden;
}
.btn.btn-primary::before {
  content: '';
  position: absolute;
  top: -50%; left: -60%;
  width: 220%; height: 200%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
  transform: skewX(-20deg) translateX(-100%);
  transition: transform 0.6s;
}
.btn.btn-primary:hover::before { transform: skewX(-20deg) translateX(100%); }
.btn.btn-primary:hover {
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 14px 36px rgba(99,102,241,0.5) !important;
}

.info-box {
  background: var(--bg-card) !important;
  border: 1px solid var(--bd-card) !important;
  border-radius: var(--r-lg) !important;
  padding: 28px 22px !important;
  box-shadow: var(--sh-sm) !important;
  transition: all var(--t-med) var(--ease-spring) !important;
}
.info-box:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--sh-md), var(--sh-glow-blue) !important;
  border-color: rgba(99,102,241,0.2) !important;
}
.info-box i {
  color: #1565c0 !important;
  font-size: 2rem !important;
  display: block; margin-bottom: 10px;
  transition: transform var(--t-med) var(--ease-spring) !important;
}
.info-box:hover i { transform: scale(1.2) rotate(-5deg) !important; }
.info-box h3 {
  font-family: 'Fraunces', serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--tx-primary) !important;
}
.info-box p { color: var(--tx-muted) !important; font-size: 0.9rem !important; margin: 0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FAQ SECTIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#faq { background: var(--bg-body) !important; padding: 70px 0 !important; }
#faq.faq.section-bg { background: var(--bg-card2) !important; }

.faq-list { padding: 0 !important; list-style: none !important; }
.faq-list li {
  background: var(--bg-card) !important;
  border: 1px solid var(--bd-card) !important;
  border-radius: var(--r-lg) !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
  box-shadow: var(--sh-sm) !important;
  transition: all var(--t-med) var(--ease-spring) !important;
}
.faq-list li:hover {
  box-shadow: var(--sh-md) !important;
  border-color: rgba(99,102,241,0.2) !important;
  transform: translateX(4px) !important;
}
.faq-list li a {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  color: var(--tx-primary) !important;
  padding: 18px 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-bottom: 1px solid transparent;
  transition: all var(--t-fast) !important;
}
.faq-list li a:not(.collapsed) {
  color: #1565c0 !important;
  border-bottom-color: var(--bd-card) !important;
}
.faq-list .collapse p,
.faq-list .collapsing p {
  padding: 18px 24px !important;
  color: var(--tx-secondary) !important;
  font-size: 0.93rem !important;
  line-height: 1.8 !important;
  margin: 0 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ABOUT CEO
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
section#about.about p.font-italic {
  border-left: 4px solid #1565c0 !important;
  padding-left: 20px !important;
  color: var(--tx-secondary) !important;
  font-style: italic !important;
  font-size: 1.08rem !important;
  background: #e3f0ff !important;
  border-radius: 0 var(--r-md) var(--r-md) 0 !important;
  padding: 16px 20px !important;
}
html.dark section#about.about p.font-italic {
  background: rgba(21,101,192,0.1) !important;
}
section#about.about img.rounded {
  border-radius: 50% !important;
  border: 4px solid #1565c0 !important;
  box-shadow: var(--sh-md), var(--sh-glow-blue) !important;
  animation: floatCard 7s ease-in-out infinite;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FOOTER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#footer {
  background: linear-gradient(135deg, #0f0c29, #302b63, #24243e) !important;
  position: relative;
  overflow: hidden;
}
#footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--grad-cta);
}
#footer .container.py-4 { border: none !important; }
#footer .copyright {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: rgba(255,255,255,0.5) !important;
  font-size: 0.84rem !important;
}
#footer .credits {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: rgba(255,255,255,0.35) !important;
  font-size: 0.8rem !important;
}
#footer .credits a { color: #a5b4fc !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CUSTOMER SERVICE WIDGET
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#customer-services {
  background: var(--bg-glass) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid var(--bd-base) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-lg) !important;
  padding: 16px !important;
  max-width: 320px !important;
  animation: slideInLeft 0.6s var(--ease-spring) both;
  animation-delay: 2s;
}
@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
#customer-services p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.83rem !important;
  color: var(--tx-secondary) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BACK TO TOP
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.back-to-top i {
  background: var(--grad-cta) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-md), var(--sh-glow-blue) !important;
  transition: all var(--t-med) var(--ease-spring) !important;
}
.back-to-top i:hover {
  transform: translateY(-5px) scale(1.1) !important;
  box-shadow: var(--sh-lg), var(--sh-glow-pink) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   OWL CAROUSEL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.owl-dot.active span {
  background: var(--c-violet) !important;
  transform: scale(1.3);
  transition: all var(--t-fast) var(--ease-spring);
}
.owl-dot span {
  background: var(--bd-base) !important;
  transition: all var(--t-fast) var(--ease-spring) !important;
}
.owl-dot:hover span {
  background: var(--c-sky-mid) !important;
  transform: scale(1.15);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   bg-primary OVERRIDE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.bg-primary {
  background: var(--grad-pill) !important;
  color: #fff !important;
  border-radius: var(--r-md) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SCROLL-REVEAL UTILITY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s var(--ease-smooth), transform 0.65s var(--ease-spring);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PRELOADER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#preloader {
  background: var(--bg-body) !important;
}
#preloader::before {
  border-color: var(--c-sky) !important;
  border-top-color: var(--c-violet) !important;
  width: 50px !important; height: 50px !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SCROLL GRADIENT SHIFT (JS-driven class)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body.scroll-mid body::before {
  background:
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(244,114,182,0.22) 0%, transparent 70%),
    radial-gradient(ellipse 55% 55% at 20% 60%, rgba(99,102,241,0.14) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 60% 90%, rgba(251,191,36,0.1) 0%, transparent 70%),
    var(--bg-body);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 991px) {
  #header { top: 0 !important; }
  #hero   { padding-top: 80px !important; }
  #theme-toggle { top: 80px; right: 14px; }
}
@media (max-width: 767px) {
  #hero h1 { font-size: 2.4rem !important; }
  #hero h3 { font-size: 0.98rem !important; }
  .orb     { display: none; }
  #counts .count-box { margin-bottom: 16px; }
  #theme-toggle { top: 70px; right: 10px; width: 66px; height: 32px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CURSOR GLOW (desktop only)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#cursor-glow {
  pointer-events: none;
  position: fixed;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(21,101,192,0.06) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  z-index: 0;
  transition: transform 0.1s linear;
  display: none;
}

@media (pointer: fine) {
  #cursor-glow { display: block; }
}