* { 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);
  transition: transform .22s, box-shadow .22s;
  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;
}
.product-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,0,0,.1); }

.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);
}

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

.nav-item { position: relative; }
.nav-item:hover .dropdown { display: block; }
.dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 6px 0;
  min-width: 160px;
  z-index: 100;
}
.dropdown a { display: block; padding: 8px 16px; font-size: 13px; color: #374151; white-space: nowrap; }
.dropdown a:hover { color: #f97316; background: #fff7ed; }

/* 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 { display: block; }
.sub-dropdown {
  display: none;
  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: 101;
}
.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-qual { font-size: 10.5px; color: #f97316; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.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); } }

#mobile-menu { display: none; }
#mobile-menu.open { display: block; }

.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; }

.currency-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: #f3f4f6; border-radius: 999px;
  padding: 4px 12px; font-size: 12px; color: #6b7280; font-weight: 500;
}
.currency-badge span { color: #f97316; font-weight: 700; }



/* 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;
}
/* 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; }