/* =======================================================
   World e Campus — Modern Theme Layer
   Adds: light/dark mode, professional color system,
   futuristic visual polish. Loaded AFTER style.css so it
   wins the cascade without needing !important everywhere.
   Edit the variables below to re-theme the entire site.
   ======================================================= */

:root{
  /* ---- Brand palette (light mode) ---- */
  --brand-h: 226;                 /* base hue for primary blue   */
  --primary: #1454e0;
  --primary-600: #0f3fb0;
  --primary-700: #0a2f86;
  --accent: #06b6d4;              /* cyan — the "futuristic" pop */
  --accent-2: #7c3aed;            /* violet accent, used sparingly */
  --success: #16a34a;
  --warning: #f59e0b;

  /* ---- Surfaces / text (light mode) ---- */
  --bg: #f6f8fc;
  --bg-alt: #eef2f9;
  --surface: #ffffff;
  --surface-2: #f2f5fa;
  --surface-patch: #0f1b3d;       /* the old "background:#666" strip sections */
  --text: #131a2c;
  --text-muted: #5b6478;
  --text-on-primary: #ffffff;
  --border: #e3e8f1;
  --shadow: 0 10px 30px rgba(20, 40, 90, .08);
  --shadow-lg: 0 20px 50px rgba(20, 40, 90, .14);
  --grad-primary: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  --grad-cta: linear-gradient(135deg, var(--accent) 0%, var(--primary) 60%, var(--accent-2) 100%);
  --grid-line: rgba(20, 84, 224, .08);
  color-scheme: light;
}

html[data-theme="dark"]{
  --primary: #5b8dff;
  --primary-600: #82a6ff;
  --primary-700: #a9c1ff;
  --accent: #22d3ee;
  --accent-2: #a78bfa;
  --bg: #070c18;
  --bg-alt: #0b1326;
  --surface: #111a30;
  --surface-2: #0d1526;
  --surface-patch: #0a1226;
  --text: #e8edf9;
  --text-muted: #97a2bf;
  --text-on-primary: #071023;
  --border: #1f2b47;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --shadow-lg: 0 25px 60px rgba(0, 0, 0, .55);
  --grad-primary: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  --grad-cta: linear-gradient(135deg, var(--accent) 0%, var(--primary) 55%, var(--accent-2) 100%);
  --grid-line: rgba(90, 160, 255, .10);
  color-scheme: dark;
}

/* ---------------------------------------------------------
   Global base
--------------------------------------------------------- */
html{ scrollbar-color: var(--primary) var(--bg-alt); }
body{
  background: var(--bg) !important;
  color: var(--text) !important;
  transition: background-color .35s ease, color .35s ease;
}
a{ color: var(--primary); }
::selection{ background: var(--accent); color: #05101f; }

/* Futuristic faint grid backdrop on the page body */
body{
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 42px 42px;
  background-attachment: fixed;
}

h1,h2,h3,h4,h5,h6{ color: var(--text) !important; }
p, li, span, label{ color: var(--text-muted); }
.section-title h2, .section-title h3 span{ color: var(--primary) !important; }
.section-title p{ color: var(--text-muted) !important; }

/* ---------------------------------------------------------
   Theme toggle switch
--------------------------------------------------------- */
.theme-toggle{
  --size: 30px;
  position: relative;
  width: 58px;
  height: var(--size);
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 3px;
  margin-left: 18px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.12);
  flex-shrink: 0;
}
.theme-toggle:hover{ border-color: var(--primary); }
.theme-toggle .knob{
  width: calc(var(--size) - 8px);
  height: calc(var(--size) - 8px);
  border-radius: 50%;
  background: var(--grad-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transform: translateX(0);
  transition: transform .3s cubic-bezier(.4,0,.2,1), background .3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
html[data-theme="dark"] .theme-toggle .knob{ transform: translateX(26px); }
.theme-toggle svg{ width: 14px; height: 14px; }
.theme-toggle-wrap{ display:flex; align-items:center; }
.theme-toggle-wrap .tt-icon{ color: var(--text-muted); width:16px; height:16px; }
@media (max-width: 991px){
  .theme-toggle-wrap{ display: none; }
}

/* Mobile floating toggle (shown when nav is collapsed) */
.theme-toggle-mobile{
  display: none;
  position: fixed;
  right: 16px;
  bottom: 92px;
  z-index: 999;
}
@media (max-width: 991px){
  .theme-toggle-mobile{ display: inline-flex; }
  .theme-toggle-mobile .theme-toggle{ background: var(--surface); box-shadow: var(--shadow-lg); }
}

/* ---------------------------------------------------------
   Top bar + Header
--------------------------------------------------------- */
#topbar{
  background: var(--surface-patch) !important;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
#topbar .contact-info a, #topbar .contact-info i{ color: #cfe0ff !important; }
#topbar .social-links a{ color: #cfe0ff !important; }
#topbar .social-links a:hover{ color: var(--accent) !important; }

#header{
  background: var(--surface) !important;
  background: color-mix(in srgb, var(--surface) 88%, transparent) !important;
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: background-color .35s ease, box-shadow .35s ease;
}
#header.header-scrolled{ box-shadow: var(--shadow-lg); }
#header .nav-menu > ul > li > a{
  color: var(--text) !important;
  font-weight: 500;
}
#header .nav-menu > ul > li > a:before{ background: var(--grad-primary) !important; }
#header .nav-menu > ul > li:hover > a,
#header .nav-menu > ul > li.active > a{ color: var(--primary) !important; }
#header .nav-menu .drop-down ul{
  background: var(--surface) !important;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}
#header .nav-menu .drop-down ul li a{ color: var(--text) !important; }
#header .nav-menu .drop-down ul li a:hover{ color: var(--primary) !important; background: var(--surface-2); }
#header .nav-menu .drop-down > a:after{ color: var(--text-muted); }

/* ---------------------------------------------------------
   CTA buttons — unify bg-warning / getfreesession / btn-primary
--------------------------------------------------------- */
.bg-warning, .getfreesession, .btn-primary, .btn-get-started{
  background: var(--grad-cta) !important;
  border: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 8px 24px rgba(20, 84, 224, .28);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.bg-warning:hover, .getfreesession:hover, .btn-primary:hover, .btn-get-started:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(20, 84, 224, .38);
  filter: brightness(1.05);
}
.getfreesession, .getfreesession strong{
  animation: none !important; /* retire the old marquee shimmer for a cleaner CTA */
  -webkit-text-fill-color: #fff !important;
}
a.btn-watch-video{ color: var(--primary) !important; }
a.btn-watch-video i{ color: var(--primary) !important; background: var(--surface); }

/* ---------------------------------------------------------
   Hero
--------------------------------------------------------- */
#hero{
  background: var(--bg) !important;
  background:
    radial-gradient(ellipse 900px 500px at 15% 20%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(ellipse 900px 600px at 85% 80%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 60%),
    var(--bg) !important;
  position: relative;
  overflow: hidden;
}
#hero:before{
  content:"";
  position:absolute; inset:0;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 40%, transparent 100%);
  pointer-events: none;
}
#hero .container{ position: relative; z-index: 1; }
#hero h1 span{
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}
#hero h3 span[style*="background"]{
  background: var(--grad-primary) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(20,84,224,.3);
}
#hero p{ color: var(--text-muted) !important; }

/* ---------------------------------------------------------
   Generic sections / cards
--------------------------------------------------------- */
.section-bg{ background: var(--bg-alt) !important; }
.about, .services, #skills, #counts, #courses, #experiencelivesessions, #freetrial, #kidsremarks{
  background: var(--bg) !important;
}
.icon-box{
  background: var(--surface) !important;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.icon-box:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}
.icon-box h4 a, .icon-box .title{ color: var(--text) !important; }

/* The repeated inline-styled "Patch" promo strips (background:#666) */
section[style*="background: #666"]{
  background: var(--surface-patch) !important;
  color: #eef2ff !important;
  position: relative;
}
section[style*="background: #666"]:before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--grad-primary);
}
section[style*="background: #666"] h3{ color: #fff !important; }

/* Testimonials (bg-primary block) */
#testimonials.bg-primary{
  background: var(--grad-primary) !important;
}
#testimonials .testimonial-img{ border: 3px solid rgba(255,255,255,.6); }

/* Team boards / model images container */
.model1, .model2{ background: var(--bg) !important; }

/* Progress / skills */
.progress .skill{ color: var(--text) !important; }
.progress-bar-wrap{ background: var(--border) !important; }
.progress-bar{ background: var(--grad-primary) !important; }

/* Counts */
.count-box i{ color: var(--primary) !important; }
.count-box span{ color: var(--text) !important; }
.count-box p{ color: var(--text-muted) !important; }

/* Team members */
.member{ background: var(--surface) !important; box-shadow: var(--shadow); border-radius: 14px; }
.member-info h4{ color: var(--text) !important; }
.member .social a{ background: var(--surface-2); color: var(--primary); }

/* Ticker (kids remarks) */
.ticker-item{ color: var(--text) !important; }
.ticker-item h5{ color: var(--text) !important; }
.ticker-item h6{ color: var(--text-muted) !important; }

/* FAQ */
.faq-list li{ background: var(--surface); border-bottom: 1px solid var(--border) !important; }
.faq-list a{ color: var(--text) !important; }
.faq-list a.collapsed{ color: var(--text) !important; }
.faq-list p{ color: var(--text-muted) !important; }
.faq-list i{ color: var(--primary) !important; }

/* Forms */
#freetrial{ background: var(--bg-alt) !important; }
.form-control{
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
.form-control::placeholder{ color: var(--text-muted); }
.form-control:focus{
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(20, 84, 224, .2) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent) !important;
}
select.form-control option{ background: var(--surface); color: var(--text); }

/* Boards / compliance strip */
.team.section-bg p{ color: var(--text) !important; }

/* ---------------------------------------------------------
   Footer
--------------------------------------------------------- */
#footer{
  background: var(--surface-patch) !important;
  color: #cfd6ea;
  border-top: 1px solid rgba(255,255,255,.06);
}
#footer .copyright, #footer .credits, #footer .credits a{ color: #aebadb !important; }
#footer .credits a:hover{ color: var(--accent) !important; }

/* Back to top + preloader */
.back-to-top{
  background: var(--grad-primary) !important;
  box-shadow: 0 10px 24px rgba(20,84,224,.35);
}
#preloader{ background: var(--bg) !important; }
#preloader:before{ border-color: var(--primary) transparent var(--primary) transparent !important; }

/* Floating widgets: keep whatsapp/call as-is but soften the always-on info card in dark mode */
#customer-services{
  background: var(--grad-cta) !important;
}

/* ---------------------------------------------------------
   Motion & accessibility niceties
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}