/* Existing theme retained; specificity is managed by scoped CourseTron rules below. */
/* =============================================
   CourseTron Apple-Style Theme Override
   Applied: Oct 2026 — DO NOT MINIFY THIS FILE
   ============================================= */

/* ── 1. DESIGN TOKENS ── */
:root {
  --primary-color:    #0071E3;
  --primary-color-2:  #0071E3;
  --secondery-color:  #0071E3;
  --color-4:          #0071E3;
  --color-7:          #0A0A0A;
  --color-17:         #0071E3;
  --bg-white:         #FFFFFF;
  --bg-white-2:       #F5F5F7;
  --bg-white-3:       #FFFFFF;
  --bg-white-4:       #F5F5F7;
  --bg-white-5:       #FFFFFF;
  --bg-white-6:       #6E6E73;
  --bg-white-7:       #FFFFFF;
  --color-1:          #1D1D1F;
  --color-2:          #1D1D1F;
  --color-3:          #6E6E73;
  --color-5:          #1D1D1F;
  --color-6:          #6E6E73;
  --color-8:          rgba(255,255,255,0.72);
  --color-9:          #FFFFFF;
  --color-10:         #1D1D1F;
  --color-11:         #6E6E73;
  --color-12:         rgba(0,113,227,0.12);
  --color-13:         #6E6E73;
  --color-14:         #1D1D1F;
  --color-15:         rgba(0,113,227,0.24);
  --color-16:         rgba(0,113,227,0.48);
  --hover-color:      #F5F5F7;
  --hover-color-2:    #F5F5F7;
  --border-color:     rgba(0,0,0,0.08);
  --color-linear:     linear-gradient(135deg, #F5F5F7 0%, #E8E8ED 100%);
  --box-shadow:       0 2px 20px rgba(0,0,0,0.08);

  /* New Apple tokens */
  --ct-white:         #FFFFFF;
  --ct-black:         #0A0A0A;
  --ct-surface:       #F5F5F7;
  --ct-surface-2:     #E8E8ED;
  --ct-accent:        #0071E3;
  --ct-accent-hover:  #0077ED;
  --ct-text-primary:  #1D1D1F;
  --ct-text-secondary:#6E6E73;
  --ct-text-tertiary: #86868B;
  --ct-border:        rgba(0,0,0,0.08);
  --ct-radius:        12px;
  --ct-radius-lg:     20px;
  --ct-radius-xl:     28px;
  --ct-shadow-sm:     0 1px 4px rgba(0,0,0,0.06);
  --ct-shadow:        0 2px 20px rgba(0,0,0,0.08);
  --ct-shadow-lg:     0 8px 40px rgba(0,0,0,0.12);
  --ct-transition:    0.25s cubic-bezier(0.4,0,0.2,1);
}

/* ── 2. BASE RESET ── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
  background-color: #FFFFFF;
  color: var(--ct-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── 3. NAVIGATION ── */
header,
.header-area,
.navbar,
.main-header,
nav {
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  box-shadow: none;
}

.navbar-brand img,
.header-logo img,
.logo img {
  height: 36px;
  width: auto;
}

/* Nav links */
.navbar-nav .nav-link,
.main-menu ul li a,
header nav a {
  color: var(--ct-text-primary);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color var(--ct-transition);
}
.navbar-nav .nav-link:hover,
.main-menu ul li a:hover {
  color: var(--ct-accent);
}

/* Currency picker */
.ct-currency-picker select {
  background: var(--ct-surface);
  border: 1px solid var(--ct-border);
  border-radius: 8px;
  font-size: 13px;
  padding: 5px 10px;
  color: var(--ct-text-primary);
  cursor: pointer;
  font-family: inherit;
}

/* ── 4. BUTTONS ── */
.btn-primary,
.course-enroll-btn,
.enroll-btn,
[class*="btn-purple"],
[class*="purple-btn"],
.btn[style*="754FFE"],
.btn[style*="754ffe"],
a.btn-primary {
  background: var(--ct-accent) !important;
  background-color: var(--ct-accent) !important;
  border-color: var(--ct-accent) !important;
  border-radius: 980px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: -0.01em !important;
  padding: 10px 22px !important;
  transition: all var(--ct-transition) !important;
  box-shadow: none !important;
}
.btn-primary:hover,
.course-enroll-btn:hover,
.enroll-btn:hover {
  background: var(--ct-accent-hover);
  border-color: var(--ct-accent-hover);
  transform: scale(1.02);
}

.btn-outline-primary,
.btn-border {
  border: 1.5px solid var(--ct-accent);
  color: var(--ct-accent);
  background: transparent;
  border-radius: 980px;
  font-weight: 500;
  font-size: 14px;
  padding: 9px 22px;
  transition: all var(--ct-transition);
}
.btn-outline-primary:hover {
  background: var(--ct-accent);
  color: #fff;
}

/* Purple override */
[style*="background:#754FFE"],
[style*="background: #754FFE"],
[style*="background-color:#754FFE"],
[style*="background:#754ffe"],
[style*="background-color:#754ffe"],
[style*="background-color: #754ffe"] {
  background-color: var(--ct-accent) !important;
}
[style*="color:#754FFE"],
[style*="color: #754FFE"],
[style*="color:#754ffe"] {
  color: var(--ct-accent) !important;
}

/* ── 5. HERO SECTION ── */
.hero-area,
.banner-area,
.slider-area,
.hero-section,
section[class*="hero"],
section[class*="banner"] {
  background: linear-gradient(180deg, #F5F5F7 0%, #FFFFFF 100%);
  padding: 80px 0 60px;
}

.hero-area h1,
.banner-area h1,
.hero-section h1,
[class*="hero"] h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ct-text-primary);
}

.hero-area p,
.banner-area p,
.hero-section p {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--ct-text-secondary);
  line-height: 1.6;
  font-weight: 400;
}

/* ── 6. SECTION TITLES ── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ct-text-primary);
  letter-spacing: -0.02em;
}

.section-title h2,
.section__title h2,
[class*="section"] h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* ── 7. COURSE CARDS ── */
.course-item,
.course-card,
.single-course,
[class*="course-item"],
[class*="course-card"] {
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: var(--ct-radius-lg);
  box-shadow: var(--ct-shadow-sm);
  overflow: hidden;
  transition: transform var(--ct-transition), box-shadow var(--ct-transition);
}

.course-item:hover,
.course-card:hover,
.single-course:hover,
[class*="course-item"]:hover {
  transform: translateY(-4px);
  box-shadow: var(--ct-shadow-lg);
  border-color: rgba(0,0,0,0.1);
}

.course-item .course-title,
.course-card .course-title,
.single-course h4,
.single-course h3 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ct-text-primary);
  line-height: 1.4;
}

.course-item .price,
.course-card .price,
.course-price,
[class*="price"] {
  font-size: 16px;
  font-weight: 700;
  color: var(--ct-text-primary);
}

.course-item .old-price,
.course-card .old-price,
.original-price,
[class*="old-price"],
[class*="original-price"] {
  font-size: 13px;
  color: var(--ct-text-tertiary);
  text-decoration: line-through;
  font-weight: 400;
}

.course-item .thumb,
.course-card .thumb,
.course-item img,
.course-card img {
  border-radius: 0;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.course-item:hover img,
.course-card:hover img {
  transform: scale(1.03);
}

/* ── 8. COURSE DETAIL PAGE ── */
.course-details-area,
.course-detail-area,
[class*="course-detail"] {
  background: #FFFFFF;
}

.course-details-content h2,
.course-details-content h3 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.course-widget,
.course-sidebar,
[class*="enroll-card"],
[class*="course-widget"] {
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius-lg);
  box-shadow: var(--ct-shadow);
  background: #FFFFFF;
  overflow: hidden;
}

.course-price-area .price,
.course-price-area h3,
.course-price-area h4 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ct-text-primary);
}

/* ── 9. SECTIONS & CARDS (general) ── */
.single-categories,
[class*="category-item"],
[class*="cat-item"] {
  border-radius: var(--ct-radius);
  border: 1px solid var(--ct-border);
  background: var(--ct-surface);
  transition: transform var(--ct-transition), box-shadow var(--ct-transition);
}
.single-categories:hover,
[class*="category-item"]:hover {
  transform: translateY(-3px);
  box-shadow: var(--ct-shadow);
}

.single-instructor,
[class*="instructor-item"],
[class*="instructor-card"] {
  border-radius: var(--ct-radius-lg);
  background: #FFFFFF;
  border: 1px solid var(--ct-border);
  box-shadow: var(--ct-shadow-sm);
  transition: transform var(--ct-transition), box-shadow var(--ct-transition);
}
.single-instructor:hover { transform: translateY(-4px); box-shadow: var(--ct-shadow); }

.single-testimonial,
[class*="testimonial-item"],
[class*="review-item"] {
  border-radius: var(--ct-radius-lg);
  background: var(--ct-surface);
  border: none;
  box-shadow: none;
  padding: 28px;
}

/* ── 10. BACKGROUNDS & SECTIONS ── */
section {
  background-color: #FFFFFF;
}
section:nth-child(even),
[class*="section-bg"],
[class*="bg-grey"],
[class*="bg-gray"],
[class*="grey-bg"],
[class*="gray-bg"] {
  background-color: var(--ct-surface);
}

[class*="purple-bg"],
[class*="bg-purple"],
[style*="background:#261954"],
[style*="background: #261954"],
[style*="background:#754FFE"],
[style*="background:#754ffe"] {
  background: linear-gradient(135deg, #1D1D1F 0%, #3A3A3C 100%) !important;
}

/* ── 11. FOOTER ── */
footer,
.footer-area,
.main-footer {
  background: #1D1D1F;
  color: rgba(255,255,255,0.72);
}
footer h5, footer h4, footer h3,
.footer-area h5, .footer-area h4 {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
footer a, .footer-area a {
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  transition: color var(--ct-transition);
}
footer a:hover, .footer-area a:hover {
  color: #FFFFFF;
}
.footer-bottom,
[class*="footer-bottom"] {
  background: #0A0A0A;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* ── 12. FORMS & INPUTS ── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select {
  border: 1.5px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ct-text-primary);
  background: #FFFFFF;
  transition: border-color var(--ct-transition), box-shadow var(--ct-transition);
  outline: none;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--ct-accent);
  box-shadow: 0 0 0 4px rgba(0,113,227,0.12);
}

/* ── 13. BADGES & TAGS ── */
.badge,
[class*="badge"],
.tag,
[class*="tag"] {
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 4px 8px;
}

/* ── 14. STAR RATINGS ── */
.rating-star i,
[class*="star"] i,
.fa-star { color: #F9B23A; }

/* ── 15. PROGRESS BARS ── */
.progress-bar,
[class*="progress-bar"] {
  background: var(--ct-accent);
  border-radius: 100px;
}

/* ── 16. TABS ── */
.nav-tabs .nav-link.active,
[class*="tab"] .active {
  color: var(--ct-accent);
  border-bottom: 2px solid var(--ct-accent);
  background: transparent;
}

/* ── 17. PAGINATION ── */
.page-item.active .page-link,
[class*="pagination"] .active {
  background: var(--ct-accent);
  border-color: var(--ct-accent);
  border-radius: 8px;
}

/* ── 18. ALERTS & NOTICES ── */
.alert-success { background: rgba(52,199,89,0.08); border-color: rgba(52,199,89,0.2); color: #1A7F37; border-radius: var(--ct-radius); }
.alert-danger  { background: rgba(255,59,48,0.08); border-color: rgba(255,59,48,0.2); color: #C41230; border-radius: var(--ct-radius); }
.alert-info    { background: rgba(0,113,227,0.08); border-color: rgba(0,113,227,0.2); color: #004EA8; border-radius: var(--ct-radius); }

/* ── 19. DASHBOARD / USER AREA ── */
.dashboard-area,
.user-dashboard,
[class*="dashboard"] {
  background: var(--ct-surface);
}
.dashboard-menu,
[class*="dashboard-nav"],
[class*="sidebar-menu"] {
  background: #FFFFFF;
  border-right: 1px solid var(--ct-border);
  border-radius: var(--ct-radius);
}
.dashboard-menu li a,
[class*="dashboard-nav"] li a {
  border-radius: 8px;
  margin: 2px 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ct-text-primary);
  transition: background var(--ct-transition);
}
.dashboard-menu li a:hover,
.dashboard-menu li.active a {
  background: var(--ct-surface);
  color: var(--ct-accent);
}

/* ── 20. LOGIN / SIGNUP ── */
.login-area,
.register-area,
.sign-up-area,
[class*="login-area"],
[class*="register-area"] {
  background: var(--ct-surface);
  min-height: 100vh;
}
.login-form-wrapper,
.register-form-wrapper,
[class*="login-form"],
[class*="register-form"] {
  background: #FFFFFF;
  border-radius: var(--ct-radius-xl);
  box-shadow: var(--ct-shadow-lg);
  padding: 48px;
  border: 1px solid var(--ct-border);
}

/* ── 21. MOBILE RESPONSIVE ── */
@media (max-width: 768px) {
  .hero-area h1, .banner-area h1 {
    font-size: 2rem;
    letter-spacing: -0.02em;
  }
  .course-item, .course-card, .single-course {
    border-radius: 16px;
  }
  .login-form-wrapper,
  .register-form-wrapper,
  [class*="login-form"],
  [class*="register-form"] {
    padding: 28px 20px;
    border-radius: 20px;
  }
  body { font-size: 15px; }
  .ct-currency-picker { font-size: 12px; }
}

@media (max-width: 480px) {
  .hero-area, .banner-area, .slider-area {
    padding: 60px 0 40px;
  }
  .section-title h2 { font-size: 1.6rem; }
  .btn-primary { width: 100%; text-align: center; }
}

/* ── 22. SMOOTH SCROLLING & TRANSITIONS ── */
html { scroll-behavior: smooth; }

a { transition: color var(--ct-transition); }

img { transition: transform 0.3s ease; }

/* ── 23. RELATED COURSES BLOCK ── */
.ct-related-courses {
  background: var(--ct-surface);
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius-lg);
  padding: 24px;
  margin: 32px 0;
}
.ct-related-courses h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ct-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}
.ct-related-courses a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ct-accent);
  transition: background var(--ct-transition);
  text-decoration: none;
}
.ct-related-courses a:hover {
  background: rgba(0,113,227,0.08);
  text-decoration: none;
}

/* ── 24. SCROLL TO TOP BUTTON ── */
#scrollTop,
.scroll-to-top,
[class*="scroll-top"] {
  background: var(--ct-accent);
  border-radius: 50%;
  box-shadow: var(--ct-shadow);
  border: none;
}

/* ── 25. SELECTION COLOR ── */
::selection {
  background: rgba(0,113,227,0.18);
  color: var(--ct-text-primary);
}

/* CourseTron design system. Legacy styles remain intact; this stylesheet loads last. */
:root, body.ct-theme {
 --ct-white:#FFFFFF; --ct-black:#0A0A0A; --ct-surface:#F5F5F7;
 --ct-accent:#0071E3; --ct-accent-hover:#005BB5; --ct-accent-soft:#EAF3FF;
 --ct-text-primary:#1D1D1F; --ct-text-secondary:#6E6E73;
 --ct-border:rgba(0,0,0,.10); --ct-shadow:0 2px 20px rgba(0,0,0,.08);
 --ct-radius:12px; --ct-radius-lg:20px; --ct-pill:999px;
 --ct-font:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif;
 --ct-space:8px; --ct-page:1200px; --ct-focus:0 0 0 3px rgba(0,113,227,.24);
 --ct-motion:180ms; --ct-success:#167348; --ct-danger:#B42318;
 --primary-color:var(--ct-accent); --primary-color-2:var(--ct-text-secondary);
 --color-4:var(--ct-accent); --color-1:var(--ct-text-primary); --color-10:var(--ct-text-primary);
 --color-3:var(--ct-text-secondary); --color-6:var(--ct-text-secondary); --color-11:var(--ct-text-secondary);
 --color-12:var(--ct-accent-soft); --color-15:var(--ct-accent-soft); --color-17:var(--ct-accent);
 --bg-white:var(--ct-white); --bg-white-2:var(--ct-surface); --hover-color:var(--ct-surface);
 --hover-color-2:var(--ct-surface); --border-color:var(--ct-border); --box-shadow:var(--ct-shadow);
 --coursera-blue:var(--ct-accent); --chip-orange:var(--ct-accent); --ai-orange:var(--ct-accent);
 --hx-primary:var(--ct-accent); --hx-accent:var(--ct-accent); --hx-text:var(--ct-text-primary);
 --hx-muted:var(--ct-text-secondary);
}
body.ct-theme {font-family:var(--ct-font);color:var(--ct-text-primary);background:var(--ct-white);line-height:1.6}
body.ct-theme :is(h1,h2,h3,h4,h5,h6,p,li,td,th,input,button,select,textarea,.container,.cx-auth-wrapper) {font-family:var(--ct-font)}
body.ct-theme :is(h1,h2,h3,h4,h5,h6) {letter-spacing:-.025em}
body.ct-theme :is(a,button,input,select,textarea):focus-visible {outline:2px solid var(--ct-accent);outline-offset:3px}
body.ct-theme :is(button,.btn,.ct-button) {transition:background-color var(--ct-motion),box-shadow var(--ct-motion)}
body.ct-theme .btn-primary,body.ct-theme .btn-login,body.ct-theme .cx-btn-submit {background:var(--ct-accent);border-color:var(--ct-accent);color:var(--ct-white);border-radius:var(--ct-radius)}
body.ct-theme .btn-primary:hover,body.ct-theme .btn-login:hover {background:var(--ct-accent-hover);border-color:var(--ct-accent-hover)}
body.ct-theme .menubar {background:var(--ct-white);border-bottom:1px solid var(--ct-border)}
body.ct-theme .menubar .navbar {padding-block:calc(var(--ct-space)*2);background:var(--ct-white)}
body.ct-theme .menubar .navbar .container {gap:var(--ct-space)}
body.ct-theme .navbar-brand {max-width:180px;flex-shrink:0}
body.ct-theme .navbar-brand img {max-width:100%;object-fit:contain}
body.ct-theme .navbar .nav-link {color:var(--ct-text-primary);border-radius:var(--ct-radius)}
body.ct-theme .navbarHover,body.ct-theme .sub-category-menu {border-radius:var(--ct-radius);border:1px solid var(--ct-border);box-shadow:var(--ct-shadow)}
body.ct-theme .ct-nav-link {white-space:nowrap;font-size:14px;padding:12px;color:var(--ct-text-primary)}
body.ct-theme .ct-nav-link:hover {color:var(--ct-accent)}
body.ct-theme .ct-currency-picker select {border-color:var(--ct-border);border-radius:var(--ct-radius);min-height:40px;background:var(--ct-white);color:var(--ct-text-primary)}
/* Electronics-first hero and reusable learning cards. */
body.ct-theme .ct-hero {background:var(--ct-surface);padding:calc(var(--ct-space)*10) 0}
.ct-shell {width:min(var(--ct-page),100% - var(--ct-space)*6);margin-inline:auto}
.ct-hero-grid {display:grid;grid-template-columns:1.2fr 1fr;gap:calc(var(--ct-space)*7);align-items:center}
.ct-eyebrow {font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--ct-accent);margin-bottom:calc(var(--ct-space)*3)}
body.ct-theme .ct-hero h1 {font-size:clamp(36px,4.8vw,64px);font-weight:700;line-height:1.08;margin:0 0 calc(var(--ct-space)*3);color:var(--ct-text-primary)}
.ct-hero h1 span {color:var(--ct-accent)}
body.ct-theme .ct-hero p {font-size:18px;line-height:1.7;color:var(--ct-text-secondary);max-width:580px}
.ct-actions {display:flex;flex-wrap:wrap;gap:calc(var(--ct-space)*2);margin-block:calc(var(--ct-space)*3)}
.ct-button {display:inline-flex;align-items:center;justify-content:center;gap:var(--ct-space);min-height:46px;padding:10px 22px;border-radius:var(--ct-pill);background:var(--ct-accent);border:1px solid var(--ct-accent);color:var(--ct-white);font-size:14px;font-weight:500;text-decoration:none;cursor:pointer}
.ct-button:hover {background:var(--ct-accent-hover);color:var(--ct-white)}
.ct-button-secondary {background:var(--ct-white);color:var(--ct-accent);border-color:var(--ct-border)}
.ct-search {display:flex;gap:var(--ct-space);background:var(--ct-white);border:1px solid var(--ct-border);border-radius:var(--ct-radius);padding:var(--ct-space);margin-top:calc(var(--ct-space)*4)}
.ct-search input {min-width:0;flex:1;border:0;background:transparent;padding:var(--ct-space);font-size:16px}
.ct-search:focus-within {box-shadow:var(--ct-focus)}
.ct-device {background:var(--ct-white);border:1px solid var(--ct-border);box-shadow:var(--ct-shadow);border-radius:var(--ct-radius-lg);padding:calc(var(--ct-space)*4)}
.ct-device-top {display:flex;justify-content:space-between;border-bottom:1px solid var(--ct-border);padding-bottom:calc(var(--ct-space)*2);margin-bottom:calc(var(--ct-space)*3);font-size:13px;color:var(--ct-text-secondary)}
.ct-chip {display:grid;place-items:center;width:100px;height:100px;margin:0 auto calc(var(--ct-space)*3);background:var(--ct-accent-soft);border:1px solid var(--ct-accent);border-radius:var(--ct-radius-lg);color:var(--ct-accent)}
.ct-chip svg {width:60px;height:60px}
.ct-device h2 {font-size:24px;text-align:center;margin-bottom:calc(var(--ct-space)*3)}
.ct-workflow {display:grid;gap:var(--ct-space)}
.ct-workflow a {display:flex;align-items:center;gap:calc(var(--ct-space)*2);padding:calc(var(--ct-space)*2);background:var(--ct-surface);border-radius:var(--ct-radius);color:var(--ct-text-primary)}
.ct-step {color:var(--ct-accent);font-size:12px;font-weight:700}
.ct-section {padding-block:calc(var(--ct-space)*7)}
.ct-section-heading {display:flex;align-items:end;justify-content:space-between;gap:calc(var(--ct-space)*3);margin-bottom:calc(var(--ct-space)*3)}
.ct-section-heading h2 {font-size:clamp(26px,3vw,36px);margin:0}
.ct-section-heading p {color:var(--ct-text-secondary);margin:var(--ct-space) 0 0}
.ct-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--ct-space)*3)}
.ct-tile {display:block;background:var(--ct-white);border:1px solid var(--ct-border);border-radius:var(--ct-radius-lg);padding:calc(var(--ct-space)*3);color:var(--ct-text-primary);height:100%}
.ct-tile:hover {color:var(--ct-text-primary);box-shadow:var(--ct-shadow)}
.ct-tile h3 {font-size:19px;margin:var(--ct-space) 0}
.ct-tile p {color:var(--ct-text-secondary);font-size:14px;margin:0}
.ct-tile i {color:var(--ct-accent);font-size:22px}
.ct-note {font-size:13px;color:var(--ct-text-secondary);margin-top:calc(var(--ct-space)*2)}
/* Existing course discovery and checkout hooks are retained. */
body.ct-theme .courses-card .courses-card-body,body.ct-theme .courses-card-body {border-radius:var(--ct-radius-lg);background:var(--ct-white);overflow:hidden}
body.ct-theme .courses-card .courses-card-body:hover {transform:translateY(-2px)}
body.ct-theme .courses-card .courses-card-body .courses-text {padding:calc(var(--ct-space)*3)}
body.ct-theme .courses-text h5 {color:var(--ct-text-primary)}
body.ct-theme .courses-price-left {flex-wrap:wrap;gap:var(--ct-space)}
body.ct-theme .courses-price-left h5 {color:var(--ct-text-primary);font-variant-numeric:tabular-nums}
body.ct-theme .bread-crumb {background:var(--ct-surface);background-image:none}
body.ct-theme .courses-details {padding-block:calc(var(--ct-space)*6)}
body.ct-theme .courses-details h1 {font-size:clamp(28px,3.5vw,44px);line-height:1.2;color:var(--ct-text-primary)}
body.ct-theme .courses-details :is(p,.info-tag,.created-by-instructor,.info-tag a) {color:var(--ct-text-secondary)}
body.ct-theme .course-right-section .course-card {margin-top:0;border:1px solid var(--ct-border);border-radius:var(--ct-radius-lg);box-shadow:var(--ct-shadow);overflow:hidden}
body.ct-theme .course-decription {padding-top:calc(var(--ct-space)*4)}
body.ct-theme .course-decription .course-right-section {top:calc(var(--ct-space)*3)}
body.ct-theme .course-right-section .button a {border-radius:var(--ct-radius);min-height:46px}
body.ct-theme .course-left-side {border-radius:var(--ct-radius-lg)}
body.ct-theme .course-left-side .nav {gap:var(--ct-space);flex-wrap:wrap}
body.ct-theme .course-left-side .nav-link {padding:12px;color:var(--ct-text-secondary)}
body.ct-theme .course-left-side .nav-link.active {color:var(--ct-accent);border-color:var(--ct-accent)}
body.ct-theme .course-description {line-height:1.8}
body.ct-theme .ak-btn,body.ct-theme .chip-btn,body.ct-theme .btn-explore {background:var(--ct-accent);color:var(--ct-white);border-color:var(--ct-accent)}
body.ct-theme .ai-hardware-wrapper {background:var(--ct-black)}
body.ct-theme .section-header h2 {background:none;color:var(--ct-text-primary)}
/* Student workspace and authentication; icon and monospace fonts are preserved. */
body.ct-theme .wish-list-body {background:var(--ct-surface);padding-block:calc(var(--ct-space)*5)}
body.ct-theme .wish-list-search,body.ct-theme .my-course-1-full-body {border-radius:var(--ct-radius-lg)}
body.ct-theme .btn-profile-menu {font-weight:500;min-height:44px;display:flex;align-items:center;border-radius:var(--ct-radius)}
body.ct-theme .btn-profile-menu.active,body.ct-theme .btn-profile-menu:hover {background:var(--ct-accent-soft);color:var(--ct-accent)}
body.ct-theme .login-container {background:var(--ct-surface)}
body.ct-theme .login-card {border:1px solid var(--ct-border);border-radius:var(--ct-radius-lg);box-shadow:var(--ct-shadow)}
body.ct-theme .login-info-side,body.ct-theme .cx-left-panel {background:var(--ct-black);color:var(--ct-white)}
body.ct-theme .login-info-side h1,body.ct-theme .login-info-side h2 {color:var(--ct-white)}
body.ct-theme .cx-left-content h1 span {color:var(--ct-white)}
body.ct-theme .cx-stat {border-color:var(--ct-accent)}
body.ct-theme .cx-auth-wrapper {width:100%;margin-inline:0}
body.ct-theme .form-control,body.ct-theme .form-select {border-radius:var(--ct-radius)}
body.ct-theme .form-control:focus {border-color:var(--ct-accent);box-shadow:var(--ct-focus)}
body.ct-theme .forgot-link,body.ct-theme .register-link {color:var(--ct-accent)}
body.ct-theme #cookieConsentContainer {background:var(--ct-text-primary);color:var(--ct-white);border-radius:var(--ct-radius);box-shadow:var(--ct-shadow);max-width:calc(100vw - 32px)}
body.ct-theme #cookieConsentContainer p,body.ct-theme #cookieConsentContainer a {color:var(--ct-white)}
body.ct-theme #cookieConsentContainer .cookieButton a {background:var(--ct-accent);border-radius:var(--ct-radius)}
.ct-table-wrap {overflow:auto;max-width:100%}
.ct-status {display:inline-block;padding:4px 10px;background:var(--ct-accent-soft);color:var(--ct-accent);border-radius:var(--ct-pill);font-size:12px}
.ct-lab-details {background:var(--ct-surface);padding:calc(var(--ct-space)*2);border-radius:var(--ct-radius);overflow-wrap:anywhere}
@media(max-width:991px){
 .ct-hero-grid {grid-template-columns:1fr;gap:calc(var(--ct-space)*4)}
 .ct-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
 body.ct-theme .ct-hero {padding-block:calc(var(--ct-space)*6)}
 body.ct-theme .ct-nav-link {display:none}
 body.ct-theme .course-decription .course-right-section {position:static;max-width:100%}
}
@media(max-width:575px){
 .ct-shell {width:calc(100% - var(--ct-space)*4)}
 .ct-grid {grid-template-columns:1fr}
 .ct-section {padding-block:calc(var(--ct-space)*4)}
 .ct-device {padding:calc(var(--ct-space)*3)}
 .ct-section-heading {align-items:start;flex-direction:column}
 body.ct-theme .ct-hero p {font-size:16px}
 .ct-search {flex-wrap:wrap}.ct-search input {width:100%;flex-basis:100%}.ct-search .ct-button {width:100%}
 body.ct-theme .navbar-brand {max-width:140px}
 body.ct-theme .search-input-floating {min-width:0;width:100%}
 body.ct-theme .header-search {min-width:0;max-width:100%}
 body.ct-theme .login-form-side {padding:24px}
 body.ct-theme .cx-right-panel {padding:24px 16px}
 body.ct-theme .course-description {margin-inline:16px}
 body.ct-theme .course-heading-info .info-tag {font-size:14px;margin-right:16px}
 body.ct-theme .course-decription #myTab {margin-inline:0;justify-content:start}
 body.ct-theme .courses-price {flex-wrap:wrap;gap:var(--ct-space)}
 body.ct-theme input,body.ct-theme select,body.ct-theme textarea {font-size:16px}
 body.ct-theme .btn,body.ct-theme .btn-bar {min-height:44px}
}
@media(prefers-reduced-motion:reduce){
 body.ct-theme .marquee-track,body.ct-theme .hx-card-float,body.ct-theme .hx-badge::before {animation:none}
 body.ct-theme .courses-card-body {transition:none;transform:none}
}

/* Targeted legacy purple declarations only; preserve media conditions. */
body.ct-theme .home_1st {
  --color-4 :  var(--ct-accent) !important;
  --color-12: rgba(0,113,227,0.227) !important;
  --color-15: rgba(0,113,227,0.345) !important
}
body.ct-theme .home_2nd {
  --color-4 :  var(--ct-accent) !important;
  --color-12: rgba(0,113,227,0.227) !important;
  --color-15: rgba(0,113,227,0.345) !important
}
body.ct-theme .home_3rd {
  --color-4 :  var(--ct-accent) !important;
  --color-12: rgba(0,113,227,0.227) !important;
  --color-15: rgba(0,113,227,0.345) !important
}
body.ct-theme .home_4th {
  --color-4 :  var(--ct-accent) !important;
  --color-12: rgba(0,113,227,0.227) !important;
  --color-15: rgba(0,113,227,0.345) !important
}
body.ct-theme .home_5th {
  --color-4 :  var(--ct-accent) !important;
  --color-12: rgba(0,113,227,0.227) !important;
  --color-15: rgba(0,113,227,0.345) !important
}
body.ct-theme .menu_pro_tgl_bg ul li:hover a {
  color: var(--ct-accent) !important
}
body.ct-theme .menu_pro_tgl_bg ul li:hover i {
  color: var(--ct-accent) !important
}
body.ct-theme .menu_pro_tgl_bg ul li:hover {
  color: var(--ct-accent) !important
}
body.ct-theme .menu_pro_tgl_bg ul li:hover:after {
  background-color: var(--ct-accent) !important
}
body.ct-theme .menu_pro_wish-flex .spandiv span {
  color: var(--ct-accent) !important
}
body.ct-theme .menu_pro_wish-f-b .prcd a {
  color: var(--ct-accent) !important;
  border: 1.5px solid var(--ct-accent) !important
}
body.ct-theme .menu_pro_btn .btn {
  background-color: var(--ct-accent) !important
}
body.ct-theme .dropdown-menu li a:hover {
  color: var(--ct-accent) !important
}
body.ct-theme .navbar-nav .navbarHover a:hover {
  color: var(--ct-accent) !important
}
body.ct-theme .navbar-nav .navbarHover a:hover .has-sub-category {
  color: var(--ct-accent) !important
}
body.ct-theme .search-icon {
	border: 1px solid var(--ct-accent) !important
}
body.ct-theme .m-cross-icon,body.ct-theme .m-search-icon {
	border: 1px solid var(--ct-accent) !important
}
body.ct-theme .search-item span:hover {
  background-color: var(--ct-accent) !important
}
body.ct-theme .cross-icon {
	border: 1px solid var(--ct-accent) !important
}
body.ct-theme .m-cross-icon {
	border: 1px solid var(--ct-accent) !important
}
body.ct-theme .h-1-banner .h-1-banner-text h1 span {
    color: var(--ct-accent) !important
}
body.ct-theme .inline-form .search-btn {
	background: var(--ct-accent) !important
}
body.ct-theme .search-option .submit-cls {
    background-color: var(--ct-accent) !important
}
body.ct-theme .courses-card-body:hover .courses-text h5 {
  color: var(--ct-accent) !important
}
body.ct-theme .courses-card-body .courses-text .courses-price .courses-price-right i {
    color: var(--ct-accent) !important
}
body.ct-theme .expert-instructor .instructor-card .instructor-card-body:hover h3 {
    color: var(--ct-accent) !important
}
body.ct-theme .expert-instructor .instructor-card .instructor-card-body:hover p {
    color: var(--ct-accent) !important
}
body.ct-theme .qustion .accordion-item .active {
    color: var(--ct-accent) !important
}
body.ct-theme .footer a:hover {
  color: var(--ct-accent) !important
}
body.ct-theme .footer .copyright .footer-privacy a:hover {
  color: var(--ct-accent) !important
}
body.ct-theme .grid-view-body .courses-card .courses-text .review-icon span {
  background-color: var(--ct-accent) !important
}
body.ct-theme .course-category h3::after {
  background-color: var(--ct-accent) !important
}
body.ct-theme .pagenation .active {
    background-color: var(--ct-accent) !important
}
body.ct-theme .ac-lecture li a span i {
	color: var(--ct-accent) !important
}
body.ct-theme .accordion-body-2 .accordion-body-video .icon i {
  background-color: var(--ct-accent) !important
}
body.ct-theme .accordion-body-2 .accordion-body-video h2 a:hover {
  color: var(--ct-accent) !important
}
body.ct-theme .accordion-body-2 .accordion-time h2:hover {
  color: var(--ct-accent) !important
}
body.ct-theme .instructor .instructor-icon i:hover {
  background-color: var(--ct-accent) !important
}
body.ct-theme .c-d-3-banner .card-video-icon i:hover {
  background-color: var(--ct-accent) !important
}
body.ct-theme .include-icon i {
  color: var(--ct-accent) !important
}
body.ct-theme .error-body-text a {
  background-color: var(--ct-accent) !important
}
body.ct-theme .blog-body .left-tag a:hover {
  background-color: var(--ct-accent) !important
}
body.ct-theme .comment #phone:hover {
  border-color: var(--ct-accent) !important
}
body.ct-theme .blog-body .right-section .right-tag a:hover {
  background-color: var(--ct-accent) !important
}
body.ct-theme .sing-up-right h3 span {
  color: var(--ct-accent) !important
}
body.ct-theme .purchase-btn:hover {
  background-color: var(--ct-accent) !important;
  border-color: var(--ct-accent) !important
}
body.ct-theme .faq .faq-accrodion .faq-acc-heading h4 {
  color: var(--ct-accent) !important
}
body.ct-theme .form-section #exampleFormControlInput1:focus-visible {
  border-color: var(--ct-accent) !important
}
body.ct-theme .about-us .about-us-btn a {
  background-color: var(--ct-accent) !important
}
body.ct-theme .course-play-body .course-play-left-body .body-1 a:hover {
  background-color:  var(--ct-accent) !important
}
body.ct-theme .course-play-body .course-play-left-body .video .card-video-icon {
  background-color: var(--ct-accent) !important
}
body.ct-theme .course-play-body .course-play-left-body .video p a {
  color: var(--ct-accent) !important
}
body.ct-theme .course-play-body .course-play-left-body .body-1 p a:hover {
  color: var(--ct-accent) !important
}
body.ct-theme .course-play-tab .nav-tabs .nav-item.show .nav-link,body.ct-theme .nav-tabs .nav-link.active {
  border-bottom: 1.5px solidvar(--ct-accent) !important;
  color: var(--ct-accent) !important
}
body.ct-theme .course-play-tab .nav-tabs .nav-link:focus,body.ct-theme .nav-tabs .nav-link:hover {
  border-bottom:  1.5px solidvar(--ct-accent) !important
}
body.ct-theme .course-play-tab .like p {
  color: var(--ct-accent) !important
}
body.ct-theme .course-play-tab .like button {
  color: var(--ct-accent) !important
}
body.ct-theme .s_list_one li::before {
  background-color: rgba(0,113,227,0.345) !important
}
body.ct-theme .s_list_one li::after {
  background-color: var(--ct-accent) !important
}
body.ct-theme .speech-item-content .inner .title::before {
  background: var(--ct-accent) !important
}
body.ct-theme .EbannerTop .search-option .form-control {
	border: 1px solid var(--ct-accent) !important
}
body.ct-theme .eFaq .accordion-button {
  color: var(--ct-accent) !important
}
body.ct-theme .eFaq .accordion-button::after {
	border: 1px solid var(--ct-accent) !important
}
body.ct-theme .faq-accrodion .accordion .accordion-button::before {
	background-color: var(--ct-accent) !important
}
body.ct-theme .Espeech-item .speech-item-content .no::after {
	background-color: var(--ct-accent) !important
}
body.ct-theme .ePromotion h4 span {
  color: var(--ct-accent) !important
}
body.ct-theme .eBtn .btn:hover {
  background-color: var(--ct-accent) !important;
  border-color: var(--ct-accent) !important
}
body.ct-theme .eStudent a:hover {
  background: var(--ct-accent) !important
}
body.ct-theme .Etop_right p::after {
	background-color: rgba(0,113,227,0.431) !important
}
body.ct-theme .navbar-nav .navbarHover li ul li a:hover {
	background-color: var(--ct-accent) !important
}
body.ct-theme .pagenation .active,body.ct-theme .page-item.active .page-link {
    background-color: var(--ct-accent) !important;
    box-shadow: 0px 7px 18px -8px var(--ct-accent) !important
}
body.ct-theme ul.step-down li::before {
      background-color: rgba(0,113,227,0.345) !important
}
body.ct-theme .blog-search-input.form-control:focus {
    border-color: var(--ct-accent) !important
}
body.ct-theme .btn-fill {
    border: 1px solid var(--ct-accent) !important
}
body.ct-theme .btn-fill:hover {
    background: var(--ct-accent) !important
}
body.ct-theme .follow-btn {
	border: 1px solid var(--ct-accent) !important
}
body.ct-theme .follow-btn:hover {
    background-color: var(--ct-accent) !important
}
@media (max-width: 1200px) {
    body.ct-theme .sing-up-right .resend-code .btn {
    background-color: var(--ct-accent) !important
    }
}
@media all and (max-width: 991px) {
    body.ct-theme .btn-bar {
    color: var(--ct-accent) !important
    }
}
@media all and (max-width: 991px) {
        body.ct-theme .sing-up-right .resend-code .btn {
        background-color: var(--ct-accent) !important
        }
}
@media all and (max-width: 900px) {
    body.ct-theme .sing-up-right .resend-code .btn {
    background-color: var(--ct-accent) !important
    }
}
@media all and (max-width: 900px) {
    body.ct-theme .sing-up-right .resend-code .btn {
    background-color: var(--ct-accent) !important
    }
}
@media all and (max-width: 420px) {
    body.ct-theme .sing-up-right .resend-code .btn {
    background-color: var(--ct-accent) !important
    }
}
@media all and (max-width: 420px) {
    body.ct-theme .invoice-no .invoice-color {
    color: var(--ct-accent) !important
    }
}
@media all and (max-width: 420px) {
    body.ct-theme .invoice-bill .invoice-total h2 {
    color: var(--ct-accent) !important
    }
}

/* Mobile navigation and form polish from rendered checks. */
body.ct-theme .ct-tile textarea.form-control {height:auto;min-height:110px}
body.ct-theme .ct-tile input[type=file] {height:auto}
body.ct-theme .course-heading-info .info-tag {text-transform:none;padding:0;font-size:14px}
body.ct-theme .course-heading-info .fa-star:not(.filled) {color:var(--ct-text-secondary)}
body.ct-theme .ct-tile .h4,body.ct-theme .ct-tile .h5 {font-size:20px}
body.ct-theme .offcanvas select[data-ct-currency] {width:100%;min-height:44px}
@media(max-width:575px){
 body.ct-theme .sub-header .icon-left ul {flex-wrap:nowrap;justify-content:space-between}
 body.ct-theme .sub-header .icon-left ul a {font-size:10px}
 body.ct-theme .sub-header .right-icon {display:none}
 body.ct-theme .sub-header {padding-block:4px}
 body.ct-theme .courses-details {padding-block:32px}
 body.ct-theme .courses-details .info-tag {margin-bottom:8px}
}