* { box-sizing: border-box; margin: 0; padding: 0; }

/* Safety net: several rows on this page (tab pills, language pills) use
   white-space:nowrap on their own text inside a flex-wrap row - a single long
   label can still force that one row wider than the viewport on mobile even
   though flex-wrap lets the *other* items wrap. Intentionally-scrollable
   strips (e.g. #popular-strip) keep their own overflow-x:auto and still work
   fine inside this. */
html, body { overflow-x: hidden; max-width: 100%; }

/* .announcement-bar a styling lives in courses.php's own inline <style> block
   (next to the rest of the announcement bar's rules) with !important, to
   reliably beat Tailwind's CDN reset - see that file for the actual rule. */

/* Full-banner hero slide: admin-uploaded image IS the whole slide. Desktop
   banner shows >=641px, mobile banner (or the desktop one reused as a
   fallback) shows below that - same breakpoint the rest of this page uses.
   Scoped to #hero-swiper .swiper-slide + !important because Swiper's own
   bundled CSS applies its own rules directly to slide <img> tags, which
   otherwise wins over a plain single-class selector and shows both banners
   stacked on top of each other regardless of screen size. */
#hero-swiper .swiper-slide .hero-banner-img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}
#hero-swiper .swiper-slide .hero-banner-mobile {
  display: none !important;
}

/* One fixed height for every slide on desktop too (1248x365 recommended
   banner size) - same reasoning as the mobile block below: a slide shouldn't
   visibly change the carousel's height depending on how much text/how many
   buttons it has, or an uploaded image's own aspect ratio. The mobile
   override further down wins at <=640px since it's declared later. */
#hero-swiper .swiper-slide {
  height: 365px !important;
}
#hero-swiper .swiper-slide .hero-slide-content {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden;
}
#hero-swiper .swiper-slide .hero-banner-img.hero-banner-desktop {
  height: 365px !important;
  object-fit: cover;
}

@media (max-width: 640px) {
  #hero-swiper .swiper-slide .hero-banner-desktop {
    display: none !important;
  }
  #hero-swiper .swiper-slide .hero-banner-mobile {
    display: block !important;
  }

  /* Same fixed-height treatment as desktop above, just a shorter number for
     phone screens - .hero-slide-content's height:100%/overflow:hidden already
     applies from the base rule, only the actual height needs overriding here. */
  #hero-swiper .swiper-slide {
    height: 380px !important;
  }
  #hero-swiper .swiper-slide .hero-banner-img {
    height: 380px !important;
    object-fit: cover;
  }
}

body { font-family: 'Segoe UI', system-ui, sans-serif; background: #f6f8fc; color: #111827; }

.grad-wrap {
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
  /* Establishes its own stacking context so the search dropdown living inside
     it (see .search-suggestions) always paints above EVERYTHING after it in
     the page - sub-category pills, the product grid, the cart panel/Loyalty
     Apply button - regardless of screen size. Those siblings have no z-index
     of their own, so any explicit z-index here beats them outright; the
     earlier fix only elevated the search box's own tiny wrapper, which won
     locally but could still lose to unrelated siblings elsewhere on the page. */
  position: relative;
  z-index: 10;
}

.tab-btn {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  background: #f3f6fb;
  color: #4b5563;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s, color .2s, box-shadow .2s;
}
.tab-btn:hover  { background: #ffe9d6; color: #f9851f; }
.tab-btn.active { background: #f9851f; color: #fff; box-shadow: 0 6px 14px rgba(249,133,31,.35); }
@media (max-width: 480px) {
  /* A long category/language label shouldn't be able to force this single
     pill wider than the phone screen. */
  .tab-btn, .sub-tab, .lang-tab { white-space: normal; max-width: 100%; }
}

.sub-tab {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
  transition: background .2s, color .2s;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0px 8px 32px 0px rgba(31, 38, 135, 0.04);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  border-width: 1px;
  padding: 10px 24px 10px 24px;

  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;

  color: #475569;



}
.sub-tab.active { 
  background: rgba(243, 142, 33, 0.1); border: 1px solid rgba(243, 142, 33, 0.3);
  color: #F38E21; font-weight: 800;
}

.product-card {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 25px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1px solid #E2E8F0;
  /* Grid items default to min-width:auto, meaning a long unbreakable child
     (e.g. a long course title with white-space:nowrap - see the mobile
     .course_name override in courses.php) can force this card wider than its
     grid cell instead of actually truncating. min-width:0 lets the grid's
     own column width win. */
  min-width: 0;
  /* Scroll reveal (see observeScrollReveal() in courses.php) — starts hidden/
     offset, animates in once .in-view is added by the IntersectionObserver. */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s ease, transform .5s ease, box-shadow .22s;
}
.product-card.in-view { opacity: 1; transform: translateY(0); }
.product-card.in-view:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,0,0,.1); }
/* Cards already on screen at render time skip the pop-in entirely (see
   observeScrollReveal()) — transition explicitly off for that one frame,
   removed again right after so hover etc. still animate normally. */
.product-card.no-reveal-transition { transition: none !important; }

.cart-panel {
  background: #fff;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

/* Highlight pulse after clicking the header cart icon — draws the eye to the
   panel with a soft orange glow ring + gentle zoom, no jarring "shake" (that
   pattern usually reads as an error, not "look here"). Desktop only: on
   mobile the same element is repurposed as a slide-up drawer that relies on
   its own transform for positioning, and this animation would fight it. */
@media (min-width: 641px) {
  .cart-panel.cart-highlight {
    animation: cartHighlightPulse 1.6s ease-in-out;
  }
}
@keyframes cartHighlightPulse {
  0%   { box-shadow: 0 8px 24px rgba(0,0,0,.06), 0 0 0 0 rgba(249,115,22,.55); background: #fff; transform: scale(1); }
  15%  { box-shadow: 0 8px 24px rgba(0,0,0,.06), 0 0 0 12px rgba(249,115,22,.22); background: linear-gradient(135deg, #fff7ed 0%, #ffffff 65%); transform: scale(1.025); }
  30%  { box-shadow: 0 8px 24px rgba(0,0,0,.06), 0 0 0 0 rgba(249,115,22,0); background: #fff; transform: scale(1); }
  45%  { box-shadow: 0 8px 24px rgba(0,0,0,.06), 0 0 0 12px rgba(249,115,22,.18); background: linear-gradient(135deg, #fff7ed 0%, #ffffff 65%); transform: scale(1.015); }
  60%  { box-shadow: 0 8px 24px rgba(0,0,0,.06), 0 0 0 0 rgba(249,115,22,0); background: #fff; transform: scale(1); }
  100% { box-shadow: 0 8px 24px rgba(0,0,0,.06), 0 0 0 0 rgba(249,115,22,0); background: #fff; transform: scale(1); }
}

.no-scroll::-webkit-scrollbar { display: none; }
.no-scroll { -ms-overflow-style: none; scrollbar-width: none; }

.cta-card {
  background: #fff;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(31,38,135,.07);
  /* Scroll reveal — same pattern/JS as .product-card (observeScrollReveal()). */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s ease, transform .5s ease;
}
.cta-card.in-view { opacity: 1; transform: translateY(0); }
.cta-card.no-reveal-transition { transition: none !important; }

.swiper-pagination-bullet { background: #d1d5db !important; opacity: 1 !important; }
.swiper-pagination-bullet-active { background: #f97316 !important; width: 22px !important; border-radius: 999px !important; }

/* ── Apple-style sticky header: slim, frosted glass, animated dropdowns ── */
.site-header {
  position: sticky; top: 0; z-index: 900;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.site-header .header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; max-width: 1280px; margin: 0 auto; padding: 0 16px;
}
.site-header .logo-link { display: flex; align-items: center; }
.site-header .logo-link img { height: 46px; width: auto; display: block; transition: opacity .2s ease; }
.site-header .logo-link:hover img { opacity: .7; }

.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav-link {
  font-size: 12px; font-weight: 500; letter-spacing: .01em;
  color: rgba(0,0,0,.78); text-decoration: none; padding: 4px 0;
  transition: color .2s ease;
}
.site-nav-link:hover { color: #000; }

/* height:48px (matching the header itself) closes the dead zone between the
   link and the dropdown below it — without it, .nav-item only wraps its
   link's own ~20px height, centered in the header, leaving a gap the mouse
   crosses (hovering neither element) on its way down to the panel, which
   drops :hover and closes the dropdown before a click can land. */
.nav-item { position: relative; height: 56px; display: flex; align-items: center; }
.nav-item > .site-nav-link { display: flex; align-items: center; gap: 4px; }
.nav-item .chev { font-size: 9px; display: inline-block; transition: transform .25s ease; }
.nav-item:hover .chev { transform: rotate(180deg); }

/* Full-viewport-width mega panel — fades + slides down on hover. Pure-CSS
   transition needs opacity/transform/pointer-events, never display:none,
   since display can't be animated. */
.dropdown {
  position: fixed; left: 0; right: 0; top: 56px;
  background: rgba(255,255,255,.97);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 20px 40px rgba(0,0,0,.08);
  padding: 28px 0;
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .32s cubic-bezier(.25,.1,.25,1), transform .32s cubic-bezier(.25,.1,.25,1);
  z-index: 890;
}
.nav-item:hover .dropdown { opacity: 1; transform: translateY(0); pointer-events: auto; }
.dropdown-inner { max-width: 1280px; margin: 0 auto; padding: 0 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.dropdown a { display: block; padding: 6px 0; font-size: 14px; color: #1d1d1f; white-space: nowrap; text-decoration: none; transition: color .15s ease; }
.dropdown a:hover { color: #f97316; }

/* Items populate top-to-bottom, staggered, instead of the whole panel just
   appearing at once — plain CSS keyframes + per-item delay, no animation
   library. Panel is closed by default (display:none-equivalent via opacity
   0/pointer-events none on .dropdown above), so this only actually plays
   each time the parent becomes hovered. */
@keyframes menuItemIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.nav-item:hover .dropdown-inner > * { animation: menuItemIn .38s cubic-bezier(.25,.1,.25,1) both; }
.dropdown-inner > *:nth-child(1)  { animation-delay: .03s; }
.dropdown-inner > *:nth-child(2)  { animation-delay: .06s; }
.dropdown-inner > *:nth-child(3)  { animation-delay: .09s; }
.dropdown-inner > *:nth-child(4)  { animation-delay: .12s; }
.dropdown-inner > *:nth-child(5)  { animation-delay: .15s; }
.dropdown-inner > *:nth-child(6)  { animation-delay: .18s; }
.dropdown-inner > *:nth-child(7)  { animation-delay: .21s; }
.dropdown-inner > *:nth-child(8)  { animation-delay: .24s; }
.dropdown-inner > *:nth-child(n+9) { animation-delay: .27s; }

/* Third level (e.g. Qualifications > ACCA > individual papers) - flyout to the side */
.dropdown-item-has-children { position: relative; }
.dropdown-item-has-children > a::after { content: '\203A'; float: right; margin-left: 12px; color: #9ca3af; }
.dropdown-item-has-children:hover > .sub-dropdown { opacity: 1; transform: translateY(0); pointer-events: auto; }
.sub-dropdown {
  position: absolute; top: -6px; left: 100%;
  background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.12); border-radius: 12px;
  padding: 6px 0; min-width: 220px; max-height: 60vh; overflow-y: auto; z-index: 891;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.sub-dropdown a { display: block; padding: 8px 16px; font-size: 13px; color: #374151; white-space: nowrap; }
.sub-dropdown a:hover { color: #f97316; background: #fff7ed; }
@media (max-width: 1200px) {
  .sub-dropdown { left: auto; right: 100%; }
}

/* Search intellisense/autocomplete panel */
.search-suggestions {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 16px 40px rgba(15,23,42,.18);
  max-height: 360px;
  overflow-y: auto;
  /* Wins against sibling rows (sub-tabs, cart panel/Loyalty Apply button, etc.)
     since its wrapper (.cat-tabs-row search box) now also has an explicit
     z-index establishing its own stacking context - see courses.php. Stays
     comfortably below the full-screen modal overlays (z-index 2000+). */
  z-index: 999;
}
.search-suggestions.open {
  display: block;
  animation: searchSuggestionsIn .15s ease-out;
}
@keyframes searchSuggestionsIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.search-suggestion-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #f3f4f6;
}
.search-suggestion-item:last-child { border-bottom: none; }
.search-suggestion-item:hover,
.search-suggestion-item.active { background: #fff7ed; }

.search-suggestion-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.search-suggestion-name {
  font-size: 13.5px; color: #1f2937; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-suggestion-meta { display: flex; align-items: center; gap: 8px; }
.search-suggestion-price { font-size: 12.5px; color: #16a34a; font-weight: 700; white-space: nowrap; }
.search-suggestion-price-old { font-size: 11.5px; color: #9ca3af; text-decoration: line-through; white-space: nowrap; }

.search-suggestion-btn {
  flex-shrink: 0;
  border: none;
  background: #F38E21;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.search-suggestion-btn:hover { background: linear-gradient(135deg, #f56e0d 0%, #ff8534 100%); }
.search-suggestion-btn.in-cart { background: #111827; }
.search-suggestion-btn.in-cart:hover { background: #1f2937; }

.search-suggestion-empty { padding: 16px 14px; font-size: 13px; color: #9ca3af; text-align: center; }
.search-suggestion-more { padding: 9px 14px; font-size: 12px; color: #9ca3af; text-align: center; font-style: italic; }

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 16px;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding-top: 40px;
}
@media (max-width: 900px)  { .products-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .products-grid { grid-template-columns: 1fr; } }

.main-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 1024px) { .main-layout { grid-template-columns: 1fr; } }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
}
@media (max-width: 768px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

.badge-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 640px) { .badge-row { grid-template-columns: repeat(2, 1fr); } }

/* Full-screen overlay (not an inline accordion strip) — fades + slides down,
   same animation language as the desktop mega dropdown above. */
/* Full-page overlay, same as Apple's mobile menu — covers everything from
   the true top of the viewport (the promo bar + header included), with a
   higher z-index than .site-header (900) so it visually replaces the header
   bar rather than sitting under it. Since that covers the header's own
   hamburger button, the overlay carries its own close (X) — see
   #mobile-menu-close below. */
#mobile-menu {
  position: fixed; inset: 0;
  background: rgba(255,255,255,.98);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  padding: 8px 24px 32px;
  overflow-y: auto;
  z-index: 950;
  opacity: 0; transform: translateY(-12px); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
#mobile-menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
body.mobile-menu-open { overflow: hidden; }
#mobile-menu-close {
  display: block; margin: 10px 0 6px auto;
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(0,0,0,.06); border: none; cursor: pointer;
  font-size: 16px; line-height: 1;
}

/* Same top-to-bottom staggered populate as the desktop mega panel above. */
#mobile-menu.open > * { animation: menuItemIn .38s cubic-bezier(.25,.1,.25,1) both; }
#mobile-menu > *:nth-child(1)  { animation-delay: .02s; }
#mobile-menu > *:nth-child(2)  { animation-delay: .05s; }
#mobile-menu > *:nth-child(3)  { animation-delay: .08s; }
#mobile-menu > *:nth-child(4)  { animation-delay: .11s; }
#mobile-menu > *:nth-child(5)  { animation-delay: .14s; }
#mobile-menu > *:nth-child(6)  { animation-delay: .17s; }
#mobile-menu > *:nth-child(7)  { animation-delay: .20s; }
#mobile-menu > *:nth-child(8)  { animation-delay: .23s; }
#mobile-menu > *:nth-child(n+9) { animation-delay: .26s; }

/* Rest-of-page blur, same as Apple's own mega-menu — everything behind the
   open dropdown/mobile menu blurs to pull focus onto it. Targets every
   top-level child of body except the header and the menu itself, rather
   than requiring a single wrapper around all page content. */
body:has(.nav-item:hover) > :not(.site-header):not(#mobile-menu),
body:has(#mobile-menu.open) > :not(.site-header):not(#mobile-menu) {
  filter: blur(6px);
  transition: filter .3s ease;
}
body > * { transition: filter .3s ease; }
#mobile-menu > a, #mobile-menu > details {
  border-bottom: 1px solid rgba(0,0,0,.08);
}
#mobile-menu > a { display: block; padding: 16px 0 !important; font-size: 17px !important; color: #1d1d1f !important; }
#mobile-menu > details > summary { padding: 16px 0 !important; font-size: 17px !important; color: #1d1d1f !important; }

.search-input {
  width: 100%;
  padding: 9px 9px 9px 36px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 13.5px;
  outline: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  transition: box-shadow .2s, border-color .2s;
}
.search-input:focus { border-color: #f97316; box-shadow: 0 0 0 3px rgba(249,115,22,.12); }

.empty-state { grid-column: 1/-1; text-align: center; padding: 48px 0; color: #9ca3af; font-size: 14px; }

.checkout-btn {
  display: block; width: 100%; margin-top: 14px; padding: 13px;
  background: #f97316; color: #fff; border: none; border-radius: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  cursor: pointer; text-align: center;
  transition: background .2s; text-decoration: none;
}
.checkout-btn:hover { background: #ea6c0a; }
.checkout-btn.disabled { background: #d1d5db; cursor: not-allowed; pointer-events: none; }

.section { max-width: 1280px; margin: 0 auto; padding: 0 16px; }




/* STYLE BY `SA` */

/* ~ CART STYLING ~ */

.courses-box {
  background: linear-gradient(59.01deg, rgba(243, 142, 33, 0.3) 0%, rgba(243, 142, 33, 0) 50%, rgba(59, 130, 246, 0.3) 100%);
  border-radius: 40px;
  padding: 32px;
}
.courses-box h2 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800;
  font-size: 24px;
  /* leading-trim: NONE; */
  line-height: 32px;
  letter-spacing: -0.6px;
  vertical-align: middle;
  color: #0F172A;
}
.btns-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  /* padding-top: 40px; */
}


/* ~ CARD STYLING ~ */
.course_name {
  /* bottom margin = old 8px gap + the 11.75px that used to be padding-bottom
     (padding inside a line-clamped box lets the 4th line bleed through) */
  margin: 6px 0 19.75px;
  color: #0F172A;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800;
  font-style: ExtraBold;
  font-size: 18px;
  line-height: 22.5px;
  letter-spacing: 0px;
  vertical-align: middle;
  /* Always exactly a 3-line box: shorter titles reserve the space, longer ones
     clamp with an ellipsis — so the teacher row sits at the same height on
     every card. Mobile resets this (nowrap single line). */
  min-height: calc(22.5px * 3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.teacher {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 24px;
}
.teacher p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 500;
  font-style: Medium;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: #64748B;
}
.course-btns {
  padding-top: 14px;
  padding-bottom: 14px;
  border-radius: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700;
  font-style: Bold;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  text-align: center;
  color: #fff;
  display:block;
  text-align:center;
  width:100%;
  background:#F38E21;
  cursor:pointer;
  transition:background .2s;
  text-decoration:none;
  box-shadow: 0px 4px 6px -4px #F38E2133;
  box-shadow: 0px 10px 15px -3px #F38E2133;
  margin-top: 24px;
}
/* "View Cart" state — visually distinct from the bright orange "Add to Cart"
   CTA (reuses the site's dark navy secondary-button color, e.g. the bundle
   CTA "Contact Us" button) instead of an off-brand green. */
.vw-btn {
  background: #111827;
}
.course-expiry {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 500;
  font-style: Medium;
  font-size: 10px;
  line-height: 15px;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
  color: #94A3B8;
  margin-top: 12px;
}
/**********************************/


/* ~ CART STYLING ~ */
.item-pill {
  background: #F38E211A;
  padding-top: 4px;
  padding-right: 10px;
  padding-bottom: 4px;
  padding-left: 10px;
  opacity: 1;
  border-radius: 8px;

  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700;
  font-style: Bold;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: #F38E21;
}
.cart_item-name {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700;
  font-style: Bold;
  font-size: 14px;
  line-height: 17.5px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: #0F172A;
}
.cart_item-price {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: #0F172A;
}
.cart_item-tutor {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 400;
  font-size: 10px;
  line-height: 15px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: #94A3B8;
}
.loyalty-section h3{
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-style: Bold;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.6px;
  vertical-align: middle;
  text-transform: uppercase;
  color: #94A3B8;
  margin-bottom: 12px;
}
.ls-email {
  background: #F1F5F9;
  width: 195;
  height: 40;
  padding-top: 11px;
  padding-right: 12px;
  padding-bottom: 11px;
  padding-left: 12px;
  opacity: 1;
  border-radius: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0px;
  vertical-align: middle;
  color: #6B7280;
}
.ls-btn {
  width: 66.7300033569336;
  height: 40;
  padding-top: 11.5px;
  padding-right: 16px;
  padding-bottom: 12.5px;
  padding-left: 16px;
  opacity: 1;
  border-radius: 12px;
  background: #0F172A;
  color: #FFFFFF;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700;
  font-style: Bold;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
}
/**********************************/


/* ~ CARD STYLING OF POPULAR COURSES ~ */
.popular-course-card {
  background: rgba(255, 255, 255, 0.45);
  border: 5px solid rgba(255, 255, 255, 0.5);
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  flex-shrink:0;

  /* flex: 0 0 calc(25% - 12px);  */
  /* 4 cards fit karne ke liye (100% / 4) minus gap adjustment */
  /* max-width: calc(25% - 12px); */
  /* flex: 0 0 calc(25% - 12px); min-width: calc(25% - 12px); box-sizing: border-box; */


  flex: 0 0 calc(25% - 12px) !important;
  width: calc(25% - 12px) !important;
  min-width: calc(25% - 12px) !important;
  max-width: calc(25% - 12px) !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  gap: 16px;
  border-radius: 24px;
  padding: 20px;
  /* Scroll reveal — same pattern/JS as .product-card (observeScrollReveal()). */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s ease, transform .5s ease;
}
.popular-course-card.in-view { opacity: 1; transform: translateY(0); }
.popular-course-card.no-reveal-transition { transition: none !important; }
/* Fixed 25% width only makes sense on desktop (4 cards visible). Below that,
   scale down to a standard mobile-carousel "peek the next card" layout instead
   of squeezing 3-4 tiny unreadable cards into a phone-width strip. */
@media (max-width: 1024px) {
  .popular-course-card {
    flex: 0 0 calc(45% - 10px) !important;
    width: calc(45% - 10px) !important;
    min-width: calc(45% - 10px) !important;
    max-width: calc(45% - 10px) !important;
    padding: 16px;
  }
}
@media (max-width: 640px) {
  .popular-course-card {
    flex: 0 0 78% !important;
    width: 78% !important;
    min-width: 78% !important;
    max-width: 78% !important;
    padding: 16px;
  }
}
.popular-course-card p {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-style: Bold;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: rgba(15, 23, 42, 1);
}
/**********************************/

.bundle-cta {
  border-radius: 50px;
  border-width: 1px;
  padding: 80px;
  background: rgba(255, 255, 255, 0.4);

}
.b-c-btn {
  font-family: 'Plus Jakarta Sans',sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 1.4px;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
  color: #FFFFFF;

  background: #0F172A;
  color:#fff;
  padding:12px 28px;
  /* border-radius:10px; */
  text-decoration:none;

  border-radius: 16px;
  padding: 16px 40px;

  position: relative;
  z-index: 2; /* Glow ka z-index 1 hai, isliye yeh upar dikhenge */



}
.bundle-cta {
  position: relative; /* Glow ko andar rakhne ke liye zaroori hai */
  /* width: 100%;
  max-width: 900px; */
  
  
}


.footer {
  background: rgba(255, 255, 255, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  color: #0F172A;
  padding-top: 80px;
  padding-bottom: 40px;
  background : linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 50%, #E2E8F0 100%);
}

.foo-head {
  font-size:14px;font-weight:600;color:#fff;margin-bottom:16px;
  font-family: Plus Jakarta Sans;
  font-weight: 700;
  font-style: Bold;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: #0F172A;
}

.attempt-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: #94A3B8;

}

.language-label {
  font-size:11px;background:#dbeafe;color:#2563eb;padding:3px 8px;border-radius:6px; text-transform: capitalize;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-style: Bold;
  font-size: 10px;
  line-height: 15px;
  letter-spacing: 0.5px;
  vertical-align: middle;
  text-transform: uppercase;
  border-radius: 8px;
  padding-top: 4px;
  padding-right: 12px;
  padding-bottom: 4px;
  padding-left: 12px;
  background: #DBEAFE;
  color: #2563EB;
}

.language-label-uh {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 10px;
  line-height: 15px;
  letter-spacing: 0.5px;
  vertical-align: middle;
  text-transform: uppercase;
  border-radius: 8px;
  padding: 4px 12px;
  background: #FFEDD5;
  color: #F38E21;
}

.lang-tab {
  background: rgba(241, 245, 249, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #94A3B8;
  padding: 10px 20px 10px 20px;
  border-radius: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
}
.lang-tab.active { background: #1F9EF9; box-shadow: 0px 1px 2px 0px #0000000D; color: #FFFFFF; }


.attempt-tab {
  background: rgba(241, 245, 249, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #94A3B8;
  padding: 10px 20px 10px 20px;
  border-radius: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
}
.attempt-tab.active { background: #1F9EF9; box-shadow: 0px 1px 2px 0px #0000000D; color: #FFFFFF; }