/* ============================================================================
   LEARN WITH JC — UNIVERSAL DARK & LIGHT MODE STYLESHEET
   Comprehensive theme styling with high-contrast text, glowing accents,
   and animated lightbulb toggle for all pages.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. CSS VARIABLES FOR DARK MODE
   ---------------------------------------------------------------------------- */
[data-theme="dark"] {
  --primary-green: #0a1f14;
  --primary-green-dark: #05140b;
  --primary-green-light: #16402b;
  --forest-dark: #041009;
  --brand-green: #143823;
  --accent-gold: #cca34b;
  --accent-gold-hover: #e0b85c;
  --accent-gold-soft: rgba(204, 163, 75, 0.15);
  --accent-gold-badge: rgba(204, 163, 75, 0.2);
  --accent-gold-card: #cca34b;
  --bg-cream: #09140e;
  --bg-white: #0f2117;
  --bg-sage-light: #12261b;
  --bg-sage-circle: #152d20;
  --bg-input: #07130c;
  --text-dark: #f0f7f3;
  --text-heading-dark: #ffffff;
  --text-body: #c2d6cc;
  --text-muted: #8ca597;
  --text-light-gray: #9cb4a7;
  --white: #11241a;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-light: rgba(255, 255, 255, 0.08);
  --border-input: rgba(255, 255, 255, 0.14);
  --border-gold: rgba(204, 163, 75, 0.35);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 16px 36px rgba(0, 0, 0, 0.45);
  --shadow-pill: 0 10px 28px rgba(0, 0, 0, 0.4);
}

/* ----------------------------------------------------------------------------
   2. GLOBAL BODY & ELEMENT OVERRIDES IN DARK MODE
   ---------------------------------------------------------------------------- */
[data-theme="dark"] body {
  background-color: #09140e !important;
  color: #c2d6cc !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: #ffffff;
}

[data-theme="dark"] p {
  color: #c2d6cc;
}

/* ----------------------------------------------------------------------------
   3. ANIMATED LIGHTBULB THEME TOGGLE BUTTON (IN NAVBAR)
   ---------------------------------------------------------------------------- */
.lms-theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(7, 46, 27, 0.2);
  background: #ffffff;
  color: #072f1b;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
  flex-shrink: 0;
  outline: none;
}

.lms-theme-toggle:hover {
  transform: translateY(-1px) scale(1.05);
  border-color: #cca34b;
  color: #cca34b;
  box-shadow: 0 4px 14px rgba(204, 163, 75, 0.25);
}

.lms-theme-toggle:active {
  transform: scale(0.92);
}

.lms-bulb-icon-wrap {
  position: relative;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lms-bulb-svg {
  width: 22px;
  height: 22px;
  display: block;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease;
}

/* Lightbulb rays */
.lms-bulb-rays line {
  transition: stroke-dasharray 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  transform-origin: 12px 12px;
}

/* In Light Mode: Bulb is in off/standby mode with subtle warm outline */
.lms-bulb-glass {
  transition: fill 0.3s ease, stroke 0.3s ease;
  fill: transparent;
}

.lms-bulb-filament {
  transition: stroke 0.3s ease;
  stroke: currentColor;
}

/* Hover in Light mode hints at glowing */
.lms-theme-toggle:hover .lms-bulb-glass {
  fill: rgba(245, 158, 11, 0.12);
}

/* ----------------------------------------------------------------------------
   DARK MODE STATE FOR LIGHTBULB (BULB LIGHTS UP RADIANTLY!)
   ---------------------------------------------------------------------------- */
[data-theme="dark"] .lms-theme-toggle {
  background: rgba(22, 45, 32, 0.95);
  border-color: rgba(245, 158, 11, 0.55);
  color: #f59e0b;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.35), 0 2px 8px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .lms-theme-toggle:hover {
  border-color: #fbbf24;
  color: #fbbf24;
  box-shadow: 0 0 24px rgba(251, 191, 36, 0.55), 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* When Dark Mode is on, the bulb lights up with golden radial glow and pulsating rays */
[data-theme="dark"] .lms-bulb-glass {
  fill: rgba(245, 158, 11, 0.38) !important;
  stroke: #fbbf24 !important;
}

[data-theme="dark"] .lms-bulb-filament {
  stroke: #fffbeb !important;
}

[data-theme="dark"] .lms-bulb-rays line {
  stroke: #f59e0b !important;
  animation: bulbRaysPulse 2.4s ease-in-out infinite;
}

[data-theme="dark"] .lms-bulb-rays line:nth-child(2) {
  animation-delay: 0.2s;
}
[data-theme="dark"] .lms-bulb-rays line:nth-child(3) {
  animation-delay: 0.4s;
}
[data-theme="dark"] .lms-bulb-rays line:nth-child(4) {
  animation-delay: 0.6s;
}
[data-theme="dark"] .lms-bulb-rays line:nth-child(5) {
  animation-delay: 0.8s;
}

@keyframes bulbRaysPulse {
  0%, 100% {
    opacity: 0.7;
    stroke-width: 2;
  }
  50% {
    opacity: 1;
    stroke-width: 2.6;
  }
}

/* Button Pop animation when clicked */
.lms-theme-toggle.just-clicked {
  animation: bulbClickPop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes bulbClickPop {
  0% { transform: scale(1) rotate(0deg); }
  35% { transform: scale(0.85) rotate(-16deg); }
  70% { transform: scale(1.15) rotate(12deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ----------------------------------------------------------------------------
   4. NAVBAR COMPONENT IN DARK MODE
   ---------------------------------------------------------------------------- */
[data-theme="dark"] .lms-navbar-wrapper {
  background: transparent;
}

[data-theme="dark"] .lms-navbar-wrapper.scrolled {
  background: rgba(7, 19, 12, 0.94) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

/* Floating Center Navigation Capsule */
[data-theme="dark"] .lms-nav-capsule {
  background: rgba(13, 29, 20, 0.94) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(204, 163, 75, 0.28) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .lms-nav-btn {
  color: #d1ded7 !important;
}

[data-theme="dark"] .lms-nav-btn:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .lms-nav-btn.active {
  background-color: rgba(204, 163, 75, 0.22) !important;
  color: #ffd880 !important;
}

[data-theme="dark"] .lms-nav-green-wave path {
  fill: #041209 !important;
}

/* Login Button in Dark Mode */
[data-theme="dark"] .lms-login-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(204, 163, 75, 0.35) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .lms-login-btn:hover {
  background: rgba(204, 163, 75, 0.16) !important;
  border-color: #cca34b !important;
  color: #ffd880 !important;
}

/* Enroll Button in Dark Mode */
[data-theme="dark"] .lms-enroll-btn {
  background: linear-gradient(135deg, #cca34b 0%, #b88d37 100%) !important;
  color: #072f1b !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 20px rgba(204, 163, 75, 0.3) !important;
}

[data-theme="dark"] .lms-enroll-btn:hover {
  background: linear-gradient(135deg, #e0b85c 0%, #cca34b 100%) !important;
  box-shadow: 0 8px 24px rgba(204, 163, 75, 0.45) !important;
  color: #041d11 !important;
}

/* Mobile Hamburger & Drawer in Dark Mode */
[data-theme="dark"] .lms-mobile-hamburger {
  background: rgba(18, 38, 26, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .lms-hamburger-bar {
  background-color: #ffffff !important;
}

[data-theme="dark"] .lms-mobile-drawer {
  background-color: #0a1710 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .lms-mobile-menu-item a {
  color: #d8e5dd !important;
}

[data-theme="dark"] .lms-mobile-menu-item a:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .lms-mobile-menu-item a.active {
  background-color: rgba(204, 163, 75, 0.2) !important;
  color: #ffd880 !important;
}

/* Mobile Theme Row */
.lms-mobile-theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  margin-top: 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .lms-mobile-theme-row {
  background: rgba(255, 255, 255, 0.05);
}

.lms-mobile-theme-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: inherit;
}

/* ----------------------------------------------------------------------------
   5. SECTION 1: HERO SECTION IN DARK MODE (Fixes for Image 1)
   ---------------------------------------------------------------------------- */
[data-theme="dark"] .hero-section {
  background: radial-gradient(circle at 80% 45%, rgba(20, 70, 45, 0.42) 0%, rgba(9, 20, 14, 0.3) 55%, transparent 75%),
              radial-gradient(circle at 10% 90%, rgba(204, 163, 75, 0.12) 0%, transparent 40%),
              #09140e !important;
}

[data-theme="dark"] .hero-title-green {
  color: #ffffff !important;
}

[data-theme="dark"] .hero-title-gold {
  color: #cca34b !important;
}

[data-theme="dark"] .hero-subtitle {
  color: #c2d6cc !important;
}

[data-theme="dark"] .hero-tagline span {
  color: #cca34b !important;
}

[data-theme="dark"] .hero-geo-lines path {
  stroke: #cca34b !important;
  stroke-opacity: 0.25 !important;
}

[data-theme="dark"] .hero-dots-pattern circle {
  fill: #cca34b !important;
  fill-opacity: 0.2 !important;
}

/* Hero CTA Button: Explore Courses */
[data-theme="dark"] .btn-explore {
  background: linear-gradient(135deg, #cca34b 0%, #b88d37 100%) !important;
  color: #072f1b !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 20px rgba(204, 163, 75, 0.35) !important;
}

[data-theme="dark"] .btn-explore:hover {
  background: linear-gradient(135deg, #dfc285 0%, #cca34b 100%) !important;
  color: #052314 !important;
  transform: translateY(-2px);
}

/* Watch Demo Button */
[data-theme="dark"] .btn-demo {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-demo:hover {
  background: rgba(204, 163, 75, 0.18) !important;
  border-color: #cca34b !important;
  color: #ffd880 !important;
}

[data-theme="dark"] .btn-demo .play-circle {
  background-color: rgba(204, 163, 75, 0.22) !important;
}

[data-theme="dark"] .btn-demo .play-circle svg {
  fill: #cca34b !important;
}

/* Feature Items in Hero */
[data-theme="dark"] .feature-item {
  background: rgba(16, 34, 24, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .feature-title {
  color: #ffffff !important;
}

[data-theme="dark"] .feature-desc {
  color: #9cb4a7 !important;
}

[data-theme="dark"] .feature-icon-wrapper.feature-icon-green,
[data-theme="dark"] .feature-icon-wrapper.feature-icon-gold {
  background-color: rgba(204, 163, 75, 0.18) !important;
}

[data-theme="dark"] .feature-icon-wrapper svg {
  stroke: #cca34b !important;
}

/* Floating Student Badges on Hero (Image 1 fix) */
[data-theme="dark"] .stat-badge {
  background: rgba(14, 30, 21, 0.95) !important;
  border: 1.5px solid rgba(204, 163, 75, 0.35) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .stat-badge .stat-number {
  color: #ffffff !important;
}

[data-theme="dark"] .stat-badge .stat-label {
  color: #b2c7bc !important;
}

[data-theme="dark"] .stat-badge.badge-students .stat-badge-icon.icon-blue {
  background-color: rgba(56, 189, 248, 0.2) !important;
  color: #38bdf8 !important;
}

[data-theme="dark"] .stat-badge.badge-active .stat-badge-icon.icon-red {
  background-color: rgba(248, 113, 113, 0.2) !important;
  color: #f87171 !important;
}

/* Hero Handwritten Accent */
[data-theme="dark"] .handwritten-text {
  color: #cca34b !important;
}

[data-theme="dark"] .handwritten-arrow-svg path,
[data-theme="dark"] .handwritten-arrow-svg polyline {
  stroke: #cca34b !important;
}

[data-theme="dark"] .hero-burst-svg line {
  stroke: #cca34b !important;
}

[data-theme="dark"] .hero-circle-fill {
  background-color: #12281c !important;
}

[data-theme="dark"] .hero-circle-ring {
  border-color: rgba(204, 163, 75, 0.35) !important;
}

/* ----------------------------------------------------------------------------
   6. SECTION 2: "WHY LEARN WITH JC" IN DARK MODE (Fixes for Image 2)
   ---------------------------------------------------------------------------- */
[data-theme="dark"] .why-jc-section {
  background-color: #07130c !important;
}

/* Hide harsh washed-out light gradients in dark mode */
[data-theme="dark"] .why-bg-gradient-tr,
[data-theme="dark"] .why-bg-gradient-bl {
  display: none !important;
}

/* Section Title: "Your Success, Our Priority" */
[data-theme="dark"] .why-title-dark {
  color: #ffffff !important;
}

[data-theme="dark"] .why-title-green {
  color: #cca34b !important; /* Glowing gold replaces dark green */
}

[data-theme="dark"] .why-subtitle {
  color: #c2d6cc !important;
}

[data-theme="dark"] .why-tagline span {
  color: #cca34b !important;
}

[data-theme="dark"] .why-tagline-line {
  background-color: #cca34b !important;
}

/* 6 Feature Cards (01 to 06) */
[data-theme="dark"] .why-card {
  background-color: #102217 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .why-card:hover {
  border-color: rgba(204, 163, 75, 0.4) !important;
  transform: translateY(-2px);
}

[data-theme="dark"] .why-card-title {
  color: #ffffff !important;
}

[data-theme="dark"] .why-card-desc {
  color: #b5cbbf !important;
}

[data-theme="dark"] .why-card-badge {
  background-color: rgba(204, 163, 75, 0.22) !important;
  color: #ffd880 !important;
  border: 1px solid rgba(204, 163, 75, 0.35) !important;
}

[data-theme="dark"] .why-card-icon-box {
  background-color: rgba(204, 163, 75, 0.18) !important;
}

[data-theme="dark"] .why-card-icon-svg {
  fill: #cca34b !important;
  stroke: #cca34b !important;
}

/* Center Visual & SVG Connecting Branches */
[data-theme="dark"] .why-connectors-svg path {
  stroke: rgba(204, 163, 75, 0.4) !important;
}

[data-theme="dark"] .why-connectors-svg circle {
  fill: #cca34b !important;
}

[data-theme="dark"] .why-dots-cluster-svg circle,
[data-theme="dark"] .why-dots-top-left circle,
[data-theme="dark"] .why-dots-bottom-right circle {
  fill: #cca34b !important;
  fill-opacity: 0.18 !important;
}

[data-theme="dark"] .why-center-circle-ring {
  border-color: rgba(204, 163, 75, 0.5) !important;
}

/* ----------------------------------------------------------------------------
   7. SECTION 3: "CHOOSE YOUR COURSE" IN DARK MODE (Fixes for Image 3)
   ---------------------------------------------------------------------------- */
[data-theme="dark"] .courses-section {
  background-color: #09140e !important;
}

/* Section Title: "Choose Your Course" */
[data-theme="dark"] .courses-heading-dark {
  color: #ffffff !important;
}

[data-theme="dark"] .courses-heading-green {
  color: #cca34b !important; /* Glowing gold replaces dark green */
}

[data-theme="dark"] .courses-tagline span {
  color: #cca34b !important;
}

[data-theme="dark"] .courses-tagline-line {
  background-color: #cca34b !important;
}

[data-theme="dark"] .courses-lead-text {
  color: #c2d6cc !important;
}

/* Top Action Bar Button */
[data-theme="dark"] .btn-view-all {
  border-color: rgba(204, 163, 75, 0.45) !important;
  color: #ffffff !important;
  background: rgba(204, 163, 75, 0.08) !important;
}

[data-theme="dark"] .btn-view-all:hover {
  background: rgba(204, 163, 75, 0.22) !important;
  border-color: #cca34b !important;
  color: #ffd880 !important;
}

[data-theme="dark"] .courses-wire-accent {
  background: linear-gradient(90deg, rgba(204, 163, 75, 0.1), rgba(204, 163, 75, 0.4)) !important;
}

/* Features List on Left Column */
[data-theme="dark"] .courses-feature-label {
  color: #e2ede6 !important;
}

[data-theme="dark"] .courses-feature-icon-box {
  background: rgba(204, 163, 75, 0.18) !important;
  border: 1px solid rgba(204, 163, 75, 0.3) !important;
  color: #cca34b !important;
}

[data-theme="dark"] .btn-explore-courses {
  background: rgba(204, 163, 75, 0.2) !important;
  color: #cca34b !important;
  border: 1.5px solid rgba(204, 163, 75, 0.4) !important;
}

[data-theme="dark"] .btn-explore-courses:hover {
  background: #cca34b !important;
  color: #072f1b !important;
}

/* Course Cards */
[data-theme="dark"] .course-card.course-card-white {
  background-color: #102217 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .course-card.course-card-featured {
  background-color: #132a1d !important;
  border: 1.5px solid rgba(204, 163, 75, 0.45) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .course-title {
  color: #ffffff !important;
}

[data-theme="dark"] .course-desc {
  color: #b5cbbf !important;
}

/* Schedule / Meta rows in course cards */
[data-theme="dark"] .course-meta .meta-row span {
  color: #c2d6cc !important;
}

[data-theme="dark"] .course-meta .meta-icon {
  stroke: #cca34b !important;
}

[data-theme="dark"] .course-divider {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .btn-card-arrow-outline {
  border-color: rgba(204, 163, 75, 0.4) !important;
  color: #cca34b !important;
}

[data-theme="dark"] .btn-card-arrow-outline:hover {
  background-color: #cca34b !important;
  color: #072f1b !important;
}

[data-theme="dark"] .courses-top-left-swoosh circle {
  stroke: #cca34b !important;
  stroke-opacity: 0.12 !important;
}

[data-theme="dark"] .courses-corner-blob {
  background: radial-gradient(circle, #07190f 0%, #041009 85%, transparent 100%) !important;
}

/* ----------------------------------------------------------------------------
   8. SECTION 4: "ABOUT OUR INSTITUTION" IN DARK MODE (Fixes for Image 4)
   ---------------------------------------------------------------------------- */
[data-theme="dark"] .about-section {
  background-color: #07130c !important;
}

/* Heading: "More Than a Language School" */
[data-theme="dark"] .about-heading-green {
  color: #ffffff !important; /* Crisp white replaces dark green */
}

[data-theme="dark"] .about-heading-gold {
  color: #cca34b !important;
}

[data-theme="dark"] .about-tagline span {
  color: #cca34b !important;
}

[data-theme="dark"] .about-tagline-line {
  background-color: #cca34b !important;
}

[data-theme="dark"] .about-subtagline span {
  color: #c2d6cc !important;
}

[data-theme="dark"] .about-location-tag span {
  color: #9cb4a7 !important;
}

[data-theme="dark"] .about-location-line {
  background-color: #cca34b !important;
}

/* Right Story Text */
[data-theme="dark"] .about-story-text {
  color: #c2d6cc !important;
}

/* Right Metric Cards (500+, A2, 100%) */
[data-theme="dark"] .about-metric-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .about-metric-icon.metric-icon-sage,
[data-theme="dark"] .about-metric-icon.metric-icon-cream {
  background-color: rgba(204, 163, 75, 0.18) !important;
  color: #cca34b !important;
}

[data-theme="dark"] .about-metric-val {
  color: #ffffff !important;
}

[data-theme="dark"] .about-metric-sub {
  color: #b5cbbf !important;
}

/* Stepper Column on Far-Right */
[data-theme="dark"] .stepper-guide-line {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .stepper-guide-node {
  background-color: #cca34b !important;
}

[data-theme="dark"] .stepper-num-active {
  color: #cca34b !important;
}

[data-theme="dark"] .stepper-num-inactive {
  color: #799183 !important;
}

/* Floating Student Card & Badge on Arch */
[data-theme="dark"] .about-student-card {
  background: rgba(14, 30, 21, 0.95) !important;
  border: 1.5px solid rgba(204, 163, 75, 0.35) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .about-student-count {
  color: #ffffff !important;
}

[data-theme="dark"] .about-student-label {
  color: #b5cbbf !important;
}

[data-theme="dark"] .about-badge-circle {
  background: rgba(14, 30, 21, 0.95) !important;
  border: 1.5px solid rgba(204, 163, 75, 0.4) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .about-badge-circle-text {
  color: #ffffff !important;
}

[data-theme="dark"] .about-badge-cap-svg {
  stroke: #cca34b !important;
}

/* ----------------------------------------------------------------------------
   9. SECTION 5: "STUDENT STORIES" IN DARK MODE (Fixes for Image 5)
   ---------------------------------------------------------------------------- */
[data-theme="dark"] .stories-section {
  background-color: #09140e !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Section Title: "Words from our learners" */
[data-theme="dark"] .stories-title-green {
  color: #ffffff !important; /* Crisp white replaces dark green */
}

[data-theme="dark"] .stories-title-gold {
  color: #cca34b !important;
}

[data-theme="dark"] .stories-tagline span {
  color: #cca34b !important;
}

[data-theme="dark"] .stories-tagline-line {
  background-color: #cca34b !important;
}

[data-theme="dark"] .stories-subtitle {
  color: #c2d6cc !important;
}

/* Pagination Counter & Arrows */
[data-theme="dark"] .stories-counter {
  color: #c2d6cc !important;
}

[data-theme="dark"] .stories-counter-curr {
  color: #cca34b !important;
}

[data-theme="dark"] .btn-story-arrow {
  background: rgba(18, 38, 27, 0.8) !important;
  border: 1px solid rgba(204, 163, 75, 0.35) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-story-next {
  background: #cca34b !important;
  color: #072f1b !important;
  border-color: #cca34b !important;
}

/* Left Main Testimonial Card */
[data-theme="dark"] .story-main-card {
  background: #102217 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
}

/* Remove or tone down harsh white corner glow in dark mode */
[data-theme="dark"] .story-corner-wave {
  opacity: 0.1 !important;
}

[data-theme="dark"] .story-text-quote {
  color: #e2ede6 !important;
}

[data-theme="dark"] .story-stars-row span {
  color: #cca34b !important;
}

/* Author info in main card */
[data-theme="dark"] .story-author-name {
  color: #ffffff !important; /* Replaces dark blue/green */
}

[data-theme="dark"] .story-author-role {
  color: #cca34b !important;
}

[data-theme="dark"] .story-author-dash {
  background-color: #cca34b !important;
}

[data-theme="dark"] .stories-grid-separator {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Right Previews List */
[data-theme="dark"] .story-preview-item {
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .story-preview-name {
  color: #ffffff !important; /* Replaces dark blue */
}

[data-theme="dark"] .story-preview-role {
  color: #cca34b !important;
}

[data-theme="dark"] .story-preview-snippet {
  color: #a8c0b2 !important;
}

[data-theme="dark"] .story-preview-num {
  color: #cca34b !important;
}

[data-theme="dark"] .story-preview-divider {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Active Preview Card in Right List (Fixes blinding solid white card) */
[data-theme="dark"] .story-preview-item.active {
  background-color: #12281c !important;
  border: 1.5px solid rgba(204, 163, 75, 0.45) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .story-preview-item.active .story-preview-name {
  color: #ffffff !important;
}

[data-theme="dark"] .story-preview-item.active .story-preview-role {
  color: #cca34b !important;
}

[data-theme="dark"] .story-preview-item.active .story-preview-snippet {
  color: #c5d8ce !important;
}

[data-theme="dark"] .story-preview-item.active .story-preview-num {
  color: #cca34b !important;
}

/* ----------------------------------------------------------------------------
   10. ABOUT PAGE (about.html) SPECIFIC OVERRIDES IN DARK MODE
   ---------------------------------------------------------------------------- */
[data-theme="dark"] .about-banner-section {
  background-color: #051a0f !important;
}

[data-theme="dark"] .banner-main-title {
  color: #ffffff !important;
}

[data-theme="dark"] .banner-subtitle {
  color: #d1ded7 !important;
}

/* Academics History / Our Journey Section */
[data-theme="dark"] .about-history-section,
[data-theme="dark"] #our-journey {
  background-color: #07130c !important;
}

[data-theme="dark"] .history-col-white {
  background-color: #07130c !important;
}

[data-theme="dark"] .history-main-title {
  color: #ffffff !important;
}

[data-theme="dark"] .gold-history {
  color: #cca34b !important;
}

[data-theme="dark"] .history-sub-motto {
  color: #c2d6cc !important;
}

[data-theme="dark"] .history-quote-text {
  color: #dceae1 !important;
}

[data-theme="dark"] .history-timeline-year {
  color: #cca34b !important;
}

[data-theme="dark"] .history-timeline-desc {
  color: #b5cbbf !important;
}

[data-theme="dark"] .history-watermark-cursive {
  color: rgba(204, 163, 75, 0.25) !important;
}

/* Our Community / Personalized Learning Section */
[data-theme="dark"] .community-section,
[data-theme="dark"] #our-community {
  background-color: #09140e !important;
}

[data-theme="dark"] .community-title {
  color: #ffffff !important;
}

[data-theme="dark"] .community-title .gold-title {
  color: #cca34b !important;
}

[data-theme="dark"] .community-desc {
  color: #c2d6cc !important;
}

[data-theme="dark"] .community-feature-card,
[data-theme="dark"] .about-feature-card {
  background-color: #102217 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .community-feature-card:hover {
  border-color: rgba(204, 163, 75, 0.4) !important;
}

[data-theme="dark"] .community-feature-title {
  color: #ffffff !important;
}

[data-theme="dark"] .community-feature-desc {
  color: #a8c0b2 !important;
}

/* ----------------------------------------------------------------------------
   11. CONTACT PAGE (contact.html) SPECIFIC OVERRIDES IN DARK MODE
   ---------------------------------------------------------------------------- */
[data-theme="dark"] .contact-banner-section {
  background-color: #051a0f !important;
}

[data-theme="dark"] .contact-banner-title {
  color: #ffffff !important;
}

[data-theme="dark"] .contact-banner-sub {
  color: #d1ded7 !important;
}

[data-theme="dark"] .contact-main-section,
[data-theme="dark"] .contact-section {
  background-color: #07130c !important;
}

/* Contact Form Card */
[data-theme="dark"] .contact-form-card,
[data-theme="dark"] .contact-form-wrapper {
  background-color: #102217 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="dark"] .contact-form-title {
  color: #ffffff !important;
}

[data-theme="dark"] .contact-form-subtitle {
  color: #a8c0b2 !important;
}

/* Form Inputs, Selects & Textareas */
[data-theme="dark"] .contact-input,
[data-theme="dark"] .contact-select,
[data-theme="dark"] .contact-textarea,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: #07140c !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #799183 !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: #cca34b !important;
  box-shadow: 0 0 0 3px rgba(204, 163, 75, 0.22) !important;
  outline: none !important;
}

[data-theme="dark"] .contact-label {
  color: #e2ede6 !important;
}

/* Contact Info Cards */
[data-theme="dark"] .contact-info-card,
[data-theme="dark"] .info-item-box {
  background-color: #102217 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .contact-info-title {
  color: #ffffff !important;
}

[data-theme="dark"] .contact-info-desc {
  color: #a8c0b2 !important;
}

[data-theme="dark"] .contact-info-value {
  color: #cca34b !important;
}

/* ----------------------------------------------------------------------------
   12. FOOTER IN DARK MODE
   ---------------------------------------------------------------------------- */
[data-theme="dark"] footer,
[data-theme="dark"] .lms-footer,
[data-theme="dark"] .lms-footer-wrapper,
[data-theme="dark"] .footer-section {
  background-color: #041009 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .footer-brand-title,
[data-theme="dark"] .footer-brand-name,
[data-theme="dark"] .footer-col-title {
  color: #ffffff !important;
}

[data-theme="dark"] .footer-brand-desc,
[data-theme="dark"] .footer-newsletter-desc,
[data-theme="dark"] .footer-link,
[data-theme="dark"] .footer-nav-link,
[data-theme="dark"] .footer-link-item a {
  color: #9cb4a7 !important;
}

[data-theme="dark"] .footer-link:hover,
[data-theme="dark"] .footer-nav-link:hover,
[data-theme="dark"] .footer-link-item a:hover {
  color: #cca34b !important;
}

[data-theme="dark"] .footer-newsletter-form {
  background: rgba(14, 30, 21, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .footer-newsletter-input {
  color: #ffffff !important;
}

[data-theme="dark"] .footer-newsletter-submit {
  background: #cca34b !important;
  color: #072f1b !important;
}

[data-theme="dark"] .footer-newsletter-submit:hover {
  background: #e0b85c !important;
}

[data-theme="dark"] .footer-bottom-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: #7d9688 !important;
}

/* ----------------------------------------------------------------------------
   13. SMOOTH THEME TRANSITION
   ---------------------------------------------------------------------------- */
body,
.hero-section,
.why-jc-section,
.courses-section,
.about-section,
.stories-section,
.about-banner-section,
.contact-banner-section,
.course-card,
.feature-item,
.why-card,
.story-main-card,
.community-feature-card,
.contact-form-card,
.lms-nav-capsule,
.lms-theme-toggle {
  transition: background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}


/* ============================================================================
   14. SPECIFIC FIXES FOR ABOUT PAGE (about.html) & CONTACT PAGE (contact.html)
   ============================================================================ */

/* ----------------------------------------------------------------------------
   ABOUT PAGE: BREADCRUMB BAR (Screenshot 1 fix)
   ---------------------------------------------------------------------------- */
[data-theme="dark"] .about-breadcrumb-bar {
  background-color: #07130c !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .about-breadcrumb-pill {
  background: rgba(18, 38, 27, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #c2d6cc !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .about-breadcrumb-home-link {
  color: #cca34b !important;
}

[data-theme="dark"] .about-breadcrumb-sep {
  color: #799183 !important;
}

[data-theme="dark"] .about-breadcrumb-current {
  color: #ffffff !important;
}

/* ----------------------------------------------------------------------------
   ABOUT PAGE: OUR JOURNEY / ACADEMICS HISTORY (Screenshot 2 fix)
   ---------------------------------------------------------------------------- */
[data-theme="dark"] .journey-section {
  background-color: #07130c !important;
}

[data-theme="dark"] .journey-bg-green-strip {
  background-color: #05140b !important;
}

[data-theme="dark"] .journey-strip-text span {
  color: #9cb4a7 !important;
}

[data-theme="dark"] .journey-main-heading {
  color: #ffffff !important;
}

[data-theme="dark"] .journey-heading-green {
  color: #ffffff !important; /* Fixes dark green 'Academics' to bright white */
}

[data-theme="dark"] .journey-heading-gold {
  color: #cca34b !important;
}

[data-theme="dark"] .journey-green-dash {
  background-color: #cca34b !important;
}

[data-theme="dark"] .journey-tagline-text {
  color: #cca34b !important;
}

[data-theme="dark"] .journey-tagline-line {
  background-color: #cca34b !important;
}

[data-theme="dark"] .journey-subtitle {
  color: #9cb4a7 !important;
}

[data-theme="dark"] .journey-pullquote {
  border-left-color: #cca34b !important;
}

[data-theme="dark"] .journey-quote-text {
  color: #dceae1 !important;
}

[data-theme="dark"] .journey-quote-icon {
  color: #cca34b !important;
}

/* Milestones (2024, 2016, TODAY) in dark mode */
[data-theme="dark"] .journey-milestone-year {
  color: #cca34b !important; /* Fixes dark/invisible milestone years to radiant gold */
  font-weight: 800 !important;
}

[data-theme="dark"] .journey-milestone-desc {
  color: #b5cbbf !important;
}

[data-theme="dark"] .journey-milestone-dot {
  background-color: #cca34b !important;
  box-shadow: 0 0 10px rgba(204, 163, 75, 0.5) !important;
}

[data-theme="dark"] .journey-timeline-track {
  background-color: rgba(204, 163, 75, 0.25) !important;
}

[data-theme="dark"] .journey-top-cursive span {
  color: #cca34b !important;
}

[data-theme="dark"] .journey-watermark-bg {
  stroke: rgba(204, 163, 75, 0.15) !important;
}

[data-theme="dark"] .journey-pebble-frame {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
}

/* ----------------------------------------------------------------------------
   ABOUT PAGE: OUR APPROACH — "WHY ACADEMICS WORKS" (Screenshot 3 fix)
   ---------------------------------------------------------------------------- */
[data-theme="dark"] .approach-section {
  background-color: #07130c !important; /* Replaces blinding solid white background */
}

[data-theme="dark"] .approach-title-green {
  color: #ffffff !important; /* Fixes dark green 'Why Academics' to crisp white */
}

[data-theme="dark"] .approach-title-gold {
  color: #cca34b !important;
}

[data-theme="dark"] .approach-desc {
  color: #c2d6cc !important;
}

[data-theme="dark"] .approach-tagline-text {
  color: #cca34b !important;
}

[data-theme="dark"] .approach-tagline-line {
  background-color: #cca34b !important;
}

[data-theme="dark"] .btn-approach-cta {
  background: linear-gradient(135deg, #cca34b 0%, #b88d37 100%) !important;
  color: #072f1b !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 20px rgba(204, 163, 75, 0.3) !important;
}

[data-theme="dark"] .btn-approach-circle {
  background: #072f1b !important;
  color: #ffffff !important;
}

[data-theme="dark"] .approach-feat-title {
  color: #ffffff !important;
}

[data-theme="dark"] .approach-feat-desc {
  color: #b5cbbf !important;
}

[data-theme="dark"] .approach-feat-icon-wrap.sage,
[data-theme="dark"] .approach-feat-icon-wrap.champagne {
  background: rgba(204, 163, 75, 0.18) !important;
  color: #cca34b !important;
  border: 1px solid rgba(204, 163, 75, 0.35) !important;
}

[data-theme="dark"] .approach-feat-line {
  background-color: rgba(204, 163, 75, 0.35) !important;
}

[data-theme="dark"] .approach-blob-cursive span {
  color: #cca34b !important;
}

/* ----------------------------------------------------------------------------
   ABOUT PAGE: OUR COMMUNITY — "PERSONALIZED LEARNING" (Screenshot 4 fix)
   ---------------------------------------------------------------------------- */
[data-theme="dark"] .approach-block-bottom {
  background: transparent !important;
}

[data-theme="dark"] .community-dark-card {
  background-color: #0b1e13 !important;
  border: 1.5px solid rgba(204, 163, 75, 0.28) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .community-tagline-text {
  color: #cca34b !important;
}

[data-theme="dark"] .community-tagline-line {
  background-color: #cca34b !important;
}

[data-theme="dark"] .community-title-white {
  color: #ffffff !important;
}

[data-theme="dark"] .community-title-gold {
  color: #cca34b !important;
}

[data-theme="dark"] .community-desc {
  color: #c2d6cc !important;
}

/* 3 Feature cards on right in Row 2 */
[data-theme="dark"] .community-feature-card {
  background-color: #102217 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .community-feature-card:hover {
  border-color: rgba(204, 163, 75, 0.45) !important;
  transform: translateY(-2px);
}

[data-theme="dark"] .community-card-title {
  color: #ffffff !important;
}

[data-theme="dark"] .community-card-desc {
  color: #b5cbbf !important;
}

[data-theme="dark"] .community-card-icon {
  background-color: rgba(204, 163, 75, 0.18) !important;
  color: #cca34b !important;
}

[data-theme="dark"] .community-cards-divider {
  background-color: rgba(204, 163, 75, 0.4) !important;
}

/* ----------------------------------------------------------------------------
   CONTACT PAGE: BANNER & ELEMENTS (Screenshot 5 fix)
   ---------------------------------------------------------------------------- */
/* Breadcrumb on dark banner */
[data-theme="dark"] .contact-banner-breadcrumb a {
  color: #cca34b !important;
}

[data-theme="dark"] .contact-banner-breadcrumb .sep {
  color: #799183 !important;
}

[data-theme="dark"] .contact-banner-breadcrumb .current {
  color: #ffffff !important;
}

/* Title: "Contact Us" */
[data-theme="dark"] .contact-banner-title {
  color: #ffffff !important;
}

[data-theme="dark"] .contact-banner-title .mint-text {
  color: #cca34b !important; /* Fixes dark/invisible 'Us' to radiant gold */
}

[data-theme="dark"] .contact-banner-desc {
  color: #c2d6cc !important;
}

/* Cursive "Let's Connect" on portal */
[data-theme="dark"] .contact-banner-cursive-l1,
[data-theme="dark"] .contact-banner-cursive-l2 {
  color: #cca34b !important; /* Fixes low-contrast green cursive to radiant gold */
}

[data-theme="dark"] .contact-banner-cursive-line {
  background-color: #cca34b !important;
}

/* Frosted Glass Badges */
[data-theme="dark"] .glass-badge-item {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(204, 163, 75, 0.4) !important;
  color: #ffffff !important;
}

/* Contact Main Form Section */
[data-theme="dark"] .contact-main-section {
  background-color: #07130c !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  position: relative;
}

/* Remove chaotic conflicting background shapes & duplicate script in Dark Mode */
[data-theme="dark"] .contact-bg-decorative-shape {
  display: none !important; /* Eliminates clashing olive polygon shape */
}

[data-theme="dark"] .contact-bg-gold-swoosh {
  display: none !important; /* Eliminates jarring diagonal yellow/gold polygon slice */
}

[data-theme="dark"] .contact-bg-cursive {
  display: none !important; /* Removes duplicate, floating neon cursive text */
}

/* Desk Laptop Photo behind form converted to a subtle, luxury watermark */
[data-theme="dark"] .contact-desk-photo-frame {
  opacity: 0.16 !important;
  filter: brightness(0.6) contrast(1.2) grayscale(0.2) !important;
  border: 1px solid rgba(204, 163, 75, 0.25) !important;
  box-shadow: none !important;
}

/* Section Headings & Tagline */
[data-theme="dark"] .contact-tagline-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

[data-theme="dark"] .contact-tagline-text {
  color: #cca34b !important;
}

[data-theme="dark"] .contact-tagline-dash {
  background-color: #cca34b !important;
}

[data-theme="dark"] .contact-main-heading {
  color: #ffffff !important;
}

[data-theme="dark"] .contact-heading-green {
  color: #ffffff !important;
}

[data-theme="dark"] .contact-heading-gold {
  color: #cca34b !important;
}

[data-theme="dark"] .contact-info-desc {
  color: #b5cbbf !important;
}

/* Left Contact Info Cards (Phone, Email, Address) */
[data-theme="dark"] .contact-detail-row {
  background: rgba(14, 32, 22, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 14px 18px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.25s ease !important;
}

[data-theme="dark"] .contact-detail-row:hover {
  border-color: rgba(204, 163, 75, 0.45) !important;
  background: rgba(20, 44, 30, 0.95) !important;
  transform: translateX(4px) !important;
}

[data-theme="dark"] .contact-detail-icon {
  background: rgba(204, 163, 75, 0.18) !important;
  color: #cca34b !important;
  border: 1px solid rgba(204, 163, 75, 0.35) !important;
}

[data-theme="dark"] .contact-detail-icon svg {
  stroke: #cca34b !important;
}

[data-theme="dark"] .contact-detail-label {
  color: #8fa699 !important;
}

[data-theme="dark"] .contact-detail-value {
  color: #ffffff !important;
}

[data-theme="dark"] .contact-detail-value:hover {
  color: #cca34b !important;
}

/* Social Media Follow Wrap */
[data-theme="dark"] .contact-social-wrap {
  padding-top: 14px !important;
}

[data-theme="dark"] .contact-social-label {
  color: #cca34b !important;
}

[data-theme="dark"] .contact-social-dash {
  background-color: #cca34b !important;
}

[data-theme="dark"] .contact-social-btn {
  background: rgba(16, 36, 25, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .contact-social-btn:hover {
  background: #cca34b !important;
  border-color: #cca34b !important;
  color: #072f1b !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(204, 163, 75, 0.4) !important;
}

/* Floating Message Form Card */
[data-theme="dark"] .contact-form-card {
  background: #0d1e14 !important;
  border: 1.5px solid rgba(204, 163, 75, 0.32) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(204, 163, 75, 0.08) !important;
  border-radius: 28px !important;
}

[data-theme="dark"] .contact-form-tagline-text {
  color: #cca34b !important;
}

[data-theme="dark"] .contact-form-tagline-line {
  background-color: #cca34b !important;
}

[data-theme="dark"] .contact-form-title {
  color: #ffffff !important;
}

[data-theme="dark"] .contact-form-subtitle {
  color: #a8c0b2 !important;
}

/* Form Inputs, Textareas & Icons */
[data-theme="dark"] .form-label,
[data-theme="dark"] .contact-form-label {
  color: #e2ede6 !important;
  font-weight: 600 !important;
}

[data-theme="dark"] .required-star {
  color: #cca34b !important;
}

[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] .contact-form-input,
[data-theme="dark"] .contact-form-select,
[data-theme="dark"] .contact-form-textarea {
  background-color: #07140c !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
}

[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] .form-textarea::placeholder {
  color: #60796b !important;
}

[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .form-textarea:focus {
  border-color: #cca34b !important;
  box-shadow: 0 0 0 3px rgba(204, 163, 75, 0.25) !important;
  background-color: #0b1d11 !important;
}

[data-theme="dark"] .form-input-icon {
  color: #cca34b !important;
}

/* Security Note */
[data-theme="dark"] .form-security-note {
  color: #a8c0b2 !important;
}

[data-theme="dark"] .form-security-note svg {
  color: #cca34b !important;
}

/* Send Message Button */
[data-theme="dark"] .btn-send-message,
[data-theme="dark"] .btn-submit-contact {
  background: linear-gradient(135deg, #cca34b 0%, #b88d37 100%) !important;
  color: #072f1b !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 20px rgba(204, 163, 75, 0.35) !important;
  border: none !important;
}

[data-theme="dark"] .btn-send-message:hover,
[data-theme="dark"] .btn-submit-contact:hover {
  background: linear-gradient(135deg, #e0b85c 0%, #cca34b 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 26px rgba(204, 163, 75, 0.45) !important;
}

[data-theme="dark"] .btn-send-message span,
[data-theme="dark"] .btn-send-message svg,
[data-theme="dark"] .btn-submit-contact span,
[data-theme="dark"] .btn-submit-contact svg {
  color: #072f1b !important;
  stroke: #072f1b !important;
}


/* ============================================================================
   15. RESPONSIVE MOBILE ENHANCEMENTS: FOOTER & ABOUT INNER BANNER
   ============================================================================ */

/* --- GLOBAL MOBILE FOOTER LAYOUT (Applies to all pages) --- */
@media (max-width: 768px) {
  .footer-master-canvas,
  .footer-sky-note {
    display: none !important;
  }

  .footer-container {
    padding: 44px 20px 24px !important;
    max-width: 100% !important;
  }

  /* Two clean columns for links instead of a tedious single-column vertical stretch */
  .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 16px !important;
    padding-right: 0 !important;
  }

  .footer-brand-col {
    grid-column: span 2 !important;
    max-width: 100% !important;
    margin-bottom: 4px !important;
  }

  .footer-brand-name {
    font-size: 26px !important;
    line-height: 1.15 !important;
    margin-bottom: 10px !important;
  }

  .footer-brand-desc {
    max-width: 100% !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-bottom: 18px !important;
  }

  .footer-socials {
    display: flex !important;
    gap: 12px !important;
    margin-bottom: 6px !important;
  }

  .footer-social-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
  }

  /* Column 2 & 3: Quick Links & Our Courses side by side */
  .footer-nav-col,
  .footer-col {
    grid-column: span 1 !important;
    min-width: 0 !important;
  }

  .footer-col-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
    white-space: nowrap !important;
  }

  .footer-nav-list,
  .footer-links-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
  }

  .footer-nav-link,
  .footer-link-item a {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Support column spans 2 or wraps gracefully */
  .footer-grid > .footer-nav-col:nth-of-type(3),
  .footer-grid > .footer-col:nth-of-type(3) {
    grid-column: span 2 !important;
    margin-top: 4px !important;
    padding-top: 18px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .footer-grid > .footer-nav-col:nth-of-type(3) .footer-nav-list,
  .footer-grid > .footer-col:nth-of-type(3) .footer-links-list {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px 18px !important;
  }

  /* Newsletter Column spans full width */
  .footer-newsletter-col {
    grid-column: span 2 !important;
    max-width: 100% !important;
    margin-top: 6px !important;
    padding-top: 18px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .footer-newsletter-desc {
    font-size: 13px !important;
    margin-bottom: 12px !important;
  }

  .footer-newsletter-form {
    padding: 3px 4px 3px 16px !important;
    border-radius: 9999px !important;
  }

  .footer-newsletter-input {
    font-size: 13.5px !important;
    padding: 9px 0 !important;
  }

  .footer-newsletter-submit {
    width: 38px !important;
    height: 38px !important;
  }

  /* Skyline & Bottom Bar */
  .footer-skyline-area {
    margin-top: 24px !important;
    padding-top: 14px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .footer-skyline-svg {
    width: 200px !important;
    height: 32px !important;
  }

  .footer-bottom-bar {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
    padding-top: 4px !important;
  }

  .footer-copyright,
  .footer-community-tag {
    font-size: 11.5px !important;
    text-align: center !important;
  }

  .btn-back-to-top {
    align-self: center !important;
    margin-top: 4px !important;
    width: 38px !important;
    height: 38px !important;
  }
}

/* --- ABOUT PAGE BANNER MOBILE OPTIMIZATIONS --- */
@media (max-width: 991px) {
  .about-banner-section {
    min-height: auto !important;
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .about-banner-container {
    padding: 105px 20px 24px !important;
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .banner-dark-content {
    max-width: 100% !important;
  }

  .banner-main-title {
    font-size: 34px !important;
    line-height: 1.15 !important;
    margin-bottom: 12px !important;
  }

  .banner-main-title .gold-jc {
    font-size: 34px !important;
    margin-left: 4px !important;
  }

  .banner-subtitle {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 18px !important;
    max-width: 100% !important;
  }

  .banner-visual-portal {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    min-width: 100% !important;
    height: 240px !important;
    margin-top: 10px !important;
    display: block !important;
  }

  .banner-gold-tab-accent {
    display: none !important;
  }

  .banner-prague-frame {
    width: 100% !important;
    height: 240px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45) !important;
    border: 1.5px solid rgba(204, 163, 75, 0.3) !important;
    position: relative !important;
  }

  .banner-prague-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 30% !important;
    display: block !important;
  }

  .banner-cursive-note {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 6 !important;
    text-align: right !important;
    transform: none !important;
    background: rgba(7, 24, 15, 0.82) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 6px 14px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(204, 163, 75, 0.35) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
  }

  .banner-cursive-l1,
  .banner-cursive-l2,
  .banner-cursive-l3 {
    font-size: 15px !important;
    line-height: 1.15 !important;
    color: #cca34b !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
  }

  .banner-cursive-underline {
    display: none !important;
  }

  .banner-badge-orbit-wrapper {
    position: absolute !important;
    left: 14px !important;
    bottom: 14px !important;
    top: auto !important;
    transform: none !important;
    z-index: 7 !important;
  }

  .banner-badge-orbit-ring {
    display: none !important;
  }

  .banner-badge-circle {
    width: 76px !important;
    height: 76px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border: 2px solid #cca34b !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35) !important;
  }

  .about-breadcrumb-bar {
    padding: 12px 20px !important;
  }

  .about-breadcrumb-pill {
    padding: 7px 16px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 480px) {
  .about-banner-container {
    padding: 95px 16px 20px !important;
  }

  .banner-main-title,
  .banner-main-title .gold-jc {
    font-size: 28px !important;
  }

  .banner-visual-portal,
  .banner-prague-frame {
    height: 210px !important;
  }

  .banner-cursive-note {
    padding: 5px 12px !important;
  }

  .banner-cursive-l1,
  .banner-cursive-l2,
  .banner-cursive-l3 {
    font-size: 13px !important;
  }

  .banner-badge-circle {
    width: 64px !important;
    height: 64px !important;
  }
}


/* --- FULL-BLEED BANNER BACKGROUND (Eliminates empty space on right side) --- */
.banner-bg-ambient-silhouette {
  width: 100% !important;
  background: linear-gradient(135deg, rgba(7, 24, 15, 0.9) 0%, rgba(11, 38, 25, 0.76) 50%, rgba(7, 24, 15, 0.92) 100%),
              url('https://images.unsplash.com/photo-1519671482749-fd09be7ccebf?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat !important;
  opacity: 0.38 !important;
}

/* --- OFFICIAL LOGO STYLING (assets/logo.png) --- */
.lms-brand-logo-img {
  width: 38px !important;
  height: 38px !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 6px !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}