/* Shatara Recruitment — site styles.
   Values are taken one-to-one from the approved design (design/*.dc.html).
   Physical left/right from the Arabic (RTL) design are written as logical properties
   (inline-start = right in Arabic, left in English) so the English pages mirror correctly. */

/* ---------- Base ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; background: #F6F9FA; color: #0E2A36; font-family: 'Cairo', sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; }
:where(a) { color: #0B4F6C; }
:where(a):hover { color: #8C7530; }
input, select, textarea, button { font-family: inherit; }
[hidden] { display: none !important; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.page { font-family: 'Cairo', sans-serif; background: #F6F9FA; color: #0E2A36; min-height: 100vh; }
.i { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; vertical-align: middle; }
:focus-visible { outline: 2px solid #BCA24E; outline-offset: 2px; }

.dia { width: 8px; height: 8px; background: #BCA24E; transform: rotate(45deg); }
.dia6 { width: 6px; height: 6px; background: #BCA24E; transform: rotate(45deg); }
.orn { display: flex; align-items: center; gap: 10px; }
.orn-line { width: 36px; height: 1px; background: #BCA24E; }
.h2 { margin: 0; font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; color: #0B4F6C; }
.h2-lh { line-height: 1.4; }
.wrap-col { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; }
.shead { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
.shead p, .sub { margin: 0; font-size: clamp(15px, 1.2vw, 18px); color: #516874; }
.ph { border-radius: 22px; background: repeating-linear-gradient(135deg, #E6EDF0 0 10px, #EFF4F6 10px 20px); display: flex; align-items: flex-end; padding: 14px; }
.ph-label { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: #5E7480; background: rgba(255, 255, 255, 0.9); padding: 6px 10px; border-radius: 7px; }

/* ---------- Header ---------- */
.hdr { font-family: 'Cairo', sans-serif; position: sticky; top: 0; z-index: 50; }
.topbar { background: #083B51; color: #D7E4EA; font-size: 13px; }
.topbar-in { max-width: 1240px; margin: 0 auto; padding: 9px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.topbar-info { display: flex; align-items: center; gap: 28px; }
.tb-item { display: flex; align-items: center; gap: 8px; color: #D7E4EA; text-decoration: none; }
.tb-item .i { font-size: 16px; color: #BCA24E; }
.topbar-social { display: flex; align-items: center; gap: 14px; font-size: 17px; }
.topbar-social a { color: #D7E4EA; display: flex; }

.hbar { background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid #E3EBEE; }
.hbar-in { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); height: clamp(68px, 7vw, 84px); display: flex; align-items: center; justify-content: space-between; gap: clamp(12px, 1.6vw, 20px); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.brand img { height: clamp(44px, 4.4vw, 56px); width: auto; display: block; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.25; }
.brand-name { font-size: clamp(15px, 1.4vw, 18px); font-weight: 700; color: #0B4F6C; }
.brand-sub { font-size: 11px; color: #6B808A; letter-spacing: 0.5px; }
.brand-sub:lang(ar) { letter-spacing: 0; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav-item { position: relative; }
.nav-link { display: flex; align-items: center; gap: 4px; padding: 10px 11px; font-size: 15px; font-weight: 600; white-space: nowrap; color: #1D3A46; text-decoration: none; border-radius: 10px; }
.nav-link:hover { color: #0B4F6C; background: #F1F6F8; }
.nav-link .i { font-size: 13px; }
.nav-active { position: absolute; bottom: -1px; inset-inline: 12px; height: 2px; border-radius: 2px; background: #BCA24E; }
.dd { display: none; position: absolute; top: 100%; inset-inline-start: 0; padding-top: 8px; }
.has-dd:hover .dd, .has-dd:focus-within .dd { display: block; }
.dd-box { background: #fff; border: 1px solid #E3EBEE; border-radius: 14px; box-shadow: 0 16px 40px rgba(11, 79, 108, 0.12); padding: 8px; min-width: 220px; display: flex; flex-direction: column; }
.dd-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: #1D3A46; text-decoration: none; font-size: 14px; }
.dd-link:hover { background: #F1F6F8; color: #0B4F6C; }
.dd-link .i { font-size: 18px; color: #0B4F6C; }

.hact { display: flex; align-items: center; gap: 10px; }
.lang { display: flex; align-items: center; background: #F1F6F8; border-radius: 999px; padding: 3px; font-size: 12px; font-weight: 600; }
.lang a { border: 0; cursor: pointer; font-family: inherit; padding: 6px 10px; border-radius: 999px; background: transparent; color: #516874; font-size: 12px; font-weight: 600; text-decoration: none; }
.lang a.on { background: #0B4F6C; color: #fff; }
.hcta { display: flex; align-items: center; gap: 8px; padding: clamp(9px, 1vw, 12px) clamp(12px, 1.4vw, 20px); border-radius: 12px; background: #BCA24E; color: #1A1608; text-decoration: none; font-size: clamp(13px, 1.1vw, 15px); font-weight: 700; box-shadow: 0 6px 16px rgba(188, 162, 78, 0.35); white-space: nowrap; }
.hcta:hover { background: #AD9442; color: #1A1608; }
.hcta .i { font-size: 18px; }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid #D5E1E6; background: #fff; align-items: center; justify-content: center; cursor: pointer; color: #0B4F6C; font-size: 22px; padding: 0; }
.menu-btn .ic-close, .menu-btn[aria-expanded="true"] .ic-open { display: none; }
.menu-btn[aria-expanded="true"] .ic-close { display: inline-block; }

.mnav { background: #fff; border-bottom: 1px solid #E3EBEE; box-shadow: 0 20px 40px rgba(11, 79, 108, 0.12); padding: 8px 16px 20px; display: flex; flex-direction: column; max-height: calc(100vh - 70px); overflow: auto; }
.mnav-link { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; border-bottom: 1px solid #EEF3F5; font-size: 16px; font-weight: 500; color: #1D3A46; text-decoration: none; }
.mnav-link .i { color: #9AAEB7; }
.mnav-svc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 0 4px; }
.mnav-svc a { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 12px; background: #F6F9FA; color: #0B4F6C; text-decoration: none; font-size: 14px; }
.mnav-svc .i { font-size: 18px; }

@media (max-width: 1099.98px) {
  .topbar, .nav { display: none; }
  .menu-btn { display: flex; }
}
@media (min-width: 1100px) {
  .mnav { display: none !important; }
}
/* Phones: the design's header is wider than a 390px screen (the menu button fell off the edge),
   so the request button moves out of the header there — the fixed bottom bar's "book now"
   button opens the same request page. */
@media (max-width: 599.98px) {
  .hcta { display: none; }
  .hbar-in { gap: 12px; }
  .hact { gap: 8px; }
  /* The full company name wraps onto two lines instead of pushing the menu button off-screen. */
  .brand { flex-shrink: 1; min-width: 0; gap: 8px; }
  .brand-txt { min-width: 0; }
  .brand-name { font-size: 14px; line-height: 1.2; }
  .brand-sub { font-size: 10px; }
}

/* ---------- Breadcrumb & inner page heading ---------- */
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #6B808A; }
.crumbs a { color: #6B808A; text-decoration: none; }
.crumbs .i { font-size: 12px; }
.crumbs span { color: #0B4F6C; }

/* ---------- Home: hero ---------- */
.hero { padding: clamp(12px, 2vw, 24px) clamp(12px, 2vw, 24px) 0; }
.hero-box { max-width: 1392px; margin: 0 auto; background: #0B4F6C; background-image: radial-gradient(ellipse at 15% 10%, rgba(188, 162, 78, 0.14), transparent 55%); border-radius: clamp(22px, 2.6vw, 36px); position: relative; overflow: hidden; }
[dir="ltr"] .hero-box { background-image: radial-gradient(ellipse at 85% 10%, rgba(188, 162, 78, 0.14), transparent 55%); }
.hero-frame { position: absolute; inset: clamp(8px, 1vw, 14px); border: 1px solid rgba(188, 162, 78, 0.22); border-radius: clamp(16px, 2vw, 28px); pointer-events: none; }
.hero-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); align-items: center; gap: clamp(24px, 3vw, 48px); padding: clamp(40px, 5vw, 72px) clamp(28px, 5.5vw, 88px) clamp(110px, 9vw, 140px); }
.hero-txt { display: flex; flex-direction: column; gap: clamp(16px, 1.8vw, 24px); }
.hero-slide { display: contents; }
.hero-label { display: inline-flex; align-items: center; gap: 12px; color: #D9C68A; font-size: 15px; font-weight: 600; }
.hero-title { margin: 0; color: #fff; font-size: clamp(34px, 4.4vw, 62px); line-height: 1.35; font-weight: 800; text-wrap: balance; }
.hero-p { margin: 0; color: #D2E2E8; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.95; max-width: 540px; text-wrap: pretty; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.btn-gold { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 999px; background: linear-gradient(180deg, #CDB466, #B39845); color: #1A1608; text-decoration: none; font-size: 16px; font-weight: 700; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.btn-gold:hover { filter: brightness(1.06); color: #1A1608; }
.btn-gold .i { font-size: 20px; }
.btn-ghost { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.32); color: #fff; text-decoration: none; font-size: 16px; font-weight: 600; }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.hero-ctrl { display: flex; align-items: center; gap: 14px; margin-top: clamp(10px, 2vw, 26px); }
.hero-arr { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28); background: transparent; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; padding: 0; }
.hero-arr:hover { border-color: #BCA24E; color: #BCA24E; }
.hero-dots { display: flex; gap: 8px; align-items: center; }
.hero-dot { height: 6px; width: 8px; border-radius: 6px; border: 0; padding: 0; cursor: pointer; background: rgba(255, 255, 255, 0.35); transition: all .3s; }
.hero-dot.on { width: 30px; background: #BCA24E; }
.hero-media { position: relative; display: flex; justify-content: center; padding: clamp(8px, 1vw, 16px); }
.hero-arch { position: relative; width: min(100%, 460px); aspect-ratio: 4 / 4.6; }
.hero-arch-line { position: absolute; inset: 0; transform: translate(-18px, -18px); border: 1.5px solid rgba(188, 162, 78, 0.55); border-radius: 999px 999px 28px 28px; }
[dir="ltr"] .hero-arch-line { transform: translate(18px, -18px); }
.hero-arch-img { position: absolute; inset: 0; border-radius: 999px 999px 28px 28px; overflow: hidden; background: #0E5A7A; }
.hero-img { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .6s; }
.hero-img.on { opacity: 1; pointer-events: auto; }
.hero-img img, .about-arch-img img, .job-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.seal { position: absolute; bottom: clamp(-20px, -1.5vw, -10px); inset-inline-start: clamp(-28px, -2vw, -8px); width: clamp(128px, 11vw, 152px); aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25); display: flex; align-items: center; justify-content: center; }
.seal-in { width: calc(100% - 14px); height: calc(100% - 14px); border-radius: 50%; border: 1.5px solid #BCA24E; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0; line-height: 1.15; }
.seal-a { font-size: 12px; font-weight: 600; color: #516874; }
.seal-n { font-size: clamp(38px, 3.4vw, 46px); font-weight: 800; color: #0B4F6C; line-height: 1; }
.seal-b { font-size: 12px; font-weight: 700; color: #8C7530; padding: 0 10px; }

/* ---------- Home: sectors strip ---------- */
.sectors { padding: 0 clamp(20px, 3vw, 40px); position: relative; z-index: 2; margin-top: clamp(-84px, -6vw, -64px); }
.sectors-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.sector { background: #fff; border-radius: 22px; padding: 22px 24px; display: flex; align-items: center; gap: 18px; text-decoration: none; box-shadow: 0 20px 50px rgba(11, 79, 108, 0.14); border: 1px solid #EAF0F2; transition: transform .25s; }
.sector:hover { transform: translateY(-4px); }
.sector-ic { flex-shrink: 0; width: 68px; height: 68px; border-radius: 20px; background: linear-gradient(160deg, #0E5A7A, #083B51); display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 10px 22px rgba(11, 79, 108, 0.25); }
.sector-ic-frame { position: absolute; inset: 5px; border-radius: 15px; border: 1px solid rgba(188, 162, 78, 0.45); }
.sector-ic .i { font-size: 34px; color: #D9C68A; }
.sector-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sector-txt strong { font-size: 18px; font-weight: 700; color: #0B4F6C; line-height: 1.5; }
.sector-txt span { font-size: 13.5px; color: #6B808A; }
.sector-arr { font-size: 20px; color: #BCA24E; }

/* ---------- Home: trust ---------- */
.trust { padding: clamp(40px, 5vw, 64px) clamp(20px, 3vw, 40px) 0; }
.trust-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(20px, 2.5vw, 32px); }
.trust-item { display: flex; gap: 14px; align-items: flex-start; }
.trust-item > .i { font-size: 34px; color: #0B4F6C; }
.trust-item div { display: flex; flex-direction: column; gap: 2px; }
.trust-item strong { font-size: 16px; font-weight: 700; color: #0E2A36; }
.trust-item span { font-size: 14px; line-height: 1.75; color: #516874; text-wrap: pretty; }

/* ---------- Home: about ---------- */
.home-about { padding: clamp(72px, 9vw, 128px) clamp(20px, 3vw, 40px); }
.about-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(40px, 6vw, 96px); align-items: center; }
.about-arch { position: relative; width: min(100%, 480px); justify-self: center; aspect-ratio: 4 / 4.4; }
.about-arch-line { position: absolute; inset: 0; transform: translate(18px, 18px); border: 1.5px solid #D9C68A; border-radius: 999px 999px 28px 28px; }
[dir="ltr"] .about-arch-line { transform: translate(-18px, 18px); }
.about-arch-img { position: absolute; inset: 0; border-radius: 999px 999px 28px 28px; overflow: hidden; background: #E3EBEE; }
.about-txt { display: flex; flex-direction: column; gap: 20px; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; color: #8C7530; font-size: 15px; font-weight: 700; }
.home-about .h2 { text-wrap: balance; }
.about-p { margin: 0; font-size: clamp(16px, 1.25vw, 18px); line-height: 2.05; color: #3D5560; text-wrap: pretty; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.btn-petrol { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; background: #0B4F6C; color: #fff; text-decoration: none; font-size: 15px; font-weight: 700; }
.btn-petrol:hover { background: #083B51; color: #fff; }
.btn-outline { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; border: 1px solid #CBD9DF; color: #0B4F6C; text-decoration: none; font-size: 15px; font-weight: 600; background: #fff; }
.btn-outline:hover { border-color: #0B4F6C; }
.btn-outline .i { font-size: 20px; }

/* ---------- Home: services ---------- */
.services { padding: 0 clamp(20px, 3vw, 40px) clamp(72px, 9vw, 128px); }
.services-in { gap: clamp(32px, 4vw, 52px); }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr)); gap: 20px; }
.svc { background: #fff; border: 1px solid #E3EBEE; border-radius: 24px; padding: 30px 26px; display: flex; flex-direction: column; gap: 16px; transition: all .3s; }
.svc:hover { box-shadow: 0 24px 50px rgba(11, 79, 108, 0.12); transform: translateY(-4px); border-color: #E0D3A6; }
.svc-ic { width: 64px; height: 64px; border-radius: 20px; background: #F7F1DE; display: flex; align-items: center; justify-content: center; position: relative; }
.svc-ic-frame { position: absolute; inset: 5px; border-radius: 15px; border: 1px solid rgba(140, 117, 48, 0.25); }
.svc-ic .i { font-size: 32px; color: #0B4F6C; }
.svc h3 { margin: 0; font-size: 20px; font-weight: 700; color: #0E2A36; }
.svc p { margin: 0; font-size: 15px; line-height: 1.95; color: #516874; flex: 1; text-wrap: pretty; }
.svc a { display: inline-flex; align-items: center; gap: 8px; color: #0B4F6C; font-weight: 700; font-size: 15px; text-decoration: none; }
.svc a:hover { color: #8C7530; }

/* ---------- Home: what we offer ---------- */
.offer { background: #0B4F6C; background-image: radial-gradient(ellipse at 90% 0%, rgba(188, 162, 78, 0.12), transparent 50%); padding: clamp(72px, 9vw, 128px) clamp(20px, 3vw, 40px); position: relative; overflow: hidden; }
[dir="ltr"] .offer { background-image: radial-gradient(ellipse at 10% 0%, rgba(188, 162, 78, 0.12), transparent 50%); }
.offer-wm { position: absolute; inset-inline-end: -60px; bottom: -80px; height: 420px; width: auto; opacity: 0.06; pointer-events: none; }
.offer-in { position: relative; max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(36px, 4vw, 56px); }
.shead-dark .h2 { color: #fff; }
.shead-dark p { color: #CFE0E7; }
.offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: clamp(28px, 3vw, 44px) clamp(28px, 4vw, 56px); }
.offer-item { display: flex; gap: 18px; align-items: flex-start; padding-top: 22px; border-top: 1px solid rgba(188, 162, 78, 0.3); }
.offer-n { font-size: clamp(34px, 3vw, 42px); font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px #BCA24E; font-variant-numeric: tabular-nums; }
.offer-item div { display: flex; flex-direction: column; gap: 8px; }
.offer-item h3 { margin: 0; font-size: 19px; font-weight: 700; color: #fff; }
.offer-item p { margin: 0; font-size: 15px; line-height: 1.9; color: #CFE0E7; text-wrap: pretty; }

/* ---------- Home: available workers ---------- */
.jobs { padding: clamp(72px, 9vw, 128px) clamp(20px, 3vw, 40px) 0; }
.jobs-in { gap: clamp(32px, 4vw, 48px); }
.jobs-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.jobs-head > div { display: flex; flex-direction: column; gap: 12px; }
.jobs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 220px), 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.job { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 3 / 3.7; background: #E3EBEE; transition: transform .3s; }
.job:hover { transform: translateY(-4px); }
.job-img { position: absolute; inset: 0; }
.job-cap { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(8, 59, 81, 0.96) 45%, rgba(8, 59, 81, 0)); padding: 52px 18px 18px; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.job h3 { margin: 0; font-size: 17px; font-weight: 700; color: #fff; line-height: 1.5; }
.job a { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; color: #D9C68A; font-size: 13.5px; font-weight: 600; text-decoration: none; }

/* ---------- Home: countries ---------- */
.countries { padding: clamp(72px, 9vw, 128px) clamp(20px, 3vw, 40px); }
.countries-in { gap: clamp(32px, 4vw, 48px); }
.ctry-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(16px, 2.4vw, 36px) clamp(12px, 2vw, 28px); }
.ctry { width: clamp(140px, 15vw, 190px); display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; transition: transform .3s; }
.ctry:hover { transform: translateY(-6px); }
.ctry-ring { position: relative; width: clamp(116px, 12vw, 156px); aspect-ratio: 1; border-radius: 50%; padding: 7px; box-sizing: border-box; background: conic-gradient(from 210deg, #BCA24E, #E8D9A6, #BCA24E, #8C7530, #BCA24E); box-shadow: 0 18px 40px rgba(11, 79, 108, 0.16); }
.ctry-ring > span { display: block; width: 100%; height: 100%; border-radius: 50%; padding: 5px; box-sizing: border-box; background: #fff; }
.ctry-ring img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ctry-name { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ctry-name strong { font-size: clamp(17px, 1.4vw, 20px); font-weight: 700; color: #0B4F6C; }

/* ---------- Home: steps (horizontal ≥ 900px, vertical below) ---------- */
.steps { background: #fff; padding: clamp(72px, 9vw, 128px) clamp(20px, 3vw, 40px); }
.steps-in { gap: clamp(40px, 5vw, 64px); }
.steps-h { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; }
.steps-line { position: absolute; top: 39px; right: 10%; left: 10%; height: 1px; background: linear-gradient(to left, #BCA24E, #D9C68A 50%, #BCA24E); }
.step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.step-c { position: relative; width: 78px; height: 78px; border-radius: 50%; background: #fff; border: 1px solid #D9C68A; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 8px #fff; }
.step-in { width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(160deg, #0E5A7A, #083B51); display: flex; align-items: center; justify-content: center; }
.step-in .i { font-size: 30px; color: #D9C68A; }
.step-n { position: absolute; top: -4px; inset-inline-start: -4px; width: 26px; height: 26px; border-radius: 50%; background: #BCA24E; color: #1A1608; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.step h3 { margin: 6px 0 0; font-size: 18px; font-weight: 700; color: #0E2A36; }
.step p { margin: 0; font-size: 14.5px; line-height: 1.9; color: #516874; text-wrap: pretty; }
.steps-v { display: flex; flex-direction: column; }
.stepv { display: grid; grid-template-columns: 60px 1fr; gap: 16px; }
.stepv-l { display: flex; flex-direction: column; align-items: center; }
.stepv-c { position: relative; width: 58px; height: 58px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(160deg, #0E5A7A, #083B51); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px #fff, 0 0 0 5px #D9C68A; }
.stepv-c .i { font-size: 26px; color: #D9C68A; }
.stepv-n { position: absolute; top: -6px; inset-inline-start: -6px; width: 22px; height: 22px; border-radius: 50%; background: #BCA24E; color: #1A1608; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.stepv-line { flex: 1; width: 1px; min-height: 24px; background: #D9C68A; margin: 10px 0 4px; }
.stepv-r { padding: 10px 0 30px; display: flex; flex-direction: column; gap: 4px; }
.stepv h3 { margin: 0; font-size: 17px; font-weight: 700; color: #0E2A36; }
.stepv p { margin: 0; font-size: 15px; line-height: 1.9; color: #516874; }
@media (min-width: 900px) { .steps-v { display: none; } }
@media (max-width: 899.98px) { .steps-h { display: none; } }

/* ---------- Home: training ---------- */
.training { padding: clamp(72px, 9vw, 128px) clamp(20px, 3vw, 40px) 0; }
.training-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(40px, 6vw, 96px); align-items: center; }
.training-txt { display: flex; flex-direction: column; gap: 20px; }
.training .h2 { text-wrap: balance; }
.tr-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.tr-item { display: flex; gap: 14px; align-items: flex-start; }
.tr-ic { flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; background: #F7F1DE; display: flex; align-items: center; justify-content: center; position: relative; }
.tr-ic-frame { position: absolute; inset: 4px; border-radius: 10px; border: 1px solid rgba(140, 117, 48, 0.25); }
.tr-ic .i { font-size: 22px; color: #0B4F6C; }
.tr-item p { margin: 0; padding-top: 7px; font-size: 16px; line-height: 1.85; color: #24414D; text-wrap: pretty; }
.tr-media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.19fr); gap: 14px; align-items: stretch; }
.tr-video-wrap { position: relative; aspect-ratio: 9 / 16; }
.tr-video-line { position: absolute; inset: 0; transform: translate(14px, 14px); border: 1.5px solid #D9C68A; border-radius: 26px; }
[dir="ltr"] .tr-video-line { transform: translate(-14px, 14px); }
.tr-video { position: absolute; inset: 0; border-radius: 26px; overflow: hidden; background: #0B4F6C; box-shadow: 0 20px 50px rgba(11, 79, 108, 0.18); }
.tr-video video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0B4F6C; }
.tr-play { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: linear-gradient(180deg, #CDB466, #B39845); color: #1A1608; font-size: 30px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.28), 0 14px 30px rgba(0, 0, 0, 0.25); }
.tr-play:hover { filter: brightness(1.06); }
.tr-play .i { transform: translateX(2px); }
.tr-photos { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tr-photo { display: block; width: 100%; height: 0; flex: 1 1 0; object-fit: cover; border-radius: 22px; background: #E3EBEE; }
@media (max-width: 479.98px) {
  .tr-play { width: 56px; height: 56px; font-size: 22px; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.28), 0 10px 22px rgba(0, 0, 0, 0.25); }
  .tr-video, .tr-video-line { border-radius: 20px; }
  .tr-photo { border-radius: 16px; }
}

/* ---------- Home: why ---------- */
.why { padding: clamp(72px, 9vw, 128px) clamp(20px, 3vw, 40px); }
.why-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(32px, 5vw, 80px); align-items: start; }
.why-head { display: flex; flex-direction: column; gap: 20px; }
.why-logo { width: clamp(110px, 12vw, 160px); height: auto; margin-top: 12px; opacity: 0.9; }
.why-list { grid-column: span 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0 clamp(24px, 3vw, 48px); }
.why-item { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid #E3EBEE; }
.why-chk { flex-shrink: 0; width: 30px; height: 30px; margin-top: 2px; display: flex; align-items: center; justify-content: center; position: relative; }
.why-chk-dia { position: absolute; inset: 4px; transform: rotate(45deg); border: 1.5px solid #BCA24E; border-radius: 4px; }
.why-chk .i { font-size: 13px; color: #8C7530; }
.why-item p { margin: 0; font-size: 16px; line-height: 1.85; color: #24414D; text-wrap: pretty; }

/* ---------- Home: FAQ ---------- */
.faq { padding: clamp(72px, 9vw, 128px) clamp(20px, 3vw, 40px); }
.faq-in { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(28px, 3.5vw, 40px); }
.faq-list { display: flex; flex-direction: column; border-top: 1px solid #DCE6EA; }
.faq-item { border-bottom: 1px solid #DCE6EA; }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 4px; background: transparent; border: 0; cursor: pointer; text-align: start; font-size: clamp(16px, 1.3vw, 18px); font-weight: 700; color: #0E2A36; }
.faq-ic { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #D9C68A; color: #8C7530; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.faq-q .ic-minus, .faq-q[aria-expanded="true"] .ic-plus { display: none; }
.faq-q[aria-expanded="true"] .ic-minus { display: inline-block; }
.faq-a { margin: 0; padding-block: 0 24px; padding-inline: 4px 56px; font-size: 16px; line-height: 2; color: #516874; animation: fadeUp .25s ease; }
.btn-all { align-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 999px; border: 1px solid #CBD9DF; background: #fff; color: #0B4F6C; text-decoration: none; font-size: 15px; font-weight: 700; }
.btn-all:hover { border-color: #0B4F6C; }

/* ---------- Home: call to action ---------- */
.cta { padding: 0 clamp(12px, 2vw, 24px) clamp(72px, 9vw, 128px); }
.cta-box { max-width: 1240px; margin: 0 auto; background: #0B4F6C; background-image: radial-gradient(ellipse at 0% 50%, rgba(188, 162, 78, 0.18), transparent 55%); border-radius: clamp(22px, 2.6vw, 32px); padding: clamp(40px, 5vw, 72px) clamp(28px, 5vw, 80px); position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
[dir="ltr"] .cta-box { background-image: radial-gradient(ellipse at 100% 50%, rgba(188, 162, 78, 0.18), transparent 55%); }
.cta-frame { position: absolute; inset: 12px; border: 1px solid rgba(188, 162, 78, 0.22); border-radius: clamp(16px, 2vw, 24px); pointer-events: none; }
.cta-txt { position: relative; display: flex; flex-direction: column; gap: 12px; max-width: 620px; }
.cta-txt .h2 { color: #fff; }
.cta-txt p { margin: 0; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.95; color: #CFE0E7; }
.cta-btns { position: relative; display: flex; flex-wrap: wrap; gap: 12px; }
.btn-wa { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px; background: #1FA855; color: #fff; text-decoration: none; font-size: 16px; font-weight: 700; }
.btn-wa:hover { background: #1B964C; color: #fff; }
.btn-wa .i { font-size: 22px; }
.btn-gold-cta { padding: 15px 26px; box-shadow: none; }

/* ---------- Home: contact ---------- */
.contact { padding: 0 clamp(20px, 3vw, 40px) clamp(72px, 9vw, 128px); }
.contact-in { gap: clamp(28px, 3.5vw, 44px); }
.contact-head { display: flex; flex-direction: column; gap: 12px; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 24px; align-items: start; }
.form-card { background: #fff; border: 1px solid #E3EBEE; border-radius: 26px; padding: clamp(22px, 3vw, 40px); box-shadow: 0 12px 32px rgba(11, 79, 108, 0.06); }
.cform { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.fl { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; color: #24414D; }
.fl-full { grid-column: 1 / -1; }
.fi, .fs, .ft { border: 1px solid #D5E1E6; background: #F9FBFC; font-size: 15px; color: #0E2A36; outline: none; }
.fi { height: 52px; border-radius: 14px; padding: 0 16px; }
.fi-tel, .rq-tel { text-align: start; }
.fs { height: 52px; border-radius: 14px; background-color: #F9FBFC; padding: 0 16px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%230B4F6C' stroke-width='1.5'/></svg>"); background-repeat: no-repeat; background-position: left 16px center; }
.ft { border-radius: 14px; padding: 14px 16px; resize: vertical; }
.fi:focus, .ft:focus { border-color: #0B4F6C; background: #fff; box-shadow: 0 0 0 3px rgba(11, 79, 108, 0.1); }
.fs:focus { border-color: #0B4F6C; }
.cform-submit { grid-column: 1 / -1; height: 56px; border: 0; border-radius: 999px; background: #0B4F6C; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; }
.cform-submit:hover { background: #083B51; }
.cform-submit .i { font-size: 20px; }
.sent { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 40px 12px; }
.sent-ic { width: 76px; height: 76px; border-radius: 50%; background: #EEF7F1; color: #1C7A43; display: flex; align-items: center; justify-content: center; font-size: 38px; }
.sent p { margin: 0; font-size: 18px; line-height: 1.9; color: #0E2A36; font-weight: 600; max-width: 420px; }
.sent-again { border: 0; background: transparent; color: #0B4F6C; font-size: 14px; font-weight: 700; cursor: pointer; }
.cl-list { display: flex; flex-direction: column; }
.map-card { position: relative; border-radius: 26px; overflow: hidden; border: 1px solid #E3EBEE; background: #E3EBEE; box-shadow: 0 12px 32px rgba(11, 79, 108, 0.06); height: clamp(300px, 34vw, 440px); }
.map-frame { display: block; width: 100%; height: 100%; border: 0; }
.map-open { position: absolute; bottom: 16px; inset-inline-start: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; background: #0B4F6C; color: #fff; text-decoration: none; font-size: 14px; font-weight: 700; box-shadow: 0 10px 24px rgba(8, 40, 54, 0.25); }
.map-open:hover { background: #083B51; color: #fff; }
.map-open .i { font-size: 18px; color: #D9C68A; }
.cl { padding: 18px 4px; border-bottom: 1px solid #E3EBEE; display: flex; align-items: center; gap: 16px; text-decoration: none; }
.cl:hover { padding-inline-start: 10px; }
.cl > .i { font-size: 30px; color: #0B4F6C; }
.cl-txt { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.cl-label { font-size: 13px; font-weight: 600; color: #8C7530; }
.cl-value { font-size: 16px; font-weight: 700; color: #0E2A36; word-break: break-word; }

/* Form controls: the select arrow sits at the end of the field */
[dir="ltr"] .fs, [dir="ltr"] .rq-s { background-position: right 16px center; }
[dir="ltr"] .cvf-s { background-position: right 12px center; }

/* ---------- Footer ---------- */
.ftr { font-family: 'Cairo', sans-serif; background: #083B51; color: #C9DAE1; }
.ftr-grid { max-width: 1240px; margin: 0 auto; padding: clamp(48px, 6vw, 80px) clamp(20px, 3vw, 40px) 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: clamp(32px, 4vw, 56px); }
.ftr-brand { display: flex; flex-direction: column; gap: 18px; grid-column: span 1; }
.ftr-logo { display: flex; align-items: center; gap: 12px; }
.ftr-logo img { height: 64px; width: auto; }
.ftr-logo span { font-size: 18px; font-weight: 700; color: #fff; }
.ftr-brand p { margin: 0; font-size: 14px; line-height: 1.9; color: #C9DAE1; text-wrap: pretty; }
.ftr-soc { display: flex; gap: 10px; font-size: 18px; }
.ftr-soc a { width: 38px; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, 0.07); display: flex; align-items: center; justify-content: center; color: #fff; }
.ftr-soc a:hover { background: #BCA24E; color: #1A1608; }
.ftr-col { display: flex; flex-direction: column; gap: 14px; }
.ftr-h { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: #fff; }
.ftr-links2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; font-size: 14px; }
.ftr-links { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.ftr-a { color: #C9DAE1; text-decoration: none; }
.ftr-a:hover { color: #BCA24E; }
.ftr-contact { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.ftr-contact > a, .ftr-contact > span { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: #C9DAE1; text-decoration: none; }
.ftr-contact .i { color: #BCA24E; font-size: 18px; }
.ftr-contact .ftr-mail { word-break: break-all; }
.ftr-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.ftr-bottom-in { max-width: 1240px; margin: 0 auto; padding: 20px clamp(20px, 3vw, 40px); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: 13px; color: #9FB8C2; }
.ftr-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ftr-legal a { color: #9FB8C2; text-decoration: none; }
.ftr-legal a:hover { color: #fff; }
.wa-float { position: fixed; inset-inline-end: 28px; bottom: 28px; z-index: 60; width: 60px; height: 60px; border-radius: 50%; background: #1FA855; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 32px; box-shadow: 0 10px 28px rgba(31, 168, 85, 0.4); text-decoration: none; }
.wa-float:hover { transform: scale(1.06); color: #fff; }
.mbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff; border-top: 1px solid #E3EBEE; box-shadow: 0 -8px 24px rgba(11, 79, 108, 0.08); padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); grid-template-columns: 1fr 1fr 1.25fr; gap: 8px; }
.mbar a { height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; font-size: 14px; font-weight: 600; }
.mbar .i { font-size: 20px; }
.mbar-call { border: 1px solid #D5E1E6; color: #0B4F6C; }
.mbar-wa { background: #1FA855; color: #fff; }
.mbar .mbar-book { background: #BCA24E; color: #1A1608; font-weight: 700; }
.mbar-call:hover { color: #0B4F6C; }
.mbar-wa:hover { color: #fff; }
.mbar-book:hover { color: #1A1608; }
@media (max-width: 759.98px) {
  .ftr { padding-bottom: 74px; }
  .wa-float { display: none; }
  .mbar { display: grid; }
}

/* ---------- About page ---------- */
.ab-intro { padding: clamp(36px, 5vw, 64px) clamp(20px, 3vw, 40px) clamp(56px, 7vw, 96px); }
.ab-intro-in { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(28px, 4vw, 48px); }
.ab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ab-txt { display: flex; flex-direction: column; gap: 22px; }
.ab-txt h1 { margin: 0; font-size: clamp(34px, 4.2vw, 56px); font-weight: 700; color: #0B4F6C; }
.ab-txt p { margin: 0; font-size: clamp(16px, 1.35vw, 19px); line-height: 2.05; color: #3D5560; text-wrap: pretty; }
.ab-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.ab-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 14px; background: #0B4F6C; color: #fff; text-decoration: none; font-size: 15px; font-weight: 600; }
.ab-btn:hover { background: #083B51; color: #fff; }
.ab-btn .i { font-size: 20px; }
.ab-btn-o { border: 1px solid #CBD9DF; background: #fff; color: #0B4F6C; }
.ab-btn-o:hover { border-color: #0B4F6C; background: #fff; color: #0B4F6C; }
.ab-btn-o .i { font-size: 1em; }
/* Logo panel in the place of the design's photo mosaic (same 6:5 footprint): the logo alone, large,
   on petrol with the gold glow and hairline frame used by the hero. */
.ab-logo { position: relative; aspect-ratio: 6 / 5; border-radius: clamp(22px, 2.6vw, 32px); background: #0B4F6C; background-image: radial-gradient(ellipse at 50% 40%, rgba(188, 162, 78, 0.18), transparent 60%); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 20px 50px rgba(11, 79, 108, 0.16); }
.ab-logo-frame { position: absolute; inset: clamp(8px, 1vw, 14px); border: 1px solid rgba(188, 162, 78, 0.3); border-radius: clamp(16px, 2vw, 24px); pointer-events: none; }
.ab-logo img { position: relative; height: 78%; width: auto; }
.vm { background: #fff; border-top: 1px solid #E3EBEE; border-bottom: 1px solid #E3EBEE; padding: clamp(56px, 7vw, 96px) clamp(20px, 3vw, 40px); }
.vm-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 20px; }
.vm-card { border-radius: 24px; padding: clamp(28px, 3.4vw, 44px); display: flex; flex-direction: column; gap: 16px; }
.vm-vision { background: #0B4F6C; position: relative; overflow: hidden; }
.vm-mission { background: #F6F9FA; border: 1px solid #E3EBEE; }
.vm-wm { position: absolute; inset-inline-end: -30px; bottom: -60px; height: 240px; width: auto; opacity: 0.06; }
.vm-ic { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.vm-vision .vm-ic { background: rgba(188, 162, 78, 0.18); color: #BCA24E; }
.vm-mission .vm-ic { background: #F7F1DE; color: #8C7530; }
.vm-card h2 { margin: 0; font-size: clamp(24px, 2.4vw, 30px); font-weight: 700; }
.vm-vision h2 { color: #fff; }
.vm-mission h2 { color: #0B4F6C; }
.vm-card p { margin: 0; font-size: clamp(16px, 1.3vw, 18px); line-height: 2; text-wrap: pretty; }
.vm-vision p { position: relative; color: #D7E4EA; }
.vm-mission p { color: #3D5560; }
.values { padding: clamp(56px, 7vw, 96px) clamp(20px, 3vw, 40px); }
.values-in { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(28px, 3.5vw, 44px); }
.values-head { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.values-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: #8C7530; font-size: 14px; font-weight: 600; }
.vline { width: 28px; height: 1.5px; background: #BCA24E; }
.values-head h2 { margin: 0; font-size: clamp(28px, 3.2vw, 42px); font-weight: 700; color: #0B4F6C; }
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(46%, 200px), 1fr)); gap: 14px; }
.val { background: #fff; border: 1px solid #E3EBEE; border-radius: 20px; padding: 28px 18px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.val:hover { border-color: #BCA24E; }
.val-ic { width: 60px; height: 60px; border-radius: 50%; background: #EEF5F8; color: #0B4F6C; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.val strong { font-size: 17px; font-weight: 600; color: #0E2A36; }
.ab-cta { padding: 0 clamp(12px, 2.5vw, 32px) clamp(64px, 8vw, 104px); }
.ab-cta-box { max-width: 1240px; margin: 0 auto; background: #0B4F6C; border-radius: clamp(20px, 2.4vw, 28px); padding: clamp(36px, 5vw, 56px) clamp(24px, 5vw, 64px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.ab-cta-txt { display: flex; flex-direction: column; gap: 10px; max-width: 620px; }
.ab-cta-txt h2 { margin: 0; font-size: clamp(26px, 3vw, 38px); font-weight: 700; color: #fff; }
.ab-cta-txt p { margin: 0; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.9; color: #CFE0E7; }
.ab-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.ab-cta-wa, .ab-cta-req { display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border-radius: 14px; text-decoration: none; font-size: 16px; }
.ab-cta-wa { background: #1FA855; color: #fff; font-weight: 600; }
.ab-cta-wa .i { font-size: 22px; }
.ab-cta-req { background: #BCA24E; color: #1A1608; font-weight: 700; }
.ab-cta-req .i { font-size: 20px; }
.ab-cta-wa:hover { color: #fff; }
.ab-cta-req:hover { color: #1A1608; }

/* ---------- CVs page ---------- */
.pg-head { padding: clamp(36px, 5vw, 64px) clamp(20px, 3vw, 40px) clamp(24px, 3vw, 36px); }
.pg-head-in { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.pg-head h1 { margin: 0; font-size: clamp(30px, 3.6vw, 46px); font-weight: 700; color: #0B4F6C; }
.pg-head p { margin: 0; font-size: clamp(15px, 1.25vw, 18px); color: #516874; }
.cvf-wrap { padding: 0 clamp(20px, 3vw, 40px); position: sticky; top: 124px; z-index: 20; }
.cvf { max-width: 1240px; margin: 0 auto; background: #fff; border: 1px solid #E3EBEE; border-radius: 20px; box-shadow: 0 10px 30px rgba(11, 79, 108, 0.06); padding: clamp(14px, 1.6vw, 20px); display: flex; flex-direction: column; gap: 12px; }
.cvf-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cvf-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: #0E2A36; }
.cvf-title .i { font-size: 20px; color: #0B4F6C; }
.cvf-actions { display: flex; align-items: center; gap: 10px; }
.cvf-clear { border: 0; background: transparent; color: #8C7530; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.cvf-toggle { display: none; height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid #D5E1E6; background: #F9FBFC; color: #0B4F6C; font-size: 14px; font-weight: 600; cursor: pointer; align-items: center; gap: 6px; }
.cvf-toggle .ic-up, .cvf-toggle[aria-expanded="true"] .ic-down { display: none; }
.cvf-toggle[aria-expanded="true"] .ic-up { display: inline-block; }
.cvf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px; }
.cvf-l { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; color: #516874; }
.cvf-s { height: 46px; border-radius: 12px; border: 1px solid #D5E1E6; background-color: #F9FBFC; padding: 0 12px; font-size: 14.5px; color: #0E2A36; outline: none; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%230B4F6C' stroke-width='1.5'/></svg>"); background-repeat: no-repeat; background-position: left 12px center; cursor: pointer; }
.cvf-s:focus { border-color: #0B4F6C; }
@media (max-width: 1099.98px) { .cvf-wrap { top: 92px; } }
@media (max-width: 759.98px) {
  .cvf-wrap { top: 76px; }
  .cvf-toggle { display: flex; }
  .cvf:not(.open) .cvf-grid { display: none; }
}
.cv-sec { padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 40px) clamp(64px, 8vw, 104px); }
.cv-in { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.cv-count { font-size: 14px; color: #516874; }
.cv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 272px), 1fr)); gap: 20px; }
.cv { background: #fff; border: 1px solid #E3EBEE; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .25s; }
.cv:hover { box-shadow: 0 18px 40px rgba(11, 79, 108, 0.1); }
.cv-photo { position: relative; aspect-ratio: 4 / 3.4; background: repeating-linear-gradient(135deg, #E6EDF0 0 10px, #EFF4F6 10px 20px); display: flex; align-items: flex-end; padding: 12px; }
.cv-photo .ph-label, .cvm-photo .ph-label { padding: 5px 8px; border-radius: 6px; }
.cv-badge { position: absolute; top: 12px; inset-inline-start: 12px; display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.95); font-size: 12px; font-weight: 600; color: #0B4F6C; }
.cv-code { position: absolute; top: 12px; inset-inline-end: 12px; padding: 4px 9px; border-radius: 999px; background: #0B4F6C; color: #fff; font-size: 11px; font-family: ui-monospace, Menlo, monospace; }
.cv-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.cv-head { display: flex; flex-direction: column; gap: 6px; }
.cv-head h3 { margin: 0; font-size: 18px; font-weight: 700; color: #0E2A36; }
.cv-country { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #516874; }
.cv-country img { width: 22px; height: 15px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px #E3EBEE; }
.cv-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 14px 0; border-top: 1px solid #EEF3F5; border-bottom: 1px solid #EEF3F5; }
.cv-fact { display: flex; flex-direction: column; gap: 2px; }
.cv-fact span:first-child { font-size: 12px; color: #6B808A; }
.cv-fact span:last-child { font-size: 14px; font-weight: 500; color: #24414D; }
.cv-salary { display: flex; align-items: baseline; justify-content: space-between; }
.cv-salary > span:first-child { font-size: 13px; color: #6B808A; }
.cv-salary > span:last-child { font-size: 18px; font-weight: 700; color: #0B4F6C; }
.cv-salary > span:last-child span { font-size: 13px; font-weight: 500; color: #516874; }
.cv-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.cv-view { height: 46px; border-radius: 12px; border: 1px solid #CBD9DF; background: #fff; color: #0B4F6C; font-size: 14px; font-weight: 600; cursor: pointer; }
.cv-view:hover { border-color: #0B4F6C; }
.cv-book { height: 46px; border-radius: 12px; background: #BCA24E; color: #1A1608; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.cv-book:hover { background: #AD9442; color: #1A1608; }
.cv-empty { background: #fff; border: 1px solid #E3EBEE; border-radius: 22px; padding: clamp(36px, 5vw, 64px) 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.cv-empty-ic { width: 68px; height: 68px; border-radius: 50%; background: #F1F6F8; color: #0B4F6C; display: flex; align-items: center; justify-content: center; font-size: 32px; }
.cv-empty p { margin: 0; font-size: 17px; line-height: 1.9; color: #24414D; max-width: 460px; }
.cv-empty a { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 14px; background: #BCA24E; color: #1A1608; text-decoration: none; font-size: 15px; font-weight: 700; }
.cv-empty a .i { font-size: 18px; }
.cv-empty a:hover { color: #1A1608; }

/* CV dialog */
.cvm { position: fixed; inset: 0; z-index: 80; background: rgba(8, 40, 54, 0.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.cvm-dialog { background: #fff; border-radius: 24px; width: 100%; max-width: 820px; max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 30px 80px rgba(8, 40, 54, 0.3); outline: none; }
.cvm-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid #EEF3F5; position: sticky; top: 0; background: #fff; z-index: 1; }
.cvm-title { font-size: 15px; font-weight: 600; color: #0E2A36; }
.cvm-title span { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: #6B808A; }
.cvm-close { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #F1F6F8; color: #0B4F6C; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; padding: 0; }
.cvm-body { padding: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px; }
.cvm-media { display: flex; flex-direction: column; gap: 12px; }
.cvm-photo { aspect-ratio: 3 / 3.6; border-radius: 18px; background: repeating-linear-gradient(135deg, #E6EDF0 0 10px, #EFF4F6 10px 20px); display: flex; align-items: flex-end; padding: 12px; }
.cvm-video { aspect-ratio: 16 / 9; border-radius: 14px; background: #0B4F6C; color: #CFE0E7; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; }
.cvm-video .i { font-size: 30px; color: #BCA24E; }
.cvm-info { display: flex; flex-direction: column; gap: 18px; }
.cvm-name { display: flex; flex-direction: column; gap: 6px; }
.cvm-name h2 { margin: 0; font-size: 24px; font-weight: 700; color: #0E2A36; }
.cvm-name > span { display: flex; align-items: center; gap: 8px; font-size: 15px; color: #516874; }
.cvm-name img { width: 24px; height: 16px; object-fit: cover; border-radius: 3px; }
.cvm-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #EEF3F5; border: 1px solid #EEF3F5; border-radius: 14px; overflow: hidden; }
.cvm-facts > div { background: #fff; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.cvm-facts span:first-child { font-size: 12px; color: #6B808A; }
.cvm-facts span:last-child { font-size: 14.5px; font-weight: 600; color: #24414D; }
.cvm-skills { display: flex; flex-direction: column; gap: 10px; }
.cvm-skills > span { font-size: 14px; font-weight: 600; color: #0E2A36; }
.cvm-skills > div { display: flex; flex-wrap: wrap; gap: 8px; }
.cvm-skills > div span { padding: 7px 12px; border-radius: 999px; background: #F7F1DE; color: #6B5820; font-size: 13px; font-weight: 500; }
.cvm-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.cvm-pdf, .cvm-book { height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 14px; }
.cvm-pdf { border: 1px solid #CBD9DF; color: #0B4F6C; gap: 8px; font-weight: 600; }
.cvm-pdf .i { font-size: 18px; }
.cvm-book { background: #BCA24E; color: #1A1608; font-weight: 700; }
.cvm-pdf:hover { color: #0B4F6C; }
.cvm-book:hover { color: #1A1608; }

/* ---------- Request page ---------- */
.rq { padding: clamp(36px, 5vw, 64px) clamp(20px, 3vw, 40px) clamp(64px, 8vw, 104px); }
.rq-in { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); }
.rq-head { display: flex; flex-direction: column; gap: 12px; }
.rq-head h1 { margin: 0; font-size: clamp(30px, 3.6vw, 46px); font-weight: 700; color: #0B4F6C; }
.rq-head p { margin: 0; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.9; color: #516874; max-width: 640px; }
.rq-cols { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.rq-card { flex: 2 1 560px; min-width: 0; background: #fff; border: 1px solid #E3EBEE; border-radius: 24px; padding: clamp(22px, 3vw, 40px); box-shadow: 0 8px 24px rgba(11, 79, 108, 0.05); }
.rq-form { display: flex; flex-direction: column; gap: 28px; }
.rq-cv { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #F7F1DE; color: #5B4B16; font-size: 14px; }
.rq-cv .i { font-size: 22px; }
.rq-cv strong { font-family: ui-monospace, Menlo, monospace; }
.rq-group { display: flex; flex-direction: column; gap: 16px; }
.rq-group-2 { border-top: 1px solid #EEF3F5; padding-top: 24px; }
.rq-gh { font-size: 17px; font-weight: 700; color: #0E2A36; display: flex; align-items: center; gap: 10px; }
.rq-gh span { width: 28px; height: 28px; border-radius: 50%; background: #0B4F6C; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.rq-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.rq-l { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 500; color: #24414D; }
.rq-i, .rq-s, .rq-t { border: 1px solid #D5E1E6; background: #F9FBFC; font-size: 15px; color: #0E2A36; outline: none; }
.rq-i { height: 50px; border-radius: 12px; padding: 0 14px; }
.rq-s { height: 50px; border-radius: 12px; background-color: #F9FBFC; padding: 0 14px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%230B4F6C' stroke-width='1.5'/></svg>"); background-repeat: no-repeat; background-position: left 14px center; }
[dir="ltr"] .rq-s { background-position: right 14px center; }
.rq-t { border-radius: 12px; padding: 12px 14px; resize: vertical; }
.rq-i:focus, .rq-t:focus { border-color: #0B4F6C; background: #fff; box-shadow: 0 0 0 3px rgba(11, 79, 108, 0.1); }
.rq-s:focus { border-color: #0B4F6C; }
.rq-types { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rq-type { height: 56px; border-radius: 12px; border: 1.5px solid #D5E1E6; background: #fff; color: #0E2A36; font-size: 15px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; }
.rq-type.on { border-color: #0B4F6C; background: #EEF5F8; }
.rq-type .i { font-size: 22px; color: #0B4F6C; }
.rq-count { height: 50px; border-radius: 12px; border: 1px solid #D5E1E6; background: #F9FBFC; display: grid; grid-template-columns: 50px 1fr 50px; align-items: center; }
.rq-count button { height: 100%; border: 0; background: transparent; color: #0B4F6C; font-size: 18px; cursor: pointer; }
.rq-count span { text-align: center; font-size: 16px; font-weight: 600; color: #0E2A36; }
.rq-visa { height: 50px; border-radius: 12px; background: #F1F6F8; padding: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; box-sizing: border-box; }
.rq-visa button { border: 0; border-radius: 9px; background: transparent; color: #516874; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: none; }
.rq-visa button.on { background: #fff; color: #0B4F6C; box-shadow: 0 1px 3px rgba(11, 79, 108, 0.15); }
.rq-submit { height: 56px; border: 0; border-radius: 14px; background: #BCA24E; color: #1A1608; font-size: 17px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 8px 20px rgba(188, 162, 78, 0.3); }
.rq-submit:hover { background: #AD9442; }
.rq-submit .i { font-size: 20px; }
.rq-sent { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; padding: clamp(40px, 6vw, 80px) 12px; }
.rq-sent-ic { width: 84px; height: 84px; border-radius: 50%; background: #EEF7F1; color: #1C7A43; display: flex; align-items: center; justify-content: center; font-size: 42px; }
.rq-sent p { margin: 0; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.9; color: #0E2A36; font-weight: 600; max-width: 460px; }
.rq-sent-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.rq-sent-o, .rq-sent-p { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 12px; text-decoration: none; font-size: 15px; font-weight: 600; }
.rq-sent-o { border: 1px solid #CBD9DF; color: #0B4F6C; }
.rq-sent-p { background: #0B4F6C; color: #fff; }
.rq-sent-o:hover { color: #0B4F6C; }
.rq-sent-p:hover { color: #fff; }
.rq-aside { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.rq-steps { background: #0B4F6C; border-radius: 24px; padding: clamp(22px, 2.6vw, 30px); color: #fff; display: flex; flex-direction: column; gap: 18px; position: relative; overflow: hidden; }
.rq-wm { position: absolute; inset-inline-end: -30px; bottom: -40px; height: 200px; width: auto; opacity: 0.06; }
.rq-steps h2 { margin: 0; font-size: 19px; font-weight: 700; }
.rq-steps-list { position: relative; display: flex; flex-direction: column; }
.rq-step { display: grid; grid-template-columns: 32px 1fr; gap: 12px; }
.rq-step-l { display: flex; flex-direction: column; align-items: center; }
.rq-step-n { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: #BCA24E; color: #1A1608; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.rq-step-line { flex: 1; width: 1.5px; min-height: 14px; background: rgba(255, 255, 255, 0.25); margin: 4px 0; }
.rq-step-t { padding: 5px 0 18px; font-size: 15px; color: #E3EEF2; }
.rq-direct { background: #fff; border: 1px solid #E3EBEE; border-radius: 24px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.rq-direct > span { font-size: 15px; font-weight: 600; color: #0E2A36; }
.rq-direct-wa, .rq-direct-tel { height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-size: 15px; font-weight: 600; }
.rq-direct-wa { background: #1FA855; color: #fff; }
.rq-direct-wa .i { font-size: 22px; }
.rq-direct-tel { border: 1px solid #CBD9DF; color: #0B4F6C; }
.rq-direct-tel .i { font-size: 20px; }
.rq-direct-wa:hover { color: #fff; }
.rq-direct-tel:hover { color: #0B4F6C; }
.rq-privacy { display: flex; align-items: center; gap: 10px; padding: 0 6px; font-size: 13px; color: #6B808A; line-height: 1.7; }
.rq-privacy .i { font-size: 18px; color: #0B4F6C; }