/* ============================================================
   Yubo Technical Center — Main Stylesheet
   Design: Premium Educational / South Asian Tech Institute
   ============================================================ */

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

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --primary:       #4f46e5;
  --primary-dark:  #3730a3;
  --primary-light: #818cf8;
  --secondary:     #06b6d4;
  --accent:        #f59e0b;
  --success:       #10b981;
  --danger:        #ef4444;
  --dark:          #0f172a;
  --dark-2:        #1e293b;
  --dark-3:        #334155;
  --text:          #1e293b;
  --text-muted:    #64748b;
  --light:         #f8fafc;
  --white:         #ffffff;
  --border:        #e2e8f0;
  --shadow-sm:     0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
  --shadow:        0 4px 24px rgba(15,23,42,.12);
  --shadow-lg:     0 20px 60px rgba(15,23,42,.18);
  --radius:        12px;
  --radius-lg:     20px;
  --font-heading:  'Syne', sans-serif;
  --font-body:     'DM Sans', sans-serif;
  --transition:    all .25s ease;
}

/* ── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* .container,
.container-fluid {
  max-width: 100%;
} */

.row {
  min-width: 0;
}

main,
section,
footer,
header,
nav {
  max-width: 100vw;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--dark);
}

a { color: var(--primary); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--primary-dark); }
img { max-width: 100%; height: auto; }

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 2px; }
::-webkit-scrollbar-track { background: var(--light); }
::-webkit-scrollbar-thumb { background: var(--primary-light); border-radius: 3px; }

/* ── Utility Classes ───────────────────────────────────────── */
.section-padding     { padding: 80px 0; }
.section-title       { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: .5rem; }
.section-subtitle    { color: var(--text-muted); font-size: 1.1rem; margin-bottom: 3rem; max-width: 600px; }
.badge-accent        { background: var(--accent); color: var(--dark); font-weight: 600; }
.text-gradient       {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  font-family: var(--font-body);
  font-weight: 500;
  border-radius: var(--radius);
  transition: var(--transition);
  letter-spacing: .01em;
}
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(79,70,229,.4);
}
.btn-outline-primary {
  border-color: var(--primary);
  color: var(--primary);
}
.btn-outline-primary:hover {
  background: var(--primary);
  color: #fff;
  transform: translateY(-2px);
}
.btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--dark);
  font-weight: 600;
}
.btn-accent:hover {
  background: #d97706;
  border-color: #d97706;
  color: #fff;
  transform: translateY(-2px);
}
.btn-lg { padding: .8rem 2rem; font-size: 1.05rem; }

/* Modal body scroll issue fix */


.modal-dialog-scrollable .modal-content {
  max-height: 100%;
  overflow: hidden;
}

.modal-dialog-scrollable .modal-body {
  overflow-y: auto !important; /* Force scrollable on vertical axis */
  -webkit-overflow-scrolling: touch; /* Smooth scroll for iOS mobile devices */
}
.modal .modal-content form {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: inherit;
  overflow: hidden;
}

.modal .modal-body {
  overflow-y: auto !important;
  max-height: calc(100vh - 200px); /* Screen size onujayi adjust hobe */
  -webkit-overflow-scrolling: touch;
}
/* ── Navbar ─────────────────────────────────────────────────── */
.navbar {
  padding: 1rem 0;
  transition: var(--transition);
  background: transparent;
}
.navbar.scrolled {
  background: rgb(255, 255, 255) !important;
  border:0px;
  box-shadow: var(--shadow-sm);
  padding: .6rem 0;
}
.navbar-brand { font-family: var(--font-heading); font-size: 1rem; font-weight: 800; }
.navbar-brand span { color: var(--primary); }
.nav-link {
  font-weight: 500;
  color: var(--dark) !important;
  padding: .5rem 1rem !important;
  border-radius: 8px;
}
.nav-link:hover, .nav-link.active {
  color: var(--primary) !important;
  background: rgba(79,70,229,.06);
}
.navbar-toggler { border: none; outline: none; }
.navbar-toggler:focus { box-shadow: none; }

/* ── Hero / Banner Slider ───────────────────────────────────── */
.hero-slider { position: relative; min-height: 100vh; overflow: hidden; }
.hero-slide {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
}
.hero-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15,23,42,.85) 0%, rgba(79,70,229,.6) 100%);
}
.hero-content { position: relative; z-index: 2; color: #fff; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.2);
  padding: .4rem 1.2rem;
  border-radius: 50px;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: #fff;
}
.hero-title {
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  color: #fff;
}
.hero-title span { color: var(--accent); }
.hero-desc { font-size: 1.15rem; margin-bottom: 2rem; opacity: .9; max-width: 540px; }
.hero-stats {
  display: flex;
  gap: 2rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}
.hero-stat-item { text-align: center; }
.hero-stat-item .number {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent);
}
.hero-stat-item .label { font-size: .85rem; opacity: .8; }

/* Carousel controls */
.carousel-control-prev, .carousel-control-next {
  width: 50px; height: 50px;
  top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.15);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  opacity: 1;
}
.carousel-control-prev { left: 20px; }
.carousel-control-next { right: 20px; }
.carousel-indicators [data-bs-target] {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  border: none;
  margin: 0 5px;
}
.carousel-indicators .active { background: var(--accent); }

/* ── Stats Counter ──────────────────────────────────────────── */
.stats-section {
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 100%);
  padding: 60px 0;
}
.stat-card {
  text-align: center;
  padding: 2rem 1rem;
}
.stat-card .icon {
  width: 64px; height: 64px;
  background: rgba(79,70,229,.2);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  color: var(--primary-light);
  margin: 0 auto 1rem;
}
.stat-card .number {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 800;
  color: #fff;
  display: block;
}
.stat-card .label { color: rgba(255,255,255,.6); font-size: .9rem; }

/* ── Section: About ─────────────────────────────────────────── */
.about-image-wrap { position: relative; }
.about-image-wrap img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.about-float-badge {
  position: absolute;
  bottom: -20px; right: -20px;
  background: var(--primary);
  color: #fff;
  padding: 1.2rem 1.5rem;
  border-radius: var(--radius);
  text-align: center;
  box-shadow: var(--shadow);
}
.about-float-badge .num {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  display: block;
}
.feature-item {
  display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem;
}
.feature-icon {
  width: 48px; height: 48px; min-width: 48px;
  background: rgba(79,70,229,.1);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--primary);
  font-size: 1.2rem;
}

/* ── Course Cards ───────────────────────────────────────────── */
.course-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
  background: #fff;
  height: 100%;
}
.course-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-light);
}
.course-card .thumbnail {
  height: 200px;
  object-fit: cover;
  width: 100%;
}
.course-card .card-body { padding: 1.5rem; }
.course-card .course-level {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .25rem .75rem;
  border-radius: 50px;
  display: inline-block;
  margin-bottom: .75rem;
}
.level-beginner     { background: rgba(16,185,129,.1); color: var(--success); }
.level-intermediate { background: rgba(245,158,11,.1); color: var(--accent); }
.level-advanced     { background: rgba(239,68,68,.1);  color: var(--danger); }
.course-card h5 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: .5rem;
  line-height: 1.4;
}
.course-card .price {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--primary);
}
.course-card .price del { font-size: .9rem; color: var(--text-muted); margin-left: .4rem; }
.course-meta { display: flex; gap: 1rem; font-size: .82rem; color: var(--text-muted); margin: .75rem 0; flex-wrap: wrap; }
.course-meta i { color: var(--primary-light); margin-right: .3rem; }

/* ── Ebook Cards ────────────────────────────────────────────── */
.ebook-card {
  display: flex;
  gap: 1rem;
  padding: 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  transition: var(--transition);
  height: 100%;
}
.ebook-card:hover { box-shadow: var(--shadow); border-color: var(--primary-light); transform: translateY(-3px); }
.ebook-cover {
  width: 90px; min-width: 90px; height: 120px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}
.ebook-info { flex: 1; }
.ebook-info h6 { font-size: .95rem; font-weight: 700; margin-bottom: .3rem; line-height: 1.4; }
.ebook-author { font-size: .8rem; color: var(--text-muted); margin-bottom: .5rem; }
.ebook-badge-free {
  background: rgba(16,185,129,.12);
  color: #059669;
}

.ebook-badge-premium {
  background: rgba(79,70,229,.12);
  color: #4f46e5;
}

.ebook-btn {
  border: 0;
  color: #fff;
  font-weight: 800;
}

.ebook-btn-free {
  background: #10b981;
}

.ebook-btn-free:hover {
  background: #059669;
  color: #fff;
}

.ebook-btn-premium {
  background: #4f46e5;
}

.ebook-btn-premium:hover {
  background: #4338ca;
  color: #fff;
}

/* ── Testimonials ───────────────────────────────────────────── */
.testimonial-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  position: relative;
}
.testimonial-card::before {
  content: '\201C';
  font-size: 5rem;
  font-family: serif;
  color: var(--primary);
  opacity: .15;
  position: absolute;
  top: -10px; left: 20px;
  line-height: 1;
}
.testimonial-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--primary-light);
}
.stars { color: var(--accent); font-size: .9rem; }

/* ── Auth Forms ─────────────────────────────────────────────── */
.auth-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--light) 0%, #ede9fe 100%);
  padding: 1rem 0;
}
.auth-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-lg);
  max-width: 590px;
  width: 100%;
  margin: auto;
}
.auth-logo {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 1.5rem;
  display: block;
}
.auth-logo span { color: var(--primary); }
.form-label { font-weight: 500; font-size: .9rem; color: var(--dark-3); }
.form-control {
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: .65rem 1rem;
  font-family: var(--font-body);
  transition: var(--transition);
}
.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}
.input-group-text {
  background: var(--light);
  border: 1.5px solid var(--border);
  color: var(--text-muted);
}
.divider-text {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--text-muted);
  font-size: .85rem;
  margin: 1.5rem 0;
}
.divider-text::before, .divider-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── PWA Install Banner ─────────────────────────────────────── */
#pwaInstallBanner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(135deg, var(--dark) 0%, var(--primary-dark) 100%);
  color: #fff;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transform: translateY(100%);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
  z-index: 9999;
  box-shadow: 0 -4px 24px rgba(0,0,0,.2);
}
#pwaInstallBanner.show { transform: translateY(0); }
#pwaInstallBanner .pwa-icon {
  width: 48px; height: 48px; min-width: 48px;
  background: rgba(255,255,255,.15);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}
#pwaInstallBanner .pwa-text { flex: 1; }
#pwaInstallBanner .pwa-text h6 { font-size: .9rem; font-weight: 700; margin: 0 0 .2rem; }
#pwaInstallBanner .pwa-text p  { font-size: .78rem; opacity: .75; margin: 0; }
#pwaInstallBanner .pwa-actions { display: flex; gap: .5rem; align-items: center; }
#pwaInstallBtn {
  background: var(--accent);
  color: var(--dark);
  border: none;
  padding: .5rem 1.2rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
  white-space: nowrap;
}
#pwaDismissBtn {
  background: transparent;
  border: none;
  color: rgba(255,255,255,.6);
  cursor: pointer;
  font-size: 1.2rem;
  padding: .25rem;
}

/* ── Footer ─────────────────────────────────────────────────── */
.footer {
  background: var(--dark);
  color: rgba(255,255,255,.7);
  padding: 60px 0 0;
}
.footer-brand {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
}
.footer-brand span { color: var(--primary-light); }
.footer h6 {
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 1.2rem;
}
.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: .6rem; }
.footer-links a {
  color: rgba(255,255,255,.6);
  font-size: .9rem;
  transition: var(--transition);
}
.footer-links a:hover { color: var(--primary-light); padding-left: 5px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 1.5rem 0;
  margin-top: 40px;
  font-size: .85rem;
}
.social-links { display: flex; gap: .75rem; }
.social-links a {
  width: 38px; height: 38px;
  background: rgba(255,255,255,.08);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.6);
  transition: var(--transition);
}
.social-links a:hover {
  background: var(--primary);
  color: #fff;
  transform: translateY(-3px);
}

.floating-whatsapp-cta {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 2200;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 52px;
  padding: 0 1rem;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 18px 42px rgba(37, 211, 102, .36);
}

.floating-whatsapp-cta:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 22px 50px rgba(37, 211, 102, .46);
}

.floating-whatsapp-cta i {
  font-size: 1.35rem;
}

/* ── Student Dashboard ──────────────────────────────────────── */
.dash-sidebar {
  background: var(--dark);
  min-height: 100vh;
  width: 260px;
  position: fixed;
  left: 0; top: 0;
  overflow-y: hidden;
  transition: var(--transition);
  z-index: 1000;
}
.dash-logo {
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.dash-nav {
  padding: 1rem 0;
    height: calc(100vh - 87px);
    overflow: auto; }
.dash-nav-item {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .75rem 1.5rem;
  color: rgba(255,255,255,.65);
  font-size: .9rem;
  font-weight: 500;
  transition: var(--transition);
  border-left: 3px solid transparent;
}
.dash-nav-item:hover, .dash-nav-item.active {
  color: #fff;
  background: rgba(79,70,229,.15);
  border-left-color: var(--primary-light);
}
.dash-nav-item i { width: 20px; text-align: center; font-size: 1rem; }
.dash-main { margin-left: 260px; min-height: 100vh; background: var(--light); }
.dash-topbar {
  background: #fff;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky; top: 0; z-index: 100;
}
.dash-content { padding: 2rem; }
.dash-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.5rem;
  border: 1px solid var(--border);
  height: auto;
}
.dash-stat-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.5rem;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.dash-stat-icon {
  width: 56px; height: 56px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.countdown-timer {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  background: rgba(79,70,229,.08);
  border: 1px solid rgba(79,70,229,.2);
  border-radius: 8px;
  padding: .4rem .8rem;
  font-size: .85rem;
}
.countdown-timer.expired {
  background: rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.2);
  color: var(--danger);
}
.countdown-timer i { margin-right: .3rem; }
.progress-bar-custom {
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
  margin-top: .5rem;
}
.progress-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  transition: width 1s ease;
}


/* ── Animations ─────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes countUp { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: .8; }
  100% { transform: scale(1.4); opacity: 0;  }
}

.animate-fade-up       { animation: fadeInUp .6s ease both; }
.animate-fade-up-delay { animation: fadeInUp .6s ease .2s both; }

/* ── Loading Spinner ────────────────────────────────────────── */
.page-loader {
  position: fixed; inset: 0;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  z-index: 99999;
  transition: opacity .5s ease, visibility .5s ease;
}
.page-loader.hidden { opacity: 0; visibility: hidden; }
.loader-ring {
  width: 50px; height: 50px;
  border: 4px solid rgba(79,70,229,.15);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Toast Notifications ────────────────────────────────────── */
.toast-container { z-index: 99990 !important; }
.toast-yubo {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: none;
}

/* ── Category Filter Pills ──────────────────────────────────── */
.filter-pills { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.filter-pill {
  padding: .4rem 1.1rem;
  border-radius: 50px;
  border: 1.5px solid var(--border);
  background: transparent;
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  color: var(--text-muted);
}
.filter-pill:hover, .filter-pill.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Modern polish pass */
body {
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 48%, #ffffff 100%);
}


.navbar {
  background: rgb(255, 255, 255);
  border: 1px solid rgba(226,232,240,.9);
  padding: .62rem 1rem;
  box-shadow: 0 16px 45px rgba(15,23,42,.08);
}

.navbar.scrolled {
    background: #ffffff !important;
    box-shadow: none;
    padding: .3rem 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}

.navbar-brand::before {
  content: "Y";
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(79,70,229,.28);
}

.navbar-brand:has(.site-logo)::before {
  display: none;
}

.site-logo {
  max-height: 38px;
  width: auto;
  border-radius: 8px;
}

.nav-link {
  font-size: .93rem;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  font-size: .82rem;
  font-weight: 800;
}

.hero-slider,
.hero-slide {
  min-height: 88vh;
}

.hero-slide {
  padding-top: 110px;
  padding-bottom: 70px;
}

.hero-slide::before {
  background:
    linear-gradient(90deg, rgba(15,23,42,.92) 0%, rgba(15,23,42,.72) 46%, rgba(79,70,229,.34) 100%),
    linear-gradient(180deg, rgba(255,255,255,0) 65%, #fff 100%);
}

.hero-title {
  max-width: 820px;
  letter-spacing: 0;
}

.hero-desc {
  color: rgba(255,255,255,.86);
}

.hero-stats {
  position: relative;
  z-index: 2;
  width: fit-content;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  background: rgba(15,23,42,.36);
  backdrop-filter: blur(12px);
}

.stats-section {
  background:
    linear-gradient(135deg, #102033 0%, #1c3b50 52%, #174b43 100%);
}

.card,
.course-card,
.ebook-card,
.testimonial-card,
.dash-card,
.dash-stat-card,
.auth-card {
  border-radius: 16px;
  border-color: rgba(203,213,225,.82);
  box-shadow: 0 10px 32px rgba(15,23,42,.06);
}

.course-card,
.ebook-card,
.testimonial-card {
  position: relative;
}

.course-card::after,
.ebook-card::after,
.testimonial-card::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -1px;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  opacity: 0;
  transition: opacity .25s ease;
}

.course-card:hover::after,
.ebook-card:hover::after,
.testimonial-card:hover::after {
  opacity: 1;
}

.course-card .thumbnail {
  height: 218px;
}

.ebook-card {
  align-items: stretch;
}

.ebook-cover {
  border-radius: 12px;
}

.badge,
.course-level,
.filter-pill {
  letter-spacing: 0;
}

.section-padding.bg-light,
section.bg-light {
  background: #f3f7fb !important;
}

.auth-section {
  background:
    linear-gradient(135deg, rgba(79,70,229,.08), rgba(6,182,212,.12)),
    #f8fafc;
}

.auth-card {
  border: 1px solid rgba(226,232,240,.95);
}

.dash-sidebar {
  background: linear-gradient(180deg, #0f172a 0%, #13243a 58%, #12352f 100%);
}

.dash-main {
  background: #f3f7fb;
}

.dash-topbar {
  box-shadow: 0 10px 28px rgba(15,23,42,.04);
}

#pwaIosBanner {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1e293b;
  color: #fff;
  padding: .8rem 1rem;
  font-size: .82rem;
  z-index: 9999;
  text-align: center;
}

#pwaIosBanner button {
  background: none;
  border: none;
  color: #a5b4fc;
  margin-left: .5rem;
}

.upload-preview-thumb {
  width: 92px;
  height: 70px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  padding: 4px;
}

.settings-tabs {
  gap: .35rem;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  scrollbar-width: none;
}

.settings-tabs::-webkit-scrollbar {
  display: none;
}

.settings-tabs .nav-link {
  white-space: nowrap;
  border: 1px solid var(--border);
  border-radius: 999px;
  margin-bottom: .7rem;
  background: #fff;
  color: var(--text-muted) !important;
}

.settings-tabs .nav-link.active {
  color: #fff !important;
  background: var(--primary);
  border-color: var(--primary);
}

.rich-editor {
  font-family: var(--font-body);
  min-height: 220px;
}

.modal-content {
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(15,23,42,.22);
}

.modal-header,
.modal-footer {
  border-color: var(--border);
}

.admin-toast-container {
  z-index: 3000;
}

.admin-flash-toast {
  min-width: min(360px, calc(100vw - 2rem));
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15,23,42,.2);
  overflow: hidden;
}

.admin-flash-toast .toast-body {
  font-weight: 700;
  line-height: 1.45;
}

.dash-backdrop {
  display: none;
}

.table-responsive {
  overflow-x: auto;
  max-width: 100%;
}


/* Screenshot-inspired Yubo home redesign */
.home-shell {
  background: #fff;
}

.desktop-home {
  display: block;
}

.mobile-app-home {
  display: none;
}

.yc-hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  color: #fff;
}

.yc-hero-slider {
  position: relative;
  overflow: hidden;
  background: #0d1b2e;
}

.yc-hero-slider .carousel-item {
  min-height: 560px;
}

.yc-hero-slider .yc-hero {
  min-height: 560px;
}

.yc-hero-arrow {
  width: 50px;
  opacity: .7;
}

.yc-hero-dots {
  bottom: 24px;
  margin-bottom: 0;
}

.yc-hero-dots button {
  width: 34px !important;
  height: 4px !important;
  border: 0 !important;
  border-radius: 999px;
  background: rgba(255,255,255,.55) !important;
}

.yc-hero-dots button.active {
  background: #fff !important;
}

.yc-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 23, 43, .92), rgba(10, 23, 43, .72), rgba(10, 23, 43, .45));
}

.yc-kicker,
.yc-eyebrow,
.yc-section-head span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: #1688ff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.yc-kicker {
  color: #fff;
  background: #ef3f55;
  padding: .35rem .7rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.yc-hero h1 {
  color: #fff;
  max-width: 670px;
  font-size: clamp(2.15rem, 4vw, 3.6rem);
  letter-spacing: 0;
  margin-bottom: 1rem;
}

.yc-hero p {
  color: rgba(255,255,255,.82);
  max-width: 640px;
  margin-bottom: 1.6rem;
}

.yc-btn-primary {
  background: linear-gradient(135deg, #1787ff, #04bfd4);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: .75rem 1.4rem;
  font-weight: 800;
}

.yc-btn-primary:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(23,135,255,.25);
}

.yc-btn-ghost {
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  padding: .75rem 1.4rem;
  font-weight: 800;
}

.yc-btn-ghost:hover {
  background: #fff;
  color: #0d1b2e;
}

.yc-stats {
  background: #0d1b2e;
  padding: 0 0 32px;
  margin-top: -38px;
  position: relative;
  z-index: 4;
}

.yc-stat-card {
  background: #fff;
  border-radius: 8px;
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-shadow: 0 16px 38px rgba(0,0,0,.16);
}

.yc-stat-card strong {
  color: #1688ff;
  font-family: var(--font-heading);
  font-size: 1.8rem;
  line-height: 1;
}

.yc-stat-card span {
  color: #64748b;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.yc-section {
  padding: 78px 0;
}

.yc-soft {
  background: #eef4fa;
}

.yc-section-head {
  max-width: 700px;
  margin: 0 auto 34px;
  text-align: center;
}

.yc-section-head h2,
.yc-about h2 {
  font-size: clamp(1.85rem, 3vw, 2.55rem);
  letter-spacing: 0;
  margin: .25rem 0 .5rem;
}

.yc-section-head p,
.yc-about p {
  color: #64748b;
  margin: 0;
}

.yc-photo-card {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15,23,42,.16);
}

.yc-photo-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.yc-photo-badge {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: .7rem;
  background: rgba(13,27,46,.92);
  color: #fff;
  border-radius: 10px;
  padding: .85rem 1rem;
  font-weight: 800;
}

.yc-photo-badge small {
  color: rgba(255,255,255,.62);
  font-weight: 600;
}

.yc-chip-row {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
  margin: 1.2rem 0;
}

.yc-chip-row span {
  border: 1px solid #dbeafe;
  color: #2563eb;
  border-radius: 999px;
  padding: .45rem .85rem;
  font-size: .8rem;
  font-weight: 800;
}

.yc-mini-feature,
.yc-feature-card,
.yc-service-card {
  background: #fff;
  border: 1px solid #e3edf7;
  border-radius: 12px;
  padding: 1.1rem;
}

.yc-mini-feature {
  display: flex;
  gap: 1rem;
}

.yc-mini-feature > i,
.yc-feature-card > i,
.yc-service-card > i {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1688ff;
  background: #eaf4ff;
  border-radius: 10px;
  margin-bottom: .7rem;
}

.yc-feature-card > i {
  color: var(--feature-color, #1688ff);
  background: color-mix(in srgb, var(--feature-color, #1688ff) 13%, #fff);
}

.yc-home-tabs {
  gap: .55rem;
  margin: 1.25rem 0 1rem;
  border: 0;
}

.yc-home-tabs .nav-link {
  border: 1px solid #dbeafe;
  border-radius: 999px;
  color: #2563eb;
  font-size: .82rem;
  font-weight: 800;
  padding: .48rem .9rem;
}

.yc-home-tabs .nav-link.active {
  color: #fff !important;
  background: linear-gradient(135deg, #1787ff, #04bfd4);
  border-color: transparent;
}

.yc-home-tab-content .yc-mini-feature {
  min-height: 124px;
}

.yc-mini-feature p,
.yc-feature-card p,
.yc-service-card p,
.yc-program-body p {
  color: #64748b;
  font-size: .88rem;
  margin-bottom: 0;
}

.yc-feature-card {
  height: 100%;
}

.yc-feature-card h3 {
  font-size: 1rem;
  margin-bottom: .45rem;
}

.yc-program-card {
  background: #fff;
  border: 1px solid #dce7f2;
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
}

.yc-program-media {
  position: relative;
  overflow: hidden;
}

.yc-program-media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #dbeafe;
}

.yc-program-media span {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(13,27,46,.86);
  color: #fff;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  padding: .35rem .55rem;
}

.yc-program-body {
  padding: 1rem;
}

.yc-program-body h3 {
  font-size: 1rem;
  min-height: 2.4rem;
  margin-bottom: .45rem;
}

.yc-program-body a {
  display: block;
  margin-top: .85rem;
  text-align: center;
  border: 1px solid #1688ff;
  color: #1688ff;
  border-radius: 999px;
  padding: .45rem;
  font-weight: 800;
  font-size: .78rem;
}

.yc-service-card {
  height: 100%;
}

.yc-service-card strong {
  display: block;
  margin-bottom: .35rem;
}

.yc-premium-ebook-card {
  height: 100%;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #dce7f2;
  box-shadow: 0 12px 30px rgba(15,23,42,.07);
}

.yc-premium-ebook-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #dbeafe;
}

.yc-premium-ebook-card > div {
  padding: 1rem;
}

.yc-premium-ebook-card span {
  display: block;
  color: #1688ff;
  font-size: .7rem;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: .3rem;
}

.yc-ebook-type-free span {
  color: #059669;
}

.yc-ebook-type-premium span {
  color: #4f46e5;
}

.yc-premium-ebook-card h3 {
  min-height: 2.4rem;
  font-size: 1rem;
  margin-bottom: .45rem;
}

.yc-premium-ebook-card p {
  color: #64748b;
  font-size: .84rem;
}

.yc-premium-ebook-card a {
  font-weight: 900;
}

.yc-premium-ebook-card .ebook-link-free {
  color: #059669;
}

.yc-premium-ebook-card .ebook-link-premium {
  color: #4f46e5;
}

.yc-enquiry {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: .78fr 1fr;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 55px rgba(15,23,42,.14);
}

.yc-enquiry-blue {
  background: linear-gradient(145deg, #1777f2, #08bfd2);
  color: #fff;
  padding: 2rem;
}

.yc-enquiry-blue h2 {
  color: #fff;
  margin: .5rem 0 .85rem;
}

.yc-enquiry-blue p,
.yc-enquiry-blue div {
  color: rgba(255,255,255,.82);
}

.yc-enquiry-form {
  padding: 2rem;
}

.yc-enquiry-form h3 {
  font-size: 1.15rem;
  margin-bottom: 1rem;
}

.yc-gallery-card,
.yc-map-card {
  min-height: 170px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(23,135,255,.15), rgba(4,191,212,.15)),
    url("../images/hero-default.svg");
  background-size: cover;
  background-position: center;
  box-shadow: 0 14px 34px rgba(15,23,42,.1);
}

.yc-gallery-card.alt {
  filter: hue-rotate(30deg);
}

.yc-gallery-card.third {
  filter: hue-rotate(80deg);
}

.yc-quote {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  color: #475569;
}

.yc-quote i {
  color: #1688ff;
  font-size: 1.6rem;
  margin-bottom: .8rem;
}

.yc-quote span {
  display: block;
  color: #94a3b8;
  font-size: .86rem;
  font-weight: 700;
  margin-top: .2rem;
}

.yc-rating {
  display: flex;
  justify-content: center;
  gap: .2rem;
  margin-top: .8rem;
}

.yc-rating i {
  color: #f59e0b;
  font-size: .95rem;
  margin: 0;
}

.yc-testimonial-slider {
  padding-bottom: 34px;
}

.yc-testimonial-dots {
  bottom: 0;
  margin-bottom: 0;
}

.yc-testimonial-dots button {
  width: 28px !important;
  height: 4px !important;
  border: 0 !important;
  border-radius: 999px;
  background: rgba(22,136,255,.28) !important;
}

.yc-testimonial-dots button.active {
  background: #1688ff !important;
}

.yc-faq {
  max-width: 760px;
}

.yc-faq .accordion-item {
  border: 0;
  margin-bottom: .8rem;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
}

.yc-contact-card {
  display: flex;
  gap: .75rem;
  align-items: center;
  background: #fff;
  border: 1px solid #e3edf7;
  border-radius: 12px;
  padding: .9rem;
  margin-top: .8rem;
}

.yc-contact-card i {
  color: #1688ff;
}

.yc-map-card {
  min-height: 360px;
  background:
    linear-gradient(135deg, rgba(239,244,250,.86), rgba(239,244,250,.7)),
    repeating-linear-gradient(35deg, #dbeafe 0 2px, transparent 2px 28px),
    repeating-linear-gradient(125deg, #d1fae5 0 2px, transparent 2px 32px);
}

.yc-map-card iframe {
  width: 100%;
  height: 100%;
  min-height: 360px;
  border: 0;
  border-radius: 12px;
}

.ebook-search-wrap {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  align-items: center;
  min-height: 48px;
  border: 1px solid #dce7f2;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15,23,42,.06);
  overflow: hidden;
}

.ebook-search-wrap i {
  color: #1688ff;
  text-align: center;
}

.ebook-search-wrap input {
  width: 100%;
  border: 0;
  outline: 0;
  font-weight: 700;
}

.ebook-search-wrap span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #eaf4ff;
}

.yc-about-image-panel {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(15,23,42,.16);
}

.yc-about-image-panel img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.yc-about-image-panel > div {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: .2rem;
  padding: 1rem;
  border-radius: 14px;
  background: rgba(13,27,46,.88);
  color: #fff;
}

.yc-about-image-panel span {
  color: rgba(255,255,255,.7);
  font-size: .9rem;
}

.yc-about-full-page {
  background:
    linear-gradient(180deg, #fff 0%, #f6f9fd 100%);
}

.yc-about-profile {
  padding: 1.2rem 0 1.8rem;
}

.yc-about-copy {
  color: #64748b;
  font-size: 1.04rem;
  line-height: 1.85;
}

.yc-about-stat {
  height: 100%;
  padding: 1.1rem 1.2rem;
  border-radius: 14px;
  border: 1px solid #dce7f2;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
}

.yc-about-stat strong {
  display: block;
  color: #1688ff;
  font-family: var(--font-heading);
  font-size: 1.85rem;
  line-height: 1;
  margin-bottom: .35rem;
}

.yc-about-stat span {
  color: #64748b;
  font-size: .86rem;
  font-weight: 800;
  text-transform: uppercase;
}

.yc-about-content-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.yc-about-info-card {
  height: 100%;
  padding: 1.35rem;
  border-radius: 16px;
  border: 1px solid #dce7f2;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15,23,42,.07);
}

.yc-about-info-card > i {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #1688ff;
  background: #eaf4ff;
  margin-bottom: .9rem;
}

.yc-about-info-card h3 {
  font-size: 1.08rem;
  margin-bottom: .5rem;
}

.yc-about-info-card p {
  color: #64748b;
  line-height: 1.72;
  margin: 0;
}

.yc-about-promise {
  display: grid;
  grid-template-columns: .82fr 1fr;
  gap: 2rem;
  align-items: center;
  padding: 2rem;
  border-radius: 18px;
  background: #0d1b2e;
  color: #fff;
  box-shadow: 0 22px 56px rgba(15,23,42,.18);
}

.yc-about-promise h2 {
  color: #fff;
  margin: .35rem 0 .7rem;
}

.yc-about-promise p {
  color: rgba(255,255,255,.72);
  margin: 0;
}

.yc-about-point {
  height: 100%;
  display: grid;
  gap: .45rem;
  padding: 1rem;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}

.yc-about-point i {
  color: #38bdf8;
  font-size: 1.2rem;
}

.yc-about-point span {
  color: rgba(255,255,255,.68);
  font-size: .9rem;
}

@media (max-width: 991px) {
  .yc-about-content-grid,
  .yc-about-promise {
    grid-template-columns: 1fr;
  }
}

.yc-page-hero {
  position: relative;
  padding: 150px 0 86px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(10, 23, 43, .94), rgba(10, 23, 43, .72)),
    url("../images/hero-default.svg");
  background-size: cover;
  background-position: center;
}

.yc-page-hero h1 {
  max-width: 760px;
  color: #fff;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  letter-spacing: 0;
  margin: .8rem 0;
}

.yc-page-hero p {
  max-width: 720px;
  color: rgba(255,255,255,.78);
  font-size: 1.08rem;
  margin: 0;
}

.yc-page-section {
  background: #fff;
}

.yc-list-head {
  gap: 1.25rem;
}

.yc-catalog-card .price {
  font-size: 1rem;
}

.yc-catalog-card,
.yc-ebook-card {
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
}

.course-overview-screen {
  padding: 50px 0 80px;
  background: #f8fafc;
}

.mobile-detail-top {
  display: none;
}
.mobile-action-bar{
  display:none;
}
.course-video-panel {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #dbeafe;
  box-shadow: 0 18px 50px rgba(15,23,42,.12);
}

.course-video-panel img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.course-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  color: #398ff0;
  font-size: 1.5rem;
  box-shadow: 0 18px 40px rgba(15,23,42,.18);
}

.course-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  color: #64748b;
  font-weight: 700;
  margin-bottom: 1.2rem;
}

.course-detail-meta .fa-star {
  color: #ffc107;
}

.course-tabs {
  border: 0;
  gap: 1.2rem;
  margin: 1.2rem 0;
}

.course-tabs .nav-link {
  border: 0;
  color: #b6bbc5 !important;
  font-weight: 900;
  border-bottom: 3px solid transparent;
  border-radius: 0;
}

.course-tabs .nav-link.active {
  color: #398ff0 !important;
  background: transparent;
  border-bottom-color: #398ff0;
}

.lesson-row {
  display: grid;
  grid-template-columns: 52px 1fr 24px;
  align-items: center;
  gap: .95rem;
  padding: .85rem 0;
}

.lesson-play {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #398ff0;
  color: #fff;
  box-shadow: 0 10px 22px rgba(57,143,240,.24);
}

.lesson-row small {
  display: block;
  color: #9ca3af;
  font-weight: 700;
}

.lesson-row > i {
  color: #398ff0;
}

.lesson-row.muted {
  opacity: .35;
}

.course-enroll-widget {
  border-radius: 18px;
}

/* .mobile-action-bar {
  display: none;
} */

.yc-about-panel,
.yc-contact-form-card {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mobile-dashboard-tabs,
.student-bottom-nav,
.public-mobile-bottom-nav {
  display: none;
}

.footer {
  background:
    linear-gradient(135deg, #0f172a 0%, #17233d 55%, #12352f 100%);
}

.footer-muted {
  color: rgba(255,255,255,.62) !important;
}

.footer-icon {
  color: var(--primary-light);
  margin-top: 3px;
}

/* Velzon-inspired admin/student dashboard polish */
.dashboard-shell {
  --dash-bg: #f3f3f9;
  --dash-sidebar: #111126;
  --dash-sidebar-muted: #a6abc8;
  --dash-heading: #243041;
  --dash-text: #49536a;
  --dash-muted: #7b849d;
  --dash-line: #e9ebf2;
  --dash-card-shadow: 0 2px 4px rgba(15, 23, 42, .06);
  --dash-soft-shadow: 0 8px 24px rgba(15, 23, 42, .05);
  background: var(--dash-bg);
  color: var(--dash-text);
  font-size: 14px;
  line-height: 1.45;
}

.dashboard-shell h1,
.dashboard-shell h2,
.dashboard-shell h3,
.dashboard-shell h4,
.dashboard-shell h5,
.dashboard-shell h6 {
  font-family: var(--font-body);
  color: var(--dash-heading);
  font-weight: 600;
  letter-spacing: 0;
}

.dash-sidebar {
  width: 250px;
  background: var(--dash-sidebar) !important;
  box-shadow: none;
}

.dash-logo {
  min-height: 70px;
  display: flex;
  align-items: center;
  padding: 0 1.45rem;
  border-bottom: 0;
}

.dash-logo .navbar-brand {
  color: #fff !important;
  font-family: var(--font-body);
  font-size: 1.42rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.dash-logo .navbar-brand span {
  color: #fff;
}

.dash-nav {
  height: calc(100vh - 70px);
  padding: .7rem .75rem 1.2rem;
}

.dash-nav-item {
  min-height: 42px;
  gap: .72rem;
  padding: .62rem .75rem;
  margin: .08rem 0;
  border-left: 0;
  border-radius: 4px;
  color: var(--dash-sidebar-muted);
  font-size: .86rem;
  font-weight: 500;
}

.dash-nav-item i {
  width: 20px;
  color: currentColor;
  opacity: .9;
  font-size: .95rem;
}

.dash-nav-item:hover,
.dash-nav-item.active {
  background: rgba(255, 255, 255, .06);
  color: #fff;
  border-left-color: transparent;
}

.dash-main {
  margin-left: 250px;
  background: var(--dash-bg);
}

.dash-topbar {
  min-height: 70px;
  padding: 0 1.5rem;
  background: #fff;
  border-bottom: 1px solid var(--dash-line);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  position: fixed;
  top: 0;
  right: 0;
  left: 250px;
  z-index: 1000;
}

.dash-topbar strong {
  color: var(--dash-heading);
  font-size: .95rem;
  font-weight: 700;
  text-transform: uppercase;
}

.dash-topbar .small,
.dashboard-shell .text-muted {
  color: var(--dash-muted) !important;
}

.dash-content {
  padding: 5.9rem 1.5rem 1.5rem;
}

.dash-card,
.dash-stat-card,
.dashboard-shell .card {
  border: 1px solid var(--dash-line);
  border-radius: 4px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
}

.dash-card {
  padding: 1.05rem;
}

.dash-card + .dash-card,
.dash-card.mb-4 {
  margin-bottom: 1.35rem !important;
}

.dash-card h5 {
  margin: 0 0 1rem;
  font-size: .98rem;
  font-weight: 600;
}

.dash-stat-card {
  min-height: 126px;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1rem;
  color: var(--dash-heading);
  transition: box-shadow .2s ease, transform .2s ease;
}

.dash-stat-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--dash-soft-shadow);
}

.dash-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  font-size: 1.2rem;
}

.dash-stat-card span {
  display: block;
  margin-bottom: .45rem;
  color: var(--dash-muted);
  font-size: .76rem;
  font-weight: 600;
  text-transform: uppercase;
}

.dash-stat-card h3 {
  margin: 0;
  color: var(--dash-heading);
  font-size: 1.35rem;
  font-weight: 600;
}

.dash-stat-card small {
  display: block;
  margin-top: .38rem;
  font-size: .82rem;
}

.dashboard-shell .row {
  --bs-gutter-x: 1.35rem;
  --bs-gutter-y: 1.35rem;
}

.dashboard-shell .table-responsive {
  border: 1px solid var(--dash-line);
  border-radius: 0;
  background: #fff;
}

.dashboard-shell .table {
  margin-bottom: 0;
  color: var(--dash-text);
  font-size: .86rem;
  vertical-align: middle;
}

.dashboard-shell .table > :not(caption) > * > * {
  padding: .88rem .7rem;
  border-color: var(--dash-line);
  background: transparent;
}

.dashboard-shell .table thead th {
  background: #fff;
  color: #111827;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 1px solid var(--dash-line);
}

.dashboard-shell .table tbody tr:nth-child(odd) {
  background: #fcfcfd;
}

.dashboard-shell .table tbody tr:hover {
  background: #f8f9fd;
}

.dashboard-shell .badge {
  border-radius: 4px;
  padding: .32rem .48rem;
  font-size: .68rem;
  font-weight: 700;
}

.dashboard-shell .btn {
  min-height: 36px;
  border-radius: 4px;
  padding: .45rem .8rem;
  font-size: .82rem;
  font-weight: 600;
  box-shadow: none !important;
  transform: none !important;
}

.dashboard-shell .btn-sm {
  min-height: 28px;
  padding: .27rem .55rem;
  font-size: .76rem;
}

.dashboard-shell .btn-primary {
  background: #405189;
  border-color: #405189;
}

.dashboard-shell .btn-primary:hover {
  background: #364574;
  border-color: #364574;
}

.dashboard-shell .btn-outline-primary {
  color: #405189;
  border-color: #cfd5e7;
  background: #fff;
}

.dashboard-shell .btn-outline-primary:hover {
  color: #fff;
  background: #405189;
  border-color: #405189;
}

.dashboard-shell .btn-outline-danger,
.dashboard-shell .btn-outline-warning,
.dashboard-shell .btn-outline-secondary {
  background: #fff;
}

.dashboard-shell .form-label {
  margin-bottom: .45rem;
  color: #111827;
  font-size: .82rem;
  font-weight: 600;
}

.dashboard-shell .form-control,
.dashboard-shell .form-select,
.dashboard-shell select.form-control,
.dashboard-shell textarea.form-control {
  min-height: 38px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  background-color: #fff;
  color: var(--dash-text);
  padding: .47rem .8rem;
  font-size: .84rem;
  box-shadow: none;
}

.dashboard-shell textarea.form-control {
  min-height: 96px;
}

.dashboard-shell .form-control::placeholder {
  color: #8b93a7;
}

.dashboard-shell .form-control:focus,
.dashboard-shell .form-select:focus,
.dashboard-shell select.form-control:focus,
.dashboard-shell textarea.form-control:focus {
  border-color: #a7b4df;
  box-shadow: 0 0 0 .16rem rgba(64, 81, 137, .12);
}

.dashboard-shell form.row {
  row-gap: 1.1rem;
}

.dashboard-shell .modal-content {
  border-radius: 4px;
  border: 1px solid var(--dash-line);
  box-shadow: 0 12px 42px rgba(15, 23, 42, .18);
}

.dashboard-shell .modal-header,
.dashboard-shell .modal-footer {
  padding: 1rem 1.2rem;
}

.dashboard-shell .modal-body {
  padding: 1.2rem;
}

.dashboard-shell .list-group-item {
  border-color: var(--dash-line);
  font-size: .86rem;
}

.dashboard-shell canvas {
  max-width: 100%;
}

.dashboard-shell .dash-card canvas {
  min-height: 220px;
}

.dashboard-shell #salesChart {
  min-height: 310px;
}

.dashboard-shell .dt-container {
  color: var(--dash-text);
  font-size: .86rem;
}

.dashboard-shell .dt-container .dt-layout-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: .9rem 0;
}

.dashboard-shell .dt-container .dt-layout-row:first-child {
  padding-top: 0;
}

.dashboard-shell .dt-container .dt-layout-row:last-child {
  padding-bottom: 0;
}

.dashboard-shell .dt-container .dt-layout-cell {
  display: flex;
  align-items: center;
  min-width: 0;
}

.dashboard-shell .dt-container .dt-layout-start {
  justify-content: flex-start;
}

.dashboard-shell .dt-container .dt-layout-end {
  justify-content: flex-end;
  margin-left: auto;
}

.dashboard-shell .dt-length,
.dashboard-shell .dt-search {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--dash-muted);
  font-size: .82rem;
  font-weight: 500;
}

.dashboard-shell .dt-length select {
  width: 78px;
  min-height: 34px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  background-color: #fff;
  color: var(--dash-text);
  padding: .35rem 1.65rem .35rem .65rem;
  font-size: .82rem;
}

.dashboard-shell .dt-search input {
  width: 240px;
  max-width: 34vw;
  min-height: 36px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  background: #fff;
  color: var(--dash-text);
  padding: .42rem .75rem;
  font-size: .84rem;
  outline: 0;
}

.dashboard-shell .dt-search input:focus,
.dashboard-shell .dt-length select:focus {
  border-color: #a7b4df;
  box-shadow: 0 0 0 .16rem rgba(64, 81, 137, .12);
}

.dashboard-shell .dt-info {
  color: var(--dash-muted);
  font-size: .82rem;
}

.dashboard-shell .dt-paging {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

.dashboard-shell .dt-paging .dt-paging-button {
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e1e5ef !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #405189 !important;
  padding: 0 .55rem !important;
  margin: 0 !important;
  font-size: .8rem;
  font-weight: 600;
  box-shadow: none !important;
}

.dashboard-shell .dt-paging .dt-paging-button:hover {
  border-color: #405189 !important;
  background: #eef2ff !important;
  color: #405189 !important;
}

.dashboard-shell .dt-paging .dt-paging-button.current {
  border-color: #405189 !important;
  background: #405189 !important;
  color: #fff !important;
}

.dashboard-shell .dt-paging .dt-paging-button.disabled {
  opacity: .45;
  cursor: not-allowed !important;
}

.dashboard-shell .dt-paging .dt-paging-button.previous,
.dashboard-shell .dt-paging .dt-paging-button.next {
  width: 32px;
  padding: 0 !important;
  font-size: .72rem;
}

#salesChart,#studentStatusChart,#orderStatusChart,#classStatusChart,#catalogChart{
	height: 400px;
	max-height:400px;
}