/* Adecco-inspired staffing site – clean, modern, plenty of whitespace */
:root{
  --brand:#E30613; /* change this to your brand color */
  --ink:#111;
  --muted:#666;
  --bg:#fff;
  --bg-alt:#f7f7f9;
  --radius:16px;
  --max:1120px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg)}

a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--max);margin-inline:auto;padding:0 20px}
.nav{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid #eee;z-index:10}
.nav .inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;gap:10px;align-items:center;font-weight:800;letter-spacing:.3px}
.logo-badge{width:36px;height:36px;border-radius:10px;background:var(--brand);display:grid;place-items:center;color:#fff;font-weight:900}
.menu{display:flex;gap:32px;align-items:center}
.menu a{color:var(--ink);font-weight:600}
.btn{display:inline-block;background:var(--brand);color:#fff;padding:10px 16px;border-radius:999px;font-weight:700}
.btn.outline{background:transparent;color:var(--brand);border:2px solid var(--brand)}
.hero{background:linear-gradient(180deg,#fff, var(--bg-alt));padding:64px 0}
.hero .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero h1{font-size:44px;line-height:1.08;margin:0 0 12px}
.hero p{color:var(--muted);font-size:18px;margin:0 0 24px}
.card{background:#fff;border:1px solid #eee;border-radius:var(--radius);padding:20px}
.badges{display:flex;gap:10px;flex-wrap:wrap}
.badge{background:#fff;border:1px solid #eee;padding:8px 12px;border-radius:999px;font-weight:600}
.section{padding:56px 0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.footer{background:#0e0e12;color:#cfcfd6;padding:40px 0;margin-top:40px}
.footer a{color:#cfcfd6}
.subtle{color:var(--muted)}

/* Keep nav content left, but push "Sign in" to the right */
.nav .inner{display:flex;align-items:center;justify-content:flex-start;gap:16px}
.menu{display:flex;align-items:center;gap:32px;flex:1}
.menu .push-right{margin-left:auto}

/* Fixed, centered mega panel (identical for every tab) */
.nav{ --nav-h:64px; }              /* match your header height */
:root{
  --mega-width:1120px;             /* panel width */
  --mega-side-gap:64px;            /* gap to viewport edges */
  --mega-height:300px;             /* identical height */
  --mega-pad:24px;
}
.has-mega{ position: static; }     /* so the panel can be fixed */
.has-mega .mega{
  position:fixed; top:var(--nav-h); left:50%; transform:translateX(-50%);
  width:min(var(--mega-width), calc(100vw - 2*var(--mega-side-gap)));
  height:var(--mega-height);
  background:#fff; border-radius:16px; box-shadow:0 12px 30px rgba(0,0,0,.10);
  padding:var(--mega-pad); z-index:1000; display:none; box-sizing:border-box;
}
.has-mega .mega-inner{
  height:100%; display:grid; grid-template-columns:1.2fr .9fr .9fr; gap:28px; align-items:stretch;
}

/* Invisible "bridge" removes hover gap between tab and panel */
.has-mega::after{
  content:""; position:fixed; top:var(--nav-h); left:50%; transform:translateX(-50%);
  width:min(var(--mega-width), calc(100vw - 2*var(--mega-side-gap)));
  height:12px; background:transparent; display:none; z-index:999;
}
.has-mega:hover::after, .has-mega.open::after{ display:block; }

/* Open + arrow rotate */
.has-mega .mega{ display:none; }
.has-mega:hover .mega, .has-mega.open .mega{ display:block; }
.has-mega:hover .v-arrow, .has-mega.open .v-arrow{ transform:rotate(180deg); }

/* Keep your mobile behavior */
@media (max-width:900px){
  .menu{display:none}
  .mobile-toggle{display:inline-block}
  .has-mega .mega{position:static;transform:none;width:auto;height:auto;padding:0;border-radius:0;box-shadow:none;display:none}
  .has-mega:hover .mega{display:none}
}
@media (min-width:901px){
  .mobile-toggle{display:none}
}


/* ---------------- NEW: Mega menu (full-width panels on hover) --------------- */

/* Clean V arrow (not shaded) and link layout in the menu */
.menu-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink);text-decoration:none}
.v-arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid currentColor;display:inline-block;transition:transform .25s ease}

/* Make the menu a flex row (you likely already have this) */
.menu{ display:flex; align-items:center; gap:24px; }

/* Push an item to the far right */
.push-right{ margin-left:auto; }
.push-right{ margin-left:auto; }

/* ==== Compact Upwork-like card (left aligned to tab start) ==== */
.nav{
  --card-min-w: 220px;
  --card-max-w: 340px;  /* reduce width cap */
  --pad-x: 12px;        /* shrink side padding (was bigger before) */
  --row-py: 10px;
  --radius: 10px;
  --border:#e8e8e8;
  --caret-x: 20px;      /* JS updates this per-hover */
  --gap-under: 8px;
}

.nav .menu .has-mega{ position:relative; display:inline-flex; align-items:center; }

/* Card */
.nav .menu .has-mega > .mega{
  position:absolute; top:calc(100% + var(--gap-under)); left:0; transform:none;
  width:max-content; min-width:var(--card-min-w); max-width:var(--card-max-w);
  padding:6px 0;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 12px 28px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  overflow:visible; z-index:1000;
  opacity:0; pointer-events:none; transition:opacity .16s ease, transform .16s ease;
}

/* Caret — position comes from --caret-x so it follows the tab */
.nav .menu .has-mega > .mega::before,
.nav .menu .has-mega > .mega::after{
  content:""; position:absolute; width:0; height:0; left:var(--caret-x);
}
.nav .menu .has-mega > .mega::before{
  top:-8px; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:8px solid #fff;
}
.nav .menu .has-mega > .mega::after{
  top:-9px; border-left:9px solid transparent; border-right:9px solid transparent; border-bottom:9px solid var(--border);
}

/* Show */
.nav .menu .has-mega:hover > .mega,
.nav .menu .has-mega:focus-within > .mega,
.nav .menu .has-mega.open > .mega{ opacity:1; pointer-events:auto; }

/* Inner: single column, no extra side gap */
.nav .menu .has-mega > .mega .mega-inner{
  display:grid; grid-template-columns:max-content; gap:0;
  padding:4px 0 6px;
}
.nav .menu .has-mega > .mega .mega-title{
  margin:8px var(--pad-x) 6px; font:600 12px/1.1 Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:#6b7280;
}
.nav .menu .has-mega > .mega .mega-links{ display:flex; flex-direction:column; }
.nav .menu .has-mega > .mega a{
  display:block; padding:var(--row-py) var(--pad-x);
  border-radius:8px; white-space:nowrap; text-overflow:clip; overflow:visible;
  color:var(--ink); font-weight:600; text-decoration:none;
}
.nav .menu .has-mega > .mega a:hover{ background:#f6f7f8; }

/* Divider between groups if you have multiple link blocks */
.nav .menu .has-mega > .mega .mega-links + .mega-title{
  margin-top:10px; padding-top:8px; border-top:1px solid var(--border);
}

/* Kill any legacy rules that add scrollbars/extra size */
.nav .menu .has-mega > .mega,
.nav .menu .has-mega > .mega *{ max-height:none !important; overflow:visible !important; }


/* === Compact, auto-fit popovers (no overflow, no wasted space) === */

/* Common card */
.nav .menu .has-mega > .mega{
  /* position just under the tab (you already have caret JS/CSS) */
  top: calc(100% + 8px);
  left: 0;
  transform: none;

  /* width: exactly as wide as the longest label (no wrap) */
  width: max-content !important;
  min-width: 220px !important;                 /* lower bound */
  max-width: calc(100vw - 48px) !important;    /* upper bound (viewport cap) */

  /* height: content-only; never scroll */
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;

  /* tighter box */
  padding: 4px 0 !important;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  border: 1px solid #e8e8e8;
}

/* Inner: minimal padding and no extra gaps */
.nav .menu .has-mega > .mega .mega-inner{
  display: grid;
  grid-template-columns: max-content;  /* one column; add data-cols="2" to switch */
  gap: 0;
  padding: 2px 0 6px !important;
}

/* Section labels */
.nav .menu .has-mega > .mega .mega-title{
  margin: 6px 10px 6px !important;
  font: 600 12px/1.1 Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color: #6b7280;
}

/* Links: single line; tight vertical rhythm */
.nav .menu .has-mega > .mega .mega-links{ display:flex; flex-direction:column }
.nav .menu .has-mega > .mega a{
  display: block;
  padding: 8px 10px !important;     /* trim side/bottom gaps */
  border-radius: 8px;
  white-space: nowrap !important;    /* never wrap → width grows instead */
  overflow: visible !important;
  text-overflow: clip !important;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.nav .menu .has-mega > .mega a:hover{ background:#f6f7f8 }

/* Divider before the next group (only when you actually have another title) */
.nav .menu .has-mega > .mega .mega-links + .mega-title{
  margin-top: 8px !important;
  padding-top: 6px !important;
  border-top: 1px solid #e8e8e8;
}

/* ---- Optional: two-column for a specific menu without extra width ----
   Add data-cols="2" on that .has-mega (e.g., data-cols="2" on Find Jobs)
   It still auto-fits to the longest item of either column. */
.nav .menu .has-mega[data-cols="2"] > .mega .mega-inner{
  grid-template-columns: max-content max-content;
  column-gap: 22px;
  padding: 4px 10px 6px !important;
}
/* keep the card from ballooning; still let it grow for long labels */
.nav .menu .has-mega[data-cols="2"] > .mega{
  max-width: min(560px, calc(100vw - 48px)) !important;
}

/* Safety: kill any legacy overflow that could bring back scrollbars */
.nav .menu .has-mega > .mega,
.nav .menu .has-mega > .mega *{
  box-sizing: border-box;
  scrollbar-width: none;
}
.nav .menu .has-mega > .mega::-webkit-scrollbar,
.nav .menu .has-mega > .mega *::-webkit-scrollbar{ display:none }

/* === FORCE Upwork-like dropdown box (shape + caret only) === */

/* the box */
.nav .menu .has-mega > .mega{
  position:absolute !important;
  top:calc(100% + 8px) !important;
  left:0 !important;               /* start at the tab's left edge */
  transform:none !important;

  background:#fff !important;
  border:1px solid #e8e8e8 !important;
  border-radius:10px !important;
  box-shadow:0 12px 28px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06) !important;

  padding:4px 0 !important;        /* tight vertical padding */
  width:max-content !important;     /* auto width to content */
  min-width:220px !important;
  max-width:360px !important;

  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  z-index:1000 !important;
}

/* inner spacing */
.nav .menu .has-mega > .mega .mega-inner{
  display:grid !important;
  grid-template-columns:max-content !important;  /* single column */
  gap:0 !important;
  padding:2px 0 6px !important;
}

/* links (row look) */
.nav .menu .has-mega > .mega .mega-links{display:flex !important;flex-direction:column !important}
.nav .menu .has-mega > .mega a{
  display:block !important;
  padding:9px 12px !important;
  border-radius:8px !important;
  white-space:nowrap !important;    /* keep on one line */
  overflow:visible !important;
  text-overflow:clip !important;
  color:#111 !important;
  font-weight:600 !important;
  text-decoration:none !important;
}
.nav .menu .has-mega > .mega a:hover{ background:#f6f7f8 !important }

/* optional muted section title */
.nav .menu .has-mega > .mega .mega-title{
  margin:6px 12px 6px !important;
  font:600 12px/1.1 Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif !important;
  color:#6b7280 !important;
}
.nav .menu .has-mega > .mega .mega-links + .mega-title{
  margin-top:8px !important; padding-top:6px !important; border-top:1px solid #e8e8e8 !important;
}

/* crisp caret/arrow */
.nav .menu .has-mega > .mega::before,
.nav .menu .has-mega > .mega::after{
  content:"" !important; position:absolute !important; width:0 !important; height:0 !important;
  left:18px !important;                 /* move to align under your label if needed */
}
.nav .menu .has-mega > .mega::before{
  top:-8px !important;
  border-left:8px solid transparent !important;
  border-right:8px solid transparent !important;
  border-bottom:8px solid #fff !important;
}
.nav .menu .has-mega > .mega::after{
  top:-9px !important;
  border-left:9px solid transparent !important;
  border-right:9px solid transparent !important;
  border-bottom:9px solid #e8e8e8 !important;
}

/* kill legacy full-width/feature styles that cause the old look */
.mega-feature{display:none !important}
.has-mega .mega,
.has-mega .mega *{max-height:none !important; overflow:visible !important}

/* === Compact Upwork-style box (auto width/height) === */

.nav .menu .has-mega > .mega{
  position:absolute !important;
  top:calc(100% + 8px) !important;
  left:0 !important;
  transform:none !important;

  background:#fff !important;
  border:1px solid #e5e7eb !important;
  border-radius:8px !important;
  box-shadow:0 6px 20px rgba(0,0,0,.12) !important;

  /* key: auto sizing */
  width:auto !important;
  min-width:unset !important;
  max-width:none !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;

  padding:4px 0 !important;
  z-index:1000 !important;
}

/* caret */
.nav .menu .has-mega > .mega::before,
.nav .menu .has-mega > .mega::after{
  content:"" !important;
  position:absolute !important;
  width:0; height:0;
  left:24px !important;   /* adjust under label */
}
.nav .menu .has-mega > .mega::before{
  top:-8px;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-bottom:8px solid #fff;
}
.nav .menu .has-mega > .mega::after{
  top:-9px;
  border-left:9px solid transparent;
  border-right:9px solid transparent;
  border-bottom:9px solid #e5e7eb;
}

/* inner stack */
.nav .menu .has-mega > .mega .mega-inner{
  display:flex !important;
  flex-direction:column !important;
  padding:0 !important;
  margin:0 !important;
  gap:0 !important;
}

/* section titles */
.nav .menu .has-mega > .mega .mega-title{
  font:600 12px/1.1 Inter,system-ui,sans-serif !important;
  color:#6b7280 !important;
  padding:8px 14px 4px !important;
  margin:0 !important;
}

/* links */
.nav .menu .has-mega > .mega a{
  display:block !important;
  padding:8px 14px !important;
  border-radius:0 !important;
  font:500 14px/1.3 Inter,system-ui,sans-serif !important;
  color:#111 !important;
  white-space:nowrap !important;
  text-decoration:none !important;
}
.nav .menu .has-mega > .mega a:hover{
  background:#f7f7f7 !important;
}

/* divider between groups */
.nav .menu .has-mega > .mega .mega-links + .mega-title{
  border-top:1px solid #e5e7eb !important;
  margin-top:6px !important;
}

/* Slightly wider + taller dropdowns like Upwork */

.nav .menu .has-mega > .mega{
  padding:6px 0 !important;         /* add top/bottom breathing */
  min-width: 220px !important;      /* ensure at least this much width */
}

/* links */
.nav .menu .has-mega > .mega a{
  padding:10px 16px !important;     /* wider horizontal padding */
  font-size:14px !important;
  line-height:1.4 !important;
}

/* section title */
.nav .menu .has-mega > .mega .mega-title{
  padding:10px 16px 6px !important; /* aligned with links */
}





/* tighter single column */
.has-pop[data-simple="1"] .pop{ --w: 320px; max-width: min(240px, calc(50vw - 24px)); }

/* Arrow: SVG only, centered, rotate on open/hover */
.v-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px; height:14px;
  margin-left:6px;
  line-height:0;
  transform-origin:50% 50%;
  transition:transform .28s ease;
  /* kill any legacy “triangle” arrow styles */
  border:0 !important;
  background:transparent !important;
}
.v-arrow::before,
.v-arrow::after{ content:none !important; border:0 !important; }
.v-arrow svg{ width:14px; height:14px; display:block; }

/* rotate when open (hover on desktop, .open via JS on mobile) */
.has-mega:hover .v-arrow,
.has-mega.open  .v-arrow{ transform:rotate(180deg); }


/* Mega wrapper */
.has-mega{position:relative;display:inline-block}

/* Full-width panel under the nav */
.has-mega .mega{
  display:none;
  position:absolute;
  left:50%; transform:translateX(-50%);
  top:calc(100% + 1px);
  width:100vw; /* FULL WIDTH like Robert Half */
  background:#fff;
  border-top:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  z-index:12;
}

/* Content area stays aligned to your page width */
.mega-inner{
  display:grid;
  grid-template-columns:1.2fr .9fr .9fr;
  gap:28px;
  padding:28px 20px;
}

/* Feature card at left */
.mega-feature{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center}
.mega-media img{width:96px;height:96px;object-fit:cover;border-radius:20px}
.mega-copy h4{margin:0 0 6px;font-size:18px}
.mega-copy p{margin:0 0 12px;color:var(--muted)}

/* Link columns */
.mega-links{display:flex;flex-direction:column;gap:10px}
.mega-title{margin:0 0 6px;font-weight:700;color:var(--ink)}
.mega-links a{color:var(--ink);font-weight:600;text-decoration:none}
.mega-links a:hover{color:var(--brand);text-decoration:underline}

/* Open on hover/focus (desktop) */
.has-mega:hover .mega,
.has-mega:focus-within .mega{display:block}
.has-mega:hover .v-arrow,
.has-mega:focus-within .v-arrow{transform:rotate(180deg)}

/* Optional: small classic dropdown used elsewhere */
.dropdown{position:relative;display:inline-block}
.dropdown-btn{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink);text-decoration:none}
.dropdown-content{display:none;position:absolute;top:calc(100% + 8px);background:#fff;border:1px solid #eee;border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.08);z-index:13}
.dropdown-content a{display:block;padding:10px 14px;color:var(--ink);font-weight:600;text-decoration:none;white-space:nowrap}
.dropdown-content a:hover{background:#f7f7f9}
.dropdown:hover .dropdown-content{display:block}
.dropdown:hover .v-arrow{transform:rotate(180deg)}

/* --------------------------------------------------------------------------- */

@media (max-width: 900px){
  .hero .grid, .grid-3, .grid-2{grid-template-columns:1fr}
  .menu{display:none}
  .mobile-toggle{display:inline-block}

  /* Mobile: no hover mega panels (touch devices) */
  .has-mega .mega{position:static;transform:none;width:auto;display:none;border:0;box-shadow:none;padding:0}
  .has-mega:hover .mega{display:none}
}
@media (min-width: 901px){
  .mobile-toggle{display:none}
}
/* Cookie banner */
.cookie-banner{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  background:#fff;border:1px solid #eee;border-radius:999px;padding:10px 14px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);display:flex;gap:12px;align-items:center;z-index:9999
}
.cookie-banner .actions{display:flex;gap:8px}
small,kbd,code{background:#f3f3f6;padding:2px 6px;border-radius:6px}

/* --- Consistent, fixed mega panel for ALL tabs --- */

/* measure your real header height here (tweak if needed) */
.nav { --nav-h: 64px; }   /* 64px works for your current header */

/* make sure no ancestor clips the panel */
.has-mega { position: static; }

/* the white popup box: fixed, centered, same size for every menu */
:root{
  --mega-width: 1120px;       /* total panel width */
  --mega-side-gap: 84px;      /* gap to viewport edges on desktop */
  --mega-height: 350px;       /* identical height for all */
  --mega-pad: 24px;           /* inner padding */
}

.has-mega .mega{
  position: fixed;                       /* not tied to the menu item’s x */
  top: calc(var(--nav-h) + 8px);         /* sits just below the header */
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--mega-width), calc(100vw - 2*var(--mega-side-gap)));
  height: var(--mega-height);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
  padding: var(--mega-pad);
  z-index: 1000;
  display: none;                          /* default hidden */
  box-sizing: border-box;
}

/* inner grid stays identical for all */
.has-mega .mega-inner{
  height: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1.2fr .9fr .9fr;
  gap: 28px;
  align-items: stretch;
}

/* keep large feature from changing the panel size */
.mega-feature{
  display: flex; gap: 16px; align-items: center;
  border: 1px solid #eee; border-radius: 16px; padding: 14px;
  height: 100%; overflow: hidden;
}

/* links tidy & clipped if too long */
.mega-links{ display:flex; flex-direction:column; gap:10px; min-width:0; overflow:auto; }
.mega-links a{ white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }

/* open on hover/focus (still works because .mega is a descendant) */
.has-mega:hover .mega,
.has-mega:focus-within .mega { display: block; }

/* rotate the V arrow consistently when open */
.has-mega:hover .v-arrow,
.has-mega:focus-within .v-arrow { transform: rotate(180deg); }

/* mobile: disable fixed mega (no hover on touch) */
@media (max-width: 900px){
  .has-mega .mega{
    position: static; transform: none;
    width: auto; height: auto; padding: 0;
    border-radius: 0; box-shadow: none; display: none;
  }
  .has-mega:hover .mega{ display: none; }
}


/* exact header height so the panel sits flush under it */
.nav{ --nav-h: 64px; }

/* your mega (leave other rules as-is) but ensure it's fixed & flush */
.has-mega .mega{
  position: fixed;
  top: var(--nav-h);      /* NO extra pixels, removes the hover gap */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}

/* Invisible hover bridge: creates a safe zone between tab and panel */
:root{
  --mega-width: 1120px;   /* use the same width you set for the panel */
  --mega-side-gap: 64px;  /* same side gap you use for the panel */
}
.has-mega::after{
  content:"";
  position: fixed;
  top: var(--nav-h);                  /* exactly where the panel starts */
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--mega-width), calc(100vw - 2*var(--mega-side-gap)));
  height: 12px;                       /* 8–16px is plenty */
  background: transparent;
  display: none;
  z-index: 999;                       /* just under the panel */
}
.has-mega:hover::after,
.has-mega.open::after{ display:block; }

/* JS-controlled open state (keeps your :hover behavior too) */
.has-mega .mega{ display:none; }
.has-mega:hover .mega,
.has-mega.open .mega{ display:block; }
.has-mega:hover .v-arrow,
.has-mega.open  .v-arrow{ transform: rotate(180deg); }



/* Form Container Styles */
.form-container {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #ddd;
    padding: 20px;
    width: 100%;
    max-width: 400px; /* Decreased max-width */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    text-align: left; /* Align text to the left */
    margin: 0 auto;
}

/* Form Heading */
.form-container h2 {
    font-size: 1.8rem;
    color: var(--ink);
    margin-bottom: 20px;
    font-weight: 700;
    text-align : center;
}

/* Input Fields Styling */
.input-field {
    margin-bottom: 12px; /* Reduced margin */
}

.input-field label {
    display: block;
    margin-bottom: 6px; /* Reduced space between label and input */
    font-weight: 400;
    color: var(--ink);
}

.input-field input {
    width: 100%;
    padding: 10px; /* Reduced padding for smaller input box */
    border-radius: 10px;
    border: 1px solid #ddd;
    font-size: 14px;
    color: var(--ink);
    box-sizing: border-box; /* Ensures input box sizing is consistent */
}

.input-field input:focus {
    border-color: #E30613; /* Brand color */
    outline: none;
}

/* Buttons */
.btn {
    display: inline-block;
    background: #E30613; /* Brand color */
    color: white;
    padding: 8px 12px; /* Reduced padding for smaller button */
    border-radius: 20px;
    font-weight: 700;
    width: auto;
    max-width: 200px;
    text-align: center;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
}

.btn:hover {
    background: #c50510; /* Darker shade for hover */
}

/* Text Links */
.subtle {
    color: var(--muted);
    text-align: center;
}

.subtle a {
    color: #E30613; /* Brand color */
    font-weight: 600;
}

.subtle a:hover {
    text-decoration: underline;
}

/* Privacy Policy Text */
p {
    font-size: 14px;
    color: var(--muted);
    text-align: center;
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
    .form-container {
        width: 100%;
        padding: 16px;
    }

    .form-container h2 {
        font-size: 1.2rem;
    }

    .btn {
        padding: 12px 14px;
    }
}
/* Error message styles */
.error {
    color: #E30613; /* Red color for errors */
    font-size: 12px;
    margin-top: 5px;
    display: block;
}

/* Dropdown Menu */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Button (About) */
.dropdown .dropdown-btn {
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px; /* Space between "About" and arrow */
}

/* V-Shaped Arrow */
.dropdown .dropdown-btn span {
    font-size: 10px;
    transition: transform 0.3s ease; /* Smooth rotation */
}

/* Dropdown Content */
.dropdown-content {
    display: none; /* Hide by default */
    position: absolute;
    background-color: #fff;
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 8px;
}

.dropdown-content a {
    color: var(--ink);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-weight: 500;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}

/* Display dropdown when hovering over the parent */
.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropdown-btn span {
    transform: rotate(180deg); /* Rotate arrow when dropdown is open */
}

/* ===== Footer Theme ===== */
.site-footer{
  --ft-bg:#2f363b;            /* dark slate like screenshot */
  --ft-text:#cfe0e4;
  --ft-heading:#ffffff;
  --ft-link:#e3eef1;
  --ft-link-hover:#ffffff;
  --ft-border:rgba(255,255,255,0.12);
  --ft-muted:#9fb0b6;
  --pill:#2a3236;
  --pill-border:#dfe9eb;
  background:var(--ft-bg);
  color:var(--ft-text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
}
.site-footer a{color:var(--ft-link);text-decoration:none}
.site-footer a:hover{color:var(--ft-link-hover); text-decoration:underline}

.site-footer .ft-inner{max-width:1200px;margin:0 auto;padding:34px 20px;}

/* ===== Upper grid ===== */
.ft-grid{
  display:grid;gap:30px;
  grid-template-columns:1fr;
  border-bottom:1px solid var(--ft-border);
  padding-bottom:24px;
}
@media (min-width:700px){ .ft-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:992px){ .ft-grid{grid-template-columns:repeat(4,1fr);} }

.ft-heading{
  margin:0; padding:8px 0 10px;
  color:var(--ft-heading);
  font-weight:600; font-size:1.125rem;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.ft-panel{ padding-bottom:6px; overflow:clip; }
.ft-list{ list-style:none; margin:0; padding:0;}
.ft-list li{ padding:10px 0; }

/* mobile accordion animation */
@media (max-width:991.98px){
  .ft-heading{ cursor:pointer; }
  .ft-panel{ max-height:0; transition:max-height .24s ease; }
  .ft-panel[data-open="true"]{ max-height:600px; }
}

/* desktop columns always open */
@media (min-width:992px){
  .ft-panel{ max-height:none !important; }
}

/* ===== Lower row ===== */
.ft-lower{ display:start; gap:20px; padding-top:24px; }
@media (min-width:992px){ .ft-lower{ grid-template-columns:1fr 1fr; align-items:start; } }

.ft-left{ display:flex; align-items:center; gap:18px; }
.ft-brand img{ width:48px; height:48px; border-radius:12px; display:block; }

/* socials */
.ft-social{ list-style:none; margin:0; padding:0; display:flex; gap:14px; align-items:center; }
.ft-social a{ display:inline-flex; padding:8px; border:1px solid var(--ft-border); border-radius:999px; }
.ft-social svg{ width:20px; height:20px; fill:currentColor; color:#ffffff; }

/* locale + legal */
.ft-meta {
  display: flex;             /* use flex instead of grid */
  flex-direction: column;    /* stack vertically */
  gap: 18px;
  align-items: left;   /* align to left */
  width: 100%;               /* span full width */
  margin-top: 20px;          /* spacing below socials */
}

.ft-locale {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;   /* left align */
  width: 100%;
}

.ft-locale-label {
  font-weight: 800;
  color: #fff;
}

.ft-locale-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 2px solid var(--pill-border);
  border-radius: 999px;
  padding: 12px 18px;
  color: #fff;
}
.ft-locale-btn .arrow {
  width: 18px;
  height: 18px;
}

.ft-legal {
  list-style: none;
  margin: 10px 0 6px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: flex-start;   /* left align legal links */
}
.ft-legal li + li {
  position: relative;
}
.ft-legal li + li::before {
  content: "";
  width: 1px;
  height: 16px;
  background: var(--ft-border);
  display: inline-block;
  margin-right: 30px;
  transform: translateY(3px);
}

.ft-copy {
  color: var(--ft-text);
  opacity: .9;
  font-size: .95rem;
  margin: 6px 0;
}

/* focus */
.site-footer :where(a,button){ outline:none; }
.site-footer :where(a,button):focus-visible{
  box-shadow:0 0 0 3px rgba(82,140,146,.5);
  border-radius:6px;
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .site-footer *{ transition:none !important; }
}

/* ===== Footer Theme ===== */
.site-footer {
  --ft-bg-upper:#2f363b;   /* dark slate for upper section */
  --ft-bg-lower:#1f2428;   /* even darker for lower section */
  --ft-text:#cfe0e4;
  --ft-heading:#ffffff;
  --ft-link:#e3eef1;
  --ft-link-hover:#ffffff;
  --ft-border:rgba(255,255,255,0.12);
  --ft-muted:#9fb0b6;
  --pill:#2a3236;
  --pill-border:#dfe9eb;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ft-text);
}

/* apply background only to wrapper parts */
.site-footer .ft-inner { 
  max-width:1200px;
  margin:0 auto;
  padding:0;
}

.ft-grid {
  display:grid; 
  gap:30px;
  grid-template-columns:1fr;
  padding:34px 20px 24px;
  background:var(--ft-bg-upper); /* upper bg */
}
@media (min-width:700px){ .ft-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:992px){ .ft-grid{grid-template-columns:repeat(4,1fr);} }

.ft-lower {
  display:start;
  gap:20px;
  padding:24px 20px 34px;
  background:var(--ft-bg-lower); /* lower bg */
}

.ft-heading {
  margin:0; padding:8px 0 10px;
  color:var(--ft-heading);
  font-weight:600; font-size:1.125rem;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.ft-panel{ padding-bottom:6px; overflow:clip; }
.ft-list{ list-style:none; margin:0; padding:0;}
.ft-list li{ padding:10px 0; }

/* socials styling remains */
.ft-social a { 
  display:inline-flex;
  padding:8px;
  border:1px solid var(--ft-border);
  border-radius:999px;
}
.ft-social svg {
  width:20px; height:20px; fill:currentColor; color:#ffffff;
}

/* 1) Remove any overall footer background */
.site-footer { background: transparent; }

/* 2) Kill the divider line that was between sections */
.ft-grid { border-bottom: none !important; }

/* 3) Full-bleed backgrounds for each band (no scrollbars) */
.ft-grid,
.ft-lower { position: relative; z-index: 0; }

/* Upper band color */
.ft-grid::before {
  content: "";
  position: absolute;
  inset: 0;                 /* cover the band */
  z-index: -1;
  /* full-bleed trick: paints to viewport edges without overflow */
  box-shadow: 0 0 0 100vmax #28323b;         /* upper color */
  clip-path: inset(0 -100vmax);
}

/* Lower band color */
.ft-lower::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  box-shadow: 0 0 0 100vmax #373a3f;         /* lower color */
  clip-path: inset(0 -100vmax);
  /* no divider */
  border-top: none !important;
}

/* 4) Normal inner paddings (content stays centered by your .ft-inner max-width) */
.ft-grid { padding: 34px 20px 24px; }
.ft-lower { padding: 24px 20px 34px; }

/* 5) Safety: ensure no accidental horizontal scroll from anything else */
html, body { overflow-x: hidden; }

/* make bands full-bleed without any edge seams */
.ft-grid,
.ft-lower { position: relative; z-index: 0; }

/* Upper band */
.ft-grid::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  /* extend to viewport edges from a centered container */
  left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  background:#28323b;               /* upper color */
  z-index:-1;
}

/* Lower band */
.ft-lower::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  background:#373a3f;               /* lower color */
  z-index:-1;
  border-top:none !important;        /* ensure no divider */
}

/* remove any leftover line from the upper block */
.ft-grid{ border-bottom:none !important; }

/* containment + padding (unchanged) */
.ft-grid{ padding:34px 20px 24px; }
.ft-lower{ padding:24px 20px 34px; }

/* safety: prevent accidental horizontal scroll from other elements */
html,body{ overflow-x:hidden; }

/* Footer grid with equal column widths */
.ft-grid {
  display: grid;
  gap: 40px; /* controls space between columns */
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  padding: 34px 20px 24px;
}

/* ===== Find Jobs hero (scoped) ===== */
.jobs-hero{
  background:#0d1a38; /* deep navy like Randstad */
  padding:28px 0 34px;
}
.jobs-hero .container{max-width:1120px}

.jobs-search{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.jobs-input{
  flex:1 1 320px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:12px 14px;
  font-size:16px;
  color:#111;
  outline:none;
}
.jobs-input:focus{ border-color:#cbd5e1; box-shadow:0 0 0 3px rgba(31,111,235,.12); }

.jobs-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:#1f6feb; color:#fff; border:0; border-radius:8px;
  padding:12px 18px; font-weight:700; cursor:pointer;
}
.jobs-btn:hover{ filter:brightness(.96); }

.jobs-remote{
  display:inline-flex; align-items:center; gap:8px; color:#fff; margin-left:6px;
}
.jobs-remote input{ width:18px; height:18px; }

/* Responsive */
@media (max-width: 720px){
  .jobs-input{ flex:1 1 100% }
  .jobs-btn{ width:100%; justify-content:center }
  .jobs-remote{ width:100%; margin-left:0 }
}

/* HERO */
.search-hero{background:#0d1a38;padding:40px 0;text-align:center}
.search-form{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.search-form input{
  width:260px;padding:14px 16px;border:1px solid #ddd;border-radius:6px;font-size:16px;
  box-shadow:0 2px 4px rgba(0,0,0,.08);background:#fff
}
.search-form button{
  display:inline-flex;align-items:center;gap:8px;background:#d13913;color:#fff;font-weight:600;
  border:0;border-radius:6px;padding:14px 20px;font-size:16px;cursor:pointer
}
.remote-check{display:flex;align-items:center;justify-content:center;margin-top:14px;color:#fff;font-size:15px}
.remote-check input{margin-right:8px;width:18px;height:18px}

/* RESULTS HEADER + FILTERS */
.jobs-results{background:#fafafa;padding:30px 0}
.results-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
.results-header h2{font-size:22px;font-weight:600;margin:0}
.results-controls{display:flex;align-items:center;gap:16px}
.sort-select{display:flex;align-items:center;gap:6px}
.sort-select select{border:1px solid #ddd;border-radius:6px;padding:8px 10px;font-size:15px}
.filters{display:flex;gap:20px;margin-top:20px}
.filters .filter{background:none;border:0;font-weight:600;font-size:15px;cursor:pointer}

/* JOB CARDS */
.job-card{
  background:#fff;border:1px solid #eee;border-radius:12px;padding:16px;margin-bottom:14px;
  display:grid;gap:8px
}
.job-card h3{margin:0;font-size:18px}
.job-card h3 a{color:#cc1616;text-decoration:none}
.job-card h3 a:hover{text-decoration:underline}
.job-meta{color:#444;font-size:14px;display:flex;gap:14px;flex-wrap:wrap}
.job-tags{display:flex;gap:8px;flex-wrap:wrap}
.job-tag{background:#f1f5ff;color:#1f6feb;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:600}
.job-row{display:flex;justify-content:space-between;align-items:center}
.job-apply{background:#E30613;color:#fff;border:0;border-radius:999px;padding:8px 12px;font-weight:700;text-decoration:none}


html, body { background:#0f141a; }

.hero-full-img{
  position:relative; min-height:100vh;
  display:flex; align-items:center; color:#fff; overflow:hidden;
}
/* Image fills the section */
.hero-full-img .bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:right; filter:saturate(1.02) contrast(1.02);
}
/* Gradient that never hits 0 opacity */
.hero-full-img .shade{
  position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(90deg,
    rgba(15,20,26,0.92) 0%,
    rgba(15,20,26,0.85) 35%,
    rgba(15,20,26,0.08) 75%,
    rgba(15,20,26,0.08) 100%
  );
}
.hero-full-img .hero-content{ position:relative; z-index:1; max-width:640px; margin-left:5%; }
/* reuse same typography/buttons from version A */


body {
  margin: 0;
  font-family: Arial, sans-serif;
  color: #222;
  line-height: 1.6;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
}

/* HERO (same as Robert Half style) */
.hero-rh {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  color: #fff;
  background: url("images/Index5.jpg") center right / cover no-repeat;
}

.hero-rh::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(15,20,26,0.95) 0%, rgba(15,20,26,0.85) 40%, rgba(15,20,26,0) 70%);
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin-left: 6%;
}

.hero-content h1 {
  font-size: clamp(2.8rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 20px;
}

.hero-content .accent { color: #4F8DF3; }
.lead { font-size: 1.2rem; margin-bottom: 25px; }

.cta-row { display: flex; gap: 15px; }
.btn { padding: 14px 28px; border-radius: 30px; font-weight: 700; text-decoration: none; }
.btn.red { background: #d6001c; color: #fff; }
.btn.light { background: #fff; color: #111; }

/* SECTIONS */
section { padding: 80px 0; }

.about { background: #f9f9f9; text-align: center; }
.about h2 { font-size: 2rem; margin-bottom: 20px; }

.services { background: #fff; text-align: center; }
.services h2 { margin-bottom: 40px; }
.services .grid { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.services .card {
  flex: 1 1 250px;
  background: #f5f5f5;
  padding: 20px;
  border-radius: 10px;
}

.testimonials { background: #f0f0f0; text-align: center; }
.testimonials blockquote {
  font-style: italic;
  margin: 20px auto;
  max-width: 700px;
}
.testimonials cite { display: block; margin-top: 10px; font-weight: bold; }

.cta-footer { background: #4F8DF3; color: #fff; text-align: center; }
.cta-footer h2 { margin-bottom: 15px; }
.cta-footer p { margin-bottom: 25px; }

/* ===== About Spotlight ===== */
.about-spotlight {
  background: #0c1634;
  color: #e8ecff;
  padding: clamp(64px, 8vw, 100px) 0;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 6vw, 80px);
  align-items: center;
}

.about-copy h2 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);  /* smaller heading */
  font-weight: 700;                      /* lighter strength */
  line-height: 1.1;
  margin: 0 0 16px;
  text-transform: lowercase;
}

.about-copy p {
  font-size: 1rem;
  color: #c9d2ff;
  max-width: 50ch;
  margin: 0 0 24px;
}

.btn-outline {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 8px;
  border: 2px solid #c9d2ff;
  color: #e8ecff;
  text-decoration: none;
  font-weight: 600;
}
.btn-outline:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Right-side image */
.about-art img {
  width: 100%;
  max-width: 420px;
  display: block;
  margin: auto;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Responsive */
@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .about-copy {
    max-width: 90%;
    margin: auto;
  }
  .about-art img {
    margin-top: 20px;
  }
}

.about-spotlight {
  background: #0c1634;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* Left text */
.about-copy {
  flex: 1;
}

.about-copy h2 {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 700;
  margin-bottom: 16px;
}

.about-copy p {
  font-size: 1rem;
  color: #c9d2ff;
  margin-bottom: 20px;
  max-width: 50ch;
}

.btn-outline {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 8px;
  border: 2px solid #c9d2ff;
  color: #e8ecff;
  text-decoration: none;
  font-weight: 600;
}
.btn-outline:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Right image */
.about-art img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

/* ✅ Make section height = image height */
.about-art {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.about-spotlight {
  height: auto;         /* section adjusts */
}

.application-process {
  padding: 80px 20px;
  background: #f9fafc;
  text-align: center;
}

.application-process h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #111827;
}

.application-process .subtitle {
  color: #6b7280;
  margin-bottom: 40px;
  font-size: 1.1rem;
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
}

.step {
  background: #ffffff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.step:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.icon {
  font-size: 2rem;
  margin-bottom: 15px;
}

.step h3 {
  font-size: 1.25rem;
  color: #111827;
  margin-bottom: 10px;
}

.step p {
  font-size: 0.95rem;
  color: #374151;
  line-height: 1.5;
}

.insights {
  padding: 80px 20px;
  background: #fff;
  text-align: center;
}

.insights h2 {
  font-size: 4rem;
  font-weight: 500;
  margin-bottom: 40px;
  color: #111827;
}

.insight-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.card h3 {
  font-size: 1.2rem;
  margin: 15px;
  color: #111827;
}

.card p {
  font-size: 0.95rem;
  margin: 0 15px 15px;
  color: #374151;
  line-height: 1.5;
}

.card a {
  display: inline-block;
  margin: 0 15px 20px;
  color: #0066cc;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.card a:hover {
  color: #004999;
}


/* ===== For Employers page ===== */

/* Base */
:root{
  --ink:#0b1b2b; --ink-soft:#445469; --white:#fff;
  --accent:#0ea5e9; --radius:18px;
}
*{box-sizing:border-box}
.hero-employers{position:relative;color:var(--ink)}
.hero-employers .container{max-width:1180px;margin:auto;padding:0 24px}

/* Background image */
.hero-employers .hero-bg{position:relative;display:block}
.hero-employers .hero-bg img{width:100%;height:360px;object-fit:cover;object-position:center}
@media (min-width:900px){
  .hero-employers .hero-bg img{height:420px}
}

/* White headline card */
.hero-card{
  position:absolute; left:50%; top:42px; transform:translateX(-50%);
  background:var(--white); border-radius:16px; box-shadow:0 10px 30px rgba(16,24,40,.18);
  padding:28px 32px; width:min(840px,92vw);
}
.hero-card h1{margin:0 0 8px;font-size:42px;line-height:1.15;letter-spacing:.2px}
.hero-card h1 span{color:var(--accent)}
.hero-card p{margin:0;color:#25364b}

/* Sub-nav under image */
.hero-subnav{
  display:flex;flex-wrap:wrap;gap:18px;justify-content:center;align-items:center;
  margin:18px 0 6px; font-weight:600; font-size:13px; letter-spacing:.02em;
}
.hero-subnav a{
  color:#2c4a66; text-decoration:none; padding:8px 0; white-space:nowrap;
}
.hero-subnav a:hover{color:var(--accent)}
.hero-subnav .divider{width:1px;height:14px;background:#cfd9e5;display:inline-block}

/* Stats row */
.hero-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:36px;
  padding:16px 0 28px;
}
.stat .num{font-size:28px;font-weight:800;color:#103454;margin-bottom:2px}
.stat .label{font-weight:700;margin-bottom:8px}
.stat p{color:var(--ink-soft);margin:0}

/* Responsive */
@media (max-width:900px){
  .hero-card{top:24px;padding:22px 24px}
  .hero-card h1{font-size:34px}
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:22px}
}
@media (max-width:560px){
  .hero-card{width:92vw}
  .hero-subnav{gap:12px}
  .hero-stats{grid-template-columns:1fr}
}

:root{
  --ink:#0b1b2b; --ink-soft:#445469; --white:#fff;
  --accent:#0ea5e9; --radius:18px;
}

/* Hero container */
.hero-employers{
  position:relative;
  color:var(--ink);
  padding-bottom: 14px; /* space before subnav/stats */
}

/* Make <picture> behave as a background banner */
.hero-employers .hero-bg{
  position:relative;
  display:block;
  height: 440px;                 /* banner height like Adecco */
  overflow:hidden;
}
.hero-employers .hero-bg img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  /* Center top keeps faces in frame; tweak if needed */
  object-position:center top;
  filter: brightness(.9);        /* slight darken for contrast */
}

/* White headline pill card over the banner */
.hero-employers .container{
  max-width:1180px; margin:0 auto; padding:0 24px;
  position:relative;             /* anchor the card */
}
.hero-card{
  position:absolute; left:50%; top: 110px; transform:translateX(-50%);
  background:var(--white);
  border-radius: 20px;
  padding: 28px 34px;
  width: min(820px, 92vw);
  box-shadow: 0 12px 40px rgba(16,24,40,.18);
  text-align: left;
}
.hero-card h1{
  margin:0 0 8px; font-size: 42px; line-height: 1.15; letter-spacing:.2px;
}
.hero-card h1 span{ color: var(--accent); }
.hero-card p{ margin:0; color:#2a3f54 }

/* Sub-nav with dividers */
.hero-subnav{
  display:flex; flex-wrap:wrap; gap:18px; justify-content:center; align-items:center;
  margin: 18px 0 6px; font-weight:700; font-size:13px; letter-spacing:.02em;
}
.hero-subnav a{
  color:#2c4a66; text-decoration:none; padding:8px 0; white-space:nowrap;
}
.hero-subnav a:hover{ color: var(--accent); }
.hero-subnav .divider{ width:1px; height:14px; background:#cfd9e5; display:inline-block }

/* Stats row */
.hero-stats{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:36px;
  padding: 16px 0 28px;
}
.stat .num{ font-size:28px; font-weight:800; color:#103454; margin-bottom:2px }
.stat .label{ font-weight:700; margin-bottom:8px }
.stat p{ color: var(--ink-soft); margin:0 }

/* Responsive */
@media (max-width: 1024px){
  .hero-employers .hero-bg{ height:400px }
  .hero-card{ top: 90px }
}
@media (max-width: 760px){
  .hero-employers .hero-bg{ height:340px }
  .hero-card{ top: 70px; padding:20px 22px; width:92vw }
  .hero-card h1{ font-size: 30px }
  .hero-stats{ grid-template-columns: repeat(2,1fr); gap:22px }
}
@media (max-width: 480px){
  .hero-stats{ grid-template-columns: 1fr }
}

/* Cyan-tinted dark background for the hero band ONLY */
.hero-employers.is-cyan-bg{
  /* pick the shade you like */
  background-color:#fff;       /* deep cyan/teal on black */
  /* optional: a thin top separator line under the image */
  box-shadow: inset 0 1px 0 rgba(0,229,255,.12);
}

/* Keep your existing text colors — no changes needed.
   If you previously added cyan text overrides (.is-cyan),
   remove them OR neutralize like this: */
/*
.hero-employers.is-cyan-bg .hero-subnav a,
.hero-employers.is-cyan-bg .hero-stats .num,
.hero-employers.is-cyan-bg .hero-stats .label { color: inherit; }
*/

/* ===== Experience section (Adecco-style) ===== */
:root{
  --ink:#0b1b2b;
  --ink-soft:#43556a;
  --brand:#0ea5e9;          /* Qynox accent */
  --card:#ffffff;
  --container:1180px;
  --radius:16px;
}

.xp-section{
  padding:72px 0;           /* generous white space */
  background:#f8fafc;       /* subtle page tint like the screenshot */
}

.xp-container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

.xp-grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;  /* text a bit wider than image */
  gap:48px;
  align-items:center;
}

/* Copy */
.xp-copy h2{
  font-size:36px;
  line-height:1.15;
  letter-spacing:.2px;
  color:var(--ink);
  margin:0 0 16px;
}
.xp-copy h2 span{ color:var(--brand); }
.xp-copy p{
  color:var(--ink-soft);
  margin:0 0 14px;
  max-width:56ch;           /* comfortable reading width */
}

/* Media */
.xp-media{
  margin:0;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(16,24,40,.14);
  background:var(--card);
}
.xp-media img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

/* ---- Responsive ---- */
@media (max-width: 980px){
  .xp-grid{
    grid-template-columns: 1fr;   /* stack */
    gap:24px;
  }
  .xp-media{ order:2; }           /* image below text on mobile */
  .xp-copy h2{ font-size:30px; }
}

/* Optional: flip layout (image left, text right) */
.xp-section.image-left .xp-grid{
  grid-template-columns: 1fr 1.05fr;
}
.xp-section.image-left .xp-media{ order: -1; }



:root{
  --ink:#0b1b2b; --ink-soft:#445469;
  --navy:#0f2a3d; --brand:#0ea5e9; --card:#ffffff;
  --btn:#132b42; --btn-text:#fff;
  --radius:18px; --container:1180px;
}

.solutions{ padding:72px 0; background:#f9fbfd; }
.sol-container{ max-width:var(--container); margin:0 auto; padding:0 24px; }

.sol-head{ text-align:center; max-width:860px; margin:0 auto 28px; }
.sol-head h2{ font-size:34px; margin:0 0 8px; color:var(--ink); }
.sol-head p{ color:var(--ink-soft); margin:0; }

.sol-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

/* Card */
.sol-card{
  background:var(--card);
  border:1px solid #e6ecf4;
  border-radius:16px;
  box-shadow:0 10px 26px rgba(16,24,40,.08);
  padding:28px 24px 24px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.sol-card h3{ margin:10px 0 8px; font-size:22px; color:var(--navy); }
.sol-card p{ margin:0 0 16px; color:var(--ink-soft); }

/* Red line icons like screenshot (place your SVGs) */
.sol-icon{ width:86px; height:auto; margin-bottom:8px; filter:none; }

/* Center logo panel */
.sol-card--logo{
  background:linear-gradient(145deg,#f8fafc,#eef4fb);
  display:flex; align-items:center; justify-content:center;
}
.sol-card--logo .logo-wrap{
  border:1px dashed #d6deea; border-radius:14px;
  padding:24px 28px; background:#fff;
}
.sol-card--logo img{ height:44px; width:auto; display:block; }

/* Button */
.sol-btn{
  display:inline-block; align-self:center;
  padding:10px 16px; border-radius:999px;
  background:var(--btn); color:var(--btn-text);
  text-decoration:none; font-weight:700; letter-spacing:.02em;
  transition:transform .06s ease, box-shadow .2s ease;
}
.sol-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(19,43,66,.25); }

/* Responsive */
@media (max-width: 1024px){
  .sol-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 680px){
  .sol-grid{ grid-template-columns:1fr; }
}


/* === Image Tile Variant for Solutions cards === */
.sol-card.sol-tile{
  position: relative;
  padding: 0;                       /* content lives in overlay */
  overflow: hidden;
  border-radius: 16px;
  border: none;
  background: #0b1b2b;              /* fallback while image loads */
  box-shadow: 0 12px 28px rgba(16,24,40,.14);
}

.sol-card.sol-tile .tile-link{
  position: relative;
  display: block;
  width: 100%; height: 100%;
  text-decoration: none;
  color: inherit;
  outline: none;
  border-radius: inherit;
}

/* Background image layer */
.sol-card.sol-tile .tile-image{
  position: absolute; inset: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  filter: none;
  transition: transform .6s cubic-bezier(.2,.6,.2,1), filter .3s ease;
}

/* Dark gradient to ensure text contrast */
.sol-card.sol-tile::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(4,12,20,0.05) 0%, rgba(4,12,20,0.55) 65%, rgba(4,12,20,0.85) 100%);
  pointer-events:none;
  transition: opacity .35s ease;
}

/* Content overlay */
.sol-card.sol-tile .tile-overlay{
  position: relative;
  z-index: 2;
  display: grid;
  align-content: end;
  gap: 10px;
  min-height: 320px;                /* keeps a nice tile height */
  padding: 22px;
  color: #fff;
  transform: translateY(8px);
  opacity: .98;
  transition: transform .35s ease, opacity .35s ease;
}

.sol-card.sol-tile h3{
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  color: #fff;
  text-transform: none;
}

.sol-card.sol-tile p{
  margin: 0 0 8px;
  color: rgba(255,255,255,.92);
}

/* Button look inside the overlay */
.sol-card.sol-tile .sol-btn{
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  padding: 10px 14px;
}
.sol-card.sol-tile .sol-btn.ghost{ background: rgba(255,255,255,.08); }

/* Hover / focus reveal effect */
.sol-card.sol-tile:hover .tile-image,
.sol-card.sol-tile:focus-within .tile-image{
  transform: scale(1.06);
  filter: saturate(1.05) contrast(1.05);
}
.sol-card.sol-tile:hover::before,
.sol-card.sol-tile:focus-within::before{
  opacity: 1;
}
.sol-card.sol-tile:hover .tile-overlay,
.sol-card.sol-tile:focus-within .tile-overlay{
  transform: translateY(0);
  opacity: 1;
}

/* Keyboard focus ring */
.sol-card.sol-tile .tile-link:focus-visible{
  box-shadow: 0 0 0 3px #0ea5e9;
}

/* Responsive height tweak */
@media (max-width: 680px){
  .sol-card.sol-tile .tile-overlay{ min-height: 260px; }
}


/* --- UN-BLUR THE TILES --- */

/* 1) Make sure the image itself is never blurred */
.sol-card.sol-tile .tile-image{
  filter: none !important;         /* was sometimes affected by other rules */
  transform: scale(1.02);          /* tiny lift on hover without softening */
}

/* 2) Remove the glass blur from the overlay */
.sol-card.sol-tile .tile-overlay{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  /* use a gentle bottom gradient only, so the top of the photo stays clear */
  background: linear-gradient(
    to top,
    rgba(0,0,0,.50) 0%,
    rgba(0,0,0,.25) 35%,
    rgba(0,0,0,0) 70%
  ) !important;
}

/* 3) Keep the global darkening subtle and avoid full-frame haze */
.sol-card.sol-tile::before{
  background: linear-gradient(
    180deg,
    rgba(6,12,18,.10) 0%,
    rgba(6,12,18,.35) 50%,
    rgba(6,12,18,.60) 100%
  ) !important;  /* darker only near the bottom */
}

/* 4) Text stays crisp/legible without blurring the photo */
.sol-card.sol-tile h3{ color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.35); }
.sol-card.sol-tile p { color:rgba(255,255,255,.95); text-shadow:0 1px 1px rgba(0,0,0,.25); }

/* Optional: make hover a touch darker, still sharp */
.sol-card.sol-tile:hover .tile-overlay,
.sol-card.sol-tile:focus-within .tile-overlay{
  background: linear-gradient(
    to top,
    rgba(0,0,0,.58) 0%,
    rgba(0,0,0,.30) 40%,
    rgba(0,0,0,0) 70%
  ) !important;
}


/* Hide old pill style if any stray remains */
.sol-card.sol-tile .sol-btn { display:none !important; }

/* Arrow indicator */
.tile-arrow{
  position:absolute;
  right:18px;
  bottom:16px;
  font-size:10px;            /* size of the arrow */
  line-height:1;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  transition: transform .18s ease, opacity .18s ease;
  opacity:.95;
  pointer-events:none;       /* arrow is decorative; link is the whole tile */
}

/* Nice nudge on hover/focus */
.sol-card.sol-tile:hover .tile-arrow,
.sol-card.sol-tile:focus-within .tile-arrow{
  transform: translateX(4px);
  opacity:1;
}

/* Screen-reader only helper */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);
  border:0;white-space:nowrap;
}


:root{
  --ink:#0b1b2b; --ink-soft:#445469;
  --card:#fff; --radius:14px;
  --container:1180px; --shadow:0 10px 24px rgba(16,24,40,.08);
  --brand:#0ea5e9; /* optional accent for hover */
}

.inds{ padding:72px 0; background:#fff; }
.inds__container{ max-width:var(--container); margin:0 auto; padding:0 24px; }

.inds__head{ text-align:center; max-width:820px; margin:0 auto 28px; }
.inds__head h2{ font-size:34px; margin:0 0 8px; color:var(--ink); }
.inds__head p{ margin:0; color:var(--ink-soft); }

.inds__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
}

/* Card */
.inds__card{
  display:block; background:var(--card); border:1px solid #e6ecf4;
  border-radius:16px; box-shadow:var(--shadow); overflow:hidden;
  text-decoration:none; color:inherit; transition:transform .12s ease, box-shadow .2s ease;
}
.inds__card:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(16,24,40,.12); }

/* Image header */
.inds__media{ margin:0; aspect-ratio: 16 / 9; overflow:hidden; background:#f2f6fb; }
.inds__media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Body */
.inds__body{ padding:16px 18px 18px; }
.inds__body h3{ margin:0 0 8px; font-size:18px; color:#102c44; line-height:1.3; }

/* MORE link */
.inds__more{
  display:inline-flex; gap:6px; align-items:center; font-weight:700; font-size:12px;
  color:#22486a; letter-spacing:.02em;
}
.inds__card:hover .inds__more{ color:var(--brand); }
.inds__more span{ transform:translateX(0); transition:transform .15s ease; }
.inds__card:hover .inds__more span{ transform:translateX(3px); }

/* Responsive */
@media (max-width:1100px){ .inds__grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:780px){  .inds__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){  .inds__grid{ grid-template-columns:1fr; } }


/* Make the body a flex column so "MORE" can sit at the bottom-right */
.inds__body{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:16px 18px 14px;      /* slightly tighter, like the ref */
  min-height: 92px;            /* keeps room for MORE line */
}

/* Title stays left */
.inds__body h3{
  margin:0;
  font-size:18px;
  color:#102c44;
  line-height:1.3;
}

/* "MORE" style: small, uppercase, blue, arrow on the right, bottom-right corner */
.inds__more{
  margin-top:auto;             /* push to bottom */
  align-self:flex-end;         /* right side */
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#1366b1;               /* Adecco-like blue */
  text-decoration:none;
  cursor:pointer;
}

/* the tiny chevron */
.inds__more::after{
  content:"›";                 /* narrow chevron */
  font-size:14px;
  transform:translateY(1px);
}

/* hover interaction (subtle) */
.inds__card:hover .inds__more{
  color:#0ea5e9;
}
.inds__card:hover .inds__more::after{
  transform:translate(3px,1px);
  transition:transform .15s ease;
}

/* Kill the pseudo arrow so only your HTML arrow remains */
.inds__more::after { content: none !important; }


/* Body becomes a fixed-height flex column */
.inds__body{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 14px;
  min-height: 110px;                 /* adjust if you want more/less room */
}

/* Title can wrap; optional 2-line clamp for uniformity */
.inds__body h3{
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  color: #102c44;
  display: -webkit-box;              /* optional clamp */
  -webkit-line-clamp: 2;             /* keep titles to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* “MORE” bottom-left, consistent across all cards */
.inds__more{
  margin-top: auto;                  /* push to bottom */
  align-self: flex-end;            /* left edge */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #1366b1;
  text-decoration: none;
}
.inds__card:hover .inds__more{ color:#0ea5e9; }


/* Remove underlines from the entire card link in all states */
.inds__card,
.inds__card:link,
.inds__card:visited,
.inds__card:hover,
.inds__card:focus,
.inds__card:active{
  text-decoration: none !important;
}

/* Ensure the title and MORE never get underlined either */
.inds__card h3,
.inds__card:hover h3,
.inds__more,
.inds__card:hover .inds__more{
  text-decoration: none !important;
  border-bottom: 0 !important; /* in case your theme uses border-bottom */
}

/* Keep the hover color change if you’re using it */
.inds__card:hover .inds__more{ color:#0ea5e9; }


:root{
  --ink:#0b1b2b;
  --ink-soft:#445469;
  --container:1180px;
}

.testimonials{ padding:72px 0; background:#fff; }
.tstl-container{ max-width:var(--container); margin:0 auto; padding:0 24px; }

.testimonials h2{
  font-size:34px; line-height:1.2; color:var(--ink);
  margin:0 0 24px;
}

/* grid */
.tstl-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:40px;
}

/* card */
.tstl-card{ margin:0; position:relative; }
.tstl-quote{ display:inline-block; margin-bottom:8px; }

.tstl-card blockquote{
  margin:0;
  color:var(--ink-soft);
  font-size:18px;
  line-height:1.65;
  max-width:42ch; /* similar width as screenshot */
}

/* responsive */
@media (max-width: 900px){
  .tstl-grid{ grid-template-columns:1fr; gap:24px; }
  .tstl-card blockquote{ max-width:none; }
}

/* Use a modern, friendly display font */
.testimonials,
.testimonials * {
  font-family: "Plus Jakarta Sans", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Larger, bolder, tighter heading */
.testimonials h2{
  font-size: clamp(36px, 4.2vw, 54px); /* scales nicely from mobile to desktop */
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: .2px;
  color: #0b1b2b;                 /* deep navy */
  text-align: center;
  margin: 0 0 28px;
}

/* Optional: subtle underline accent under the heading */
.testimonials h2::after{
  content:"";
  display:block;
  width: 72px;
  height: 4px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #00e5ff, #0ea5e9); /* cyan → blue */
  opacity: .9;
}

/* Quote text—slightly larger and cleaner */
.tstl-card blockquote{
  font-size: 18px;                 /* bump up if you like: 19–20px */
  line-height: 1.75;
  color: #5b6b7c;                  /* softer gray-blue for long reading */
  font-weight: 500;                /* a hair heavier for readability */
  margin: 0;
  text-align: center;
}

/* Red quote marks—slightly bigger for balance */
.tstl-quote svg{
  width: 22px; height: 22px;
  transform: translateY(2px);
}

/* Layout spacing (optional) */
.tstl-grid{ gap: 40px; }
@media (max-width: 900px){
  .testimonials h2{ margin-bottom: 20px; }
  .tstl-grid{ gap: 24px; }
}


:root{
  --ink:#0b1b2b;          /* deep navy headers */
  --ink-soft:#445469;     /* body copy */
  --container:1180px;
  --icon-bg:#F3F6FB;      /* soft circle */
  --icon-stroke:#D94135;  /* red icon lines */
}

.tech--qynox{
  padding:74px 0;
  background:#fff;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.tech--qynox .tech__container{ max-width:var(--container); margin:0 auto; padding:0 24px; }

/* Header */
.tech--qynox .tech__head{ text-align:center; max-width:900px; margin:0 auto 28px; }
.tech--qynox h2{
  font-family: "Nunito", system-ui, sans-serif;
  font-weight:600;
  font-size:38px;
  line-height:1.12;
  letter-spacing:.2px;
  margin:0 0 8px;
  color:var(--ink);
}
.tech--qynox .tech__head p{
  margin:0; color:var(--ink-soft); font-size:17px;
}

/* Grid 3 x 2 */
.tech--qynox .tech__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:58px 64px; /* row / column */
}

/* Item layout: icon column + text column */
.tech--qynox .tech__item{
  display:grid; grid-template-columns: 96px 1fr; column-gap:22px;
  align-items:start;
}

/* Icon badge */
.tech--qynox .tech__icon{
  width:96px; height:96px; border-radius:999px;
  display:grid; place-items:center; background:var(--icon-bg);
  box-shadow: inset 0 0 0 1px #E6ECF4;
}
.tech--qynox .tech__icon svg{
  width:34px; height:34px; stroke: var(--icon-stroke);
}

/* Copy */
.tech--qynox .tech__copy h3{
  font-family:"Nunito", system-ui, sans-serif;
  font-weight:500;
  font-size:24px;
  margin: 8px 0 8px;
  color:var(--ink);
}
.tech--qynox .tech__copy p{
  margin:0; color:var(--ink-soft); line-height:1.65; max-width:44ch;
}

/* Responsive */
@media (max-width:1060px){
  .tech--qynox .tech__grid{ grid-template-columns: repeat(2, 1fr); gap:46px 34px; }
  .tech--qynox .tech__item{ grid-template-columns: 88px 1fr; }
  .tech--qynox .tech__icon{ width:88px; height:88px; }
}
@media (max-width:640px){
  .tech--qynox .tech__grid{ grid-template-columns: 1fr; gap:28px; }
  .tech--qynox .tech__item{ grid-template-columns: 80px 1fr; }
  .tech--qynox .tech__icon{ width:80px; height:80px; }
  .tech--qynox .tech__copy h3{ font-size:22px; }
  .tech--qynox h2{ font-size:32px; }
}

/* Bigger gap between the heading block and the feature grid */
#powered-by-technology .tech__head{
  margin-bottom: 64px !important;   /* was ~28–32px */
}

/* optional tiny nudge if needed */
#powered-by-technology .tech__grid{
  margin-top: 8px;                   /* remove if not needed */
}

/* keep it a bit tighter on small screens */
@media (max-width: 640px){
  #powered-by-technology .tech__head{
    margin-bottom: 40px !important;
  }
}


:root{
  --ink:#0b1b2b; --ink-soft:#445469;
  --brand:#00e5ff;               /* Qynox cyan */
  --card:#fff; --container:1180px;
  --shadow:0 12px 26px rgba(16,24,40,.10);
}

.res{ padding:72px 0; background:#fff; }
.res__container{ max-width:var(--container); margin:0 auto; padding:0 24px; }

.res__head{ text-align:center; margin:0 auto 28px; max-width:820px; }
.res__head h2{ font-size:34px; color:var(--ink); margin:0 0 8px; }
.res__head p{ margin:0; color:var(--ink-soft); }

.res__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

.res__card{
  display:block; background:var(--card);
  border:1px solid #e6ecf4; border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow); color:inherit; text-decoration:none;
  transition:transform .12s ease, box-shadow .2s ease;
}
.res__card:hover{ transform:translateY(-2px); box-shadow:0 16px 30px rgba(16,24,40,.14); }

.res__media{ margin:0; aspect-ratio:16/9; background:#f1f6fb; }
.res__media img{ width:100%; height:100%; object-fit:cover; display:block; }

.res__body{ padding:16px 18px 18px; min-height:150px; display:flex; flex-direction:column; gap:10px; }

.res__tag{
  align-self:flex-start;
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  padding:6px 10px; border-radius:999px;
  background:#e6faff; color:#0b6d7a;            /* cyan-ish pill for Qynox */
}
.res__tag--news{ background:#eafaf3; color:#167a4a; }

.res__title{
  margin:0; color:#102c44; font-size:18px; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

.res__cta{
  margin-top:auto; align-self:flex-end;
  font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:#22486a; display:inline-flex; gap:6px; align-items:center; text-decoration:none;
}
.res__card:hover .res__cta{ color:var(--brand); }
.res__cta i{ transition:transform .15s ease; }
.res__card:hover .res__cta i{ transform:translateX(3px); }

.res__more{ display:flex; justify-content:center; margin-top:22px; }
.res__btn{
  display:inline-block; padding:10px 16px; border-radius:999px;
  border:1px solid #cfe0ef; color:#1e3e5c; background:#f8fbff;
  font-weight:600; letter-spacing:.04em; font-size:12px; text-decoration:none;
  transition:background .15s ease, box-shadow .2s ease;
}
.res__btn:hover{ background:#eef6ff; box-shadow:0 8px 18px rgba(30,62,92,.16); }

@media (max-width:1024px){ .res__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){
  .res__grid{ grid-template-columns:1fr; }
  .res__head h2{ font-size:30px; }
}

/* 1) Remove hover effects (no lift, no shadow change, no image effects) */
.res__card{
  transform: none !important;
  box-shadow: var(--shadow) !important; /* keep original shadow */
}
.res__card:hover,
.res__card:focus{
  transform: none !important;
  box-shadow: var(--shadow) !important;
}

/* Make sure the image never animates or dims on hover */
.res__media,
.res__media img{
  transition: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}
/* Optional: ignore hover on the figure entirely (still clickable via parent link) */
.res__media{ pointer-events: none; }

/* 2) Remove underlines from all links in this section (titles + CTAs) */
.res a,
.res a:link,
.res a:visited,
.res a:hover,
.res a:focus,
.res a:active{
  text-decoration: none !important;
  border-bottom: 0 !important; /* if your global theme uses border underline */
}

/* Keep the CTA color change if you want a cue, but no underline */
.res__card:hover .res__cta{
  color: var(--brand);
}

/* Resources: add bigger gap between heading/subhead and the cards */
#resources .res__head{
  margin-bottom: 48px !important;   /* try 56–72px if you want even more */
}

/* (optional) keep it a bit tighter on small screens */
@media (max-width: 640px){
  #resources .res__head{
    margin-bottom: 32px !important;
  }
}

/* =========================
   OUR PROCESS (scoped)
   ========================= */
.process{
  /* local variables – only apply inside .process */
  --proc-copy: #d6e2ea;           /* light copy on dark band */
  --proc-title: #e6f0f5;          /* big heading on dark band */
  --proc-rail:  #eaf0f4;          /* connector line */
  --proc-dot:   #ffffff;          /* circle fill */
  --proc-dot-txt:#0b1b2b;         /* number color */

  background: radial-gradient(1200px 600px at 75% 40%, #062c3d 0%, #082a35 35%, #0a2a35 60%, #0b2a34 100%);
  color: var(--proc-copy);
  padding: 72px 0 88px;
  text-align: center;
}
.process__container{ max-width:1180px; margin:0 auto; padding:0 24px; position:relative; }
.process__title{
  color: var(--proc-title);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 800;
  letter-spacing:.2px;
  margin: 0 0 38px;
}

/* long rail on desktop */
.process__rail{
  position:absolute; left:48px; right:48px; top:148px;
  height:12px; background: var(--proc-rail); border-radius:999px; opacity:.85;
}

.process__steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr);
  gap: clamp(12px, 2vw, 24px);
}
.process__step{ position:relative; display:flex; flex-direction:column; align-items:center; }

.process__dot{
  width:84px; height:84px; border-radius:50%;
  background: var(--proc-dot);
  display:grid; place-items:center;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  margin:0 auto 14px; z-index:1;
}
.process__dot span{ font-size:32px; font-weight:800; color: var(--proc-dot-txt); }

.process__stepTitle{
  color:#eaf6fb; font-size:24px; font-weight:800; margin:6px 0 10px;
}
.process__text{ max-width:22ch; margin:0; line-height:1.6; }

/* accent link */
.process__link{ color:#00e5ff; font-weight:800; text-decoration:none; }
.process__link:hover{ text-decoration:underline; }

/* responsive */
@media (max-width:1024px){
  .process__rail{ top:142px; }
  .process__dot{ width:76px; height:76px; }
  .process__dot span{ font-size:28px; }
  .process__stepTitle{ font-size:22px; }
}
@media (max-width:860px){
  .process__rail{ display:none; }
  .process__steps{ grid-template-columns:repeat(3,1fr); row-gap:38px; }
  .process__step::before{
    content:""; position:absolute; left:0; right:0; top:44px;
    height:10px; background: var(--proc-rail); border-radius:999px; z-index:0;
  }
  .process__stepTitle{ font-size:20px; }
  .process__text{ max-width:28ch; }
}
@media (max-width:560px){
  .process__steps{ grid-template-columns:1fr; row-gap:30px; }
  .process__step::before{ display:none; }
  .process{ padding-bottom:64px; }
  .process__dot{ width:70px; height:70px; }
  .process__dot span{ font-size:26px; }
}


/* Industries */



/* About */


/********************************************************
 * QYNOX — ABOUT SECTIONS
 * (Hero, Snapshot, What we do, How we deliver,
 *  Teasers for Who/Impact/Locations, CTA band)
 * All styles are scoped with .ab-*
 ********************************************************/

/* ---- Theme tokens (safe to redeclare) ---- */
:root{
  --ab-navy:#072b38;
  --ab-blue:#0d6efd;
  --ab-ink:#102c44;
  --ab-muted:#5e738b;
  --ab-line:#e6ecf4;
  --ab-card:#ffffff;
}

/* ---- Generic wrappers ---- */
.ab-wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
.ab-section{ padding:44px 0; }
.ab-h2{ margin:0 0 8px; font-size: clamp(28px,4vw,40px); color:var(--ab-ink); }
.ab-sub{ color:var(--ab-muted); margin:0 0 14px; }
.ab-grid-2{ display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; align-items:center; }
.ab-list{ margin:10px 0 14px; padding-left:18px; color:#445a72; }

/* ======================================================
   HERO
   ====================================================== */
.ab-hero{
  position: relative;
  background: var(--ab-navy);
  color: #eaf6ff;
  padding: clamp(72px, 8vw, 120px) 0 clamp(64px, 7vw, 96px);
  text-align: center;
  overflow: hidden;
}
.ab-hero::before{
  content:"";
  position:absolute; inset:-20% -10% auto -10%;
  height: 120%;
  background:
    radial-gradient(60% 30% at 50% 10%, rgba(0,229,255,.12) 0%, rgba(0,229,255,0) 60%),
    radial-gradient(60% 40% at 85% 30%, rgba(4,153,168,.18) 0%, rgba(4,153,168,0) 55%);
  pointer-events:none;
  z-index:0;
}
.ab-hero__container{ max-width: 1100px; margin: 0 auto; padding: 0 24px; position:relative; z-index:1; }
.ab-hero__eyebrow{ margin:0 0 14px; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:#a7c7d9; }
.ab-hero__title{ margin:0 0 16px; font-weight:800; line-height:1.08; letter-spacing:.2px; font-size:clamp(32px,5.2vw,64px); color:#f2fbff; }
.ab-hero__lead{ margin:0 auto; max-width:820px; line-height:1.7; color:#c7d9e6; font-size:clamp(16px,1.7vw,18px); }
.ab-hero__cta{ display:inline-flex; gap:14px; margin-top:22px; flex-wrap:wrap; }

/* Buttons used inside About sections */
.ab-btn{ display:inline-block; padding:12px 18px; border-radius:12px; font-weight:700; text-decoration:none; }
.ab-btn--outline{ border:1px solid #b1c6de; color:#eef6ff; background:transparent; transition:background .18s ease, box-shadow .2s ease; }
.ab-btn--outline:hover{ background:#0d3a4b; box-shadow:0 10px 24px rgba(0,0,0,.25); }
.ab-btn--ghost{ color:#d0e6f6; border:1px solid transparent; transition:color .18s ease; }
.ab-btn--ghost:hover{ color:#00e5ff; }
.ab-btn--primary{ background:var(--ab-blue); color:#fff; box-shadow:0 10px 24px rgba(13,110,253,.25); }
.ab-btn--primary:hover{ background:#095cdc; }

/* ======================================================
   SNAPSHOT (KPIs)
   ====================================================== */
.ab-kpis{ display:grid; grid-template-columns: repeat(4,1fr); gap:14px; }
.ab-kpi{
  background:var(--ab-card);
  border:1px solid var(--ab-line);
  border-radius:14px;
  padding:16px 14px;
  text-align:center;
  box-shadow:0 10px 20px rgba(16,24,40,.08);
}
.ab-kpi strong{ display:block; font-size:28px; color:var(--ab-blue); }
.ab-kpi span{ color:#58708a; font-size:14px; }

/* ======================================================
   WHAT WE DO (PILLARS)
   ====================================================== */
.ab-pillars .ab-cards{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
.ab-card{
  background:var(--ab-card);
  border:1px solid var(--ab-line);
  border-radius:14px;
  padding:16px;
  box-shadow:0 10px 22px rgba(16,24,40,.08);
}
.ab-card__ico{ font-size:32px; line-height:1; }
.ab-card h3{ margin:8px 0 6px; color:#16324b; }
.ab-card p{ margin:0; color:#536b82; }

/* ======================================================
   HOW WE DELIVER (FLOW)
   ====================================================== */
.ab-flow__rail{ display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; }
.ab-step{
  background:#fff;
  border:1px solid var(--ab-line);
  border-radius:14px;
  padding:14px;
  width:210px;
  box-shadow:0 8px 18px rgba(16,24,40,.08);
}
.ab-step__num{
  display:inline-grid; place-items:center;
  width:30px; height:30px; border-radius:50%;
  background:#eaf3ff; color:var(--ab-blue); font-weight:800; margin-bottom:6px;
}
.ab-arrow{ align-self:center; color:#8aa3bd; font-weight:700; }

/* ======================================================
   TEASERS (Who we are / Impact / Locations)
   ====================================================== */
.ab-teaser__copy h2{ margin:0 0 8px; color:var(--ab-ink); }
.ab-teaser__copy p{ color:#475b73; line-height:1.7; }
.ab-teaser__media img{
  width:100%; display:block; border-radius:16px;
  box-shadow:0 18px 32px rgba(16,24,40,.18);
}

/* Impact mini-bars */
.ab-charts{
  background:#fff;
  border:1px solid var(--ab-line);
  border-radius:14px;
  padding:14px;
  box-shadow:0 8px 18px rgba(16,24,40,.08);
}
.ab-charts figcaption{ margin-bottom:8px; color:var(--ab-ink); font-weight:700; }
.ab-bar{ background:#eff5fb; border-radius:999px; margin:8px 0; overflow:hidden; }
.ab-bar span{
  display:block; background:var(--ab-blue); color:#fff;
  padding:8px 10px; border-radius:999px; white-space:nowrap;
}

/* ======================================================
   CTA BAND
   ====================================================== */
.ab-cta-band{ background:#0b1733; color:#eaf6ff; padding:38px 0; }
.ab-cta-band__inner{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.ab-cta-band h3{ margin:0 10px 0 0; font-size: clamp(22px, 3vw, 28px); }

/* ======================================================
   VISIBILITY FIX — ensures readable text if your site
   uses a dark theme. (Non-hero sections become light.)
   ====================================================== */
.ab-section,
.ab-snapshot,
.ab-pillars,
.ab-flow,
.ab-teaser{ background:#ffffff; color:var(--ab-ink); }

.ab-section *:not(a),
.ab-teaser *:not(a){ color: inherit; }

.ab-sub,
.ab-teaser__copy p,
.ab-pillars p,
.ab-flow p,
.ab-list{ color: var(--ab-muted); }

.ab-section a,
.ab-teaser a{
  color: var(--ab-blue);
  text-decoration: none;
}
.ab-section a:hover,
.ab-teaser a:hover{ text-decoration: underline; }

/* Cards on light bg */
.ab-kpi,
.ab-card,
.ab-charts,
.ab-step{
  background: var(--ab-card);
  border: 1px solid var(--ab-line);
  box-shadow:0 8px 18px rgba(16,24,40,.08);
}

/* Section spacing */
.ab-section,
.ab-teaser,
.ab-snapshot,
.ab-pillars,
.ab-flow{
  padding-top:48px;
  padding-bottom:48px;
}

/* Make sure hero stays dark + readable */
.ab-hero{ background:var(--ab-navy); color:#eaf6ff; }

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media (max-width: 1024px){
  .ab-grid-2{ grid-template-columns: 1fr; }
}
@media (max-width: 920px){
  .ab-kpis{ grid-template-columns: repeat(2,1fr); }
  .ab-pillars .ab-cards{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .ab-hero__title{ line-height:1.12; }
  .ab-hero__cta{ gap:10px; }
  .ab-kpis{ grid-template-columns: 1fr; }
}


/* ===============================
   HIGHLIGHTS (image cards)
   =============================== */
.ab-highlights .ab-h2{ margin-bottom:6px; }
.ab-highlights__grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:14px;
  margin-top:12px;
}
.ab-hl-card{
  background:#fff;
  border:1px solid var(--ab-line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 22px rgba(16,24,40,.08);
  display:flex;
  flex-direction:column;
}
.ab-hl-card__media img{
  width:100%;
  height: 220px;
  object-fit: cover;
  display:block;
}
.ab-hl-card__copy{
  padding:14px 14px 16px;
}
.ab-hl-card__copy h3{
  margin:0 0 6px;
  color:var(--ab-ink);
  font-size:18px;
}
.ab-hl-card__copy p{
  margin:0;
  color:#536b82;
  line-height:1.6;
}

/* ===============================
   PROOF IN ACTION (media rows)
   =============================== */
.ab-proof__row{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:24px;
  align-items:center;
  padding-top:24px;
}
.ab-proof__row + .ab-proof__row{ margin-top:10px; }
.ab-proof__row--flip{
  grid-template-columns: .95fr 1.05fr;
}
.ab-proof__row--flip .ab-proof__media{ order:2; }
.ab-proof__row--flip .ab-proof__copy{ order:1; }

.ab-proof__media img{
  width:100%;
  height: 420px;
  object-fit: cover;
  border-radius:16px;
  display:block;
  box-shadow:0 18px 32px rgba(16,24,40,.18);
}
.ab-proof__copy .ab-sub{ margin-top:4px; margin-bottom:8px; }

/* Responsive */
@media (max-width: 1024px){
  .ab-highlights__grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .ab-highlights__grid{ grid-template-columns: 1fr; }
  .ab-proof__row,
  .ab-proof__row--flip{
    grid-template-columns:1fr;
  }
  .ab-proof__row--flip .ab-proof__media{ order:1; }
  .ab-proof__row--flip .ab-proof__copy{ order:2; }
  .ab-proof__media img{ height: 320px; }
}


/* =========================================
   HIGHLIGHTS — spacing + hover enhancements
   ========================================= */

/* 1) Increase the gap between heading and the cards */
.ab-highlights .ab-h2 { margin-bottom: 6px; }          /* keep a tight heading to subcopy */
.ab-highlights .ab-sub { margin-bottom: 12px; }         /* space after the subcopy */
.ab-highlights__grid { margin-top: 26px; }              /* <-- increased from ~12px */

/* 2) Card hover: lift, stronger shadow */
.ab-hl-card{
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  will-change: transform, box-shadow;
}
.ab-hl-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(16,24,40,.16);
  border-color: rgba(13,110,253,.25);
}

/* 3) Image hover: gentle zoom + soft gradient */
.ab-hl-card__media{
  position: relative;
  overflow: hidden;
  border-radius: 16px 16px 0 0;   /* keep top corners nicely rounded */
}
.ab-hl-card__media img{
  width:100%;
  height:220px;
  object-fit: cover;
  display:block;
  transform: scale(1);
  transition: transform .6s ease, filter .4s ease;
  will-change: transform;
}
/* gradient overlay */
.ab-hl-card__media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.14) 65%,
    rgba(0,0,0,.22) 100%
  );
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events:none;
}
.ab-hl-card:hover .ab-hl-card__media img{
  transform: scale(1.06);
}
.ab-hl-card:hover .ab-hl-card__media::after{
  opacity: .55;
}

/* 4) Keep motion accessible */
@media (prefers-reduced-motion: reduce){
  .ab-hl-card,
  .ab-hl-card__media img,
  .ab-hl-card__media::after{ transition: none !important; }
  .ab-hl-card:hover{ transform:none !important; }
}

/* 5) Optional: subtle title underline on hover (keeps it classy) */
.ab-hl-card__copy h3{
  position: relative;
  display: inline-block;
  color: var(--ab-ink);
}
.ab-hl-card__copy h3::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:-4px;
  height:2px; background: var(--ab-blue);
  transition: right .28s ease;
}
.ab-hl-card:hover .ab-hl-card__copy h3::after{
  right:0;
}

/* Center heading & sub for this section */
.ab-h2--center,
.ab-sub--center { text-align: center; }

/* More separation from previous section + breathing room */
.ab-highlights { padding-top: 72px; padding-bottom: 44px; }

/* Tighten the heading/sub spacing */
.ab-highlights .ab-h2 { margin-bottom: 8px; }
.ab-highlights .ab-sub {
  max-width: 860px;
  margin: 0 auto 12px;
  line-height: 1.7;
}

/* Intro paragraph under the subcopy */
.ab-highlights__intro{
  max-width: 980px;
  margin: 16px auto 26px;
  text-align: center;
  color: var(--ab-muted);
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.8;
}

/* Keep cards nicely spaced from the intro */
.ab-highlights__grid { margin-top: 26px; }

/* Card base (safe if you already have similar styles) */
.ab-hl-card{
  background:#fff;
  border:1px solid var(--ab-line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 22px rgba(16,24,40,.08);
  display:flex;
  flex-direction:column;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  will-change: transform, box-shadow;
}
.ab-hl-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(16,24,40,.16);
  border-color: rgba(13,110,253,.25);
}

/* Image container + hover zoom + soft gradient */
.ab-hl-card__media{
  position: relative;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
}
.ab-hl-card__media img{
  width:100%;
  height:220px;
  object-fit: cover;
  display:block;
  transform: scale(1);
  transition: transform .6s ease, filter .4s ease;
  will-change: transform;
}
.ab-hl-card__media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.14) 65%,
    rgba(0,0,0,.22) 100%
  );
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events:none;
}
.ab-hl-card:hover .ab-hl-card__media img{ transform: scale(1.06); }
.ab-hl-card:hover .ab-hl-card__media::after{ opacity: .55; }

/* Title accent on hover */
.ab-hl-card__copy{ padding:14px 14px 16px; }
.ab-hl-card__copy h3{
  position: relative;
  display: inline-block;
  color: var(--ab-ink);
}
.ab-hl-card__copy h3::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:-4px;
  height:2px; background: var(--ab-blue);
  transition: right .28s ease;
}
.ab-hl-card:hover .ab-hl-card__copy h3::after{ right:0; }

/* Motion accessibility */
@media (prefers-reduced-motion: reduce){
  .ab-hl-card,
  .ab-hl-card__media img,
  .ab-hl-card__media::after { transition:none !important; }
  .ab-hl-card:hover{ transform:none !important; }
}


/* CONTACT + HIRING */


/* ------------------------------
   Contact Hero
------------------------------ */
/* ------------------------------
   CONTACT – HERO (scoped styles)
   ------------------------------ */

.contact-hero{
  position: relative;
  /* If you already apply the page banner elsewhere, you can remove next 3 lines */
  background: var(--bg, none) center/cover no-repeat;
  /* keep your existing page background; we only add a subtle overlay */
  isolation: isolate;
  color: #fff;
  overflow: hidden;
  padding: clamp(48px, 8vw, 80px) 0;
}

/* soft dark overlay so white text remains readable but we do NOT touch the site bg */
.contact-hero::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(6, 29, 38, 0.65); /* deep teal overlay; adjust as needed */
  z-index:-1;
}

.contact-hero__wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 6vw, 64px);
  align-items: center;
}

/* Left column */
.contact-hero__title{
  margin: 0 0 10px;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: .2px;
  font-weight: 800;
}

.contact-hero__lead{
  margin: 0 0 20px;
  font-size: clamp(20px, 2.6vw, 32px);
  line-height: 1.25;
  opacity: .95;
}

/* colored dots accent (optional) */
.contact-hero__dots{
  display: flex; gap: 10px; margin-top: 14px;
}
.contact-hero__dots span{
  width: 10px; height: 10px; border-radius: 50%;
  background: #ffd300;           /* yellow */
}
.contact-hero__dots span:nth-child(2){ background:#00e0ff; }
.contact-hero__dots span:nth-child(3){ background:#ff477e; }

/* Right column - action cards row */
.contact-hero__actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 4vw, 28px);
  justify-items: center;
}

.contact-hero__card{
  width: 100%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: clamp(16px, 2.8vw, 22px);
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  backdrop-filter: blur(1.5px);
}
.contact-hero__card:hover{
  transform: translateY(-4px);
  background: rgba(255,255,255,0.10);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}

.contact-hero__icon{
  color: #d7e7f0;
  display: inline-grid;
  place-items: center;
  width: 72px; height:72px;
  border-radius: 16px;
  background: rgba(255,255,255,0.08);
  margin-inline: auto;
  margin-bottom: 14px;
}

.contact-hero__card-title{
  margin: 6px 0 16px;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
}

/* pill button */
.contact-hero__btn{
  display:inline-flex;
  align-items:center; justify-content:center;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing:.2px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  color:#00212a;
  box-shadow: 0 8px 14px rgba(0,0,0,.22);
  border: none;
}
.contact-hero__btn:hover{ transform: translateY(-2px); box-shadow:0 12px 24px rgba(0,0,0,.28); }

/* yellow brand button (like screenshot) */
.contact-hero__btn--yellow{
  background: #ffd400;
}
.contact-hero__btn--yellow:hover{
  background: #ffcf00;
}

/* responsive: stack columns on small screens */
@media (max-width: 900px){
  .contact-hero__wrap{
    grid-template-columns: 1fr;
    text-align: left;
  }
  .contact-hero__actions{
    grid-template-columns: 1fr;
    max-width: 520px;
    width: 100%;
    margin: 6px 0 0;
  }
}

/* Icon sizing for the contact hero */
.contact-hero__icon {
  --icon-size: 44px;   /* same visual size as your previous SVGs */
  line-height: 0;
}

.contact-hero__icon img {
  width: var(--icon-size);
  height: var(--icon-size);
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}

/* Optional: bump icon size on large screens */
@media (min-width: 1024px) {
  .contact-hero__icon { --icon-size: 56px; }
}


.contact-hero a,
.contact-hero a:link,
.contact-hero a:visited,
.contact-hero a:hover,
.contact-hero a:active,
.contact-hero a:focus {
  text-decoration: none;       /* 🚫 no underline */
}



/* =========================
   HIRE SOMEONE — HERO
   ========================= */
.hire-hero {
  /* keeps your page background unchanged */
  background: transparent;
  padding: clamp(56px, 7vw, 88px) 24px 24px;
  text-align: center;
  color: #e7f6fb;           /* readable on dark/teal themes */
}

.hire-hero__wrap {
  max-width: 980px;
  margin: 0 auto;
}

.hire-hero__title {
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.15;
  margin: 0 0 14px;
  color: #ffffff;
  letter-spacing: .2px;
}

.hire-hero__lede {
  margin: 6px auto;
  max-width: 900px;
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.6;
  color: #cfe9f2;
}

.hire-hero__phone {
  margin-top: 16px;
  font-size: clamp(15px, 2vw, 18px);
  color: #cfe9f2;
}

.hire-hero__phone-link {
  color: #02d4e0;           /* Qynox accent */
  font-weight: 700;
  text-decoration: none;
}

.hire-hero__phone-link:hover,
.hire-hero__phone-link:focus-visible {
  text-decoration: underline;
}

/* =========================
   HIRE SOMEONE — FORM
   ========================= */
.hire-form {
  padding: 8px 24px clamp(56px, 6vw, 96px);
}

.hire-form__wrap {
  max-width: 1100px;
  margin: 0 auto;
}

.hire-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 22px clamp(18px, 3vw, 28px);
  align-items: start;
}

/* Fields */
.hire-form__field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hire-form__field--full {
  grid-column: 1 / -1;
}

.hire-form__field label,
.hire-form__field legend {
  color: #cfe9f2;
  font-weight: 600;
  letter-spacing: .2px;
}

.hire-form__inline-note {
  font-size: 14px;
  color: #8ecfe0;
  margin-top: -4px;
}

.hire-form__jobs-link {
  color: #02d4e0;
  font-weight: 700;
  text-decoration: none;
}

.hire-form__jobs-link:hover,
.hire-form__jobs-link:focus-visible {
  text-decoration: underline;
}

.hire-form__field input[type="text"],
.hire-form__field input[type="email"],
.hire-form__field input[type="tel"] {
  height: 56px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: #ffffff;
  color: #0b2b36;
  padding: 12px 14px;
  font-size: 16px;
  outline: none;
}

.hire-form__field input:focus {
  border-color: #02d4e0;
  box-shadow: 0 0 0 3px rgba(2, 212, 224, .2);
}

/* Radios */
.hire-radio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: 22px;
  color: #e7f6fb;
  cursor: pointer;
}

.hire-radio input {
  width: 18px;
  height: 18px;
}

/* reCAPTCHA placeholder (remove if you add the real widget) */
.hire-recaptcha-placeholder {
  width: 304px;
  height: 78px;
  border-radius: 10px;
  background: #0f3542;
  color: #9dd7e4;
  display: grid;
  place-items: center;
  font-size: 14px;
}

/* Submit button */
.hire-form__actions {
  margin-top: 6px;
}

.hire-btn {
  padding: 14px 28px;
  border-radius: 999px;
  border: none;
  font-weight: 700;
  background: #ffd000;
  color: #102a33;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

.hire-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
}

.hire-form__privacy {
  font-size: 14px;
  color: #a5d6e3;
  margin-top: 8px;
}

.hire-form__privacy a {
  color: #02d4e0;
  text-decoration: none;
}

.hire-form__privacy a:hover,
.hire-form__privacy a:focus-visible {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 860px) {
  .hire-form__grid {
    grid-template-columns: 1fr;
  }
}

/* === Hire Someone: make the section narrower & centered === */

/* Narrow the hero text block a bit so it aligns visually with the form */
.hire-hero__wrap {
  max-width: 700px;   /* was 980px */
}

/* Narrow the form container */
.hire-form__wrap {
  max-width: 700px;   /* was 1100px */
}

/* Optional: keep two columns but limit each column width so it doesn't stretch too wide */
.hire-form__grid {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
}

/* On very large screens you can go even tighter if you want */
@media (min-width: 1400px) {
  .hire-hero__wrap,
  .hire-form__wrap {
    max-width: 860px;
  }
}

/* Mobile still stacks to one column as before (kept for clarity) */
@media (max-width: 860px) {
  .hire-form__grid {
    grid-template-columns: 1fr;
  }
}

/* Form container width (centered) */
.hire-form {
  max-width: 720px;          /* ← adjust smaller if you want */
  margin: 0 auto;            /* center */
  padding-inline: 16px;      /* a bit of side breathing room */
}

/* Input “box” look/size */
.hire-form .field,
.hire-form input[type="text"],
.hire-form input[type="email"],
.hire-form input[type="tel"],
.hire-form textarea,
.hire-form select {
  width: 100%;
  height: 48px;              /* lower this if you want a shorter box */
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #e6edf1;
  background: #fff;
  outline: none;
  box-shadow: 0 1px 0 rgba(5, 24, 48, 0.03);
}

/* Two-column rows collapse to 1 column on small screens */
.hire-form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 768px) {
  .hire-form { max-width: 560px; }  /* a touch narrower on tablets */
  .hire-form .row { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .hire-form { max-width: 480px; }
}


/* The wrapper defines the available width for the captcha */
.captcha-wrap {
  width: 100%;
  max-width: 720px;     /* usually match .hire-form max-width */
  margin: 12px auto 0;  /* center horizontally */
}

/* We'll scale .g-recaptcha via a CSS variable set in JS */
.captcha-wrap .g-recaptcha {
  transform: scale(var(--rc-scale, 1));
  transform-origin: left top;
}

.captcha-wrap{
  width:100%;
  max-width:520px;        /* adjust if needed */
}
.captcha-wrap .g-recaptcha{
  transform:scale(var(--rc-scale,1));
  transform-origin:left top;
}
#hireSubmit[disabled]{
  opacity:.6; cursor:not-allowed;
}


/* remove the fieldset box look */
.who-group {
  margin: 12px 0 24px;
}
.who-group__label {
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: .5rem;
  color: #d6f6ff; /* match your light label color */
}
.who-radio {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-right: 1.5rem;
  cursor: pointer;
  user-select: none;
}
.who-radio input { transform: scale(1.1); }

/* common form pieces you’re already using */
.form-field { margin: 14px 0; }
.form-field > label { display:block; font-weight:600; margin-bottom:.35rem; color:#d6f6ff; }
.form-field > label span { color:#ffd166; }        /* keep your accent for * */
.form-field input,
.form-field select,
.form-field textarea {
  width:100%;
  padding:.85rem 1rem;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.14);
  background:#fff;
  color:#0a2230;
}
.form-field .help { font-size:.9rem; margin-top:.25rem; opacity:.8; }

.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width: 800px) { .grid-2 { grid-template-columns:1fr; } }

/* panels (employer/jobseeker) */
.panel { display:none; }
.panel.is-visible { display:block; }


/* remove the fieldset box look */
.who-group {
  margin: 12px 0 24px;
}
.who-group__label {
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: .5rem;
  color: #d6f6ff; /* match your light label color */
}
.who-radio {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-right: 1.5rem;
  cursor: pointer;
  user-select: none;
}
.who-radio input { transform: scale(1.1); }

/* common form pieces you’re already using */
.form-field { margin: 14px 0; }
.form-field > label { display:block; font-weight:600; margin-bottom:.35rem; color:#d6f6ff; }
.form-field > label span { color:#ffd166; }        /* keep your accent for * */
.form-field input,
.form-field select,
.form-field textarea {
  width:100%;
  padding:.85rem 1rem;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.14);
  background:#fff;
  color:#0a2230;
}
.form-field .help { font-size:.9rem; margin-top:.25rem; opacity:.8; }

.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width: 800px) { .grid-2 { grid-template-columns:1fr; } }

/* panels (employer/jobseeker) */
.panel { display:none; }
.panel.is-visible { display:block; }


/* confirmation radios */
.qyn-who {
  margin: 24px 0 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
}

.qyn-who__label {
  font-weight: 700;
  letter-spacing: .01em;
  margin-right: 8px;
}

.qyn-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.qyn-radio input {
  width: 18px;
  height: 18px;
}

/* employer-only panel (hidden by default via [hidden]) */
.qyn-panel {
  margin-top: 18px;
}

.qyn-field {
  margin: 14px 0;
}

.qyn-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.qyn-field input,
.qyn-field select,
.qyn-field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  background: #fff;
  color: #0b1d26;
}

.qyn-field textarea { resize: vertical; }



/* --- Radio group & labels --- */
.hire-fieldset { border: 0; padding: 0; margin: 24px 0; }
.hire-legend { color: #fff; font-weight: 600; margin-bottom: 8px; }

.hire-radio-group {
  display: flex;
  gap: 28px;
  align-items: center;
  margin: 8px 0 16px;
}
.hire-radio input[type="radio"] { transform: scale(1.2); margin-right: 10px; }
.hire-radio span { color: #fff; }

/* Helper text */
.hire-help { color: #9fbcc5; font-size: 0.9rem; margin: 0; }

/* --- Employer extra fields container (stacked directly under radios) --- */
.employer-extra { margin-top: 16px; }

/* --- Generic full-width field styling to match your email/phone --- */
.hire-field { margin: 16px 0; }
.hire-field label {
  color: #fff;
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}
.hire-field input[type="text"],
.hire-field input[type="number"],
.hire-field input[type="file"],
.hire-field select,
.hire-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  background: #ffffff;
  color: #0b2030;
}

/* Optional: subtle focus ring */
.hire-field input:focus,
.hire-field select:focus,
.hire-field textarea:focus {
  outline: 2px solid #00c7df;
  outline-offset: 1px;
}

/* Smooth reveal when switching to 'employer' */
.employer-extra[hidden] { display: none; }



/* Make this whole section span the full row in grid/flex forms */
.confirm-and-extra {
  width: 100%;
  max-width: 100%;
  grid-column: 1 / -1;  /* grid layouts */
  flex: 0 0 100%;       /* flex layouts */
  clear: both;
}

/* Keep the extra fields directly under the radios and full width */
.employer-extra {
  margin-top: 16px;
  width: 100%;
  max-width: 100%;
  grid-column: 1 / -1;
  flex: 0 0 100%;
}

/* Optional styling (white labels, spacing, etc.) */
.hire-legend,
.hire-radio span,
.hire-field label { color: #fff; }

.hire-radio-group {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.hire-field { margin-top: 12px; }

/* Ensure text inputs/selects/textarea stretch full width */
.hire-field input[type="text"],
.hire-field input[type="number"],
.hire-field select,
.hire-field textarea {
  width: 100%;
}


/* ========== Layout for your hire form ========== */
#hireForm{
  /* keeps captcha + button stacked and left aligned */
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;                 /* space between captcha and button */
  margin-top:20px;          /* space above this block */
}

/* reCAPTCHA native width/height */
#hireForm .captcha-wrap{
  width:304px;              /* native checkbox width */
  height:auto;              /* let height grow or be set via media queries */
}

/* Make sure scaling (below) happens from top-left */
#hireForm .g-recaptcha{
  transform-origin:0 0;
}

/* ========== Submit button styling ========== */
#hireSubmit{
  background:#ffd100;             /* Qynox yellow */
  color:#0b2633;                  /* dark text on yellow */
  border:0;
  border-radius:28px;
  padding:12px 28px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  box-shadow:0 6px 12px rgba(0,0,0,.15);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

#hireSubmit:disabled{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
}

#hireSubmit:not(:disabled):hover{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(0,0,0,.18);
}


/* Stack captcha + button and pin them to the left */
#hireForm .hire-submit{
  display:flex;
  flex-direction:column;     /* captcha on top, button below */
  align-items:flex-start;    /* left alignment */
  gap:16px;                  /* space between them */
}

/* Make sure nothing is centering the captcha */
#hireForm .captcha-wrap,
#hireForm .g-recaptcha{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  text-align:left !important;
}

/* Optional: keep the native width of the checkbox */
#hireForm .captcha-wrap{
  width:304px;               /* reCAPTCHA checkbox width */
}

/* Submit button style (keep yours if you already have it) */
#hireSubmit.hire-btn{
  background:#ffd100;
  color:#0b2633;
  border:0;
  border-radius:28px;
  padding:12px 28px;
  font-weight:700;
  box-shadow:0 6px 12px rgba(0,0,0,.15);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
#hireSubmit.hire-btn:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; }
#hireSubmit.hire-btn:not(:disabled):hover{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(0,0,0,.18);
}

/* Optional: scale reCAPTCHA on tiny screens */
@media (max-width: 360px){
  #hireForm .g-recaptcha{ transform:scale(.88); transform-origin:0 0; }
  #hireForm .captcha-wrap{ height:70px; }
}
@media (max-width: 320px){
  #hireForm .g-recaptcha{ transform:scale(.80); transform-origin:0 0; }
  #hireForm .captcha-wrap{ height:63px; }
}

#hireForm .captcha-wrap{
  margin-bottom:42px;   /* extra space under captcha */
  width:304px;          /* keep native captcha width */
}


/* Alerts */

/* 1) Make all asterisks red (labels & legends that use <span aria-hidden="true">*</span>) */
#hireForm label span[aria-hidden="true"],
#hireForm legend span[aria-hidden="true"],
#hireForm .required-asterisk {
  color: #ff3b3b;               /* red */
}

/* 2) Invalid/required highlighting */
#hireForm .hire-invalid {
  border: 2px solid #ff4d4f !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.15);
}

/* Optional: give the radio group a red ring when invalid */
#hireForm .hire-radio-group.hire-invalid {
  border: 2px solid #ff4d4f;
  border-radius: 10px;
  padding: 10px 14px;
}

/* 3) Banner style for the “please fill required fields” message */
#hireError {
  display: none;
  background: #ffefef;
  color: #7a0b0b;
  border: 1px solid #ff4d4f;
  padding: 12px 14px;
  border-radius: 10px;
  margin: 16px 0 8px;
  font-size: 0.95rem;
}

/* Keep form controls readable on your dark bg */
#hireForm input,
#hireForm select,
#hireForm textarea {
  color: #0a0f14;      /* text color inside inputs */
}

/* (Already added earlier) left-align the captcha + space before the Submit button */
#hireForm .hire-submit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;           /* adjust spacing between captcha and button */
}

#hireForm .captcha-wrap {
  width: 304px;        /* native width of the v2 checkbox */
  transform-origin: left top;
  margin-top: 12px;
}



/* General styles for the section */
.ab-section {
  padding: 3rem 0;
  background-color: #f9f9f9;
}

.ab-h2 {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 2rem;
  color: #1c3d6d;
}

/* Container for the cards */
.ab-cards {
  display: flex;
  justify-content: space-around;
  gap: 2rem;
  flex-wrap: wrap;
}

/* Styles for individual cards */
.ab-card {
  background-color: #fff;
  padding: 30px; /* Added padding */
  border-radius: 15px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 260px; /* Set fixed width */
  height: 260px; /* Set fixed height to make the box square */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: all 0.3s ease-in-out; /* Hover effect */
  overflow: hidden; /* Hide the part of the color that overflows */
}

/* Icon styling */
.ab-card__ico {
  font-size: 50px; /* Icon size */
  margin-bottom: 15px;
}

/* Title Styling */
.ab-card h3 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #1c3d6d;
}

/* Paragraph Styling */
.ab-card p {
  font-size: 14px;
  color: #555;
}

/* Hover effect on cards */
.ab-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Add the color fill effect on hover */
.ab-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%; /* Color fill will only cover the top half */
  background-color: #e3c3a2; /* Change to your preferred hover color */
  transition: all 0.3s ease;
  z-index: -1; /* Place behind text */
}

.ab-card:hover::before {
  height: 100%; /* Fill the entire card with color on hover */
}

/* Hover text color change */
.ab-card:hover h3,
.ab-card:hover p {
  color: #fff;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .ab-card {
    width: 100%; /* Full width on smaller screens */
    height: auto; /* Auto height on small screens */
    margin-bottom: 1rem;
  }

  .ab-cards {
    flex-direction: column;
    align-items: center;
  }
}


/* Increase the margin between the paragraph and the cards */
.ab-description {
  font-size: 16px;
  color: #555;
  margin-bottom: 3rem; /* Increased space between the paragraph and the cards */
  line-height: 1.6;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}



/* Styles for "How we deliver" section */
.ab-section.ab-flow {
  padding: 3rem 0;
}

.ab-wrap {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  text-align: center; /* Centering text inside the section */
}

.ab-h2 {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 3rem; /* Increased space between heading and circles */
  color: #1c3d6d;
}

.ab-flow__rail {
  display: flex;
  justify-content: center; /* Center the entire flow */
  align-items: center;
  gap: 2rem; /* Reduced gap between the circles */
  flex-wrap: nowrap; /* Keep circles in a single row */
}

/* Styles for individual steps (circles) */
.ab-step {
  text-align: center;
  position: relative;
  width: 180px; /* Circle size */
  height: 180px; /* Circle size */
  background-color: #e88bcc; /* Circle color */
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%; /* Make it circular */
  flex-direction: column;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hover effect */
}

/* Heading and content text colors */
.ab-step h4 {
  font-size: 16px;
  color: #fff; /* White color for heading */
  margin-top: 10px;
}

.ab-step p {
  font-size: 14px;
  color: #fff; /* White color for content */
  margin-top: 5px;
}

/* Hover effect on circles */
.ab-step:hover {
  transform: scale(1.05); /* Slightly enlarge the circle on hover */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Darker shadow on hover */
}

/* Arrows between steps */
.ab-arrow {
  font-size: 30px;
  color: #1c3d6d;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Styling for responsive adjustments */
@media (max-width: 768px) {
  .ab-flow__rail {
    flex-direction: column;
    gap: 1rem; /* Further reduce gap on mobile */
  }

  .ab-step {
    width: 150px; /* Adjusted circle size for mobile */
    height: 150px;
  }

  .ab-step h4 {
    font-size: 14px;
  }

  .ab-step p {
    font-size: 12px;
  }

  .ab-arrow {
    font-size: 20px;
  }
}



/* Ensure "Who We Are" section points remain on the left */
.ab-section.who-we-are {
  padding: 3rem 0;
}

.ab-wrap {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  text-align: center; /* Keep center alignment for the text in the section */
}

.ab-h2 {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 3rem; /* Space between heading and content */
  color: #1c3d6d;
}

.ab-description {
  font-size: 16px;
  color: #555;
  margin-bottom: 2rem;
  line-height: 1.6;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: center; /* Keep centered text for description */
}

/* Adjust the points list */
.ab-description ul {
  list-style-position: outside; /* Keep the dots outside of the list */
  text-align: left; /* Align text to the left */
  margin-left: 0; /* Remove extra indentation */
  padding-left: 20px; /* Add left padding for the dots */
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.ab-description ul li {
  font-size: 14px;
  color: #555;
  margin-bottom: 10px; /* Space between items */
}

/* Blue button style */
.ab-button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.ab-button:hover {
  background-color: #0056b3;
}



/* =====  Banner Hover =====   */


/* Sticky banner at the top using position: fixed */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* Ensure it's above other content */
  background-color: #fff; /* Optional: Maintain background color */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Shadow for visibility */
  transition: transform 0.3s ease; /* Smooth transition for hover effect */
  padding-top: 0; /* Adjust for any header margin/padding if needed */
  padding-bottom: 0px; /* Adjust padding if necessary */
  margin-top: 0; /* Remove any margin if it exists */
}

/* Mobile Menu Toggle */
.mobile-toggle {
  display: none; /* Hide mobile toggle on larger screens */
}

/* Menu */
.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Hover effect for the sticky nav */
.nav:hover {
  transform: translateY(-5px); /* Adjust to create a slight hover effect */
}

/* Adjust layout for content below */
body {
  padding-top: 60px; /* Adjust padding to prevent content from being hidden under the fixed navbar */
}


/* === Page Theme === */