/*
  QAMR International — Saudi Driver Jobs landing page
  Hand-authored, dependency-free stylesheet. Brand tokens (colors/fonts)
  are taken from the live qamrjob.com/driver production stylesheet.
*/

/* ---------- Tokens ---------- */
:root {
  --navy-900: #0b0c39;
  --navy-800: #0e104b;
  --navy-700: #14176c;
  --navy-600: #171a7c;
  --navy-500: #191d88;
  --gold-100: #fde3b0;
  --gold-400: #f9b633;
  --gold-500: #f7a400;
  --gold-600: #e19500;
  --ink: #3e4073;
  --ink-soft: #6668a0;
  --white: #ffffff;
  --gray-50: #f7f8fb;
  --gray-100: #eef0f8;
  --border: #e3e5f3;
  --success: #1e8e5a;
  --danger: #d64545;

  --font-heading: "Sora", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --font-arabic: "Tajawal", "Segoe UI", sans-serif; /* reserved for future Arabic/RTL content — not loaded, since none exists on this site today */
  --font-hindi: "Khand", "Segoe UI", sans-serif; /* loaded on index.html only, where Hindi content exists (see .hi / [lang="hi"]) */

  --container: 1180px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --shadow-sm: 0 2px 10px rgba(11, 12, 57, 0.06);
  --shadow-md: 0 10px 30px rgba(11, 12, 57, 0.10);
  --shadow-lg: 0 24px 60px rgba(11, 12, 57, 0.16);

  /* Colour-system extension: violet deepens the navy gradients, teal is a
     narrow "verified/trust" accent used sparingly alongside gold. */
  --violet-700: #4c1d95;
  --violet-600: #5b21b6;
  --violet-500: #6d28d9;
  --gold-300: #ffd88a;
  --teal-600: #0d9488;
  --teal-100: #ccfbf4;
  --shadow-glow-gold: 0 16px 36px -8px rgba(247, 164, 0, 0.45);
  --shadow-glow-navy: 0 16px 36px -10px rgba(25, 29, 136, 0.4);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--navy-800);
  line-height: 1.18;
  margin: 0 0 .6em;
  font-weight: 700;
}
p { margin: 0 0 1em; }

/* If Arabic content is ever added (e.g. <html lang="ar"> or a .rtl wrapper),
   it should render in Tajawal rather than the Latin heading/body fonts —
   load Tajawal from Google Fonts on that page before enabling this. */
[lang="ar"], .rtl { font-family: var(--font-arabic); }
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4,
.rtl h1, .rtl h2, .rtl h3, .rtl h4 { font-family: var(--font-arabic); }

/* Hindi content on index.html (hero + lead form) — Khand is a Latin+Devanagari
   Google Font, loaded on that page only, matching qamrjob.com's own pattern. */
[lang="hi"], .hi { font-family: var(--font-hindi); }
/* Inline translations tucked inside a label/button stay visually secondary
   to the English text they follow; standalone Hindi lines (hero, section
   subheadings) keep their own full-size rules and aren't affected. */
label .hi, .btn-bilingual .hi { font-size: 12.5px; font-weight: 500; opacity: .78; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 1rem; }
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}
section { padding: 84px 0; }
@media (max-width: 767px) {
  section { padding: 56px 0; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: 14px;
}
/* .eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--gold-500);
  border-radius: 2px;
} */
.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head.center { max-width: 680px; margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(28px, 3.6vw, 40px); }
.section-head p { color: var(--ink-soft); font-size: 17px; }

/* ---------- Buttons ----------
   One consistent hover language across every button on the site: a smooth
   background/border/opacity shift only — no lift, no jump, no shadow
   fireworks. Applies equally to .btn-gold/.btn-violet/.btn-outline*. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 30px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15.5px;
  border: 2px solid transparent;
  transition: background-color .2s ease, background-image .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-gold {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  color: var(--navy-900);
  box-shadow: var(--shadow-glow-gold);
}
.btn-gold:hover { background: linear-gradient(135deg, var(--gold-300), var(--gold-500)); }
.btn-violet {
  background: linear-gradient(135deg, var(--violet-500), var(--navy-700));
  color: #fff;
  box-shadow: 0 14px 30px -8px rgba(109, 40, 217, .55);
}
.btn-violet:hover { background: linear-gradient(135deg, var(--violet-500), var(--navy-600)); }
.btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, .55);
  color: var(--white);
}
.btn-outline:hover { background: rgba(255, 255, 255, .14); border-color: var(--white); }
.btn-outline-navy {
  background: transparent;
  border-color: var(--navy-700);
  color: var(--navy-700);
}
.btn-outline-navy:hover { background: var(--navy-700); color: var(--white); }
.btn-block { width: 100%; }
.btn-sm { padding: 11px 20px; font-size: 14px; }
.btn[disabled] { opacity: .6; cursor: not-allowed; }

/* One consistent, compact pill size for every button on mobile — buttons
   that stretch full-width in a narrow column (.hero-ctas, footer/final CTA
   rows, the form's Submit) are the ones that read as "oversized" on phones,
   since the desktop padding scales with the full viewport width. */
@media (max-width: 767px) {
  .btn { padding: 12px 22px; font-size: 14px; gap: 7px; }
  .btn svg { width: 16px; height: 16px; }
  .btn-sm { padding: 9px 16px; font-size: 13px; }
  .header-actions .btn-sm { padding: 8px 14px; font-size: 12.5px; }
}

/* ---------- Header ----------
   Sits transparent over whatever hero is directly beneath it (so header +
   hero read as one composition), and only becomes a solid frosted bar once
   the page is scrolled past the hero. `.site-header--on-dark` is added only
   on pages whose hero background is dark (currently the homepage) so nav
   text/logo can flip to a light variant while at rest; it has no effect
   once `.is-scrolled` is present. */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding: 22px 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.site-header--on-dark:not(.is-scrolled) {
  background: linear-gradient(180deg, rgba(6, 7, 40, .5) 0%, rgba(6, 7, 40, 0) 100%);
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 30px rgba(11, 12, 57, .1);
  border-color: var(--border);
  padding: 13px 0;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; overflow: visible; }
.brand {
  display: flex; align-items: center; gap: 10px;
  flex: none; /* never let the flex row shrink the logo to fit nav/actions */
  position: relative;
}
.brand-logo {
  display: block;
  height: 42px;
  width: auto;
  aspect-ratio: 340 / 68; /* locks the box to the real image ratio before the file/CSS has finished loading, so it can never flash at native (340x68) size on first paint */
  max-width: none;
  transition: opacity .2s ease;
}
.brand-logo--light {
  display: none;
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  /* stacked exactly on top of the dark variant (rather than a sibling that could
     briefly lay out side-by-side/wrap before its `display:none` applies) so only
     one logo can ever occupy layout space at a time */
}
.site-header--on-dark:not(.is-scrolled) .brand-logo--dark { visibility: hidden; }
.site-header--on-dark:not(.is-scrolled) .brand-logo--light { display: block; }
@media (max-width: 480px) {
  .brand-logo { height: 34px; }
}

.main-nav { display: flex; align-items: center; }
.main-nav-links { display: flex; align-items: center; gap: 24px; }
.main-nav a {
  color: var(--navy-700);
  font-weight: 500;
  font-size: 15px;
  transition: color .2s ease;
  position: relative;
}
.main-nav a:hover { color: var(--gold-600); }
.site-header--on-dark:not(.is-scrolled) .main-nav a { color: rgba(255, 255, 255, .94); text-shadow: 0 1px 6px rgba(0, 0, 0, .25); }
.site-header--on-dark:not(.is-scrolled) .main-nav a:hover { color: var(--gold-300); }

.header-actions { display: flex; align-items: center; gap: 14px; }
.header-actions .btn-sm { padding: 10px 20px; }
.site-header--on-dark:not(.is-scrolled) .header-actions .btn-outline-navy { border-color: rgba(255, 255, 255, .55); color: #fff; }
.site-header--on-dark:not(.is-scrolled) .header-actions .btn-outline-navy:hover { background: rgba(255, 255, 255, .15); color: #fff; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(25, 29, 136, .08);
  border-radius: 10px;
  align-items: center;
  justify-content: center;
}
.nav-toggle span { width: 20px; height: 2px; background: var(--navy-800); border-radius: 2px; transition: transform .25s ease, opacity .25s ease, background-color .25s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* The open drawer has its own dedicated .nav-close (X) button, so the
   hamburger — which also turns into an X shape via the transforms above —
   is hidden while open to avoid two X icons showing at once. */
.nav-toggle[aria-expanded="true"] { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; }
.site-header--on-dark:not(.is-scrolled) .nav-toggle { background: rgba(255, 255, 255, .16); }
.site-header--on-dark:not(.is-scrolled) .nav-toggle span { background: #fff; }

.main-nav-head, .nav-close, .main-nav-cta { display: none; }
@media (max-width: 991px) {
  .main-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 84vw);
    height: 100vh;
    height: 100dvh;
    background: var(--navy-900);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 18px 22px 24px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .3s ease;
    box-shadow: -20px 0 50px rgba(0, 0, 0, .3);
  }
  .main-nav.is-open { transform: translateX(0); }

  .main-nav-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 16px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    flex: none;
  }
  .main-nav-logo { height: 26px; width: auto; }
  .nav-close {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #fff;
    flex: none;
    transition: background-color .2s ease, border-color .2s ease;
  }
  .nav-close:hover { background: rgba(255, 255, 255, .15); }
  .nav-close svg { width: 15px; height: 15px; }

  .main-nav-links { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav a { padding: 12px 2px; width: 100%; color: var(--white); border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 16px; text-shadow: none; }
  .main-nav a:hover { color: var(--gold-500); }
  .main-nav a:active { color: var(--gold-400); background: rgba(255, 255, 255, .04); }

  .main-nav-cta { display: flex; margin-top: 18px; flex: none; }

  .header-actions .btn-outline-navy { display: none; }
  .nav-toggle { display: inline-flex; }
}

.nav-backdrop {
  position: fixed; inset: 0; background: rgba(5, 5, 25, .55);
  opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 480;
}
.nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* ---------- Hero (dark, vibrant gradient + layered photo composition) ---------- */
@keyframes heroRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes heroDrift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(14px); } }

.hero {
  position: relative;
  padding: 176px 0 112px;
  background:
    radial-gradient(1100px 620px at 12% -12%, rgba(247, 164, 0, .32), transparent 58%),
    radial-gradient(900px 560px at 92% 8%, rgba(109, 40, 217, .45), transparent 55%),
    linear-gradient(150deg, var(--navy-900) 0%, var(--navy-700) 52%, var(--violet-700) 100%);
  color: rgba(255, 255, 255, .88);
  overflow: hidden;
}
.hero-blobs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-blobs span {
  position: absolute;
  border-radius: 50%;
  filter: blur(14px);
  opacity: .7;
}
.hero-blobs span:nth-child(1) { width: 420px; height: 420px; left: -140px; top: -80px; background: radial-gradient(circle, rgba(247, 164, 0, .28), transparent 70%); }
.hero-blobs span:nth-child(2) { width: 360px; height: 360px; right: 4%; top: 20px; background: radial-gradient(circle, rgba(109, 40, 217, .38), transparent 70%); }
.hero-blobs span:nth-child(3) { width: 300px; height: 300px; right: -100px; bottom: -80px; background: radial-gradient(circle, rgba(13, 148, 136, .22), transparent 70%); }

.hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: start;
}
.hero-copy { position: relative; padding-top: 34px; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 10px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 22px;
}
.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-400); box-shadow: 0 0 0 4px rgba(247, 164, 0, .28); }
.hero h1 {
  color: #fff;
  font-size: clamp(28px, 3.8vw, 46px);
  letter-spacing: -.01em;
  margin-bottom: 20px;
}
.hero h1 .mark {
  position: relative;
  display: inline-block;
  z-index: 1;
  background: linear-gradient(100deg, var(--gold-300), var(--gold-500) 60%, var(--gold-600));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-spark {
  position: absolute;
  top: -22px; right: 6%;
  width: 34px; height: 34px;
  color: var(--gold-400);
  animation: heroRotate 12s linear infinite;
}
.hero-title-hi {
  font-weight: 600;
  font-size: clamp(19px, 2.4vw, 26px);
  color: var(--gold-300);
  margin: 8px 0 6px;
  max-width: 620px;
}
.hero-lede-salary { font-size: 18.5px; color: rgba(255, 255, 255, .82); max-width: 540px; margin-bottom: 32px; }
.hero-lede { font-size: 18.5px; color: rgba(255, 255, 255, .82); max-width: 540px; margin-bottom: 32px; }
.hero-lede-hi { margin-top: 0; margin-bottom: 32px; opacity: .88; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; }
/* Compact two-line bilingual CTA button — keeps the hero to a single, clear
   primary action (see index.html) instead of a duplicate English/Hindi pair. */
.btn-bilingual { flex-direction: column; gap: 1px; line-height: 1.25; padding-block: 12px; }

/* Hero lead-form card: the actual apply form (see .apply-form below) lives
   here now instead of a hero photo, so it's the first thing a visitor can
   act on without scrolling. */
.hero-form-wrap { position: relative; padding-top: 34px; }
.hero-form-wrap .apply-form { max-width: 400px; margin-inline: auto; padding: 24px 26px; }
.hero-form-head { margin-bottom: 12px; text-align: center; }
.hero-form-head .eyebrow { justify-content: center; margin-bottom: 6px; font-size: 12px; }
.hero-form-head h2 { font-size: clamp(18px, 2vw, 21px); margin-bottom: 4px; }
.hero-form-head p { color: var(--ink-soft); font-size: 13px; line-height: 1.4; margin: 0; }
.hero-form-wrap .form-grp { margin-bottom: 11px; }
.hero-form-wrap .form-grp .form-label { font-size: 12.5px; margin-bottom: 4px; }
.hero-form-wrap .form-grp input[type="text"],
.hero-form-wrap .form-grp input[type="email"],
.hero-form-wrap .form-grp input[type="tel"] { padding: 10px 13px; font-size: 14px; }
.hero-form-wrap .form-grp .text-error, .hero-form-wrap .form-grp em.text-error { min-height: 0; margin-top: 3px; }
.hero-form-wrap form > .btn-block { margin-top: 4px; padding: 12px 20px; font-size: 14.5px; }
.hero-form-wrap .apply-channels { margin-top: 12px; }
.hero-form-wrap .apply-channel { padding: 9px 10px; font-size: 12.5px; }
.hero-form-wrap .apply-channel .ic { width: 22px; height: 22px; }
.hero-form-wrap .apply-channel .ic svg { width: 11px; height: 11px; }
/* select2 renders its own markup for the "Apply For" dropdown — shrink it
   to match the compact inputs above (base select2 rules elsewhere on the
   page, e.g. the full apply-for-once-revealed step, are untouched). */
.hero-form-wrap .select2-container--default .select2-selection--single { height: 42px !important; }
.hero-form-wrap .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 40px !important; font-size: 14px; }
.hero-form-wrap .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px !important; }

@media (max-width: 991px) {
  .hero { padding: 140px 0 96px; }
  .hero .container { grid-template-columns: 1fr; gap: 36px; }
  /* Mobile shows the hero heading/lede first, then the lead form card
     right below it — natural DOM order already puts hero-copy first and
     hero-form-wrap second, so no `order` override is needed here (desktop
     keeps its left-copy/right-form layout via the two-column grid above,
     untouched). Hero text is centered on mobile to match; desktop stays
     left-aligned since only this media query touches text-align. */
  .hero-copy { padding-top: 0; text-align: center; }
  .hero-title-hi, .hero-lede { margin-inline: auto; }
  /* The form already reads as the primary call to action right below the
     hero text, so the separate Apply Now button is redundant here —
     desktop keeps it (this rule only applies inside this breakpoint). */
  .hero-ctas { display: none; }
  .hero-form-wrap { padding-top: 0; }
  .hero-form-wrap .apply-form { max-width: 420px; }
}
@media (max-width: 767px) {
  /* Compact the hero copy so the lead form starts higher and more of it
     fits in the first mobile viewport — same content, tighter type scale
     and spacing only (nothing removed, nothing resized on desktop/tablet,
     this block only applies below 767px). */
  .hero { padding-top: 116px; }
  .hero .container { gap: 20px; }
  .hero-badge { display: none; }
  .hero h1 { font-size: 25px; line-height: 1.5; margin-bottom: 10px; }
  .hero-spark { display: none; }
  .hero-title-hi { font-size: 23.5px; margin: 2px 0 8px; }
  .hero-lede { font-size: 20px; line-height: 1.5; margin-bottom: 12px; }
  .hero-lede-salary { font-size: 17px; line-height: 1.5; margin-bottom: 12px; }
  .hero-lede-hi { margin-bottom: 0; }
}

/* ---------- Stats: floating card bridging the hero/next-section seam ---------- */
/* The negative margin below pulls this only 60px up into the hero, so only
   that top 60px should stay transparent (letting the hero's dark gradient
   show through behind the card, as intended) — the wrap's remaining height
   sits below the hero's true bottom edge, where it used to show the plain
   white body background straight through. That read as a hard white block
   sitting on top of the (pale cream) Success Stories section right after
   it, so the lower portion is now painted to match that section's tone
   instead of staying transparent. Breakpoints below keep the transparent
   portion sized to match each width's own margin-top value. */
.stats-float-wrap { position: relative; z-index: 2; margin-top: -60px; padding-bottom: 0; background: linear-gradient(180deg, transparent 0, transparent 60px, #fdf3e2 60px, #fdf3e2 100%); }
.stats-float {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 26px 60px -18px rgba(11, 12, 57, .35);
  padding: 30px 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stats-float .stat {
  text-align: center;
  padding: 0 14px;
  position: relative;
}
.stats-float .stat:not(:last-child)::after {
  content: "";
  position: absolute; right: 0; top: 8%; bottom: 8%; width: 1px;
  background: var(--border);
}
.stats-float .stat .ic {
  width: 46px; height: 46px; margin: 0 auto 12px;
  border-radius: 13px;
  background: rgba(247, 164, 0, .14);
  color: var(--gold-600);
  display: flex; align-items: center; justify-content: center;
}
.stats-float .stat .ic svg { width: 22px; height: 22px; }
.stats-float .stat:nth-child(2) .ic { background: rgba(109, 40, 217, .12); color: var(--violet-600); }
.stats-float .stat:nth-child(3) .ic { background: rgba(13, 148, 136, .12); color: var(--teal-600); }
.stats-float .stat b { display: block; font-family: var(--font-heading); font-size: clamp(22px, 2.6vw, 30px); color: var(--navy-800); }
.stats-float .stat span { font-size: 12.5px; color: var(--ink-soft); }
@media (max-width: 767px) {
  .stats-float { grid-template-columns: repeat(2, 1fr); gap: 26px 8px; border-radius: var(--radius-md); }
  .stats-float .stat:nth-child(2)::after { display: none; }
  .stats-float .stat:nth-child(1),
  .stats-float .stat:nth-child(2) { padding-bottom: 20px; border-bottom: 1px solid var(--border); }
}
@media (max-width: 991px) { .stats-float-wrap { margin-top: -44px; background: linear-gradient(180deg, transparent 0, transparent 44px, #fdf3e2 44px, #fdf3e2 100%); } }
@media (max-width: 480px) { .stats-float-wrap { margin-top: -32px; background: linear-gradient(180deg, transparent 0, transparent 32px, #fdf3e2 32px, #fdf3e2 100%); } .stats-float { padding: 22px 10px; } }

/* ---------- Cards grid (why choose / opportunities) ---------- */
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-inline: auto; }
/* Declared here (ahead of the responsive overrides below) rather than down
   in the video-card component block — a class needs to appear before any
   media query that's meant to override it, or the later un-conditional
   base rule wins the cascade regardless of viewport and the override never
   takes effect. That's what was causing 4 cramped columns on mobile. */
.video-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 991px) { .card-grid, .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .card-grid, .card-grid.cols-2, .video-grid { grid-template-columns: 1fr; } }

.feature-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 30px 26px;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--gold-500), var(--violet-500));
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.feature-card:hover::before { transform: scaleX(1); }
.feature-card .ic {
  width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(135deg, var(--navy-700), var(--navy-500));
  color: var(--gold-400);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-glow-navy);
}
.card-grid .feature-card:nth-child(4n+1) .ic,
.card-grid .opp-card:nth-child(4n+1) .ic {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  color: var(--navy-900);
  box-shadow: var(--shadow-glow-gold);
}
.card-grid .feature-card:nth-child(4n+2) .ic,
.card-grid .opp-card:nth-child(4n+2) .ic {
  background: linear-gradient(135deg, var(--violet-500), var(--navy-700));
  color: #fff;
  box-shadow: 0 10px 22px -8px rgba(109, 40, 217, .55);
}
.card-grid .feature-card:nth-child(4n+3) .ic,
.card-grid .opp-card:nth-child(4n+3) .ic {
  background: linear-gradient(135deg, var(--teal-600), #0f766e);
  color: #fff;
  box-shadow: 0 10px 22px -8px rgba(13, 148, 136, .5);
}
.feature-card h3 { font-size: 19px; margin-bottom: 8px; }
.feature-card p { color: var(--ink-soft); font-size: 15px; margin: 0; }

/* Opportunity cards (driver categories) */
.opp-card {
  background: linear-gradient(165deg, var(--white), var(--gray-50));
  border-radius: var(--radius-md);
  padding: 32px 26px;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.opp-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.opp-card .ic {
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(135deg, var(--navy-700), var(--navy-500));
  box-shadow: var(--shadow-glow-navy);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-400);
  font-size: 25px;
  margin-bottom: 20px;
}
.opp-card h3 { font-size: 20px; margin-bottom: 8px; }
.opp-card p { color: var(--ink-soft); font-size: 15px; margin-bottom: 18px; }
.opp-card a { font-family: var(--font-heading); font-weight: 600; font-size: 14.5px; color: var(--navy-700); display: inline-flex; align-items: center; gap: 7px; }
.opp-card a svg { width: 15px; height: 15px; transition: transform .2s ease; }
.opp-card a:hover svg { transform: translateX(4px); }

/* ---------- Success-story videos (click-to-load YouTube facade) ---------- */
/* .video-grid's grid/columns rules live above, next to .card-grid — see the
   comment there. */
.video-card {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  padding: 0;
  transition: transform .2s ease, box-shadow .2s ease;
}
.video-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.video-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--gray-100); overflow: hidden; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.video-card:hover .video-thumb img { transform: scale(1.05); }
.video-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(15, 18, 60, 0) 40%, rgba(15, 18, 60, .55));
}
.video-play svg {
  width: 52px; height: 52px;
  padding: 14px;
  color: var(--navy-900);
  background: rgba(255, 255, 255, .92);
  border-radius: 50%;
  box-shadow: 0 8px 20px -6px rgba(15, 18, 60, .5);
  transition: transform .2s ease, background-color .2s ease;
}
.video-card:hover .video-play svg { transform: scale(1.08); background: var(--white); }
.video-title { display: block; padding: 14px 16px 16px; }
.video-title > span:first-child { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 13.5px; color: var(--navy-800); line-height: 1.35; margin-bottom: 4px; }
.video-title .hi { display: block; font-size: 13px; color: var(--ink-soft); line-height: 1.4; opacity: 1; }

/* ---------- Split section (about / opportunity) ---------- */
.split {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 60px;
  align-items: center;
}
.split.reverse .split-media { order: 2; }
.split-media { position: relative; }
.split-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; aspect-ratio: 4/3.1; object-fit: cover; }
.split-media::before {
  content: "";
  position: absolute; inset: -10px auto auto -10px; width: 90%; height: 90%;
  background: linear-gradient(140deg, var(--gold-400), var(--violet-500));
  border-radius: var(--radius-lg);
  z-index: -1;
  opacity: .18;
}
.split-media .badge-float {
  position: absolute; bottom: -20px; right: -18px;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 10px;
  border-bottom: 3px solid var(--gold-500);
}
.split-media .badge-float b { display: block; font-family: var(--font-heading); font-size: 18px; color: var(--navy-800); }
.split-media .badge-float span { font-size: 12px; color: var(--ink-soft); }
.split-body ul.check-list { margin-top: 22px; display: grid; gap: 12px; }
.split-body ul.check-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; }
.split-body ul.check-list svg { flex: none; margin-top: 3px; width: 19px; height: 19px; color: var(--gold-600); }
.check-list .hi { display: block; margin-top: 2px; }
/* Leadership section subtitle (name + title) beneath the section heading. */
.leader-position { font-family: var(--font-heading); font-weight: 700; font-size: 16.5px; color: var(--gold-600); margin: -8px 0 18px; }
@media (max-width: 991px) {
  .split, .split.reverse { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .split-media { max-width: 460px; margin-inline: auto; }
}

/* ---------- Requirements ---------- */
.req-panel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(700px 380px at 100% 0%, rgba(247, 164, 0, .18), transparent 60%),
    linear-gradient(160deg, var(--navy-800), var(--navy-600) 60%, var(--violet-700));
  border-radius: var(--radius-lg);
  padding: 46px;
  color: var(--white);
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 40px;
}
.req-panel .req-intro h2 { color: var(--white); }
.req-panel .req-intro p { color: rgba(255, 255, 255, .72); }
.req-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.req-item {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.req-item svg { flex: none; width: 20px; height: 20px; color: var(--gold-500); margin-top: 2px; }
.req-item b { display: block; font-family: var(--font-heading); font-size: 15.5px; margin-bottom: 3px; }
.req-item span { font-size: 13.5px; color: rgba(255, 255, 255, .72); }
.req-note { grid-column: 1 / -1; font-size: 13.5px; color: rgba(255, 255, 255, .6); margin-top: 4px; }
@media (max-width: 991px) {
  .req-panel { grid-template-columns: 1fr; padding: 32px 24px; }
  .req-list { grid-template-columns: 1fr; }
}

/* ---------- Process ---------- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  position: relative;
}
.process-grid::before {
  content: "";
  position: absolute;
  top: 38px; left: 10%; right: 10%; height: 2px;
  background: linear-gradient(90deg, var(--gold-500), var(--violet-500), var(--teal-600), var(--gold-500));
  opacity: .35;
  z-index: 0;
}
.process-step {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px 18px 22px;
  text-align: center;
  position: relative;
  z-index: 1;
  transition: transform .2s ease, box-shadow .2s ease;
}
.process-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.process-step .num {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy-700), var(--violet-600));
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  font-size: 15px;
  box-shadow: var(--shadow-glow-navy);
}
.process-grid .process-step:nth-child(5n+1) .num { background: linear-gradient(135deg, var(--gold-400), var(--gold-600)); color: var(--navy-900); box-shadow: var(--shadow-glow-gold); }
.process-grid .process-step:nth-child(5n+3) .num { background: linear-gradient(135deg, var(--teal-600), #0f766e); box-shadow: 0 10px 22px -8px rgba(13, 148, 136, .5); }
.process-step h3 { font-size: 15.5px; margin-bottom: 6px; }
.process-step p { font-size: 13px; color: var(--ink-soft); margin: 0; }
@media (max-width: 991px) { .process-grid { grid-template-columns: repeat(3, 1fr); } .process-grid::before { display: none; } }
@media (max-width: 560px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Saudi opportunity (dark feature band) ---------- */
.opportunity-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(600px 320px at 0% 100%, rgba(13, 148, 136, .22), transparent 60%),
    linear-gradient(155deg, var(--navy-900), var(--navy-700) 60%, var(--violet-700));
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
  align-items: center;
}
.opportunity-band h2 { color: var(--white); }
.opportunity-band p { color: rgba(255, 255, 255, .74); }
.opportunity-points { display: grid; gap: 18px; margin-top: 10px; }
.opportunity-points li { display: flex; gap: 14px; align-items: flex-start; }
.opportunity-points .ic {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  background: rgba(247, 164, 0, .16); color: var(--gold-500);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.opportunity-points b { display: block; font-family: var(--font-heading); font-size: 15.5px; }
.opportunity-points span { font-size: 13.5px; color: rgba(255, 255, 255, .68); }
@media (max-width: 991px) {
  .opportunity-band { grid-template-columns: 1fr; padding: 36px 26px; }
}

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; margin-inline: auto; display: grid; gap: 14px; }
.faq-item {
  border: 1px solid var(--border); border-left: 3px solid transparent;
  border-radius: var(--radius-md); overflow: hidden; background: var(--white);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-item[data-open="true"] { border-left-color: var(--gold-500); box-shadow: var(--shadow-sm); }
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px;
  background: transparent;
  border: none;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16.5px;
  color: var(--navy-800);
}
.faq-q .plus { flex: none; width: 24px; height: 24px; position: relative; }
.faq-q .plus::before, .faq-q .plus::after {
  content: ""; position: absolute; background: var(--navy-700); border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease, background-color .25s ease;
}
.faq-q .plus::before { width: 14px; height: 2px; top: 11px; left: 5px; }
.faq-q .plus::after { width: 2px; height: 14px; left: 11px; top: 5px; }
.faq-item[data-open="true"] .plus::after { transform: rotate(90deg); opacity: 0; }
.faq-item[data-open="true"] .plus::before { background: var(--gold-600); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a-inner { padding: 0 24px 20px; color: var(--ink-soft); font-size: 15px; }
.faq-a-inner p + p { margin-top: 10px; }
.faq-a-inner ul { margin: 6px 0 0; padding-left: 20px; }
.faq-a-inner li { margin-bottom: 4px; }
/* Bilingual FAQ (see index.html): Hindi sits on its own line below the
   English question/answer it translates, matching qamrjob.com's own
   heading-then-translation pattern rather than running inline. */
.faq-q .hi, .faq-a-inner .hi { display: block; margin-top: 4px; }
.faq-q .hi { font-weight: 500; }

/* ---------- Apply / contact ---------- */
.apply-channels { margin-top: 22px; display: flex; gap: 10px; }
.apply-channel {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 12px;
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy-800);
  transition: background-color .2s ease, border-color .2s ease;
}
.apply-channel:hover { background: var(--white); border-color: var(--gold-400); }
.apply-channel .ic { width: 26px; height: 26px; border-radius: 50%; background: var(--gold-100); color: var(--gold-600); display: flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.apply-channel .ic svg { width: 13px; height: 13px; }

.apply-form {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-md);
}
@media (max-width: 560px) {
  .apply-channels { flex-direction: column; }
}

/* ---------- Final CTA ---------- */
.final-cta {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 400px at 15% 0%, rgba(247, 164, 0, .22), transparent 60%),
    radial-gradient(700px 380px at 100% 100%, rgba(13, 148, 136, .2), transparent 55%),
    linear-gradient(150deg, var(--navy-900), var(--navy-700) 55%, var(--violet-700));
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 64px 40px;
  text-align: center;
}
.final-cta h2 { color: var(--white); font-size: clamp(28px, 3.6vw, 40px); }
.final-cta p { color: rgba(255, 255, 255, .76); max-width: 560px; margin-inline: auto 28px; }
.final-cta .cta-row { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; }

/* ---------- Footer ----------
   The pre-footer CTA and the footer body are two content regions but ONE
   painted surface: the gradient below lives on `.site-footer` itself and
   flows continuously from a lighter, glow-lit tone near the top (behind the
   CTA) down to flat navy by the time it reaches the link columns, so there
   is no seam for `.footer-precta`/`.footer-main` to fight over. Both are
   transparent and contribute no background of their own. */
.site-footer {
  position: relative;
  background:
    radial-gradient(820px 500px at 14% 0%, rgba(247, 164, 0, .3), transparent 55%),
    radial-gradient(720px 460px at 90% 8%, rgba(13, 148, 136, .22), transparent 50%),
    linear-gradient(180deg, var(--navy-700) 0%, var(--navy-600) 24%, var(--navy-800) 58%, var(--navy-800) 100%);
  color: rgba(255, 255, 255, .76);
}
.site-footer::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 1;
  background: linear-gradient(90deg, var(--gold-500), var(--violet-500), var(--teal-600));
}

.footer-precta {
  position: relative;
  text-align: center;
  padding: 66px 0 44px;
}
.footer-precta .eyebrow { justify-content: center; }
.footer-precta h2 { color: #fff; font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 14px; }
.footer-precta p { color: rgba(255, 255, 255, .78); max-width: 560px; margin: 0 auto 30px; }
.footer-precta .cta-row { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

.footer-main { padding: 46px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 40px; padding-bottom: 46px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.footer-logo { display: block; height: 58px; width: auto; aspect-ratio: 340 / 68; margin-bottom: 20px; }
.footer-brand p { font-size: 14.5px; max-width: 280px; color: rgba(255, 255, 255, .68); }
.footer-col h4 {
  color: var(--white); font-size: 15.5px; font-weight: 700; margin-bottom: 20px;
  position: relative; padding-bottom: 13px;
}
.footer-col h4::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 3px;
  background: linear-gradient(90deg, var(--gold-500), var(--violet-500));
  border-radius: 2px;
}
.footer-col ul { display: grid; gap: 12px; }
.footer-col a { font-size: 14.5px; transition: color .2s ease; }
.footer-col a:hover { color: var(--gold-400); }
.footer-col .contact-list { gap: 10px; }
.footer-col .contact-list li { display: flex; }
.footer-col .contact-list a,
.footer-col .contact-list span {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  width: 100%;
  transition: background-color .2s ease, border-color .2s ease;
}
.footer-col .contact-list a:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); color: var(--white); }
.footer-col .contact-list svg {
  flex: none; width: 16px; height: 16px;
  color: var(--gold-400);
}
.footer-social { display: flex; gap: 10px; margin-top: 22px; }
.footer-social a {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.footer-social a:hover {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  border-color: var(--gold-500);
  color: var(--navy-900);
}
.footer-bottom {
  padding: 22px 0 28px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, .55);
}
.footer-bottom a { color: rgba(255, 255, 255, .8); transition: color .2s ease; }
.footer-bottom a:hover { color: var(--gold-400); }
@media (max-width: 991px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-precta { padding: 48px 0 36px; }
  .footer-main { padding-top: 36px; }
  .footer-precta .cta-row { flex-direction: column; align-items: stretch; }
  .footer-precta .cta-row .btn { width: 100%; }
}

/* ---------- Floating WhatsApp + scroll-top ---------- */
.float-stack { position: fixed; right: 20px; bottom: 20px; z-index: 400; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.fab {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  transition: opacity .2s ease, box-shadow .2s ease;
}
.fab:hover { opacity: .88; }
.fab-whatsapp { background: #25d366; color: var(--white); }
.fab-whatsapp svg { width: 28px; height: 28px; }
.fab-top {
  width: 44px; height: 44px;
  background: var(--white);
  color: var(--navy-800);
  border: 1px solid var(--border);
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
}
.fab-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.fab-top svg { width: 18px; height: 18px; }


/* ---------- Misc ---------- */
.skip-link {
  position: absolute; left: 12px; top: -50px;
  background: var(--navy-900); color: var(--white);
  padding: 10px 16px; border-radius: 8px; z-index: 999;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

/* ---------- Scroll-reveal (vanilla JS, replaces AOS) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: none; opacity: 1; transform: none; }
}

/* ---------- Page hero (colourful light variant for category pages) ---------- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 152px 0 64px;
  background:
    radial-gradient(700px 380px at 8% -10%, rgba(247, 164, 0, .16), transparent 60%),
    radial-gradient(650px 400px at 100% 0%, rgba(109, 40, 217, .14), transparent 55%),
    linear-gradient(180deg, #fbf8ff 0%, var(--white) 75%);
}
@media (max-width: 767px) { .page-hero { padding: 122px 0 46px; } }
.page-hero .lede { font-size: 17.5px; color: var(--ink-soft); max-width: 540px; margin-bottom: 28px; }
.page-hero h1 { font-size: clamp(30px, 4.2vw, 46px); }
.page-hero .split-media img { box-shadow: var(--shadow-lg); }

/* ---------- Trust badges ---------- */
.badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 700;
  font-family: var(--font-heading);
  letter-spacing: .01em;
}
.badge svg { width: 14px; height: 14px; flex: none; }
.badge-gold { background: linear-gradient(135deg, var(--gold-100), #fff2d6); color: #7a4d00; border: 1px solid var(--gold-400); }
.badge-violet { background: #f1e9ff; color: var(--violet-700); border: 1px solid #d6bdfa; }
.badge-teal { background: var(--teal-100); color: #0f5f57; border: 1px solid #7fd9cf; }
.badge-navy { background: #e9eaf8; color: var(--navy-700); border: 1px solid #c3c6ee; }

.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  margin-bottom: 18px;
}
.breadcrumb a { color: var(--navy-700); }
.breadcrumb a:hover { color: var(--gold-600); }
.breadcrumb svg { width: 13px; height: 13px; flex: none; }

/* ---------- Office cards (real photos) ---------- */
.office-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.office-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.office-card .photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--gray-100); }
.office-card .photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.office-card:hover .photo img { transform: scale(1.06); }
.office-card .tag {
  position: absolute; top: 14px; left: 14px;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600)); color: var(--navy-900);
  font-family: var(--font-heading); font-weight: 700; font-size: 11.5px;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  box-shadow: 0 6px 16px -4px rgba(247, 164, 0, .5);
}
.card-grid .office-card:nth-child(2) .tag { background: linear-gradient(135deg, var(--violet-500), var(--navy-700)); color: #fff; box-shadow: 0 6px 16px -4px rgba(109, 40, 217, .5); }
.card-grid .office-card:nth-child(3) .tag { background: linear-gradient(135deg, var(--teal-600), #0f766e); color: #fff; box-shadow: 0 6px 16px -4px rgba(13, 148, 136, .5); }
.card-grid .office-card:nth-child(4) .tag { background: linear-gradient(135deg, var(--navy-700), var(--navy-500)); color: #fff; }
.office-card .body { padding: 20px 22px 22px; }
.office-card h3 { font-size: 18px; margin-bottom: 8px; }
.office-card .addr {
  color: var(--ink-soft); font-size: 13.5px; margin: 0 0 16px;
  display: flex; gap: 8px; align-items: flex-start;
}
.office-card .addr svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--gold-600); }
.office-card .actions { display: flex; gap: 10px; }
.office-card .actions .btn { flex: 1; }

/* ---------- Leadership / recognition quotes ---------- */
.quote-stack { display: grid; gap: 22px; max-width: 820px; margin-inline: auto; }
.leadership-quote {
  background: linear-gradient(120deg, var(--gray-50), #fdf6ea);
  border-left: 3px solid var(--gold-500);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 28px 32px;
  box-shadow: var(--shadow-sm);
}
.quote-stack .leadership-quote:nth-child(2) { background: linear-gradient(120deg, var(--gray-50), #f4eefc); border-left-color: var(--violet-500); }
.leadership-quote .mark {
  font-family: var(--font-heading); font-size: 38px; line-height: 1;
  color: var(--gold-500); display: block; margin-bottom: 8px;
}
.quote-stack .leadership-quote:nth-child(2) .mark { color: var(--violet-500); }
.leadership-quote p { font-size: 16.5px; color: var(--navy-800); margin-bottom: 14px; }
.leadership-quote cite { font-style: normal; font-size: 14px; font-weight: 600; color: var(--ink-soft); display: block; }
.leadership-quote cite span { display: block; font-weight: 400; font-size: 12.5px; margin-top: 2px; }

/* ---------- Success card (thank-you pages) ---------- */
.success-hero {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 80px 20px;
  background:
    radial-gradient(900px 400px at 15% 0%, rgba(247, 164, 0, .22), transparent 60%),
    radial-gradient(700px 380px at 100% 100%, rgba(13, 148, 136, .18), transparent 55%),
    linear-gradient(150deg, var(--navy-900), var(--navy-700) 55%, var(--violet-700));
}
.success-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 10; padding: 22px 0; }
.success-topbar .container { display: flex; justify-content: center; }
.success-topbar img { display: block; height: 28px; width: auto; aspect-ratio: 340 / 68; }
.success-card { max-width: 540px; width: 100%; text-align: center; }
.success-icon {
  width: 88px; height: 88px; border-radius: 50%;
  background: rgba(247, 164, 0, .15);
  border: 2px solid rgba(247, 164, 0, .4);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 26px; color: var(--gold-500);
}
.success-icon svg { width: 40px; height: 40px; }
.success-card h1 { color: var(--white); font-size: clamp(24px, 4vw, 32px); margin-bottom: 14px; }
.success-card p { color: rgba(255, 255, 255, .78); font-size: 16px; margin-bottom: 8px; }
.success-card .countdown { font-size: 13.5px; color: rgba(255, 255, 255, .55); margin: 18px 0 30px; }
.success-card .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 480px) {
  .success-card .actions { flex-direction: column; }
  .success-card .actions .btn { width: 100%; }
}

/* ---------- select2 / intl-tel-input visual overrides ---------- */
.select2-container--default .select2-selection--single {
  height: 50px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--white) !important;
  display: flex !important;
  align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: 15px !important;
  padding-right: 34px !important;
  line-height: 47px !important;
  color: var(--ink);
  font-size: 15px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--ink-soft); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 48px !important; right: 10px; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--navy-500) !important;
  box-shadow: 0 0 0 4px rgba(25, 29, 136, .1);
}
.select2-dropdown { border-color: var(--border) !important; border-radius: var(--radius-sm) !important; overflow: hidden; font-size: 15px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--navy-600) !important; }
.select2-container--default .select2-results__option[aria-selected="true"] { background: var(--gray-100); }
.select2-search--dropdown .select2-search__field { border: 1.5px solid var(--border) !important; border-radius: var(--radius-sm) !important; padding: 8px 10px !important; }

/* select2 clones its source <option> text into its own generated markup
   (the closed selection badge, and the dropdown list, which is portaled
   outside .hero-form-wrap) — select2 v4 derives ids for both from the
   underlying <select>'s id, so these target only the bilingual selects on
   index.html without touching select2 instances on any other page. */
[id^="select2-add-apply-for-fe"],
[id^="select2-add-saudi-license-fe"],
[id^="select2-add-indian-license-fe"],
[id^="select2-add-edit-looking-for"],
[id^="select2-add-edit-country"] { font-family: var(--font-hindi); }

.iti { width: 100%; display: block; }
.iti input, .iti input[type="text"], .iti input[type="tel"] { width: 100% !important; }
.form-grp .iti + em.text-error { margin-top: 5px; }

/* ---------- intl-tel-input: branded, compact country dropdown ----------
   The plugin ships almost no visual design of its own (bare 5px/10px rows,
   no explicit color on the name/dial-code text, no card styling) — this
   gives every part of it explicit, robust styling instead of leaning on
   inherited defaults. Note: intl-tel-input appends its dropdown directly to
   <body> by default (dropdownContainer), so it already renders above the
   hero/form/header (z-index 1060 from the plugin's own CSS) and can never
   be clipped by their overflow — nothing to fix there. */
.iti__flag-container { padding: 0; }
.iti__selected-flag { padding: 0 8px 0 12px; border-radius: var(--radius-sm) 0 0 var(--radius-sm); transition: background-color .15s ease; }
.iti__selected-flag:hover { background: var(--gray-50); }
.iti__selected-dial-code { color: var(--ink); font-size: 14px; font-weight: 600; }
.iti__arrow { border-top-color: var(--ink-soft); }

.iti__country-list {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  background: var(--white);
  padding: 6px;
  margin-top: 4px;
  font-family: var(--font-body);
  white-space: normal;
  max-height: 260px;
  min-width: 260px;
  max-width: min(320px, 90vw);
}
.iti__divider { padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.iti__country {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  line-height: 1.3;
}
.iti__country.iti__highlight,
.iti__country:hover { background: var(--gray-100); }
.iti__flag-box { flex: none; width: 20px; display: flex; align-items: center; justify-content: center; margin-right: 0; }
.iti__country-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: 13.5px;
  margin-right: 0;
}
.iti__dial-code { flex: none; color: var(--ink-soft); font-size: 13px; }

@media (max-width: 500px) {
  .iti-mobile .iti--container { top: 16px; bottom: 16px; left: 16px; right: 16px; }
  .iti-mobile .iti__country-list { border-radius: var(--radius-md); min-width: 0; max-width: none; padding: 8px; }
  .iti-mobile .iti__country { padding: 12px 10px; line-height: 1.4; }
  .iti-mobile .iti__country-name { font-size: 14px; }
}

/* ---------- Field error / status states ---------- */
.form-grp { margin-bottom: 18px; }
.form-grp .form-label { display: block; font-size: 13.5px; font-weight: 600; color: var(--navy-800); margin-bottom: 7px; }
.form-grp input[type="text"],
.form-grp input[type="email"],
.form-grp input[type="tel"],
.form-grp textarea,
.form-grp select:not(.select2-hidden-accessible) {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font-size: 15px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-grp input:focus, .form-grp textarea:focus {
  outline: none;
  border-color: var(--navy-500);
  box-shadow: 0 0 0 4px rgba(25, 29, 136, .1);
}
.form-grp textarea { resize: vertical; min-height: 100px; }
.form-grp .text-error, .form-grp em.text-error { display: block; font-size: 12.5px; color: var(--danger); margin-top: 6px; min-height: 15px; }
.text-danger { color: var(--danger); }
.form-check-inline { display: inline-flex; align-items: center; gap: 7px; margin: 0 14px 10px 0; font-size: 14px; color: var(--ink); }
.form-check-input { width: 16px; height: 16px; accent-color: var(--navy-600); }

/* ---------- Icon sizing inside .ic wrappers (inline SVG, not icon-font) ---------- */
.opp-card .ic svg,
.feature-card .ic svg { width: 24px; height: 24px; }
.opportunity-points .ic svg { width: 19px; height: 19px; }
.apply-channel .ic svg { width: 17px; height: 17px; }
.success-icon svg { width: 40px; height: 40px; }

/* ---------- Tinted section washes (colourful alternative to plain white/gray-50) ---------- */
.tint-gold { background: linear-gradient(180deg, #fffaf0, #fdf3e2); }
.tint-violet { background: linear-gradient(180deg, #faf7ff, #f3edfc); }
.tint-teal { background: linear-gradient(180deg, #f2fcfa, #e6f9f5); }
.tint-navy { background: linear-gradient(180deg, #f5f6fc, #edeffa); }

/* ---------- Back-to-top page anchor offset ---------- */
[id] { scroll-margin-top: 96px; }