/* ===========================
   RESET & BASE
=========================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #1e293b;
  background: #fff;
  line-height: 1.6;
  padding-top: 70px;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 80px 0;
}

.bg-light {
  background: #f8fafc;
}

/* ===========================
   BUTTONS
=========================== */
.btn-primary {
  display: inline-block;
  background: #2563eb;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.2s, transform 0.2s;
}

.btn-primary:hover {
  background: #0f172a;
  transform: translateY(-1px);
}
/* Small Buttons */
.btn-primary.sm,
.btn-outline.sm,
.btn-secondary.sm {
  padding: 8px 16px;
  font-size: 13px;
}

.btn-outline {
  display: inline-block;
  border: 2px solid #2563eb;
  color: #2563eb;
  padding: 11px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s;
}

.btn-outline:hover {
  background: #2563eb;
  color: #fff;
}

.btn-white {
  display: inline-block;
  background: #fff;
  color: #2563eb;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s;
}

.btn-white:hover {
  background: #f0f4ff;
}

/* ===========================
   SECTION HEADINGS
=========================== */
.section-head {
  text-align: center;
  margin-bottom: 48px;
}

.section-tag {
  display: inline-block;
  background: #eff6ff;
  color: #2563eb;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: 99px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.section-title {
  font-size: 32px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 10px;
}

.section-desc {
  font-size: 16px;
  color: #64748b;
  max-width: 520px;
  margin: 0 auto;
}

/* ===========================
   HEADER
=========================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #f1f5f9;
  z-index: 999;
  transition: box-shadow 0.3s;
}

.header.scrolled {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  gap: 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-icon {
  width: 38px;
  height: 38px;
  background: #2563eb;
  color: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
}

.logo-main {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: #2563eb;
  line-height: 1;
}

.logo-sub {
  display: block;
  font-size: 9px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.navbar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: #475569;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.2s;
  white-space: nowrap;
}

.nav-main-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nav-main-icon {
  display: none;
}

.mobile-menu-actions {
  display: none;
}

.nav-link:hover,
.nav-link.active {
  color: #2563eb;
  background: #eff6ff;
}

/* Dropdown */
.nav-dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 6px;
  min-width: 180px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

/* Invisible hover bridge so moving cursor from toggle to menu
   doesn't cross a dead gap and close the dropdown */
.nav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 12px;
}

.dropdown-menu a {
  display: block;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  border-radius: 6px;
  transition: all 0.15s;
}

.dropdown-menu a:hover {
  background: #eff6ff;
  color: #2563eb;
}

.nav-dropdown:hover .dropdown-menu {
  display: block;
}

.menu-btn {
  display: none;
  background: none;
  border: none;
  font-size: 22px;
  color: #475569;
  cursor: pointer;
}

/* ===========================
   HERO
=========================== */
.hero {
  padding: 140px 0 80px;
  background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 60%);
  overflow: hidden;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #dcfce7;
  color: #22c55e;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 99px;
  margin-bottom: 20px;
}

.hero-title {
  font-size: 50px;
  font-weight: 800;
  line-height: 1.15;
  color: #0f172a;
  margin-bottom: 18px;
}

.hero-title .highlight {
  color: #2563eb;
  position: relative;
}

.hero-desc {
  font-size: 17px;
  color: #64748b;
  margin-bottom: 28px;
  max-width: 440px;
}

.hero-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.hero-contact {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.hero-contact span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
}

.hero-contact span i {
  color: #2563eb;
}

/* Hero Right Side */
.hero-image {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.hero-blob {
  width: 260px;
  height: 260px;
  background: linear-gradient(135deg, #2563eb, #60a5fa);
  border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  color: rgba(255, 255, 255, 0.9);
  animation: blob 6s ease-in-out infinite;
}

@keyframes blob {

  0%,
  100% {
    border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
  }

  50% {
    border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
  }
}

.hero-card {
  position: absolute;
  left: -20px;
  top: 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  font-size: 13px;
  z-index: 10;
}

.hero-card-2 {
  left: auto;
  right: -20px;
  top: auto;
  bottom: 20px;
}

.hero-card strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.hero-card p {
  color: #64748b;
  font-size: 12px;
}

.hcard-icon {
  width: 38px;
  height: 38px;
  background: #eff6ff;
  color: #2563eb;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.hcard-icon.green {
  background: #dcfce7;
  color: #22c55e;
}

/* ===========================
   STATS
=========================== */
.stats {
  background: #2563eb;
  padding: 40px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}

.stat-item {
  color: #fff;
}

.stat-num {
  display: block;
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
}

.stat-label {
  font-size: 13px;
  opacity: 0.85;
  margin-top: 4px;
  display: block;
}

/* ===========================
   SERVICES
=========================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.service-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 28px 22px;
  transition: all 0.3s;
}

.service-card:hover {
  border-color: #2563eb;
  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.1);
  transform: translateY(-4px);
}

.scard-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
}

.scard-icon.blue {
  background: #eff6ff;
  color: #2563eb;
}

.scard-icon.orange {
  background: #fff7ed;
  color: #ea580c;
}

.scard-icon.green {
  background: #dcfce7;
  color: #22c55e;
}

.scard-icon.purple {
  background: #f5f3ff;
  color: #7c3aed;
}

.service-card h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #0f172a;
}

.service-card p {
  font-size: 13px;
  color: #64748b;
  line-height: 1.7;
  margin-bottom: 16px;
}

.card-link {
  font-size: 13px;
  font-weight: 600;
  color: #2563eb;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s;
}

.card-link:hover {
  gap: 10px;
}

/* ===========================
   COURSES
=========================== */
.courses-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.course-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 28px 22px;
  position: relative;
  transition: all 0.3s;
}

.course-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  transform: translateY(-4px);
}

.course-card.featured {
  border-color: #2563eb;
  background: linear-gradient(145deg, #eff6ff, #fff);
}

.featured-tag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #2563eb;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 99px;
  white-space: nowrap;
}

.course-icon {
  width: 52px;
  height: 52px;
  background: #eff6ff;
  color: #2563eb;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 14px;
}

.course-card h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #0f172a;
}

.course-card p {
  font-size: 13px;
  color: #64748b;
  line-height: 1.7;
  margin-bottom: 16px;
}

.course-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.course-meta span {
  font-size: 12px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 5px;
}

.course-meta i {
  color: #2563eb;
}

/* ===========================
   WHY CHOOSE US
=========================== */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.why-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 28px 24px;
  transition: all 0.3s;
}

.why-card:hover {
  border-color: #2563eb;
  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.08);
  transform: translateY(-4px);
}

.why-icon {
  width: 52px;
  height: 52px;
  background: #eff6ff;
  color: #2563eb;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
}

.why-card h4 {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

.why-card p {
  font-size: 13px;
  color: #64748b;
  line-height: 1.7;
}


/* ===========================
   CTA BANNER
=========================== */
.cta-banner {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  padding: 60px 0;
}

.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.cta-banner h2 {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
}

.cta-banner p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
}

.cta-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ===========================
   FOOTER
=========================== */
.footer {
  background: #0f172a;
  padding: 60px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 40px;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.5fr;
  gap: 30px;
  padding-bottom: 48px;
}

.footer-about {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.8;
  margin: 14px 0 18px;
}

.footer-social {
  display: flex;
  gap: 10px;
}

.footer-social a {
  padding: 0.7rem;
  background: #1e293b;
  color: #94a3b8;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: all 0.2s;
}


.footer-social a:hover {
  background: #2563eb;
  color: #fff;
}

.footer-col h4 {
  font-size: 15px;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 16px;
}

.footer-col a,
.footer-col p {
  display: block;
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 8px;
  line-height: 1.6;
  transition: color 0.2s;
}

.footer-col a:hover {
  color: #60a5fa;
}

.footer-col p i {
  color: #2563eb;
  margin-right: 6px;
}

.footer-bottom {
  border-top: 1px solid #1e293b;
  text-align: center;
  padding: 20px;
}

.footer-bottom p {
  font-size: 12px;
  color: #475569;
}

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 1024px) {

  .services-grid,
  .courses-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1024px) {
  .header {
    z-index: 2000;
  }

  .header-inner {
    height: 70px;
    gap: 10px;
  }

  .logo img {
    max-width: min(190px, 48vw);
    height: auto !important;
    max-height: 52px;
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }

  .header-cart-btn,
  .header-cta {
    display: none !important;
  }

  .menu-btn {
    display: inline-grid !important;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    color: #0f172a;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  }

  .navbar {
    display: none !important;
    position: fixed;
    top: 70px;
    left: 12px;
    right: 12px;
    width: auto;
    max-height: calc(100vh - 86px);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 14px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 2100;
  }

  .navbar.open {
    display: flex !important;
    bottom: auto !important;
    height: auto !important;
    max-height: calc(100vh - 178px - env(safe-area-inset-bottom, 0px)) !important;
  }

  .nav-link,
  .nav-dropdown-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    padding: 12px 14px;
    border: 0;
    border-radius: 12px;
    text-align: left;
    color: #0f172a;
    background: transparent;
  }

  .nav-main-icon {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    color: #2563eb;
    background: #eff6ff;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .08);
  }

  .mobile-menu-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(226, 232, 240, .9);
  }

  .mobile-menu-action {
    appearance: none;
    border: 1px solid rgba(226, 232, 240, .95);
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 16px;
    color: #0f172a;
    background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
    box-shadow: 0 10px 24px rgba(15, 23, 42, .07);
    font: inherit;
    font-size: 14px;
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }

  .mobile-menu-action:hover,
  .mobile-menu-action:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(37, 99, 235, .35);
    box-shadow: 0 14px 30px rgba(37, 99, 235, .13);
    outline: none;
  }

  .mobile-menu-action .nav-main-icon {
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    box-shadow: 0 10px 20px rgba(37, 99, 235, .22);
  }

  .mobile-menu-action-enquiry {
    color: #fff;
    border-color: rgba(37, 99, 235, .2);
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    box-shadow: 0 14px 32px rgba(37, 99, 235, .25);
  }

  .mobile-menu-action-enquiry .nav-main-icon {
    color: #2563eb;
    background: rgba(255,255,255,.94);
  }

  .mobile-menu-badge {
    min-width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    margin-left: 2px;
    padding: 0 7px;
    border-radius: 999px;
    color: #111827;
    background: #facc15;
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
  }

  .nav-link:hover,
  .nav-link.active,
  .nav-dropdown.is-open > .nav-dropdown-toggle {
    color: #2563eb;
    background: #eff6ff;
  }

  .nav-dropdown {
    width: 100%;
  }

  .nav-dropdown::after {
    display: none;
  }

  .nav-dropdown:hover .dropdown-menu {
    display: none;
  }

  .nav-dropdown.is-open .dropdown-menu {
    display: grid;
  }

  .dropdown-menu {
    position: static;
    display: none;
    min-width: 0;
    margin: 4px 0 8px;
    padding: 6px;
    border: 0;
    border-radius: 14px;
    box-shadow: none;
    background: #f8fafc;
  }

  .dropdown-menu a {
    padding: 10px 12px;
    border-radius: 10px;
  }

  .header-inner .header-cta {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }

  .why-grid {
    grid-template-columns: 1fr;
  }

  .hero-image {
    display: none;
  }

  .hero-title {
    font-size: 36px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .services-grid,
  .courses-grid {
    grid-template-columns: 1fr;
  }

  .cta-inner {
    flex-direction: column;
    text-align: center;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .magic-theme-toggle {
    transform: scale(.9);
    transform-origin: right center;
  }

  .header-cart-btn {
    width: 38px;
    height: 38px;
  }
}

/* ===========================
   WHY CHOOSE US
=========================== */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.why-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 28px 24px;
  transition: all 0.3s;
}

.why-card:hover {
  border-color: #2563eb;
  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.08);
  transform: translateY(-4px);
}

.why-icon {
  width: 52px;
  height: 52px;
  background: #eff6ff;
  color: #2563eb;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
}

.why-card h4 {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

.why-card p {
  font-size: 13px;
  color: #64748b;
  line-height: 1.7;
}

@media (max-width: 1024px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .why-grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================
   PAGE BANNER
=========================== */
.page-banner {
  background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
  padding: 120px 0 50px;
  border-bottom: 1px solid #e2e8f0;
}

.page-banner .container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.banner-content .section-tag {
  margin-bottom: 10px;
}

.banner-content h1 {
  font-size: 40px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
}

.banner-content p {
  font-size: 16px;
  color: #64748b;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #94a3b8;
}

.breadcrumb a {
  color: #2563eb;
  font-weight: 500;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb i {
  font-size: 10px;
}

/* ===========================
   ABOUT — STORY
=========================== */
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.story-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
}

.story-blob {
  width: 280px;
  height: 280px;
  background: linear-gradient(135deg, #2563eb, #60a5fa);
  border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 90px;
  color: rgba(255, 255, 255, 0.85);
  animation: blob 7s ease-in-out infinite;
}

.story-badge-1,
.story-badge-2 {
  position: absolute;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  font-size: 13px;
}

.story-badge-1 {
  left: 0;
  top: 30px;
}

.story-badge-2 {
  right: 0;
  bottom: 30px;
}

.story-badge-1 i,
.story-badge-2 i {
  font-size: 20px;
  color: #2563eb;
}

.story-badge-1 strong,
.story-badge-2 strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1;
}

.story-badge-1 span,
.story-badge-2 span {
  font-size: 12px;
  color: #64748b;
}

.story-text p {
  font-size: 15px;
  color: #475569;
  line-height: 1.8;
}

.story-highlights {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.highlight-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #374151;
  font-weight: 500;
}

.highlight-item i {
  color: #22c55e;
  font-size: 16px;
}

/* ===========================
   ABOUT — MISSION VISION
=========================== */
.mv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.mv-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 32px 24px;
  transition: all 0.3s;
}

.mv-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.07);
  transform: translateY(-4px);
}

.mv-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 18px;
}

.mv-icon.blue {
  background: #eff6ff;
  color: #2563eb;
}

.mv-icon.purple {
  background: #f5f3ff;
  color: #7c3aed;
}

.mv-icon.green {
  background: #dcfce7;
  color: #22c55e;
}

.mv-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
}

.mv-card p {
  font-size: 14px;
  color: #64748b;
  line-height: 1.8;
}

/* ===========================
   ABOUT — FACILITIES
=========================== */
.facilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.facility-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 28px 22px;
  transition: all 0.3s;
  text-align: center;
}

.facility-card:hover {
  border-color: #2563eb;
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.09);
  transform: translateY(-4px);
}

.facility-card>i {
  font-size: 32px;
  color: #2563eb;
  margin-bottom: 14px;
  display: block;
}

.facility-card h4 {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

.facility-card p {
  font-size: 13px;
  color: #64748b;
  line-height: 1.7;
}

/* ===========================
   ABOUT — TEAM
=========================== */
.team-center {
  display: flex;
  justify-content: center;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.team-grid .team-card {
  padding: 28px 20px;
  max-width: 100%;
}

.team-grid .team-card h3 {
  font-size: 18px;
}

.team-skills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}

.team-skills span {
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 99px;
}

.team-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 36px 40px;
  text-align: center;
  max-width: 380px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

.team-avatar {
  width: 90px;
  height: 90px;
  width: 140px;
  height: 140px;
  background: linear-gradient(135deg, #2563eb, #60a5fa);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: #fff;
  margin: 0 auto 16px;
  margin: 0 auto 20px;
  padding: 4px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.team-avatar:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 15px 35px rgba(37, 99, 235, 0.4);
}

.team-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: #fff;
}

.team-avatar img:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.4);
}

.team-card h3 {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
}

.team-role {
  display: inline-block;
  background: #eff6ff;
  color: #2563eb;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: 99px;
  margin-bottom: 16px;
}

.team-card p {
  font-size: 14px;
  color: #64748b;
  line-height: 1.8;
  margin-bottom: 20px;
}

.team-social {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.team-social a {
  width: 38px;
  height: 38px;
  background: #eff6ff;
  color: #2563eb;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.2s;
}

.team-social a:hover {
  background: #2563eb;
  color: #fff;
}

/* ===========================
   ABOUT — LOCATION
=========================== */
.location-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.location-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 28px 24px;
  transition: all 0.3s;
}

.location-card:hover {
  border-color: #2563eb;
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.08);
  transform: translateY(-4px);
}

.loc-icon {
  width: 52px;
  height: 52px;
  background: #eff6ff;
  color: #2563eb;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 14px;
}

.location-card h4 {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
}

.location-card p {
  font-size: 14px;
  color: #64748b;
  line-height: 1.8;
}

.location-card .card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: #2563eb;
  transition: gap 0.2s;
}

.location-card .card-link:hover {
  gap: 10px;
}

/* ===========================
   RESPONSIVE — ABOUT
=========================== */
@media (max-width: 1024px) {

  .mv-grid,
  .facilities-grid,
  .location-grid,
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .story-grid {
    grid-template-columns: 1fr;
  }

  .story-image {
    display: none;
  }

  .mv-grid,
  .facilities-grid,
  .location-grid,
  .team-grid {
    grid-template-columns: 1fr;
  }

  .page-banner .container {
    flex-direction: column;
    align-items: flex-start;
  }

  .banner-content h1 {
    font-size: 30px;
  }
}

/* ===========================
   CONTACT PAGE
=========================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  align-items: start;
}

.contact-info h2 {
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 10px;
}

.contact-info>p {
  font-size: 15px;
  color: #64748b;
  line-height: 1.8;
  margin-bottom: 28px;
}

.info-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.info-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
}

.info-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  background: #eff6ff;
  color: #2563eb;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.info-icon.green {
  background: #dcfce7;
  color: #22c55e;
}

.info-icon.orange {
  background: #fff7ed;
  color: #ea580c;
}

.info-icon.purple {
  background: #f5f3ff;
  color: #7c3aed;
}

.info-card h4 {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}

.info-card p {
  font-size: 13px;
  color: #64748b;
  line-height: 1.7;
}

.contact-social {
  display: flex;
  gap: 10px;
}

.contact-social a {
  width: 38px;
  height: 38px;
  background: #eff6ff;
  color: #2563eb;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.2s;
}

.contact-social a:hover {
  background: #2563eb;
  color: #fff;
}

/* Form Box */
.contact-form-box {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 36px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
}

.contact-form-box h3 {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
}

.form-sub {
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 24px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group {
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.form-group label span {
  color: #ef4444;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: #1e293b;
  background: #fafafa;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #2563eb;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.btn-primary.full-width {
  width: 100%;
  text-align: center;
  padding: 13px;
  font-size: 15px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Alerts */
.form-alert {
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.form-alert.success {
  background: #dcfce7;
  color: #166534;
}

.form-alert.error {
  background: #fee2e2;
  color: #991b1b;
}

/* Map */
.map-section {
  padding: 0 0 80px;
}

.map-wrapper {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}

/* Responsive */
@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .contact-form-box {
    padding: 24px;
  }
}

/* ===========================
   FEEDBACK PAGE
=========================== */
.feedback-container {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 48px;
  align-items: start;
}

.fb-info-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: all 0.3s;
}

.fb-info-card:hover {
  border-color: #2563eb;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.08);
  transform: translateY(-2px);
}

.fb-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: #eff6ff;
  color: #2563eb;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.fb-icon.green {
  background: #dcfce7;
  color: #22c55e;
}

.fb-icon.purple {
  background: #f5f3ff;
  color: #7c3aed;
}

.fb-info-card h3 {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}

.fb-info-card p {
  font-size: 13px;
  color: #64748b;
  line-height: 1.7;
}

.feedback-form-box {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 36px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
}

.feedback-form-box h3 {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
}

/* Star Rating */
.star-rating {
  display: flex;
  flex-direction: row-reverse;
  gap: 6px;
  margin-bottom: 8px;
}

.star-rating input {
  display: none;
}

.star-rating label {
  font-size: 32px;
  color: #d1d5db;
  cursor: pointer;
  transition: color 0.2s;
}

.star-rating input:checked~label,
.star-rating label:hover,
.star-rating label:hover~label {
  color: #f59e0b;
}

.rating-text {
  font-size: 13px;
  color: #94a3b8;
  font-weight: 500;
}

@media (max-width: 768px) {
  .feedback-container {
    grid-template-columns: 1fr;
  }

  .feedback-form-box {
    padding: 24px;
  }
}

/* ===========================
   GALLERY PAGE
=========================== */
/* ========== GALLERY STATS ========== */
.gallery-stats {
  padding: 40px 0;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  position: relative;
  overflow: hidden;
}

.gallery-stats::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(37, 99, 235, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

.gstats-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

.gstat-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 30px 20px;
  text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.3s ease, background 0.3s ease;
}

.gstat-box:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.gstat-num {
  display: block;
  font-size: 38px;
  font-weight: 800;
  background: linear-gradient(135deg, #60a5fa, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
  line-height: 1.1;
}

.gstat-lbl {
  display: block;
  font-size: 14px;
  color: #cbd5e1;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 40px;
}

.filter-btn {
  padding: 9px 22px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  border-radius: 99px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-btn:hover,
.filter-btn.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.gallery-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 4/3;
}

.gallery-item.hidden {
  display: none;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.class-img {
  background: linear-gradient(135deg, #eff6ff, #bfdbfe);
  color: #2563eb;
}

.web-img {
  background: linear-gradient(135deg, #f0fdf4, #bbf7d0);
  color: #22c55e;
}

.facility-img {
  background: linear-gradient(135deg, #fff7ed, #fed7aa);
  color: #ea580c;
}

.cert-img {
  background: linear-gradient(135deg, #fefce8, #fde68a);
  color: #d97706;
}

.event-img {
  background: linear-gradient(135deg, #fdf4ff, #e9d5ff);
  color: #7c3aed;
}

.tally-img {
  background: linear-gradient(135deg, #fff1f2, #fecdd3);
  color: #e11d48;
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(37, 99, 235, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

.gallery-item:hover .gallery-img {
  transform: scale(1.05);
}

.gallery-overlay i {
  font-size: 28px;
}

.gallery-overlay span {
  font-size: 14px;
  font-weight: 600;
}


/* Lightbox */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.lightbox.open {
  display: flex;
}

.lb-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1999;
}

.lb-backdrop.open {
  display: block;
}

.lb-content {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  max-width: 500px;
  width: 90%;
  z-index: 2001;
  text-align: center;
}

.lb-img {
  width: 100%;
  height: 300px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 72px;
  margin-bottom: 14px;
}

.lb-caption {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
}

.lb-close,
.lb-prev,
.lb-next {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  z-index: 2001;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb-close:hover,
.lb-prev:hover,
.lb-next:hover {
  background: rgba(255, 255, 255, 0.3);
}

.lb-close {
  position: fixed;
  top: 20px;
  right: 20px;
}

@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================
   SERVICES PAGE
=========================== */
/* ========== WHY TRUST NCLI ========== */
.why-trust-section {
  padding-bottom: 20px;
}

.why-trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.wj-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.wj-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.08);
  border-color: #bfdbfe;
}

.wj-card i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  font-size: 24px;
  background: #eff6ff;
  border-radius: 12px;
  margin-bottom: 16px;
}

.wj-card h4 {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.4;
  margin: 0;
}

body.dark .wj-card {
  background: #1e293b;
  border-color: #334155;
  box-shadow: none;
}

body.dark .wj-card:hover {
  border-color: #3b82f6;
  background: #253449;
}

body.dark .wj-card h4 {
  color: #f1f5f9;
}

body.dark .wj-card i {
  background: rgba(37, 99, 235, 0.2);
}

.service-detail-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 40px;
  margin-bottom: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.service-detail-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0));
  pointer-events: none;
}

.service-detail-card:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  transform: translateY(-5px);
  border-color: #cbd5e1;
}

.service-detail-card.reverse {
  grid-template-columns: 1fr auto;
}

.service-detail-card.reverse .sdc-icon {
  order: 2;
}

.sdc-icon {
  width: 90px;
  height: 90px;
  min-width: 90px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.service-detail-card:hover .sdc-icon {
  transform: scale(1.1) rotate(-5deg);
}

.sdc-icon.blue {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  color: #2563eb;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
}

.sdc-icon.orange {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  color: #ea580c;
  box-shadow: 0 10px 20px rgba(234, 88, 12, 0.2);
}

.sdc-icon.green {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  color: #16a34a;
  box-shadow: 0 10px 20px rgba(22, 163, 74, 0.2);
}

.sdc-icon.purple {
  background: linear-gradient(135deg, #faf5ff, #f3e8ff);
  color: #9333ea;
  box-shadow: 0 10px 20px rgba(147, 51, 234, 0.2);
}

.sdc-content h3 {
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}

.sdc-content > p {
  font-size: 16px;
  color: #475569;
  line-height: 1.7;
  margin-bottom: 24px;
}

.sdc-features {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
}

.sdc-feature {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #334155;
  font-weight: 600;
  background: #f8fafc;
  padding: 8px 14px;
  border-radius: 99px;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.service-detail-card:hover .sdc-feature {
  background: #fff;
  border-color: #cbd5e1;
  box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.sdc-feature i {
  color: #2563eb;
  font-size: 14px;
}

body.dark .service-detail-card {
  background: #1e293b;
  border-color: #334155;
}

body.dark .service-detail-card:hover {
  border-color: #475569;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

body.dark .sdc-content h3 {
  color: #f8fafc;
}

body.dark .sdc-content > p {
  color: #94a3b8;
}

body.dark .sdc-feature {
  background: #0f172a;
  border-color: #334155;
  color: #cbd5e1;
}

body.dark .service-detail-card:hover .sdc-feature {
  background: #1e293b;
  border-color: #475569;
}

/* =========================================
   ADDITIONAL SERVICES
========================================= */
.add-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.add-service-card {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 20px;
  padding: 36px 24px;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.add-service-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(circle at top right, rgba(37,99,235,0.03), transparent 60%);
  z-index: -1;
}

.add-service-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 15px 30px rgba(37, 99, 235, 0.08);
  transform: translateY(-5px);
}

.add-service-card > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #eff6ff;
  color: #2563eb;
  font-size: 28px;
  margin-bottom: 20px;
  transition: transform 0.3s ease, background 0.3s ease;
}

.add-service-card:hover > i {
  transform: scale(1.1) rotate(5deg);
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 8px 16px rgba(37,99,235,0.3);
}

.add-service-card h4 {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 12px;
}

.add-service-card p {
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
}

body.dark .add-service-card {
  background: #1e293b;
  border-color: #334155;
  box-shadow: none;
}
body.dark .add-service-card:hover {
  border-color: #3b82f6;
  box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}
body.dark .add-service-card h4 { color: #f1f5f9; }
body.dark .add-service-card p { color: #94a3b8; }
body.dark .add-service-card > i { background: rgba(37,99,235,0.15); color: #60a5fa; }
body.dark .add-service-card:hover > i { background: #3b82f6; color: #fff; }

/* =========================================
   PRICING SECTION
========================================= */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
}

.pricing-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 40px 30px;
  text-align: center;
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}

.pricing-card:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  transform: translateY(-8px);
  border-color: #cbd5e1;
}

.pricing-card.featured-pricing {
  border: 2px solid #3b82f6;
  background: linear-gradient(180deg, #f8fafc, #ffffff);
  transform: scale(1.02);
  box-shadow: 0 10px 30px rgba(37,99,235,0.1);
  z-index: 2;
}
.pricing-card.featured-pricing:hover {
  transform: scale(1.02) translateY(-8px);
  box-shadow: 0 25px 50px rgba(37,99,235,0.15);
}

.popular-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ef4444, #f59e0b);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 20px;
  border-radius: 99px;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(239,68,68,0.3);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.pricing-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto 24px;
  transition: transform 0.3s ease;
}
.pricing-card:hover .pricing-icon {
  transform: scale(1.1);
}

.pricing-icon.blue { background: linear-gradient(135deg, #eff6ff, #dbeafe); color: #2563eb; }
.pricing-icon.orange { background: linear-gradient(135deg, #fff7ed, #ffedd5); color: #ea580c; }
.pricing-icon.green { background: linear-gradient(135deg, #f0fdf4, #dcfce7); color: #16a34a; }

.pricing-card h4 {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 12px;
}

.pricing-price {
  font-size: 24px;
  font-weight: 900;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.pricing-card p {
  font-size: 14px;
  color: #475569;
  line-height: 1.8;
  margin-bottom: 30px;
}

body.dark .pricing-card { background: #1e293b; border-color: #334155; }
body.dark .pricing-card.featured-pricing {
  background: linear-gradient(180deg, #1e293b, #0f172a);
  border-color: #3b82f6;
}
body.dark .pricing-card h4 { color: #f1f5f9; }
body.dark .pricing-card p { color: #94a3b8; }
body.dark .pricing-icon.blue { background: rgba(37,99,235,0.15); color: #60a5fa; }
body.dark .pricing-icon.orange { background: rgba(234,88,12,0.15); color: #fb923c; }
body.dark .pricing-icon.green { background: rgba(22,163,74,0.15); color: #4ade80; }
body.dark .pricing-price { background: linear-gradient(135deg, #60a5fa, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
body.dark .pricing-card:hover { border-color: #475569; box-shadow: 0 20px 40px rgba(0,0,0,0.3); }

/* Responsive */
@media (max-width: 1024px) {

  .add-services-grid,
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {

  .service-detail-card,
  .service-detail-card.reverse {
    grid-template-columns: 1fr;
  }

  .service-detail-card.reverse .sdc-icon {
    order: 0;
  }

  .sdc-features {
    grid-template-columns: 1fr;
  }

  .add-services-grid,
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================
   COURSES PAGE
=========================== */
.why-join-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.wj-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.3s;
}

.wj-card:hover {
  border-color: #2563eb;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.08);
}

.wj-card>i {
  font-size: 24px;
  color: #2563eb;
  min-width: 28px;
}

.wj-card h4 {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 3px;
}

.wj-card p {
  font-size: 12px;
  color: #64748b;
}

/* Course Detail Card */
.course-detail-card {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 28px;
  transition: box-shadow 0.3s;
}

.course-detail-card:hover {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
}

.cdc-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px 32px;
  flex-wrap: wrap;
}

.cdc-header.blue {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
}

.cdc-header.green {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
}

.cdc-header.orange {
  background: linear-gradient(135deg, #fff7ed, #fed7aa);
}

.cdc-header.purple {
  background: linear-gradient(135deg, #faf5ff, #ede9fe);
}

.cdc-icon {
  width: 64px;
  height: 64px;
  min-width: 64px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.cdc-header.blue .cdc-icon {
  color: #2563eb;
}

.cdc-header.green .cdc-icon {
  color: #22c55e;
}

.cdc-header.orange .cdc-icon {
  color: #ea580c;
}

.cdc-header.purple .cdc-icon {
  color: #7c3aed;
}

.cdc-header h2 {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
}

.cdc-header p {
  font-size: 14px;
  color: #475569;
}

.cdc-badge {
  margin-left: auto;
  background: #2563eb;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 99px;
  white-space: nowrap;
}

.cdc-body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  padding: 32px;
  background: #fff;
}

.cdc-left h4 {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 16px;
}

.cdc-topics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.topic-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #374151;
}

.topic-item i {
  color: #22c55e;
  font-size: 14px;
}

.cdc-info-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cdc-info-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cdc-info-item>i {
  font-size: 18px;
  color: #2563eb;
  min-width: 20px;
}

.cdc-info-item span {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 2px;
}

.cdc-info-item strong {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

/* Coming Soon */
.coming-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.coming-card {
  background: #fff;
  border: 2px dashed #cbd5e1;
  border-radius: 14px;
  padding: 32px 24px;
  text-align: center;
  transition: all 0.3s;
}

.coming-card:hover {
  border-color: #2563eb;
  border-style: solid;
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.08);
}

.coming-icon {
  width: 60px;
  height: 60px;
  background: #f1f5f9;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #64748b;
  margin: 0 auto 16px;
}

.coming-card h4 {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

.coming-card p {
  font-size: 13px;
  color: #64748b;
  line-height: 1.7;
  margin-bottom: 16px;
}

.coming-tag {
  display: inline-block;
  background: #fef9c3;
  color: #854d0e;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 99px;
}

/* Responsive */
@media (max-width: 1024px) {
  .why-join-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .coming-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .why-join-grid {
    grid-template-columns: 1fr;
  }

  .cdc-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .cdc-badge {
    margin-left: 0;
  }

  .cdc-body {
    grid-template-columns: 1fr;
  }

  .cdc-topics {
    grid-template-columns: 1fr;
  }

  .coming-grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================
   LOGIN PAGE
=========================== */
.login-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.login-info h2 {
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 10px;
}

.login-info>p {
  font-size: 15px;
  color: #64748b;
  line-height: 1.8;
  margin-bottom: 28px;
}

.login-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.login-feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  transition: all 0.3s;
}

.login-feature:hover {
  border-color: #2563eb;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.08);
}

.lf-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: #eff6ff;
  color: #2563eb;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.lf-icon.green {
  background: #dcfce7;
  color: #22c55e;
}

.lf-icon.orange {
  background: #fff7ed;
  color: #ea580c;
}

.lf-icon.purple {
  background: #f5f3ff;
  color: #7c3aed;
}

.login-feature h4 {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 3px;
}

.login-feature p {
  font-size: 13px;
  color: #64748b;
}

.login-help {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #fefce8;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 13px;
  color: #92400e;
  line-height: 1.6;
}

.login-help i {
  color: #d97706;
  margin-top: 2px;
}

/* Login Form Box */
.login-form-box {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 36px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
}

.login-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 32px;
  text-align: center;
}

.login-logo img {
  max-width: 180px;
  height: auto;
}

.login-form-box h3 {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
}

/* Input with icon */
.input-icon-wrap {
  position: relative;
}

.input-icon-wrap>i {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  color: #94a3b8;
}

.input-icon-wrap input[type="text"],
.input-icon-wrap input[type="password"],
.input-icon-wrap input[type="email"],
.input-icon-wrap input {
  padding-left: 42px !important;
}

.toggle-pass {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 15px;
  color: #94a3b8;
  cursor: pointer;
}

.toggle-pass:hover {
  color: #2563eb;
}

.login-footer-note {
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.login-footer-note a {
  color: #2563eb;
  font-weight: 600;
}

.login-footer-note i {
  color: #2563eb;
}

/* ===========================
   DASHBOARD
=========================== */
.student-info-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.sib-avatar {
  width: 64px;
  height: 64px;
  background: #2563eb;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  min-width: 64px;
}

.sib-details h2 {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
}

.sib-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.sib-meta span {
  font-size: 13px;
  color: #475569;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}

.sib-meta i {
  color: #2563eb;
}

.logout-btn {
  margin-left: auto;
  white-space: nowrap;
}

.status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
}

.status-badge.active {
  background: #dcfce7;
  color: #166534;
}

.status-badge.completed {
  background: #dbeafe;
  color: #1e40af;
}

.status-badge.dropped {
  background: #fee2e2;
  color: #991b1b;
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.ds-card {
  border-radius: 14px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.ds-card.blue {
  background: #eff6ff;
}

.ds-card.green {
  background: #dcfce7;
}

.ds-card.orange {
  background: #fff7ed;
}

.ds-card.purple {
  background: #f5f3ff;
}

.ds-card>i {
  font-size: 28px;
}

.ds-card.blue>i {
  color: #2563eb;
}

.ds-card.green>i {
  color: #22c55e;
}

.ds-card.orange>i {
  color: #ea580c;
}

.ds-card.purple>i {
  color: #7c3aed;
}

.ds-card span {
  font-size: 12px;
  color: #64748b;
  display: block;
  margin-bottom: 2px;
}

.ds-card strong {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.dash-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px;
  overflow: hidden;
}

.dash-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
}

.dash-card-header i {
  font-size: 18px;
  color: #2563eb;
}

.dash-card-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}

.dd-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f8fafc;
  font-size: 14px;
}

.dd-row span {
  color: #64748b;
}

.dd-row strong {
  color: #0f172a;
  font-weight: 600;
}

.fee-progress {
  margin-top: 16px;
}

.fp-bar {
  height: 8px;
  background: #f1f5f9;
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 6px;
}

.fp-fill {
  height: 100%;
  background: #2563eb;
  border-radius: 99px;
  transition: width 1s ease;
}

.fee-progress span {
  font-size: 12px;
  color: #64748b;
}

.cert-available,
.cert-pending {
  text-align: center;
  padding: 20px;
}

.cert-available>i {
  font-size: 40px;
  color: #f59e0b;
  margin-bottom: 12px;
  display: block;
}

.cert-pending>i {
  font-size: 40px;
  color: #cbd5e1;
  margin-bottom: 12px;
  display: block;
}

.cert-available h4,
.cert-pending h4 {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}

.cert-available p,
.cert-pending p {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 14px;
}

/* Student typing achievements */
.typing-achievement-card {
  grid-column: 1 / -1;
}

.typing-achievement-summary,
.typing-current-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.typing-achievement-summary span,
.typing-current-progress span {
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
}

.typing-achievement-summary span strong,
.typing-current-progress span strong {
  color: #2563eb;
  font-weight: 700;
}

.typing-achievement-list {
  display: grid;
  gap: 12px;
}

.typing-achievement-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid #fde68a;
  border-radius: 8px;
  background: #fffbeb;
}

.typing-achievement-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #fef3c7;
  color: #b45309;
  font-size: 20px;
}

.typing-achievement-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.typing-achievement-info strong {
  color: #0f172a;
  font-size: 14px;
}

.typing-achievement-info span {
  color: #64748b;
  font-size: 12px;
}

.typing-achievement-pending {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 18px;
}

.typing-achievement-pending > i {
  font-size: 38px;
  color: #2563eb;
}

.typing-achievement-pending h4 {
  font-size: 16px;
}

.typing-achievement-pending p {
  max-width: 620px;
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.6;
}

/* Printable typing achievement certificate */
.typing-certificate-shell {
  max-width: 1050px;
}

.typing-certificate-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.typing-certificate-paper {
  position: relative;
  min-height: 680px;
  padding: 54px 64px 38px;
  border: 8px double #1d4ed8;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
  text-align: center;
}

.typing-certificate-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 42px;
}

.typing-certificate-brand img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.typing-certificate-brand div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
}

.typing-certificate-brand strong {
  font-size: 20px;
}

.typing-certificate-brand span,
.typing-certificate-number {
  color: #64748b;
  font-size: 12px;
}

.typing-certificate-heading > span {
  display: block;
  color: #b45309;
  font-size: 17px;
  font-weight: 800;
  text-transform: uppercase;
}

.typing-certificate-heading h1 {
  margin: 8px 0 30px;
  color: #1d4ed8;
  font-size: 34px;
}

.typing-certificate-body > p {
  max-width: 700px;
  margin: 0 auto 14px;
  color: #475569;
  line-height: 1.7;
}

.typing-certificate-body h2 {
  margin: 12px 0 20px;
  color: #0f172a;
  font-size: 32px;
  text-decoration: underline;
  text-decoration-color: #93c5fd;
  text-underline-offset: 8px;
}

.typing-certificate-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 620px;
  margin: 34px auto;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  overflow: hidden;
}

.typing-certificate-stats div {
  padding: 18px 12px;
  background: #eff6ff;
}

.typing-certificate-stats div + div {
  border-left: 1px solid #bfdbfe;
}

.typing-certificate-stats strong,
.typing-certificate-stats span {
  display: block;
}

.typing-certificate-stats strong {
  color: #1d4ed8;
  font-size: 24px;
}

.typing-certificate-stats span {
  margin-top: 4px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.typing-certificate-footer {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  align-items: end;
  max-width: 680px;
  margin: 46px auto 26px;
}

.typing-certificate-footer > div:not(.typing-certificate-seal) {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid #64748b;
}

.typing-certificate-footer span {
  color: #64748b;
  font-size: 11px;
}

.typing-certificate-seal {
  color: #b45309;
  font-size: 48px;
}

body.dark .typing-achievement-item {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.08);
}

body.dark .typing-achievement-info strong {
  color: #f8fafc;
}

body.dark .typing-achievement-summary span,
body.dark .typing-current-progress span {
  background: #1e293b;
  border-color: #334155;
  color: #cbd5e1;
}

body.dark .typing-achievement-summary span strong,
body.dark .typing-current-progress span strong {
  color: #60a5fa;
}

/* Responsive */
@media (max-width: 1024px) {
  .dashboard-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .login-container {
    grid-template-columns: 1fr;
  }

  .login-form-box {
    padding: 24px;
  }

  .dashboard-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .student-info-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .logout-btn {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }
}

/* ===========================
   CERTIFICATE VERIFY
=========================== */
.cv-container {
  max-width: 720px;
}

.cv-search-box {
  background: linear-gradient(135deg, #eff6ff, #f8fafc);
  border: 1px solid #bfdbfe;
  border-radius: 20px;
  padding: 48px 40px;
  text-align: center;
  margin-bottom: 32px;
}

.cv-search-icon {
  width: 72px;
  height: 72px;
  background: #2563eb;
  color: #fff;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  margin: 0 auto 20px;
}

.cv-search-box h2 {
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
}

.cv-search-box p {
  font-size: 15px;
  color: #64748b;
  margin-bottom: 28px;
  line-height: 1.7;
}

.cv-input-wrap {
  display: flex;
  gap: 12px;
  max-width: 500px;
  margin: 0 auto;
}

.cv-input-wrap input {
  flex: 1;
  padding: 12px 16px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}

.cv-input-wrap input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

/* Not Found */
.cv-not-found {
  background: #fff;
  border: 1px solid #fecaca;
  border-radius: 16px;
  padding: 48px 32px;
  text-align: center;
}

.cv-not-found>i {
  font-size: 52px;
  color: #ef4444;
  display: block;
  margin-bottom: 16px;
}

.cv-not-found h3 {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
}

.cv-not-found p {
  font-size: 14px;
  color: #64748b;
}

/* Verified Badge */
.cv-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #dcfce7;
  color: #166534;
  font-size: 14px;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 99px;
  margin-bottom: 24px;
}

.cv-verified-badge i {
  font-size: 16px;
}

/* Certificate Card */
.certificate-card {
  background: #fff;
  border: 2px solid #2563eb;
  border-radius: 20px;
  padding: 36px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(37, 99, 235, 0.12);
}

.cert-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 2px dashed #bfdbfe;
}

.cert-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cert-seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: #eff6ff;
  border: 2px solid #2563eb;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #2563eb;
}

.cert-seal i {
  font-size: 22px;
}

.cert-body {
  text-align: center;
  margin-bottom: 32px;
}

.cert-label {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 8px;
}

.cert-name {
  font-size: 32px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 6px;
  font-style: italic;
}

.cert-father {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 12px;
}

.cert-text {
  font-size: 14px;
  color: #475569;
  margin-bottom: 8px;
}

.cert-course {
  display: inline-block;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 20px;
  font-weight: 800;
  padding: 10px 32px;
  border-radius: 10px;
  border: 2px solid #bfdbfe;
  margin: 8px 0;
}

.cert-footer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding-top: 24px;
  border-top: 2px dashed #bfdbfe;
}

.cert-detail span {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}

.cert-detail strong {
  font-size: 13px;
  color: #0f172a;
  font-weight: 700;
}

.cert-watermark {
  position: absolute;
  font-size: 120px;
  font-weight: 900;
  color: rgba(37, 99, 235, 0.04);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* Info Grid */
.cv-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}

.cv-info-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px;
  text-align: center;
  transition: all 0.3s;
}

.cv-info-card:hover {
  border-color: #2563eb;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.08);
}

.cv-info-card>i {
  font-size: 28px;
  color: #2563eb;
  margin-bottom: 12px;
  display: block;
}

.cv-info-card h4 {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}

.cv-info-card p {
  font-size: 13px;
  color: #64748b;
  line-height: 1.7;
}

/* Responsive */
@media (max-width: 768px) {
  .cv-search-box {
    padding: 28px 20px;
  }

  .cv-input-wrap {
    flex-direction: column;
  }

  .cert-footer {
    grid-template-columns: repeat(2, 1fr);
  }

  .cv-info-grid {
    grid-template-columns: 1fr;
  }

  .cert-name {
    font-size: 24px;
  }
}

/* Print Styles */
@media print {

  .header,
  .footer,
  .page-banner,
  .cv-search-box,
  .cv-info-grid,
  .cv-verified-badge,
  button {
    display: none !important;
  }

  body {
    padding: 0 !important;
  }

  .certificate-card {
    border: 3px solid #2563eb !important;
    box-shadow: none !important;
    margin: 0 !important;
  }
}

/* ===========================
   ADVANCED TYPING PAGE
=========================== */
.tp-wrapper {
  max-width: 1000px;
}

/* Settings Bar */
.tp-settings {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 20px;
}

.tps-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tps-group label {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.tps-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tps-btn {
  padding: 6px 14px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
}

.tps-btn:hover,
.tps-btn.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

/* Tabs */
.tp-tabs {
  display: flex;
  gap: 4px;
  background: #f1f5f9;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 20px;
}

.tp-tab {
  flex: 1;
  padding: 10px;
  border: none;
  background: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.tp-tab.active {
  background: #fff;
  color: #2563eb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Panels */
.tp-panel {
  display: none;
}

.tp-panel.active {
  display: block;
}

/* Lessons Layout */
.lessons-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
}

.lessons-sidebar {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
}

.ls-header {
  padding: 16px;
  border-bottom: 1px solid #f1f5f9;
}

.ls-header h3 {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
}

.lesson-list {
  max-height: 500px;
  overflow-y: auto;
}

.lesson-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #f8fafc;
  cursor: pointer;
  transition: background 0.15s;
}

.lesson-item:hover {
  background: #f8fafc;
}

.lesson-item.selected {
  background: #eff6ff;
}

.li-num {
  width: 28px;
  height: 28px;
  background: #f1f5f9;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  min-width: 28px;
}

.lesson-item.selected .li-num {
  background: #2563eb;
  color: #fff;
}

.li-title {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 3px;
}

.li-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
}

.li-badge.basic {
  background: #dcfce7;
  color: #166534;
}

.li-badge.intermediate {
  background: #dbeafe;
  color: #1e40af;
}

.li-badge.advanced {
  background: #fce7f3;
  color: #9d174d;
}

.li-arrow {
  font-size: 12px;
  color: #cbd5e1;
  margin-left: auto;
}

.lessons-intro {
  background: linear-gradient(135deg, #eff6ff, #f8fafc);
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.li-welcome {
  text-align: center;
  padding: 40px;
}

.li-welcome>i {
  font-size: 48px;
  color: #2563eb;
  margin-bottom: 16px;
  display: block;
}

.li-welcome h3 {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
}

.li-welcome p {
  font-size: 14px;
  color: #64748b;
  line-height: 1.7;
  margin-bottom: 16px;
}

.li-badges {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Stats Bar */
.tp-statbar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.tpsb-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}

.tpsb-val {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: #2563eb;
  line-height: 1;
}

.tpsb-lbl {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 4px;
  display: block;
  text-transform: uppercase;
}

/* Lesson Header */
.tp-lesson-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #1e40af;
  gap: 12px;
}

/* Typing Display */
.tp-display-wrap {
  position: relative;
  margin-bottom: 16px;
}

.tp-display {
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px;
  min-height: 120px;
  max-height: 250px;
  overflow-y: auto;
  cursor: text;
  transition: border-color 0.2s;
}

.tp-display:focus-within {
  border-color: #2563eb;
}

.lessonPreview {
  font-size: 20px;
  line-height: 2.2;
  color: #94a3b8;
  letter-spacing: 0.3px;
  user-select: none;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.tp-char.correct {
  color: #22c55e;
}

.tp-char.wrong {
  color: #ef4444;
  background: #fee2e2;
  border-radius: 2px;
}

.tp-char.cursor {
  border-bottom: 2px solid #2563eb;
  color: #0f172a;
  animation: cur 1s infinite;
}

@keyframes cur {

  0%,
  100% {
    border-color: #2563eb
  }

  50% {
    border-color: transparent
  }
}

.tp-hidden-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* Finger Guide */
.tp-finger-guide {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
}

.tfg-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
}

.tfg-hands {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tfg-finger {
  padding: 5px 12px;
  border-radius: 8px;
  border: 1.5px solid;
  font-size: 11px;
  font-weight: 600;
}

/* Keyboard */
.tp-keyboard {
  background: #1e293b;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
}

.kb-row {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin-bottom: 5px;
}

.kb-key {
  min-width: 36px;
  height: 36px;
  background: #334155;
  color: #e2e8f0;
  border-radius: 6px;
  border: 1px solid #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  cursor: default;
  transition: all 0.15s;
  position: relative;
}

.kb-key::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--kc, transparent);
  border-radius: 0 0 6px 6px;
}

.kb-key.kb-special {
  min-width: 56px;
  min-width: 48px;
  font-size: 10px;
  background: #1e3a5f;
}

.kb-key[id="key-Backspace"],
.kb-key[id="key-Enter"],
.kb-key[id="key-Shift"],
.kb-key[id="key-Caps"] {
  flex-grow: 1;
}

.kb-key.kb-active {
  background: var(--kc, #2563eb);
  color: #fff;
  transform: scale(1.1);
  box-shadow: 0 0 12px var(--kc, #2563eb);
}

.kb-key.kb-next {
  background: rgba(59, 130, 246, 0.25);
  color: #e2e8f0;
  border-color: #93c5fd;
}

.kb-key[id="key-Space"] {
  min-width: 280px;
}

/* Controls */
.tp-controls {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 16px;
}

/* Result */
.tp-result {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.tp-result.show {
  display: flex;
}

.tpr-box {
  background: #fff;
  border-radius: 20px;
  padding: 40px;
  text-align: center;
  max-width: 400px;
  width: 90%;
}

.tpr-icon {
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: #fff;
  margin: 0 auto 16px;
}

.tpr-box h3 {
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 20px;
}

.tpr-stats {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-bottom: 16px;
}

.tpr-val {
  display: block;
  font-size: 30px;
  font-weight: 800;
  color: #2563eb;
}

.tpr-lbl {
  font-size: 12px;
  color: #94a3b8;
}

.r-grade {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 99px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 20px;
}

.r-grade.excellent {
  background: #dcfce7;
  color: #166534;
}

.r-grade.good {
  background: #dbeafe;
  color: #1e40af;
}

.r-grade.average {
  background: #fef9c3;
  color: #854d0e;
}

.r-grade.beginner {
  background: #fff7ed;
  color: #9a3412;
}

/* ===== GAME ===== */
.game-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.game-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  background: #1e293b;
  color: #fff;
  border-radius: 12px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
}

.gs-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.game-arena {
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
  border-radius: 14px;
  height: 380px;
  position: relative;
  overflow: hidden;
  border: 2px solid #334155;
}

.falling-word {
  position: absolute;
  background: rgba(30, 41, 59, 0.9);
  border: 1.5px solid;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.8)
  }

  to {
    opacity: 1;
    transform: scale(1)
  }
}

.game-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.92);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  gap: 8px;
}

.game-overlay.show {
  display: flex;
}

.game-overlay h3 {
  font-size: 28px;
  font-weight: 800;
}

.game-overlay p {
  font-size: 16px;
  color: #94a3b8;
  margin-bottom: 12px;
}

.game-input-wrap {
  display: flex;
  gap: 12px;
  align-items: center;
}

.game-input {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  font-size: 16px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}

.game-input:focus {
  border-color: #2563eb;
}

.game-input:disabled {
  background: #f8fafc;
  color: #94a3b8;
}

.game-btns {
  display: flex;
  gap: 8px;
}

.game-instructions {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 20px;
}

.game-instructions h4 {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}

.game-instructions p {
  font-size: 13px;
  color: #64748b;
  line-height: 1.7;
}

/* Responsive */
@media (max-width: 768px) {
  .lessons-layout {
    grid-template-columns: 1fr;
  }

  .lessons-intro {
    display: none;
  }

  .tp-statbar {
    grid-template-columns: repeat(3, 1fr);
  }

  .kb-key {
    min-width: 28px;
    height: 28px;
    font-size: 10px;
  }

  .kb-key.kb-special {
    min-width: 40px;
  }

  .kb-key[id="key-Space"] {
    min-width: 180px;
  }

  .game-input-wrap {
    flex-direction: column;
  }
}

/* ===========================
   GOVT JOBS PAGE
=========================== */
.jobs-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.jobs-search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.js-search {
  position: relative;
}

.js-search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 14px;
}

.js-search input {
  padding: 10px 14px 10px 36px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  width: 280px;
  transition: border-color 0.2s;
}

.js-search input:focus {
  border-color: #2563eb;
}

.jobs-count {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #64748b;
}

.jobs-count strong {
  color: #2563eb;
  font-size: 18px;
}

.jobs-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  align-items: start;
}

/* Sidebar */
.jsb-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
}

.jsb-card h4 {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.jsb-card h4 i {
  color: #2563eb;
}

.jsb-cats {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jcat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  transition: all 0.2s;
}

.jcat:hover {
  background: #eff6ff;
  color: #2563eb;
}

.jcat.active {
  background: #2563eb;
  color: #fff;
}

.jcat i {
  font-size: 12px;
}

.jsb-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jsb-links a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #2563eb;
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 1px solid #f1f5f9;
  transition: gap 0.2s;
}

.jsb-links a:hover {
  gap: 12px;
}

.jsb-help {
  text-align: center;
  background: linear-gradient(135deg, #eff6ff, #f8fafc);
}

.jsb-help>i {
  font-size: 32px;
  color: #2563eb;
  margin-bottom: 10px;
  display: block;
}

.jsb-help h4 {
  justify-content: center;
}

.jsb-help p {
  font-size: 13px;
  color: #64748b;
  line-height: 1.6;
}

/* Job Cards */
.jobs-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.job-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px;
  transition: all 0.3s;
}

.job-card:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.job-card.expired {
  opacity: 0.7;
}

.jc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.jc-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.jc-cat {
  font-size: 11px;
  font-weight: 700;
  background: #eff6ff;
  color: #2563eb;
  padding: 3px 10px;
  border-radius: 99px;
}

.jc-status {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
}

.active-tag {
  background: #dcfce7;
  color: #166534;
}

.expired-tag {
  background: #f1f5f9;
  color: #64748b;
}

.urgent-tag {
  background: #fef3c7;
  color: #92400e;
}

.jc-title {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 6px;
  line-height: 1.4;
}

.jc-dept {
  font-size: 13px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.jc-posts {
  text-align: center;
  min-width: 70px;
}

.jcp-num {
  display: block;
  font-size: 28px;
  font-weight: 800;
  color: #2563eb;
  line-height: 1;
}

.jcp-lbl {
  font-size: 11px;
  color: #94a3b8;
  text-transform: uppercase;
}

.jc-desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.7;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
}

.jc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.jc-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.jc-meta span {
  font-size: 12px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 5px;
}

.date-normal {
  color: #64748b !important;
}

.date-urgent {
  color: #d97706 !important;
  font-weight: 600 !important;
}

.date-expired {
  color: #ef4444 !important;
}

.jc-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.jc-view-btn {
  font-size: 13px;
  font-weight: 700;
  color: #2563eb;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.2s, color 0.2s;
}

.jc-view-btn:hover {
  gap: 8px;
  color: #1d4ed8;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 8px;
}

.why-card.job-card {
  display: flex;
  flex-direction: column;
  min-height: 202px;
  text-align: left;
}

.why-card .jc-header {
  align-items: center;
}

.why-card .jc-dept {
  align-items: flex-start;
  line-height: 1.65;
  margin-bottom: 16px;
}

.why-card .jc-dept i {
  color: #2563eb;
  margin-top: 3px;
  min-width: 16px;
}

.why-card .jc-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
}

.why-card .jc-meta {
  gap: 0;
}

.why-card .why-card-mark {
  cursor: default;
}

@media (max-width: 1024px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .why-grid {
    grid-template-columns: 1fr;
  }

  .why-card.job-card {
    min-height: auto;
  }
}

/* Empty State */
.jobs-empty {
  text-align: center;
  padding: 60px 32px;
  background: #f8fafc;
  border-radius: 14px;
  border: 1px dashed #cbd5e1;
}

.jobs-empty>i {
  font-size: 48px;
  color: #cbd5e1;
  margin-bottom: 16px;
  display: block;
}

.jobs-empty h3 {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
}

.jobs-empty p {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 20px;
}

@media (max-width: 1024px) {
  .jobs-layout {
    grid-template-columns: 1fr;
  }

  .jobs-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .jsb-card {
    margin-bottom: 0;
  }
}

@media (max-width: 768px) {
  .jobs-sidebar {
    grid-template-columns: 1fr;
  }

  .jc-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .js-search input {
    width: 200px;
  }
}

/* ===========================
   SHOP PAGE
=========================== */
.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.shop-search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.shop-toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.products-found {
  font-size: 14px;
  color: #64748b;
}

.products-found strong {
  color: #2563eb;
  font-size: 16px;
}

.sort-select {
  padding: 8px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  color: #374151;
}

.cart-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #2563eb;
  color: #fff;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  position: relative;
  transition: background 0.2s;
}

.cart-btn:hover {
  background: #1d4ed8;
}

.cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #ef4444;
  color: #fff;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: start;
}

.ssb-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 16px;
}

.ssb-card h4 {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ssb-card h4 i {
  color: #2563eb;
}

.scat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  transition: all 0.2s;
  justify-content: space-between;
}

.scat:hover {
  background: #eff6ff;
  color: #2563eb;
}

.scat.active {
  background: #2563eb;
  color: #fff;
}

.scat>div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.scat span {
  background: rgba(0, 0, 0, 0.08);
  padding: 1px 7px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
}

.scat.active span {
  background: rgba(255, 255, 255, 0.2);
}

/* Products Grid */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.product-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  transition: all 0.3s;
}

.product-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.p-discount {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
  z-index: 1;
}

.p-out-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #64748b;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
  z-index: 1;
}

.p-image {
  height: 160px;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.p-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.product-card:hover .p-image img {
  transform: scale(1.05);
}

.p-image-placeholder {
  font-size: 52px;
  color: #cbd5e1;
}

.p-body {
  padding: 16px;
}

.p-cat {
  font-size: 11px;
  font-weight: 700;
  color: #2563eb;
  background: #eff6ff;
  padding: 2px 8px;
  border-radius: 99px;
  display: inline-block;
  margin-bottom: 8px;
}

.p-name {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
  line-height: 1.4;
}

.p-desc {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.6;
  margin-bottom: 12px;
}

.p-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.p-price {
  font-size: 20px;
  font-weight: 800;
  color: #2563eb;
}

.p-old-price {
  font-size: 13px;
  color: #94a3b8;
  text-decoration: line-through;
  margin-left: 6px;
}

.p-stock {
  font-size: 12px;
  font-weight: 600;
  color: #22c55e;
}

.p-stock.low {
  color: #ef4444;
}

.btn-add-cart {
  width: 100%;
  padding: 10px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-add-cart:hover {
  background: #1d4ed8;
}

.btn-add-cart.disabled {
  background: #e2e8f0;
  color: #94a3b8;
  cursor: not-allowed;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #0f172a;
  color: #fff;
  padding: 14px 20px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  transform: translateY(80px);
  opacity: 0;
  transition: all 0.3s;
  z-index: 9999;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast i {
  color: #4ade80;
  font-size: 16px;
}

/* Shop Empty */
.shop-empty {
  text-align: center;
  padding: 60px 32px;
  background: #f8fafc;
  border-radius: 14px;
  border: 1px dashed #cbd5e1;
}

.shop-empty>i {
  font-size: 48px;
  color: #cbd5e1;
  margin-bottom: 16px;
  display: block;
}

.shop-empty h3 {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
}

.shop-empty p {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 20px;
}

/* ===========================
   CART PAGE
=========================== */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start;
}

.cart-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.cart-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  transition: box-shadow 0.2s;
}

.cart-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.ci-image {
  width: 60px;
  height: 60px;
  min-width: 60px;
  background: #f1f5f9;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #94a3b8;
}

.ci-info {
  flex: 1;
}

.ci-info h4 {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}

.ci-price {
  font-size: 13px;
  color: #64748b;
}

.ci-qty input {
  width: 64px;
  padding: 7px 10px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  text-align: center;
  outline: none;
}

.ci-qty input:focus {
  border-color: #2563eb;
}

.ci-subtotal {
  font-size: 17px;
  font-weight: 800;
  color: #2563eb;
  min-width: 80px;
  text-align: right;
}

.ci-remove {
  color: #ef4444;
  font-size: 16px;
  padding: 6px;
  border-radius: 6px;
  transition: background 0.2s;
}

.ci-remove:hover {
  background: #fee2e2;
}

.cart-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cart-summary {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px;
  position: sticky;
  top: 90px;
}

.cart-summary h3 {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cs-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.cs-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #475569;
}

.cs-row strong {
  color: #0f172a;
}

.cs-divider {
  border: none;
  border-top: 1px dashed #e2e8f0;
  margin: 12px 0;
}

.cs-total {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}

.cs-total strong {
  color: #2563eb;
  font-size: 20px;
}

.cs-secure {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  font-size: 12px;
  color: #94a3b8;
  margin-top: 12px;
}

.cs-secure i {
  color: #22c55e;
}

/* Cart Empty */
.cart-empty {
  text-align: center;
  padding: 80px 32px;
  background: #f8fafc;
  border-radius: 14px;
  border: 1px dashed #cbd5e1;
}

.cart-empty>i {
  font-size: 52px;
  color: #cbd5e1;
  margin-bottom: 20px;
  display: block;
}

.cart-empty h3 {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
}

.cart-empty p {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 20px;
}

/* ===========================
   CHECKOUT PAGE
=========================== */
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start;
}

.checkout-form-box {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 32px;
}

.checkout-form-box h3 {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkout-form-box h3 i {
  color: #2563eb;
}

/* Payment Options */
.payment-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.payment-option {
  cursor: pointer;
}

.payment-option input {
  display: none;
}

.po-content {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
  transition: all 0.2s;
}

.payment-option input:checked+.po-content {
  border-color: #2563eb;
  background: #eff6ff;
}

.po-content>i {
  font-size: 24px;
  color: #2563eb;
  min-width: 28px;
}

.po-content strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.po-content span {
  font-size: 12px;
  color: #94a3b8;
}

/* Order Success */
.order-success {
  text-align: center;
  padding: 60px 32px;
  background: linear-gradient(135deg, #f0fdf4, #fff);
  border: 1px solid #bbf7d0;
  border-radius: 16px;
  max-width: 500px;
  margin: 0 auto;
}

.os-icon {
  width: 80px;
  height: 80px;
  background: #22c55e;
  color: #fff;
  border-radius: 50%;
  font-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.order-success h2 {
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
}

.order-success p {
  font-size: 15px;
  color: #475569;
}

.os-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 1024px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .shop-layout {
    grid-template-columns: 1fr;
  }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cart-layout {
    grid-template-columns: 1fr;
  }

  .checkout-layout {
    grid-template-columns: 1fr;
  }

  .cart-item {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .products-grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================
   AUTH PAGES
=========================== */
.auth-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}

.auth-box {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.auth-header {
  text-align: center;
  margin-bottom: 24px;
}

.auth-icon {
  width: 60px;
  height: 60px;
  background: #eff6ff;
  color: #2563eb;
  border-radius: 16px;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.auth-icon.green {
  background: #dcfce7;
  color: #22c55e;
}

.auth-header h2 {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
}

.auth-header p {
  font-size: 14px;
  color: #64748b;
}

/* ===========================
   CUSTOMER DASHBOARD
=========================== */
.customer-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  padding: 22px 28px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.cb-avatar {
  width: 60px;
  height: 60px;
  min-width: 60px;
  background: #2563eb;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.cb-info h2 {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 6px;
}

.cb-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.cb-meta span {
  font-size: 13px;
  color: #475569;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}

.cb-meta i {
  color: #2563eb;
}

.customer-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
}

.cust-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
}

.cust-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 22px;
  border-bottom: 1px solid #f1f5f9;
  background: #f8fafc;
}

.cust-card-header i {
  font-size: 18px;
  color: #2563eb;
}

.cust-card-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}

.cust-card .contact-form {
  padding: 22px;
}

/* Order Cards */
.order-card {
  border-bottom: 1px solid #f1f5f9;
  padding: 20px 22px;
  transition: background 0.2s;
}

.order-card:hover {
  background: #fafbff;
}

.order-card:last-child {
  border-bottom: none;
}

.oc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

.oc-number {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
}

.oc-number i {
  color: #2563eb;
  font-size: 12px;
}

.oc-date {
  font-size: 12px;
  color: #94a3b8;
}

.oc-status {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 99px;
  margin-bottom: 4px;
}

.oc-total {
  font-size: 18px;
  font-weight: 800;
  color: #2563eb;
  text-align: right;
}

.oc-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.oc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8fafc;
  border-radius: 8px;
  padding: 10px 12px;
}

.oci-img {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: #eff6ff;
  color: #2563eb;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.oci-info {
  flex: 1;
}

.oci-info strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.oci-info span {
  font-size: 12px;
  color: #64748b;
}

.oci-subtotal {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.oc-footer {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}

.oc-payment,
.oc-address {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #64748b;
}

.oc-payment i,
.oc-address i {
  color: #2563eb;
}

/* Quick Links */
.cust-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  transition: all 0.2s;
  border: 1px solid #f1f5f9;
}

.cust-link:hover {
  background: #eff6ff;
  color: #2563eb;
  border-color: #bfdbfe;
}

.cust-link i {
  color: #2563eb;
  font-size: 15px;
}

/* Responsive */
@media (max-width: 768px) {
  .auth-layout {
    grid-template-columns: 1fr;
  }

  .customer-layout {
    grid-template-columns: 1fr;
  }

  .customer-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .oc-header {
    flex-direction: column;
    gap: 10px;
  }
}

/* ===========================
   TERMS PAGE
=========================== */
.terms-container {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  align-items: start;
}

.terms-nav {
  position: sticky;
  top: 90px;
}

.tn-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px;
}

.tn-card h4 {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tn-card h4 i {
  color: #2563eb;
}

.tn-link {
  display: block;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  border-radius: 8px;
  transition: all 0.2s;
  margin-bottom: 2px;
}

.tn-link:hover {
  background: #eff6ff;
  color: #2563eb;
}

/* Terms Content */
.terms-intro {
  background: linear-gradient(135deg, #eff6ff, #f8fafc);
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 28px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.terms-intro>i {
  font-size: 28px;
  color: #2563eb;
  margin-top: 2px;
}

.terms-intro p {
  font-size: 15px;
  color: #475569;
  line-height: 1.8;
}

.terms-section {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  margin-bottom: 20px;
  overflow: hidden;
}

.ts-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
}

.ts-num {
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: #2563eb;
  color: #fff;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ts-header h2 {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
}

.ts-body {
  padding: 24px;
}

.ts-body p {
  font-size: 14px;
  color: #475569;
  line-height: 1.8;
  margin-bottom: 14px;
}

.ts-body ul {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ts-body ul li {
  font-size: 14px;
  color: #475569;
  line-height: 1.7;
  padding-left: 20px;
  position: relative;
}

.ts-body ul li::before {
  content: '•';
  color: #2563eb;
  font-weight: 700;
  position: absolute;
  left: 0;
}

.terms-highlight {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.terms-highlight.green {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.terms-highlight.blue {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}

.terms-highlight i {
  font-size: 20px;
  margin-top: 2px;
}

.terms-highlight.green i {
  color: #22c55e;
}

.terms-highlight.blue i {
  color: #2563eb;
}

.terms-highlight p {
  font-size: 14px;
  color: #475569;
  line-height: 1.7;
}

.terms-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.tcg-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px;
}

.tcg-item>i {
  font-size: 20px;
  color: #2563eb;
  margin-top: 2px;
}

.tcg-item strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}

.tcg-item span {
  font-size: 13px;
  color: #64748b;
  line-height: 1.6;
}

.terms-footer {
  background: linear-gradient(135deg, #f0fdf4, #fff);
  border: 1px solid #bbf7d0;
  border-radius: 14px;
  padding: 32px;
  text-align: center;
  margin-top: 24px;
}

.terms-footer>i {
  font-size: 36px;
  color: #22c55e;
  margin-bottom: 12px;
  display: block;
}

.terms-footer p {
  font-size: 15px;
  color: #475569;
  line-height: 1.7;
}

@media (max-width: 768px) {
  .terms-container {
    grid-template-columns: 1fr;
  }

  .terms-nav {
    position: static;
  }

  .terms-contact-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================
   MODERN EFFECTS & ANIMATIONS
================================ */

/* CSS Variables */
:root {
  --blue: #2563eb;
  --blue2: #1d4ed8;
  --glow: rgba(37, 99, 235, 0.4);
  --glow2: rgba(37, 99, 235, 0.15);
  --radius: 14px;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #2563eb;
  border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
  background: #1d4ed8;
}

/* ===== PAGE LOADER ===== */
.page-loader {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

html[data-theme="dark"] .page-loader,
body.dark .page-loader {
  color: #e2e8f0;
  background:
    radial-gradient(circle at 50% 38%, rgba(37, 99, 235, .22), transparent 32%),
    radial-gradient(circle at 30% 68%, rgba(124, 58, 237, .18), transparent 30%),
    linear-gradient(135deg, #020617 0%, #0f172a 52%, #111827 100%);
}

html[data-theme="dark"] .page-loader::before,
body.dark .page-loader::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(148, 163, 184, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, .055) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at center, #000 0%, transparent 72%);
}

.page-loader.hidden {
  opacity: 0;
  visibility: hidden;
}

.loader-logo {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #2563eb, #60a5fa);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  animation: loaderPulse 1s ease-in-out infinite;
}

.loader-bar {
  width: 120px;
  height: 3px;
  background: #f1f5f9;
  border-radius: 99px;
  overflow: hidden;
}

.loader-bar::after {
  content: '';
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
  border-radius: 99px;
  animation: loaderSlide 1s ease-in-out infinite;
}

html[data-theme="dark"] .loader-bar,
body.dark .loader-bar {
  background: rgba(148, 163, 184, .18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}

html[data-theme="dark"] .loader-bar::after,
body.dark .loader-bar::after {
  background: linear-gradient(90deg, #38bdf8, #6366f1, #a78bfa);
  box-shadow: 0 0 18px rgba(99, 102, 241, .55);
}

@keyframes loaderPulse {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 var(--glow);
  }

  50% {
    transform: scale(1.05);
    box-shadow: 0 0 20px 8px var(--glow2);
  }
}

@keyframes loaderSlide {
  0% {
    width: 0%;
    margin-left: 0%;
  }

  50% {
    width: 80%;
    margin-left: 10%;
  }

  100% {
    width: 0%;
    margin-left: 100%;
  }
}

/* ===== SCROLL PROGRESS BAR ===== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
  z-index: 9999;
  transition: width 0.1s linear;
  box-shadow: 0 0 8px var(--glow);
}

/* ===== BACK TO TOP ===== */
.back-to-top {
  position: fixed;
  bottom: 28px;
  bottom: 100px; /* Chatbot se upar dikhane ke liye adjust kiya */
  right: 28px;
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px var(--glow);
  opacity: 0;
  transform: translateY(16px);
  transition: all 0.3s ease;
  z-index: 998;
}

.back-to-top.show {
  opacity: 1;
  transform: translateY(0);
}

.back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px var(--glow);
}

/* ===== SCROLL REVEAL ANIMATIONS ===== */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays for children */
.stagger>*:nth-child(1) {
  transition-delay: 0.0s;
}

.stagger>*:nth-child(2) {
  transition-delay: 0.1s;
}

.stagger>*:nth-child(3) {
  transition-delay: 0.2s;
}

.stagger>*:nth-child(4) {
  transition-delay: 0.3s;
}

.stagger>*:nth-child(5) {
  transition-delay: 0.4s;
}

.stagger>*:nth-child(6) {
  transition-delay: 0.5s;
}

/* ===== GLOW BUTTONS ===== */
.btn-primary {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease !important;
}

.btn-primary:hover {
  box-shadow: 0 6px 24px var(--glow) !important;
  transform: translateY(-2px) !important;
}

.btn-primary:active {
  transform: translateY(0) !important;
}

/* Ripple effect */
.btn-primary .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  animation: rippleAnim 0.6s linear;
  pointer-events: none;
}

@keyframes rippleAnim {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.btn-outline:hover {
  box-shadow: 0 4px 16px var(--glow2) !important;
  transform: translateY(-2px) !important;
}

/* ===== CARD GLOW EFFECTS ===== */
.service-card:hover,
.course-card:hover,
.why-card:hover,
.mv-card:hover,
.facility-card:hover,
.coming-card:hover,
.add-service-card:hover,
.pricing-card:hover {
  box-shadow: 0 12px 40px var(--glow2) !important;
}

.job-card:hover {
  box-shadow: 0 8px 32px var(--glow2) !important;
}

.product-card:hover {
  box-shadow: 0 12px 40px var(--glow2) !important;
}

/* ===== HERO SECTION UPGRADE ===== */
.hero {
  background: linear-gradient(135deg, #e8f0ff 0%, #f0f7ff 40%, #fff 100%) !important;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.08) 0%, transparent 70%);
  top: -200px;
  right: -100px;
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.06) 0%, transparent 70%);
  bottom: -100px;
  left: -100px;
  pointer-events: none;
}

/* ===== GRADIENT TEXT ===== */
.gradient-text {
  background: linear-gradient(135deg, #2563eb, #60a5fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero .highlight {
  background: linear-gradient(135deg, #2563eb, #60a5fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== STATS SECTION GLOW ===== */
.stats {
  background: linear-gradient(135deg, #1d4ed8, #2563eb, #3b82f6) !important;
  position: relative;
  overflow: hidden;
}

.stats::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
}

.stat-num {
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}

/* ===== HEADER GLOW ===== */
.header.scrolled {
  box-shadow: 0 4px 30px rgba(37, 99, 235, 0.1) !important;
}

/* ===== PAGE BANNER UPGRADE ===== */
.page-banner {
  background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 50%, #f8fafc 100%) !important;
  position: relative;
  overflow: hidden;
}

.page-banner::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.08) 0%, transparent 70%);
  top: -100px;
  right: 10%;
  pointer-events: none;
}

/* ===== SECTION TAGS GLOW ===== */
.section-tag {
  box-shadow: 0 2px 12px rgba(37, 99, 235, 0.15);
}

/* ===== FOOTER UPGRADE ===== */
.footer {
  background: linear-gradient(180deg, #0f172a 0%, #070f1f 100%) !important;
}

.footer-social a:hover {
  box-shadow: 0 4px 16px var(--glow) !important;
}

/* ===== CTA BANNER UPGRADE ===== */
.cta-banner {
  background: linear-gradient(135deg, #1e40af, #2563eb, #3b82f6) !important;
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
}

/* ===== INPUT GLOW ON FOCUS ===== */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

/* ===== NAV LINK HOVER ===== */
.nav-link:hover::after,
.nav-link.active::after {
  box-shadow: 0 2px 8px var(--glow);
}

/* ===== LOGO ICON GLOW ===== */
.logo-icon {
  box-shadow: 0 4px 16px var(--glow2);
  transition: box-shadow 0.3s;
}

.logo:hover .logo-icon {
  box-shadow: 0 6px 24px var(--glow);
}

/* ===== MOBILE ENHANCEMENTS ===== */
@media (max-width: 768px) {
  .back-to-top {
    bottom: 175px;
    right: 20px;
  }

  .hero-title {
    font-size: 32px !important;
  }

  .section-title {
    font-size: 26px !important;
  }

  /* Touch-friendly tap highlight */
  .btn-primary:active,
  .btn-outline:active {
    transform: scale(0.97) !important;
  }
}

/* ===== SMOOTH IMAGE LOADING ===== */
img {
  transition: opacity 0.3s ease;
}

/* ===== FLOATING ANIMATION ===== */
@keyframes float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-8px);
  }
}

.hero-blob {
  animation: blob 6s ease-in-out infinite, float 4s ease-in-out infinite !important;
}

/* ===== PULSE GLOW for badges ===== */
@keyframes pulseGlow {

  0%,
  100% {
    box-shadow: 0 0 0 0 var(--glow2);
  }

  50% {
    box-shadow: 0 0 0 6px transparent;
  }
}

.hero-badge {
  animation: pulseGlow 2s ease-in-out infinite;
}

/* ===== DROPDOWN ANIMATION ===== */
.dropdown-menu {
  animation: dropDown 0.2s ease !important;
}

@keyframes dropDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== NUMBER COUNTER ===== */
.stat-num,
.stat-item .stat-num {
  display: inline-block;
  transition: transform 0.3s ease;
}

/* ===== SELECTION COLOR ===== */
::selection {
  background: rgba(37, 99, 235, 0.2);
  color: #1e40af;
}

/* WhatsApp Float */
.whatsapp-float {
  position: fixed;
  bottom: 80px;
  left: 24px;
  background: #22c55e;
  color: #fff;
  border-radius: 50px;
  padding: 12px 20px 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4);
  z-index: 997;
  transition: all 0.3s ease;
  animation: waPulse 2s ease-in-out infinite;
}

.whatsapp-float:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(34, 197, 94, 0.5);
}

.whatsapp-float i {
  font-size: 22px;
}

.wa-text {
  font-size: 13px;
}

@keyframes waPulse {

  0%,
  100% {
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4);
  }

  50% {
    box-shadow: 0 4px 30px rgba(34, 197, 94, 0.7);
  }
}

@media (max-width: 768px) {
  .whatsapp-float .wa-text {
    display: none;
  }

  .whatsapp-float {
    padding: 13px;
    border-radius: 50%;
    bottom: 80px;
  }
}

/* ================================
   AI CHATBOT WIDGET
================================ */
.chat-widget {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9990;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Toggle Button */
.chat-toggle {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.5);
  transition: all 0.3s ease;
  position: relative;
  animation: chatPulse 2.5s ease-in-out infinite;
}

.chat-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 28px rgba(37, 99, 235, 0.6);
}

@keyframes chatPulse {

  0%,
  100% {
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.5);
  }

  50% {
    box-shadow: 0 4px 32px rgba(37, 99, 235, 0.8);
  }
}

/* Notification dot */
.chat-notify {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  background: #ef4444;
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  animation: notifyBounce 1s ease infinite;
}

@keyframes notifyBounce {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }
}

.chat-notify.hidden {
  display: none;
}

/* Chat Box */
.chat-box {
  position: absolute;
  bottom: 68px;
  right: 0;
  width: 340px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  display: none;
  flex-direction: column;
  max-height: 520px;
  transform: scale(0.9) translateY(20px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: bottom right;
}

.chat-box.open {
  display: flex;
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Header */
.chat-header {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.ch-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ch-avatar {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  position: relative;
}

.ch-online {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: #4ade80;
  border-radius: 50%;
  border: 2px solid #2563eb;
}

.ch-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.ch-status {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
}

.ch-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background 0.2s;
}

.ch-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Messages */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 280px;
  scroll-behavior: smooth;
}

.chat-messages::-webkit-scrollbar {
  width: 4px;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 99px;
}

.chat-msg {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.chat-msg.user {
  flex-direction: row-reverse;
}

.cm-avatar {
  width: 28px;
  height: 28px;
  min-width: 28px;
  background: linear-gradient(135deg, #2563eb, #60a5fa);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.cm-bubble {
  max-width: 220px;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.6;
  color: #1e293b;
}

.chat-msg.bot .cm-bubble {
  background: #f1f5f9;
  border-bottom-left-radius: 4px;
}

.chat-msg.user .cm-bubble {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.cm-bubble ul {
  margin: 6px 0 0 14px;
  padding: 0;
}

.cm-bubble ul li {
  font-size: 12px;
  margin-bottom: 3px;
}

/* Typing indicator */
.typing-indicator .cm-bubble {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 12px 16px;
}

.typing-dot {
  width: 6px;
  height: 6px;
  background: #94a3b8;
  border-radius: 50%;
  animation: typingBounce 1.4s infinite;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

.chat-live-waiting .cm-bubble {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #475569;
  font-weight: 600;
}

.live-dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}

.live-dots span {
  width: 5px;
  height: 5px;
  background: #2563eb;
  border-radius: 50%;
  animation: typingBounce 1.4s infinite;
}

.live-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.live-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBounce {

  0%,
  60%,
  100% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(-6px);
  }
}

/* Quick Replies */
.quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid #f1f5f9;
  flex-shrink: 0;
}

.qr-btn {
  padding: 5px 10px;
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
  white-space: nowrap;
}

.qr-btn:hover {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

/* Input */
.chat-input-wrap {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid #f1f5f9;
  flex-shrink: 0;
}

#chatInput {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}

#chatInput:focus {
  border-color: #2563eb;
}

.chat-send {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.chat-send:hover {
  transform: scale(1.05);
}

.chat-send:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Mobile */
@media (max-width: 480px) {
  .chat-box {
    width: calc(100vw - 32px);
    right: -12px;
    max-height: min(72vh, 560px);
  }

  .chat-messages {
    max-height: calc(72vh - 170px);
  }

  .chat-widget {
    bottom: 16px;
    right: 16px;
  }

  .chat-footer-actions {
    flex-wrap: wrap;
  }

  .chat-footer-btn {
    flex: 1 1 calc(50% - 8px);
  }

  .chat-input-wrap {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}

/* ================================
   DARK MODE & LIGHT MODE
================================ */

/* Toggle Button */
.theme-toggle {
  width: 40px;
  height: 40px;
  background: #f1f5f9;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  color: #475569;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
  transform: rotate(20deg);
}

/* ===== DARK MODE VARIABLES ===== */
body.dark {
  background: #0f172a;
  color: #e2e8f0;
}

/* Header */
body.dark .header {
  background: rgba(15, 23, 42, 0.95) !important;
  border-bottom-color: #1e293b !important;
}

body.dark .header.scrolled {
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4) !important;
}

body.dark .nav-link {
  color: #94a3b8 !important;
}

body.dark .nav-link:hover,
body.dark .nav-link.active {
  color: #60a5fa !important;
}

body.dark .nav-link:hover::after,
body.dark .nav-link.active::after {
  background: #60a5fa !important;
}

body.dark .logo-main {
  color: #60a5fa !important;
}

body.dark .logo-sub {
  color: #e2e8f0 !important;
}

body.dark .theme-toggle {
  background: #1e293b;
  border-color: #334155;
  color: #94a3b8;
}

/* Dropdown */
body.dark .dropdown-menu {
  background: #1e293b !important;
  border-color: #334155 !important;
}

body.dark .dropdown-menu a {
  color: #94a3b8 !important;
}

body.dark .dropdown-menu a:hover {
  background: #2d3f5e !important;
  color: #60a5fa !important;
}

/* Mobile navbar */
body.dark .navbar {
  background: #0f172a !important;
  border-bottom-color: #1e293b !important;
}

/* ===== HERO ===== */
body.dark .hero {
  background: linear-gradient(135deg, #0f1e3a 0%, #0f172a 60%) !important;
}

body.dark .hero::before {
  background: radial-gradient(circle, rgba(96, 165, 250, 0.08) 0%, transparent 70%) !important;
}

.chat-footer-actions {
  display: flex;
  gap: 8px;
  padding: 9px 12px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  flex-shrink: 0;
}

.chat-footer-actions[hidden] {
  display: none !important;
}

.chat-footer-btn {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 7px;
  border: 1px solid #bfdbfe;
  border-radius: 9px;
  background: #fff;
  color: #1d4ed8;
  font: 600 11px/1.25 inherit;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.chat-footer-btn:hover {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

/* ===========================
   MOBILE ICON NAV DOCK
=========================== */
.mobile-nav-dock {
  display: none;
}

@media (max-width: 1024px) {
  body {
    padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-nav-dock {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 2400;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    padding: 8px;
    border: 1px solid rgba(226, 232, 240, .92);
    border-radius: 24px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 22px 58px rgba(15, 23, 42, .20);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
  }

  .mobile-nav-dock a,
  .mobile-nav-dock button {
    appearance: none;
    border: 0;
    min-width: 0;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 18px;
    background: transparent;
    color: #64748b;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
  }

  .mobile-nav-dock i {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    font-size: 18px;
  }

  .mobile-nav-dock a.active,
  .mobile-nav-dock button.active,
  .mobile-nav-dock a:hover,
  .mobile-nav-dock button:hover {
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    box-shadow: 0 12px 26px rgba(37, 99, 235, .30);
    transform: translateY(-2px);
  }

  .navbar {
    top: 82px !important;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    max-height: none !important;
  }
}

@media (max-width: 420px) {
  .mobile-nav-dock {
    left: 8px;
    right: 8px;
    bottom: 8px;
    border-radius: 20px;
  }

  .mobile-nav-dock a,
  .mobile-nav-dock button {
    min-height: 52px;
    border-radius: 15px;
    font-size: 9px;
  }
}

body.dark .mobile-nav-dock {
  border-color: rgba(51, 65, 85, .92);
  background: rgba(15, 23, 42, .94);
  box-shadow: 0 22px 58px rgba(0, 0, 0, .38);
}

body.dark .mobile-nav-dock a,
body.dark .mobile-nav-dock button {
  color: #94a3b8;
}

body.dark .mobile-menu-actions {
  border-top-color: rgba(51, 65, 85, .92);
}

body.dark .mobile-menu-action {
  color: #e2e8f0;
  border-color: rgba(51, 65, 85, .92);
  background: linear-gradient(135deg, rgba(15, 23, 42, .98), rgba(30, 41, 59, .96));
  box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}

body.dark .hero-title {
  color: #f1f5f9 !important;
}

body.dark .hero-desc {
  color: #94a3b8 !important;
}

body.dark .hero-badge {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #4ade80 !important;
}

body.dark .hero-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}

body.dark .hero-contact span {
  color: #64748b !important;
}

/* ===== BG LIGHT SECTIONS ===== */
body.dark .bg-light {
  background: #1e293b !important;
}

/* ===== CARDS ===== */
body.dark .service-card,
body.dark .course-card,
body.dark .why-card,
body.dark .mv-card,
body.dark .facility-card,
body.dark .coming-card,
body.dark .add-service-card,
body.dark .pricing-card,
body.dark .job-card,
body.dark .product-card,
body.dark .fb-info-card,
body.dark .location-card,
body.dark .info-card,
body.dark .login-feature,
body.dark .dash-card,
body.dark .cust-card,
body.dark .team-card,
body.dark .cart-item,
body.dark .order-card,
body.dark .cart-summary,
body.dark .checkout-form-box,
body.dark .auth-box,
body.dark .contact-form-box,
body.dark .feedback-form-box,
body.dark .jsb-card,
body.dark .ssb-card,
body.dark .terms-section,
body.dark .cv-search-box,
body.dark .cv-not-found,
body.dark .certificate-card,
body.dark .course-detail-card,
body.dark .service-detail-card,
body.dark .tp-settings,
body.dark .tp-display,
body.dark .tp-finger-guide,
body.dark .typing-tips {
  background: #1e293b !important;
  border-color: #334155 !important;
}

body.dark .service-card h3,
body.dark .course-card h3,
body.dark .why-card h4,
body.dark .mv-card h3,
body.dark .facility-card h4,
body.dark .pricing-card h4,
body.dark .job-card .jc-title,
body.dark .product-card .p-name,
body.dark .section-title,
body.dark .banner-content h1,
body.dark .sdc-content h3,
body.dark .cdc-header h2 {
  color: #f1f5f9 !important;
}

body.dark .service-card p,
body.dark .course-card p,
body.dark .why-card p,
body.dark .mv-card p,
body.dark .facility-card p,
body.dark .section-desc,
body.dark .banner-content p,
body.dark .sdc-content>p,
body.dark .jc-desc,
body.dark .cv-search-box p,
body.dark .cv-info-card p,
body.dark .cv-not-found p,
body.dark .cv-assistance {
  color: #94a3b8 !important;
}

body.dark .cv-search-box h2,
body.dark .cv-info-card h4,
body.dark .cv-not-found h3,
body.dark .cert-name,
body.dark .cert-detail strong {
  color: #f8fafc !important;
}

body.dark .cert-label,
body.dark .cert-father,
body.dark .cert-text,
body.dark .cert-course,
body.dark .cert-detail span {
  color: #94a3b8 !important;
}

/* ===== STATS ===== */
body.dark .stats {
  background: linear-gradient(135deg, #1e3a6e, #1d4ed8, #2563eb) !important;
}

/* ===== PAGE BANNER ===== */
body.dark .page-banner {
  background: linear-gradient(135deg, #0f1e3a 0%, #0f172a 100%) !important;
}

body.dark .breadcrumb {
  color: #64748b !important;
}

body.dark .breadcrumb a {
  color: #60a5fa !important;
}

/* ===== FORMS ===== */
body.dark .form-group input,
body.dark .form-group select,
body.dark .form-group textarea,
body.dark #chatInput,
body.dark .js-search input,
body.dark .sort-select,
body.dark .game-input,
body.dark .cv-input-wrap input {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

body.dark .form-group input:focus,
body.dark .form-group select:focus,
body.dark .form-group textarea:focus {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.12) !important;
}

body.dark .form-group label {
  color: #94a3b8 !important;
}

body.dark .form-sub {
  color: #64748b !important;
}

/* ===== SECTION TAGS ===== */
body.dark .section-tag {
  background: rgba(37, 99, 235, 0.2) !important;
  color: #60a5fa !important;
}

/* ===== NAV TABS (typing) ===== */
body.dark .tp-tabs {
  background: #1e293b !important;
}

body.dark .tp-tab {
  color: #64748b !important;
}

body.dark .tp-tab.active {
  background: #0f172a !important;
  color: #60a5fa !important;
}

body.dark .tps-btn {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

body.dark .tps-btn.active,
body.dark .tps-btn:hover {
  background: #2563eb !important;
  color: #fff !important;
}

/* ===== LESSON LIST ===== */
body.dark .lessons-sidebar,
body.dark .lesson-item {
  background: #1e293b !important;
  border-color: #334155 !important;
}

body.dark .lesson-item:hover {
  background: #2d3f5e !important;
}

body.dark .lesson-item.selected {
  background: rgba(37, 99, 235, 0.2) !important;
}

body.dark .li-num {
  background: #334155 !important;
  color: #94a3b8 !important;
}

body.dark .li-title {
  color: #e2e8f0 !important;
}

/* ===== KEYBOARD ===== */
body.dark .tp-keyboard {
  background: #070f1f !important;
}

body.dark .kb-key {
  background: #1e293b !important;
  border-color: #334155 !important;
}

/* ===== SHOP ===== */
body.dark .shop-toolbar-right .sort-select {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}

body.dark .p-image {
  background: #0f172a !important;
}

body.dark .p-cat {
  background: rgba(37, 99, 235, 0.2) !important;
}

body.dark .p-desc {
  color: #64748b !important;
}

/* ===== FOOTER ===== */
body.dark .footer {
  background: #070f1f !important;
}

body.dark .footer-bottom {
  border-top-color: #1e293b !important;
}

/* ===== CTA ===== */
body.dark .cta-banner {
  background: linear-gradient(135deg, #1e3a6e, #1d4ed8) !important;
}

/* ===== CHATBOT ===== */
body.dark .chat-box {
  background: #1e293b !important;
}

body.dark .chat-header {
  background: linear-gradient(135deg, #1e3a6e, #1d4ed8) !important;
}

body.dark .chat-messages {
  background: #1e293b !important;
}

body.dark .chat-msg.bot .cm-bubble {
  background: #0f172a !important;
  color: #e2e8f0 !important;
}

body.dark .chat-live-waiting .cm-bubble {
  color: #cbd5e1 !important;
}

body.dark #chatInput {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

body.dark .quick-replies {
  border-top-color: #334155 !important;
}

body.dark .qr-btn {
  background: rgba(37, 99, 235, 0.2) !important;
  border-color: #334155 !important;
  color: #60a5fa !important;
}

body.dark .chat-input-wrap {
  border-top-color: #334155 !important;
}

body.dark .chat-footer-actions {
  background: #0f172a;
  border-top-color: #334155;
}

body.dark .chat-footer-btn {
  background: #1e293b;
  border-color: #334155;
  color: #93c5fd;
}

body.dark .chat-footer-btn:hover {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

/* ===== SCROLLBAR DARK ===== */
body.dark ::-webkit-scrollbar-track {
  background: #0f172a;
}

body.dark ::-webkit-scrollbar-thumb {
  background: #334155;
}

/* ===== BACK TO TOP DARK ===== */
body.dark .back-to-top {
  background: linear-gradient(135deg, #1e3a6e, #2563eb) !important;
}

/* ===== TERMS PAGE ===== */
body.dark .tn-card,
body.dark .terms-section,
body.dark .terms-intro {
  background: #1e293b !important;
  border-color: #334155 !important;
}

body.dark .ts-header {
  background: #0f172a !important;
}

body.dark .tn-link {
  color: #94a3b8 !important;
}

body.dark .tn-link:hover {
  background: #2d3f5e !important;
  color: #60a5fa !important;
}

body.dark .terms-intro p,
body.dark .ts-body p,
body.dark .ts-body ul li {
  color: #94a3b8 !important;
}

/* ===== GALLERY ===== */
body.dark .filter-btn {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

body.dark .filter-btn.active {
  background: #2563eb !important;
  color: #fff !important;
}

body.dark .lb-content {
  background: #1e293b !important;
}

body.dark .lb-caption {
  color: #e2e8f0 !important;
}

/* ===== STUDENT DASHBOARD ===== */
body.dark .student-info-bar,
body.dark .customer-bar {
  background: linear-gradient(135deg, #0f1e3a, #1e293b) !important;
  border-color: #334155 !important;
}

body.dark .sib-details h2,
body.dark .cb-info h2 {
  color: #f1f5f9 !important;
}

body.dark .dd-row {
  border-bottom-color: #1e293b !important;
}

body.dark .dd-row span {
  color: #64748b !important;
}

body.dark .dd-row strong {
  color: #e2e8f0 !important;
}

body.dark .fp-bar {
  background: #334155 !important;
}

body.dark .cert-pending>i {
  color: #475569 !important;
}

body.dark .cert-pending h4 {
  color: #94a3b8 !important;
}

/* ===== SMOOTH TRANSITION ===== */
body,
.header,
.hero,
.service-card,
.course-card,
.why-card,
.product-card,
.chat-box,
.footer,
input,
select,
textarea,
.nav-link,
.dropdown-menu {
  transition: background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease !important;
}

/* ================================
   MULTI-GAME SYSTEM
================================ */

/* Game Selector */
.game-selector {
  padding: 4px 0;
}

.gs-header {
  text-align: center;
  margin-bottom: 24px;
}

.gs-header h2 {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.gs-header h2 i {
  color: #2563eb;
}

.gs-header p {
  font-size: 14px;
  color: #64748b;
}

.gs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.gs-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px 14px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
}

.gs-card:hover {
  border-color: #2563eb;
  box-shadow: 0 8px 28px rgba(37, 99, 235, 0.12);
  transform: translateY(-4px);
}

.gs-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin: 0 auto 12px;
}

.gs-card h4 {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}

.gs-card p {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.5;
  margin-bottom: 10px;
}

.gs-diff {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 99px;
  text-transform: uppercase;
}

.gs-diff.easy {
  background: #dcfce7;
  color: #166534;
}

.gs-diff.medium {
  background: #fef9c3;
  color: #854d0e;
}

.gs-diff.hard {
  background: #fee2e2;
  color: #991b1b;
}

/* Game Area */
.game-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.game-title-bar {
  flex: 1;
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  text-align: center;
}

.game-live-stats {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  font-weight: 600;
  flex-wrap: wrap;
}

.game-live-stats span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #475569;
}

.game-arena {
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
  border-radius: 14px;
  height: 320px;
  position: relative;
  overflow: hidden;
  border: 2px solid #334155;
  margin-bottom: 14px;
}

.falling-word {
  position: absolute;
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px solid;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.game-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.92);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  gap: 8px;
  padding: 20px;
}

.game-overlay.show {
  display: flex;
}

.game-overlay h3 {
  font-size: 28px;
  font-weight: 800;
}

.game-input-wrap {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

#game-input {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  font-size: 16px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}

#game-input:focus {
  border-color: #2563eb;
}

#game-input:disabled {
  background: #f8fafc;
  color: #94a3b8;
}

.game-instructions {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 18px;
}

.game-instructions h4 {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.game-instructions p {
  font-size: 13px;
  color: #64748b;
  line-height: 1.6;
}

/* Dark Mode */
body.dark .gs-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}

body.dark .gs-card:hover {
  border-color: #2563eb !important;
}

body.dark .gs-header h2 {
  color: #f1f5f9 !important;
}

body.dark .gs-card h4 {
  color: #e2e8f0 !important;
}

body.dark .game-title-bar {
  color: #f1f5f9 !important;
}

body.dark .game-instructions {
  background: #1e293b !important;
  border-color: #334155 !important;
}

body.dark #game-input {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

/* Responsive */
@media (max-width: 1024px) {
  .gs-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .gs-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .game-live-stats {
    gap: 8px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .gs-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Options inside chat bubble */
.cm-bubble-wrap {
  max-width: 240px;
}

.cm-options {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.cm-opt-btn {
  padding: 5px 10px;
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

.cm-opt-btn:hover {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

/* Dark mode */
body.dark .cm-opt-btn {
  background: rgba(37, 99, 235, 0.2) !important;
  border-color: #334155 !important;
  color: #60a5fa !important;
}

body.dark .cm-opt-btn:hover {
  background: #2563eb !important;
  color: #fff !important;
}

/* ===========================
   MODERN CUSTOMER DASHBOARD
=========================== */
.acc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.acc-stat {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s;
}

.acc-stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.as-icon {
  width: 50px;
  height: 50px;
  min-width: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.acc-stat.blue .as-icon {
  background: #eff6ff;
  color: #2563eb;
}

.acc-stat.green .as-icon {
  background: #dcfce7;
  color: #22c55e;
}

.acc-stat.orange .as-icon {
  background: #fff7ed;
  color: #ea580c;
}

.acc-stat.purple .as-icon {
  background: #f5f3ff;
  color: #7c3aed;
}

.as-num {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
}

.as-lbl {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 4px;
}

.acc-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: start;
}

/* Sidebar */
.acc-profile-card {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  border-radius: 14px;
  padding: 24px;
  text-align: center;
  margin-bottom: 12px;
  color: #fff;
}

.apc-avatar {
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 900;
}

.acc-profile-card h3 {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 4px;
}

.acc-profile-card span {
  display: block;
  font-size: 12px;
  opacity: 0.8;
  margin-bottom: 2px;
}

.acc-quick-links {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
}

.aql-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  border-bottom: 1px solid #f8fafc;
  text-decoration: none;
}

.aql-btn:hover {
  background: #eff6ff;
  color: #2563eb;
}

.aql-btn.active {
  background: #eff6ff;
  color: #2563eb;
  font-weight: 700;
}

.aql-btn.logout {
  color: #ef4444;
}

.aql-btn.logout:hover {
  background: #fee2e2;
}

.aql-btn i {
  font-size: 15px;
  min-width: 18px;
}

.aql-badge {
  margin-left: auto;
  background: #2563eb;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
}

/* Main Content */
.acc-tab {
  display: none;
}

.acc-tab.active {
  display: block;
}

.acc-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
}

.acc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid #f1f5f9;
  background: #f8fafc;
}

.acc-card-header h3 {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.acc-card-header h3 i {
  color: #2563eb;
}

/* Order Cards */
.order-item-card {
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.2s;
}

.order-item-card:last-child {
  border-bottom: none;
}

.order-item-card:hover {
  background: #fafbff;
}

.oic-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px 12px;
}

.oic-number {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.oic-date {
  font-size: 12px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 5px;
}

.oic-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 99px;
  margin-bottom: 4px;
}

.oic-total {
  font-size: 20px;
  font-weight: 900;
  color: #2563eb;
  text-align: right;
}

/* Products in order */
.oic-products {
  padding: 0 24px 14px;
}

.oic-product {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed #f1f5f9;
}

.oic-product:last-child {
  border-bottom: none;
}

.oic-prod-img {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #94a3b8;
}

.oic-prod-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.oic-prod-info {
  flex: 1;
}

.oic-prod-info strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 3px;
}

.oic-prod-info span {
  font-size: 12px;
  color: #94a3b8;
}

.oic-prod-total {
  font-size: 15px;
  font-weight: 800;
  color: #2563eb;
}

.oic-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px 18px;
  flex-wrap: wrap;
  gap: 10px;
}

.oic-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.oic-meta span {
  font-size: 12px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 5px;
}

.oic-actions {
  display: flex;
  gap: 8px;
}

.oic-btn {
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s;
  text-decoration: none;
  cursor: pointer;
}

.oic-btn.blue {
  background: #eff6ff;
  color: #2563eb;
}

.oic-btn.blue:hover {
  background: #2563eb;
  color: #fff;
}

.oic-btn.green {
  background: #dcfce7;
  color: #166534;
}

.oic-btn.orange {
  background: #fff7ed;
  color: #ea580c;
}

/* Empty State */
.acc-empty {
  text-align: center;
  padding: 60px 32px;
}

.acc-empty i {
  font-size: 48px;
  color: #cbd5e1;
  margin-bottom: 16px;
  display: block;
}

.acc-empty h4 {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
}

.acc-empty p {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 20px;
}

/* Dark Mode */
body.dark .acc-stat {
  background: #1e293b !important;
  border-color: #334155 !important;
}

body.dark .as-num {
  color: #f1f5f9 !important;
}

body.dark .acc-quick-links {
  background: #1e293b !important;
  border-color: #334155 !important;
}

body.dark .aql-btn {
  color: #94a3b8 !important;
  border-bottom-color: #334155 !important;
}

body.dark .aql-btn.active,
body.dark .aql-btn:hover {
  background: #2d3f5e !important;
  color: #60a5fa !important;
}

body.dark .acc-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}

body.dark .acc-card-header {
  background: #0f172a !important;
  border-color: #334155 !important;
}

body.dark .acc-card-header h3 {
  color: #f1f5f9 !important;
}

body.dark .order-item-card:hover {
  background: #2d3f5e !important;
}

body.dark .oic-number {
  color: #f1f5f9 !important;
}

body.dark .oic-prod-info strong {
  color: #e2e8f0 !important;
}

/* Responsive */
@media (max-width: 1024px) {
  .acc-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .acc-layout {
    grid-template-columns: 1fr;
  }

  .acc-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .oic-footer {
    flex-direction: column;
  }
}

/* ================================
   BLOG PAGES
================================ */

/* Featured Post */
.featured-post {
  display: block;
  text-decoration: none;
}

.fp-image {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  height: 380px;
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
}

.fp-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.featured-post:hover .fp-image img {
  transform: scale(1.03);
}

.fp-placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  color: rgba(255, 255, 255, 0.2);
}

.fp-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.fp-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #2563eb;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 99px;
  margin-bottom: 14px;
  width: fit-content;
}

.fp-overlay h2 {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 10px;
  max-width: 700px;
}

.fp-overlay p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 14px;
  max-width: 600px;
}

.fp-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.fp-meta span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  gap: 5px;
}

.fp-read {
  margin-left: auto;
  color: #60a5fa !important;
  font-weight: 700 !important;
}

/* Blog Layout */
.blog-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  align-items: start;
}

.blog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.blog-search {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.blog-count {
  font-size: 14px;
  color: #64748b;
}

.blog-count strong {
  color: #2563eb;
}

/* Category Pills */
.blog-cats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.bcat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 16px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid #e2e8f0;
  color: #64748b;
  transition: all 0.2s;
  background: #fff;
}

.bcat:hover,
.bcat.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.bcat span {
  background: rgba(0, 0, 0, 0.1);
  padding: 1px 6px;
  border-radius: 99px;
  font-size: 11px;
}

.bcat.active span {
  background: rgba(255, 255, 255, 0.2);
}

/* Blog Grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.blog-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s;
  display: block;
}

.blog-card:hover {
  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.1);
  transform: translateY(-4px);
  border-color: #bfdbfe;
}

.bc-image {
  height: 180px;
  overflow: hidden;
  background: #f1f5f9;
  position: relative;
}

.bc-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.blog-card:hover .bc-image img {
  transform: scale(1.05);
}

.bc-placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}

.bc-cat {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #2563eb;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 99px;
}

.bc-body {
  padding: 18px;
}

.bc-body h3 {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
  line-height: 1.5;
}

.bc-body p {
  font-size: 13px;
  color: #64748b;
  line-height: 1.7;
  margin-bottom: 12px;
}

.bc-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 12px;
}

.bc-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.bc-readmore {
  font-size: 13px;
  font-weight: 700;
  color: #2563eb;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: gap 0.2s;
}

.blog-card:hover .bc-readmore {
  gap: 10px;
}

/* Sidebar Widgets */
.blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bs-widget {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
}

.bs-widget-header {
  padding: 14px 18px;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bs-widget-header i {
  color: #2563eb;
}

.bs-widget-body {
  padding: 16px;
  font-size: 14px;
  color: #64748b;
  line-height: 1.8;
}

.popular-post {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f8fafc;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s;
}

.popular-post:last-child {
  border-bottom: none;
}

.popular-post:hover .pp-title {
  color: #2563eb;
}

.pp-num {
  width: 24px;
  height: 24px;
  min-width: 24px;
  background: #eff6ff;
  color: #2563eb;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.pp-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.5;
  margin-bottom: 3px;
}

.pp-date {
  font-size: 11px;
  color: #94a3b8;
}

.cat-widget-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid #f8fafc;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  text-decoration: none;
  transition: color 0.2s;
}

.cat-widget-item:last-child {
  border-bottom: none;
}

.cat-widget-item:hover {
  color: #2563eb;
}

.cwi-count {
  background: #eff6ff;
  color: #2563eb;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
}

.bs-cta {
  background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
  border-color: #bfdbfe !important;
  text-align: center;
  padding: 24px;
}

.bs-cta>i {
  font-size: 36px;
  color: #2563eb;
  margin-bottom: 10px;
  display: block;
}

.bs-cta h4 {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 6px;
}

.bs-cta p {
  font-size: 13px;
  color: #64748b;
}

/* Blog Empty */
.blog-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 60px 32px;
  background: #f8fafc;
  border-radius: 14px;
  border: 1px dashed #cbd5e1;
}

.blog-empty i {
  font-size: 48px;
  color: #cbd5e1;
  margin-bottom: 16px;
  display: block;
}

.blog-empty h3 {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
}

.blog-empty p {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 20px;
}

/* Pagination */
.blog-pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 32px;
}

.pg-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  text-decoration: none;
  transition: all 0.2s;
}

.pg-btn:hover,
.pg-btn.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

/* Blog Article */
.blog-article {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
}

.ba-header {
  padding: 24px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}

.ba-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
  color: #64748b;
}

.ba-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ba-share {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #64748b;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s;
}

.share-btn.fb {
  background: #eff6ff;
  color: #1877f2;
}

.share-btn.wa {
  background: #f0fdf4;
  color: #22c55e;
  color: #22c55e;
}

.share-btn.tw {
  background: #eff6ff;
  color: #1da1f2;
}

.share-btn:hover {
  transform: translateY(-2px);
}

.ba-image {
  height: 320px;
  overflow: hidden;
}

.ba-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ba-excerpt {
  padding: 24px;
  background: #eff6ff;
  border-bottom: 1px solid #bfdbfe;
  font-size: 16px;
  color: #1e40af;
  font-style: italic;
  line-height: 1.8;
  border-left: 4px solid #2563eb;
}

.ba-content {
  padding: 32px;
}

.ba-content h2 {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  margin: 24px 0 12px;
}

.ba-content h3 {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 20px 0 10px;
}

.ba-content p {
  font-size: 15px;
  color: #475569;
  line-height: 1.9;
  margin-bottom: 16px;
}

.ba-content ul,
.ba-content ol {
  padding-left: 20px;
  margin-bottom: 16px;
}

.ba-content li {
  font-size: 15px;
  color: #475569;
  line-height: 1.9;
  margin-bottom: 6px;
}

.ba-content strong {
  color: #0f172a;
}

.ba-content a {
  color: #2563eb;
}

.ba-footer {
  padding: 20px 32px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: #f8fafc;
}

.ba-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #64748b;
}

.ba-tag {
  background: #eff6ff;
  color: #2563eb;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.ba-tag:hover {
  background: #2563eb;
  color: #fff;
}

/* Author Box */
.ba-author {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
}

.baa-avatar {
  width: 64px;
  height: 64px;
  min-width: 64px;
  background: linear-gradient(135deg, #2563eb, #60a5fa);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
}

.baa-info h4 {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 3px;
}

.baa-info span {
  font-size: 12px;
  color: #2563eb;
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
}

.baa-info p {
  font-size: 13px;
  color: #64748b;
  line-height: 1.7;
}

/* CTA Box */
.ba-cta {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  margin: 32px;
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  border-radius: 14px;
  flex-wrap: wrap;
}

.ba-cta-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
}

.ba-cta h4 {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}

.ba-cta p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

.ba-cta-btns {
  display: flex;
  gap: 10px;
  margin-left: auto;
  flex-wrap: wrap;
}

/* Related Posts */
.related-posts {
  margin-top: 28px;
}

.related-posts h3 {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.related-posts h3 i {
  color: #2563eb;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.related-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s;
  display: block;
}

.related-card:hover {
  border-color: #2563eb;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.1);
  transform: translateY(-3px);
}

.rc-cat {
  font-size: 11px;
  font-weight: 700;
  color: #2563eb;
  background: #eff6ff;
  padding: 2px 10px;
  border-radius: 99px;
  display: inline-block;
  margin-bottom: 8px;
}

.related-card h4 {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 6px;
  line-height: 1.4;
}

.related-card p {
  font-size: 12px;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 10px;
}

.rc-date {
  font-size: 11px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 4px;
}

.blog-nav-btns {
  margin-top: 20px;
}

/* Dark Mode */
body.dark .blog-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}

body.dark .bc-body h3 {
  color: #f1f5f9 !important;
}

body.dark .bc-body p {
  color: #94a3b8 !important;
}

body.dark .bcat {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

body.dark .bcat.active {
  background: #2563eb !important;
  color: #fff !important;
  border-color: #2563eb !important;
}

body.dark .bs-widget {
  background: #1e293b !important;
  border-color: #334155 !important;
}

body.dark .bs-widget-header {
  background: #0f172a !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
}

body.dark .pp-title {
  color: #e2e8f0 !important;
}

body.dark .blog-article {
  background: #1e293b !important;
  border-color: #334155 !important;
}

body.dark .ba-content p,
body.dark .ba-content li {
  color: #94a3b8 !important;
}

body.dark .ba-content h2,
body.dark .ba-content h3 {
  color: #f1f5f9 !important;
}

body.dark .ba-excerpt {
  background: rgba(37, 99, 235, 0.15) !important;
  border-color: #2563eb !important;
  color: #93c5fd !important;
}

body.dark .ba-footer {
  background: #0f172a !important;
  border-color: #334155 !important;
}

body.dark .ba-author {
  background: #0f172a !important;
  border-color: #334155 !important;
}

body.dark .related-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}

body.dark .related-card h4 {
  color: #f1f5f9 !important;
}

body.dark .related-card p {
  color: #94a3b8 !important;
}

body.dark .fp-image {
  background: linear-gradient(135deg, #0f1e3a, #1d4ed8) !important;
}

/* Responsive */
@media (max-width: 1024px) {
  .blog-layout {
    grid-template-columns: 1fr;
  }

  .blog-grid {
    grid-template-columns: 1fr;
  }

  .related-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .fp-image {
    height: 260px;
  }

  .fp-overlay h2 {
    font-size: 20px;
  }

  .ba-cta {
    flex-direction: column;
  }

  .ba-cta-btns {
    margin-left: 0;
  }

  .related-grid {
    grid-template-columns: 1fr;
  }

  .ba-content {
    padding: 20px;
  }

  .ba-footer {
    padding: 16px 20px;
  }
}/* ================================
   TESTIMONIALS SLIDER
================================ */
.testimonials { overflow: hidden; padding-bottom: 20px; }

.testimonials-wrapper {
  position: relative;
  overflow: hidden;
  padding: 20px 0;
  /* Fade edges */
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}

.testimonials-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: scrollLeft 40s linear infinite;
}
.testimonials-track.paused {
  animation-play-state: paused;
}

@keyframes scrollLeft {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Card */
.testi-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 26px;
  width: 320px;
  min-width: 320px;
  transition: all 0.3s ease;
  cursor: default;
  position: relative;
  overflow: hidden;
}
.testi-card::before {
  content: '\201C';
  position: absolute;
  top: 10px; right: 20px;
  font-size: 80px;
  color: #eff6ff;
  font-family: Georgia, serif;
  line-height: 1;
  pointer-events: none;
}
.testi-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(37,99,235,0.12);
  border-color: #bfdbfe;
}

.tc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.tc-avatar {
  width: 52px; height: 52px; min-width: 52px;
  background: linear-gradient(135deg, #2563eb, #60a5fa);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff;
  box-shadow: 0 4px 12px rgba(37,99,235,0.3);
}
.tc-info { flex: 1; }
.tc-info h4 {
  font-size: 15px; font-weight: 700;
  color: #0f172a; margin-bottom: 2px;
}
.tc-info span {
  font-size: 12px; color: #2563eb;
  font-weight: 600;
  background: #eff6ff;
  padding: 2px 8px; border-radius: 99px;
}
.tc-rating { display: flex; gap: 2px; }
.tc-rating i { font-size: 13px; color: #f59e0b; }

.tc-review {
  font-size: 14px; color: #475569;
  line-height: 1.8;
  margin-bottom: 16px;
  font-style: italic;
}

.tc-course {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  color: #22c55e;
  padding: 6px 12px;
  background: #f0fdf4;
  border-radius: 8px;
  width: fit-content;
}
.tc-course i { font-size: 11px; }

/* Controls */
.testi-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}
.testi-pause {
  width: 40px; height: 40px;
  background: #fff; border: 1.5px solid #e2e8f0;
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #2563eb;
  transition: all 0.2s;
}
.testi-pause:hover {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}
.testi-info {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; color: #64748b;
}
.testi-info strong { color: #0f172a; }

/* Dark Mode */
body.dark .testi-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}
body.dark .testi-card::before { color: rgba(37,99,235,0.1) !important; }
body.dark .tc-info h4  { color: #f1f5f9 !important; }
body.dark .tc-review   { color: #94a3b8 !important; }
body.dark .tc-course   { background: rgba(22,163,74,0.1) !important; }
body.dark .testi-pause {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #60a5fa !important;
}
body.dark .testi-info  { color: #64748b !important; }

/* ===========================
   FOOTER NEWSLETTER STRIP
=========================== */
.footer-newsletter {
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 28px 0;
}
.fn-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.fn-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}
.fn-icon {
  font-size: 28px;
  color: #60a5fa;
  min-width: 28px;
}
.fn-left h4 {
  font-size: 16px;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 4px;
}
.fn-left p {
  font-size: 13px;
  color: #94a3b8;
}
.fn-right { flex: 1; min-width: 280px; }
.fn-form {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.fn-form input {
  flex: 1;
  padding: 10px 14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}
.fn-form input::placeholder { color: rgba(255,255,255,0.3); }
.fn-form input:focus { border-color: rgba(96,165,250,0.5); }
.fn-form button {
  padding: 10px 18px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: background 0.2s;
}
.fn-form button:hover { background: #1d4ed8; }
.fn-note {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Fix chatbot z-index — page overlap fix */
.chat-widget {
  position: fixed !important;
  bottom: 28px !important;
  right: 28px !important;
  z-index: 9990 !important;
  /* Remove any margin/padding that affects page */
  margin: 0 !important;
  padding: 0 !important;
  /* Make sure it doesn't create layout */
  width: auto !important;
  height: auto !important;
}
.chat-box {
  position: absolute !important;
  bottom: 68px !important;
  right: 0 !important;
  /* Prevent page push */
  margin: 0 !important;
}
/* WhatsApp button fix */
.whatsapp-float {
  position: fixed !important;
  bottom: 80px !important;
  left: 24px !important;
  z-index: 997 !important;
  margin: 0 !important;
}

@media (max-width: 1024px) {
  .chat-widget {
    right: 16px !important;
    bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .chat-box {
    bottom: 70px !important;
    max-height: calc(100vh - 210px);
  }

  .whatsapp-float {
    left: 16px !important;
    bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .shop3-floating-cart {
    bottom: calc(104px + env(safe-area-inset-bottom, 0px));
    z-index: 2300;
  }

  .chat-footer-btn {
    font-size: 10px;
    padding-inline: 5px;
  }
}

@media (max-width: 768px) {
  .fn-inner { flex-direction: column; gap: 20px; }
  .fn-form  { flex-direction: column; }
  .fn-form button { width: 100%; justify-content: center; }
}
/* ================================
   GOVT JOBS PAGE — REDESIGN
================================ */

/* Hero Banner */
.gj-hero {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #1d4ed8 100%);
  padding: 60px 0 40px;
  position: relative;
  overflow: hidden;
}
.gj-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 50%, rgba(255,255,255,0.05) 0%, transparent 60%);
}
.gj-hero .container {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px; align-items: center;
}
.gj-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff; font-size: 12px; font-weight: 700;
  padding: 5px 14px; border-radius: 99px; margin-bottom: 14px;
}
.gj-live {
  width: 8px; height: 8px; background: #4ade80;
  width: 8px; height: 8px; background: #22c55e;
  border-radius: 50%; animation: livePulse 1s infinite;
}
@keyframes livePulse {
  0%,100% { opacity:1; } 50% { opacity:0.4; }
}
.gj-hero-content h1 {
  font-size: 38px; font-weight: 900; color: #fff; margin-bottom: 10px;
}
.gj-hero-content h1 span { color: #fbbf24; }
.gj-hero-content p { font-size: 15px; color: rgba(255,255,255,0.8); margin-bottom: 24px; }

.gj-search { margin-bottom: 16px; }
.gjs-wrap {
  display: flex; align-items: center; gap: 0;
  background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.gjs-wrap i {
  padding: 0 14px; font-size: 16px; color: #94a3b8;
}
.gjs-wrap input {
  flex: 1; padding: 14px 0; border: none;
  font-size: 14px; font-family: inherit; outline: none; color: #1e293b;
}
.gjs-wrap button {
  padding: 14px 24px; background: #1d4ed8; color: #fff;
  border: none; font-size: 14px; font-weight: 700;
  font-family: inherit; cursor: pointer; transition: background 0.2s;
}
.gjs-wrap button:hover { background: #1e40af; }

.gj-quick-cats { display: flex; gap: 8px; flex-wrap: wrap; }
.gj-qcat {
  padding: 6px 14px; background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff; border-radius: 99px; font-size: 12px;
  font-weight: 600; cursor: pointer; transition: all 0.2s;
  text-decoration: none;
}
.gj-qcat:hover { background: rgba(255,255,255,0.25); }

/* Stats */
.gj-stats {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px; padding: 24px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.gjs-item { text-align: center; }
.gjs-num { display: block; font-size: 28px; font-weight: 900; color: #fbbf24; }
.gjs-lbl { font-size: 12px; color: rgba(255,255,255,0.7); margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 5px; }

/* Ticker */
.gj-ticker {
  background: #0f172a; color: #fff;
  display: flex; align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ticker-label {
  background: #ef4444; color: #fff;
  padding: 10px 16px; font-size: 12px;
  font-weight: 900; white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
  text-transform: uppercase; letter-spacing: 1px;
}
.ticker-wrap { flex: 1; overflow: hidden; padding: 10px 0; }
.ticker-content {
  display: flex; gap: 0;
  animation: tickerScroll 30s linear infinite;
  white-space: nowrap;
}
.ticker-content:hover { animation-play-state: paused; }
@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker-item {
  padding: 0 28px; font-size: 13px; color: #e2e8f0;
  cursor: pointer; border-right: 1px solid rgba(255,255,255,0.1);
  display: inline-flex; align-items: center; gap: 8px;
  transition: color 0.2s;
}
.ticker-item:hover { color: #60a5fa; }
.ticker-new {
  background: #ef4444; color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 4px;
}

/* Tabs */
.gj-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 24px;
  background: #f8fafc; padding: 6px;
  border-radius: 14px; border: 1px solid #e2e8f0;
}
.gj-tab {
  flex: 1; padding: 10px 12px;
  background: transparent; border: none;
  border-radius: 10px; font-size: 13px; font-weight: 600;
  color: #64748b; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  gap: 6px; transition: all 0.2s; font-family: inherit;
  white-space: nowrap;
}
.gj-tab:hover { background: #fff; color: #2563eb; }
.gj-tab.active {
  background: #2563eb; color: #fff;
  box-shadow: 0 4px 12px rgba(37,99,235,0.3);
}
.tab-count {
  background: rgba(255,255,255,0.25);
  padding: 1px 7px; border-radius: 99px;
  font-size: 11px; font-weight: 700;
}
.gj-tab:not(.active) .tab-count {
  background: #e2e8f0; color: #64748b;
}

/* Layout */
.gj-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px; align-items: start;
}

/* Panels */
.gj-panel { display: none; }
.gj-panel.active { display: block; }
.gjp-header {
  display: flex; justify-content: space-between;
  align-items: center; margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #f1f5f9;
}
.gjp-header h3 {
  font-size: 16px; font-weight: 800; color: #0f172a;
  display: flex; align-items: center; gap: 8px;
}
.gjp-header h3 i { color: #2563eb; }
.gjp-header span { font-size: 13px; color: #94a3b8; }

/* Job Cards */
.gj-card {
  display: flex; align-items: flex-start; gap: 16px;
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 12px; padding: 18px;
  margin-bottom: 12px; cursor: pointer;
  transition: all 0.25s;
}
.gj-card:hover {
  border-color: #2563eb;
  box-shadow: 0 8px 24px rgba(37,99,235,0.1);
  transform: translateY(-2px);
}
.gj-card.expired { opacity: 0.65; }
.gjc-icon {
  width: 46px; height: 46px; min-width: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.gjc-blue   { background: #eff6ff; color: #2563eb; }
.gjc-green  { background: #f0fdf4; color: #22c55e; }
.gjc-green  { background: #f0fdf4; color: #22c55e; }
.gjc-purple { background: #f5f3ff; color: #7c3aed; }
.gjc-orange { background: #fff7ed; color: #ea580c; }

.gjc-content { flex: 1; }
.gjc-badges {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px;
}
.gjc-type {
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 99px; text-transform: uppercase;
}
.gjc-type.blue   { background: #dbeafe; color: #1e40af; }
.gjc-type.green  { background: #dcfce7; color: #166534; }
.gjc-type.purple { background: #ede9fe; color: #5b21b6; }
.gjc-type.orange { background: #fed7aa; color: #9a3412; }
.gjc-cat { background: #f1f5f9; color: #475569; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; }
.gjc-hot  { background: #fef3c7; color: #92400e; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; }
.gjc-urgent  { background: #fef3c7; color: #92400e; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.gjc-expired { background: #f1f5f9; color: #94a3b8; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; }

.gjc-title {
  font-size: 15px; font-weight: 700; color: #0f172a;
  margin-bottom: 5px; line-height: 1.4;
}
.gjc-dept {
  font-size: 12px; color: #64748b;
  display: flex; align-items: center; gap: 5px; margin-bottom: 8px;
}
.gjc-meta {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.gjc-meta span {
  font-size: 12px; color: #64748b;
  display: flex; align-items: center; gap: 4px;
}
.gjc-meta i { color: #2563eb; font-size: 11px; }

.gjc-right {
  text-align: right; min-width: 100px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.gjd-label { display: block; font-size: 10px; color: #94a3b8; text-transform: uppercase; margin-bottom: 3px; }
.gjd-val { font-size: 13px; font-weight: 700; }
.gjd-val.green  { color: #22c55e; }
.gjd-val.orange { color: #d97706; }
.gjd-val.red    { color: #ef4444; }
.gjc-view-btn {
  font-size: 12px; font-weight: 600; color: #2563eb;
  display: flex; align-items: center; gap: 4px;
  transition: gap 0.2s;
}
.gj-card:hover .gjc-view-btn { gap: 8px; }

/* Sidebar */
.gjs-box {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 14px; overflow: hidden; margin-bottom: 16px;
}
.gjsb-header {
  padding: 14px 16px; background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
  font-size: 14px; font-weight: 700; color: #0f172a;
  display: flex; align-items: center; gap: 8px;
}
.gjsb-header i { color: #2563eb; }
.gjsb-body { padding: 8px; }
.gjcat-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: #475569;
  cursor: pointer; transition: all 0.2s; text-decoration: none;
}
.gjcat-item:hover { background: #eff6ff; color: #2563eb; }
.gjcat-count {
  background: #f1f5f9; color: #64748b;
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 99px;
}
.gjsite-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: #475569;
  text-decoration: none; transition: all 0.2s;
  border-bottom: 1px solid #f8fafc;
}
.gjsite-item:last-child { border-bottom: none; }
.gjsite-item:hover { background: #eff6ff; color: #2563eb; }
.gjsite-item i:first-child { color: #2563eb; font-size: 14px; min-width: 16px; }
.gjsite-ext { margin-left: auto; font-size: 11px; color: #cbd5e1; }
.gjs-cta {
  background: linear-gradient(135deg,#eff6ff,#dbeafe) !important;
  border-color: #bfdbfe !important; padding: 20px; text-align: center;
}
.gjs-cta > i { font-size: 32px; color: #2563eb; margin-bottom: 10px; display: block; }
.gjs-cta h4  { font-size: 15px; font-weight: 800; color: #0f172a; margin-bottom: 6px; }
.gjs-cta p   { font-size: 13px; color: #64748b; line-height: 1.6; }

/* ===== JOB MODAL ===== */
.job-modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9998; backdrop-filter: blur(4px);
}
.job-modal-overlay.open { display: block; }
.job-modal {
  display: none; position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 90%; max-width: 640px;
  max-height: 85vh;
  background: #fff; border-radius: 20px;
  overflow: hidden; z-index: 9999;
  box-shadow: 0 24px 64px rgba(0,0,0,0.3);
  flex-direction: column;
}
.job-modal.open { display: flex; }
.jm-header {
  padding: 22px 24px;
  border-left: 4px solid #2563eb;
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px;
  background: #f8fafc; flex-shrink: 0;
}
.jm-type-badge {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  background: #2563eb; color: #fff;
  padding: 3px 10px; border-radius: 99px;
  margin-bottom: 6px;
}
.jm-header h2 {
  font-size: 18px; font-weight: 800;
  color: #0f172a; line-height: 1.4; margin-bottom: 4px;
}
.jm-header p { font-size: 13px; color: #64748b; }
.jm-close {
  background: #fff; border: 1px solid #e2e8f0;
  width: 32px; height: 32px; border-radius: 8px;
  cursor: pointer; font-size: 14px; color: #64748b;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all 0.2s;
}
.jm-close:hover { background: #fee2e2; color: #ef4444; border-color: #fecaca; }
.jm-body {
  padding: 24px; overflow-y: auto; flex: 1;
}
.jm-loading { text-align: center; color: #94a3b8; padding: 40px; }
.jm-deadline {
  padding: 10px 14px; border-radius: 10px;
  background: #f8fafc; border: 1px solid #e2e8f0;
  margin-bottom: 20px; font-size: 14px;
}
.jm-info-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-bottom: 20px;
}
.jm-info-item {
  display: flex; align-items: center; gap: 10px;
  background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 10px; padding: 12px;
}
.jm-info-item i { font-size: 18px; min-width: 20px; }
.jm-info-item span {
  display: block; font-size: 11px; color: #94a3b8;
  text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px;
}
.jm-info-item strong { font-size: 13px; font-weight: 700; color: #0f172a; }
.jm-dates { margin-bottom: 20px; }
.jm-dates h4, .jm-section h4 {
  font-size: 14px; font-weight: 700; color: #0f172a;
  margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.jm-dates-grid { display: flex; flex-direction: column; gap: 6px; }
.jmd-row {
  display: flex; justify-content: space-between;
  font-size: 13px; padding: 8px 12px;
  background: #f8fafc; border-radius: 8px;
}
.jmd-row span   { color: #64748b; }
.jmd-row strong { font-weight: 700; }
.jm-section { margin-bottom: 20px; }
.jm-section p { font-size: 14px; color: #475569; line-height: 1.8; }
.jm-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding-top: 16px; border-top: 1px solid #f1f5f9;
}
.jma-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: 9px;
  font-size: 13px; font-weight: 700;
  text-decoration: none; transition: all 0.2s; cursor: pointer;
}
.jma-btn.primary { background: #2563eb; color: #fff; }
.jma-btn.primary:hover { background: #1d4ed8; }
.jma-btn.green { background: #dcfce7; color: #166534; }
.jma-btn.green:hover { background: #22c55e; color: #fff; }
.jma-btn.green:hover { background: #22c55e; color: #fff; }
.jma-btn.outline {
  background: #fff; color: #475569;
  border: 1.5px solid #e2e8f0;
}
.jma-btn.outline:hover { border-color: #2563eb; color: #2563eb; }
.jma-btn.orange { background: #fff7ed; color: #ea580c; }
.jma-btn.orange:hover { background: #ea580c; color: #fff; }

/* Responsive */
@media (max-width: 1024px) {
  .gj-hero .container { grid-template-columns: 1fr; }
  .gj-stats { grid-template-columns: repeat(4,1fr); }
  .gj-layout { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .gj-hero-content h1 { font-size: 28px; }
  .gj-stats { grid-template-columns: repeat(2,1fr); }
  .gj-tabs  { display: grid; grid-template-columns: repeat(3,1fr); }
  .jm-info-grid { grid-template-columns: 1fr; }
  .gj-card { flex-direction: column; gap: 12px; }
  .gjc-right { align-items: flex-start; }
  .job-modal { width: 95%; max-height: 90vh; top: 5%; transform: translateX(-50%); }
}
/* ================================
   DIGITAL SERVICES — NEW DESIGN
================================ */

/* Service Tabs */
.srv-tabs {
  display: flex; gap: 8px;
  flex-wrap: wrap; margin-bottom: 32px;
  background: #fff; padding: 8px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.srv-tab {
  flex: 1; padding: 11px 14px;
  background: transparent; border: none;
  border-radius: 10px; font-size: 13px;
  font-weight: 600; color: #64748b;
  cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center;
  justify-content: center; gap: 7px;
  font-family: inherit; white-space: nowrap;
  min-width: 100px;
}
.srv-tab:hover {
  background: #f8fafc; color: #2563eb;
}
.srv-tab.active {
  background: #2563eb; color: #fff;
  box-shadow: 0 4px 12px rgba(37,99,235,0.3);
}
.srv-tab i { font-size: 14px; }

/* Panels */
.srv-panel { display: none; }
.srv-panel.active { display: block; }

/* Two-column layout */
.srv-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px; align-items: start;
}

/* Left Info Card */
.srv-info {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px; padding: 28px;
  position: sticky; top: 90px;
  text-align: center;
}
.srv-icon-big {
  width: 80px; height: 80px;
  border-radius: 20px;
  display: flex; align-items: center;
  justify-content: center;
  font-size: 36px; color: #fff;
  margin: 0 auto 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.srv-info h3 {
  font-size: 20px; font-weight: 800;
  color: #0f172a; margin-bottom: 10px;
}
.srv-info p {
  font-size: 13px; color: #64748b;
  line-height: 1.7; margin-bottom: 16px;
}
.srv-tags {
  display: flex; flex-wrap: wrap;
  gap: 6px; justify-content: center;
  margin-bottom: 16px;
}
.srv-tags span {
  background: #f1f5f9; color: #475569;
  font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 99px;
}
.srv-delivery {
  display: flex; align-items: center;
  gap: 6px; justify-content: center;
  font-size: 13px; color: #22c55e;
  font-size: 13px; color: #22c55e;
  font-weight: 600; margin-bottom: 18px;
  background: #f0fdf4; padding: 8px;
  border-radius: 8px; border: 1px solid #bbf7d0;
}
.srv-order-btn {
  width: 100%; padding: 13px;
  color: #fff; border: none;
  border-radius: 12px; font-size: 14px;
  font-weight: 700; cursor: pointer;
  display: flex; align-items: center;
  justify-content: center; gap: 8px;
  margin-bottom: 10px; font-family: inherit;
  transition: all 0.2s;
}
.srv-order-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
.srv-call-btn {
  display: flex; align-items: center;
  justify-content: center; gap: 8px;
  width: 100%; padding: 11px;
  background: #f8fafc; color: #475569;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px; font-size: 14px;
  font-weight: 600; text-decoration: none;
  transition: all 0.2s;
}
.srv-call-btn:hover {
  border-color: #22c55e; color: #22c55e;
  border-color: #22c55e; color: #22c55e;
  background: #f0fdf4;
}

/* Right: Service Items */
.srv-items {
  display: flex; flex-direction: column; gap: 12px;
}
.si-card {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 14px; padding: 18px 20px;
  display: flex; align-items: center;
  justify-content: space-between;
  transition: all 0.25s; cursor: default;
  position: relative; overflow: hidden;
}
.si-card:hover {
  border-color: #bfdbfe;
  box-shadow: 0 8px 24px rgba(37,99,235,0.08);
  transform: translateX(4px);
}
.si-card.popular {
  border-color: #bfdbfe;
  background: linear-gradient(135deg, #fafbff, #eff6ff);
}
.si-badge {
  position: absolute; top: 0; right: 20px;
  background: #7c3aed; color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 3px 10px; border-radius: 0 0 8px 8px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.si-left {
  display: flex; align-items: center; gap: 14px; flex: 1;
}
.si-icon {
  width: 44px; height: 44px; min-width: 44px;
  border-radius: 12px;
  display: flex; align-items: center;
  justify-content: center; font-size: 18px;
}
.si-left > div > strong {
  display: block; font-size: 15px;
  font-weight: 700; color: #0f172a; margin-bottom: 3px;
}
.si-left > div > span {
  font-size: 13px; color: #94a3b8;
}
.si-price {
  font-size: 16px; font-weight: 800;
  color: #2563eb; white-space: nowrap;
  background: #eff6ff; padding: 6px 14px;
  border-radius: 8px; border: 1px solid #bfdbfe;
}

/* Dark Mode */
body.dark .srv-tabs   { background:#1e293b!important; border-color:#334155!important; }
body.dark .srv-tab    { color:#94a3b8!important; }
body.dark .srv-tab:hover { background:#2d3f5e!important; color:#60a5fa!important; }
body.dark .srv-tab.active { background:#2563eb!important; color:#fff!important; }
body.dark .srv-info   { background:#1e293b!important; border-color:#334155!important; }
body.dark .srv-info h3{ color:#f1f5f9!important; }
body.dark .srv-info p { color:#94a3b8!important; }
body.dark .srv-tags span { background:#334155!important; color:#94a3b8!important; }
body.dark .srv-call-btn { background:#334155!important; border-color:#475569!important; color:#94a3b8!important; }
body.dark .si-card    { background:#1e293b!important; border-color:#334155!important; }
body.dark .si-card.popular { background:rgba(37,99,235,0.08)!important; border-color:rgba(37,99,235,0.3)!important; }
body.dark .si-left > div > strong { color:#f1f5f9!important; }
body.dark .si-price   { background:rgba(37,99,235,0.15)!important; border-color:rgba(37,99,235,0.3)!important; }

/* Responsive */
@media (max-width: 1024px) {
  .srv-layout { grid-template-columns: 240px 1fr; }
}
@media (max-width: 768px) {
  .srv-layout { grid-template-columns: 1fr; }
  .srv-info   { position: static; }
  .srv-tabs   { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
  .srv-tab    { font-size: 11px; padding: 8px 6px; gap: 4px; min-width: unset; }
  .si-card    { flex-direction: column; align-items: flex-start; gap: 10px; }
  .si-price   { align-self: flex-end; }
}
/* ================================
   PROCESS SECTION — FIXED
================================ */
.ds-process {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
  margin-top: 40px;
}
.dsp-step {
  text-align: center;
  flex: 1;
  max-width: 180px;
  padding: 0 16px;
}
.dsp-num {
  width: 32px; height: 32px;
  background: #2563eb; color: #fff;
  border-radius: 50%; font-size: 15px;
  font-weight: 800;
  display: flex; align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  box-shadow: 0 4px 12px rgba(37,99,235,0.3);
}
.dsp-icon {
  width: 72px; height: 72px;
  background: #eff6ff; color: #2563eb;
  border-radius: 20px; font-size: 28px;
  display: flex; align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  border: 2px solid #dbeafe;
  transition: all 0.3s;
}
.dsp-step:hover .dsp-icon {
  background: #2563eb; color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(37,99,235,0.3);
}
.dsp-step h4 {
  font-size: 15px; font-weight: 800;
  color: #0f172a; margin-bottom: 8px;
}
.dsp-step p {
  font-size: 13px; color: #64748b;
  line-height: 1.6;
}
.dsp-arrow {
  font-size: 22px; color: #cbd5e1;
  padding-top: 50px;
  flex-shrink: 0;
}

/* Dark Mode */
body.dark .dsp-icon {
  background: rgba(37,99,235,0.15) !important;
  border-color: rgba(37,99,235,0.3) !important;
  color: #60a5fa !important;
}
body.dark .dsp-step h4 { color: #f1f5f9 !important; }
body.dark .dsp-step p  { color: #94a3b8 !important; }
body.dark .dsp-arrow   { color: #334155 !important; }

/* ================================
   MODAL — FIXED
================================ */
.ds-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  z-index: 9998;
  cursor: pointer;
}
.ds-modal-overlay.open { display: block; }

.ds-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: 94%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 20px;
  z-index: 9999;
  box-shadow: 0 24px 64px rgba(0,0,0,0.3);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.ds-modal.open {
  display: block;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.dsm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
  position: sticky;
  top: 0;
  z-index: 1;
  border-radius: 20px 20px 0 0;
}
.dsm-header h3 {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dsm-header h3 i { color: #2563eb; }
.dsm-close {
  width: 34px; height: 34px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
.dsm-close:hover {
  background: #fee2e2;
  color: #ef4444;
  border-color: #fecaca;
}
.dsm-body { padding: 24px; }

/* Form inside modal */
.dsm-body .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.dsm-body .form-group {
  margin-bottom: 16px;
}
.dsm-body .form-group label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}
.dsm-body .form-group label span { color: #ef4444; }
.dsm-body .form-group input,
.dsm-body .form-group select,
.dsm-body .form-group textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 9px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
  background: #fafafa;
  color: #1e293b;
}
.dsm-body .form-group input:focus,
.dsm-body .form-group select:focus,
.dsm-body .form-group textarea:focus {
  border-color: #2563eb;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.08);
}
.dsm-body .form-group textarea {
  resize: vertical;
  min-height: 100px;
}
.full-width {
  width: 100% !important;
  justify-content: center;
}
.form-alert {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-alert.success {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}
.form-alert.error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* Fix duplicate section issue */
.bg-light .section-head { margin-bottom: 28px; }

/* ============================
   HOME PAGE — MISSING CSS
============================ */

/* Jobs Preview Grid */
.jobs-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 8px;
}
.jpg-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px;
  transition: all 0.3s;
  border-left: 4px solid #2563eb;
}
.jpg-card:hover {
  box-shadow: 0 8px 24px rgba(37,99,235,0.1);
  transform: translateY(-4px);
}
.jpg-card.expired { border-left-color: #94a3b8; opacity: 0.7; }
.jpgc-top {
  display: flex; gap: 8px;
  flex-wrap: wrap; margin-bottom: 10px;
}
.jpgc-cat {
  background: #eff6ff; color: #2563eb;
  font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 99px;
}
.jpgc-hot {
  background: #fef9c3; color: #854d0e;
  font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 99px;
}
.jpgc-urgent {
  background: #fee2e2; color: #991b1b;
  font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 99px;
}
.jpgc-title {
  font-size: 15px; font-weight: 800;
  color: #0f172a; margin-bottom: 8px;
  line-height: 1.4;
}
.jpgc-dept {
  font-size: 12px; color: #64748b;
  display: flex; align-items: center;
  gap: 5px; margin-bottom: 14px;
}
.jpgc-footer {
  display: flex; justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}
.jpgc-date   { font-size: 12px; color: #64748b; display: flex; align-items: center; gap: 5px; }
.jpgc-expired{ font-size: 12px; color: #ef4444; display: flex; align-items: center; gap: 5px; }
.jpgc-link {
  font-size: 13px; font-weight: 700;
  color: #2563eb; text-decoration: none;
  display: flex; align-items: center; gap: 4px;
  transition: gap 0.2s;
}
.jpgc-link:hover { gap: 8px; }

/* FAQ */
.faq-list {
  max-width: 800px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 12px;
}
.faq-item {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 12px; overflow: hidden;
  transition: all 0.2s;
}
.faq-item[open] {
  border-color: #bfdbfe;
  box-shadow: 0 4px 16px rgba(37,99,235,0.08);
}
.faq-summary {
  display: flex; justify-content: space-between;
  align-items: center; gap: 14px;
  padding: 18px 20px; cursor: pointer;
  font-size: 15px; font-weight: 700;
  color: #0f172a; list-style: none;
  transition: background 0.2s;
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary:hover { background: #f8fafc; }
.faq-item[open] .faq-summary { color: #2563eb; background: #eff6ff; }
.faq-icon {
  font-size: 13px; color: #94a3b8;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.faq-item[open] .faq-icon {
  transform: rotate(180deg);
  color: #2563eb;
}
.faq-body, .faq-content {
  padding: 16px 20px 20px;
  font-size: 14px; color: #475569;
  line-height: 1.8;
  border-top: 1px solid #f1f5f9;
}

/* Gallery Preview */
.gallery-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.gpg-item {
  height: 180px; border-radius: 12px;
  overflow: hidden; cursor: pointer;
  position: relative;
  transition: all 0.3s;
}
.gpg-item:hover { transform: scale(1.03); }
.gpg-item img {
  width: 100%; height: 100%;
  object-fit: cover; transition: transform 0.4s;
}
.gpg-item:hover img { transform: scale(1.1); }
.gpg-overlay {
  position: absolute; inset: 0;
  background: rgba(37,99,235,0.5);
  display: flex; align-items: center;
  justify-content: center;
  opacity: 0; transition: opacity 0.3s;
  color: #fff; font-size: 24px;
}
.gpg-item:hover .gpg-overlay { opacity: 1; }
.gpg-empty {
  grid-column: 1/-1; text-align: center;
  padding: 40px; color: #94a3b8;
}
.gpg-empty i { font-size: 48px; display: block; margin-bottom: 12px; }

/* Blog Grid Home */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Responsive */
@media (max-width: 1024px) {
  .jobs-preview-grid   { grid-template-columns: repeat(2, 1fr); }
  .gallery-preview-grid{ grid-template-columns: repeat(2, 1fr); }
  .blog-grid           { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .jobs-preview-grid    { grid-template-columns: 1fr; }
  .gallery-preview-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid            { grid-template-columns: 1fr; }
  .gpg-item             { height: 140px; }
}

/* ================================
   GOVT JOBS - SCALABLE LIST UI
================================ */
.gj2-hero {
  background: #0f172a;
  color: #fff;
  padding: 54px 0 34px;
}
.gj2-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 32px;
  align-items: center;
}
.gj2-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.gj2-kicker span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 5px rgba(34,197,94,0.16);
}
.gj2-hero h1 {
  max-width: 760px;
  margin: 18px 0 10px;
  font-size: 42px;
  line-height: 1.08;
  letter-spacing: 0;
  color: #fff;
}
.gj2-hero p {
  max-width: 680px;
  color: #cbd5e1;
  font-size: 16px;
}
.gj2-search {
  margin-top: 24px;
  max-width: 760px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,0.22);
}
.gj2-search i {
  color: #64748b;
  text-align: center;
}
.gj2-search input {
  min-width: 0;
  height: 52px;
  border: 0;
  outline: 0;
  font: inherit;
  color: #0f172a;
}
.gj2-search button {
  height: 52px;
  border: 0;
  padding: 0 22px;
  background: #2563eb;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.gj2-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.gj2-quick a {
  padding: 7px 12px;
  border-radius: 999px;
  color: #e2e8f0;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 12px;
  font-weight: 700;
}
.gj2-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.gj2-stat-grid a {
  min-height: 112px;
  padding: 18px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
}
.gj2-stat-grid strong {
  display: block;
  font-size: 30px;
  line-height: 1;
}
.gj2-stat-grid span {
  display: block;
  margin-top: 8px;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 700;
}
.gj2-ticker {
  display: flex;
  align-items: center;
  background: #111827;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.gj2-ticker-label {
  flex: 0 0 auto;
  padding: 13px 18px;
  background: #ef4444;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.gj2-ticker-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  padding: 12px 16px;
  scrollbar-width: thin;
}
.gj2-ticker-track a {
  flex: 0 0 auto;
  color: #e5e7eb;
  font-size: 13px;
  font-weight: 700;
}
.gj2-ticker-track span {
  margin-right: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #fbbf24;
  color: #111827;
  font-size: 10px;
  text-transform: uppercase;
}
.gj2-section {
  background: #f8fafc;
}
.gj2-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 22px;
}

.gj2-tabs a {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
}
.gj2-tabs a.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
  box-shadow: 0 10px 24px rgba(37,99,235,0.22);
}
.gj2-tabs span {
  padding: 2px 7px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 11px;
}
.gj2-tabs a.active span {
  background: rgba(255,255,255,0.2);
  color: #fff;
}
.gj2-layout {
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.gj2-sidebar {
  position: sticky;
  top: 88px;
  display: grid;
  gap: 16px;
}
.gj2-filter-box,
.gj2-help-box,
.gj2-official-box,
.gjd-panel,
.gjd-action-box,
.gjd-mini-info {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.04);
}
.gj2-filter-box,
.gj2-official-box {
  padding: 14px;
}
.gj2-filter-box h3,
.gj2-official-box h3,
.gj2-help-box h3 {
  font-size: 15px;
  margin-bottom: 12px;
  color: #0f172a;
}
.gj2-filter-box a,
.gj2-official-box a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
}
.gj2-filter-box a:hover,
.gj2-filter-box a.active,
.gj2-official-box a:hover {
  background: #eff6ff;
  color: #2563eb;
}
.gj2-filter-box strong {
  min-width: 28px;
  text-align: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 11px;
}
.gj2-help-box {
  padding: 18px;
}
.gj2-help-box > i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #eff6ff;
  color: #2563eb;
  margin-bottom: 12px;
}
.gj2-help-box p {
  color: #64748b;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 14px;
}
.gj2-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
  border-radius: 8px;
  background: #f8fafc;
  color: #0f172a;
  font-weight: 800;
}
.gj2-results-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 14px;
}
.gj2-results-head span {
  color: #2563eb;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.gj2-results-head h2 {
  font-size: 24px;
  color: #0f172a;
}
.gj2-reset {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}
.gj2-list {
  display: grid;
  gap: 12px;
}
.gj2-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 170px;
  gap: 16px;
  padding: 18px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.gj2-card:hover {
  border-color: #bfdbfe;
  box-shadow: 0 14px 32px rgba(15,23,42,0.08);
  transform: translateY(-1px);
}
.gj2-card-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 20px;
}
.gj2-card-icon.blue { background: #dbeafe; color: #1d4ed8; }
.gj2-card-icon.green { background: #dcfce7; color: #15803d; }
.gj2-card-icon.purple { background: #ede9fe; color: #6d28d9; }
.gj2-card-icon.orange { background: #ffedd5; color: #c2410c; }
.gj2-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.gj2-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}
.gj2-pill.blue { background: #dbeafe; color: #1e40af; }
.gj2-pill.green { background: #dcfce7; color: #166534; }
.gj2-pill.purple { background: #ede9fe; color: #5b21b6; }
.gj2-pill.orange { background: #ffedd5; color: #9a3412; }
.gj2-pill.red { background: #fee2e2; color: #991b1b; }
.gj2-pill.light { background: #f1f5f9; color: #475569; }
.gj2-pill.pink { background: #fce7f3; color: #9d174d; }
.gj2-card h2 {
  font-size: 18px;
  line-height: 1.35;
  margin-bottom: 6px;
}
.gj2-card h2 a {
  color: #0f172a;
}
.gj2-card h2 a:hover {
  color: #2563eb;
}
.gj2-dept {
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
}
.gj2-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}
.gj2-meta-row i {
  color: #2563eb;
}
.gj2-card-action {
  display: grid;
  align-content: space-between;
  justify-items: end;
  gap: 12px;
}
.gj2-deadline {
  display: grid;
  justify-items: end;
  gap: 2px;
  text-align: right;
}
.gj2-deadline small {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.gj2-deadline strong {
  color: #0f172a;
  font-size: 14px;
}
.gj2-deadline em {
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}
.gj2-deadline.green em,
.gjd-date-list .green,
.gjd-status.green { color: #15803d; }
.gj2-deadline.orange em,
.gjd-date-list .orange,
.gjd-status.orange { color: #c2410c; }
.gj2-deadline.red em,
.gjd-date-list .red,
.gjd-status.red { color: #dc2626; }
.gj2-view {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #2563eb;
  font-size: 13px;
  font-weight: 900;
}
.gj2-empty {
  text-align: center;
  padding: 48px 24px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.gj2-empty i {
  font-size: 36px;
  color: #cbd5e1;
  margin-bottom: 12px;
}
.gj2-empty h3 {
  color: #0f172a;
  margin-bottom: 8px;
}
.gj2-empty p {
  color: #64748b;
  margin-bottom: 16px;
}
.gj2-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}
.gj2-pagination a,
.gj2-pagination span {
  padding: 10px 14px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
}
.gj2-pagination a.disabled {
  pointer-events: none;
  opacity: 0.45;
}

.gjd-hero {
  background: #0f172a;
  color: #fff;
  padding: 34px 0 42px;
}
.gjd-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 22px;
}
.gjd-title-wrap {
  max-width: 920px;
}
.gjd-title-wrap h1 {
  color: #fff;
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: 0;
  margin: 14px 0 10px;
}
.gjd-title-wrap p {
  color: #cbd5e1;
  font-weight: 700;
}
.gjd-section {
  background: #f8fafc;
}
.gjd-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  align-items: start;
}
.gjd-main,
.gjd-sidebar {
  display: grid;
  gap: 16px;
}
.gjd-sidebar {
  position: sticky;
  top: 88px;
}
.gjd-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.gjd-summary-grid div {
  min-height: 112px;
  padding: 18px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.gjd-summary-grid i {
  color: #2563eb;
  font-size: 20px;
  margin-bottom: 12px;
}
.gjd-summary-grid span,
.gjd-mini-info span,
.gjd-date-list span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.gjd-summary-grid strong,
.gjd-mini-info strong,
.gjd-date-list strong {
  display: block;
  margin-top: 5px;
  color: #0f172a;
  font-size: 15px;
}
.gjd-panel {
  padding: 22px;
}
.gjd-panel h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 20px;
  color: #0f172a;
  margin-bottom: 14px;
}
.gjd-panel h2 i {
  color: #2563eb;
}
.gjd-panel p {
  color: #475569;
  line-height: 1.8;
}
.gjd-related-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gjd-related-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.gjd-related-item:hover {
  border-color: #2563eb;
  background: #eff6ff;
}
.gjd-related-title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}
.gjd-related-badge {
  background: #dbeafe;
  color: #1e40af;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
body.dark .gjd-related-item {
  border-color: #334155;
}
body.dark .gjd-related-item:hover {
  border-color: #60a5fa;
  background: #1e293b;
}
body.dark .gjd-related-title {
  color: #f8fafc;
}
body.dark .gjd-related-badge {
  background: #1e3a5f;
  color: #60a5fa;
}
.gjd-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.gjd-cms-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  background: #fff;
}
.gjd-cms-table th,
.gjd-cms-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  vertical-align: top;
  font-size: 13px;
  line-height: 1.55;
}
.gjd-cms-table th {
  background: #eff6ff;
  color: #1e40af;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .35px;
  font-size: 11px;
}
.gjd-cms-table tr:last-child td {
  border-bottom: 0;
}
.gjd-cms-table td:first-child {
  font-weight: 800;
  color: #0f172a;
}
.gjd-cms-table small {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
}
.gjd-cms-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gjd-cms-list li {
  position: relative;
  padding-left: 24px;
  color: #475569;
  font-size: 14px;
  line-height: 1.7;
}
.gjd-cms-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #2563eb;
  box-shadow: 0 0 0 4px #eff6ff;
}
.gjd-ai-html {
  color: #334155;
  font-size: 14px;
  line-height: 1.7;
  overflow-x: auto;
}
.gjd-ai-html :where(h1,h2,h3,h4,h5,h6) {
  color: #0f172a;
  line-height: 1.25;
  margin: 0 0 10px;
}
.gjd-ai-html :where(p,ul,ol,table,blockquote,pre) {
  margin: 0 0 12px;
}
.gjd-ai-html table {
  width: 100%;
  border-collapse: collapse;
}
.gjd-ai-html th,
.gjd-ai-html td {
  border: 1px solid #e2e8f0;
  padding: 10px 12px;
  vertical-align: top;
}
.gjd-ai-html th {
  background: #eff6ff;
  color: #1e40af;
}
.gjd-ai-html a {
  color: #2563eb;
  font-weight: 800;
}
.gjd-ai-html img {
  max-width: 100%;
  height: auto;
}
.gjd-date-list {
  display: grid;
  gap: 10px;
}
.gjd-date-list div,
.gjd-mini-info div {
  padding: 13px;
  border-radius: 8px;
  background: #f8fafc;
}
.gjd-action-box {
  padding: 18px;
}
.gjd-status {
  display: block;
  padding: 10px;
  border-radius: 8px;
  background: #f8fafc;
  text-align: center;
  font-weight: 900;
  margin-bottom: 12px;
}
.gjd-actions {
  display: grid;
  gap: 9px;
}
.gjd-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px;
  border-radius: 8px;
  background: #f8fafc;
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}
.gjd-actions a.primary {
  background: #2563eb;
  color: #fff;
}
.gjd-mini-info {
  display: grid;
  gap: 8px;
  padding: 14px;
}
body.dark .gj2-section,
body.dark .gjd-section {
  background: #0f172a;
}
body.dark .gj2-filter-box,
body.dark .gj2-help-box,
body.dark .gj2-official-box,
body.dark .gj2-card,
body.dark .gj2-empty,
body.dark .gj2-reset,
body.dark .gj2-pagination a,
body.dark .gj2-pagination span,
body.dark .gjd-panel,
body.dark .gjd-action-box,
body.dark .gjd-mini-info,
body.dark .gjd-summary-grid div {
  background: #111827;
  border-color: #1f2937;
}
body.dark .gj2-card h2 a,
body.dark .gj2-results-head h2,
body.dark .gj2-filter-box h3,
body.dark .gj2-official-box h3,
body.dark .gj2-help-box h3,
body.dark .gjd-panel h2,
body.dark .gjd-summary-grid strong,
body.dark .gjd-mini-info strong,
body.dark .gjd-date-list strong {
  color: #f8fafc;
}
body.dark .gjd-table-wrap,
body.dark .gjd-cms-table th,
body.dark .gjd-cms-table td {
  border-color: #1f2937;
}
body.dark .gjd-cms-table {
  background: #111827;
}
body.dark .gjd-cms-table th {
  background: rgba(37,99,235,.16);
  color: #93c5fd;
}
body.dark .gjd-cms-table td,
body.dark .gjd-cms-list li,
body.dark .gjd-cms-table small {
  color: #cbd5e1;
}
body.dark .gjd-cms-table td:first-child {
  color: #f8fafc;
}
body.dark .gjd-cms-list li::before {
  box-shadow: 0 0 0 4px rgba(37,99,235,.16);
}
body.dark .gjd-ai-html,
body.dark .gjd-ai-html :where(p,li,td,blockquote,pre) {
  color: #cbd5e1;
}
body.dark .gjd-ai-html :where(h1,h2,h3,h4,h5,h6),
body.dark .gjd-ai-html th {
  color: #f8fafc;
}
body.dark .gjd-ai-html th {
  background: rgba(37,99,235,.16);
}
body.dark .gjd-ai-html td,
body.dark .gjd-ai-html th {
  border-color: #1f2937;
}
@media (max-width: 1024px) {
  .gj2-hero-grid,
  .gj2-layout,
  .gjd-layout {
    grid-template-columns: 1fr;
  }
  .gj2-sidebar,
  .gjd-sidebar {
    position: static;
  }
  .gj2-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .gj2-hero h1,
  .gjd-title-wrap h1 {
    font-size: 30px;
  }
  .gj2-search {
    grid-template-columns: 38px 1fr;
  }
  .gj2-search button {
    grid-column: 1 / -1;
    width: 100%;
  }
  .gj2-stat-grid,
  .gjd-summary-grid,
  .gj2-tabs {
    grid-template-columns: 1fr 1fr;
  }
  .gj2-card {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .gj2-card-icon {
    width: 44px;
    height: 44px;
  }
  .gj2-card-action {
    grid-column: 1 / -1;
    justify-items: stretch;
  }
  .gj2-deadline {
    justify-items: start;
    text-align: left;
  }
  .gj2-pagination {
    flex-direction: column;
    align-items: stretch;
  }
  .gj2-pagination a,
  .gj2-pagination span {
    text-align: center;
  }
}

/* ================================
   SHOP - PROFESSIONAL ECOMMERCE UI
================================ */
.shop2-hero {
  background: #0f172a;
  color: #fff;
  padding: 54px 0 34px;
}
.shop2-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 30px;
  align-items: center;
}
.shop2-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.shop2-hero h1 {
  max-width: 820px;
  margin: 18px 0 10px;
  color: #fff;
  font-size: 42px;
  line-height: 1.08;
  letter-spacing: 0;
}
.shop2-hero p {
  max-width: 700px;
  color: #cbd5e1;
  font-size: 16px;
}
.shop2-search {
  margin-top: 24px;
  max-width: 760px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,0.22);
}
.shop2-search i {
  text-align: center;
  color: #64748b;
}
.shop2-search input {
  min-width: 0;
  height: 52px;
  border: 0;
  outline: 0;
  color: #0f172a;
  font: inherit;
}
.shop2-search button {
  height: 52px;
  border: 0;
  padding: 0 22px;
  background: #2563eb;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}
.shop2-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.shop2-trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #dbeafe;
  font-size: 13px;
  font-weight: 700;
}
.shop2-cart-panel {
  padding: 20px;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
}
.shop2-cart-panel div {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.shop2-cart-panel span {
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 800;
}
.shop2-cart-panel strong {
  color: #fff;
  font-size: 38px;
  line-height: 1;
}
.shop2-cart-panel a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 12px;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}
.shop2-cart-panel a.secondary {
  margin-top: 8px;
  background: rgba(255,255,255,0.1);
  color: #e2e8f0;
}
.shop2-featured {
  background: #111827;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.shop2-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  padding: 12px 0;
}
.shop2-strip strong,
.shop2-strip button {
  flex: 0 0 auto;
}
.shop2-strip strong {
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}
.shop2-strip button {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.08);
  color: #e5e7eb;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.shop2-strip button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.shop2-strip span {
  color: #fbbf24;
}
.shop2-section {
  background: #f8fafc;
}
.shop2-layout {
  display: grid;
  grid-template-columns: 278px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.shop2-sidebar {
  position: sticky;
  top: 88px;
  display: grid;
  gap: 16px;
}
.shop2-box,
.shop2-help,
.shop2-product,
.shop2-empty {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.04);
}
.shop2-box {
  padding: 14px;
}
.shop2-box h3,
.shop2-help h3 {
  margin-bottom: 12px;
  color: #0f172a;
  font-size: 15px;
}
.shop2-box a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
}
.shop2-box a span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.shop2-box a:hover,
.shop2-box a.active {
  background: #eff6ff;
  color: #2563eb;
}
.shop2-box strong {
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  text-align: center;
  font-size: 11px;
}
.shop2-help {
  padding: 18px;
}
.shop2-help > i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #eff6ff;
  color: #2563eb;
  margin-bottom: 12px;
}
.shop2-help p {
  color: #64748b;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 14px;
}
.shop2-help a {
  display: flex;
  justify-content: center;
  padding: 10px;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  font-weight: 900;
}
.shop2-results {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.shop2-results span {
  color: #2563eb;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.shop2-results h2 {
  color: #0f172a;
  font-size: 24px;
}
.shop2-results > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 13px;
  font-weight: 900;
}
.shop2-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.shop2-product {
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.shop2-product:hover {
  transform: translateY(-2px);
  border-color: #bfdbfe;
  box-shadow: 0 16px 34px rgba(15,23,42,0.09);
}
.shop2-product-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #f1f5f9;
  overflow: hidden;
}
.shop2-product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.shop2-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #2563eb;
  font-size: 48px;
  background: linear-gradient(135deg, #eff6ff, #f8fafc);
}
.shop2-discount,
.shop2-out {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}
.shop2-discount {
  background: #ef4444;
  color: #fff;
}
.shop2-out {
  left: auto;
  right: 10px;
  background: #111827;
  color: #fff;
}
.shop2-product-body {
  padding: 14px;
}
.shop2-product-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.shop2-product-top span,
.shop2-product-top em {
  font-size: 11px;
  font-weight: 900;
}
.shop2-product-top span {
  color: #2563eb;
}
.shop2-product-top em {
  font-style: normal;
  color: #15803d;
}
.shop2-product-top em.low {
  color: #dc2626;
}
.shop2-product h2 {
  color: #0f172a;
  font-size: 16px;
  line-height: 1.35;
  margin-bottom: 7px;
}
.shop2-product h2 a {
  color: inherit;
}
.shop2-product h2 a:hover {
  color: #2563eb;
}
.shop2-product p {
  min-height: 40px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 8px;
}
.shop2-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #2563eb;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 12px;
}
.shop2-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.shop2-price-row strong {
  display: block;
  color: #0f172a;
  font-size: 18px;
}
.shop2-price-row del {
  color: #94a3b8;
  font-size: 12px;
}
.shop2-price-row button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 8px;
  padding: 10px 12px;
  background: #2563eb;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}
.shop2-price-row button:disabled {
  background: #cbd5e1;
  cursor: not-allowed;
}
.shop2-empty {
  text-align: center;
  padding: 54px 24px;
}
.shop2-empty i {
  color: #cbd5e1;
  font-size: 42px;
  margin-bottom: 12px;
}
.shop2-empty h3 {
  color: #0f172a;
  margin-bottom: 8px;
}
.shop2-empty p {
  color: #64748b;
  margin-bottom: 16px;
}
.shop2-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.shop2-pagination a,
.shop2-pagination span {
  padding: 10px 14px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 13px;
  font-weight: 900;
}
.shop2-pagination a.disabled {
  pointer-events: none;
  opacity: 0.45;
}
body.dark .shop2-section {
  background: #0f172a;
}
body.dark .shop2-box,
body.dark .shop2-help,
body.dark .shop2-product,
body.dark .shop2-empty,
body.dark .shop2-results > a,
body.dark .shop2-pagination a,
body.dark .shop2-pagination span {
  background: #111827;
  border-color: #1f2937;
}
body.dark .shop2-box h3,
body.dark .shop2-help h3,
body.dark .shop2-results h2,
body.dark .shop2-product h2,
body.dark .shop2-product h2 a,
body.dark .shop2-price-row strong,
body.dark .shop2-empty h3 {
  color: #f8fafc;
}

/* Product detail page */
.product2-hero {
  background: #f8fafc;
  padding: 30px 0 54px;
}
.product2-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #475569;
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 18px;
}
.product2-layout {
  display: grid;
  grid-template-columns: minmax(280px, 520px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.product2-media,
.product2-info {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 12px 34px rgba(15,23,42,0.06);
}
.product2-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.product2-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product2-info {
  padding: 26px;
}
.product2-cat {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.product2-info h1 {
  margin: 14px 0 10px;
  color: #0f172a;
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: 0;
}
.product2-info p {
  color: #475569;
  line-height: 1.75;
}
.product2-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 20px 0 12px;
}
.product2-price strong {
  color: #0f172a;
  font-size: 30px;
  line-height: 1;
}
.product2-price del {
  color: #94a3b8;
  font-weight: 800;
}
.product2-stock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #f0fdf4;
  color: #15803d;
  font-size: 13px;
  font-weight: 900;
}
.product2-stock.low {
  background: #fff7ed;
  color: #c2410c;
}
.product2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0;
}
.product2-actions button,
.product2-actions a {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 18px;
  border-radius: 8px;
  border: 0;
  background: #2563eb;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}
.product2-actions a {
  background: #0f172a;
}
.product2-actions button:disabled {
  background: #cbd5e1;
  cursor: not-allowed;
}
.product2-actions span {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
}
.product2-service {
  display: grid;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid #f1f5f9;
}
.product2-service div {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
}
.product2-service i {
  color: #2563eb;
}
.product2-service a {
  color: #2563eb;
}
.product2-related {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.product2-related a {
  display: grid;
  gap: 8px;
  padding: 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #0f172a;
  font-weight: 900;
}
.product2-related img,
.product2-related span {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  object-fit: cover;
  background: #eff6ff;
}
.product2-related span {
  display: grid;
  place-items: center;
  color: #2563eb;
  font-size: 34px;
}
.product2-related em {
  color: #2563eb;
  font-style: normal;
  font-size: 13px;
}
body.dark .product2-hero {
  background: #0f172a;
}
body.dark .product2-media,
body.dark .product2-info,
body.dark .product2-related a {
  background: #111827;
  border-color: #1f2937;
}
body.dark .product2-info h1,
body.dark .product2-price strong,
body.dark .product2-related a {
  color: #f8fafc;
}
@media (max-width: 1100px) {
  .shop2-hero-grid,
  .shop2-layout,
  .product2-layout {
    grid-template-columns: 1fr;
  }
  .shop2-sidebar {
    position: static;
  }
  .shop2-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product2-related {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .shop2-hero h1 {
    font-size: 30px;
  }
  .shop2-search {
    grid-template-columns: 38px 1fr;
  }
  .shop2-search button {
    grid-column: 1 / -1;
    width: 100%;
  }
  .shop2-grid {
    grid-template-columns: 1fr;
  }
  .product2-info {
    padding: 18px;
  }
  .product2-info h1 {
    font-size: 28px;
  }
  .product2-actions button,
  .product2-actions a {
    width: 100%;
  }
  .product2-related {
    grid-template-columns: 1fr;
  }
  .shop2-results,
  .shop2-pagination {
    flex-direction: column;
    align-items: stretch;
  }
  .shop2-pagination a,
  .shop2-pagination span {
    text-align: center;
  }
}

/* ===== NEW SVG PAGE PRELOADER OVERRIDES ===== */
.page-loader .loader-logo {
  width: auto !important;
  height: auto !important;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.loader-logo-img {
  height: 72px;
  width: auto;
  display: block;
  animation: logoPulse 1.6s ease-in-out infinite;
}

html[data-theme="dark"] .loader-logo-img,
body.dark .loader-logo-img {
  filter: drop-shadow(0 14px 32px rgba(59, 130, 246, .35))
          drop-shadow(0 0 18px rgba(167, 139, 250, .24));
}

.page-loader .loader-bar {
  width: 140px !important;
  height: 3px !important;
}

@keyframes logoPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.95;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

/* Utility alignments */
.text-center { text-align: center; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mb-4 { margin-bottom: 1rem; }

/* Small Buttons */
.btn-primary.sm,
.btn-outline.sm,
.btn-secondary.sm {
  padding: 8px 16px;
  font-size: 13px;
}

.dsm-header h3 {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dsm-header h3 i { color: #2563eb; }
.dsm-close {
  width: 34px; height: 34px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
.dsm-close:hover {
  background: #fee2e2;
  color: #ef4444;
  border-color: #fecaca;
}
.dsm-body { padding: 24px; }

/* Form inside modal */
.dsm-body .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.dsm-body .form-group {
  margin-bottom: 16px;
}
.dsm-body .form-group label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}
.dsm-body .form-group label span { color: #ef4444; }
.dsm-body .form-group input,
.dsm-body .form-group select,
.dsm-body .form-group textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 9px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
  background: #fafafa;
  color: #1e293b;
}
.dsm-body .form-group input:focus,
.dsm-body .form-group select:focus,
.dsm-body .form-group textarea:focus {
  border-color: #2563eb;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.08);
}
.dsm-body .form-group textarea {
  resize: vertical;
  min-height: 100px;
}
.full-width {
  width: 100% !important;
  justify-content: center;
}
.form-alert {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-alert.success {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}
.form-alert.error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* Fix duplicate section issue */
.bg-light .section-head { margin-bottom: 28px; }

/* ============================
   HOME PAGE — MISSING CSS
============================ */

/* Jobs Preview Grid */
.jobs-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 8px;
}
.jpg-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px;
  transition: all 0.3s;
  border-left: 4px solid #2563eb;
}
.jpg-card:hover {
  box-shadow: 0 8px 24px rgba(37,99,235,0.1);
  transform: translateY(-4px);
}
.jpg-card.expired { border-left-color: #94a3b8; opacity: 0.7; }
.jpgc-top {
  display: flex; gap: 8px;
  flex-wrap: wrap; margin-bottom: 10px;
}
.jpgc-cat {
  background: #eff6ff; color: #2563eb;
  font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 99px;
}
.jpgc-hot {
  background: #fef9c3; color: #854d0e;
  font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 99px;
}
.jpgc-urgent {
  background: #fee2e2; color: #991b1b;
  font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 99px;
}
.jpgc-title {
  font-size: 15px; font-weight: 800;
  color: #0f172a; margin-bottom: 8px;
  line-height: 1.4;
}
.jpgc-dept {
  font-size: 12px; color: #64748b;
  display: flex; align-items: center;
  gap: 5px; margin-bottom: 14px;
}
.jpgc-footer {
  display: flex; justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}
.jpgc-date   { font-size: 12px; color: #64748b; display: flex; align-items: center; gap: 5px; }
.jpgc-expired{ font-size: 12px; color: #ef4444; display: flex; align-items: center; gap: 5px; }
.jpgc-link {
  font-size: 13px; font-weight: 700;
  color: #2563eb; text-decoration: none;
  display: flex; align-items: center; gap: 4px;
  transition: gap 0.2s;
}
.jpgc-link:hover { gap: 8px; }

/* Courses Grid */
.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}
.course-card {
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 32px 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: all 0.3s;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.course-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.06);
  border-color: #2563eb;
}
.course-card.featured {
  border: 2px solid #2563eb;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}
.featured-tag {
  position: absolute;
  top: 14px;
  right: 14px;
  background-color: #2563eb;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 9999px;
}
.course-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background-color: #eff6ff;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 20px;
}
.course-card h3 {
  font-size: 18px;
  margin-bottom: 10px;
}
.course-card p {
  font-size: 13.5px;
  color: #475569;
  line-height: 1.55;
  margin-bottom: 20px;
  flex-grow: 1;
}
.course-meta {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #f1f5f9;
  padding-top: 16px;
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}
.course-meta span i {
  color: #2563eb;
  margin-right: 4px;
}

/* Services Grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
.service-card {
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 32px 28px;
  transition: all 0.3s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.06);
  border-color: #2563eb;
}
.scard-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 24px;
}
.scard-icon.blue { background-color: #eff6ff; color: #2563eb; }
.scard-icon.orange { background-color: #fff7ed; color: #ea580c; }
.scard-icon.green { background-color: #f0fdf4; color: #16a34a; }
.scard-icon.purple { background-color: #faf5ff; color: #7c3aed; }
.service-card h3 {
  font-size: 18px;
  margin-bottom: 12px;
  font-weight: 700;
}
.service-card p {
  color: #475569;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 24px;
  flex-grow: 1;
}

/* Blog Grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: 24px;
}
.blog-card {
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.06);
  border-color: #2563eb;
}
.bc-image {
  position: relative;
  height: 180px;
  overflow: hidden;
  background-color: #f8fafc;
}
.bc-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.blog-card:hover .bc-image img {
  transform: scale(1.05);
}
.bc-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background-color: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 9999px;
}
.bc-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
}
.bc-placeholder i {
  font-size: 36px;
  margin-bottom: 8px;
}
.bc-placeholder span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.bc-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.bc-meta {
  display: flex;
  gap: 16px;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  margin-bottom: 12px;
}
.bc-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.blog-card h3 {
  font-size: 16.5px;
  line-height: 1.4;
  margin-bottom: 12px;
  flex-grow: 1;
  color: #0f172a;
}
.blog-card h3:hover {
  color: #2563eb;
}
.bc-readmore {
  border-top: 1px solid #f1f5f9;
  padding-top: 16px;
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
  color: #2563eb;
  font-weight: 600;
  font-size: 13px;
}

/* =========================================================
   SHOP 3.0 - PREMIUM NEXT-GEN SHOPPING EXPERIENCE
   Scoped to shop.php classes; cart/checkout logic remains untouched.
========================================================= */

.header-cart-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  color: #1e293b;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15,23,42,.06);
  cursor: pointer;
  transition: .2s ease;
}

.header-cart-btn:hover {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  transform: translateY(-1px);
}

.header-cart-btn .cart-badge {
  position: absolute;
  right: -7px;
  top: -7px;
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #111827;
  background: #facc15;
  font-size: 10px;
  font-weight: 950;
}

.ncli-cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(2,6,23,.48);
  backdrop-filter: blur(6px);
}

.ncli-cart-overlay[hidden] {
  display: none;
}

.ncli-cart-drawer {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 9999;
  width: min(420px, 92vw);
  height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 100% 0, rgba(124,58,237,.14), transparent 34%),
    #fff;
  box-shadow: -30px 0 80px rgba(2,6,23,.28);
  transform: translateX(105%);
  transition: transform .32s cubic-bezier(.2,.8,.2,1);
}

.ncli-cart-drawer.open {
  transform: translateX(0);
}

.cart-drawer-open {
  overflow: hidden;
}

.ncli-cart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 22px;
  border-bottom: 1px solid #e2e8f0;
}

.ncli-cart-head span {
  display: block;
  color: #7c3aed;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ncli-cart-head strong {
  display: block;
  margin-top: 3px;
  color: #0f172a;
  font-size: 24px;
  letter-spacing: -.04em;
}

.ncli-cart-head button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 14px;
  color: #0f172a;
  background: #f1f5f9;
  cursor: pointer;
}

.ncli-cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.ncli-cart-empty {
  min-height: 300px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  text-align: center;
  color: #64748b;
}

.ncli-cart-empty i {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 24px;
  color: #7c3aed;
  background: #f3e8ff;
  font-size: 28px;
}

.ncli-cart-empty h3 {
  color: #0f172a;
  font-size: 20px;
}

.ncli-cart-row {
  display: grid;
  grid-template-columns: 52px 1fr 38px;
  gap: 12px;
  align-items: start;
  padding: 13px;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 12px 28px rgba(15,23,42,.055);
  margin-bottom: 12px;
}

.ncli-cart-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  color: #2563eb;
  background: #eff6ff;
}

.ncli-cart-info strong {
  display: block;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.35;
}

.ncli-cart-info > span {
  display: block;
  margin: 4px 0 9px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.ncli-cart-qty {
  display: inline-grid;
  grid-template-columns: 30px 46px 30px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
}

.ncli-cart-qty button,
.ncli-cart-qty input {
  width: 100%;
  height: 30px;
  border: 0;
  text-align: center;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 950;
}

.ncli-cart-qty button {
  cursor: pointer;
  color: #2563eb;
}

.ncli-cart-remove {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 13px;
  color: #dc2626;
  background: #fee2e2;
  cursor: pointer;
}

.ncli-cart-foot {
  padding: 16px;
  border-top: 1px solid #e2e8f0;
  background: rgba(248,250,252,.92);
}

.ncli-cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 13px;
}

.ncli-cart-total span {
  color: #64748b;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.ncli-cart-total strong {
  color: #0f172a;
  font-size: 24px;
}

.ncli-cart-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.ncli-cart-actions a,
.ncli-cart-clear {
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 14px;
  color: #0f172a;
  background: #e2e8f0;
  font: inherit;
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
}

.ncli-cart-actions a.primary {
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
}

.ncli-cart-clear {
  width: 100%;
  margin-top: 9px;
  color: #dc2626;
  background: #fee2e2;
}

.ncli-cart-clear:disabled {
  opacity: .5;
  cursor: not-allowed;
}

body.dark .header-cart-btn {
  color: #f8fafc;
  border-color: #263146;
  background: #111827;
}

body.dark .ncli-cart-drawer {
  background:
    radial-gradient(circle at 0 0, rgba(124,58,237,.18), transparent 34%),
    #0f172a;
}

body.dark .ncli-cart-head,
body.dark .ncli-cart-foot,
body.dark .ncli-cart-row,
body.dark .ncli-cart-qty,
body.dark .ncli-cart-qty button,
body.dark .ncli-cart-qty input {
  border-color: #263146;
  background: #111827;
}

body.dark .ncli-cart-head strong,
body.dark .ncli-cart-empty h3,
body.dark .ncli-cart-info strong,
body.dark .ncli-cart-total strong {
  color: #f8fafc;
}

.shop3-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 76px 0 28px;
  background:
    radial-gradient(circle at 8% 10%, rgba(59, 130, 246, .34), transparent 30%),
    radial-gradient(circle at 88% 8%, rgba(236, 72, 153, .25), transparent 28%),
    radial-gradient(circle at 74% 76%, rgba(34, 197, 94, .16), transparent 26%),
    linear-gradient(135deg, #07111f 0%, #111827 48%, #25134f 100%);
  color: #fff;
}

.shop3-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.78), transparent 84%);
}

.shop3-orbit {
  position: absolute;
  z-index: -1;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  pointer-events: none;
}

.shop3-orbit::before {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #67e8f9;
  box-shadow: 0 0 32px #22d3ee;
}

.shop3-orbit.orb-one {
  right: -95px;
  top: -120px;
  animation: shop3Spin 18s linear infinite;
}

.shop3-orbit.orb-two {
  left: -140px;
  bottom: 10px;
  width: 280px;
  height: 280px;
  animation: shop3Spin 24s linear reverse infinite;
}

.shop3-hero-grid {
  position: relative;
  z-index: 2;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 360px);
  gap: clamp(24px, 4vw, 58px);
  align-items: center;
}

.shop3-hero .shop2-kicker {
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.09);
  color: #dbeafe;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(16px);
}

.shop3-hero h1 {
  max-width: 870px;
  margin: 20px 0 16px;
  color: #fff;
  font-size: clamp(42px, 6vw, 74px);
  line-height: .96;
  letter-spacing: -.07em;
}

.shop3-hero p {
  max-width: 760px;
  color: #cad5e6;
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.75;
}

.shop3-search {
  position: relative;
  max-width: 820px;
  margin-top: 28px;
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 22px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 24px 70px rgba(2,6,23,.34);
}

.shop3-search::after {
  content: "Press /";
  position: absolute;
  right: 136px;
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 8px;
  border-radius: 8px;
  color: #64748b;
  background: #f1f5f9;
  font-size: 10px;
  font-weight: 900;
  pointer-events: none;
}

.shop3-search i {
  position: static;
  transform: none;
  text-align: center;
  color: #64748b;
}

.shop3-search input {
  height: 62px;
  min-width: 0;
  border: 0;
  outline: 0;
  color: #0f172a;
  background: transparent;
  font: inherit;
  font-size: 15px;
}

.shop3-search input::placeholder {
  color: #94a3b8;
}

.shop3-search button {
  position: static;
  height: 52px;
  margin-right: 5px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 16px;
  padding: 0 20px;
  background: linear-gradient(135deg, #7c3aed, #2563eb 60%, #06b6d4);
  color: #fff;
  font-weight: 950;
  box-shadow: 0 12px 28px rgba(37, 99, 235, .26);
}

.shop3-search button i {
  color: #fff;
}

.shop3-search-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
}

.shop3-search-hints a {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  color: #dbeafe;
  background: rgba(255,255,255,.08);
  font-size: 12px;
  font-weight: 800;
  backdrop-filter: blur(12px);
}

.shop3-search-hints a:hover {
  color: #fff;
  transform: translateY(-1px);
  background: rgba(255,255,255,.14);
}

.shop3-trust {
  gap: 10px;
  margin-top: 20px;
}

.shop3-trust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 13px;
  color: #e2e8f0;
  background: rgba(255,255,255,.07);
  font-size: 12px;
  font-weight: 850;
}

.shop3-trust i {
  color: #86efac;
}

.shop3-command-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 28px;
  padding: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.07));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 26px 70px rgba(2,6,23,.26);
  backdrop-filter: blur(22px);
}

.shop3-command-card::before {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  right: -70px;
  top: -80px;
  border-radius: 50%;
  background: rgba(34,211,238,.22);
  filter: blur(5px);
}

.shop3-command-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 13px;
}

.shop3-command-top span {
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.shop3-command-top strong {
  color: #fff;
  font-size: 58px;
  line-height: .86;
  letter-spacing: -.05em;
}

.shop3-command-meter {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  margin-bottom: 14px;
}

.shop3-command-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #facc15, #fb7185);
}

.shop3-command-card p {
  color: #dbeafe;
  font-size: 13px;
  margin-bottom: 16px;
}

.shop3-command-card a {
  position: relative;
  z-index: 1;
  min-height: 44px;
  border-radius: 14px;
}

.shop3-hero-carousel {
  position: relative;
  min-height: 390px;
}

.shop3-carousel-frame {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 32px;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 30px 80px rgba(2,6,23,.34);
  backdrop-filter: blur(22px);
}

.shop3-carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .55s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}

.shop3-carousel-slide.active {
  opacity: 1;
  transform: scale(1);
}

.shop3-carousel-slide img,
.shop3-carousel-placeholder {
  width: 100%;
  height: 100%;
  min-height: 390px;
  object-fit: cover;
}

.shop3-carousel-placeholder {
  display: grid;
  place-items: center;
  color: #bfdbfe;
  background: linear-gradient(135deg, rgba(37,99,235,.32), rgba(124,58,237,.34));
  font-size: 82px;
}

.shop3-carousel-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 20%, rgba(2,6,23,.72));
}

.shop3-slide-copy {
  position: absolute;
  z-index: 2;
  left: 22px;
  right: 22px;
  bottom: 22px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 22px;
  background: rgba(2,6,23,.46);
  backdrop-filter: blur(18px);
}

.shop3-slide-copy small {
  color: #93c5fd;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.shop3-slide-copy strong {
  display: block;
  margin-top: 5px;
  color: #fff;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.1;
  letter-spacing: -.04em;
}

.shop3-slide-copy span {
  display: block;
  margin-top: 6px;
  color: #dbeafe;
  font-size: 13px;
  line-height: 1.55;
}

.shop3-slide-copy a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  min-height: 40px;
  padding: 10px 13px;
  border-radius: 13px;
  color: #111827;
  background: #fff;
  font-size: 12px;
  font-weight: 950;
}

.shop3-carousel-dots {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: -16px;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
  padding: 8px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(15,23,42,.76);
  backdrop-filter: blur(14px);
}

.shop3-carousel-dots button {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  cursor: pointer;
  transition: .2s ease;
}

.shop3-carousel-dots button.active {
  width: 28px;
  background: #fff;
}

.shop3-hero-bottom {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr)) minmax(260px, 1.6fr);
  gap: 12px;
  margin-top: 42px;
}

.shop3-stat-card,
.shop3-deal-card {
  min-height: 92px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 16px;
  background: rgba(255,255,255,.09);
  backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.shop3-stat-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  column-gap: 12px;
}

.shop3-stat-card i {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #22d3ee);
}

.shop3-stat-card span {
  color: #fff;
  font-size: 20px;
  font-weight: 950;
}

.shop3-stat-card small {
  color: #aebbd0;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.shop3-deal-card {
  display: grid;
  grid-template-columns: 72px 1fr 42px;
  align-items: center;
  gap: 14px;
}

.shop3-deal-art {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255,255,255,.12);
}

.shop3-deal-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop3-deal-art i {
  color: #93c5fd;
  font-size: 30px;
}

.shop3-deal-card small {
  display: block;
  color: #93c5fd;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.shop3-deal-card strong {
  display: block;
  color: #fff;
  font-size: 15px;
  line-height: 1.3;
}

.shop3-deal-card span {
  display: block;
  color: #facc15;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 950;
}

.shop3-deal-card > a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: #fff;
  background: rgba(255,255,255,.12);
}

.shop3-category-runway {
  position: sticky;
  top: 72px;
  z-index: 20;
  border-bottom: 1px solid rgba(226,232,240,.8);
  background: rgba(248,250,252,.82);
  backdrop-filter: blur(18px);
}

.shop3-category-runway .container {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-top: 13px;
  padding-bottom: 13px;
  scrollbar-width: none;
}

.shop3-category-runway .container::-webkit-scrollbar {
  display: none;
}

.shop3-category-runway a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 8px 13px;
  color: #475569;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15,23,42,.045);
  font-size: 13px;
  font-weight: 900;
}

.shop3-category-runway a i {
  color: #7c3aed;
}

.shop3-category-runway a strong {
  min-width: 25px;
  padding: 2px 7px;
  border-radius: 999px;
  color: #64748b;
  background: #f1f5f9;
  text-align: center;
  font-size: 11px;
}

.shop3-category-runway a:hover,
.shop3-category-runway a.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  transform: translateY(-1px);
}

.shop3-category-runway a:hover i,
.shop3-category-runway a.active i,
.shop3-category-runway a:hover strong,
.shop3-category-runway a.active strong {
  color: #fff;
}

.shop3-category-runway a:hover strong,
.shop3-category-runway a.active strong {
  background: rgba(255,255,255,.18);
}

.shop3-featured {
  border: 0;
  background: linear-gradient(90deg, #0f172a, #1e1b4b, #0f172a);
}

.shop3-featured .shop2-strip {
  padding: 15px 0;
}

.shop3-featured .shop2-strip button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border-color: rgba(255,255,255,.13);
  background: rgba(255,255,255,.08);
  color: #e5e7eb;
  transition: .2s ease;
}

.shop3-featured .shop2-strip button:hover:not(:disabled) {
  transform: translateY(-2px);
  background: rgba(255,255,255,.14);
}

.shop2-section {
  background:
    radial-gradient(circle at 0 0, rgba(124,58,237,.08), transparent 26%),
    linear-gradient(180deg, #f8fafc, #eef2f7);
}

.shop2-layout {
  gap: 26px;
}

.shop2-sidebar {
  top: 132px;
}

.shop3-filter-summary,
.shop3-promise {
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 16px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 14px 34px rgba(15,23,42,.06);
}

.shop3-filter-summary {
  display: grid;
  gap: 8px;
}

.shop3-filter-summary small {
  display: block;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.shop3-filter-summary strong {
  display: block;
  color: #0f172a;
  font-size: 16px;
  line-height: 1.2;
}

.shop3-filter-summary span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 7px 10px;
  border-radius: 999px;
  color: #5b21b6;
  background: #f3e8ff;
  font-size: 12px;
  font-weight: 850;
}

.shop3-filter-summary a {
  color: #2563eb;
  font-size: 12px;
  font-weight: 950;
}

.shop2-box,
.shop2-help,
.shop2-product,
.shop2-empty {
  border-radius: 20px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 36px rgba(15,23,42,.06);
}

.shop2-box {
  padding: 16px;
}

.shop2-box h3,
.shop2-help h3 {
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.shop2-box a {
  min-height: 42px;
  border-radius: 14px;
}

.shop2-box a:hover,
.shop2-box a.active {
  background: linear-gradient(90deg, #eef2ff, #f8fafc);
}

.shop2-help {
  overflow: hidden;
  position: relative;
  padding: 20px;
}

.shop2-help::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -60px;
  top: -50px;
  border-radius: 50%;
  background: rgba(37,99,235,.12);
}

.shop3-promise {
  display: grid;
  gap: 10px;
}

.shop3-promise span {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #475569;
  font-size: 12px;
  font-weight: 850;
}

.shop3-promise i {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #2563eb;
  background: #eff6ff;
}

.shop2-results {
  align-items: center;
  padding: 18px;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 14px 34px rgba(15,23,42,.055);
}

.shop2-results h2 {
  margin: 2px 0 2px;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: -.04em;
}

.shop2-results p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

.shop3-view-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.shop3-view-controls button,
.shop3-view-controls a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 42px;
  min-height: 42px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  color: #475569;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
}

.shop3-view-controls button.active,
.shop3-view-controls button:hover,
.shop3-view-controls a:hover {
  color: #fff;
  border-color: transparent;
  background: #111827;
}

.shop2-grid {
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 18px;
}

.shop3-product {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 24px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.shop3-product:hover {
  transform: translateY(-7px);
  border-color: rgba(124,58,237,.28);
  box-shadow: 0 28px 70px rgba(15,23,42,.13);
}

.shop3-card-glow {
  position: absolute;
  inset: -1px;
  z-index: -1;
  opacity: 0;
  background: linear-gradient(135deg, rgba(124,58,237,.24), rgba(34,211,238,.2));
  transition: opacity .25s ease;
}

.shop3-product:hover .shop3-card-glow {
  opacity: 1;
}

.shop2-product-media {
  overflow: hidden;
  border-radius: 22px 22px 0 0;
  background:
    radial-gradient(circle at 26% 18%, rgba(255,255,255,.8), transparent 20%),
    linear-gradient(135deg, #eef2ff, #f8fafc);
}

.shop3-image-link {
  display: block;
  width: 100%;
  height: 100%;
}

.shop2-product-media img,
.shop2-placeholder {
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}

.shop3-product:hover .shop2-product-media img,
.shop3-product:hover .shop2-placeholder {
  transform: scale(1.06) rotate(.4deg);
}

.shop3-media-actions {
  position: absolute;
  z-index: 4;
  right: 12px;
  top: 12px;
  display: flex;
  gap: 7px;
}

.shop3-icon-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 14px;
  color: #111827;
  background: rgba(255,255,255,.86);
  box-shadow: 0 10px 24px rgba(15,23,42,.12);
  backdrop-filter: blur(14px);
  cursor: pointer;
}

.shop3-icon-btn:hover,
.shop3-icon-btn.active {
  color: #fff;
  background: #7c3aed;
}

.shop3-badge-stack {
  position: absolute;
  z-index: 4;
  left: 12px;
  top: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.shop3-badge-stack .shop2-discount,
.shop3-badge-stack .shop2-out,
.shop3-mini-badge {
  position: static;
  inset: auto;
  display: inline-flex;
  width: fit-content;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 950;
  box-shadow: 0 10px 22px rgba(15,23,42,.14);
}

.shop3-mini-badge {
  color: #065f46;
  background: #bbf7d0;
}

.shop2-product-body {
  padding: 17px;
}

.shop2-product-top span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #5b21b6;
}

.shop3-rating {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
}

.shop3-rating span {
  color: #f59e0b;
  font-size: 12px;
  letter-spacing: -1px;
}

.shop3-rating strong {
  color: #0f172a;
  font-size: 12px;
  font-weight: 950;
}

.shop3-rating em {
  color: #94a3b8;
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.shop3-stock-line {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.shop3-stock-line div {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.shop3-stock-line i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #84cc16, #f59e0b);
}

.shop3-stock-line span {
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
}

.shop3-card-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.shop3-compare {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.shop3-compare input {
  accent-color: #7c3aed;
}

.shop3-add-btn {
  min-height: 42px;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #7c3aed, #2563eb) !important;
  box-shadow: 0 12px 22px rgba(37,99,235,.2);
}

.shop2-grid.is-list {
  grid-template-columns: 1fr;
}

.shop2-grid.is-list .shop3-product {
  display: grid;
  grid-template-columns: 220px 1fr;
}

.shop2-grid.is-list .shop2-product-media {
  border-radius: 22px 0 0 22px;
  min-height: 100%;
}

.shop2-grid.is-list .shop2-product-body {
  display: grid;
  align-content: center;
}

.shop3-floating-cart {
  position: fixed;
  right: 20px;
  bottom: 92px;
  z-index: 120;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  box-shadow: 0 22px 42px rgba(37,99,235,.34);
}

.shop3-floating-cart span {
  position: absolute;
  right: -6px;
  top: -7px;
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #111827;
  background: #facc15;
  font-size: 11px;
  font-weight: 950;
}

.shop3-compare-bar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 130;
  width: min(920px, calc(100vw - 28px));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: minmax(160px, .7fr) 1fr auto;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px;
  padding: 12px 14px;
  color: #fff;
  background: rgba(15,23,42,.92);
  box-shadow: 0 22px 60px rgba(2,6,23,.3);
  backdrop-filter: blur(20px);
}

.shop3-compare-bar[hidden] {
  display: none;
}

.shop3-compare-bar small {
  color: #93c5fd;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.shop3-compare-bar strong {
  display: block;
  font-size: 14px;
}

.shop3-compare-items {
  display: flex;
  gap: 7px;
  overflow-x: auto;
}

.shop3-compare-items span {
  flex: 0 0 auto;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 8px 10px;
  border-radius: 999px;
  color: #dbeafe;
  background: rgba(255,255,255,.08);
  font-size: 12px;
  font-weight: 850;
}

.shop3-compare-bar button {
  border: 0;
  border-radius: 14px;
  padding: 10px 13px;
  color: #111827;
  background: #fff;
  font-weight: 950;
  cursor: pointer;
}

.shop3-modal-open {
  overflow: hidden;
}

.shop3-quick-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 20px;
}

.shop3-quick-modal[hidden] {
  display: none;
}

.shop3-quick-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2,6,23,.62);
  backdrop-filter: blur(12px);
}

.shop3-quick-card {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  display: grid;
  grid-template-columns: minmax(260px, .85fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 32px 90px rgba(2,6,23,.36);
}

.shop3-compare-modal-card {
  width: min(1120px, calc(100vw - 32px));
  max-width: none !important;
  max-height: min(820px, calc(100vh - 32px));
  grid-template-columns: 1fr !important;
}

.shop3-compare-modal-body {
  width: 100%;
  min-width: 0;
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: clamp(18px, 3vw, 30px);
}

.shop3-compare-modal-body h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 46px 20px 0;
  color: #0f172a;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.2;
}

.shop3-compare-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: left;
  border-radius: 16px;
  overflow: hidden;
}

.shop3-compare-table th,
.shop3-compare-table td {
  border: 1px solid #e2e8f0;
  padding: 14px;
  vertical-align: middle;
}

.shop3-compare-feature-cell {
  width: 150px;
  color: #1e293b;
  background: #f8fafc;
  font-weight: 900;
}

.shop3-compare-product-head {
  min-width: 190px;
  color: #1e293b;
  background: #f8fafc;
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
  word-break: break-word;
}

.shop3-compare-value-cell {
  color: #1e293b;
  background: #fff;
  line-height: 1.5;
  text-align: center;
  word-break: break-word;
}

.shop3-compare-value-cell strong {
  color: #172033;
}

.shop3-compare-img {
  display: block;
  width: min(116px, 100%);
  max-height: 94px;
  object-fit: contain;
  margin: 0 auto;
  border-radius: 12px;
}

.shop3-compare-pill,
.shop3-compare-discount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border-radius: 8px;
  font-weight: 900;
}

.shop3-compare-pill {
  color: #2563eb;
  background: #eff6ff;
}

.shop3-compare-price {
  color: var(--primary);
  font-size: 18px;
}

.shop3-compare-old-price {
  color: #94a3b8;
}

.shop3-compare-old-price.has-old-price {
  text-decoration: line-through;
}

.shop3-compare-discount {
  color: #ef4444;
  background: #fee2e2;
}

.shop3-compare-stock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 850;
  white-space: nowrap;
}

.shop3-compare-stock.in-stock { color: #10b981; }
.shop3-compare-stock.out-stock { color: #ef4444; }

.shop3-compare-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #2563eb;
  font-weight: 900;
  text-decoration: none;
}

.shop3-quick-close {
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 14px;
  color: #0f172a;
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 24px rgba(15,23,42,.14);
  cursor: pointer;
}

.shop3-quick-media {
  min-height: 420px;
  background: linear-gradient(135deg, #eef2ff, #f8fafc);
}

.shop3-quick-media img,
.shop3-quick-media .shop2-placeholder {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}

.shop3-quick-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 4vw, 42px);
}

.shop3-quick-info > span {
  width: fit-content;
  padding: 7px 11px;
  border-radius: 999px;
  color: #5b21b6;
  background: #f3e8ff;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.shop3-quick-info h3 {
  margin: 14px 0 8px;
  color: #0f172a;
  font-size: clamp(26px, 4vw, 42px);
  line-height: 1.05;
  letter-spacing: -.05em;
}

.shop3-quick-info p {
  color: #64748b;
  line-height: 1.75;
}

.shop3-quick-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 18px 0 12px;
}

.shop3-quick-price strong {
  color: #0f172a;
  font-size: 32px;
  font-weight: 950;
}

.shop3-quick-price del {
  color: #94a3b8;
  font-weight: 850;
}

.shop3-quick-stock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 9px 12px;
  border-radius: 14px;
  color: #047857;
  background: #dcfce7;
  font-size: 13px;
  font-weight: 950;
}

.shop3-quick-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.shop3-quick-actions button,
.shop3-quick-actions a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 15px;
  padding: 12px 18px;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  font: inherit;
  font-weight: 950;
  cursor: pointer;
}

.shop3-quick-actions a {
  color: #0f172a;
  background: #f1f5f9;
}

.shop3-quick-actions button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

body.dark .shop3-category-runway {
  border-color: #1f2937;
  background: rgba(15,23,42,.82);
}

body.dark .shop2-section {
  background:
    radial-gradient(circle at 0 0, rgba(124,58,237,.12), transparent 28%),
    #0b1120;
}

body.dark .shop3-filter-summary,
body.dark .shop3-promise,
body.dark .shop2-box,
body.dark .shop2-help,
body.dark .shop2-product,
body.dark .shop2-empty,
body.dark .shop2-results,
body.dark .shop3-view-controls button,
body.dark .shop3-view-controls a,
body.dark .shop3-category-runway a {
  border-color: #253044;
  background: rgba(17,24,39,.9);
}

body.dark .shop3-filter-summary strong,
body.dark .shop2-results h2,
body.dark .shop2-product h2,
body.dark .shop2-product h2 a,
body.dark .shop3-rating strong,
body.dark .shop2-price-row strong,
body.dark .shop3-quick-info h3,
body.dark .shop3-quick-price strong {
  color: #f8fafc;
}

body.dark .shop3-quick-card {
  border-color: #334155;
  background: #111827;
}

body.dark .shop3-quick-actions a {
  color: #f8fafc;
  background: #1f2937;
}

@keyframes shop3Spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 1180px) {
  .shop3-hero-bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .shop2-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 940px) {
  .shop3-hero-grid,
  .shop2-layout,
  .shop3-quick-card {
    grid-template-columns: 1fr;
  }
  .shop2-sidebar {
    position: static;
  }
  .shop3-quick-media,
  .shop3-quick-media img,
  .shop3-quick-media .shop2-placeholder {
    min-height: 300px;
  }
}

@media (max-width: 720px) {
  .shop3-hero {
    padding-top: 52px;
  }
  .shop3-hero h1 {
    font-size: 40px;
  }
  .shop3-search {
    grid-template-columns: 46px 1fr;
    border-radius: 18px;
  }
  .shop3-search::after {
    display: none;
  }
  .shop3-search button {
    grid-column: 1 / -1;
    width: calc(100% - 10px);
    margin: 0 5px 5px;
  }
  .shop3-hero-bottom,
  .shop2-grid,
  .shop2-grid.is-list .shop3-product {
    grid-template-columns: 1fr;
  }
  .shop2-grid.is-list .shop2-product-media {
    border-radius: 22px 22px 0 0;
  }
  .shop2-results {
    align-items: stretch;
  }
  .shop3-view-controls {
    justify-content: stretch;
  }
  .shop3-view-controls button,
  .shop3-view-controls a {
    flex: 1;
  }
  .shop3-compare-bar {
    grid-template-columns: 1fr;
  }
  .shop3-floating-cart {
    width: 54px;
    height: 54px;
    right: 14px;
  }
}

@media (max-width: 460px) {
  .shop3-hero h1 {
    font-size: 34px;
  }
  .shop3-stat-card,
  .shop3-deal-card,
  .shop3-filter-summary,
  .shop3-promise,
  .shop2-results {
    border-radius: 16px;
  }
  .shop3-deal-card {
    grid-template-columns: 60px 1fr;
  }
  .shop3-deal-card > a {
    grid-column: 1 / -1;
    width: 100%;
  }
  .shop3-quick-info {
    padding: 20px;
  }
  .shop3-quick-actions button,
  .shop3-quick-actions a {
    width: 100%;
  }
}

/* SHOP HERO FULLSCREEN BACKGROUND SLIDESHOW OVERRIDE */
.shop3-hero {
  min-height: calc(100vh - 74px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(92px, 13vh, 150px) 0 38px;
  background: #07111f;
}

.shop3-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2,6,23,.88) 0%, rgba(2,6,23,.64) 38%, rgba(2,6,23,.18) 74%, rgba(2,6,23,.5) 100%),
    linear-gradient(180deg, rgba(2,6,23,.38), rgba(2,6,23,.12) 48%, rgba(2,6,23,.82));
}

.shop3-full-hero-carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.shop3-full-hero-carousel .shop3-carousel-slide {
  position: absolute;
  inset: 0;
  min-height: 100%;
}

.shop3-full-hero-carousel .shop3-carousel-slide::after {
  display: none;
}

.shop3-full-hero-carousel .shop3-carousel-slide img,
.shop3-full-hero-carousel .shop3-carousel-placeholder {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.04) contrast(1.02);
}

.shop3-full-hero-carousel .shop3-carousel-slide.active img {
  animation: shop3HeroKenburns 8s ease-out both;
}

.shop3-slide-credit {
  position: absolute;
  right: clamp(18px, 4vw, 58px);
  bottom: clamp(76px, 9vh, 118px);
  z-index: 4;
  width: min(380px, calc(100% - 36px));
  padding: 18px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 24px;
  color: #fff;
  background: rgba(2,6,23,.42);
  box-shadow: 0 22px 60px rgba(2,6,23,.22);
  backdrop-filter: blur(18px);
}

.shop3-slide-credit small {
  color: #93c5fd;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.shop3-slide-credit strong {
  display: block;
  margin-top: 5px;
  font-size: clamp(19px, 2vw, 28px);
  line-height: 1.1;
  letter-spacing: -.035em;
}

.shop3-slide-credit span {
  display: block;
  margin-top: 7px;
  color: #dbeafe;
  font-size: 13px;
  line-height: 1.55;
}

.shop3-full-hero-carousel .shop3-carousel-dots {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 5;
  transform: translateX(-50%);
}

.shop3-hero-grid,
.shop3-hero-bottom {
  position: relative;
  z-index: 3;
}

.shop3-hero-grid {
  grid-template-columns: minmax(0, 780px);
  justify-content: flex-start !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.shop3-hero-grid > .shop3-hero-carousel {
  display: none !important;
}

@keyframes shop3SlideInLeft {
  from {
    opacity: 0;
    transform: translateX(-80px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.shop3-hero-copy {
  max-width: 780px;
  padding: clamp(20px, 3vw, 40px) clamp(20px, 3vw, 40px) clamp(20px, 3vw, 40px) clamp(20px, 5vw, 60px);
  border: 1px solid rgba(255,255,255,.14);
  border-left: none;
  border-radius: 0 30px 30px 0;
  background: rgba(2,6,23,.34);
  box-shadow: 0 30px 90px rgba(2,6,23,.22);
  backdrop-filter: blur(14px);
  margin-left: 0;
  margin-right: auto;
  opacity: 0;
  animation: shop3SlideInLeft 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.shop3-hero h1 {
  max-width: 720px;
  text-shadow: 0 10px 36px rgba(0,0,0,.34);
}

.shop3-hero p {
  color: #edf4ff;
  text-shadow: 0 8px 28px rgba(0,0,0,.34);
}

.shop3-hero-bottom {
  margin-top: clamp(24px, 5vh, 54px);
  max-width: 100% !important;
  margin-left: 0 !important;
  padding-left: clamp(20px, 5vw, 60px) !important;
  justify-content: flex-start !important;
  opacity: 0;
  animation: shop3SlideInLeft 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.15s;
}

@keyframes shop3HeroKenburns {
  from { transform: scale(1.04); }
  to { transform: scale(1.12); }
}

@media (max-width: 940px) {
  .shop3-hero {
    min-height: auto;
    padding-top: 88px;
  }
  .shop3-slide-credit {
    display: none;
  }
}

@media (max-width: 560px) {
  .shop3-hero-copy {
    padding: 18px;
    border-radius: 22px;
  }
}

@media (max-width: 640px) {
  .typing-achievement-item {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .typing-achievement-item .btn-primary {
    grid-column: 1 / -1;
    width: 100%;
  }

  .typing-certificate-actions {
    flex-direction: column;
  }

  .typing-certificate-actions > * {
    width: 100%;
  }

  .typing-certificate-paper {
    min-height: 0;
    padding: 30px 18px;
  }

  .typing-certificate-brand {
    flex-direction: column;
  }

  .typing-certificate-brand div {
    align-items: center;
    text-align: center;
  }

  .typing-certificate-heading h1,
  .typing-certificate-body h2 {
    font-size: 24px;
  }

  .typing-certificate-stats {
    grid-template-columns: 1fr;
  }

  .typing-certificate-stats div + div {
    border-top: 1px solid #bfdbfe;
    border-left: 0;
  }
}

@media print {
  body {
    background: #fff !important;
  }

  body > header,
  body > footer,
  .no-print,
  .chatbot-wrapper,
  .whatsapp-float,
  .back-to-top {
    display: none !important;
  }

  .typing-certificate-section {
    padding: 0 !important;
  }

  .typing-certificate-shell {
    width: 100%;
    max-width: none;
  }

  .typing-certificate-paper {
    min-height: 180mm;
    box-shadow: none;
    break-inside: avoid;
  }
}

/* SHOP HERO LEFT GLASS WAVE PANEL */
.shop3-hero .shop3-hero-grid {
  min-height: calc(100vh - 190px);
  align-items: stretch;
}

.shop3-hero .shop3-hero-copy {
  position: relative;
  width: min(720px, 52vw);
  max-width: none;
  min-height: calc(100vh - 190px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 5vw, 72px) clamp(26px, 4vw, 58px);
  border: 1px solid rgba(255,255,255,.16);
  border-left: 0;
  border-radius: 0 38px 38px 0;
  background:
    linear-gradient(90deg, rgba(2,6,23,.72), rgba(2,6,23,.48) 70%, rgba(2,6,23,.22)),
    rgba(255,255,255,.045);
  box-shadow:
    30px 0 90px rgba(2,6,23,.34),
    inset 1px 0 0 rgba(255,255,255,.08),
    inset -1px 0 0 rgba(255,255,255,.1);
  backdrop-filter: blur(24px) saturate(1.18);
  -webkit-backdrop-filter: blur(24px) saturate(1.18);
}

.shop3-hero .shop3-hero-copy::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.16), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 38%, rgba(255,255,255,.045));
}

.shop3-hero .shop3-hero-copy::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -74px;
  width: 92px;
  height: calc(100% + 2px);
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2,6,23,.42), rgba(2,6,23,.08)),
    rgba(255,255,255,.035);
  border-top: 1px solid rgba(255,255,255,.14);
  border-right: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.14);
  box-shadow: 28px 0 70px rgba(2,6,23,.22);
  backdrop-filter: blur(22px) saturate(1.14);
  -webkit-backdrop-filter: blur(22px) saturate(1.14);
  clip-path: polygon(
    0 0,
    62% 0,
    100% 8%,
    62% 17%,
    94% 29%,
    54% 43%,
    100% 58%,
    62% 72%,
    92% 86%,
    58% 100%,
    0 100%
  );
}

.shop3-hero .shop3-hero-copy > * {
  position: relative;
  z-index: 2;
}

.shop3-hero .shop3-hero-copy .shop2-kicker {
  width: fit-content;
}

.shop3-hero .shop3-hero-copy h1 {
  max-width: 620px;
}

.shop3-hero .shop3-hero-copy p,
.shop3-hero .shop3-search,
.shop3-hero .shop3-search-hints,
.shop3-hero .shop3-trust {
  max-width: 620px;
}

.shop3-hero .shop3-search {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

@media (max-width: 1180px) {
  .shop3-hero .shop3-hero-copy {
    width: min(680px, 66vw);
  }
}

@media (max-width: 940px) {
  .shop3-hero .shop3-hero-grid {
    min-height: auto;
  }
  .shop3-hero .shop3-hero-copy {
    width: 100%;
    min-height: auto;
    border-left: 1px solid rgba(255,255,255,.16);
    border-radius: 28px;
  }
  .shop3-hero .shop3-hero-copy::after {
    display: none;
  }
}

@media (max-width: 560px) {
  .shop3-hero .shop3-hero-copy {
    padding: 20px;
    border-radius: 22px;
  }
}

/* SHOP HERO SEARCH METRICS INSIDE LEFT PANEL */
.shop3-hero .shop3-hero-metrics {
  width: 100%;
  max-width: 620px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.shop3-hero .shop3-hero-metrics .shop3-stat-card,
.shop3-hero .shop3-hero-metrics .shop3-deal-card {
  min-height: 76px;
  padding: 12px;
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055)),
    rgba(15,23,42,.38);
  border-color: rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 14px 34px rgba(2,6,23,.16);
}

.shop3-hero .shop3-hero-metrics .shop3-stat-card {
  grid-template-columns: 36px 1fr;
  column-gap: 10px;
}

.shop3-hero .shop3-hero-metrics .shop3-stat-card i {
  width: 36px;
  height: 36px;
  border-radius: 13px;
  font-size: 14px;
}

.shop3-hero .shop3-hero-metrics .shop3-stat-card span {
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1;
}

.shop3-hero .shop3-hero-metrics .shop3-stat-card small {
  font-size: 9px;
  letter-spacing: .08em;
}

.shop3-hero .shop3-hero-metrics .shop3-deal-card {
  grid-column: 1 / -1;
  grid-template-columns: 56px 1fr 38px;
  min-height: 82px;
}

.shop3-hero .shop3-hero-metrics .shop3-deal-art {
  width: 56px;
  height: 56px;
  border-radius: 16px;
}

.shop3-hero .shop3-hero-metrics .shop3-deal-card strong {
  font-size: 14px;
}

.shop3-hero .shop3-hero-metrics .shop3-deal-card > a {
  width: 38px;
  height: 38px;
  border-radius: 13px;
}

@media (max-width: 1180px) {
  .shop3-hero .shop3-hero-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .shop3-hero .shop3-hero-metrics .shop3-deal-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .shop3-hero .shop3-hero-metrics {
    grid-template-columns: 1fr;
  }
}

/* SHOP HERO FINAL WATER-WAVE GLASS PANEL */
.shop3-hero {
  --shop3-header-offset: 70px;
  --shop3-wave-width: clamp(86px, 8vw, 132px);
  min-height: calc(100vh - var(--shop3-header-offset)) !important;
  min-height: calc(100svh - var(--shop3-header-offset)) !important;
  padding: 0 !important;
  align-items: stretch;
  justify-content: stretch;
}

.shop3-hero .shop3-full-hero-carousel {
  inset: 0;
}

.shop3-hero .shop3-hero-grid {
  min-height: calc(100vh - var(--shop3-header-offset));
  min-height: calc(100svh - var(--shop3-header-offset));
  align-items: stretch;
}

.shop3-hero .shop3-hero-copy {
  width: min(760px, 56vw);
  min-height: calc(100vh - var(--shop3-header-offset));
  min-height: calc(100svh - var(--shop3-header-offset));
  height: 100%;
  justify-content: center;
  padding-right: calc(clamp(26px, 4vw, 58px) + 28px);
  border-radius: 0;
  border-top: 0;
  border-bottom: 0;
  border-right: 0;
  background:
    linear-gradient(90deg, rgba(2,6,23,.74) 0%, rgba(2,6,23,.55) 58%, rgba(2,6,23,.20) 88%, rgba(2,6,23,0) 100%),
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.035));
  box-shadow:
    36px 0 96px rgba(2,6,23,.30),
    inset 1px 0 0 rgba(255,255,255,.10);
  backdrop-filter: blur(26px) saturate(1.2);
  -webkit-backdrop-filter: blur(26px) saturate(1.2);
}

.shop3-hero .shop3-hero-copy::before {
  border-radius: 0;
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.18), transparent 20%),
    radial-gradient(circle at 82% 48%, rgba(56,189,248,.13), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 40%, rgba(255,255,255,.045));
}

.shop3-hero .shop3-hero-copy::after {
  top: 0;
  right: calc(var(--shop3-wave-width) * -.72);
  width: var(--shop3-wave-width);
  height: 100%;
  border: 0;
  opacity: .9;
  clip-path: none;
  background:
    radial-gradient(ellipse at 12% 12%, rgba(255,255,255,.28), transparent 36%),
    radial-gradient(ellipse at 82% 30%, rgba(125,211,252,.34), transparent 42%),
    radial-gradient(ellipse at 38% 62%, rgba(34,211,238,.22), transparent 44%),
    radial-gradient(ellipse at 88% 88%, rgba(59,130,246,.20), transparent 42%),
    linear-gradient(90deg, rgba(2,6,23,.30), rgba(14,165,233,.20) 44%, rgba(255,255,255,.08) 74%, rgba(255,255,255,0));
  background-size: 120% 135%, 160% 160%, 145% 145%, 150% 160%, 100% 100%;
  background-position: 0% 0%, 40% 12%, 20% 72%, 80% 88%, 0 0;
  box-shadow:
    20px 0 70px rgba(14,165,233,.16),
    inset 16px 0 34px rgba(255,255,255,.08);
  backdrop-filter: blur(22px) saturate(1.22);
  -webkit-backdrop-filter: blur(22px) saturate(1.22);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%20100'%20preserveAspectRatio='none'%3E%3Cpath%20fill='black'%20d='M0%200H58C96%207%20107%2019%2080%2029C47%2042%20112%2050%2082%2064C54%2077%20103%2088%2074%20100H0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%20100'%20preserveAspectRatio='none'%3E%3Cpath%20fill='black'%20d='M0%200H58C96%207%20107%2019%2080%2029C47%2042%20112%2050%2082%2064C54%2077%20103%2088%2074%20100H0Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: shop3WaterWaveDrift 7s ease-in-out infinite alternate;
}

@keyframes shop3WaterWaveDrift {
  0% {
    background-position: 0% 0%, 40% 12%, 20% 72%, 80% 88%, 0 0;
    transform: translateX(0) scaleY(1);
  }
  50% {
    background-position: 22% 10%, 8% 28%, 60% 44%, 22% 70%, 0 0;
    transform: translateX(-7px) scaleY(1.018);
  }
  100% {
    background-position: 45% 4%, 70% 6%, 2% 84%, 94% 52%, 0 0;
    transform: translateX(4px) scaleY(.992);
  }
}

@media (max-width: 940px) {
  .shop3-hero {
    min-height: auto !important;
    padding: 86px 14px 28px !important;
  }

  .shop3-hero .shop3-hero-grid {
    min-height: auto;
    padding-left: 0 !important;
  }

  .shop3-hero .shop3-hero-copy {
    width: 100%;
    min-height: auto;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 28px;
    background:
      linear-gradient(135deg, rgba(2,6,23,.72), rgba(2,6,23,.36)),
      rgba(255,255,255,.06);
  }
}

/* SHOP HERO DESIGNER LIQUID GLASS EDGE REFINEMENT */
.shop3-hero {
  --shop3-wave-width: clamp(92px, 7vw, 126px);
}

.shop3-hero .shop3-hero-copy {
  background:
    linear-gradient(90deg, rgba(2,6,23,.80) 0%, rgba(2,6,23,.62) 58%, rgba(2,6,23,.34) 82%, rgba(2,6,23,0) 100%),
    linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.035));
  box-shadow:
    30px 0 94px rgba(2,6,23,.30),
    inset 1px 0 0 rgba(255,255,255,.11);
}

.shop3-hero .shop3-hero-copy::before {
  background:
    radial-gradient(circle at 20% 16%, rgba(255,255,255,.16), transparent 20%),
    radial-gradient(circle at 72% 52%, rgba(56,189,248,.11), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.075), transparent 44%, rgba(255,255,255,.04));
}

.shop3-hero .shop3-hero-copy::after {
  right: calc(var(--shop3-wave-width) * -.54);
  width: var(--shop3-wave-width);
  opacity: .86;
  transform: none !important;
  animation: none !important;
  background:
    linear-gradient(90deg, rgba(2,6,23,.40) 0%, rgba(14,165,233,.15) 46%, rgba(255,255,255,.10) 72%, rgba(255,255,255,0) 100%),
    radial-gradient(ellipse at 22% 18%, rgba(255,255,255,.24), transparent 34%),
    radial-gradient(ellipse at 62% 76%, rgba(125,211,252,.20), transparent 42%);
  background-size: 100% 100%;
  background-position: center;
  box-shadow:
    18px 0 58px rgba(8,47,73,.20),
    inset 14px 0 34px rgba(255,255,255,.07);
  filter: drop-shadow(16px 0 28px rgba(2,6,23,.18));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20140%20100'%20preserveAspectRatio='none'%3E%3Cpath%20fill='black'%20d='M0%200H58C95%209%20112%2026%2088%2042C57%2063%20108%2077%2070%20100H0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20140%20100'%20preserveAspectRatio='none'%3E%3Cpath%20fill='black'%20d='M0%200H58C95%209%20112%2026%2088%2042C57%2063%20108%2077%2070%20100H0Z'/%3E%3C/svg%3E");
}

/* SHOP HERO 4.0 - CLEAN CINEMATIC STOREFRONT */
.shop3-hero {
  min-height: calc(100vh - 70px) !important;
  min-height: calc(100svh - 70px) !important;
  display: grid !important;
  padding: 0 !important;
  overflow: hidden;
  background: #020617 !important;
}

.shop3-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 18%, rgba(59,130,246,.18), transparent 24%),
    linear-gradient(90deg, rgba(2,6,23,.90) 0%, rgba(2,6,23,.72) 34%, rgba(2,6,23,.30) 62%, rgba(2,6,23,.58) 100%),
    linear-gradient(180deg, rgba(2,6,23,.12), rgba(2,6,23,.76));
}

.shop3-hero .shop3-full-hero-carousel {
  inset: 0 !important;
}

.shop3-hero .shop3-full-hero-carousel .shop3-carousel-slide img,
.shop3-hero .shop3-full-hero-carousel .shop3-carousel-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.06) contrast(1.04);
}

.shop3-hero .shop3-slide-credit {
  display: none !important;
}

.shop3-hero .shop3-hero-grid {
  width: 100%;
  max-width: 1380px !important;
  min-height: calc(100vh - 70px) !important;
  min-height: calc(100svh - 70px) !important;
  display: grid;
  grid-template-columns: minmax(320px, 690px);
  align-items: center;
  justify-content: flex-start !important;
  margin: 0 auto !important;
  padding: clamp(22px, 4vw, 60px) clamp(16px, 5vw, 72px) !important;
}

.shop3-hero .shop3-hero-copy {
  width: 100% !important;
  max-width: 690px !important;
  min-height: auto !important;
  height: auto !important;
  justify-content: flex-start;
  padding: clamp(26px, 4vw, 48px) !important;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 34px !important;
  background:
    linear-gradient(145deg, rgba(15,23,42,.78), rgba(15,23,42,.42)),
    rgba(255,255,255,.07) !important;
  box-shadow:
    0 34px 90px rgba(2,6,23,.44),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
  backdrop-filter: blur(24px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.18) !important;
}

.shop3-hero .shop3-hero-copy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit !important;
  background:
    radial-gradient(circle at 14% 10%, rgba(255,255,255,.18), transparent 21%),
    linear-gradient(120deg, rgba(255,255,255,.11), transparent 34%, rgba(59,130,246,.10) 72%, transparent);
}

.shop3-hero .shop3-hero-copy::after {
  display: none !important;
}

.shop3-hero .shop3-hero-copy > * {
  position: relative;
  z-index: 2;
}

.shop3-hero .shop2-kicker {
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  color: #dbeafe;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.shop3-hero .shop3-hero-copy h1 {
  max-width: 640px;
  margin-top: 20px;
  font-size: clamp(38px, 5.3vw, 72px);
  line-height: .94;
  letter-spacing: -.075em;
  text-shadow: 0 16px 45px rgba(0,0,0,.34);
}

.shop3-hero .shop3-hero-copy p {
  max-width: 590px;
  margin-top: 18px;
  color: rgba(226,232,240,.92);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.75;
}

.shop3-hero .shop3-search {
  max-width: 620px;
  margin-top: 24px;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 20px 42px rgba(2,6,23,.20);
}

.shop3-hero-actions {
  max-width: 620px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.shop3-hero-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.shop3-hero-actions a:first-child {
  color: #0f172a;
  background: #fff;
  box-shadow: 0 14px 30px rgba(15,23,42,.20);
}

.shop3-hero-actions a:last-child {
  color: #e0f2fe;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
}

.shop3-hero-actions a:hover {
  transform: translateY(-2px);
}

.shop3-hero .shop3-hero-metrics {
  max-width: 620px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.shop3-hero .shop3-hero-metrics .shop3-stat-card,
.shop3-hero .shop3-hero-metrics .shop3-deal-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.06)),
    rgba(15,23,42,.30) !important;
  border-color: rgba(255,255,255,.16);
}

.shop3-hero .shop3-hero-metrics .shop3-deal-card {
  grid-column: 1 / -1;
}

.shop3-full-hero-carousel .shop3-carousel-dots {
  bottom: 18px !important;
  background: rgba(2,6,23,.58);
}

@media (max-width: 940px) {
  .shop3-hero {
    min-height: auto !important;
    padding: 24px 0 !important;
  }

  .shop3-hero .shop3-hero-grid {
    min-height: auto !important;
    grid-template-columns: 1fr;
    padding: 22px 14px !important;
  }

  .shop3-hero .shop3-hero-copy {
    border-radius: 26px !important;
  }
}

@media (max-width: 560px) {
  .shop3-hero .shop3-hero-metrics {
    grid-template-columns: 1fr;
  }

  .shop3-hero .shop3-search {
    grid-template-columns: 42px 1fr;
  }

  .shop3-hero .shop3-search button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* HOME HERO - WAVE IMAGE BACKGROUND + CARD LAYOUT */
.home-visual-hero.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(42px, 5.5vw, 66px) 0 clamp(34px, 5.5vw, 58px) !important;
  background-color: transparent !important;
  background-image: url("../images/home-hero-wave-bg.png") !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
}

.home-visual-hero.hero::before {
  display: none !important;
}

.home-visual-hero.hero::after {
  display: none !important;
}

.home-visual-hero .hero-inner {
  display: block !important;
}

.home-visual-hero .hero-kickers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}

.home-visual-hero .hero-kickers .hero-badge,
.home-visual-hero .hero-kickers span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  margin: 0;
  padding: 7px 13px;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 999px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
  color: #31506f;
  font-size: 12px;
  font-weight: 800;
  animation: none !important;
}

.home-visual-hero .hero-kickers .hero-badge {
  border-color: rgba(16, 185, 129, .32);
  color: #059669;
}

.home-visual-hero .hero-kickers i {
  font-size: 11px;
}

.home-visual-hero .hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(290px, .72fr) minmax(260px, .65fr);
  grid-template-areas:
    "main main track"
    "services visit certificate";
  gap: 14px;
  align-items: stretch;
}

.home-visual-hero .hero-main-card,
.home-visual-hero .hero-track-card,
.home-visual-hero .hero-info-card {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: rgba(255, 255, 255, .82) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}

.home-visual-hero .hero-main-card:hover,
.home-visual-hero .hero-track-card:hover,
.home-visual-hero .hero-info-card:hover {
  transform: translateY(-4px);
  border-color: #2563eb;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 12px 32px rgba(37, 99, 235, .14);
}

.home-visual-hero .hero-main-card {
  grid-area: main;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 330px;
  padding: clamp(22px, 2.6vw, 28px);
  color: #0f172a;
}

.home-visual-hero .hero-title {
  max-width: 800px;
  margin: 0 0 16px;
  color: #0f172a !important;
  font-size: clamp(32px, 4.1vw, 44px) !important;
  line-height: 1.08;
  letter-spacing: 0;
}

.home-visual-hero .hero-desc {
  max-width: 710px;
  margin: 0 0 20px;
  color: #52627a !important;
  font-size: clamp(14px, 1.25vw, 16px);
  line-height: 1.62;
}

.home-visual-hero .hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
}

.home-visual-hero .hero-btns a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
}

.home-visual-hero .hero-main-card .btn-primary {
  border: 1px solid #2563eb;
  color: #fff;
  background: #2563eb;
  box-shadow: 0 4px 12px rgba(37, 99, 235, .22);
}

.home-visual-hero .hero-main-card .btn-outline {
  color: #2563eb;
  border-color: #bfdbfe;
  background: rgba(255, 255, 255, .72);
}

.home-visual-hero .hero-main-card .hero-whatsapp {
  color: #047857;
  border-color: #a7f3d0;
  background: rgba(236, 253, 245, .82);
}

.home-visual-hero .hero-stats {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.home-visual-hero .hero-stats .stat-item {
  min-height: 58px;
  justify-content: center;
  padding: 9px 12px;
  color: #0f172a;
  text-align: left;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.home-visual-hero .hero-stats .stat-item:hover {
  transform: translateY(-3px);
  border-color: #2563eb;
  box-shadow: 0 12px 28px rgba(37, 99, 235, .12);
}

.home-visual-hero .hero-stats .stat-item:last-child {
  border-right: 1px solid #e2e8f0;
}

.home-visual-hero .hero-stats .stat-num {
  color: #2563eb;
  font-size: clamp(21px, 2.2vw, 27px);
  text-shadow: none;
}

.home-visual-hero .hero-stats .stat-label {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.home-visual-hero .hero-track-card {
  grid-area: track;
  position: relative !important;
  display: flex !important;
  height: auto !important;
  min-height: 330px;
  flex-direction: column;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 22px;
}

.home-visual-hero .hero-card-label,
.home-visual-hero .hero-track-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.home-visual-hero .hero-card-label {
  justify-content: space-between;
  margin-bottom: 22px;
  color: #3b6fa6;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.home-visual-hero .hero-card-label em {
  padding: 5px 9px;
  border-radius: 999px;
  color: #059669;
  background: #dcfce7;
  font-size: 10px;
  font-style: normal;
  text-transform: none;
}

.home-visual-hero .hero-track-head {
  margin-bottom: 18px;
}

.home-visual-hero .hcard-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 10px;
  color: #2563eb;
  background: #eff6ff;
}

.home-visual-hero .hero-track-head strong {
  display: block;
  color: #172033;
  font-size: 17px;
  font-weight: 900;
}

.home-visual-hero .hero-track-head p,
.home-visual-hero .hero-track-list {
  color: #66758d;
  font-size: 13px;
  font-weight: 700;
}

.home-visual-hero .hero-track-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0 0 0 17px;
}

.home-visual-hero .hero-track-list li::marker {
  color: #3b82f6;
}

.home-visual-hero .hero-card-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 26px;
  color: #18213a;
  font-size: 13px;
  font-weight: 900;
}

.home-visual-hero .hero-info-card {
  min-height: 145px;
  padding: 18px;
}

.home-visual-hero .hero-info-card h3 {
  margin: 0 0 8px;
  color: #1f2a44;
  font-size: 18px;
  line-height: 1.35;
}

.home-visual-hero .hero-info-card p {
  margin: 0;
  color: #65758f;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

.home-visual-hero .hero-services-mini {
  grid-area: services;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.home-visual-hero .hero-service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.home-visual-hero .hero-service-tags span {
  padding: 6px 11px;
  border-radius: 999px;
  color: #51647d;
  background: rgba(255, 255, 255, .9);
  font-size: 11px;
  font-weight: 800;
}

.home-visual-hero .hero-visit-card {
  grid-area: visit;
}

.home-visual-hero .hero-visit-card > span {
  display: block;
  margin-bottom: 12px;
  color: #4776ad;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.home-visual-hero .hero-visit-card h3 {
  font-size: 18px;
}

.home-visual-hero .hero-visit-card p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.home-visual-hero .hero-visit-card a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  margin-top: 17px;
  border-radius: 8px;
  color: #fff;
  background: #2563eb;
  font-size: 13px;
  font-weight: 900;
}

.home-visual-hero .hero-certificate-card {
  grid-area: certificate;
  color: #0f172a;
}

.home-visual-hero .hero-certificate-card h3 {
  color: #1f2a44;
}

.home-visual-hero .hero-certificate-card p {
  color: #65758f;
}

.home-visual-hero .hero-certificate-card a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: #2563eb;
  font-size: 13px;
  font-weight: 900;
}

.home-visual-hero .hero-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 13px;
  color: #facc15;
  font-size: 12px;
}

@media (max-width: 1080px) {
  .home-visual-hero .hero-layout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, .78fr);
    grid-template-areas:
      "main track"
      "services visit"
      "certificate certificate";
  }
}

@media (max-width: 820px) {
  .home-visual-hero.hero {
    padding: 36px 0 46px !important;
  }

  .home-visual-hero .hero-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "track"
      "services"
      "visit"
      "certificate";
  }

  .home-visual-hero .hero-main-card {
    min-height: auto;
    padding: 26px;
  }

  .home-visual-hero .hero-track-card {
    min-height: auto;
  }

  .home-visual-hero .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-visual-hero .hero-stats .stat-item {
    border-right: 0;
    border: 1px solid #e2e8f0;
  }

  .home-visual-hero .hero-stats .stat-item:nth-last-child(-n+2) {
    border: 1px solid #e2e8f0;
  }
}

@media (max-width: 560px) {
  .home-visual-hero .hero-kickers {
    gap: 7px;
  }

  .home-visual-hero .hero-kickers .hero-badge,
  .home-visual-hero .hero-kickers span {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .home-visual-hero .hero-title {
    font-size: 32px !important;
  }

  .home-visual-hero .hero-desc {
    font-size: 14px;
  }

  .home-visual-hero .hero-btns a {
    width: 100%;
  }

  .home-visual-hero .hero-stats {
    grid-template-columns: 1fr;
  }

  .home-visual-hero .hero-stats .stat-item,
  .home-visual-hero .hero-stats .stat-item:nth-last-child(-n+2) {
    border: 1px solid #e2e8f0;
  }

  .home-visual-hero .hero-stats .stat-item:last-child {
    border: 1px solid #e2e8f0;
  }
}

/* ===========================
   NON-SHOP INNER PAGE HERO
   Excluded: shop flow, govt jobs, design tools and typing studio.
=========================== */
body:not(.page-shop):not(.view-govt-jobs):not(.view-design-tools):not(.view-typing) .page-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(44px, 6vw, 76px) 0 !important;
  border-bottom: 1px solid rgba(148, 163, 184, .28);
  background-color: #f8fafc !important;
  background-image: url("../images/home-hero-wave-bg.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
}

body:not(.page-shop):not(.view-govt-jobs):not(.view-design-tools):not(.view-typing) .page-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  background: rgba(248, 250, 252, .52);
  pointer-events: none;
}

body:not(.page-shop):not(.view-govt-jobs):not(.view-design-tools):not(.view-typing) .page-banner .container {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: minmax(0, 1.7fr) minmax(245px, .65fr);
  grid-template-areas:
    "content breadcrumb"
    "content trust";
  align-items: stretch;
  gap: 14px;
}

body:not(.page-shop):not(.view-govt-jobs):not(.view-design-tools):not(.view-typing) .page-banner .banner-content,
body:not(.page-shop):not(.view-govt-jobs):not(.view-design-tools):not(.view-typing) .page-banner .breadcrumb,
body:not(.page-shop):not(.view-govt-jobs):not(.view-design-tools):not(.view-typing) .page-banner .container::after {
  border: 1px solid rgba(203, 213, 225, .88);
  border-radius: 12px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .07);
  backdrop-filter: blur(8px);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

body:not(.page-shop):not(.view-govt-jobs):not(.view-design-tools):not(.view-typing) .page-banner .banner-content {
  grid-area: content;
  display: flex;
  min-height: 230px;
  padding: clamp(26px, 4vw, 44px);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

body:not(.page-shop):not(.view-govt-jobs):not(.view-design-tools):not(.view-typing) .page-banner .breadcrumb {
  grid-area: breadcrumb;
  align-content: center;
  align-items: center;
  align-self: stretch;
  padding: 18px 20px;
  color: #64748b;
}

body:not(.page-shop):not(.view-govt-jobs):not(.view-design-tools):not(.view-typing) .page-banner .container::after {
  content: "ISO 9001:2015 Certified\A CSC & Digital Seva Available\A Wazirabad, Delhi";
  grid-area: trust;
  display: flex;
  min-height: 112px;
  padding: 18px 20px;
  align-items: center;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.8;
  white-space: pre-line;
}

body:not(.page-shop):not(.view-govt-jobs):not(.view-design-tools):not(.view-typing) .page-banner .banner-content:hover,
body:not(.page-shop):not(.view-govt-jobs):not(.view-design-tools):not(.view-typing) .page-banner .breadcrumb:hover,
body:not(.page-shop):not(.view-govt-jobs):not(.view-design-tools):not(.view-typing) .page-banner .container:hover::after {
  transform: translateY(-3px);
  border-color: rgba(96, 165, 250, .75);
  box-shadow: 0 18px 38px rgba(15, 23, 42, .11);
}

body:not(.page-shop):not(.view-govt-jobs):not(.view-design-tools):not(.view-typing) .page-banner .banner-content h1 {
  max-width: 850px;
  margin: 0;
  color: #0f172a;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.12;
}

body:not(.page-shop):not(.view-govt-jobs):not(.view-design-tools):not(.view-typing) .page-banner .banner-content p {
  max-width: 800px;
  margin-top: 14px;
  color: #52647c;
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.7;
}

body:not(.page-shop):not(.view-govt-jobs):not(.view-design-tools):not(.view-typing) .page-banner .banner-content p + p {
  margin-top: 10px;
}

body:not(.page-shop):not(.view-govt-jobs):not(.view-design-tools):not(.view-typing) .page-banner .section-tag {
  margin-bottom: 14px;
}

body.dark:not(.page-shop):not(.view-govt-jobs):not(.view-design-tools):not(.view-typing) .page-banner::before {
  background: rgba(2, 6, 23, .68);
}

body.dark:not(.page-shop):not(.view-govt-jobs):not(.view-design-tools):not(.view-typing) .page-banner .banner-content,
body.dark:not(.page-shop):not(.view-govt-jobs):not(.view-design-tools):not(.view-typing) .page-banner .breadcrumb,
body.dark:not(.page-shop):not(.view-govt-jobs):not(.view-design-tools):not(.view-typing) .page-banner .container::after {
  border-color: rgba(71, 85, 105, .82);
  background: rgba(15, 23, 42, .9);
}

body.dark:not(.page-shop):not(.view-govt-jobs):not(.view-design-tools):not(.view-typing) .page-banner .banner-content h1 {
  color: #f8fafc;
}

body.dark:not(.page-shop):not(.view-govt-jobs):not(.view-design-tools):not(.view-typing) .page-banner .banner-content p,
body.dark:not(.page-shop):not(.view-govt-jobs):not(.view-design-tools):not(.view-typing) .page-banner .container::after {
  color: #cbd5e1;
}

@media (max-width: 780px) {
  body:not(.page-shop):not(.view-govt-jobs):not(.view-design-tools):not(.view-typing) .page-banner {
    padding: 34px 0 42px !important;
    background-position: center top !important;
  }

  body:not(.page-shop):not(.view-govt-jobs):not(.view-design-tools):not(.view-typing) .page-banner .container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "content"
      "breadcrumb"
      "trust";
  }

  body:not(.page-shop):not(.view-govt-jobs):not(.view-design-tools):not(.view-typing) .page-banner .banner-content {
    min-height: 0;
    padding: 24px 20px;
  }

  body:not(.page-shop):not(.view-govt-jobs):not(.view-design-tools):not(.view-typing) .page-banner .banner-content h1 {
    font-size: clamp(28px, 9vw, 38px);
  }

  body:not(.page-shop):not(.view-govt-jobs):not(.view-design-tools):not(.view-typing) .page-banner .container::after {
    min-height: 0;
  }
}

/* SHOP FLOW HERO - uses the first active Shop Hero banner from admin. */
.page-shop .shop-flow-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 500px;
  display: flex;
  align-items: center;
  padding: clamp(58px, 7vw, 88px) 0 !important;
  border-bottom: 1px solid rgba(148, 163, 184, .22);
  background-color: #020617 !important;
  background-image:
    linear-gradient(90deg, rgba(2, 6, 23, .94) 0%, rgba(2, 6, 23, .82) 43%, rgba(2, 6, 23, .26) 72%, rgba(2, 6, 23, .12) 100%),
    linear-gradient(180deg, rgba(2, 6, 23, .06), rgba(2, 6, 23, .48)),
    var(--shop-flow-background, radial-gradient(circle at 72% 28%, #1d4ed8, #020617 58%)) !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-position: center, center, right 5% center !important;
  background-size: 100% 100%, 100% 100%, auto 138% !important;
}

.page-shop .shop-flow-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  background: radial-gradient(circle at 76% 20%, rgba(59, 130, 246, .18), transparent 28%);
  pointer-events: none;
}

.page-shop .shop-flow-hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.page-shop .shop-flow-hero .banner-content {
  width: min(100%, 720px);
  padding: clamp(25px, 4vw, 42px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(15, 23, 42, .82), rgba(15, 23, 42, .48));
  box-shadow: 0 30px 76px rgba(2, 6, 23, .4), inset 0 1px 0 rgba(255, 255, 255, .13);
  backdrop-filter: blur(20px) saturate(1.12);
  -webkit-backdrop-filter: blur(20px) saturate(1.12);
}

.page-shop .shop-flow-hero .section-tag {
  margin-bottom: 15px;
  border-color: rgba(255, 255, 255, .18);
  color: #dbeafe;
  background: rgba(255, 255, 255, .1);
}

.page-shop .shop-flow-hero .banner-content h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.04;
  text-shadow: 0 14px 36px rgba(0, 0, 0, .3);
}

.page-shop .shop-flow-hero .banner-content p {
  max-width: 620px;
  margin-top: 14px;
  color: rgba(226, 232, 240, .92);
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.7;
}

.page-shop .shop-flow-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}

.page-shop .shop-flow-highlights span {
  display: inline-flex;
  min-height: 36px;
  padding: 8px 12px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  color: #e2e8f0;
  background: rgba(255, 255, 255, .09);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.page-shop .shop-flow-highlights i {
  color: #93c5fd;
}

.page-shop .shop-flow-hero .breadcrumb {
  max-width: 360px;
  padding: 16px 18px;
  flex-wrap: wrap;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  color: #cbd5e1;
  background: rgba(15, 23, 42, .68);
  box-shadow: 0 20px 46px rgba(2, 6, 23, .3);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.page-shop .shop-flow-hero .breadcrumb a {
  color: #bfdbfe;
}

.page-shop .shop-flow-hero .banner-content,
.page-shop .shop-flow-hero .breadcrumb {
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.page-shop .shop-flow-hero .banner-content:hover,
.page-shop .shop-flow-hero .breadcrumb:hover {
  transform: translateY(-3px);
  border-color: rgba(147, 197, 253, .62);
  box-shadow: 0 34px 82px rgba(2, 6, 23, .46), inset 0 1px 0 rgba(255, 255, 255, .16);
}

@media (max-width: 780px) {
  .page-shop .shop-flow-hero {
    min-height: 0;
    padding: 34px 0 42px !important;
    background-position: center, center, center top !important;
    background-size: 100% 100%, 100% 100%, auto 112% !important;
  }

  .page-shop .shop-flow-hero .container {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .page-shop .shop-flow-hero .banner-content {
    padding: 24px 20px;
    border-radius: 18px;
  }

  .page-shop .shop-flow-hero .breadcrumb {
    max-width: none;
  }

  .page-shop .shop-flow-highlights {
    gap: 7px;
    margin-top: 18px;
  }

  .page-shop .shop-flow-highlights span {
    flex: 1 1 145px;
    justify-content: center;
    text-align: center;
  }
}