/* ============================================================
   Skillora — marketing homepage
   ============================================================ */

/* ---------- Variables ---------- */
/* Moved to tokens.css (2026-09-28) so the Explore page can reuse them without loading this file. */
@import url("tokens.css?v=20260928b");

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

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 300;
  color: var(--text);
  line-height: 1.55;
  background: var(--white);
}

h1, h2, h3, h4 { font-weight: 700; line-height: 1.25; color: inherit; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.section { padding: var(--section-y) 0; }
.section--gray { background: var(--gray-bg); }
.section__sub { color: var(--text-gray); margin: 6px 0 4px; }
.section h2 { margin-bottom: 8px; }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-block;
  padding: 10px 12px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn--primary { background: var(--purple); color: var(--white); }
.btn--primary:hover { background: var(--purple-dark); }
.btn--ghost { color: var(--text); border: 1px solid transparent; }
.btn--ghost:hover { color: var(--purple); }
.btn--white { background: var(--white); color: var(--navy); }
.btn--white:hover { background: #ececf1; }
.btn--outline { background: transparent; color: var(--purple); border: 1.5px solid var(--purple); }
.btn--outline:hover { background: var(--purple-tint); }
.btn--sm { padding: 8px 12px; font-size: 14px; }

.link { color: var(--purple); font-weight: 700; font-size: 15px; }
.link:hover { color: var(--purple-dark); text-decoration: underline; }
.link--white { color: var(--white); }
.link--white:hover { color: var(--mint); }

/* ---------- 1. Announcement bar ---------- */
.announce {
  position: relative;
  background: var(--mint);
  color: var(--teal-deep);
  text-align: center;
  padding: 8px 44px;
  font-size: var(--fs-small);
  font-weight: 700;
}
.announce a { text-decoration: underline; font-weight: 800; }
.announce__timer {
  display: inline-block;
  margin-left: 12px;
  padding: 2px 8px;
  background: rgba(13, 58, 53, .12);
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.announce__close {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  padding: 6px;
  border-radius: 4px;
}
.announce__close:hover { background: rgba(13, 58, 53, .12); }

/* ---------- 2. Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  box-shadow: 0 1px 4px rgba(20, 21, 31, .12);
}
.header__inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
      justify-content: space-between;
}
.logo {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--navy);
}
.logo span { color: var(--purple); }
.logo--light { color: var(--white); }

.header__nav { display: flex; gap: 14px; font-size: 15px; }
.header__nav a:hover { color: var(--purple); }

.search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
  max-width: 560px;
  padding: 0 16px;
  height: 44px;
  border: 1px solid var(--navy);
  border-radius: 22px;
  background: var(--white);
  color: var(--text-gray);
}
.search:focus-within { border-color: var(--purple); }
.search input {
  flex: 1;
  border: 0;
  outline: none;
  font: inherit;
  font-size: 14px;
  background: transparent;
  color: var(--text);
  min-width: 0;
}

.header__actions { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.header__actions > a:hover { color: var(--purple); }
.icon-btn { display: inline-flex; padding: 8px; border-radius: var(--radius); color: var(--text); }
.icon-btn:hover { background: var(--purple-tint); color: var(--purple); }
.icon-btn--outline { border: 1px solid var(--navy); border-radius: var(--radius); }

/* ---------- Language dropdown ---------- */
.lang-menu { position: relative; }
.lang-menu__list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 400;
}
.lang-menu__list button {
  display: block;
  width: 100%;
  text-align: start;
  padding: 9px 16px;
  font-size: 14px;
  color: var(--text);
}
.lang-menu__list button:hover { background: var(--purple-tint); color: var(--purple); }
.lang-menu__list button.is-active { color: var(--purple); font-weight: 700; }

/* The list items are links, not buttons — the rules above are a leftover from
   when switching was client-side. Both the header and the footer dropdown use
   .lang-menu__link, so without these the items rendered unstyled. */
.lang-menu__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 14px;
  color: var(--text);
}
.lang-menu__link:hover { background: var(--purple-tint); color: var(--purple); }
.lang-menu__link.is-active { color: var(--purple); font-weight: 700; }
.lang-menu__flag { width: 18px; height: 13px; object-fit: cover; flex: none; }

/* Bottom-of-page variant: the panel hangs above the trigger instead of below. */
.lang-menu__list--up { top: auto; bottom: calc(100% + 8px); }

/* ---------- RTL overrides ---------- */
[dir="rtl"] .lang-menu__list { right: auto; left: 0; }
[dir="rtl"] .announce__close { right: auto; left: 12px; }

[dir="rtl"] .footer__lang { margin-left: 0; margin-right: auto; }
[dir="rtl"] .price s { margin-left: 0; margin-right: 6px; }
[dir="rtl"] .chev { margin-left: 0; margin-right: 2px; }

[dir="rtl"] .carousel__arrow--prev { left: auto; right: -14px; }
[dir="rtl"] .carousel__arrow--next { right: auto; left: -14px; }

/* ---------- 3. Hero ---------- */
.hero { padding: 16px 0 8px; }
.hero__wrap { position: relative; }
.hero__img {
  width: 100%;
  height: auto;
  display: block;
}
.hero__card {
  position: absolute;
  left: 72px;
  top: 50%;
  transform: translateY(-50%);
  max-width: 420px;
  background: var(--white);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-lg);
}
.hero__card h1 { margin-bottom: 12px; font-size: 32px; }
.hero__card p { margin-bottom: 20px; color: var(--text); }

/* ---------- Course cards / carousel ---------- */
.carousel { position: relative; margin-top: 20px; }
.carousel__track {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__arrow {
  position: absolute;
  top: 90px;
  z-index: 5;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--purple);
  color: var(--white);
  font-size: 16px;
  box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
}
.carousel__arrow:hover { background: var(--purple-dark); }
.carousel__arrow--prev { left: -14px; }
.carousel__arrow--next { right: -14px; }

.course-card {
  position: relative;
  flex: 0 0 calc(25% - 18px);
  scroll-snap-align: start;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  padding: 14px;
  transition: box-shadow .15s ease;
}
.course-card:hover { box-shadow: var(--shadow-lg); }
.course-card__thumb, .career-card__thumb {
  height: 130px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.course-card__thumb img, .career-card__thumb img, .chip-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.course-card .course-card__thumb {
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
}
.course-card__body { padding: 14px 2px 2px; }
.badge {
  display: inline-block;
  background: #b3e6e2;
  color: #0d3a35;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 5px;
}
.badge--premium { background: #5022c3; color: var(--white); }
.badge--hot { background: #eceb98; color: #3d3c0a; }
.card-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.chip {
  display: inline-block;
  border: 1px solid #d1d2d6;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 13px;
  color: var(--text);
}
.chip--rating { font-weight: 700; color: #8d5a08; }
.course-card h3 {
  font-size: 16px;
  line-height: 1.3;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.course-card__instructor {
  font-size: var(--fs-small);
  color: var(--text-gray);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rating { display: flex; align-items: center; gap: 5px; font-size: var(--fs-small); }
.rating b { color: #8d5a08; }
.stars { color: var(--star); letter-spacing: 1px; font-size: 12px; }
.count { color: var(--text-gray); }

.price { font-weight: 700; margin-top: 6px; }
.price s { color: var(--text-gray); font-weight: 300; margin-left: 6px; font-size: 14px; }

/* Hover popover (rendered into .pop-float by script.js) */
.pop-float {
  position: absolute;
  z-index: 300;
  width: 350px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 22px;
  display: none;
}
.pop-float::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 16px; height: 16px;
  background: var(--white);
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transform: translateY(-50%) rotate(45deg);
}
.pop-float[data-side="right"]::before { left: -9px; }
.pop-float[data-side="left"]::before { right: -9px; transform: translateY(-50%) rotate(225deg); }
.pop-float h3 { font-size: 17px; line-height: 1.35; margin-bottom: 10px; }
.pop-badges { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pop-updated { color: #1e6055; font-size: 13px; font-weight: 700; }
.pop-meta { color: var(--text-gray); font-size: 13px; margin-bottom: 10px; }
.pop-desc { font-size: 14px; margin-bottom: 12px; }
.pop-list { list-style: none; margin-bottom: 16px; }
.pop-list li {
  position: relative;
  padding: 0 0 10px 26px;
  font-size: 14px;
}
.pop-list li::before {
  content: "✓";
  position: absolute;
  left: 4px; top: 0;
  color: var(--text);
}
.pop-cart { display: block; width: 100%; padding: 12px; }

/* ---------- 5. Subscription promo ---------- */
.promo {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
  align-items: center;
  background: var(--navy);
  color: var(--white);
  border-radius: 16px;
  padding: 48px;
  overflow: hidden;
}
.promo__text p { color: #cfd0d8; margin: 12px 0 20px; }
.promo__features {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  margin-bottom: 26px;
  font-size: 14px;
}
.promo__features li { display: flex; align-items: center; gap: 10px; }
.feat-icon {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(73, 126, 159, .25);
  color: #b6cbd9;
  border-radius: 6px;
  font-size: 15px;
}
.promo__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.promo__cta .btn--white { padding: 12px 26px; }
.promo__cta .link--white { text-decoration: underline; text-underline-offset: 4px; }

.promo__media { display: flex; justify-content: center; }
.promo__photo {
  width: 100%;
  max-width: 660px;
  height: auto;
  display: block;
}

/* ---------- 6. Skills tabs ---------- */
.tabs {
  display: flex;
  gap: 8px;
  margin: 22px 0 26px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-gray);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--navy); border-bottom-color: var(--navy); }

.section .carousel + .link { display: inline-block; margin-top: 20px; }

/* ---------- 7. Trusted-by ---------- */
.trusted { padding: 72px 0; }
.trusted__line { text-align: center; color: var(--text-gray); margin-bottom: 44px; }
.logo-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px 40px;
  padding: 0 40px;
}
img.brand-logo {
  height: 42px;
  width: auto;
  flex: 0 0 auto;
  filter: grayscale(1);
  opacity: .75;
  user-select: none;
}
.logo-row--compact { gap: 16px 36px; }
.logo-row--compact img.brand-logo { height: 28px; }

/* ---------- 8. Testimonials ---------- */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  margin-top: 32px;
}
.testi-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px;
  background: var(--white);
  min-height: 350px;
}
.testi-card__quote {
  font-size: 44px;
  font-weight: 800;
  line-height: .6;
  color: var(--navy);
  height: 26px;
  margin-bottom: 10px;
}
.testi-card p { font-size: 14.5px; line-height: 1.6; flex: 1; }
.testi-card__person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 20px;
}
.testi-card__person b { font-weight: 400; font-size: 14px; }
.testi-card__person small { display: block; color: var(--text-gray); font-size: 12.5px; line-height: 1.45; }
.testi-viewall { display: inline-block; margin-top: 28px; }
.chev { font-size: 17px; line-height: 1; vertical-align: -1px; margin-left: 2px; }
.avatar {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 50%;
  object-fit: cover;
}
.testi-card .link { font-size: 14px; }
/* ARSHAD-58 (2026-10-22): arrows + dots for the testimonials slider (shown only at <= 1024px, see Responsive) */
.testi-nav { display: none; }
.testi-nav .arrow {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: #fff;
  color: var(--purple, #4b84a6); font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; transition: .2s;
}
.testi-nav .arrow:hover:not(:disabled) { background: var(--purple, #4b84a6); color: #fff; border-color: var(--purple, #4b84a6); }
.testi-nav .arrow:disabled { opacity: .35; cursor: default; }
.testi-nav .arrow:focus-visible, .testi-nav .dots button:focus-visible { outline: 2px solid var(--purple, #4b84a6); outline-offset: 2px; }
.testi-nav .dots { display: flex; gap: 8px; }
.testi-nav .dots button { width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; background: #cfd8dc; cursor: pointer; transition: width .2s, background-color .2s; }
.testi-nav .dots button.on { width: 22px; background: var(--purple, #4b84a6); }
/* Arabic: NO transform on the arrows - the ‹ / › glyphs are Unicode bidi-mirrored, so in RTL text the browser
   already draws them reversed (Previous on the right points right, Next on the left points left). A scaleX(-1)
   here flipped them back to the wrong way. */

/* ---------- 9. Certification strip ---------- */
.cert-strip {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 70px;
  align-items: center;
  background: var(--navy);
  color: var(--white);
  border-radius: 24px;
  padding: 95px 90px;
}
.cert-strip__text h2 {
  font-size: 30px;
  line-height: 1.25;
  max-width: 360px;
}
.cert-strip__text p {
  color: #cfd0d8;
  font-size: 16px;
  line-height: 1.6;
  margin: 18px 0 34px;
  max-width: 380px;
}
.cert-strip__text .link--white { font-size: 16px; }
.cert-strip__logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.cert-block {
  background: #34353f;
  border-radius: var(--radius);
  padding: 14px 14px 22px;
  text-align: left;
  font-size: 14px;
}
.cert-block b {
  display: block;
  font-size: 17px;
  font-weight: 700;
  margin-top: 16px;
}
.cert-block small {
  display: block;
  color: #b9bac4;
  font-size: 13px;
  line-height: 1.45;
  margin-top: 5px;
}
.cert-block__art {
  width: 100%;
  height: 100px;
  border-radius: 6px;
  object-fit: cover;
}

/* ---------- 10. Career accelerator ---------- */
.career-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 38px;
  margin: 36px 0 40px;
}
.career-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  transition: box-shadow .15s ease;
}
.career-card:hover { box-shadow: var(--shadow-lg); }
.career-card__thumb { height: auto; }
.career-card__thumb img { height: auto; }
.career-card h3 { font-size: 18px; padding: 18px 16px 6px; }
.career-card .rating { padding: 0 16px; }
.career-card .meta { padding: 7px 16px 22px; }
.meta { color: var(--text-gray); font-size: var(--fs-small); }

/* ---------- 11. Popular skills ---------- */
.popskills-heading { font-size: 30px; }
.popskills-divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 22px 0 44px;
}
.popskills {
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: 50px;
}
.popskills__callout h3 { font-size: 28px; line-height: 1.25; margin-bottom: 18px; }
.popskills__callout .link { font-size: 16px; }
.popskills__callout .meta { margin: 10px 0 42px; font-size: 14px; }
.popskills__callout .btn--outline {
  display: block;
  text-align: center;
  padding: 12px 20px;
  font-size: 15px;
}
.popskills__cols {
  display: grid;
  grid-template-columns: .8fr .8fr 1.4fr;
  gap: 40px;
}
.popskills__cols h4 { font-size: 20px; margin-bottom: 26px; }
.popskills__cols a.link { display: block; font-size: 16px; }
.popskills__cols small { display: block; color: var(--text-gray); font-size: 13.5px; margin: 5px 0 30px; }

/* ---------- 12. Featured partner ---------- */
.partner {
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: 30px;
  align-items: center;
  background: linear-gradient(115deg, var(--teal-deep) 30%, var(--teal) 75%, #2e8577);
  border-radius: 16px;
  padding: 42px 38px;
  margin-top: 22px;
  color: var(--white);
}
.partner__card {
  background: var(--white);
  color: var(--text);
  border-radius: 12px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  box-shadow: var(--shadow);
}
.partner__logo { max-height: 34px; width: auto; object-fit: contain; }
.partner__card h3 { font-size: 22px; line-height: 1.3; }
.partner__card p { font-size: 14.5px; }
.partner__cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px;
  margin-top: 12px;
}

.partner__carousel { margin: 0; min-width: 0; }
.partner__carousel .carousel__arrow {
  top: 50%;
  transform: translateY(-50%);
  background: var(--white);
  color: var(--navy);
}
.partner__carousel .carousel__arrow:hover { background: #ececf1; }
.chip-card {
  flex: 0 0 232px;
  scroll-snap-align: start;
  background: var(--white);
  color: var(--text);
  border-radius: 12px;
  padding: 14px 14px 18px;
  font-size: 14px;
}
.chip-card b { display: block; font-size: 18px; line-height: 1.3; margin: 16px 0 18px; }
.chip-card .card-chips { margin-top: 0; }
.chip-thumb {
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
}
.partner__card h3 a,
.chip-card b a { color: inherit; text-decoration: none; }
.partner__card h3 a:hover,
.chip-card b a:hover { text-decoration: underline; }
.chip-card > a { display: block; }

/* ---------- 13. B2B strip ---------- */
.b2b { padding: 40px 0; border-top: 1px solid var(--border); }
.b2b__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.b2b p { font-weight: 700; }

/* ---------- 14. Mega links ---------- */
.megalinks {
  background: var(--navy);
  color: var(--white);
  padding: var(--section-y) 0;
}
.megalinks h2 { margin-bottom: 30px; }
.megalinks__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px 32px;
}
.megalinks h4 { color: var(--white); margin-bottom: 12px; }
.megalinks__grid a {
  display: block;
  color: #b9bac4;
  font-size: 14px;
  padding: 4px 0;
}
.megalinks__grid a:hover { color: var(--white); text-decoration: underline; }

/* ---------- 15. Footer ---------- */
.footer {
  background: var(--navy-darkest);
  color: var(--white);
  padding: 56px 0 28px;
}
.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.footer h4 { color: var(--white); margin-bottom: 12px; }
.footer__cols a {
  display: block;
  color: #9a9ca6;
  font-size: 14px;
  padding: 4px 0;
}
.footer__cols a:hover { color: var(--white); text-decoration: underline; }
.footer__bottom {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: var(--fs-small);
  color: #9a9ca6;
}
.footer__bottom a:hover { color: var(--white); }
.footer__lang {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--radius);
  padding: 8px 12px;
  color: var(--white);
}
.footer__lang:hover { border-color: var(--white); }
/* The trigger is a <button> when there is more than one language to pick, and
   buttons inherit neither font nor background. */
button.footer__lang { background: none; font: inherit; cursor: pointer; }
/* margin-left:auto moves to the wrapper once the pill is inside one, otherwise
   the pill sits flush against the copyright instead of at the far edge. */
.footer__langmenu { margin-left: auto; }
[dir="rtl"] .footer__langmenu { margin-left: 0; margin-right: auto; }

/* Admin-uploaded pieces of the footer: the social / badge icon that can sit in
   front of a link label, the payment + VAT strip, and the institute logo that
   replaces the wordmark in the bottom bar when one is uploaded. */
.footer__icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: -3px;
}
.footer__pay {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}
.footer__pay img { height: 28px; width: auto; object-fit: contain; }
.footer__logo { height: 30px; width: auto; display: block; }

/* No Footer Settings rows for this institute -> no link block at all. Collapse
   the space it would have taken so the bar does not float in an empty band. */
.footer--bare { padding-top: 28px; }
.footer--bare .footer__pay { margin-top: 0; }
.footer--bare .footer__bottom { margin-top: 0; border-top: 0; padding-top: 0; }
.footer--bare .footer__pay + .footer__bottom {
  margin-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-top: 22px;
}

/* Popup for a CMS footer page (Admin > CMS Pages). Hidden until the matching
   footer link is clicked — see the toggle at the end of partials/footer.blade.php. */
.sk-pagemodal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(16, 17, 22, .6);
  padding: 24px;
  overflow-y: auto;
}
.sk-pagemodal.is-open { display: flex; align-items: flex-start; justify-content: center; }
.sk-pagemodal__box {
  position: relative;
  background: var(--white);
  color: var(--navy);
  border-radius: var(--radius);
  max-width: 760px;
  width: 100%;
  margin: auto;
  padding: 32px 36px;
}
.sk-pagemodal__box h2 { margin: 0 0 16px; padding-right: 32px; }
[dir="rtl"] .sk-pagemodal__box h2 { padding-right: 0; padding-left: 32px; }
.sk-pagemodal__close {
  position: absolute;
  top: 12px;
  right: 16px;
  border: 0;
  background: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: var(--navy);
}
[dir="rtl"] .sk-pagemodal__close { right: auto; left: 16px; }
.sk-pagemodal__body { font-size: 15px; line-height: 1.7; }
.sk-pagemodal__body img { max-width: 100%; height: auto; }
.sk-pagemodal__body a { color: var(--purple); text-decoration: underline; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .course-card { flex-basis: calc(33.333% - 16px); }
  .career-grid { grid-template-columns: repeat(2, 1fr); }
  /* ARSHAD-58: testimonials become a swipe slider (2 per view; 1 + peek at <= 640px) */
  .testi-grid {
    display: flex; grid-template-columns: none; gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain;
    padding: 4px 2px 8px;
  }
  .testi-grid::-webkit-scrollbar { display: none; }
  .testi-grid > .testi-card { flex: 0 0 calc((100% - 16px) / 2); scroll-snap-align: start; min-width: 0; }
  .testi-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
  .megalinks__grid { grid-template-columns: repeat(3, 1fr); }
  .popskills { grid-template-columns: 1fr; gap: 32px; }
  .cert-strip { grid-template-columns: 1fr; }
  .partner { grid-template-columns: 1fr; }
  .hide-md { display: none; }
}

@media (max-width: 640px) {
  .testi-grid > .testi-card { flex-basis: 85%; }   /* ARSHAD-58: one card + a peek of the next */
}

@media (max-width: 900px) {
  .logo-row { flex-wrap: wrap; justify-content: center; padding: 0; }
  img.brand-logo { height: 32px; }

  .hero__card {
    position: static;
    transform: none;
    max-width: none;
    box-shadow: none;
    padding: 20px 0 8px;
    border-radius: 0;
  }
  .hero__card h1 { font-size: 26px; }
}

@media (max-width: 768px) {
  :root { --section-y: 48px; --fs-h1: 24px; --fs-h2: 21px; }

  .header__inner { flex-wrap: wrap; row-gap: 10px; }
  .header__nav { order: 3; }
  .search { order: 4; flex-basis: 100%; max-width: none; }
  .header__actions { margin-left: auto; }
  .btn--ghost { display: none; }

  .promo { grid-template-columns: 1fr; padding: 36px 24px; }
  .promo__features { grid-template-columns: 1fr; }

  .cert-strip { padding: 32px 24px; }
  .cert-strip__logos { grid-template-columns: 1fr; }

  .career-grid { grid-template-columns: 1fr; }
  .popskills__cols { grid-template-columns: 1fr; gap: 24px; }
  .megalinks__grid, .footer__cols { grid-template-columns: repeat(2, 1fr); }

  .carousel__arrow { display: none; }
  .course-card { flex-basis: 250px; }
  .pop-float { display: none !important; }

  .b2b__inner { flex-direction: column; text-align: center; }
  .footer__lang { margin-left: 0; }

  .announce { padding: 8px 40px; }
  .announce__timer { display: block; margin: 4px auto 0; width: max-content; }
}

@media (max-width: 480px) {
  .megalinks__grid, .footer__cols { grid-template-columns: 1fr; }
  .header__nav { display: none; }
}

/* ---------- Carousel → continuous marquee (2026-09-30, Arshad) ----------
   Added by js/bx-marquee.js to .carousel blocks with 3+ cards. The original
   carousel rules above stay: a carousel without .carousel--marquee (fewer than
   3 cards, data-marquee="off", or prefers-reduced-motion) keeps its arrows and
   scroll-snap. The JS sets --mq-shift / --mq-shift-rtl to the exact width of
   one set of cards (incl. its trailing gap) so the loop has no jump; the calc()
   fallbacks are the same value for a 24px gap. */
/* The JS wraps the track in .carousel__viewport: it clips + fades the moving
   cards, while the arrows (siblings, outside it) stay fully visible. */
.carousel--marquee .carousel__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
/* Arrows stay (desktop; the existing <=768px rule still hides them). A click
   nudges the marquee by one card; see bx-marquee.js. */
.carousel--marquee .carousel__track {
  width: max-content;
  overflow: visible !important;
  scroll-snap-type: none !important;
  animation: bx-marquee var(--marquee-duration, 40s) linear infinite;
  will-change: transform;
}
/* Course cards size themselves in % of the track; a max-content track has no
   width to take a % of, so the JS freezes the measured card width here. */
.carousel--marquee .carousel__track > * { flex-shrink: 0; }
.carousel--marquee .course-card { flex: 0 0 var(--mq-card-w, 270px); }
.carousel--marquee.is-reverse .carousel__track { animation-direction: reverse; }
.carousel--marquee:hover .carousel__track,
.carousel--marquee:has(:focus-visible) .carousel__track,
.carousel--marquee.is-paused .carousel__track { animation-play-state: paused; }
@keyframes bx-marquee { to { transform: translateX(var(--mq-shift, calc(-50% - 12px))); } }
[dir="rtl"] .carousel--marquee .carousel__track { animation-name: bx-marquee-rtl; }
@keyframes bx-marquee-rtl { to { transform: translateX(var(--mq-shift-rtl, calc(50% + 12px))); } }
@media (prefers-reduced-motion: reduce) {
  .carousel--marquee .carousel__track { animation: none; }
}

/* ===== ARSHAD-87 (2026-10-23): home "business training" promo - pastel round badge icons ===== 
   The .feat-icon text glyphs (▦ ◉ ⬡ ✦) are hidden (font-size:0) and each badge draws a 20px line icon with a CSS
   mask (inline SVG), so it stays crisp at any zoom. Markup and text unchanged. In Arabic the flex row is RTL, so the
   badge stays at the start of each line. The <=768px one-column rule above is kept. */
.promo__features { gap: 18px 28px; }
.promo__features li { align-items: flex-start; gap: 14px; line-height: 1.55; }
.promo__features .feat-icon {
  flex: 0 0 40px;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0; line-height: 0; color: transparent;
  border: 0; box-shadow: none;
}
.promo__features .feat-icon::before {
  content: "";
  width: 20px; height: 20px;
  background-color: var(--feat-ink, currentColor);
  -webkit-mask: var(--feat-svg) center / 20px 20px no-repeat;
          mask: var(--feat-svg) center / 20px 20px no-repeat;
}
/* 1 sparkles - Training programs tailored to your business needs */
.promo__features li:nth-child(1) .feat-icon { background: #DCD6FF; --feat-ink: #4B3BA8;
  --feat-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z'/%3E%3Cpath d='M20 3v4M22 5h-4M4 17v2M5 18H3'/%3E%3C/svg%3E"); }
/* 2 bulb - Flexible learning solutions for your employees */
.promo__features li:nth-child(2) .feat-icon { background: #C9F1F4; --feat-ink: #0E6E78;
  --feat-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6M10 22h4'/%3E%3C/svg%3E"); }
/* 3 terminal - Develop professional and industry-specific skills */
.promo__features li:nth-child(3) .feat-icon { background: #FFD5DA; --feat-ink: #A3263A;
  --feat-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='m7 11 2-2-2-2M11 13h4'/%3E%3C/svg%3E"); }
/* 4 trophy - Empower your team and improve performance */
.promo__features li:nth-child(4) .feat-icon { background: #CDEFD9; --feat-ink: #1E6B3E;
  --feat-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6M18 9h1.5a2.5 2.5 0 0 0 0-5H18M4 22h16'/%3E%3Cpath d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/%3E%3Cpath d='M18 2H6v7a6 6 0 0 0 12 0V2Z'/%3E%3C/svg%3E"); }
/* ===== END ARSHAD-87 ===== */