/* =========================
      css/styles.css
  ========================= */

/* base hero tint */
:root { --hero-bg: rgba(14,68,120,0.06); }

/* ---- LIGHT THEME ---- */
html[data-theme="light"] {
  --bg: #ffffff;
  --card: #ffffff;
  --text: #0b1a2b;
  --muted: #6b7a89;
  --primary: #0ea5e9;
  --accent: #0057b7;
  --panel: #f8fafc;
}



/* ---- DARK THEME ---- */
html[data-theme="dark"] {
    --bg: #071422;
    --card: #0f2736;
    --panel: #12232d;
    --text: #e6f7ff;
    --muted: #9ab4c7; /* readable mid-gray/blue */
    --primary: #1da1f2;
    --accent: #0b6fb7;
    --hero-bg: rgba(255,255,255,0.03);
  }
  
/* page base */
html[data-theme="dark"], body[data-theme="dark"], html[data-theme="dark"] body {
  background: var(--bg) !important;
  color: var(--text) !important;
  color-scheme: dark !important;
}

/* Neutralize Bootstrap background utility clash in dark mode */
html[data-theme="dark"] .bg-body,
html[data-theme="dark"] .bg-body-tertiary,
html[data-theme="dark"] .bg-body-secondary,
html[data-theme="dark"] .bg-primary-subtle,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light {
  background: transparent !important;
}


/* NAVBAR */

/* ===== Fix: make the navbar Login CTA fully visible in dark mode ===== */
html[data-theme="dark"] nav.navbar .nav-item > a.nav-link.btn.btn-primary,
html[data-theme="dark"] nav.navbar .nav-link.btn-primary {
  background: linear-gradient(90deg, #1da1f2, #0b6fb7) !important; /* bright visible gradient */
  color: #ffffff !important;              /* force white text */
  border: 1px solid rgba(255,255,255,0.12) !important;
  padding: .38rem .98rem !important;      /* comfortable tap area */
  border-radius: .55rem !important;
  box-shadow: 0 8px 20px rgba(11,111,183,0.18) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.15) !important;
  opacity: 1 !important;                  /* ensure no inherited translucency */
  filter: none !important;
  pointer-events: auto !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hover / focus — small lift for clarity */
html[data-theme="dark"] nav.navbar .nav-item > a.nav-link.btn.btn-primary:hover,
html[data-theme="dark"] nav.navbar .nav-link.btn-primary:hover,
html[data-theme="dark"] nav.navbar .nav-item > a.nav-link.btn.btn-primary:focus,
html[data-theme="dark"] nav.navbar .nav-link.btn-primary:focus {
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 30px rgba(11,111,183,0.22) !important;
  text-decoration: none !important;
  color: #fff !important;
  outline: none !important;
}


/* ===== Navbar Login CTA: ensure visible / consistent in LIGHT mode ===== */

/* High-specificity, light-mode styling for the Login button */
html[data-theme="light"] nav.navbar .nav-item > a.nav-link.btn.btn-primary,
html[data-theme="light"] nav.navbar .nav-link.btn-primary {
  background: linear-gradient(90deg, #2b9cff, #007bff) !important; /* bright brand-blue */
  color: #ffffff !important;              /* white text for contrast */
  border: 1px solid rgba(0,123,255,0.18) !important;
  padding: .38rem .98rem !important;      /* comfortable tap/click area */
  border-radius: .55rem !important;
  box-shadow: 0 6px 18px rgba(0,123,255,0.12) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.08) !important;
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hover / focus lift (light) */
html[data-theme="light"] nav.navbar .nav-item > a.nav-link.btn.btn-primary:hover,
html[data-theme="light"] nav.navbar .nav-link.btn-primary:hover,
html[data-theme="light"] nav.navbar .nav-item > a.nav-link.btn.btn-primary:focus,
html[data-theme="light"] nav.navbar .nav-link.btn-primary:focus {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 26px rgba(0,123,255,0.18) !important;
  text-decoration: none !important;
  color: #fff !important;
  outline: none !important;
}

/* Ensure the login CTA doesn't inherit a faded opacity from other rules */
html[data-theme="light"] nav.navbar .nav-link.btn.btn-primary,
html[data-theme="light"] nav.navbar .nav-link.btn.btn-primary * {
  opacity: 1 !important;
  filter: none !important;
}

/* tiny safety: ensure toggler icon remains visible in light mode (if you removed earlier) */
html[data-theme="light"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23007bff' d='M4 7h22v2H4zM4 14h22v2H4zM4 21h22v2H4z'/%3E%3C/svg%3E") !important;
}


html[data-theme="dark"] .navbar {
  background: rgba(10,14,18,0.75) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
html[data-theme="light"] .navbar { background: #fff !important; }


/* dark mode and light mode button */

/* size + clean */
.theme-toggle-btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;        /* square button — change to 44px for slightly bigger */
  height: 40px;
  padding: 0;         /* emoji will be centered by flexbox */
  font-size: 1.15rem; /* emoji size */
  line-height: 1;
  border-radius: 8px; /* round corner */
  cursor: pointer;
  transition: background-color .12s ease, transform .08s ease, box-shadow .12s ease;
}

/* optional slightly larger variant */
.theme-toggle-btn--large { width: 44px; height:44px; font-size:1.25rem; }

/* subtle hover */
.theme-toggle-btn:hover {
  background-color: rgba(0,0,0,0.04) !important;
}
html[data-theme="dark"] .theme-toggle-btn:hover {
  background-color: rgba(255,255,255,0.06) !important;
}

/* focus — accessible but neat */
.theme-toggle-btn:focus {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(29,166,242,0.14) !important;
}

/* If anything (Bootstrap) still forces border/background via very specific selectors, override them */
.navbar .theme-toggle-btn,
.topbar .theme-toggle-btn,
.btn.theme-toggle-btn { /* twiddle to catch leftovers */
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* If you want round circular style */
.theme-toggle-btn.circle { border-radius: 999px; }

/* Ensure icon sits centered inside navbar */
.navbar .theme-toggle-btn { margin-left: .25rem; margin-right: .25rem; }

/* small-screen tweak */
@media (max-width:576px) {
  .theme-toggle-btn { width:25px; height:44px; font-size:1.25rem; }
}

/* dark mode and light mode button */

/* small-screen tweak */
@media (max-width:326px) {
  .navbar-toggler-icon { width:25px; height:25px; font-size:0.5rem; }
}

/* Sticky navbar polish (append to css/styles.css) */

/* Ensure the page doesn't jump under the sticky nav on anchored links */
:root {
  --navbar-height: 72px; /* adjust if your navbar height differs */
}
html { scroll-padding-top: var(--navbar-height); }

/* Slightly stronger default sticky shadow and transition */
.navbar.sticky-top {
  transition: box-shadow .18s ease, background-color .18s ease, backdrop-filter .18s ease;
  z-index: 1050; /* above other content (Bootstrap uses 1030/1040 usually) */
}

/* subtle translucent backdrop for better legibility */
html[data-theme="light"] .navbar.sticky-top {
  background-color: rgba(255,255,255,0.9) !important; /* slight white */
  border-bottom: 1px solid rgba(3,64,120,0.04) !important;
  backdrop-filter: blur(6px) saturate(105%);
}

/* dark-mode sticky nav */
html[data-theme="dark"] .navbar.sticky-top {
  background-color: rgba(6,12,18,0.6) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(6px) saturate(120%);
}

/* stronger elevated shadow once the user scrolls down */
.navbar.sticky-top.scrolled {
  box-shadow: 0 10px 30px rgba(6,20,40,0.12);
}

/* slightly reduce transparency on mobile for touch clarity */
@media (max-width: 991.98px) {
  .navbar.sticky-top {
    background-color: rgba(255,255,255,0.98) !important;
  }
  html[data-theme="dark"] .navbar.sticky-top {
    background-color: rgba(8,14,22,0.78) !important;
  }
}

/* Keep the login CTA visible and not clipped by the sticky bar (if necessary) */
.navbar .nav-link.btn {
  transform: translateZ(0);
}

/* If your nav height differs, set --navbar-height to the measured px value to keep anchored links correct */


/* ------------------------------
   Navbar Link Typography Upgrade
   ------------------------------ */

/* Base link style */
.navbar .nav-link {
  font-weight: 500;                  /* medium weight */
  font-size: 0.95rem;                /* smaller + sharp */
  letter-spacing: 0.2px;             /* tiny spacing improves clarity */
  color: var(--text) !important;
  padding: 0.55rem 0.75rem;          /* comfortable but tight */
  transition: color .15s ease, opacity .15s ease;
}

/* Active/hover states */
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--primary) !important;
  opacity: 0.85;
}

/* Dropdown items improved */
.dropdown-menu .dropdown-item {
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.15px;
  padding: 0.55rem 1rem;
}

/* Hover for dropdown */
.dropdown-menu .dropdown-item:hover {
  background: rgba(0, 123, 255, 0.06);
  color: var(--primary) !important;
}

/* Make Login button text consistent */
.navbar .btn.btn-primary.nav-link {
  font-weight: 600 !important;
  letter-spacing: 0.3px;
  font-size: 0.95rem;
}

/* Dark mode adjustments */
html[data-theme="dark"] .navbar .nav-link {
  color: var(--muted) !important;
}

html[data-theme="dark"] .navbar .nav-link:hover {
  color: var(--primary) !important;
}



/* Header */

/* hero light */
html[data-theme="light"] header.hero {
  background: #ffffff;
  color: var(--text);
}
html[data-theme="light"] header.hero .lead { color: #56707f; } 

header.hero { background: var(--hero-bg); }
html[data-theme="dark"] header.hero {
  background: linear-gradient(180deg, rgba(8,12,20,0.36), rgba(12,22,32,0.6)) !important;
  color: var(--text);
}
html[data-theme="light"] header.hero { color: var(--text); }

/* cards, spacing */
.section-header h3 { font-weight: 700; margin-bottom: .25rem; }
.section-header p { margin: 0; color: var(--muted, #6c757d); }

/* Small screens: hero sizing */
@media (max-width: 576px) {
  header.hero h1 { font-size: 1.6rem !important; line-height: 1.12 !important; }
  .display-6 { font-size: 1.8rem !important; }
}


/* HERO feature rows — mobile-first */

/* layout container for features */
.hero-features { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }

/* each feature row */
.hero-feature {
  display: grid;
  grid-template-columns: 56px 1fr auto; /* thumb / main / cta */
  gap: 12px;
  align-items: center;
  padding: 8px 6px;
  border-radius: 10px;
  transition: transform .12s ease, box-shadow .12s ease;
}

/* subtle hover on pointer devices */
@media (hover: hover) {
  .hero-feature:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(2,6,23,0.06); }
}

/* left thumbnail */
.feature-thumb {
  width: 56px; height: 56px; border-radius: 10px; object-fit: cover;
  box-shadow: 0 10px 20px rgba(2,6,23,0.04);
  display: block;
}

/* emoji tile (alternate to image) */
.feature-emoji {
  width: 56px; height: 56px; border-radius: 10px;
  display: inline-grid; place-items: center; font-size: 26px;
  background: linear-gradient(180deg, #fff, #f6f8ff);
  box-shadow: 0 10px 20px rgba(2,6,23,0.04);
}

/* main text area */
.feature-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }

/* title with longer & thicker underline via pseudo-element */
.feature-title {
  font-weight: 700; font-size: 1.02rem; line-height: 1.08; color: var(--text, #0b1720);
  position: relative; padding-bottom: 8px;
}

/* long colored underline */
.feature-title::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  height: 4px; width: 88px; border-radius: 4px;
  background: linear-gradient(90deg,#2f8cff,#00c0a6);
  opacity: .98;
}

/* subtitle smaller muted */
.feature-sub { color: var(--muted,#6c757d); font-size: .92rem; margin-top: -2px; }

/* CTA column */
.feature-cta { display:flex; align-items:center; justify-content:flex-end; }

/* BUTTON: gradient outlined border with glow + smooth transition */
.btn-gradient-outline {
  --g1: #2f8cff; --g2: #7a3cff;
  position: relative;
  padding: .48rem .9rem;
  border-radius: .6rem;
  font-weight: 600;
  background: transparent;
  color: var(--g1);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform .18s ease, color .18s ease;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

/* outer gradient border using pseudo */
.btn-gradient-outline::before {
  content:"";
  position:absolute; inset:0;
  padding:2px; border-radius:.75rem;
  background: linear-gradient(90deg,var(--g1),var(--g2));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index:-2;
  transition: filter .25s ease, transform .25s ease;
}

/* subtle glowing band behind border */
.btn-gradient-outline::after {
  content:"";
  position:absolute; inset:-2px;
  border-radius: .85rem;
  background: radial-gradient(circle at 10% 10%, rgba(47,140,255,0.12), transparent 10%),
              radial-gradient(circle at 90% 90%, rgba(122,60,255,0.10), transparent 10%);
  filter: blur(6px);
  opacity: 0;
  z-index: -3;
  transition: opacity .25s ease;
}

/* hover/focus effects */
.btn-gradient-outline:hover,
.btn-gradient-outline:focus {
  color: #062b4f;
  transform: translateY(-2px);
}
.btn-gradient-outline:hover::after,
.btn-gradient-outline:focus::after { opacity: 1; }

/* ensure keyboard focus visible */
.btn-gradient-outline:focus { outline: none; box-shadow: 0 8px 20px rgba(11,111,183,0.12); }

/* responsive: tablet and up -> place button at right (already grid does it) */
@media (min-width: 768px) {
  .hero-feature { grid-template-columns: 64px 1fr auto; padding: 10px; }
  .feature-thumb, .feature-emoji { width:64px; height:64px; border-radius:12px; }
  .feature-title { font-size:1.08rem; }
  .feature-title::after { width:120px; height:5px; border-radius:5px; }
  .btn-gradient-outline { padding: .56rem 1rem; }
}

/* smaller devices: stack CTA below text and center it */
@media (max-width: 575.98px) {
  .hero-feature { grid-template-columns: 56px 1fr; grid-template-rows: auto auto; gap:10px; align-items:start; }
  .feature-cta { grid-column: 2 / span 1; justify-content:flex-start; margin-top: -4px; }
  .feature-title::after { width:72px; height:4px; }
}

/* dark theme tweak */
html[data-theme="dark"] .feature-title::after { background: linear-gradient(90deg,#5fb7ff,#b07bff); }
html[data-theme="dark"] .btn-gradient-outline { color: #cfeafd; }


/* ============================
  Animated underline (left→right)
   - slide the gradient across the pseudo element
   - subtle, infinite loop
   - respects reduced-motion
   ============================ */

.feature-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 88px;
  border-radius: 4px;

  /* multi-color gradient so movement shows color change */
  background: linear-gradient(90deg, #2f8cff, #00c0a6, #7a3cff, #2f8cff);
  background-size: 240% 100%; /* make the gradient wider than element so it can slide */
  background-position: 0% 50%;
  opacity: .98;

  /* animation */
  animation: underline-slide 3s linear infinite;
  will-change: background-position;
}

/* keyframes for sliding gradient left → right */
@keyframes underline-slide {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* slower & larger underline for bigger screens (keeps proportions) */
@media (min-width: 768px) {
  .feature-title::after {
    width: 120px;
    height: 5px;
    border-radius: 5px;
    animation-duration: 3.6s;
  }
}

/* ============================
  Animated gradient border for button
   - same technique as underline but applied to ::before
   - adds subtle glowing ::after that also animates
   ============================ */

.btn-gradient-outline {
  --g1: #2f8cff; --g2: #7a3cff;
  position: relative;
  padding: .48rem .9rem;
  border-radius: .6rem;
  font-weight: 600;
  background: transparent;
  color: var(--g1);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform .18s ease, color .18s ease;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  overflow: visible;
}

/* animated outer gradient border using pseudo element */
.btn-gradient-outline::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: .75rem;

  /* wider gradient so it visibly moves */
  background: linear-gradient(90deg, var(--g1), #00c0a6, var(--g2), var(--g1));
  background-size: 300% 100%;
  background-position: 0% 50%;

  /* mask to create the 'outline' effect (same technique you had) */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  z-index: -2;
  transition: filter .25s ease, transform .25s ease;
  animation: border-slide 4s linear infinite;
  will-change: background-position;
}

/* subtle glowing band behind the button, pulses slightly */
.btn-gradient-outline::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: .85rem;
  background:
    radial-gradient(circle at 10% 10%, rgba(47,140,255,0.12), transparent 10%),
    radial-gradient(circle at 90% 90%, rgba(122,60,255,0.10), transparent 10%);
  filter: blur(6px);
  opacity: 0.6;
  z-index: -3;
  transition: opacity .25s ease, transform .25s ease;
  animation: glow-pulse 4s ease-in-out infinite;
}

/* keyframes to move the border gradient left→right */
@keyframes border-slide {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* slow pulsing glow behind button */
@keyframes glow-pulse {
  0%   { opacity: 0.45; transform: scale(1); }
  50%  { opacity: 0.85; transform: scale(1.03); }
  100% { opacity: 0.45; transform: scale(1); }
}

/* hover state: tighten and brighten */
.btn-gradient-outline:hover,
.btn-gradient-outline:focus {
  color: #062b4f;
  transform: translateY(-2px) scale(1.01);
}
.btn-gradient-outline:hover::after,
.btn-gradient-outline:focus::after { opacity: 1; transform: scale(1.05); }

/* slightly faster animation on hover for a responsive feel */
.btn-gradient-outline:hover::before,
.btn-gradient-outline:focus::before { animation-duration: 2s; }

/* reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .feature-title::after,
  .btn-gradient-outline::before,
  .btn-gradient-outline::after {
    animation: none !important;
    transition: none !important;
    background-position: 50% 50% !important;
  }
}

/* progree bar animation in hero features */

/* ensure parent is positioned for pseudo */
.feature-title { 
  position: relative; 
  display: inline-block;
}

/* underline — default state: static, 50% width */
.feature-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 50%;             /* default: half width */
  border-radius: 4px;
  background: linear-gradient(90deg, #2f8cff, #00c0a6, #7a3cff);
  background-size: 250% 100%;
  background-position: 0% 50%;
  transition: 
    width 0.35s ease, 
    transform 0.35s ease, 
    background-position 0.35s ease;
  transform-origin: left center;
}

/* on hover: animate underline width + slide gradient */
.hero-feature:hover .feature-title::after {
  width: 100%;              /* grow to full width */
  animation: underline-slide 2.2s linear infinite; /* start moving colors */
}

/* sliding gradient animation */
@keyframes underline-slide {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* responsive tweaks */
@media (max-width: 575.98px) {
  .feature-title::after { height: 3px; }
}



/* End of Header */

/* common css */

/* HEADINGS */
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3 {
  color: var(--text) !important;
}

/* CARDS & PANELS */
html[data-theme="dark"] .card,
html[data-theme="dark"] .course-card,
html[data-theme="dark"] .aside {
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005)) !important;
  border: 1px solid rgba(255,255,255,0.03) !important;
  box-shadow: 0 6px 14px rgba(2,6,23,0.36) !important;
  color: var(--text) !important;
}

/* Ensure card text and muted text readable */
html[data-theme="dark"] .card .card-title,
html[data-theme="dark"] .card p,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .lead { color: var(--muted) !important; }

/* IMAGES: avoid faded images in dark */
html[data-theme="dark"] img,
html[data-theme="dark"] .card-img-top {
  filter: none !important;
  opacity: 1 !important;
}

/* BUTTONS: neutralize Bootstrap primary and apply theme-specific */
.btn-primary, .btn.btn-primary {
  background: var(--primary) !important;
  color: #fff !important;
  border: 1px solid var(--accent) !important;
}

/* Light login */
html[data-theme="light"] .btn-primary { 
  background: #007bff !important; border-color: #007bff !important; color: #fff !important;
  box-shadow: 0 6px 16px rgba(0,123,255,0.12);
}

/* Dark login */
html[data-theme="dark"] .btn-primary {
  background: linear-gradient(90deg, var(--primary), var(--accent)) !important;
  color: #fff !important; border: none !important;
  box-shadow: 0 6px 18px rgba(29,161,242,0.12) !important;
}

/* Outlines and links */
html[data-theme="dark"] .btn-outline-primary { color: var(--primary) !important; border-color: rgba(255,255,255,0.04) !important; }
html[data-theme="dark"] a, html[data-theme="dark"] .nav-link { color: var(--primary) !important; }

/* Dropdown & modal backgrounds */
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .modal-content {
  background: var(--panel) !important; color: var(--text) !important;
  border: 1px solid rgba(255,255,255,0.03) !important;
}

/* Logo swap: keep both logos in DOM, show/hide per theme */
.logo-dark { display: none; }
.logo-light { display: inline-block; }
html[data-theme="dark"] .logo-dark { display: inline-block !important; }
html[data-theme="dark"] .logo-light { display: none !important; }


/* small-screen tweak */
@media (max-width:476px) {
  .logo-dark { display: none; height: 30px;}
.logo-light { display: inline-block; height: 30px;}
html[data-theme="dark"] .logo-dark { display: inline-block !important; }
html[data-theme="dark"] .logo-light { display: none !important; }
}

/* small-screen tweak */
@media (max-width:317px) {
  .logo-dark { display: none; height: 22px;}
.logo-light { display: inline-block; height: 22px;}
html[data-theme="dark"] .logo-dark { display: inline-block !important; }
html[data-theme="dark"] .logo-light { display: none !important; }
}

/* Accessibility focus */
html[data-theme="dark"] :focus { outline: 3px solid rgba(29,166,242,0.12) !important; outline-offset: 3px !important; }

/* final safety: ensure subtle bootstrap override for hero/cards */
html[data-theme="dark"] .bg-primary-subtle,
html[data-theme="dark"] .bg-body-secondary { background: transparent !important; }

/* Mobile menu icon visible in dark mode */
html[data-theme="dark"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><path stroke='white' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/></svg>") !important;
}


/* end of common css  */

/* brochure and table of contents cards  */

/* Ensure TOC & Brochure cards are full-width, stacked and visually match KPI cards */
#toc {
  margin-top: 0.35rem;
}

/* Make f-card in #toc span full available width and add spacing */
#toc .f-card {
  width: 100%;
  box-sizing: border-box;
  padding: 1.25rem;
  border-radius: 14px;
  margin-bottom: 1.25rem;
  background: var(--surface);
  box-shadow: var(--card-shadow);
  border: 1px solid rgba(11, 23, 36, 0.04);
}

/* Slight spacing tweak for the ordered list */
#toc ol {
  padding-left: 1.05rem;
}

/* Mobile: slightly reduce padding so cards don't feel cramped */
@media (max-width:575.98px) {
  #toc .f-card { padding: 1rem; }
}

/* end of brochure and table of contents cards  */



/* ===== products: distinctive image-card grid (mobile-first) ===== */
.product-zone {
  --card-bg: #ffffff;
  --card-border: rgba(11,111,183,0.06);
  --text: #081a2b;
  --muted: #60788a;
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
}

/* Heading */
.prod-big-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: .3rem;
}
.prod-big-sub {
  color: var(--muted);
  max-width: 680px;
  margin: 0 auto;
}

/* card */
.prod-card {
  border-radius: 14px;
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: 0 12px 36px rgba(2,6,23,0.06);
  display:flex;
  flex-direction:column;
  min-height: 240px;
  transition: transform .16s ease, box-shadow .16s ease;
}

/* top accent strip; inline style --strip used for per-card color */
.prod-card .card-top-strip {
  height: 6px;
  background: var(--strip, linear-gradient(90deg,#2f8cff,#00c0a6));
}

/* body */
.prod-card-body {
  padding: 20px;
  gap: 8px;
  display:flex;
  flex-direction:column;
}

/* icon bubble uses image instead of emoji */
.icon-wrap {
  width: 100%;
  height: 100%px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg,#f3f9ff,#eaf6ff);
  box-shadow: 0 8px 20px rgba(47,140,255,0.08);
  margin-bottom: 6px;
  overflow: hidden;
}
.icon-img { width:100%; height:100%; object-fit:cover; display:block; }

/* text */
.card-title { font-size:1.1rem; font-weight:700; margin:6px 0; color:var(--text); }
.card-desc { color:var(--muted); font-size:.95rem; margin-bottom:10px; }

/* CTA */
.btn-tile {
  display:inline-block;
  padding:.42rem .85rem;
  border-radius:.6rem;
  border:1px solid rgba(27,124,255,0.14);
  color:#1b7cff;
  font-weight:600;
  background:transparent;
  transition: background .16s ease, color .16s ease, transform .12s ease;
}
.btn-tile:hover {
  background: linear-gradient(90deg,#2f8cff,#7a3cff);
  color:#fff;
  transform: translateY(-3px);
}

/* hover lift */
@media (hover: hover) {
  .prod-card:hover { transform: translateY(-6px); box-shadow: 0 28px 60px rgba(2,6,23,0.12); }
}

/* optional preview */
.product-preview { max-height:320px; width:100%; object-fit:cover; }

/* responsive */
@media (max-width:575.98px) {
  .prod-big-title { font-size:1.45rem; }
  .prod-card { min-height:220px; }
  .icon-wrap { width:100%; height:100%; }
}
@media (min-width:768px) {
  .prod-big-title { font-size:2rem; }
  .prod-card { min-height:260px; }
}

/* ===== Dark theme support ===== */
html[data-theme="dark"] .product-zone {
  --card-bg: #0f1720;
  --card-border: rgba(255,255,255,0.03);
  --text: #e6eef9;
  --muted: #9fb0c1;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02));
}
html[data-theme="dark"] .prod-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
  box-shadow:none;
  border:1px solid rgba(255,255,255,0.03);
}
html[data-theme="dark"] .icon-wrap {
  background: linear-gradient(135deg,#081226,#0b1722);
  box-shadow: 0 8px 18px rgba(0,0,0,0.45);
}
html[data-theme="dark"] .card-top-strip { /* fallback if inline style removed */ background: linear-gradient(90deg,#5fb7ff,#b07bff); }
html[data-theme="dark"] .btn-tile {
  border:1px solid rgba(123,78,150,0.24);
  color:#cfeafd;
}
html[data-theme="dark"] .btn-tile:hover { background: linear-gradient(90deg,#7a3cff,#2f8cff); color:#fff; }

/* accessibility focus */
.prod-card:focus-within, .prod-card a:focus { outline:3px solid rgba(47,140,255,0.12); outline-offset:6px; }
.prod-card .icon-wrap { align-self:flex-start; }

/* Animated top-strip fill: uses --strip from existing styles */
.prod-card .card-top-strip {
  position: relative;
  height: 6px;
  background: transparent; /* base; actual fill is the pseudo-element */
  overflow: hidden;
}

/* the filling bar (starts zero width, fills to 100%) */
.prod-card .card-top-strip::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: var(--strip, linear-gradient(90deg,#2f8cff,#00c0a6));
  transition: width 820ms cubic-bezier(.22,.9,.36,1), opacity 220ms ease;
  will-change: width, opacity;
  opacity: 0.98;
  /* allow per-card stagger via --strip-delay */
  transition-delay: var(--strip-delay, 0ms);
}

/* when the card is marked `in-view` the fill runs */
.prod-card.in-view .card-top-strip::after {
  width: 100%;
  opacity: 1;
}

/* small easing adjustments for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .prod-card .card-top-strip::after {
    transition: none;
    width: 100%;
  }
}







/* Trainings page — part 1 */

/* hero carousel: taller and full-bleed within column */
.hero-carousel .carousel-inner { border-radius: .6rem; overflow: hidden; }
.hero-carousel .carousel-item img.hero-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}
@media (min-width: 992px) {
  .hero-carousel .carousel-item img.hero-img { height: 320px; }
}

/* filter chips */
.filter-row .btn {
  border-radius: 999px;
  padding: .28rem .6rem;
  font-size: .86rem;
  color: var(--muted);
}
.filter-row .btn.active, .filter-row .btn:hover {
  color: #fff;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(11,111,183,0.08);
}

/* pricing-card / training card polish */
.pricing-card {
  border-radius: .7rem;
  display:flex;
  gap:1rem;
  align-items:flex-start;
  border: 1px solid rgba(2,6,23,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,250,0.98));
  padding: .75rem;
}
html[data-theme="dark"] .pricing-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.03);
}

/* images & icons */
.course-thumb {
  width:86px; height:86px; object-fit:cover; border-radius:.6rem; box-shadow:0 8px 22px rgba(2,6,23,0.06); flex-shrink:0;
}
.course-icon {
  width:86px; height:86px; font-size:28px; display:grid; place-items:center; border-radius:.6rem; background:rgba(0,0,0,0.04);
  flex-shrink:0;
}
html[data-theme="dark"] .course-icon { background: rgba(255,255,255,0.02); color: var(--primary); }

/* typography in card */
.pricing-card strong { display:block; font-size:1rem; margin-bottom:.15rem; }
.pricing-card .small.text-muted { color: var(--muted); }

/* hover lift for larger screens */
@media (hover: hover) {
  .pricing-card:hover { transform: translateY(-6px); transition: transform .16s ease; box-shadow: 0 14px 40px rgba(2,6,23,0.06); }
}

/* responsive stacking for very small screens */
@media (max-width:575.98px) {
  .pricing-card { flex-direction: row; gap: .75rem; padding:.6rem; }
  .course-thumb, .course-icon { width:64px; height:64px; }
  .hero-carousel .carousel-item img.hero-img { height:180px; }
}

/* featured card minor polish */
#featured .card { border-radius:.7rem; }

/* subtle border for training grid container */
#courses { padding-top: .25rem; }

/* small CTA tuning */
.btn-primary { font-weight:700; border-radius:.55rem; padding:.55rem .9rem; }
.btn-outline-primary { border-radius:.55rem; }

/* light-mode liveliness: soft gradient panel for page blocks */
html[data-theme="light"] .card, html[data-theme="light"] .pricing-card {
  background: linear-gradient(180deg, rgba(248,250,252,1), rgba(255,255,255,1));
  border: 1px solid rgba(3,66,120,0.04);
}

/* dark-mode safety */
html[data-theme="dark"] .hero-img, html[data-theme="dark"] .course-thumb { box-shadow: 0 8px 22px rgba(255,255,255,0.03); }

/* accessibility focus */
.pricing-card a:focus, .filter-row button:focus { outline: 3px solid rgba(29,166,242,0.12); outline-offset: 3px; }








/* ==========================
   products/lms.html styling
   ========================== */

.hero-carousel .carousel-inner {
  border-radius: .6rem;
  overflow: hidden;
}

.hero-carousel .carousel-item img.hero-img {
  width: 100%;
  height: 360px;
  object-fit: cover;
}

@media (max-width: 576px) {
  .hero-carousel .carousel-item img.hero-img {
    height: 220px;
  }
}

/* LMS card polish */
.lms-card {
  border-radius: .75rem;
  display:flex;
  flex-direction:column;
  transition: transform .15s ease;
}

.lms-card:hover {
  transform: translateY(-4px);
}

.lms-img {
  max-height: 150px;
  width:100%;
  object-fit: cover;
  border-radius: .5rem;
  box-shadow: 0 6px 18px rgba(2,6,23,0.06);
}

html[data-theme="dark"] .lms-img {
  box-shadow: 0 6px 18px rgba(255,255,255,0.03);
}

html[data-theme="dark"] .lms-card {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
}

/* spacing */
.lms-card .btn { margin-top: .25rem; }

/* focus outline for accessibility */
.lms-card a:focus, .hero-carousel a:focus {
  outline: 3px solid rgba(29,166,242,0.12);
  outline-offset: 3px;
}




/* contact.html page additions (append) */

/* layout */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
}
@media (max-width: 991.98px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* inputs: match site style */
.form .form-control, .form .form-select, .form textarea {
  border-radius: .55rem;
  padding: .5rem .65rem;
}

/* aside */
.aside .wa .btn { display:inline-flex; align-items:center; gap:.5rem; }

/* modal body */
#docContent p { margin: 0 0 .6rem 0; color: var(--muted); }

/* small accessibility */
.form .invalid-feedback { font-size: .85rem; }

/* dark theme adjustments (relies on your theme vars) */
html[data-theme="dark"] .card { background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005)); border:1px solid rgba(255,255,255,0.03); }



/* ==  login page styles == */

/* variables fallbacks (already in your file perhaps) */
:root {
  --card: #ffffff;
  --muted: #6c757d;
  --primary: #0d6efd;
}

html[data-theme="dark"] {
  --card: rgba(255,255,255,0.02);
  --muted: rgba(255,255,255,0.65);
}

/* Topbar */
.topbar {
  padding: .5rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  border-bottom: 1px solid rgba(2,6,23,0.04);
  background: transparent;
}
html[data-theme="dark"] .topbar { border-bottom: 1px solid rgba(255,255,255,0.03); }
.topbar .back { text-decoration: none; color: inherit; font-weight: 600; }
.logo.small { height: 32px; }

/* Portal grid */
.portal-grid { display: grid; gap: 18px; grid-template-columns: 1fr; margin-bottom: 12px; }
@media (min-width: 768px) { .portal-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }

/* portal card */
.portal-card {
  border-radius: .75rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid rgba(2,6,23,0.04);
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
  min-height: 170px;
  box-shadow: 0 8px 22px rgba(2,6,23,0.04);
}
html[data-theme="dark"] .portal-card {
  border: 1px solid rgba(255,255,255,0.03);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
  box-shadow: 0 8px 22px rgba(255,255,255,0.01);
}
.portal-card:hover { transform: translateY(-6px); box-shadow: 0 18px 42px rgba(2,6,23,0.06); }
.portal-card:active { transform: translateY(-2px); }

/* card body layout */
.portal-card .card-body { padding: 1rem; display: flex; gap: .6rem; align-items: center; flex: 1; }
.icon-plate {
  width: 64px; height: 64px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 64px;
  box-shadow: 0 8px 22px rgba(2,6,23,0.04);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,247,250,1));
}
html[data-theme="dark"] .icon-plate {
  box-shadow: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
}

.body-text { flex: 1; min-width: 0; }
.body-text h3 { margin: 0 0 .25rem 0; font-weight: 700; font-size: 1.05rem; }
.body-text p { margin: 0; color: var(--muted); font-size: .92rem; }

.card-cta { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; flex: 0 0 auto; }
.btn-portal { white-space: nowrap; }

/* Story/notice */
.story { border-radius: .6rem; border: 1px solid rgba(2,6,23,0.04); padding: .9rem; background: transparent; }
html[data-theme="dark"] .story { border: 1px solid rgba(255,255,255,0.03); }

/* accessibility focus */
.portal-card:focus {
  outline: 3px solid rgba(29,166,242,0.12);
  outline-offset: 3px;
  box-shadow: 0 22px 48px rgba(11,111,183,0.06);
}
.portal-card .btn-portal:focus { box-shadow: 0 6px 18px rgba(11,111,183,0.08); }

/* small screens tweaks */
@media (max-width: 575.98px) {
  .icon-plate { width: 54px; height: 54px; flex: 0 0 54px; }
  .portal-card .btn-lg { font-size: .95rem; padding: .55rem .8rem; }
}



/* --------------------------
   collaborations page addon
   (append to your main CSS)
   -------------------------- */

/* hero */
.collab-hero-img {
  max-height: 320px;
  object-fit: cover;
  box-shadow: 0 12px 36px rgba(2,6,23,0.06);
  border-radius: .6rem;
}

/* marquees */
.marquee-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 12px 0;
  background: transparent;
  border-radius: .5rem;
}

.marquee {
  display: flex;
  align-items: center;
  gap: 20px;
  animation-name: collab-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

/* default animation duration is set on the element by JS */
@keyframes collab-scroll {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); } /* duplicated content scrolls half width */
}

.marq-img-item {
  height: 56px;
  object-fit: contain;
  filter: grayscale(0.05);
  opacity: 0.95;
  transition: transform .25s ease, opacity .25s ease;
}

/* slightly larger logos on hover */
.marq-img-item:hover { transform: translateY(-4px) scale(1.05); opacity: 1; }

/* gallery grid */
#gallery img {
  height: 180px;
  width: 100%;
  object-fit: cover;
  border-radius: .5rem;
  box-shadow: 0 10px 30px rgba(2,6,23,0.04);
  transition: transform .25s ease, box-shadow .25s ease;
}
#gallery a:hover img { transform: translateY(-6px); box-shadow: 0 20px 36px rgba(2,6,23,0.08); }


/* call to action card */
.card .btn-primary { min-width: 160px; }

/* lightweight responsive tweaks */
@media (max-width: 767.98px) {
  .collab-hero-img { max-height: 220px; margin-top: 12px; }
  .marq-img-item { height: 44px; }
  #gallery img { height: 150px; }
}

/* theme friendliness */
html[data-theme="dark"] .collab-hero-img { box-shadow: 0 12px 36px rgba(255,255,255,0.03); }
html[data-theme="dark"] #gallery img { box-shadow: 0 10px 30px rgba(255,255,255,0.02); }

/* small accessible focus state */
a:focus img, button:focus { outline: none; box-shadow: 0 0 0 4px rgba(29,166,242,0.12); border-radius: .4rem; }

/* utilities */
.hero-collab { margin-bottom: 1.5rem; }


/* Base industry logo styling */
.industry-logo {
  max-height: 120px;        /* desktop */
  width: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  padding: 8px;
  transition: transform 0.2s ease;
}

/* Hover (only desktop) */
@media (min-width: 768px) {
  .industry-logo:hover {
    transform: scale(1.06);
  }
  .industry-logo {
    max-height: 70px;       /* reduce size for mobile */
    padding: 4px;
  }
}

/* Mobile adjustments */
@media (max-width: 576px) {
  .industry-logo {
    max-height: 80px;       /* reduce size for mobile */
    padding: 4px;
  }

  .industry-collab-row {
    justify-content: center;  /* center logos */
    text-align: center;
    row-gap: 12px;
  }
}


/* ---------------------------------------
   GALLERY — mobile-first responsive design
------------------------------------------ */

/* Wrapper for gallery images */
.gallery-item img {
  width: 100%;
  height: 140px;            /* mobile height */
  object-fit: cover;        /* clean crop */
  border-radius: 12px;      /* modern rounding */
  display: block;
  background: #f4f4f4;      /* fallback */
  transition: transform 0.25s ease;
}

/* Hover effect (desktop only) */
@media (min-width: 768px) {
  .gallery-item img:hover {
    transform: scale(1.03);
  }
}

/* Tablet view — slightly larger images */
@media (min-width: 576px) {
  .gallery-item img {
    height: 180px;
  }
}

/* Desktop view — full height gallery */
@media (min-width: 992px) {
  .gallery-item img {
    height: 220px;
  }
}


/* Stats cards — mobile-first */


/* card shell */
.stat-card {
  border-radius: 8px;
  padding: 0.6rem;
  color: #fff;
  overflow: hidden;
  min-height: 120px;
  display: flex;
  align-items: stretch;
  transition: transform .16s ease, box-shadow .16s ease;
  box-shadow: 0 8px 20px rgba(2,6,23,0.04);
}

/* inner padding for consistency */
.stat-card-inner {
  padding: 14px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* big number */
.stat-number {
  font-size: 1.6rem;      /* mobile */
  font-weight: 600;
  line-height: 1;
  margin-bottom: 6px;
}

/* uppercase subtitle */
.stat-sub {
  font-size: 0.78rem;
  letter-spacing: .02em;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.95;
  margin-bottom: 8px;
}

/* supporting text */
.stat-desc {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.92);
  margin: 0;
  line-height: 1.35;
  max-width: 40ch;
}

/* hover / focus affordance (desktop) */
@media (min-width: 768px) {
  .stat-card:hover, .stat-card:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(2,6,23,0.08);
  }
  .stat-number { font-size: 2.2rem; } /* larger on tablet/desktop */
}

/* desktop uniform height */
@media (min-width: 992px) {
  .stat-card { min-height: 170px; }
  .stat-number { font-size: 2.6rem; }
}

/* color variants (use variables or direct colors) */
.stat-card--blue  { background: #2f3192; } /* deep indigo */
.stat-card--purple{ background: #4a2b6e; } /* purple */
.stat-card--teal  { background: #3a6f8f; } /* teal/blue */

/* dark-theme friendly tweaks */
html[data-theme="dark"] .stat-card {
  box-shadow: none;
  opacity: 0.98;
}







/* Partners strip: responsive, dark/light friendly */
.partners-section {
  --bg: var(--bg, transparent);
  --title: var(--text, #0b2030);
  --muted: var(--muted, #8b9aa3);
  position: relative;
  overflow: visible;
  background: transparent;
}

/* Heading */
.partners-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: .25rem;
  color: var(--title);
}
.partners-sub {
  margin-bottom: 1.25rem;
  color: var(--muted);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* viewport that hides overflow; keyboard-focusable */
.partners-viewport {
  position: relative;
  margin: 0 auto;
  padding: 18px 2rem;
  overflow: hidden;
  border-radius: 12px;
}

/* main track that will animate left->right */
.partners-track {
  display: flex;
  gap: 36px;
  align-items: center;
  will-change: transform;
}

/* row of logos (duplicated for seamless loop) */
.partners-row {
  display: flex;
  gap: 36px;
  align-items: center;
}

/* logo style */
.partner-logo {
  display: block;
  width: 120px;               /* large logos on desktop */
  height: 56px;
  object-fit: contain;
  opacity: .95;
  filter: grayscale(0.12) contrast(.95);
  transition: transform .18s ease, opacity .18s ease, filter .18s ease;
  user-select: none;
}

/* logo hover feedback */
.partners-row .partner-logo:hover,
.partners-row .partner-logo:focus {
  transform: translateY(-6px) scale(1.02);
  opacity: 1;
  filter: none;
}

/* blurred gradient masks on sides to produce that soft fade effect */
.partners-mask {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 90px;
  pointer-events: none;
  z-index: 3;
}
.partners-mask.mask-left {
  left: 0;
  background: linear-gradient(90deg, var(--bg, #fff), rgba(255,255,255,0));
  mix-blend-mode: normal;
}
.partners-mask.mask-right {
  right: 0;
  background: linear-gradient(270deg, var(--bg, #fff), rgba(255,255,255,0));
}

/* dark mode masks override to match background feel */
html[data-theme="dark"] .partners-mask.mask-left {
  background: linear-gradient(90deg, #140b14, rgba(20,11,20,0));
}
html[data-theme="dark"] .partners-mask.mask-right {
  background: linear-gradient(270deg, #140b14, rgba(20,11,20,0));
}

/* responsive sizes */
@media (min-width: 992px) {
  .partner-logo { width: 150px; height: 70px; }
  .partners-viewport { padding: 28px 3rem; }
}
@media (max-width: 575.98px) {
  .partner-logo { width: 92px; height: 44px; }
  .partners-viewport { padding: 12px 1rem; }
  .partners-section { padding-bottom: 2rem; }
}

/* accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .partners-track { animation: none !important; transform: none !important; }
}




/* --- CTA section --- */
.cta-hero { padding: 3.2rem 0; border-radius: 14px; margin: 2.25rem 0; }
.cta-hero .container { max-width: 980px; }

.cta-title {
  font-size: 2.6rem;
  font-weight: 800;
  margin-bottom: .6rem;
  color: var(--text, #0d2430);
}
.cta-sub { color: var(--muted,#6b7c88); margin-bottom: 1.6rem; }

/* gradient pill */
.cta-btn {
  display:inline-block;
  padding:.85rem 2.2rem;
  border-radius: 999px;
  color:#fff;
  font-weight:700;
  background: linear-gradient(90deg,#40e1d5,#4bb7ff,#9b5bff);
  box-shadow: 0 28px 50px rgba(74,104,255,0.12);
  text-decoration:none;
  transition: transform .14s ease, box-shadow .2s ease;
}
.cta-btn:hover { transform: translateY(-4px); box-shadow: 0 38px 80px rgba(74,104,255,0.16); }

/* LIGHT mode background */
html:not([data-theme="dark"]) .cta-hero {
  background: linear-gradient(180deg, #f7fbff, #f1f8ff);
  color: #06263a;
}

/* DARK mode background */
/* ===== Dark-mode CTA — high contrast, accessible ===== */
html[data-theme="dark"] .cta-btn {
  /* strong, saturated gradient */
  background: linear-gradient(90deg, #7a3cff 0%, #4b8cff 55%, #2fb8ff 100%);
  /* force readable text */
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important; /* Safari */
  text-shadow: 0 1px 0 rgba(0,0,0,0.45);         /* subtle depth for legibility */
  /* soften the glow but keep presence */
  box-shadow: 0 28px 46px rgba(47,140,255,0.12), inset 0 -6px 18px rgba(0,0,0,0.08);
  /* make sure button sits above any overlay */
  position: relative;
  z-index: 2;
  /* keep same pill shape and interaction */
  border: none;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .16s ease, filter .12s ease;
}

/* Hover/focus states retain contrast and add brightness */
html[data-theme="dark"] .cta-btn:hover,
html[data-theme="dark"] .cta-btn:focus {
  transform: translateY(-4px);
  box-shadow: 0 40px 90px rgba(47,140,255,0.14), inset 0 -6px 18px rgba(0,0,0,0.06);
  filter: saturate(1.05) brightness(1.03);
  outline: none; /* accessible outline handled below */
}

/* keyboard focus visible (accessibility) */
html[data-theme="dark"] .cta-btn:focus-visible {
  outline: 3px solid rgba(79,154,255,0.18);
  outline-offset: 6px;
}

/* If you have inner spans or icons inside the button, make the text inside white too */
html[data-theme="dark"] .cta-btn * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Optional: force blend-mode off if some dark overlay was using mix-blend-mode */
html[data-theme="dark"] .cta-hero, 
html[data-theme="dark"] .cta-hero * {
  mix-blend-mode: normal !important;
}


/* responsive */
@media (max-width:575.98px) {
  .cta-title { font-size:1.6rem; }
  .cta-btn { padding:.7rem 1.4rem; }
}


/* Testimonials layout (REPLACE existing block with this) */

/* basic layout */
.oa-testimonials { background: var(--oa-bg); padding: 56px 0; }
.oa-wrap { max-width: 1100px; margin: 0 auto; padding: 0 18px; text-align:center; }

.oa-title {
  font-size: clamp(1.5rem, 3.6vw, 2.4rem);
  margin-bottom: 18px;
  color: var(--oa-text);
  font-weight: 700;
}

/* container hides overflow so slides never escape viewport */
.oa-carousel { position: relative; margin-top: 10px; outline: none; overflow: hidden; }

/* track & slides: switch to flex so each slide is exactly viewport-width */
.oa-track {
  display: flex;
  gap: 24px;
  transition: transform 700ms cubic-bezier(.2,.9,.25,1);
  will-change: transform;
  width: 100%;
  box-sizing: border-box;
  /* make sure the transform origin doesn't cause rounding issues */
  transform: translateZ(0);
}

/* each slide is full width of the carousel viewport */
.oa-slide {
  flex: 0 0 100%;
  box-sizing: border-box;
  padding: 0 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 260px; /* lowered to avoid overflow on small screens */
}

/* card style */
.oa-card {
  width: 100%;
  max-width: 920px;
  border-radius: 14px;
  padding: clamp(16px, 2.6vw, 32px);
  box-shadow: var(--oa-shadow);
  position: relative;
  overflow: visible;
  background: var(--oa-card-bg);
  display:flex;
  align-items:flex-start;
  gap: 16px;
  margin: 0 auto;
  box-sizing: border-box;
  border: 1px solid rgba(0,0,0,0.04);
}

/* gradient border effect (outer) */
.oa-card::before{
  content:"";
  position:absolute;
  inset: -3px;
  border-radius: 16px;
  padding: 2px;
  background: linear-gradient(90deg,var(--oa-accent1),var(--oa-accent2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 1;
  pointer-events:none;
}

/* quote mark */
.oa-quote-mark {
  font-size: 3.2rem;
  color: rgba(47,140,255,0.12);
  margin-right: 6px;
  align-self:flex-start;
  font-family: serif;
}

/* body */
.oa-card-body { flex:1 1 auto; display:flex; flex-direction:column; gap: 12px; text-align:left; }
.oa-text { font-size: clamp(0.98rem, 1.4vw, 1.05rem); line-height:1.6; color: var(--oa-text); margin: 0 0 8px 0; }

/* meta */
.oa-meta { display:flex; gap:12px; align-items:center; margin-top: 6px; }
.oa-avatar { width:44px; height:44px; border-radius:50%; object-fit:cover; display:block; box-shadow: 0 2px 10px rgba(2,6,23,0.06); border: 3px solid rgba(255,255,255,0.9); }
.oa-meta strong { display:block; color:var(--oa-text); font-weight:700; }
.oa-role { font-size:.88rem; color:var(--oa-muted); margin-top:2px; }

/* controls: place controls overlay centered, but inside carousel so no negative overflow */
.oa-controls {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  z-index: 6;
  pointer-events: auto;
}
.oa-prev, .oa-next {
  background:transparent;
  border:0;
  color:var(--oa-text);
  font-size:1.1rem;
  width:36px;
  height:36px;
  border-radius:50%;
  display:inline-grid;
  place-items:center;
  cursor:pointer;
  box-shadow: none;
}
.oa-prev:hover, .oa-next:hover { transform: translateY(-2px); }

/* dots */
.oa-dots { display:flex; gap:8px; align-items:center; }
.oa-dots button { width:10px; height:10px; border-radius:50%; border:0; background: rgba(0,0,0,0.08); cursor:pointer; padding:0; }
.oa-dots button[aria-selected="true"] { background: linear-gradient(90deg,var(--oa-accent1),var(--oa-accent2)); transform: scale(1.25); }

/* responsive layout - card layout becomes column on small widths */
@media (max-width: 880px) {
  .oa-card { flex-direction:column; padding:16px; max-width: 720px; }
  .oa-quote-mark { display:none; }
  .oa-meta { margin-top:10px; }
  .oa-controls { bottom: 8px; }
  .oa-slide { min-height: 260px; padding: 0 8px; }
}

/* very small devices */
@media (max-width: 420px) {
  .oa-card { padding:12px; border-radius: 12px; }
  .oa-avatar { width:40px; height:40px; }
  .oa-title { font-size: 1.25rem; }
}

/* reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .oa-track { transition: none; }
  .oa-prev, .oa-next { transition: none; }
}

/* dark tweaks */
html[data-theme="dark"] .oa-card::before { opacity: .9; }
html[data-theme="dark"] .oa-card { border: 1px solid rgba(255,255,255,0.03); }
html[data-theme="dark"] .oa-avatar { border-color: rgba(255,255,255,0.06); }


/* global box-sizing (prevents padding from adding unexpected width) */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

/* Prevent images/iframes from exceeding their container width */
img, picture, video, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ===== Scoped fixes for Trainings page only (safe: won't affect other pages) =====
   Paste at the end of css/styles.css or load after it. Targets only #main area.
   Screenshot reference: /mnt/data/9fab2394-8d76-406f-b5a1-3215791c17d6.png
*/

/* 1) Ensure box-sizing so widths behave predictably inside #main */
#main, #main * { box-sizing: border-box; }

/* 2) Prevent any image/media inside main from overflowing their container */
#main img,
#main picture,
#main video,
#main iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 3) Allow flex children inside main to shrink (fixes many Bootstrap flex overflow issues) */
#main .row,
#main .d-flex,
#main .container,
#main .container-fluid {
  min-width: 0; /* lets contents shrink instead of forcing parent wider */
}

/* 4) Tame carousels used in this page: keep slides clipped inside carousel area */
#main .carousel,
#main .carousel-inner,
#main .carousel-item {
  overflow: hidden;
}

/* 5) Prevent any element inside main that accidentally uses 100vw or fixed huge width from causing horizontal scroll */
#main *[style*="width:100vw"],
#main *[style*="width: 100vw"],
#main .maybe-100vw,
#main .full-bleed {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* 6) Protect against unbroken long content (URLs, long words) inside cards/columns */
#main .card,
#main .pricing-card,
#main .training-card,
#main .course-thumb,
#main .course-icon,
#main .stat-card {
  overflow-wrap: break-word;
  word-break: break-word;
  -ms-word-break: break-all;
}

/* 7) If a child uses absolute positioning inside #main and may overflow, keep the overflow clipped to its ancestor */
#main .hero-carousel,
#main .hero-carousel * {
  max-width: 100%;
  box-sizing: border-box;
}

/* 8) Small additional safety: prevent accidental horizontal overflow on very small viewports inside main only */
@media (max-width: 640px) {
  #main {
    padding-left: 12px;
    padding-right: 12px;
    overflow-x: hidden; /* scoped only to main content */
  }

  /* slightly reduce carousel control hit area to avoid pushing outside */
  #main .carousel-control-prev,
  #main .carousel-control-next {
    padding: 8px;
  }
}