/* Site theme: loaded last on every page. Palette, fonts and the btn-17 button. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque/latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque/latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/geist/latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/geist/latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --theme-primary: #1f2f9e;
  --theme-ink: #0b1240;
  --theme-accent: #ff6b3d;
  --theme-font: 'Bricolage Grotesque', Geist, sans-serif;

  --bs-font-sans-serif: var(--theme-font);
  --bs-body-font-family: var(--theme-font);
  --bs-primary: var(--theme-primary);
  --bs-primary-rgb: 31, 47, 158;
  --bs-success: var(--theme-primary);
  --bs-success-rgb: 31, 47, 158;
  --bs-link-color: var(--theme-primary);
  --bs-link-color-rgb: 31, 47, 158;
  --bs-link-hover-color: var(--theme-ink);
  --bs-link-hover-color-rgb: 11, 18, 64;
  --swiper-theme-color: var(--theme-accent);
  --bs-success-bg-subtle: #e7e9f7;
  --bs-success-border-subtle: #c7cbea;
  --bs-success-text-emphasis: var(--theme-primary);
  --medium-gray: #5f6478; /* #838383 was too faint on tinted panels */
}

/* Text on dark panels */
.mega-menu-bottom-bar a.text-muted {
  color: #fff !important;
}

.mega-menu-bottom-bar a.text-muted:hover {
  color: var(--theme-accent) !important;
}

.mega-menu-bottom-bar .text-muted .text-success {
  color: var(--theme-accent) !important;
}

.service-hero .section-intro-title span {
  color: var(--theme-accent) !important;
}

.process-step-tag {
  color: #8a6500 !important;
}

body, h1, h2, h3, h4, h5, h6, p, a, li, span, label, input, select, textarea, button {
  font-family: var(--theme-font);
}

/* Body copy: 15px everywhere, slightly larger under hero headings */
:root {
  --fs-base: 0.9375rem;
}

main p,
main li,
footer p,
footer li {
  font-size: 0.9375rem !important;
  line-height: 1.65 !important;
}

main [class*='hero'] p {
  font-size: 1.0625rem !important;
}

/* Icon fonts must keep their own family */
.bi, [class^='bi-'], [class*=' bi-'] {
  font-family: bootstrap-icons !important;
}

::selection {
  background: var(--theme-accent);
  color: var(--theme-ink);
}

/* ---------- Spacing rhythm ---------- */
.section-top-gap {
  padding-top: clamp(44px, 6vw, 72px) !important;
  padding-bottom: clamp(44px, 5vw, 64px) !important;
}

/* Button under text: on the button itself, or on a wrapper holding it.
   Match __title/__text only: [class*='text'] also catches text-decoration-none,
   which pushed the second of two side-by-side buttons down. */
:is(h1, h2, h3, h4, h5, h6, p, ul, ol, [class*='__title'], [class*='__text'], [class*='__desc'], .section-intro-title, .section-intro-text):not(.btn-17) + .btn-17.btn-17,
:is(h1, h2, h3, h4, h5, h6, p, ul, ol, [class*='__title'], [class*='__text'], [class*='__desc'], .section-intro-title, .section-intro-text):not(.btn-17) + div:has(> .btn-17) {
  margin-top: 1.5rem;
}

/* Keep neighbouring buttons on one line */
.btn-17.btn-17 + .btn-17.btn-17 {
  margin-top: 0;
}

/* Heading block to the content under it. Bootstrap .g-* rows pull up with
   negative margins, so the wrapper needs its own gap. */
div:has(> :is(.section-intro-text, .section-intro-title):last-child) {
  margin-bottom: 2.5rem;
}

.section-intro-text + *,
.contact-section__intro + * {
  margin-top: 1.75rem;
}

/* Badge or eyebrow above a heading */
:is(.outline-secondary-badge, [class*='__badge'], [class*='eyebrow']) + :is(h1, h2, h3, h4, [class*='title']) {
  margin-top: 0.75rem;
}

section.pt-4,
.ai-overview-section {
  padding-top: clamp(44px, 6vw, 72px) !important;
}

/* Cards whose button sat on the bottom edge */
.job-detail__card,
.legal-cta-card {
  padding-bottom: 1.5rem !important;
}

.job-card-micro__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.country-highlights__text {
  margin-bottom: 0.75rem;
}

@media (max-width: 575.98px) {
  form .btn-17.btn-17,
  .btn-17.ai-btn {
    margin-top: 0.5rem;
  }
}

/* Text under a heading, and paragraph after paragraph */
:is(h1, h2, h3, h4, h5, h6) + :is(p, .section-intro-text) {
  margin-top: 0.5rem;
}

main p + p {
  margin-top: 0.75rem;
}

/* Sections shipped with top padding only, so content touched the bottom edge */
.cert-showcase-section,
.register-company-section,
.industries-section,
.partner-marquee,
.faq-section,
.home-blogs-section,
.about-overview-section,
.about-summary-section,
.about-hero-section,
.service-cta,
.service-detail-solution,
.service-detail-solutions,
.service-detail-consult,
.service-detail-benefits,
.jobs-listing,
.jobs-advice,
.jobs-insights,
.blogs-posts,
.country-highlights,
.country-employer-form,
.global-region-section,
.contact-section,
.local-faqs-section,
.privacy-highlights,
.process-section,
section.pt-4 {
  padding-bottom: clamp(48px, 6vw, 72px) !important;
}

/* This hero photo has green baked in; tint it to the palette */
.about-top-hero {
  background-color: var(--theme-ink);
  background-blend-mode: luminosity;
}

/* home.min.css hides hero copy for a fade-in, then disables that animation with
   !important, so the copy never came back */
.mySwiper.swiper-initialized .hero-slide__content :is(.outline-secondary-badge, .hero-slide__title, .hero-slide__text, .hero-slide__actions),
.mySwiper.swiper-initialized .hero-slide__media {
  opacity: 1 !important;
}

/* Fit hero copy inside the fixed-height slide, clear of the pagination dots */
.hero-slide__content {
  gap: 0.6rem !important;
  padding-block: 1.5rem 2.75rem;
}

.hero-slide__title {
  font-size: clamp(1.6rem, 2.4vw, 2.25rem) !important;
  line-height: 1.18 !important;
}

main .hero-slide__content p.hero-slide__text {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.9375rem !important;
  line-height: 1.6 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.hero-slide__actions {
  margin-top: 0.4rem !important;
}

.mySwiper .swiper-pagination {
  bottom: 12px !important;
}

/* Laptops: the photo starts sooner, so keep copy on the clear left side */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .hero-slide__title,
  main .hero-slide__content p.hero-slide__text {
    max-width: 31vw !important;
  }

  .hero-slide__title {
    font-size: 1.5rem !important;
  }

  .hero-slide__content {
    padding-block: 0.75rem 2.25rem;
  }
}

/* WhatsApp keeps its brand color */
.floating-chat__btn {
  background: #25d366 !important;
}

/* ---------- Button (btn-17) ----------
   mix-blend-mode from the original only works on black and white, so the text
   color is set directly and changes on hover. */
.btn-17.btn-17 {
  --btn-bg: var(--theme-accent);
  --btn-fg: var(--theme-ink);
  --btn-wipe: var(--theme-primary);
  --btn-fg-hover: #fff;
  --skew: 0.2;

  position: relative !important;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden !important;
  box-sizing: border-box;
  max-width: 100%;
  min-height: 2.75rem;
  padding: 0.65rem 1.5rem !important;
  border: 2px solid var(--btn-bg) !important;
  border-radius: 99rem !important;
  background: var(--btn-bg) !important;
  box-shadow: none !important;
  color: var(--btn-fg) !important;
  cursor: pointer;
  font-family: var(--theme-font);
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  text-decoration: none !important;
  text-transform: uppercase;
  transform: none !important;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn-17.btn-17:hover {
  color: var(--btn-fg-hover) !important;
}

.btn-17.btn-17:focus-visible {
  outline: 3px solid var(--theme-primary);
  outline-offset: 3px;
}

.btn-17.btn-17:disabled {
  cursor: default;
  opacity: 0.6;
}

.btn-17 .text-container {
  position: relative;
  display: block;
  overflow: hidden;
}

.btn-17 .text {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
}

.btn-17 .text,
.btn-17 .text * {
  color: inherit !important;
}

.btn-17.btn-17:hover .text {
  animation: btn-17-move 0.3s forwards;
}

.btn-17.btn-17::before,
.btn-17.btn-17::after {
  content: '' !important;
  position: absolute !important;
  display: block !important;
  width: 125% !important; /* overlap, or wide buttons keep a stripe mid-wipe */
  height: 102% !important;
  opacity: 1 !important;
  border-radius: 0 !important;
  background: var(--btn-wipe) !important;
  pointer-events: none;
  transform: skew(calc(150deg * var(--skew))) translateY(var(--progress, 0)) !important;
  transition: transform 0.2s ease !important;
}

.btn-17.btn-17::before {
  --progress: 0%;
  top: -104% !important;
  right: auto !important;
  left: calc(-50% - 50% * var(--skew)) !important;
  z-index: -1;
}

.btn-17.btn-17::after {
  --progress: 0%;
  top: 102% !important;
  right: auto !important;
  left: calc(25% + 50% * var(--skew)) !important;
  z-index: -1;
}

.btn-17.btn-17:hover::before {
  --progress: 100%;
}

.btn-17.btn-17:hover::after {
  --progress: -102%;
}

@keyframes btn-17-move {
  0% { transform: translateY(0); }
  50% { transform: translateY(80%); }
  51% { transform: translateY(-80%); }
  100% { transform: translateY(0); }
}

/* Existing icon holders sit inline with the label */
.btn-17 :is(.icon-box, [class$='__button-icon']) {
  display: inline-flex;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Compact buttons */
.btn-17.btn-sm,
.btn-17.top-bar__cta,
.btn-17.apply-job-btn {
  min-height: 2.25rem;
  padding: 0.45rem 1.1rem !important;
  font-size: 0.68rem !important;
}

/* Long labels may wrap on phones */
@media (max-width: 575.98px) {
  .btn-17.btn-17 {
    white-space: normal;
  }
}

/* Cards: equal height, button pinned to the bottom at full width */
.content-grid-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.content-grid-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

/* Every card description takes exactly two lines */
.content-grid-card__text {
  display: -webkit-box !important;
  min-height: 3.3em; /* 2 lines at line-height 1.65 */
  margin-bottom: 1.25rem !important;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2;
}

.content-grid-card__body > .btn-17.btn-17 {
  width: 100%;
  margin-top: auto;
}

@media (prefers-reduced-motion: reduce) {
  .btn-17.btn-17:hover .text {
    animation: none;
  }

  .btn-17.btn-17::before,
  .btn-17.btn-17::after {
    transition: none !important;
  }
}

/* ===== Recruitment process: vertical zig-zag timeline (homepage) ===== */
#recruitment-process .horizontal-process-wrapper { max-width: 1040px; margin: 8px auto 0; padding-top: 0; }
#recruitment-process .process-line-track { display: none; }
#recruitment-process .horizontal-process-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 26px; }
#recruitment-process .horizontal-process-grid::before {
  content: ''; position: absolute; top: 10px; bottom: 10px; left: 50%; width: 3px; transform: translateX(-50%);
  border-radius: 3px; background: linear-gradient(180deg, var(--theme-primary), var(--theme-accent));
}
#recruitment-process .horizontal-process-step { position: relative; width: calc(50% - 48px); height: auto; }
#recruitment-process .horizontal-process-step:nth-child(odd) { margin-right: auto; }
#recruitment-process .horizontal-process-step:nth-child(even) { margin-left: auto; }

#recruitment-process .recruitment-flow-card {
  display: grid; grid-template-columns: 64px 1fr; grid-template-areas: 'icon meta' 'icon title' 'icon text';
  column-gap: 20px; row-gap: 6px; align-items: start; text-align: left; padding: 26px 26px 26px 24px; overflow: visible;
}
#recruitment-process .recruitment-flow-card__icon-wrap { grid-area: icon; width: 64px; height: 64px; margin: 0; font-size: 24px; }
#recruitment-process .recruitment-flow-card__step-num { display: none; }
#recruitment-process .recruitment-flow-card__badge { grid-area: meta; justify-self: start; margin: 0 0 4px; }
#recruitment-process .recruitment-flow-card__title { grid-area: title; margin: 0; font-size: 1.12rem; }
#recruitment-process .recruitment-flow-card__text { grid-area: text; font-size: 14px; display: block; -webkit-line-clamp: unset; overflow: visible; }

/* Numbered node on the centre line */
#recruitment-process .recruitment-flow-card__node-dot {
  display: grid; place-items: center; position: absolute; top: 50%; left: auto; right: -48px;
  width: 46px; height: 46px; border-radius: 50%; transform: translate(50%, -50%);
  background: var(--theme-primary); box-shadow: 0 0 0 6px #fff, 0 0 0 8px rgba(31, 47, 158, .18); z-index: 5;
}
#recruitment-process .horizontal-process-step:nth-child(even) .recruitment-flow-card__node-dot { right: auto; left: -48px; transform: translate(-50%, -50%); }
#recruitment-process .recruitment-flow-card__node-dot .dot-inner,
#recruitment-process .recruitment-flow-card__node-dot .dot-ripple { display: none; }
#recruitment-process .horizontal-process-grid { counter-reset: flow; }
#recruitment-process .recruitment-flow-card__node-dot::before {
  counter-increment: flow; content: counter(flow, decimal-leading-zero);
  color: #fff; font: 700 .85rem/1 'Bricolage Grotesque', Geist, sans-serif;
}
/* Pointer from card to the line */
#recruitment-process .recruitment-flow-card::before {
  content: ''; position: absolute; top: 50%; right: -8px; width: 14px; height: 14px; background: #fff;
  border-top: 1px solid rgba(73, 85, 166, .16); border-right: 1px solid rgba(73, 85, 166, .16);
  transform: translateY(-50%) rotate(45deg);
}
#recruitment-process .horizontal-process-step:nth-child(even) .recruitment-flow-card::before { right: auto; left: -8px; transform: translateY(-50%) rotate(-135deg); }
#recruitment-process .recruitment-flow-card:hover { transform: translateY(-4px); }
#recruitment-process .recruitment-flow-card:hover .recruitment-flow-card__node-dot { background: var(--theme-accent); }

@media (max-width: 767.98px) {
  #recruitment-process .horizontal-process-grid::before { left: 22px; transform: none; }
  #recruitment-process .horizontal-process-step,
  #recruitment-process .horizontal-process-step:nth-child(even) { width: auto; margin: 0 0 0 62px; }
  #recruitment-process .recruitment-flow-card__node-dot,
  #recruitment-process .horizontal-process-step:nth-child(even) .recruitment-flow-card__node-dot { right: auto; left: -40px; transform: translate(-50%, -50%); }
  #recruitment-process .recruitment-flow-card::before,
  #recruitment-process .horizontal-process-step:nth-child(even) .recruitment-flow-card::before { right: auto; left: -8px; transform: translateY(-50%) rotate(-135deg); }
  #recruitment-process .recruitment-flow-card { grid-template-columns: 48px 1fr; column-gap: 14px; padding: 20px; }
  #recruitment-process .recruitment-flow-card__icon-wrap { width: 48px; height: 48px; font-size: 20px; }
}
@media (min-width: 768px) {
  #recruitment-process .horizontal-process-grid { gap: 0; }
  #recruitment-process .horizontal-process-step + .horizontal-process-step { margin-top: -48px; }
}

/* ===== Sticky header ===== */
html, body { overflow-x: clip; }
.custom-navbar { position: sticky !important; top: 0; z-index: 1030; transition: padding .3s ease, box-shadow .3s ease, background-color .3s ease; }
.custom-navbar.is-scrolled { background: rgba(255, 255, 255, .97); box-shadow: 0 10px 30px -18px rgba(11, 18, 64, .35); }
@media (min-width: 992px) {
  .custom-navbar .navbar-brand img { transition: width .3s ease; }
  .custom-navbar.is-scrolled { padding-top: 4px; padding-bottom: 4px; }
  .custom-navbar.is-scrolled .navbar-brand img { width: 190px; }
}
@media (max-width: 991.98px) {
  .custom-navbar .navbar-collapse { max-height: calc(100vh - 90px); overflow-y: auto; }
}