/* ==========================================================================
   NEWTON CLASSES - MODERN ULTRA-CLEAN ENHANCEMENTS (JHAKAAS STYLING)
   ========================================================================== */

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

:root {
  --primary: #1e3c72;
  --primary-light: #2a5298;
  --primary-gradient: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  --accent: #f97316;
  --accent-hover: #ea580c;
  --accent-gradient: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  --accent-glow: 0 8px 24px rgba(249, 115, 22, 0.35);
  
  --dark-bg: #0f172a;
  --dark-card: #1e293b;
  --dark-surface: #090e17;
  
  --text-main: #1e293b;
  --text-muted: #64748b;
  --text-light: #94a3b8;
  
  --bg-subtle: #f8fafc;
  --border-light: #e2e8f0;
  --border-hover: #cbd5e1;
  
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;
  
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 20px -4px rgba(0, 0, 0, 0.08), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 20px 35px -8px rgba(0, 0, 0, 0.12), 0 10px 15px -4px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 25px 45px -10px rgba(30, 60, 114, 0.16);
  
  --transition-fast: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   Global Typography & Smoothness
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

section, [id] {
  scroll-margin-top: 90px;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: var(--text-main);
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.65;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.title, .menuzord-brand, .font-heading {
  font-family: 'Outfit', sans-serif !important;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #0f172a;
}

/* Modern Scrollbar */
::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-light) 100%);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* Text Selection */
::selection {
  background-color: var(--accent);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Top Bar Enhancements
   -------------------------------------------------------------------------- */
.header-top {
  background: linear-gradient(90deg, #090e17 0%, #1e293b 100%) !important;
  border-top: 3px solid var(--accent) !important;
  padding: 8px 0 !important;
  font-size: 13px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.header-top .widget {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.header-top .widget i {
  color: var(--accent) !important;
  font-size: 14px;
}

.header-top .test-link {
  background: var(--accent-gradient) !important;
  color: #ffffff !important;
  padding: 6px 18px !important;
  border-radius: var(--radius-full) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  box-shadow: var(--accent-glow) !important;
  display: inline-block !important;
  transition: var(--transition-fast) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.header-top .test-link:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 25px rgba(249, 115, 22, 0.5) !important;
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Header Middle (Logo & Info Badges)
   -------------------------------------------------------------------------- */
.header-middle {
  background: #ffffff !important;
  border-bottom: 1px solid var(--border-light);
  padding: 16px 0 !important;
  transition: var(--transition-smooth);
}

.header-middle .menuzord-brand img {
  max-height: 60px;
  transition: var(--transition-smooth);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.06));
}

.header-middle .menuzord-brand:hover img {
  transform: scale(1.03);
}

.header-middle .widget {
  background: var(--bg-subtle) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 14px !important;
  transition: var(--transition-smooth) !important;
  margin: 4px 0 !important;
  position: relative;
  min-height: 68px;
}

.header-middle .widget:hover {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md) !important;
}

.header-middle .widget i.font-32 {
  font-size: 20px !important;
  color: var(--primary) !important;
  background: #eff6ff;
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border-radius: var(--radius-xs);
  float: left;
  margin-right: 12px !important;
  margin-top: 2px !important;
  transition: var(--transition-fast);
}

.header-middle .widget:hover i.font-32 {
  background: var(--accent);
  color: #ffffff !important;
  transform: rotate(5deg) scale(1.08);
}

.header-middle .widget .font-12 {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px;
  color: var(--text-muted) !important;
}

.header-middle .widget h5 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

/* --------------------------------------------------------------------------
   Header Nav (Navbar & Megamenu)
   -------------------------------------------------------------------------- */
.header-nav-wrapper {
  background: #ffffff !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  border-bottom: 1px solid #f1f5f9 !important;
  position: relative;
  z-index: 1000;
}

.header-nav-wrapper .container-fluid {
  max-width: 100% !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* Modern Flex Layout for Menuzord (Never Wraps) */
@media only screen and (min-width: 901px) {
  nav#menuzord.menuzord {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 70px !important;
    padding: 0 !important;
    background: transparent !important;
    float: none !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .menuzord-brand {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    flex-shrink: 0 !important;
  }

  .menuzord-brand img {
    max-height: 44px !important;
    width: auto !important;
    display: block !important;
    transition: transform 0.25s ease !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.06));
  }

  .menuzord-brand:hover img {
    transform: scale(1.03) !important;
  }

  /* Center Menu Navigation */
  ul.menuzord-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    gap: 1.5px !important;
    flex-wrap: nowrap !important;
    background: transparent !important;
    flex-shrink: 1 !important;
  }

  ul.menuzord-menu > li {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  ul.menuzord-menu > li > a {
    display: inline-flex !important;
    align-items: center !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #334155 !important;
    padding: 7px 8px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    background: transparent !important;
    letter-spacing: 0.1px !important;
    box-shadow: none !important;
  }

  ul.menuzord-menu > li > a > i.nav-icon {
    margin-right: 4px !important;
    font-size: 13px !important;
    color: #f97316 !important;
    transition: transform 0.2s ease !important;
  }

  ul.menuzord-menu > li > a:hover,
  ul.menuzord.theme-colored ul.menuzord-menu > li:hover > a {
    background: rgba(249, 115, 22, 0.08) !important;
    color: #ea580c !important;
  }

  ul.menuzord-menu > li > a:hover > i.nav-icon {
    transform: scale(1.15) !important;
  }

  ul.menuzord-menu > li.active > a,
  ul.menuzord.theme-colored ul.menuzord-menu > li.active > a {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.12) 0%, rgba(234, 88, 12, 0.18) 100%) !important;
    color: #c2410c !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.12) !important;
    border-radius: 8px !important;
  }

  ul.menuzord-menu > li.active > a > i.nav-icon {
    color: #ea580c !important;
  }

  ul.menuzord-menu > li > a::after {
    display: none !important;
  }

  /* Right CTA Buttons */
  .nav-cta-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    float: none !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }

  /* Dropdown Styling */
  ul.menuzord-menu ul.dropdown {
    top: 100% !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid #f1f5f9 !important;
    padding: 8px !important;
    min-width: 240px !important;
    animation: navDropdownFade 0.22s ease-out forwards;
  }

  @keyframes navDropdownFade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  ul.menuzord-menu ul.dropdown li {
    float: none !important;
    width: 100% !important;
    background: transparent !important;
  }

  ul.menuzord-menu ul.dropdown li a {
    display: flex !important;
    align-items: center !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    padding: 9px 14px !important;
    border-radius: 8px !important;
    color: #334155 !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
  }

  ul.menuzord-menu ul.dropdown li a:hover {
    background: #fff7ed !important;
    color: #f97316 !important;
    padding-left: 18px !important;
    font-weight: 600 !important;
  }

  ul.menuzord-menu ul.dropdown li a i {
    margin-right: 8px !important;
    color: #f97316 !important;
    font-size: 13px !important;
  }
}

/* CTA Buttons Styling */
.nav-cta-btn {
  background: linear-gradient(135deg, #dc2626 0%, #ea580c 100%) !important;
  color: #ffffff !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  padding: 7px 15px !important;
  border-radius: 25px !important;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  white-space: nowrap !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  letter-spacing: 0.3px;
  animation: navCtaPulse 2.5s infinite;
}

@keyframes navCtaPulse {
  0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

.nav-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(234, 88, 12, 0.6) !important;
  color: #ffffff !important;
  animation: none;
}

.nav-result-btn {
  background: #f0fdf4 !important;
  color: #166534 !important;
  border: 1.5px solid #bbf7d0 !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 6px 11px !important;
  border-radius: 25px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  white-space: nowrap !important;
}

.nav-result-btn:hover {
  background: #166534 !important;
  color: #ffffff !important;
  border-color: #166534 !important;
  transform: translateY(-2px);
}

@media only screen and (max-width: 900px) {
  nav#menuzord.menuzord {
    padding: 8px 15px !important;
    display: block !important;
    height: auto !important;
    min-height: 54px !important;
    position: relative !important;
    background: #ffffff !important;
    clear: both !important;
  }
  nav#menuzord.menuzord:after {
    content: "" !important;
    display: table !important;
    clear: both !important;
  }
  .menuzord-brand {
    float: left !important;
    margin: 4px 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 40px !important;
  }
  .menuzord-brand img {
    max-height: 38px !important;
    width: auto !important;
  }
  .nav-cta-wrap {
    display: none !important;
  }

  /* Hide Menuzord default duplicate button to avoid double buttons */
  .menuzord > a.showhide {
    display: none !important;
  }

  /* Sleek, dedicated clickable mobile hamburger button */
  .modern-mobile-hamburger {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    float: right !important;
    width: 44px !important;
    height: 38px !important;
    padding: 0 !important;
    margin: 4px 0 0 0 !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    cursor: pointer !important;
    z-index: 100 !important;
    outline: none !important;
    transition: all 0.2s ease !important;
  }
  .modern-mobile-hamburger:hover,
  .modern-mobile-hamburger:active {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
  }
  .modern-mobile-hamburger span {
    display: block !important;
    width: 22px !important;
    height: 2.5px !important;
    margin: 0 !important;
    background: #0f172a !important;
    border-radius: 2px !important;
    transition: all 0.25s ease !important;
    pointer-events: none !important;
  }

  /* Animated Hamburger to (X) cross when active */
  nav#menuzord.mobile-menu-open .modern-mobile-hamburger span:nth-child(1),
  .modern-mobile-hamburger.active span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg) !important;
  }
  nav#menuzord.mobile-menu-open .modern-mobile-hamburger span:nth-child(2),
  .modern-mobile-hamburger.active span:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
  }
  nav#menuzord.mobile-menu-open .modern-mobile-hamburger span:nth-child(3),
  .modern-mobile-hamburger.active span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg) !important;
  }

  /* Default collapsed state for mobile menu */
  ul.menuzord-menu {
    display: none !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
    background: #ffffff !important;
    margin: 10px 0 0 0 !important;
    padding: 8px 0 12px !important;
    border-top: 1px solid #f1f5f9 !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12) !important;
    border-radius: 0 0 14px 14px !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10005 !important;
  }

  /* When menu is open */
  nav#menuzord.mobile-menu-open ul.menuzord-menu {
    display: block !important;
  }

  ul.menuzord-menu > li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    border-bottom: 1px solid #f8fafc !important;
    margin: 0 !important;
    background: transparent !important;
  }
  ul.menuzord-menu > li:last-child {
    border-bottom: none !important;
  }
  ul.menuzord-menu > li > a {
    display: flex !important;
    align-items: center !important;
    padding: 12px 18px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    white-space: normal !important;
    border-radius: 0 !important;
    line-height: 1.4 !important;
  }
  ul.menuzord-menu > li > a i.nav-icon {
    margin-right: 10px !important;
    font-size: 14px !important;
    color: #f97316 !important;
    width: 20px !important;
    text-align: center !important;
  }
  ul.menuzord-menu > li.active > a,
  ul.menuzord-menu > li > a:hover {
    background: #fff7ed !important;
    color: #ea580c !important;
  }
  ul.menuzord-menu ul.dropdown {
    width: 100% !important;
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    background: #f8fafc !important;
    padding: 0 !important;
    display: none;
  }
  ul.menuzord-menu li.dropdown-open > ul.dropdown,
  ul.menuzord-menu li.open > ul.dropdown {
    display: block !important;
  }
  ul.menuzord-menu ul.dropdown li {
    width: 100% !important;
    float: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }
  ul.menuzord-menu ul.dropdown li a {
    padding: 10px 18px 10px 34px !important;
    font-size: 13px !important;
    color: #334155 !important;
    display: flex !important;
    align-items: center !important;
  }
}

@media only screen and (min-width: 901px) {
  .modern-mobile-hamburger {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Slider & Hero Section
   -------------------------------------------------------------------------- */
.owl-carousel-1col {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.owl-carousel-1col .banner-img {
  border-radius: var(--radius-md);
  transition: var(--transition-smooth);
}

/* --------------------------------------------------------------------------
   Latest Notification Box (Ultra Modern Card with Pulsing Badge)
   -------------------------------------------------------------------------- */
.col-md-3 .mt-0.p-10 {
  background: #ffffff !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 18px !important;
  position: relative;
  overflow: hidden;
}

.col-md-3 .mt-0.p-10::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--accent-gradient);
}

.col-md-3 .mt-0.p-10 h3.title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  margin-top: 6px !important;
  margin-bottom: 16px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px dashed #e2e8f0 !important;
  color: var(--primary) !important;
}

.col-md-3 .mt-0.p-10 h3.title::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #ef4444;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.25);
  animation: livePulse 1.5s infinite;
}

@keyframes livePulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

marquee span {
  display: block !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 4px solid var(--accent) !important;
  padding: 12px 14px !important;
  border-radius: var(--radius-xs) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: var(--text-main) !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 10px !important;
  transition: var(--transition-fast) !important;
}

marquee span:hover {
  background: #ffffff !important;
  transform: translateX(4px);
  border-color: #cbd5e1 !important;
  box-shadow: var(--shadow-md) !important;
}

marquee span a .latest {
  display: inline-block !important;
  background: var(--accent-gradient) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: var(--radius-full) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-left: 6px !important;
  box-shadow: 0 2px 6px rgba(249, 115, 22, 0.35) !important;
  transition: var(--transition-fast) !important;
}

marquee span a:hover .latest {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.5) !important;
}

/* --------------------------------------------------------------------------
   Registration & Application Form (High-Converting Glass Card)
   -------------------------------------------------------------------------- */
#recommend-container .p-30 {
  background: #ffffff !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 32px 30px !important;
  position: relative !important;
  overflow: hidden;
}

#recommend-container .p-30::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
}

#recommend-container h2 {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-bottom: 24px !important;
}

.reservation-form .form-control {
  height: 48px !important;
  border-radius: var(--radius-sm) !important;
  border: 1.5px solid var(--border-light) !important;
  background-color: #f8fafc !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  box-shadow: none !important;
  transition: var(--transition-fast) !important;
}

.reservation-form textarea.form-control {
  height: auto !important;
  min-height: 100px !important;
}

.reservation-form .form-control:focus {
  border-color: var(--primary) !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(30, 60, 114, 0.12) !important;
  outline: none !important;
}

.reservation-form .form-control::placeholder {
  color: #94a3b8 !important;
  font-weight: 400 !important;
}

.reservation-form button[type="submit"],
.reservation-form .btn-theme-colored {
  background: var(--accent-gradient) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  padding: 14px 28px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  box-shadow: var(--accent-glow) !important;
  transition: var(--transition-smooth) !important;
  cursor: pointer;
  display: inline-block;
  width: 100%;
}

.reservation-form button[type="submit"]:hover,
.reservation-form .btn-theme-colored:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(249, 115, 22, 0.45) !important;
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Buttons & Badges System
   -------------------------------------------------------------------------- */
.btn-theme-colored,
.btn-dark.btn-theme-colored {
  background: var(--primary-gradient) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  padding: 10px 22px !important;
  letter-spacing: 0.3px;
  box-shadow: var(--shadow-sm) !important;
  transition: var(--transition-fast) !important;
}

.btn-theme-colored:hover,
.btn-dark.btn-theme-colored:hover {
  background: var(--accent-gradient) !important;
  transform: translateY(-2px);
  box-shadow: var(--accent-glow) !important;
  color: #ffffff !important;
}

.btn-theme-colored2 {
  background: var(--accent-gradient) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: var(--accent-glow) !important;
  transition: var(--transition-fast) !important;
}

.btn-theme-colored2:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(249, 115, 22, 0.45) !important;
}

/* --------------------------------------------------------------------------
   Course Cards & Feature Blocks (Modern Lift Effects)
   -------------------------------------------------------------------------- */
.course-item,
.service-item,
.features-block,
.team-item {
  background: #ffffff !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: var(--transition-smooth) !important;
  overflow: hidden !important;
}

.course-item:hover,
.service-item:hover,
.features-block:hover,
.team-item:hover {
  transform: translateY(-6px) !important;
  border-color: #cbd5e1 !important;
  box-shadow: var(--shadow-hover) !important;
}

/* Clean up card image zooms */
.course-item .thumb img,
.service-item .thumb img {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  transition: transform 0.5s ease;
}

.course-item:hover .thumb img,
.service-item:hover .thumb img {
  transform: scale(1.05);
}

/* Section Backgrounds */
.bg-silver-light,
.bg-lighter {
  background-color: #f8fafc !important;
}

.bg-silver-deep {
  background-color: #f1f5f9 !important;
}

/* Section Titles */
.section-title .title,
.title.bt {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  position: relative;
  display: inline-block;
}

.text-theme-colored2 {
  color: var(--accent) !important;
}

.text-theme-colored {
  color: var(--primary) !important;
}

/* --------------------------------------------------------------------------
   Hide Outdated Floating Elements & Marquees Globally
   -------------------------------------------------------------------------- */
.cp-widget-button,
.cp-widget-button1,
.whatsapp-button,
.footer_display,
#fixed-social1 {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Modern Footer
   -------------------------------------------------------------------------- */
#footer {
  background: var(--dark-surface) !important;
  color: var(--text-light) !important;
  border-top: 4px solid var(--accent) !important;
}

#footer h4,
#footer .widget-title {
  color: #ffffff !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
  position: relative;
  padding-bottom: 10px;
}

#footer h4::after,
#footer .widget-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 35px;
  height: 2px;
  background: var(--accent);
}

#footer a {
  color: var(--text-light) !important;
  transition: var(--transition-fast) !important;
}

#footer a:hover {
  color: var(--accent) !important;
}

.footer-quick-links li {
  margin-bottom: 6px;
  transition: transform 0.2s ease;
}

.footer-quick-links li:hover {
  transform: translateX(4px);
}

.footer-quick-links a {
  display: inline-flex;
  align-items: center;
  color: #94a3b8 !important;
}

.footer-quick-links a:hover {
  color: var(--accent) !important;
}

#footer .footer-bottom {
  background: #05080e !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 16px 0 !important;
  font-size: 13px !important;
}

/* --------------------------------------------------------------------------
   Responsive Mobile Polish
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Ultra-Modern Floating Social Media Dock (Fully Visible, Never Cut Off)
   -------------------------------------------------------------------------- */
.modern-floating-dock {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99999999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.floating-social-item {
  pointer-events: auto;
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  text-decoration: none !important;
  transform: none !important;
}

.floating-social-item:hover {
  transform: scale(1.15) translateY(-3px) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.floating-social-item .social-icon {
  font-size: 22px;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-social-item .social-label {
  position: absolute;
  right: 62px;
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  background: #0f172a;
  color: #ffffff !important;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.floating-social-item .social-label::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: #0f172a;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.floating-social-item:hover .social-label {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* Color schemes & glowing shadows */
.floating-social-item.enquiry { 
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  box-shadow: 0 6px 18px rgba(249, 115, 22, 0.45);
}
.floating-social-item.wa { 
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45);
}
.floating-social-item.call { 
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.45);
}
.floating-social-item.ig { 
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  box-shadow: 0 6px 18px rgba(220, 39, 67, 0.45);
}
.floating-social-item.fb { 
  background: linear-gradient(135deg, #1877f2 0%, #0d5bb5 100%);
  box-shadow: 0 6px 18px rgba(24, 119, 242, 0.45);
}
.floating-social-item.yt { 
  background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
  box-shadow: 0 6px 18px rgba(255, 0, 0, 0.45);
}

/* Pulse animation on Call & WhatsApp icons */
.floating-social-item.wa .social-icon i,
.floating-social-item.call .social-icon i {
  animation: iconWiggle 3.5s infinite;
}

@keyframes iconWiggle {
  0%, 100% { transform: scale(1); }
  10%, 20% { transform: scale(1.18) rotate(-12deg); }
  15%, 25% { transform: scale(1.18) rotate(12deg); }
  30% { transform: scale(1); }
}

@media (max-width: 768px) {
  .modern-floating-dock {
    top: auto;
    bottom: 20px;
    right: 15px;
    transform: none;
    gap: 8px;
  }
  .floating-social-item {
    width: 44px;
    height: 44px;
  }
  .floating-social-item .social-icon {
    font-size: 19px;
  }
  .floating-social-item .social-label {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Social Media Integration in Header Top
   -------------------------------------------------------------------------- */
.header-top-social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-top-social li {
  display: inline-block;
}

.header-top-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff !important;
  font-size: 13px;
  transition: var(--transition-fast);
}

.header-top-social a:hover {
  transform: translateY(-2px) scale(1.15);
  color: #ffffff !important;
}

.header-top-social a.social-yt:hover { background: #ff0000; box-shadow: 0 4px 12px rgba(255, 0, 0, 0.4); }
.header-top-social a.social-fb:hover { background: #1877f2; box-shadow: 0 4px 12px rgba(24, 119, 242, 0.4); }
.header-top-social a.social-ig:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); box-shadow: 0 4px 12px rgba(220, 39, 67, 0.4); }
.header-top-social a.social-wa:hover { background: #25d366; box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4); }
.header-top-social a.social-tg:hover { background: #0088cc; box-shadow: 0 4px 12px rgba(0, 136, 204, 0.4); }

/* --------------------------------------------------------------------------
   Enhanced Navigation Menu & CTA Button
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 901px) {
  .menuzord {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .menuzord-menu {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }
}

.nav-cta-btn {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
  color: #ffffff !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  padding: 10px 22px !important;
  border-radius: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.38) !important;
  transition: var(--transition-fast) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  animation: ctaGlow 2.5s infinite;
}

@keyframes ctaGlow {
  0% { box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3); }
  50% { box-shadow: 0 8px 25px rgba(249, 115, 22, 0.55); }
  100% { box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3); }
}

.nav-cta-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 28px rgba(249, 115, 22, 0.6) !important;
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Movable Infinite Marquee - Associate Partners
   -------------------------------------------------------------------------- */
.partners-marquee-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 25px 0;
  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%);
}

.partners-marquee-track {
  display: flex;
  align-items: center;
  gap: 30px;
  width: max-content;
  animation: partnerMarquee 28s linear infinite;
}

.partners-marquee-container:hover .partners-marquee-track {
  animation-play-state: paused;
}

@keyframes partnerMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.partner-logo-card {
  flex-shrink: 0;
  width: 170px;
  height: 95px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.partner-logo-card:hover {
  transform: translateY(-5px) scale(1.04);
  border-color: #cbd5e1;
  box-shadow: 0 12px 24px rgba(30, 60, 114, 0.12);
}

.partner-logo-card img {
  max-width: 100%;
  max-height: 60px;
  object-fit: contain;
  filter: grayscale(10%);
  transition: all 0.3s ease;
}

.partner-logo-card:hover img {
  filter: grayscale(0%);
}

/* --------------------------------------------------------------------------
   Curated Modern Photo Gallery Grid & Filter Tabs
   -------------------------------------------------------------------------- */
.gallery-section-wrapper {
  padding: 60px 0 70px;
  background: #f8fafc;
}

.gallery-filter-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 35px;
}

.gallery-tab-btn {
  background: #ffffff;
  color: #475569;
  border: 1.5px solid #e2e8f0;
  padding: 9px 22px;
  border-radius: 30px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}

.gallery-tab-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-2px);
}

.gallery-tab-btn.active {
  background: var(--primary-gradient);
  border-color: transparent;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(30, 60, 114, 0.25);
}

.modern-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

.gallery-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
  height: 240px;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.gallery-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 35px rgba(30, 60, 114, 0.15);
  border-color: #cbd5e1;
}

.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery-card:hover img {
  transform: scale(1.08);
}

.gallery-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0.88) 100%);
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  transition: all 0.3s ease;
}

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

.gallery-card-category {
  display: inline-block;
  background: var(--accent-gradient);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  width: fit-content;
  margin-bottom: 6px;
}

.gallery-card-title {
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.gallery-zoom-icon {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transform: scale(0.6);
  opacity: 0;
  transition: all 0.3s ease;
}

.gallery-card:hover .gallery-zoom-icon {
  transform: scale(1);
  opacity: 1;
}

/* Dedicated styling for Achiever/Topper cards inside Gallery */
.gallery-card.filter-achievers {
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 15px 40px;
}

.gallery-card.filter-achievers .achiever-avatar-wrap {
  width: 105px;
  height: 105px;
  border-radius: 50%;
  padding: 4px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%);
  box-shadow: 0 8px 22px rgba(249, 115, 22, 0.35);
  margin-bottom: 12px;
  transition: all 0.4s ease;
}

.gallery-card.filter-achievers .achiever-avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  background: #ffffff;
}

.gallery-card.filter-achievers:hover .achiever-avatar-wrap {
  transform: scale(1.1) translateY(-4px);
  box-shadow: 0 14px 28px rgba(249, 115, 22, 0.5);
}

.gallery-card.filter-achievers .gallery-card-overlay {
  opacity: 1 !important;
  background: transparent !important;
  position: relative !important;
  inset: auto !important;
  padding: 0 !important;
  text-align: center;
  align-items: center;
}

.gallery-card.filter-achievers .gallery-card-category {
  margin: 0 auto 6px;
}

.gallery-card.filter-achievers .gallery-card-title {
  font-size: 16px;
  color: #ffffff;
  margin-bottom: 2px;
  text-shadow: none;
}

.gallery-card.filter-achievers .achiever-sub {
  color: #94a3b8;
  font-size: 12.5px;
  font-weight: 600;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Star Achievers / Toppers Results Showcase
   -------------------------------------------------------------------------- */
.achievers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.achiever-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  padding: 20px 16px;
  text-align: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.04);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.achiever-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--accent-gradient);
}

.achiever-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 30px rgba(30, 60, 114, 0.12);
  border-color: #cbd5e1;
}

.achiever-img-wrap {
  width: 90px;
  height: 90px;
  margin: 0 auto 14px;
  border-radius: 50%;
  padding: 4px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%);
  box-shadow: 0 6px 14px rgba(249, 115, 22, 0.25);
}

.achiever-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  background: #ffffff;
}

.achiever-name {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}

.achiever-batch {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: #fff7ed;
  border: 1px solid #ffedd5;
  padding: 2px 10px;
  border-radius: 12px;
}

/* --------------------------------------------------------------------------
   Social Media Community Section
   -------------------------------------------------------------------------- */
.social-community-section {
  padding: 60px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-top: 1px solid #e2e8f0;
}

.social-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 26px 22px;
  text-align: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.04);
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.social-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.09);
}

.social-card-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #ffffff;
  transition: transform 0.3s ease;
}

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

.social-card.yt .social-card-icon { background: #ff0000; box-shadow: 0 8px 20px rgba(255, 0, 0, 0.35); }
.social-card.ig .social-card-icon { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); box-shadow: 0 8px 20px rgba(220, 39, 67, 0.35); }
.social-card.wa .social-card-icon { background: #25d366; box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35); }
.social-card.fb .social-card-icon { background: #1877f2; box-shadow: 0 8px 20px rgba(24, 119, 242, 0.35); }

.social-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

.social-card-desc {
  font-size: 13.5px;
  color: #64748b;
  margin-bottom: 18px;
  line-height: 1.5;
}

.social-card-btn {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 8px 20px;
  border-radius: 30px;
  color: #ffffff !important;
  transition: all 0.25s ease;
}

.social-card.yt .social-card-btn { background: #ff0000; }
.social-card.ig .social-card-btn { background: linear-gradient(45deg, #e6683c, #dc2743); }
.social-card.wa .social-card-btn { background: #25d366; }
.social-card.fb .social-card-btn { background: #1877f2; }

.social-card-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Dynamic Section Router (Only Active Section Displays)
   -------------------------------------------------------------------------- */
.site-view {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.site-view.active-view {
  display: block !important;
  opacity: 1 !important;
  animation: fadeInView 0.35s ease-out forwards;
}

@keyframes fadeInView {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.view-page-header {
  padding: 45px 0 40px;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
  color: #ffffff;
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid var(--accent);
}

.view-page-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 80% 20%, rgba(249, 115, 22, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

.view-page-header .view-title {
  font-family: 'Outfit', sans-serif;
  font-size: 34px;
  font-weight: 800;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 8px;
  letter-spacing: 0.5px;
}

.view-page-header .view-title span {
  color: var(--accent);
}

.view-page-header .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 14px;
}

.view-page-header .breadcrumb a {
  color: #cbd5e1;
  font-weight: 600;
}

.view-page-header .breadcrumb a:hover {
  color: var(--accent);
}

.view-page-header .breadcrumb .active {
  color: var(--accent);
  font-weight: 700;
}

/* Home Quick Welcome Card */
.home-welcome-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
  padding: 40px;
  margin-top: 30px;
  margin-bottom: 40px;
}

/* --------------------------------------------------------------------------
   Home Hero Quick Feature Strip
   -------------------------------------------------------------------------- */
.home-quick-strip {
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  border-radius: 16px;
  margin-top: -30px;
  position: relative;
  z-index: 20;
  padding: 16px 20px;
  border: 1px solid #e2e8f0;
}

.home-strip-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
}

.home-strip-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.home-strip-icon.orange { background: #fff7ed; color: #f97316; }
.home-strip-icon.blue { background: #eff6ff; color: #2563eb; }
.home-strip-icon.green { background: #f0fdf4; color: #16a34a; }
.home-strip-icon.purple { background: #faf5ff; color: #9333ea; }

.home-strip-text h5 {
  font-family: 'Outfit', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 2px;
}

.home-strip-text p {
  font-size: 12.5px;
  color: #64748b;
  margin: 0;
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   Home Video & Social Hub Section
   -------------------------------------------------------------------------- */
.home-video-social-section {
  padding: 60px 0;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border-bottom: 1px solid #e2e8f0;
}

.featured-video-card {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
  border: 2px solid #e2e8f0;
  transition: transform 0.3s ease;
}

.featured-video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.featured-video-frame {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: #0f172a;
}

.featured-video-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.featured-video-body {
  padding: 24px;
  background: #ffffff;
}

.featured-video-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #dc2626;
  background: #fee2e2;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.featured-video-title {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px;
}

.featured-video-desc {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 16px;
  line-height: 1.6;
}

/* Social Quick Connect Tiles (Right Column) */
.social-hub-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 14px;
  transition: all 0.25s ease;
  text-decoration: none !important;
}

.social-hub-tile:hover {
  transform: translateX(5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.06);
}

.social-hub-tile.yt:hover { border-color: #ef4444; background: #fff5f5; }
.social-hub-tile.ig:hover { border-color: #ec4899; background: #fdf2f8; }
.social-hub-tile.fb:hover { border-color: #3b82f6; background: #eff6ff; }
.social-hub-tile.wa:hover { border-color: #22c55e; background: #f0fdf4; }

.social-hub-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.social-hub-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #ffffff;
  flex-shrink: 0;
}

.social-hub-icon.yt { background: #ef4444; }
.social-hub-icon.ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.social-hub-icon.fb { background: #1877f2; }
.social-hub-icon.wa { background: #25d366; }

.social-hub-info h4 {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 2px;
}

.social-hub-info p {
  font-size: 12.5px;
  color: #64748b;
  margin: 0;
}

.social-hub-btn {
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.social-hub-btn.yt { background: #ef4444; }
.social-hub-btn.ig { background: #dc2743; }
.social-hub-btn.fb { background: #1877f2; }
.social-hub-btn.wa { background: #22c55e; }

/* --------------------------------------------------------------------------
   Dual Gallery Type Switcher (Photo / Video Tabs)
   -------------------------------------------------------------------------- */
.gallery-type-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 30px;
}

.type-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 700;
  padding: 12px 28px;
  border-radius: 30px;
  border: 2px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.type-toggle-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

.type-toggle-btn.active {
  background: linear-gradient(135deg, #00416b 0%, #0f172a 100%);
  color: #ffffff;
  border-color: #00416b;
  box-shadow: 0 8px 24px rgba(0, 65, 107, 0.25);
}

.type-toggle-btn.active#btn-show-videos {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  border-color: #dc2626;
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.28);
}

/* Video Gallery Grid */
.video-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 26px;
  margin-top: 25px;
}

.video-gallery-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.video-gallery-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 35px rgba(0,0,0,0.1);
  border-color: #cbd5e1;
}

.video-player-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  background: #000;
  overflow: hidden;
}

.video-player-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-card-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.video-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.video-card-badge.yt { background: #fee2e2; color: #dc2626; }
.video-card-badge.ig { background: #fce7f3; color: #db2777; }
.video-card-badge.fb { background: #dbeafe; color: #1d4ed8; }

.video-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 16.5px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px;
  line-height: 1.4;
}

.video-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #f1f5f9;
  padding-top: 12px;
  margin-top: 12px;
  font-size: 12.5px;
  color: #64748b;
}

.video-card-link {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.video-card-link:hover {
  color: #c2410c;
  text-decoration: underline;
}

/* Modern Course Program Cards */
.course-card-modern {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.course-card-modern:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12) !important;
  border-color: #cbd5e1 !important;
}

/* ==========================================================================
   2026 NEXT-GEN HOMEPAGE UPGRADES (WORLD-CLASS EDTECH STYLING)
   ========================================================================== */

/* 1. Ultra-Attractive Top Alert Ticker with Floating Wave Light */
.hero-live-ticker {
  background: linear-gradient(90deg, #180505 0%, #2e0808 25%, #450a0a 50%, #2e0808 75%, #180505 100%);
  background-size: 200% auto;
  animation: tickerGradientMove 6s ease infinite;
  color: #f8fafc;
  padding: 12px 0;
  border-top: 1px solid rgba(248, 113, 113, 0.35);
  border-bottom: 2.5px solid #ef4444;
  box-shadow: 0 4px 25px rgba(220, 38, 38, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  font-size: 13.5px;
  position: relative;
  overflow: hidden;
  z-index: 100;
}

@keyframes tickerGradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Floating Sweeping Light Wave Beam across the Alert Bar */
.hero-live-ticker::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 75%;
  height: 100%;
  background: linear-gradient(
    90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.04) 20%, 
    rgba(255, 255, 255, 0.32) 50%, 
    rgba(255, 180, 100, 0.4) 60%, 
    rgba(255, 255, 255, 0.04) 80%, 
    transparent 100%
  );
  transform: skewX(-25deg);
  animation: floatingLightWave 3.2s infinite ease-in-out;
  pointer-events: none;
  z-index: 1;
}

/* Secondary Neon Accent Line at Bottom */
.hero-live-ticker::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #f97316, #ef4444, #f59e0b, transparent);
  box-shadow: 0 0 14px #ef4444;
  pointer-events: none;
  z-index: 1;
}

@keyframes floatingLightWave {
  0% { left: -150%; }
  45% { left: 160%; }
  100% { left: 160%; }
}

.ticker-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}

/* Fiery Alert Badge with Pulsing Aura */
.ticker-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.4) 0%, rgba(185, 28, 28, 0.65) 100%);
  border: 1.5px solid #f87171;
  color: #ffffff;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.8px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  animation: badgeFirePulse 2s infinite ease-in-out;
  flex-shrink: 0;
}

@keyframes badgeFirePulse {
  0%, 100% { 
    border-color: #f87171; 
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3); 
  }
  50% { 
    border-color: #fca5a5; 
    box-shadow: 0 0 24px rgba(249, 115, 22, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.6); 
  }
}

.ticker-badge .pulse-dot {
  width: 8px;
  height: 8px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 10px #ffffff, 0 0 20px #ef4444;
  animation: livePulse 1.2s infinite;
}

.ticker-text {
  flex: 1;
  color: #f1f5f9;
  font-size: 13.5px;
  line-height: 1.5;
}

.ticker-text strong {
  color: #ffedd5;
  text-shadow: 0 0 10px rgba(253, 186, 116, 0.3);
}

.ticker-text a {
  color: #f8fafc;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
  display: inline;
}

.ticker-text a:hover {
  color: #fed7aa;
}

.ticker-date-pill {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  margin: 0 4px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* -------------------------------------------------------------
   THE BUTTON: Magnetic Floating Wave Light CTA Button
   ------------------------------------------------------------- */
.ticker-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #ff1e1e 0%, #ff6a00 50%, #e11d48 100%);
  background-size: 200% auto;
  color: #ffffff !important;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 13px;
  padding: 8px 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
  letter-spacing: 0.3px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 0 rgba(255, 30, 30, 0.75), 0 4px 18px rgba(249, 115, 22, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  animation: buttonAuraWave 2.4s infinite cubic-bezier(0.16, 1, 0.3, 1), buttonFloat 3s infinite ease-in-out;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

/* Expanding Wave Rings around the button */
@keyframes buttonAuraWave {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 30, 30, 0.75), 0 4px 18px rgba(249, 115, 22, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    background-position: 0% 50%;
  }
  50% {
    box-shadow: 0 0 0 12px rgba(255, 106, 0, 0), 0 6px 25px rgba(255, 30, 30, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    background-position: 100% 50%;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 30, 30, 0), 0 4px 18px rgba(249, 115, 22, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    background-position: 0% 50%;
  }
}

/* Gentle Floating Levitation */
@keyframes buttonFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Sweeping Light Line across the Button */
.ticker-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.1) 20%, 
    rgba(255, 255, 255, 0.85) 50%, 
    rgba(255, 255, 255, 0.1) 80%, 
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: buttonLightSweep 2s infinite cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

@keyframes buttonLightSweep {
  0% { left: -100%; }
  50% { left: 160%; }
  100% { left: 160%; }
}

.ticker-cta .btn-icon-flash {
  font-size: 13px;
  color: #ffedd5;
  animation: flashBounce 1s infinite alternate ease-in-out;
}

@keyframes flashBounce {
  0% { transform: scale(1); filter: drop-shadow(0 0 2px #fff); }
  100% { transform: scale(1.35); filter: drop-shadow(0 0 10px #ffea00); }
}

.ticker-cta .btn-arrow-slide {
  transition: transform 0.2s ease;
  font-size: 11px;
}

.ticker-cta:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 0 0 8px rgba(255, 106, 0, 0.25), 0 8px 32px rgba(255, 30, 30, 0.95), inset 0 1px 0 #ffffff;
  color: #ffffff !important;
}

.ticker-cta:hover .btn-arrow-slide {
  transform: translateX(4px);
}

/* 2. Modern Portal Hero Section with AI Video Background */
.hero-portal-section {
  position: relative;
  background: #080f24;
  color: #ffffff;
  padding: 60px 0 50px;
  overflow: hidden;
  z-index: 1;
}

.hero-video-bg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.hero-bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  opacity: 0.62;
  filter: saturate(1.35) contrast(1.15) brightness(0.95);
  pointer-events: none;
  transition: opacity 0.5s ease;
}

iframe.hero-bg-video {
  width: 100vw;
  height: 56.25vw;
  min-height: 100%;
  min-width: 177.77vh;
}

#hero-ai-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.65;
  pointer-events: none;
}

.hero-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(8, 15, 36, 0.90) 0%, rgba(8, 15, 36, 0.74) 48%, rgba(6, 12, 28, 0.48) 100%),
              radial-gradient(circle at 75% 40%, rgba(37, 99, 235, 0.22) 0%, transparent 60%);
  z-index: 2;
  pointer-events: none;
}

.hero-portal-section .container {
  position: relative;
  z-index: 3;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fdba74;
  font-weight: 700;
  font-size: 13px;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  margin-bottom: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.hero-main-title {
  font-family: 'Outfit', sans-serif;
  font-size: 44px;
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.5px;
  color: #ffffff;
  margin: 0 0 18px;
}

.hero-main-title .gradient-text {
  background: linear-gradient(135deg, #fb923c 0%, #f97316 50%, #f43f5e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtext {
  font-size: 16.5px;
  line-height: 1.7;
  color: #cbd5e1;
  margin-bottom: 28px;
  max-width: 640px;
}

.hero-btn-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 35px;
}

.btn-hero-primary {
  background: var(--accent-gradient);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 15px;
  padding: 13px 28px;
  border-radius: var(--radius-full);
  border: none;
  box-shadow: 0 8px 25px rgba(249, 115, 22, 0.45);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition-smooth);
  text-decoration: none !important;
}

.btn-hero-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(249, 115, 22, 0.6);
  color: #ffffff !important;
}

.btn-hero-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 24px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition-fast);
  text-decoration: none !important;
}

.btn-hero-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #ffffff;
  transform: translateY(-2px);
  color: #ffffff !important;
}

.hero-stats-row {
  display: flex;
  align-items: center;
  gap: 25px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 22px;
}

.hero-stat-box h4 {
  font-family: 'Outfit', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: #fdba74;
  margin: 0 0 2px;
}

.hero-stat-box p {
  font-size: 12px;
  color: #94a3b8;
  margin: 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 3. Hero Three-Columns Row: Left Owner Card | Center Content | Right Notice Board */
.hero-three-columns-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

@media (min-width: 992px) {
  .hero-portal-section .container {
    width: 95% !important;
    max-width: 1560px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .hero-three-columns-row {
    align-items: stretch;
    justify-content: space-between;
  }
  .hero-col-left-owner {
    width: 25%;
    max-width: 320px;
    order: 1;
    padding-right: 10px;
    display: flex;
    flex-direction: column;
  }
  .hero-col-center-text {
    flex: 1;
    max-width: 820px;
    order: 2;
    padding: 0 25px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .hero-col-center-text .hero-main-title {
    font-size: 38px;
    line-height: 1.22;
  }
  .hero-col-center-text .hero-subtext {
    font-size: 15.5px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-col-center-text .hero-btn-group {
    justify-content: center;
  }
  .hero-col-center-text .hero-stats-row {
    justify-content: center;
    gap: 24px;
  }
  .hero-col-right-notice {
    width: 27%;
    max-width: 360px;
    order: 3;
    padding-left: 10px;
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 991px) and (min-width: 768px) {
  .hero-col-center-text {
    width: 100%;
    order: 1;
    text-align: center;
    margin-bottom: 35px;
  }
  .hero-col-center-text .hero-btn-group,
  .hero-col-center-text .hero-stats-row {
    justify-content: center;
  }
  .hero-col-left-owner {
    width: 50%;
    order: 2;
    padding-right: 10px;
  }
  .hero-col-right-notice {
    width: 50%;
    order: 3;
    padding-left: 10px;
  }
}

@media (max-width: 767px) {
  .hero-col-center-text {
    width: 100%;
    order: 1;
    margin-bottom: 30px;
    text-align: center;
  }
  .hero-col-center-text .hero-btn-group,
  .hero-col-center-text .hero-stats-row {
    justify-content: center;
  }
  .hero-col-left-owner {
    width: 100%;
    order: 2;
    margin-bottom: 25px;
  }
  .hero-col-right-notice {
    width: 100%;
    order: 3;
  }
}

/* Standalone Owner Card */
.hero-owner-standalone-card {
  background: rgba(15, 23, 42, 0.90);
  backdrop-filter: blur(16px);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  padding: 16px 14px 14px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.owner-card-top-tag {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fdba74;
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.hero-owner-standalone-card .hero-owner-photo-wrap {
  position: relative;
  width: 100%;
  max-width: 200px;
  height: 220px;
  margin: 0 auto 12px;
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid rgba(249, 115, 22, 0.5);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5), 0 0 20px rgba(249, 115, 22, 0.2);
  background: #0f172a;
  display: block;
}

.hero-owner-standalone-card .hero-owner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 6%;
  display: block;
  transition: transform 0.3s ease;
}

.hero-owner-standalone-card:hover .hero-owner-img {
  transform: scale(1.05);
}

.hero-owner-photo-vignette {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 65px;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 0%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

.hero-owner-standalone-card .hero-owner-exp-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(253, 186, 116, 0.5);
  color: #fdba74;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  z-index: 3;
}

.hero-owner-standalone-card .hero-owner-role-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(16, 185, 129, 0.95);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3.5px 9px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hero-owner-standalone-card .hero-owner-name {
  font-size: 20px;
  margin: 0 0 2px;
}

.hero-owner-standalone-card .hero-owner-title {
  font-size: 11.5px;
  margin: 0 0 8px;
}

.hero-owner-stats-compact {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.hero-owner-stats-compact .owner-pill {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 15px;
  padding: 3px 8px;
  font-size: 11px;
  color: #e2e8f0;
}

.hero-owner-quote {
  font-size: 11.5px;
  line-height: 1.45;
  color: #94a3b8;
  font-style: italic;
  margin: 0 0 10px;
}

.hero-owner-actions-compact {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.btn-owner-primary-compact {
  background: var(--accent-gradient);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 12px;
  padding: 8px 14px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
  text-decoration: none !important;
  flex: 1;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-owner-primary-compact:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.6);
}

.btn-owner-wa-compact {
  background: #22c55e;
  color: #ffffff !important;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  text-decoration: none !important;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.btn-owner-wa-compact:hover {
  background: #16a34a;
  transform: scale(1.08);
}

/* Standalone Notice Board Card */
.hero-notice-card-standalone {
  background: rgba(15, 23, 42, 0.90);
  backdrop-filter: blur(16px);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.notice-card-body-compact {
  padding: 12px 14px;
  overflow-y: auto;
  max-height: 340px;
  scroll-behavior: auto !important;
}

.notice-card-body-compact::-webkit-scrollbar {
  width: 4px;
}

.notice-card-body-compact::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.notice-card-body-compact::-webkit-scrollbar-thumb {
  background: rgba(239, 68, 68, 0.4);
  border-radius: 4px;
}

.notice-card-body-compact::-webkit-scrollbar-thumb:hover {
  background: rgba(239, 68, 68, 0.7);
}

.notice-auto-pill {
  font-size: 11px;
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 2px 8px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.2);
}

.auto-scroll-dot {
  width: 6px;
  height: 6px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 6px #10b981;
  animation: liveGreenPulse 1.5s infinite;
}

.notice-card-body-compact .notice-item-card {
  padding: 10px 12px;
  margin-bottom: 8px;
  transition: all 0.2s ease;
}

.notice-card-body-compact .notice-item-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.notice-card-body-compact .notice-item-title {
  font-size: 12px;
  margin-bottom: 6px;
}

.notice-card-body-compact .notice-action-pill {
  font-size: 10.5px;
  padding: 3px 8px;
}

.hero-tab-btn:hover {
  color: #ffffff;
}

.live-dot-small {
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  animation: livePulse 1.5s infinite;
  display: inline-block;
}

/* Owner Showcase Box */
.hero-owner-box {
  padding: 22px 20px 20px;
  text-align: center;
}

.hero-owner-photo-wrap {
  position: relative;
  width: 220px;
  height: 240px;
  margin: 0 auto 16px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.hero-owner-glow-circle {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.5) 0%, rgba(249, 115, 22, 0.3) 60%, transparent 80%);
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 35px rgba(37, 99, 235, 0.4), inset 0 0 20px rgba(249, 115, 22, 0.3);
  z-index: 1;
}

.hero-owner-img {
  position: relative;
  max-height: 235px;
  width: auto;
  object-fit: contain;
  z-index: 2;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.6));
  transition: transform 0.3s ease;
}

.hero-owner-box:hover .hero-owner-img {
  transform: scale(1.03);
}

.hero-owner-exp-badge {
  position: absolute;
  top: 15px;
  right: -10px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(253, 186, 116, 0.4);
  color: #fdba74;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: 20px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
  z-index: 3;
}

.hero-owner-role-badge {
  position: absolute;
  bottom: 12px;
  left: -12px;
  background: rgba(16, 185, 129, 0.95);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 20px;
  box-shadow: 0 6px 15px rgba(16, 185, 129, 0.4);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.hero-owner-name {
  font-family: 'Outfit', sans-serif;
  font-size: 24px;
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 4px;
  letter-spacing: -0.3px;
}

.hero-owner-title {
  font-size: 13px;
  font-weight: 700;
  color: #fdba74;
  margin: 0 0 10px;
}

.hero-owner-desc {
  font-size: 13px;
  line-height: 1.55;
  color: #cbd5e1;
  margin: 0 0 14px;
}

.hero-owner-stats {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.owner-stat-pill {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 4px 11px;
  font-size: 11.5px;
  color: #e2e8f0;
}

.hero-owner-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.btn-owner-primary {
  background: var(--accent-gradient);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 25px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
  transition: all 0.2s ease;
  text-decoration: none !important;
}

.btn-owner-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.6);
}

.btn-owner-whatsapp {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #86efac !important;
  font-weight: 700;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 25px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  text-decoration: none !important;
}

.btn-owner-whatsapp:hover {
  background: #22c55e;
  color: #ffffff !important;
  transform: translateY(-2px);
}

.hero-owner-notice-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.2s ease;
}

.hero-owner-notice-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.hero-owner-notice-pill .pill-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0 8px;
}

/* 3. Modern Notice & Live Student Desk Card */
.hero-notice-card {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}

.notice-card-header {
  background: rgba(30, 41, 59, 0.95);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.notice-card-header .live-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.notice-card-header .live-tag .live-dot {
  width: 9px;
  height: 9px;
  background: #ef4444;
  border-radius: 50%;
  animation: livePulse 1.5s infinite;
}

.notice-card-body {
  padding: 16px 18px;
  max-height: 410px;
  overflow-y: auto;
}

.notice-card-body::-webkit-scrollbar {
  width: 5px;
}
.notice-card-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}

.notice-item-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  transition: var(--transition-fast);
}

.notice-item-card:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateX(4px);
}

.notice-item-tag {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 12px;
  display: inline-block;
  margin-bottom: 6px;
}

.notice-item-tag.red { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
.notice-item-tag.blue { background: rgba(59, 130, 246, 0.2); color: #93c5fd; }
.notice-item-tag.green { background: rgba(34, 197, 94, 0.2); color: #86efac; }
.notice-item-tag.orange { background: rgba(249, 115, 22, 0.2); color: #fdba74; }

.notice-item-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.45;
  margin-bottom: 8px;
}

.notice-action-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.notice-action-pill {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff !important;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: var(--transition-fast);
}

.notice-action-pill:hover {
  background: var(--accent);
  color: #ffffff !important;
}

.notice-card-footer {
  background: rgba(15, 23, 42, 0.95);
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #94a3b8;
  flex-wrap: wrap;
  gap: 8px;
}

.notice-card-footer a {
  color: #38bdf8;
  font-weight: 700;
  text-decoration: none;
}

/* 4. Bento Grid (Why Choose Newton Classes) */
.bento-section {
  padding: 85px 0 75px;
  background: #f8fafc;
  scroll-margin-top: 100px;
  position: relative;
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.bento-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
  overflow: hidden;
  position: relative;
}

.bento-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.09);
  border-color: #cbd5e1;
}

.bento-card.col-8 { grid-column: span 8; }
.bento-card.col-4 { grid-column: span 4; }
.bento-card.col-6 { grid-column: span 6; }
.bento-card.col-12 { grid-column: span 12; }

/* Bento 1: Featured Split Card (Classroom Photo + Pedagogy) */
.bento-card-featured {
  display: flex;
  align-items: stretch;
  padding: 0;
}

.bento-featured-content {
  flex: 1.25;
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bento-featured-media {
  flex: 1;
  position: relative;
  min-height: 320px;
  overflow: hidden;
  background: #0f172a;
}

.bento-featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-card-featured:hover .bento-featured-media img {
  transform: scale(1.06);
}

/* Bento Visual Photo Cards (Span 4) */
.bento-visual-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
}

.bento-visual-media {
  position: relative;
  height: 190px;
  width: 100%;
  overflow: hidden;
  background: #0f172a;
}

.bento-visual-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-visual-card:hover .bento-visual-media img {
  transform: scale(1.08);
}

/* Bento Media Gradient Overlay & High-end Depth */
.bento-media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.82) 0%, rgba(15, 23, 42, 0.25) 55%, transparent 100%);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.35s ease;
}

.bento-card:hover .bento-media-overlay {
  background: linear-gradient(to top, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.15) 55%, transparent 100%);
}

.bento-visual-body {
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.bento-media-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 13px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.25);
  letter-spacing: 0.3px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  display: inline-flex;
  align-items: center;
  z-index: 2;
}

.bento-media-badge.blue   { background: rgba(37, 99, 235, 0.9); border-color: rgba(147, 197, 253, 0.4); }
.bento-media-badge.orange { background: rgba(234, 88, 12, 0.9); border-color: rgba(253, 186, 116, 0.4); }
.bento-media-badge.green  { background: rgba(22, 163, 74, 0.9); border-color: rgba(134, 239, 172, 0.4); }
.bento-media-badge.purple { background: rgba(147, 51, 234, 0.9); border-color: rgba(216, 180, 254, 0.4); }
.bento-media-badge.teal   { background: rgba(13, 148, 136, 0.9); border-color: rgba(153, 246, 228, 0.4); }

/* Pulsating LED dot on media badge */
.badge-pulse {
  display: inline-block;
  width: 7.5px;
  height: 7.5px;
  border-radius: 50%;
  background: #ffffff;
  margin-right: 7px;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  animation: bento-pulse 2s infinite cubic-bezier(0.66, 0, 0, 1);
  flex-shrink: 0;
}

@keyframes bento-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.85);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.bento-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  margin-bottom: 10px;
  width: fit-content;
}

.bento-tag.blue { background: #eff6ff; color: #2563eb; }

.bento-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
}

.bento-icon.blue   { background: #eff6ff; color: #2563eb; }
.bento-icon.orange { background: #fff7ed; color: #ea580c; }
.bento-icon.green  { background: #f0fdf4; color: #16a34a; }
.bento-icon.purple { background: #faf5ff; color: #9333ea; }
.bento-icon.teal   { background: #f0fdfa; color: #0d9488; }

.bento-title {
  font-family: 'Outfit', sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 10px;
  line-height: 1.3;
}

.bento-desc {
  font-size: 13.5px;
  line-height: 1.65;
  color: #64748b;
  margin: 0 0 16px;
}

.bento-metrics-row {
  display: flex;
  gap: 12px;
  margin: 16px 0;
  flex-wrap: wrap;
}

.bento-metric-pill {
  flex: 1;
  min-width: 90px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
}

.bento-metric-pill .metric-num {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.1;
}

.bento-metric-pill .metric-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  margin-top: 3px;
}

.bento-card-action {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
}

.bento-status-pill {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-full);
}

.bento-status-pill.green {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

.bento-status-pill.purple {
  background: #faf5ff;
  color: #9333ea;
  border: 1px solid #e9d5ff;
}

@media (max-width: 991px) {
  .bento-card.col-8, .bento-card.col-4, .bento-card.col-6 {
    grid-column: span 12;
  }
  .bento-card-featured {
    flex-direction: column-reverse;
  }
  .bento-featured-media {
    min-height: 220px;
  }
  .hero-main-title {
    font-size: 32px;
  }
}

/* 5. Star Achievers & Board Toppers Spotlight Grid */
.toppers-spotlight-section {
  padding: 65px 0 55px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
}

.topper-spotlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.topper-spotlight-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 22px 18px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.topper-spotlight-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(30, 60, 114, 0.12);
  border-color: #3b82f6;
}

.topper-spotlight-avatar {
  width: 95px;
  height: 95px;
  margin: 0 auto 12px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #f97316;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.25);
  background: #f1f5f9;
}

.topper-spotlight-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.topper-spotlight-rank {
  display: inline-block;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 12px;
  margin-bottom: 6px;
}

.topper-spotlight-name {
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px;
}

.topper-spotlight-score {
  font-size: 13.5px;
  font-weight: 700;
  color: #ea580c;
  margin: 0;
}

/* 6. Modern CTA Trust Banner */
.cta-banner-modern {
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 60%, #ea580c 100%);
  border-radius: 24px;
  padding: 48px 40px;
  color: #ffffff;
  box-shadow: 0 20px 40px rgba(30, 60, 114, 0.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 25px;
  margin-top: 40px;
}

.cta-banner-text h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 30px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 8px;
}

.cta-banner-text p {
  font-size: 15.5px;
  color: #e2e8f0;
  margin: 0;
  max-width: 600px;
  line-height: 1.6;
}

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

/* --------------------------------------------------------------------------
   Ultra-Modern EdTech Course Cards (Pro 2026 Design)
   -------------------------------------------------------------------------- */
.course-pro-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}

.course-pro-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(30, 60, 114, 0.12);
  border-color: #3b82f6;
}

.course-pro-thumb {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: #0f172a;
}

.course-pro-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.course-pro-card:hover .course-pro-thumb img {
  transform: scale(1.06);
}

.course-badge-level {
  position: absolute;
  top: 14px;
  left: 14px;
  color: #ffffff;
  font-weight: 800;
  font-size: 11.5px;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 2;
}

.course-badge-level.blue { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.course-badge-level.orange { background: linear-gradient(135deg, #f97316, #ea580c); }
.course-badge-level.green { background: linear-gradient(135deg, #16a34a, #15803d); }

.course-badge-mode {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-weight: 700;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 2;
}

.course-pro-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.course-pro-title {
  font-family: 'Outfit', sans-serif;
  font-size: 21px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px;
  line-height: 1.3;
}

.course-pro-sub {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.course-pro-desc {
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 18px;
}

.course-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 20px;
}

.course-feature-pill {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 6px;
}

.course-feature-pill i {
  font-size: 13px;
}

.course-pro-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px dashed #e2e8f0;
  padding-top: 14px;
  margin-bottom: 18px;
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}

.course-pro-meta-bar span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.course-filter-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 35px;
}

.course-filter-btn {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  color: #475569;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.2s ease;
}

.course-filter-btn:hover {
  background: #ffffff;
  border-color: var(--accent);
  color: var(--accent);
}

.course-filter-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(30, 60, 114, 0.25);
}

.course-trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 35px;
  padding-top: 30px;
  border-top: 1px solid #e2e8f0;
}

@media (max-width: 768px) {
  .course-trust-strip {
    grid-template-columns: 1fr;
  }
  .course-features-grid {
    grid-template-columns: 1fr;
  }
}

.course-trust-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.course-trust-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #eff6ff;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.course-trust-text h5 {
  font-size: 14px;
  font-weight: 800;
  margin: 0 0 2px;
  color: #0f172a;
}

.course-trust-text p {
  font-size: 12px;
  color: #64748b;
  margin: 0;
}

/* ============================================================
   Instant Enquiry Popup Modal
   ============================================================ */
body.enquiry-modal-open {
  overflow: hidden !important;
}

.enquiry-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: rgba(8, 15, 36, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: enquiryFadeIn 0.3s ease-out;
}

@keyframes enquiryFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.enquiry-modal-dialog {
  max-width: 520px;
  width: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
  position: relative;
}

.enquiry-modal-content {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55), 0 0 35px rgba(37, 99, 235, 0.2);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  max-height: 90dvh;
  animation: enquirySlideUp 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes enquirySlideUp {
  from { transform: translateY(28px) scale(0.96); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.enquiry-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #ef4444;
  border: 2px solid #ffffff;
  color: #ffffff !important;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.45);
  transition: all 0.2s ease;
  padding: 0;
  outline: none;
}

.enquiry-modal-close:hover,
.enquiry-modal-close:focus {
  background: #dc2626;
  transform: rotate(90deg) scale(1.05);
}

.enquiry-modal-header {
  background: linear-gradient(135deg, #09132d 0%, #172554 60%, #1e3a8a 100%);
  color: #ffffff;
  padding: 22px 22px 16px;
  padding-right: 60px;
  position: relative;
  border-bottom: 3px solid var(--accent);
  flex-shrink: 0;
}

.enquiry-badge-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(249, 115, 22, 0.22);
  border: 1px solid rgba(249, 115, 22, 0.45);
  color: #fdba74;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.live-dot-pulse {
  width: 7px;
  height: 7px;
  background: #f97316;
  border-radius: 50%;
  animation: livePulse 1.4s infinite;
}

.enquiry-modal-title {
  font-family: 'Outfit', sans-serif;
  font-size: 21px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 5px;
  letter-spacing: -0.3px;
  line-height: 1.25;
}

.enquiry-modal-subtitle {
  font-size: 12.5px;
  color: #cbd5e1;
  line-height: 1.45;
  margin: 0;
}

.enquiry-modal-body {
  padding: 18px 22px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}

.form-row-duo {
  display: flex;
  gap: 12px;
}

.enquiry-form-group {
  flex: 1;
  margin-bottom: 12px;
}

.enquiry-form-group label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 5px;
}

.enquiry-form-group label i {
  color: var(--primary);
  margin-right: 4px;
}

.enquiry-input {
  width: 100%;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 14px;
  color: #0f172a;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.enquiry-input:focus {
  background: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.enquiry-btn-wrap {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.btn-enquiry-submit {
  flex: 1.3;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 12px 16px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.35);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-enquiry-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(249, 115, 22, 0.5);
  background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
}

.btn-enquiry-wa {
  flex: 1;
  background: #22c55e;
  color: #ffffff !important;
  border-radius: 10px;
  padding: 12px 14px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-enquiry-wa:hover {
  background: #16a34a;
  transform: translateY(-2px);
  color: #ffffff !important;
}

.enquiry-trust-strip {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
  text-align: center;
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
}

.enquiry-modal-dismiss-link {
  text-align: center;
  margin-top: 10px;
}

.enquiry-modal-dismiss-link a {
  font-size: 12.5px;
  color: #94a3b8;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.enquiry-modal-dismiss-link a:hover {
  color: #475569;
  text-decoration: underline;
}

/* Specific Mobile Optimization for Small Screens & Phones */
@media (max-width: 600px) {
  .enquiry-modal-backdrop {
    padding: 10px;
    align-items: center;
  }
  .enquiry-modal-dialog {
    max-width: 100%;
  }
  .enquiry-modal-content {
    border-radius: 16px;
    max-height: 94dvh;
  }
  .enquiry-modal-header {
    padding: 16px 14px 12px;
    padding-right: 50px;
  }
  .enquiry-modal-close {
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    font-size: 14px;
  }
  .enquiry-badge-live {
    font-size: 10px;
    padding: 3px 9px;
    margin-bottom: 6px;
  }
  .enquiry-modal-title {
    font-size: 17px;
    margin-bottom: 3px;
  }
  .enquiry-modal-subtitle {
    font-size: 11px;
    line-height: 1.35;
  }
  .enquiry-modal-body {
    padding: 12px 14px 14px;
  }
  .form-row-duo {
    flex-direction: column;
    gap: 0;
  }
  .enquiry-form-group {
    margin-bottom: 9px;
  }
  .enquiry-form-group label {
    font-size: 11.5px;
    margin-bottom: 3px;
  }
  .enquiry-input {
    padding: 8px 10px;
    font-size: 16px !important; /* 16px avoids iOS input zoom */
    border-radius: 8px;
  }
  .enquiry-btn-wrap {
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
  }
  .btn-enquiry-submit,
  .btn-enquiry-wa {
    padding: 11px 12px;
    font-size: 13.5px;
    border-radius: 8px;
    width: 100%;
  }
  .enquiry-trust-strip {
    font-size: 10px;
    margin-top: 8px;
    padding-top: 8px;
  }
  .enquiry-modal-dismiss-link a {
    font-size: 11.5px;
    padding: 4px;
  }
}

/* --------------------------------------------------------------------------
   Sticky Fixed Bottom Associate Partners Ticker (Always Visible On Scroll)
   -------------------------------------------------------------------------- */
.fixed-partners-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 56px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 2.5px solid #f97316;
  box-shadow: 0 -6px 25px rgba(15, 23, 42, 0.12);
  z-index: 99990;
  display: flex;
  align-items: center;
  padding: 0 12px;
  transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.3s ease;
}

.fixed-partners-bottom-bar.is-collapsed {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

/* Left Badge */
.fixed-partners-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #0b1329 0%, #1e293b 100%);
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  margin-right: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  border-left: 3px solid #f97316;
}

.fixed-partners-badge i.fa-handshake-o {
  color: #f97316;
  font-size: 14px;
}

.partners-pulse-glow {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 rgba(34, 197, 94, 0.7);
  animation: pulsePartnerGlow 1.8s infinite;
}

@keyframes pulsePartnerGlow {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
  70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Ticker Container & Animation */
.fixed-partners-ticker-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: 44px;
  display: flex;
  align-items: center;
  mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
}

.fixed-partners-ticker-track {
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  animation: fixedPartnerMarquee 26s linear infinite;
  will-change: transform;
}

.fixed-partners-bottom-bar:hover .fixed-partners-ticker-track {
  animation-play-state: paused;
}

@keyframes fixedPartnerMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.fixed-logo-item {
  flex-shrink: 0;
  height: 40px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 3px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.fixed-logo-item:hover {
  transform: translateY(-2px);
  border-color: #f97316;
}

.fixed-logo-item img {
  max-height: 30px;
  max-width: 100px;
  object-fit: contain;
  display: block;
}

/* Toggle Buttons */
.fixed-partners-toggle-btn {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  cursor: pointer;
  margin-left: 10px;
  flex-shrink: 0;
  transition: all 0.2s;
}

.fixed-partners-toggle-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #94a3b8;
}

.reopen-partners-pill {
  position: fixed;
  bottom: 12px;
  left: 20px;
  background: #0b1329;
  color: #ffffff;
  border: 1.5px solid #f97316;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  z-index: 99990;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, background 0.2s ease;
}

.reopen-partners-pill:hover {
  transform: translateY(-2px);
  background: #1e293b;
}

.reopen-partners-pill i.fa-handshake-o {
  color: #f97316;
}

/* Adjust page bottom padding & scroll-to-top */
body {
  padding-bottom: 58px !important;
}

.scrollToTop {
  bottom: 68px !important;
}

@media (max-width: 767px) {
  .fixed-partners-bottom-bar {
    height: 50px;
    padding: 0 6px;
  }
  .fixed-partners-badge {
    padding: 4px 8px;
    font-size: 11px;
    margin-right: 6px;
  }
  .fixed-partners-badge .badge-title {
    display: none;
  }
  .fixed-logo-item {
    height: 34px;
    padding: 2px 8px;
  }
  .fixed-logo-item img {
    max-height: 24px;
    max-width: 80px;
  }
}

/* --------------------------------------------------------------------------
   NEWTON CLASSES - DAILY MINI QUIZ & MCQ SELF-TEST SECTION (VERSION 2.0)
   -------------------------------------------------------------------------- */
.daily-quiz-section {
  padding: 50px 0 60px;
  background: linear-gradient(180deg, #f8fafc 0%, #edf2f7 100%);
  position: relative;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

/* Homepage Teaser Callout Card */
.daily-quiz-teaser-banner {
  background: linear-gradient(135deg, #090e17 0%, #1e293b 100%);
  border-radius: 20px;
  padding: 35px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border: 2px solid rgba(249, 115, 22, 0.4);
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.15);
  flex-wrap: wrap;
}

.daily-quiz-teaser-banner .teaser-content {
  flex: 1;
  min-width: 280px;
}

.daily-quiz-teaser-banner .teaser-title {
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.02em;
}

.daily-quiz-teaser-banner .teaser-sub {
  color: #94a3b8;
  font-size: 15px;
  margin: 0;
  line-height: 1.6;
}

.daily-quiz-teaser-banner .btn-start-quiz {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: #ffffff !important;
  font-size: 15px;
  font-weight: 800;
  padding: 14px 28px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(249, 115, 22, 0.4);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
  transition: all 0.25s ease;
}

.daily-quiz-teaser-banner .btn-start-quiz:hover {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(249, 115, 22, 0.5);
}

/* Main Quiz Widget Card */
.daily-quiz-card {
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.12), 0 0 1px rgba(15, 23, 42, 0.08);
  border: 1px solid #cbd5e1;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Header */
.daily-quiz-header {
  padding: 30px 35px 25px;
  background: linear-gradient(135deg, #090e17 0%, #1e293b 100%);
  color: #ffffff;
  border-bottom: 3.5px solid var(--accent);
}

.quiz-header-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.quiz-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(249, 115, 22, 0.2);
  border: 1px solid rgba(249, 115, 22, 0.6);
  color: #ffedd5;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 5px 14px;
  border-radius: 9999px;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.quiz-pulse {
  width: 8px;
  height: 8px;
  background: #f97316;
  border-radius: 50%;
  box-shadow: 0 0 10px #f97316;
  animation: pulse-dot 1.5s infinite;
}

.quiz-main-title {
  color: #ffffff !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.02em;
}

.quiz-subtitle {
  color: #94a3b8;
  font-size: 14.5px;
  margin: 0;
  line-height: 1.5;
}

/* Subject Tabs */
.quiz-subject-tabs {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.quiz-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  color: #e2e8f0;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.quiz-tab-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
  transform: translateY(-2px);
}

.quiz-tab-btn.active {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  border-color: #f97316;
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(249, 115, 22, 0.4);
  transform: translateY(-1px);
}

.quiz-tab-btn i {
  font-size: 16px;
}

/* Quick Class Selection Chips Bar */
.quiz-class-selector-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.class-selector-label {
  color: #94a3b8;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.3px;
}

.quiz-class-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quiz-class-chip {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #e2e8f0;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.quiz-class-chip:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
  transform: translateY(-1px);
}

.quiz-class-chip.active {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  border-color: #f97316;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.4);
}


/* Student Verification Entry Gate */
.quiz-entry-area {
  padding: 40px 30px;
  background: #f8fafc;
}

.entry-card-box {
  max-width: 740px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 24px;
  border: 1.5px solid #cbd5e1;
  border-top: 5px solid #1e3c72;
  padding: 38px 36px;
  box-shadow: 0 25px 60px -15px rgba(30, 60, 114, 0.18), 0 0 0 1px rgba(30, 60, 114, 0.05);
  position: relative;
  transition: all 0.3s ease;
}

.entry-card-header {
  text-align: center;
  margin-bottom: 30px;
}

.entry-badge-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.entry-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #93c5fd;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 5px 14px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(30, 60, 114, 0.1);
}

.entry-badge-session {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
}

.entry-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 25px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 10px !important;
  letter-spacing: -0.01em;
}

.entry-subtitle {
  font-size: 14.5px;
  color: #64748b;
  margin: 0 auto;
  line-height: 1.6;
  max-width: 600px;
}

.entry-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.entry-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.entry-form-group label {
  font-size: 13.5px;
  font-weight: 700;
  color: #334155;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.entry-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.entry-input-wrap .input-icon {
  position: absolute;
  left: 16px;
  color: #94a3b8;
  font-size: 15px;
  pointer-events: none;
  z-index: 2;
  transition: color 0.2s ease;
}

.entry-input,
.entry-select {
  width: 100%;
  height: 50px;
  padding: 12px 16px;
  font-size: 14.5px;
  font-weight: 600;
  color: #0f172a;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 14px;
  outline: none;
  font-family: inherit;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.entry-input.with-icon,
.entry-select.with-icon {
  padding-left: 44px;
}

.entry-input:focus,
.entry-select:focus {
  background: #ffffff;
  border-color: #1e3c72;
  box-shadow: 0 0 0 4px rgba(30, 60, 114, 0.15);
}

.entry-input-wrap:focus-within .input-icon {
  color: #1e3c72;
}

/* 4-Item Interactive Rules Micro Dashboard */
.entry-rules-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1.5px dashed #cbd5e1;
  padding: 16px 18px;
  border-radius: 18px;
  margin: 25px 0 28px;
}

.rule-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.rule-icon-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.rule-icon-circle.yellow { background: #fef3c7; color: #d97706; }
.rule-icon-circle.blue   { background: #eff6ff; color: #2563eb; }
.rule-icon-circle.red    { background: #fee2e2; color: #dc2626; }
.rule-icon-circle.green  { background: #dcfce7; color: #16a34a; }

.rule-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.rule-text span {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
  text-transform: uppercase;
}

.rule-text strong {
  font-size: 13px;
  color: #0f172a;
  font-weight: 800;
}

.entry-submit-btn-wrap {
  text-align: center;
}

.btn-start-daily-test {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 16px 32px;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #f97316 100%);
  background-size: 200% auto;
  color: #ffffff !important;
  border: none;
  border-radius: 16px;
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 28px rgba(30, 60, 114, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  letter-spacing: 0.3px;
}

.btn-start-daily-test:hover {
  background-position: right center;
  box-shadow: 0 16px 36px rgba(249, 115, 22, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.btn-start-daily-test .btn-arrow {
  transition: transform 0.2s ease;
}

.btn-start-daily-test:hover .btn-arrow {
  transform: translateX(4px);
}

@media (max-width: 767px) {
  .entry-card-box {
    padding: 24px 18px;
    border-radius: 18px;
  }
  .entry-form-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .entry-rules-strip {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px;
  }
  .rule-item {
    padding: 8px 10px;
  }
  .entry-title {
    font-size: 20px !important;
  }
}

/* Active Student Verified Bar */
.quiz-student-active-bar {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #10b981;
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 18px;
}

.active-student-pill-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
}

.active-student-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.active-student-pill.name {
  color: #1e3c72;
  font-weight: 700;
}

.active-student-pill.email {
  color: #64748b;
  font-weight: 500;
}

.active-student-pill.class {
  background: #e2e8f0;
  color: #334155;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 800;
}

/* Active Test Area */
.quiz-active-area {
  padding: 30px 35px 35px;
}

/* Status Bar */
.quiz-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 12px 20px;
  border-radius: 14px;
}

.quiz-meta-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.exam-sub-title {
  font-weight: 800;
  color: #0f172a;
  font-size: 15px;
}

.exam-q-counter {
  background: #e2e8f0;
  color: #334155;
  font-size: 12.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 6px;
}

.quiz-palette-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.palette-label {
  font-size: 12.5px;
  font-weight: 700;
  color: #64748b;
}

/* Jump Palette */
.quiz-palette {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.palette-node {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.palette-node:hover {
  border-color: #3b82f6;
  color: #1e3c72;
  background: #eff6ff;
}

.palette-node.current {
  border-color: #1e3c72;
  background: #1e3c72;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
  transform: scale(1.08);
}

.palette-node.answered {
  border-color: #10b981;
  background: #10b981;
  color: #ffffff;
}

/* Timer Pill */
.quiz-timer-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  padding: 8px 18px;
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 800;
  font-family: monospace;
}

.quiz-timer-pill i {
  color: #f97316;
}

.quiz-timer-pill.time-warning {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
  animation: pulse-dot 1s infinite;
}

.quiz-timer-pill.time-warning i {
  color: #ef4444;
}

/* Progress Track */
.quiz-progress-track {
  width: 100%;
  height: 7px;
  background: #e2e8f0;
  border-radius: 9999px;
  overflow: hidden;
  margin-bottom: 24px;
}

.quiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #1e3c72 0%, #f97316 100%);
  border-radius: 9999px;
  transition: width 0.35s ease;
}

/* ==========================================
   HD QUESTION CARD FORMAT (RICH ENHANCEMENT)
   ========================================== */
.quiz-hd-question-card {
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 20px;
  padding: 30px 32px;
  margin-bottom: 24px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);
}

.q-card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #edf2f7;
  flex-wrap: wrap;
}

.q-meta-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.q-badge-num {
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 8px;
  letter-spacing: 0.5px;
}

.q-topic-tag {
  background: #f1f5f9;
  color: #334155;
  font-size: 12.5px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.q-topic-tag i {
  color: #f97316;
  margin-right: 4px;
}

.q-meta-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.q-marks-pill {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 6px;
}

.q-neg-pill {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}

/* Question Content */
.q-text-content {
  margin-bottom: 26px;
}

.q-hindi-text {
  font-size: 19.5px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.6;
  margin-bottom: 8px;
}

.q-english-sub {
  font-size: 14.5px;
  color: #64748b;
  font-style: italic;
  line-height: 1.5;
}

/* Options Container */
.quiz-options-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.quiz-option-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px 20px;
  cursor: pointer;
  margin: 0;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.quiz-option-tile:hover {
  border-color: #3b82f6;
  background: #f8fafc;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.1);
}

.quiz-option-tile.selected {
  border-color: #1e3c72;
  background: #eff6ff;
  box-shadow: 0 8px 22px rgba(30, 60, 114, 0.16);
}

.opt-prefix-badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #334155;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
  border: 1px solid #cbd5e1;
}

.quiz-option-tile.selected .opt-prefix-badge {
  background: #1e3c72;
  color: #ffffff;
  border-color: #1e3c72;
}

.opt-text-wrap {
  flex: 1;
  font-size: 15.5px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.45;
}

.opt-indicator {
  font-size: 18px;
  color: #94a3b8;
  margin-left: auto;
  transition: all 0.2s ease;
}

.quiz-option-tile.selected .opt-indicator {
  color: #10b981;
}

/* Controls Bar */
.quiz-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
  padding-top: 10px;
}

.controls-left, .controls-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-quiz-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all 0.2s ease;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.btn-quiz-ctrl.secondary {
  background: #f1f5f9;
  color: #334155;
  border-color: #cbd5e1;
}

.btn-quiz-ctrl.secondary:hover:not(:disabled) {
  background: #e2e8f0;
  color: #0f172a;
}

.btn-quiz-ctrl.secondary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-quiz-ctrl.outline {
  background: transparent;
  color: #64748b;
  border-color: #cbd5e1;
}

.btn-quiz-ctrl.outline:hover {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fca5a5;
}

.btn-quiz-ctrl.next-btn {
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(30, 60, 114, 0.25);
}

.btn-quiz-ctrl.next-btn:hover {
  background: linear-gradient(135deg, #2a5298 0%, #1e3c72 100%);
  transform: translateY(-1px);
}

.btn-quiz-ctrl.submit {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
}

.btn-quiz-ctrl.submit:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.4);
}

/* ==========================================
   RESULT & COMPREHENSIVE EXPLANATION DASHBOARD
   ========================================== */
.quiz-result-area {
  padding: 35px 35px 45px;
}

.result-hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 30px 35px;
  border-radius: 20px;
  margin-bottom: 25px;
  border: 1px solid #e2e8f0;
  flex-wrap: wrap;
}

.result-hero-card.topper {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: #a7f3d0;
}

.result-hero-card.good {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-color: #bfdbfe;
}

.result-hero-card.average {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-color: #fde68a;
}

.result-hero-info {
  flex: 1;
  min-width: 260px;
}

.result-subject-pill {
  display: inline-block;
  background: rgba(0, 0, 0, 0.06);
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 10px;
}

.result-student-header-tag {
  display: inline-flex;
  align-items: center;
  background: rgba(30, 60, 114, 0.1);
  color: #1e3c72;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.result-p-title {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 6px !important;
}

.result-student-meta-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #475569;
  font-weight: 600;
  margin-bottom: 8px;
}

.result-student-meta-strip .meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.result-student-meta-strip .meta-item i {
  color: #f97316;
}

.result-p-desc {
  font-size: 15px;
  color: #475569;
  margin: 0;
  line-height: 1.5;
}

/* Score Ring */
.result-score-ring {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.score-circle {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 3.5px solid #1e3c72;
}

.score-number {
  font-size: 32px;
  font-weight: 900;
  color: #1e3c72;
  line-height: 1;
  font-family: 'Outfit', sans-serif;
}

.score-divider {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}

.score-pct {
  font-size: 12.5px;
  font-weight: 800;
  color: #0f172a;
}

/* 4 Stats Cards */
.result-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-bottom: 25px;
}

.stat-pill {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 18px;
}

.stat-pill .stat-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.stat-pill.correct .stat-icon {
  background: #d1fae5;
  color: #059669;
}

.stat-pill.wrong .stat-icon {
  background: #fee2e2;
  color: #dc2626;
}

.stat-pill.skipped .stat-icon {
  background: #f1f5f9;
  color: #64748b;
}

.stat-pill.accuracy .stat-icon {
  background: #e0e7ff;
  color: #4338ca;
}

.stat-details {
  display: flex;
  flex-direction: column;
}

.stat-num {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
  font-family: 'Outfit', sans-serif;
}

.stat-label {
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}

/* Action Buttons Strip */
.result-actions-strip {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 35px;
}

.btn-res {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  text-decoration: none !important;
  transition: all 0.25s ease;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.btn-res.retake {
  background: #1e293b;
  color: #ffffff !important;
}

.btn-res.retake:hover {
  background: #0f172a;
  transform: translateY(-2px);
}

.btn-res.new-student-btn {
  background: #0284c7;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25);
}

.btn-res.new-student-btn:hover {
  background: #0369a1;
  transform: translateY(-2px);
}

.btn-res.share {
  background: #25d366;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.btn-res.share:hover {
  background: #20ba5a;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

.btn-res.demo {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
}

.btn-res.demo:hover {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4);
}

.btn-res.wa-coaching {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(22, 163, 74, 0.35);
  font-weight: 800;
}

.btn-res.wa-coaching:hover {
  background: linear-gradient(135deg, #15803d 0%, #166534 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(22, 163, 74, 0.45);
}

.quiz-dispatch-status {
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
}

.quiz-dispatch-status.loading {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.quiz-dispatch-status.success {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}

.quiz-dispatch-status.info {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #334155;
}

/* Review Section */
.review-section-title {
  margin-bottom: 22px;
  border-top: 1.5px dashed #cbd5e1;
  padding-top: 30px;
}

.review-section-title h3 {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 6px !important;
}

.review-section-title p {
  color: #64748b;
  font-size: 14px;
  margin: 0;
}

.review-cards-container {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.quiz-review-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 24px 28px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
}

.quiz-review-card.card-correct {
  border-left: 6px solid #10b981;
}

.quiz-review-card.card-wrong {
  border-left: 6px solid #ef4444;
}

.quiz-review-card.card-skipped {
  border-left: 6px solid #94a3b8;
}

.review-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 18px;
}

.review-q-title {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.review-q-title .q-badge {
  background: #0f172a;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  flex-shrink: 0;
  margin-top: 2px;
}

.review-q-topic {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #f97316;
  margin-bottom: 4px;
}

.review-q-main {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.5;
  margin-bottom: 4px;
}

.review-q-sub {
  font-size: 13.5px;
  color: #64748b;
  font-style: italic;
}

.review-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.review-status.correct {
  background: #d1fae5;
  color: #059669;
}

.review-status.wrong {
  background: #fee2e2;
  color: #dc2626;
}

.review-status.skipped {
  background: #f1f5f9;
  color: #64748b;
}

/* Options List in Review */
.review-options-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}

.review-opt-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-size: 14px;
  color: #334155;
  position: relative;
}

.review-opt-item.correct-opt {
  background: #f0fdf4;
  border-color: #86efac;
  color: #15803d;
  font-weight: 700;
}

.review-opt-item.wrong-opt {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
  font-weight: 700;
}

.review-opt-prefix {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.opt-tag {
  margin-left: auto;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 12px;
  font-weight: 700;
}

.opt-tag.correct-tag {
  background: #dcfce7;
  color: #15803d;
}

.opt-tag.wrong-tag {
  background: #fee2e2;
  color: #b91c1c;
}

/* ==========================================
   MASTER EXPLANATION BOX STYLING
   ========================================== */
.quiz-master-explanation-box {
  background: #fffdf5;
  border: 1.5px solid #fef08a;
  border-radius: 14px;
  padding: 18px 22px;
}

.exp-box-title {
  font-size: 14.5px;
  color: #92400e;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.exp-highlight-box {
  margin-bottom: 12px;
}

.exp-badge-correct {
  display: inline-block;
  background: #dcfce7;
  color: #166534;
  font-size: 13px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid #bbf7d0;
}

.exp-points-list {
  margin: 0 0 12px 18px;
  padding: 0;
  font-size: 14px;
  line-height: 1.65;
  color: #78350f;
}

.exp-points-list li {
  margin-bottom: 6px;
}

.exp-step-box {
  background: #ffffff;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13.5px;
  line-height: 1.7;
  color: #78350f;
  margin-bottom: 12px;
  font-family: 'Plus Jakarta Sans', monospace, sans-serif;
}

.exp-exam-tip {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: #1e40af;
  line-height: 1.5;
}

/* ==========================================
   MOBILE & RESPONSIVE ADJUSTMENTS
   ========================================== */
@media (max-width: 991px) {
  .quiz-options-container,
  .review-options-list {
    grid-template-columns: 1fr;
  }
  .result-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .daily-quiz-teaser-banner {
    padding: 24px 20px;
    flex-direction: column;
    align-items: flex-start;
  }
  .daily-quiz-teaser-banner .btn-start-quiz {
    width: 100%;
    justify-content: center;
  }
  .daily-quiz-section {
    padding: 30px 0 35px;
  }
  .daily-quiz-card {
    border-radius: 16px;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.1);
  }
  .daily-quiz-header {
    padding: 18px 14px 16px;
  }
  .quiz-header-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .quiz-timer-pill {
    align-self: flex-start;
    font-size: 14px;
    padding: 6px 14px;
  }
  .quiz-main-title {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }
  .quiz-subtitle {
    font-size: 12.5px;
    line-height: 1.45;
  }
  .quiz-class-selector-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
  }
  .class-selector-label {
    font-size: 12px;
  }
  .quiz-class-chips {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .quiz-class-chip {
    flex: 1 1 calc(50% - 6px);
    min-width: 110px;
    justify-content: center;
    text-align: center;
    padding: 8px 10px;
    font-size: 12px;
  }
  .quiz-subject-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }
  .quiz-tab-btn {
    flex: 1 1 calc(50% - 6px);
    min-width: 120px;
    justify-content: center;
    padding: 9px 12px;
    font-size: 12.5px;
  }
  .quiz-entry-area {
    padding: 18px 12px;
  }
  .entry-card-box {
    padding: 20px 15px;
    border-radius: 16px;
  }
  .entry-card-header h3 {
    font-size: 20px !important;
  }
  .entry-card-header p {
    font-size: 12.5px !important;
  }
  .entry-form-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .entry-input {
    font-size: 16px !important; /* Prevents auto-zoom on iOS */
    padding: 12px 14px;
  }
  .btn-start-daily-test {
    padding: 14px 20px;
    font-size: 15px;
    min-height: 48px;
  }
  .quiz-student-active-bar {
    padding: 8px 12px;
    border-radius: 10px;
  }
  .active-student-pill-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  .quiz-active-area,
  .quiz-result-area {
    padding: 16px 12px;
  }
  .quiz-palette-strip {
    gap: 5px;
    justify-content: center;
  }
  .palette-node {
    width: 30px;
    height: 30px;
    font-size: 11.5px;
  }
  .quiz-hd-question-card {
    padding: 18px 14px;
    border-radius: 14px;
  }
  .q-hindi-text {
    font-size: 16px;
    line-height: 1.5;
  }
  .q-eng-text {
    font-size: 13px;
  }
  .quiz-option-tile {
    padding: 12px 12px;
    min-height: 48px;
    font-size: 13.5px;
  }
  .quiz-controls-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .controls-left, .controls-right {
    width: 100%;
    display: flex;
    gap: 8px;
  }
  .btn-quiz-ctrl {
    flex: 1;
    justify-content: center;
    padding: 11px 16px;
    font-size: 13px;
    min-height: 44px;
  }
  .result-hero-card {
    padding: 18px 14px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }
  .result-score-ring {
    align-self: center;
  }
  .result-student-meta-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 10px 12px;
  }
  .result-stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .stat-pill {
    padding: 10px 12px;
    gap: 10px;
  }
  .stat-icon-wrap {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
  .stat-data strong {
    font-size: 16px;
  }
  .stat-data span {
    font-size: 11.5px;
  }
  .result-actions-strip {
    flex-direction: column;
    gap: 10px;
  }
  .btn-res {
    width: 100%;
    justify-content: center;
    min-height: 46px;
  }
  .review-status {
    align-self: flex-start;
  }
  .result-review-item {
    padding: 16px 14px;
  }
  .explanation-box {
    padding: 12px 14px;
    font-size: 12.5px;
  }
}

@media (max-width: 480px) {
  .quiz-class-chip,
  .quiz-tab-btn {
    flex: 1 1 100%;
    min-width: 100%;
  }
  .result-stats-row {
    grid-template-columns: 1fr;
  }
  .btn-quiz-ctrl {
    font-size: 12.5px;
    padding: 10px 12px;
  }
}

/* ==========================================================================
   ALL-IN-ONE EXAMINATION & TEST HUB (PORTAL STYLING)
   ========================================================================== */
.exam-hub-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Navigation Pill Tabs */
.exam-hub-nav-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 35px;
  background: #ffffff;
  padding: 12px 16px;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
}

.exam-hub-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  color: #334155;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.exam-hub-nav-pill:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1e3c72;
  transform: translateY(-2px);
}

.exam-hub-nav-pill.active {
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  border-color: #1e3c72;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(30, 60, 114, 0.25);
  transform: translateY(-1px);
}

.exam-hub-nav-pill i {
  font-size: 15px;
}

.exam-hub-nav-pill.active i {
  color: #f97316;
}

/* Portal Tab Header */
.portal-tab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
  background: #ffffff;
  padding: 22px 28px;
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.tab-header-text h3 {
  font-size: 21px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 6px !important;
}

.tab-header-text h3 i {
  color: #f97316;
  margin-right: 6px;
}

.tab-header-text p {
  font-size: 14px;
  color: #64748b;
  margin: 0;
}

/* PYQ Search Box */
.pyq-search-box {
  position: relative;
  min-width: 320px;
}

.pyq-search-box i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 15px;
}

.pyq-search-box input {
  width: 100%;
  padding: 12px 16px 12px 42px;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: #1e293b;
  outline: none;
  transition: all 0.2s ease;
}

.pyq-search-box input:focus {
  border-color: #3b82f6;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* ==========================================
   MODULE 2: MOCK TESTS CARDS
   ========================================== */
.mock-test-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.mock-test-pro-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
}

.mock-test-pro-card:hover {
  transform: translateY(-3px);
  border-color: #cbd5e1;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.mock-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.mock-subject-pill {
  font-size: 12px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mock-level-badge {
  background: #f1f5f9;
  color: #475569;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
}

.mock-card-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.45;
  margin: 0 0 8px !important;
}

.mock-card-desc {
  font-size: 14px;
  color: #64748b;
  line-height: 1.55;
  margin: 0 0 18px;
  flex: 1;
}

.mock-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: #f8fafc;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  margin-bottom: 16px;
  text-align: center;
}

.mock-metric-item {
  display: flex;
  flex-direction: column;
}

.mock-metric-item .metric-num {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
}

.mock-metric-item .metric-lbl {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
}

.mock-features-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.feature-chip {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-start-mock-test {
  width: 100%;
  padding: 13px 20px;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  color: #ffffff !important;
  border: none;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  text-decoration: none !important;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.btn-start-mock-test:hover {
  background: linear-gradient(135deg, #2a5298 0%, #1e3c72 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(30, 60, 114, 0.25);
}

.btn-start-mock-test.outline {
  background: #ffffff;
  color: #1e3c72 !important;
  border: 1.5px solid #cbd5e1;
}

.btn-start-mock-test.outline:hover {
  background: #eff6ff;
  border-color: #3b82f6;
}

/* ==========================================
   MODULE 3: PREVIOUS YEAR PAPERS (PYQs)
   ========================================== */
.pyq-filters-container {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px 22px;
  margin-bottom: 24px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
}

.pyq-filter-label {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 9px;
  display: flex;
  align-items: center;
}

.pyq-subject-chips,
.pyq-year-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pyq-chip {
  background: #f1f5f9;
  color: #334155;
  border: 1.5px solid #e2e8f0;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pyq-chip:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
}

.pyq-chip.active {
  background: #1e3c72;
  color: #ffffff;
  border-color: #1e3c72;
  box-shadow: 0 4px 12px rgba(30, 60, 114, 0.2);
}

.pyq-year-pill-btn {
  background: #f8fafc;
  color: #475569;
  border: 1px solid #cbd5e1;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pyq-year-pill-btn:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.pyq-year-pill-btn.active {
  background: #f97316;
  color: #ffffff;
  border-color: #ea580c;
  box-shadow: 0 3px 10px rgba(249, 115, 22, 0.25);
}

.pyq-status-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #e2e8f0;
  font-size: 13px;
  color: #475569;
  font-weight: 600;
  flex-wrap: wrap;
  gap: 8px;
}

.pyq-direct-hint {
  font-size: 12px;
  color: #059669;
  font-weight: 700;
}

.pyq-subject-tag-pill {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
}

.pyq-papers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.pyq-paper-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  transition: all 0.22s ease;
}

.pyq-paper-card:hover {
  transform: translateY(-3px);
  border-color: #93c5fd;
  box-shadow: 0 10px 24px rgba(30, 60, 114, 0.08);
}

.pyq-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.pyq-year-pill {
  background: #fef3c7;
  color: #b45309;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
}

.pyq-class-pill {
  background: #e2e8f0;
  color: #334155;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}

.pyq-type-pill {
  background: #fee2e2;
  color: #991b1b;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  margin-left: auto;
}

.pyq-paper-title {
  font-size: 15.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.45;
  margin: 0 0 16px !important;
  flex: 1;
}

.pyq-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #f1f5f9;
  padding-top: 14px;
}

.pyq-file-size {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 600;
}

.pyq-actions-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-pyq-view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #f1f5f9;
  color: #334155 !important;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.btn-pyq-view:hover {
  background: #e2e8f0;
  color: #0f172a !important;
}

.btn-pyq-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #1e3c72;
  color: #ffffff !important;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.btn-pyq-download:hover {
  background: #f97316;
  transform: translateY(-1px);
}

/* ==========================================
   MODULE 4: CHAPTER NOTES & SOLUTIONS
   ========================================== */
.notes-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.note-solution-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: all 0.22s ease;
}

.note-solution-card:hover {
  transform: translateY(-3px);
  border-color: #cbd5e1;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}

.note-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.note-tag-pill {
  background: #fdf2f8;
  color: #db2777;
  border: 1px solid #fbcfe8;
  font-size: 11.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 6px;
}

.note-class-pill {
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}

.note-card-title {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.45;
  margin: 0 0 10px !important;
  flex: 1;
}

.note-subject-name {
  font-size: 13px;
  color: #64748b;
  margin: 0 0 16px;
}

.btn-read-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  background: #f8fafc;
  color: #1e3c72 !important;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.btn-read-note:hover {
  background: #1e3c72;
  color: #ffffff !important;
  border-color: #1e3c72;
}

/* ==========================================
   MODULE 5: ANSWER KEYS & RESULTS
   ========================================== */
.keys-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.answer-key-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  transition: all 0.2s ease;
  flex-wrap: wrap;
}

.answer-key-card:hover {
  border-color: #3b82f6;
  background: #f8fafc;
  transform: translateX(4px);
}

.key-card-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 260px;
}

.key-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fee2e2;
  color: #dc2626;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.key-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 4px !important;
}

.key-meta {
  font-size: 12.5px;
  color: #64748b;
  font-weight: 600;
}

.btn-key-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: #10b981;
  color: #ffffff !important;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.btn-key-download:hover {
  background: #059669;
  transform: translateY(-1px);
}

.result-portal-cta-banner {
  background: linear-gradient(135deg, #090e17 0%, #1e293b 100%);
  border-radius: 16px;
  padding: 26px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 25px;
  border: 1px solid rgba(249, 115, 22, 0.4);
  flex-wrap: wrap;
}

.result-cta-text h4 {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  margin: 0 0 6px !important;
}

.result-cta-text p {
  color: #94a3b8;
  font-size: 13.5px;
  margin: 0;
}

.btn-check-result {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 800;
  padding: 12px 22px;
  border-radius: 10px;
  text-decoration: none !important;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-check-result:hover {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 991px) {
  .mock-test-cards-grid,
  .pyq-papers-grid,
  .notes-cards-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .exam-hub-nav-wrap {
    padding: 8px;
    gap: 8px;
  }
  .exam-hub-nav-pill {
    padding: 9px 14px;
    font-size: 12.5px;
    flex: 1 1 45%;
    justify-content: center;
  }
  .pyq-search-box {
    min-width: 100%;
  }
  .answer-key-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .btn-key-download {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   DYNAMIC COUNTER & STATS REPEATABLE ANIMATIONS
   ========================================================================== */
.dynamic-counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}

.hero-stat-box {
  cursor: pointer;
  user-select: none;
  transition: all 0.25s ease;
}

.hero-stat-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.hero-stat-box:hover .dynamic-counter,
.funfact:hover .dynamic-counter {
  transform: scale(1.08);
}

.funfact {
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease;
}

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

/* ==========================================================================
   MATRIC CRASH COURSE 2026-27 FEATURED SECTION & FORM
   ========================================================================== */
.crash-course-section {
  padding: 70px 0 65px;
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
  position: relative;
  border-top: 2px solid #fed7aa;
  border-bottom: 2px solid #e2e8f0;
  scroll-margin-top: 90px;
}

.crash-course-badge {
  display: inline-flex;
  align-items: center;
  background: #fef2f2;
  color: #b91c1c;
  border: 1.5px solid #fca5a5;
  font-size: 13px;
  font-weight: 800;
  border-radius: 30px;
  padding: 7px 18px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.crash-pulse-dot {
  width: 9px;
  height: 9px;
  background: #dc2626;
  border-radius: 50%;
  margin-right: 8px;
  box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
  animation: crash-pulse 1.8s infinite;
  display: inline-block;
}

@keyframes crash-pulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

.crash-poster-card {
  background: #ffffff;
  border-radius: 24px;
  border: 1.5px solid #fed7aa;
  box-shadow: 0 20px 45px -10px rgba(234, 88, 12, 0.15);
  padding: 18px;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.crash-poster-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 25px 55px -10px rgba(234, 88, 12, 0.22);
}

.crash-poster-badge-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 8px;
  flex-wrap: wrap;
}

.crash-batch-badge {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border: 1px solid #fca5a5;
  color: #b91c1c;
  font-size: 11.5px;
  font-weight: 800;
  border-radius: 20px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.2px;
}

.crash-batch-date {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 20px;
  padding: 4px 11px;
  display: inline-flex;
  align-items: center;
}

.crash-poster-img-wrap {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #0f172a;
}

.crash-poster-card img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
  transition: transform 0.5s ease;
}

.crash-poster-card:hover img {
  transform: scale(1.02);
}

.crash-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 16px;
}

.crash-feature-pill {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
}

.crash-feature-pill:hover {
  transform: translateY(-2px);
  border-color: #cbd5e1;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
}

.crash-feature-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.crash-feature-icon.red    { background: #fef2f2; color: #dc2626; }
.crash-feature-icon.blue   { background: #eff6ff; color: #2563eb; }
.crash-feature-icon.green  { background: #f0fdf4; color: #16a34a; }
.crash-feature-icon.orange { background: #fff7ed; color: #ea580c; }

.crash-feature-pill h6 {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.2;
}

.crash-feature-pill p {
  font-size: 11px;
  color: #64748b;
  margin: 2px 0 0;
  line-height: 1.2;
}

.crash-location-box {
  background: #fef2f2;
  border: 1.5px dashed #fca5a5;
  border-radius: 14px;
  padding: 14px;
  margin-top: 14px;
  font-size: 12.5px;
  color: #991b1b;
  line-height: 1.5;
}

.location-helpline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(220, 38, 38, 0.2);
}

.btn-tel-pill {
  background: #ffffff;
  border: 1.5px solid #fca5a5;
  color: #b91c1c !important;
  font-weight: 800;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  text-decoration: none !important;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.btn-tel-pill:hover {
  background: #dc2626;
  color: #ffffff !important;
  border-color: #dc2626;
  transform: translateY(-1px);
}

/* -------------------------------------------------------------
   Right Form Card: High Conversion Ultra-Modern Redesign
   ------------------------------------------------------------- */
.crash-form-card {
  background: #ffffff;
  border-radius: 24px;
  border: 1.5px solid #fed7aa;
  box-shadow: 0 25px 70px -15px rgba(220, 38, 38, 0.18), 0 0 0 1px rgba(220, 38, 38, 0.08);
  padding: 36px 34px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.crash-form-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #ef4444 0%, #f97316 50%, #dc2626 100%);
}

.crash-form-header {
  border-bottom: 1.5px solid #f1f5f9;
  padding-bottom: 18px;
  margin-bottom: 22px;
}

.crash-badge-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.crash-badge-urgent {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border: 1px solid #fca5a5;
  color: #b91c1c;
  font-size: 11.5px;
  font-weight: 800;
  border-radius: 20px;
  padding: 4px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.2px;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.12);
  animation: urgentGlow 2.5s infinite;
}

@keyframes urgentGlow {
  0%, 100% { border-color: #fca5a5; }
  50% { border-color: #ef4444; box-shadow: 0 0 12px rgba(239, 68, 68, 0.35); }
}

.crash-badge-date {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 20px;
  padding: 4px 11px;
  display: inline-flex;
  align-items: center;
}

.crash-live-counter {
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #166534;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 10px;
}

.live-pulse-dot {
  width: 8px;
  height: 8px;
  background: #16a34a;
  border-radius: 50%;
  box-shadow: 0 0 8px #16a34a;
  animation: liveGreenPulse 1.5s infinite;
}

@keyframes liveGreenPulse {
  0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6); }
  70% { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

.crash-form-title {
  font-family: 'Outfit', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  margin: 6px 0 6px;
  letter-spacing: -0.01em;
}

.text-gradient-red {
  background: linear-gradient(135deg, #dc2626 0%, #ea580c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.crash-form-sub {
  font-size: 13.5px;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

.crash-field-group {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.crash-field-group label {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.crash-field-group label span.req {
  color: #dc2626;
  font-weight: 800;
}

.crash-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.crash-input-wrap .input-icon {
  position: absolute;
  left: 15px;
  color: #94a3b8;
  font-size: 15px;
  pointer-events: none;
  z-index: 2;
  transition: color 0.2s ease;
}

.crash-input-wrap .textarea-icon {
  top: 14px;
}

.crash-form-control {
  width: 100%;
  height: 48px;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.crash-form-control.with-icon {
  padding-left: 44px;
}

.crash-form-control:focus {
  background: #ffffff;
  border-color: #ef4444;
  outline: none;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.16);
}

.crash-input-wrap:focus-within .input-icon {
  color: #ef4444;
}

textarea.crash-form-control {
  height: auto;
  min-height: 75px;
  resize: vertical;
}

.crash-action-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.btn-crash-submit {
  height: 52px;
  background: linear-gradient(135deg, #ef4444 0%, #ea580c 50%, #dc2626 100%);
  background-size: 200% auto;
  color: #ffffff !important;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 800;
  padding: 0 24px;
  border-radius: 14px;
  border: none;
  box-shadow: 0 10px 28px rgba(220, 38, 38, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  letter-spacing: 0.2px;
}

.btn-crash-submit:hover {
  background-position: right center;
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(234, 88, 12, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.btn-crash-submit .btn-arrow {
  transition: transform 0.2s ease;
}

.btn-crash-submit:hover .btn-arrow {
  transform: translateX(4px);
}

.btn-crash-wa {
  height: 48px;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #ffffff !important;
  font-family: 'Outfit', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  padding: 0 20px;
  border-radius: 12px;
  border: none;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
  transition: all 0.25s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  gap: 8px;
  width: 100%;
}

.btn-crash-wa:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.48);
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #ffffff !important;
}

.crash-trust-pills {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1.5px dashed #e2e8f0;
}

.crash-trust-pill {
  font-size: 12px;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #f1f5f9;
}

.pill-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  font-weight: 800;
}

.pill-text strong {
  color: #0f172a;
}

/* =========================================================
   3. Modern Registration Card (Register For Our Services)
========================================================= */
.modern-registration-card {
  background: #ffffff;
  border-radius: 24px;
  border: 1.5px solid #e2e8f0;
  border-top: 5px solid #1e3c72;
  box-shadow: 0 25px 60px -15px rgba(30, 60, 114, 0.16), 0 0 0 1px rgba(30, 60, 114, 0.05);
  padding: 34px 32px;
  transition: all 0.3s ease;
}

.reg-card-header {
  border-bottom: 1.5px solid #f1f5f9;
  padding-bottom: 18px;
  margin-bottom: 22px;
}

.reg-badge-live {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 800;
  border-radius: 20px;
  padding: 4px 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.reg-title {
  font-family: 'Outfit', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.reg-desc {
  font-size: 13.5px;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

.modern-reg-label {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.modern-reg-input {
  width: 100% !important;
  height: 46px !important;
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: none !important;
}

.modern-reg-input:focus {
  background: #ffffff !important;
  border-color: #1e3c72 !important;
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(30, 60, 114, 0.15) !important;
}

.btn-modern-reg-submit {
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  color: #ffffff !important;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 800;
  padding: 14px 24px;
  border-radius: 14px;
  border: none;
  box-shadow: 0 10px 25px rgba(30, 60, 114, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}

.btn-modern-reg-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(249, 115, 22, 0.45);
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: #ffffff !important;
}

.modern-reg-trust {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed #e2e8f0;
  font-size: 12px;
  color: #64748b;
  font-weight: 700;
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .crash-form-card,
  .modern-registration-card {
    padding: 22px 18px;
    margin-top: 25px;
    border-radius: 18px;
  }
  .crash-feature-grid {
    grid-template-columns: 1fr;
  }
  .crash-form-header h3,
  .reg-title {
    font-size: 20px;
  }
  .crash-trust-pills {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Matric Crash Course Dedicated Booking Popup Modal (2026/27)
   ============================================================ */
body.crash-modal-open {
  overflow: hidden !important;
}

.crash-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: rgba(10, 15, 30, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: crashModalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes crashModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.crash-modal-dialog {
  max-width: 560px;
  width: 100%;
  margin: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  animation: crashModalSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes crashModalSlideUp {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.crash-modal-content {
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(220, 38, 38, 0.25);
  position: relative;
  overflow: hidden;
  border: 1.5px solid rgba(220, 38, 38, 0.2);
  display: flex;
  flex-direction: column;
  max-height: 92dvh;
}

.crash-modal-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  z-index: 10;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(4px);
}

.crash-modal-close-btn:hover {
  background: #ffffff;
  color: #dc2626;
  transform: rotate(90deg) scale(1.08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.crash-modal-header {
  background: linear-gradient(135deg, #1e1b4b 0%, #7f1d1d 55%, #dc2626 100%);
  padding: 24px 24px 20px;
  position: relative;
  color: #ffffff;
  overflow: hidden;
}

.crash-modal-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transform: skewX(-25deg);
  animation: crashLightWave 4s infinite linear;
}

.crash-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fef08a;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 4px 12px;
  border-radius: 30px;
  margin-bottom: 8px;
  backdrop-filter: blur(4px);
}

.crash-modal-title {
  font-size: 22px;
  font-weight: 900;
  margin: 0 0 6px;
  color: #ffffff;
  line-height: 1.25;
  letter-spacing: -0.3px;
}

.crash-modal-subtitle {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 10px;
  line-height: 1.45;
}

.crash-modal-urgency-bar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(254, 202, 202, 0.3);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11.5px;
  color: #ffffff;
  font-weight: 600;
}

.crash-pulse-dot-red {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f87171;
  box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.7);
  animation: crashPulseDot 1.6s infinite;
  display: inline-block;
}

@keyframes crashPulseDot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(248, 113, 113, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); }
}

.crash-modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  max-height: calc(92dvh - 150px);
}

.crash-modal-form .form-group-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 12px;
}

.crash-modal-field {
  margin-bottom: 12px;
}

.crash-modal-field label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 5px;
}

.crash-modal-field label .req {
  color: #dc2626;
  font-size: 13px;
}

.crash-modal-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.crash-modal-input-wrap .field-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 13px;
  pointer-events: none;
  z-index: 2;
  transition: color 0.2s ease;
}

.crash-modal-input-wrap .field-icon.icon-top {
  top: 14px;
  transform: none;
}

.crash-modal-input {
  width: 100%;
  height: 42px;
  padding: 8px 12px 8px 36px;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  transition: all 0.25s ease;
  outline: none;
  box-sizing: border-box;
}

.crash-modal-input:focus {
  background: #ffffff;
  border-color: #dc2626;
  box-shadow: 0 0 0 3.5px rgba(220, 38, 38, 0.15);
}

.crash-modal-input:focus + .field-icon,
.crash-modal-input-wrap:focus-within .field-icon {
  color: #dc2626;
}

textarea.crash-modal-input {
  height: 64px;
  padding-top: 10px;
  resize: vertical;
}

.crash-modal-btn-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.btn-crash-modal-submit {
  width: 100%;
  height: 48px;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.btn-crash-modal-submit::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-25deg);
  animation: crashLightWave 3s infinite linear;
}

.btn-crash-modal-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(220, 38, 38, 0.55);
  background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
}

.btn-crash-modal-wa {
  width: 100%;
  height: 44px;
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  color: #15803d;
  font-size: 13px;
  font-weight: 800;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.btn-crash-modal-wa:hover {
  background: #16a34a;
  color: #ffffff;
  border-color: #16a34a;
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.35);
  transform: translateY(-1.5px);
}

.crash-modal-trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #e2e8f0;
  font-size: 11px;
  color: #64748b;
  font-weight: 700;
  flex-wrap: wrap;
}

.crash-modal-bottom-link {
  text-align: center;
  margin-top: 8px;
}

.crash-modal-bottom-link a {
  font-size: 11.5px;
  color: #64748b;
  text-decoration: underline;
  transition: color 0.2s;
}

.crash-modal-bottom-link a:hover {
  color: #dc2626;
}

@media (max-width: 600px) {
  .crash-modal-dialog {
    max-width: 100%;
  }
  .crash-modal-content {
    border-radius: 18px;
    max-height: 94dvh;
  }
  .crash-modal-header {
    padding: 18px 18px 15px;
  }
  .crash-modal-title {
    font-size: 18px;
  }
  .crash-modal-body {
    padding: 16px 16px;
  }
  .crash-modal-form .form-group-duo {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}