/* Public (signed-out) pages: one type scale, one input, one button — in the language of the white header
   (header.css) and components.css tokens. Loaded after style.css; rules repeat the legacy selectors so they win
   by source order without touching the old stylesheet. Pages: home, about, jobs, training, contact, salaries,
   sign-in, sign-up, OTP, footer. */

:root { --pub-orange: #ef801f; --pub-orange-dark: #d96f12; --pub-navy: #0b4f8a; --pub-shadow: 0 10px 34px rgba(17, 24, 39, .12); }

/* ---- 1. type scale ------------------------------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 { font-family: "Mulish", sans-serif; color: var(--cx-ink, #111827); letter-spacing: -.01em; }
#spotlight div.spotlight div.left h2 { font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cx-primary, #2563eb); }
#spotlight div.spotlight div.left h1 { font-size: 48px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: var(--cx-ink, #111827); margin: 18px 0 30px; }
#card-slider div.container div.left h2, #advertice div.right-box h2, #job-sites div.left-box h2, #map div.top-box h2 { font-size: 36px; line-height: 1.2; font-weight: 700; color: var(--cx-ink, #111827); }
#map div.top-box h2 { font-size: 30px; }
#advertice div.right-box h2, #job-sites div.left-box h2 { margin-bottom: 8px; }
#job-sites div.right-box div.contebt-box div.cont-card h4, #job-sites div.right-box div.contebt-box div.cont-card h5, #job-sites div.right-box div.contebt-box div.cont-card p { font-size: 16px; line-height: 1.45; }

/* ---- 2. inputs ----------------------------------------------------------------------------------------------- */
input.form-control, select.form-control, textarea.form-control,
.cx-field .form-control, .cx-field select, .cx-field input[type=text], .cx-field input[type=email], .cx-field input[type=number], .cx-field input[type=date], .cx-field textarea,
.cx-filter-group select, .cx-filter-group input[type=number], .cx-filter-group input[type=text],
#contactus section.contact-spotlight div.spotlight div.contact-left form input:not([type=submit]),
#contactus section.contact-spotlight div.spotlight div.contact-left form textarea {
  width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--cx-line, #e5e7eb); border-radius: 12px; background-color: #fff;
  font-family: "Mulish", sans-serif; font-size: 16px; color: var(--cx-ink, #111827); box-sizing: border-box; box-shadow: none; outline: 0;
  transition: border-color .15s, box-shadow .15s;
}
textarea.form-control, .cx-field textarea, #contactus section.contact-spotlight div.spotlight div.contact-left form textarea { min-height: 140px; resize: vertical; }
input.form-control:focus, select.form-control:focus, textarea.form-control:focus, .cx-field .form-control:focus, .cx-field select:focus, .cx-field input:focus, .cx-field textarea:focus,
.cx-filter-group select:focus, .cx-filter-group input:focus,
#contactus section.contact-spotlight div.spotlight div.contact-left form input:focus, #contactus section.contact-spotlight div.spotlight div.contact-left form textarea:focus {
  border-color: var(--cx-primary, #2563eb); box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}
input::placeholder, textarea::placeholder { color: #9ca3af; opacity: 1; font-family: "Mulish", sans-serif; }
select.form-control, .cx-field select, .cx-filter-group select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; }
.cx-field label, #contactus section.contact-spotlight div.spotlight div.contact-left form label, .cx-filter-group h4 { display: block; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: #374151; margin-bottom: 6px; }
/* select2 (city / position pickers) gets the same box */
.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple { min-height: 46px; border: 1px solid var(--cx-line, #e5e7eb) !important; border-radius: 12px !important; background: #fff !important; padding: 0 6px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 44px; padding-left: 8px; color: var(--cx-ink, #111827) !important; font-family: "Mulish", sans-serif; font-size: 16px; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #9ca3af !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; right: 8px; }
.select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--cx-primary, #2563eb) !important; box-shadow: 0 0 0 4px rgba(37, 99, 235, .12); }
.select2-dropdown { border: 1px solid var(--cx-line, #e5e7eb) !important; border-radius: 12px !important; box-shadow: var(--pub-shadow); overflow: hidden; background: #fff !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: rgba(37, 99, 235, .10) !important; color: var(--cx-primary-dark, #1d4ed8) !important; }
.select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid var(--cx-line, #e5e7eb); border-radius: 8px; padding: 8px 10px; }

/* ---- 3. buttons ---------------------------------------------------------------------------------------------- */
.bg-primary, a.button, #advertice div.right-box a.button, #job-sites div.left-box a.button, input.submit-button, .cx-btn, .cx-btn-primary,
#spotlight div.spotlight div.left div.search form div.container button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 11px 26px; border: 0; border-radius: 999px;
  font-family: "Mulish", sans-serif; font-size: 16px; font-weight: 700; line-height: 1; letter-spacing: .01em; color: #fff; background: var(--pub-orange); cursor: pointer;
  box-shadow: 0 6px 18px rgba(239, 128, 31, .28); transition: background .15s, transform .15s, box-shadow .15s; text-decoration: none;
}
.bg-primary:hover, a.button:hover, #advertice div.right-box a.button:hover, #job-sites div.left-box a.button:hover, input.submit-button:hover, #spotlight div.spotlight div.left div.search form div.container button:hover { background: var(--pub-orange-dark); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(239, 128, 31, .32); color: #fff; }
.cx-btn, .cx-btn-primary { background: var(--cx-primary, #2563eb); box-shadow: 0 6px 18px rgba(37, 99, 235, .25); }
.cx-btn:hover, .cx-btn-primary:hover { background: var(--cx-primary-dark, #1d4ed8); color: #fff; transform: translateY(-1px); }
.cx-btn-light, .cx-filter-actions .cx-btn-light { background: var(--cx-bg, #f3f4f6); color: var(--cx-ink, #111827); box-shadow: none; }
.cx-btn-light:hover { background: #e5e7eb; color: var(--cx-ink, #111827); }
input.submit-button { width: auto; min-width: 180px; margin-top: 8px; }
/* apply / sign-in-to-apply buttons are flat, like the header Sign in - no orange glow, no lift.
   The selectors carry the element so they outrank `a.button` and `a.button:hover` above. */
a.button.cx-easy-apply, span.button.cx-easy-apply,
a.button.cx-easy-apply:hover, span.button.cx-easy-apply:hover { box-shadow: none; transform: none; }

/* ---- 4. page banners (jobs / training / contact) ------------------------------------------------------------- */
#Contact #spotlight { padding: 24px 0 0; }
#Contact #spotlight div.header div.nav nav ul li a.button { color: #fff; }
#contactus div.banner { width: 90%; max-width: 1400px; margin: 18px auto 0; height: auto; min-height: 220px; padding: 56px 64px; border-radius: 24px; text-align: left; align-items: flex-start;
  background: linear-gradient(115deg, var(--pub-navy) 0%, #1d6fb8 60%, #2a83cf 100%); box-shadow: 0 16px 44px rgba(11, 79, 138, .22); position: relative; overflow: hidden; }
#contactus div.banner::after { content: ""; position: absolute; right: -120px; top: -160px; width: 520px; height: 520px; border-radius: 50%; background: rgba(255, 255, 255, .06); pointer-events: none; }
#contactus div.banner h2 { font-size: 36px; line-height: 1.15; font-weight: 800; color: #fff; margin: 0 0 10px; position: relative; z-index: 1; }
#contactus div.banner p { font-size: 16px; color: rgba(255, 255, 255, .85); margin: 0; position: relative; z-index: 1; }
#contactus div.banner.banner-jobs { padding: 48px 64px; }
#contactus div.banner.banner-jobs .job-head h2 { text-align: left; }
#contactus div.banner.banner-jobs .job-search .top form { border-radius: 999px; padding: 6px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
#contactus div.banner.banner-jobs .job-search .top form p input { border: 0; box-shadow: none; min-height: 44px; }
#contactus div.banner.banner-jobs .job-search .top form p { border: 0; border-radius: 999px; background: #fff; }
#contactus div.banner.banner-jobs .job-search .top form button { min-height: 46px; padding: 11px 32px; border-radius: 999px; border: 0; background: var(--pub-orange); color: #fff; font-weight: 700; font-size: 16px; cursor: pointer; }
#contactus div.banner.banner-jobs .job-vector img { max-height: 200px; }

/* ---- 5. home ------------------------------------------------------------------------------------------------- */
#spotlight { padding-bottom: 40px; }
#spotlight div.spotlight div.left { padding: 6% 0 7%; }
#spotlight div.spotlight div.left div.search form { width: 88%; }
#spotlight div.spotlight div.left div.search form div.container { padding: 6px 6px 6px 22px; border-radius: 999px; box-shadow: var(--pub-shadow); border: 1px solid var(--cx-line, #e5e7eb); font-size: 20px; background: #fff; }
#spotlight div.spotlight div.left div.search form div.container input { font-size: 16px; padding: 10px 12px; border: 0; box-shadow: none; }
#spotlight div.spotlight div.left div.search form div.container button { min-height: 44px; padding: 10px 26px; }
#spotlight div.spotlight div.left div.help_text { font-size: 14px; color: var(--cx-muted, #6b7280); }
#spotlight div.spotlight div.left div.help_text label { font-weight: 700; color: #374151; }
#spotlight div.spotlight div.left div.help_text span { border-bottom: 0; }
#spotlight div.spotlight div.left div.help_text span a { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--cx-bg, #f3f4f6); color: #374151 !important; font-size: 14px; font-weight: 600; margin-right: 4px; }
#card-slider { padding: 32px 0 72px; }
#card-slider div.container div.left p { font-size: 16px; color: var(--cx-muted, #6b7280); line-height: 1.6; }
#advertice { padding-bottom: 96px; }
#advertice div.right-box a.button { margin-top: 24px; }
#job-sites { padding: 110px 0; }
#job-sites div.right-box div.contebt-box { padding: 18px 0; }
#map { padding: 88px 0 0; }
#map div.top-box { width: 60%; }

/* ---- 6. about ------------------------------------------------------------------------------------------------ */
#spotlight.about div.about div.inner-content div.left h3 { font-family: "Mulish", sans-serif; font-size: 48px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 20px; }
#spotlight.about div.about div.inner-content div.left div.content p { font-size: 16px; line-height: 1.8; color: #4b5563; }
#spotlight.about div.about div.inner-content div.left div.content + div.content { margin-top: 20px; }
#spotlight.about { padding-bottom: 72px; }

/* ---- 7. contact ---------------------------------------------------------------------------------------------- */
#contactus section.contact-spotlight div.spotlight div.contact-left form h1 { font-size: 30px; font-weight: 700; text-align: left; margin-bottom: 20px; }
#contactus section.contact-spotlight div.spotlight div.contact-left form div.group { margin-bottom: 16px; }
#contactus section.contact-spotlight div.spotlight div.contact-left form br { display: none; }
#contactus div.contact-bottom { border-top: 1px solid var(--cx-line, #e5e7eb); padding-top: 40px; margin-top: 48px; }
#contactus div.contact-bottom div.services h2 { font-size: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cx-muted, #6b7280); margin-bottom: 14px; }
#contactus div.contact-bottom div.services a, #contactus div.contact-bottom div.services p { font-size: 16px; color: var(--cx-ink, #111827); line-height: 1.6; }

/* ---- 8. training --------------------------------------------------------------------------------------------- */
#training-programs #wrapper #programs { margin: 40px 10px 64px; }
#training-programs #wrapper div.headings ul { display: inline-flex; gap: 4px; padding: 6px; margin: 0 0 32px; border: 0; border-radius: 999px; background: var(--cx-bg, #f3f4f6); }
#training-programs #wrapper div.headings ul li { margin: 0; padding: 10px 22px; border-radius: 999px; font-family: "Mulish", sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 0; opacity: 1; color: var(--cx-muted, #6b7280); cursor: pointer; border: 0; transition: background .15s, color .15s; }
#training-programs #wrapper div.headings ul li:hover { border: 0; color: var(--cx-ink, #111827); }
#training-programs #wrapper div.headings ul li.active { background: #fff; color: var(--cx-primary, #2563eb); box-shadow: 0 2px 8px rgba(17, 24, 39, .10); }
#training-programs #wrapper div.contents > p { width: 100%; padding: 48px 24px; text-align: center; border: 1px dashed var(--cx-line, #e5e7eb); border-radius: 16px; color: var(--cx-muted, #6b7280); font-size: 16px; }
#training-programs #wrapper div.contents div.content { background: #fff; border: 1px solid var(--cx-line, #e5e7eb); border-radius: 16px; transition: box-shadow .15s, transform .15s; }
#training-programs #wrapper div.contents div.content:hover { box-shadow: var(--pub-shadow); transform: translateY(-2px); }

/* ---- 9. jobs ------------------------------------------------------------------------------------------------- */
.cx-filters { background: #fff; border: 1px solid var(--cx-line, #e5e7eb); border-radius: 16px; padding: 20px; }
.cx-filters-head h3 { font-size: 16px; font-weight: 700; }
.cx-filter-group { padding: 14px 0; border-top: 1px solid var(--cx-line, #e5e7eb); }
.cx-filter-group:first-of-type { border-top: 0; }
.cx-check-list label { font-size: 14px; color: #374151; }
.cx-salary-chips .cx-chip { border-radius: 999px; font-weight: 600; }
.cx-results-head { padding: 8px 0 16px; }
.cx-results-count { font-size: 16px; color: var(--cx-muted, #6b7280); }
.cx-results-count span { color: var(--cx-primary, #2563eb); font-weight: 700; }
.cx-sort select { min-height: 40px; border-radius: 999px; border: 1px solid var(--cx-line, #e5e7eb); padding: 6px 34px 6px 14px; font-family: "Mulish", sans-serif; }
.cx-job-card { border-radius: 16px; }
.cx-empty { padding: 56px 24px; border: 1px dashed var(--cx-line, #e5e7eb); border-radius: 16px; }
.cx-empty .cx-chip { border-radius: 999px; }
.cx-alert-box, .cx-anon-alert { border-radius: 16px; }
.marq { display: none; } /* the scrolling "Latest jobs" marquee is off-brand for the new header */

/* ---- 10. salaries --------------------------------------------------------------------------------------------- */
.cx-salaries h2 { font-size: 30px; font-weight: 800; margin-bottom: 6px; }
.cx-salaries .cx-muted { font-size: 16px; line-height: 1.6; }
.cx-card { border-radius: 16px; border-color: var(--cx-line, #e5e7eb); padding: 24px; }
.cx-wizard { margin: 32px auto 64px; }

/* ---- 11. sign-in / sign-up / OTP ------------------------------------------------------------------------------ */
#welcome .wrapper, #register .wrapper, #Otp-Verification .wrapper { margin-top: 24px; align-items: flex-start; gap: 48px; }
#welcome div.logo img, #register div.logo img, #Otp-Verification .wrapper div.page-content .logo img { width: 190px; }
#welcome .left .content h1, #register .left .content h1 { font-family: "Mulish", sans-serif; font-size: 36px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--cx-ink, #111827); padding: 56px 0 12px; max-width: 520px; }
#welcome .left .content p.sub, #register .left .content p.sub { margin: 0 0 8px; font-size: 16px; color: var(--cx-muted, #6b7280); max-width: 460px; line-height: 1.6; }
#welcome .left .image, #register .left .image { width: 90%; max-width: 560px; margin-top: 24px; }
#welcome .right, #register .right, #Otp-Verification .right {
  background: #fff none; border: 1px solid var(--cx-line, #e5e7eb); border-radius: 22px; box-shadow: 0 18px 48px rgba(17, 24, 39, .10);
  padding: 40px 40px 36px; width: 420px; flex: none;
}
#welcome .right h1, #register .right h1, #Otp-Verification .right h3 { font-family: "Mulish", sans-serif; font-size: 30px; font-weight: 800; color: var(--cx-ink, #111827); text-align: left; margin: 0 0 6px; padding: 0; }
#welcome .right p.sub, #register .right p.sub { margin: 0 0 22px; padding: 0; font-size: 14px; color: var(--cx-muted, #6b7280); text-align: left; }
/* boxed inputs instead of white underlines */
#welcome .right .inputs, #register .right .inputs { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; margin-bottom: 12px; border: 1px solid var(--cx-line, #e5e7eb); border-radius: 12px; background: #fff; transition: border-color .15s, box-shadow .15s; }
#welcome .right .inputs:focus-within, #register .right .inputs:focus-within { border-color: var(--cx-primary, #2563eb); box-shadow: 0 0 0 4px rgba(37, 99, 235, .12); }
#welcome .right .inputs input, #register .right .inputs input { flex: 1; width: auto; min-height: 46px; padding: 0; border: 0; background: transparent; color: var(--cx-ink, #111827); font-family: "Mulish", sans-serif; font-size: 16px; font-weight: 500; letter-spacing: 0; outline: 0; }
#welcome .right .inputs input::placeholder, #register .right .inputs input::placeholder { color: #9ca3af; font-size: 16px; font-weight: 400; }
#welcome .right .inputs span .zmdi, #register .right .inputs span .zmdi { color: #9ca3af; font-size: 20px; }
#register .right .inputs.Choice, #register .right .inputs.category, #register .right .inputs.country { padding: 0; border: 0; border-radius: 0; box-shadow: none; display: block; font-size: 16px; }
#register .right .inputs.Choice select { width: 100%; min-height: 46px; border: 1px solid var(--cx-line, #e5e7eb); border-radius: 12px; padding: 10px 14px; color: var(--cx-ink, #111827); background: #fff; font-family: "Mulish", sans-serif; font-size: 16px; }
#register .right .inputs.Choice select option { background: #fff; color: var(--cx-ink, #111827); }
#register .right .select2-container { width: 100% !important; }
#register .right .select2-container--default .select2-selection--single .select2-selection__rendered { padding-left: 8px !important; }
#register .right .input a#verify_phone { display: inline-block; margin: -4px 0 14px 2px; font-size: 14px; font-weight: 700; color: var(--cx-primary, #2563eb) !important; }
#register .right .cx-consent-box { display: block; padding: 12px 14px; margin: 6px 0 14px; border: 1px solid var(--cx-line, #e5e7eb); border-radius: 12px; background: var(--cx-bg, #f7f8fb); color: #374151 !important; font-size: 14px !important; line-height: 1.5 !important; }
#register .right .cx-consent-box a { color: var(--cx-primary, #2563eb) !important; font-weight: 700; font-size: inherit !important; }
#register .right .cx-consent-box input[type=checkbox] { accent-color: var(--cx-primary, #2563eb); }
/* role pickers */
#welcome .right .radio { display: flex; gap: 4px; padding: 5px; margin: 2px 0 12px !important; border-radius: 999px; background: var(--cx-bg, #f3f4f6); color: var(--cx-ink, #111827) !important; }
#welcome .right .radio > div { position: relative; flex: 1; text-align: center; }
#welcome .right .radio > div label { display: block; padding: 9px 8px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--cx-muted, #6b7280); cursor: pointer; transition: background .15s, color .15s; }
#welcome .right .radio > div input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
#welcome .right .radio > div:has(input:checked) label { background: #fff; color: var(--cx-primary, #2563eb); box-shadow: 0 2px 8px rgba(17, 24, 39, .10); }
#register .right .select { display: flex; gap: 4px; padding: 5px; margin: 0 0 20px; border-radius: 999px; background: var(--cx-bg, #f3f4f6); justify-content: stretch; }
#register .right .select a { flex: 1; text-align: center; padding: 9px 8px; border: 0; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--cx-muted, #6b7280); margin: 0; }
#register .right .select a.active { border: 0; background: #fff; color: var(--cx-primary, #2563eb); box-shadow: 0 2px 8px rgba(17, 24, 39, .10); }
#welcome .right p { color: var(--cx-muted, #6b7280); opacity: 1; padding: 4px 0 20px; font-size: 14px; line-height: 1.5; text-align: left; max-width: none; }
/* buttons */
#welcome .right .button, #register .right .button, #Otp-Verification .right form div.submit { background: transparent; border-radius: 0; padding: 0; margin: 0; }
#welcome .right .button input, #register .right .button input.submit, #Otp-Verification .right form div.submit input { width: 100%; min-height: 50px; padding: 12px 20px; border: 0; border-radius: 999px; background: var(--cx-primary, #2563eb); color: #fff; font-family: "Mulish", sans-serif; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 20px rgba(37, 99, 235, .25); transition: background .15s, transform .15s; }
#welcome .right .button input:hover, #register .right .button input.submit:hover, #Otp-Verification .right form div.submit input:hover { background: var(--cx-primary-dark, #1d4ed8); transform: translateY(-1px); }
#welcome .right form div.submit a.otp-btn { display: block; }
#welcome .right form a.sign-b { margin-top: 12px; min-height: 48px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--cx-line, #e5e7eb); border-radius: 999px; padding: 0 20px; color: var(--cx-ink, #111827); font-size: 16px; font-weight: 700; background: #fff; transition: background .15s; }
#welcome .right form a.sign-b:hover { background: var(--cx-bg, #f3f4f6); }
#welcome .right form a.sign-b small { font-weight: 400; color: var(--cx-muted, #6b7280); margin-right: 6px; font-size: inherit; }
/* OTP */
#Otp-Verification .right { padding: 40px; }
#Otp-Verification .right p.mobile-number { color: var(--cx-muted, #6b7280); font-size: 14px; line-height: 1.5; text-align: left; margin: 0 0 22px; }
#Otp-Verification .right .otp-inputs { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 20px; }
#Otp-Verification .right .otp-inputs input { width: 48px; height: 56px; padding: 0; border: 1px solid var(--cx-line, #e5e7eb); border-radius: 12px; background: #fff; color: var(--cx-ink, #111827); font-family: "Mulish", sans-serif; font-size: 20px; font-weight: 700; text-align: center; letter-spacing: 0; box-shadow: none; }
#Otp-Verification .right .otp-inputs input:focus { border-color: var(--cx-primary, #2563eb); box-shadow: 0 0 0 4px rgba(37, 99, 235, .12); outline: 0; }
#Otp-Verification .right form p { color: var(--cx-muted, #6b7280); font-size: 14px; text-align: left; margin: 0 0 18px; }
#Otp-Verification .right form p a { color: var(--cx-primary, #2563eb); font-weight: 700; text-decoration: none; }
#Otp-Verification .left .content h1:empty, #Otp-Verification .left .content h3:empty { display: none; }
#Otp-Verification .wrapper div.page-content .left .image { margin-top: 56px; }

/* ---- 12. footer ---------------------------------------------------------------------------------------------- */
footer div.top { padding: 64px 0 40px; gap: 32px; }
footer div.top div.left div.logo h1 { margin-bottom: 18px; }
footer div.top div.left ul li a { font-size: 14px; color: rgba(255, 255, 255, .8); line-height: 1.6; }
footer div.top div.left ul.social { margin-top: 18px; }
footer div.top div.left ul.social li a i { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .10); color: #fff; font-size: 16px; transition: background .15s; }
footer div.top div.left ul.social li a:hover i { background: var(--pub-orange); }
footer div.top div.middle h3, footer div.top div.jobs h3 { font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .7); margin-bottom: 18px; }
footer div.top div.middle div.middle-content ul li, footer div.top div.jobs ul li { margin-bottom: 10px; }
footer div.top div.middle div.middle-content ul li span { display: none; }
footer div.top div.middle div.middle-content ul li a, footer div.top div.jobs ul li a { font-size: 16px; color: rgba(255, 255, 255, .88); transition: color .15s, padding-left .15s; }
footer div.top div.middle div.middle-content ul li a:hover, footer div.top div.jobs ul li a:hover { color: #fff; padding-left: 4px; }
footer div.top div.google div.img-container img { border-radius: 8px; }
footer div.bottom { background: rgba(0, 0, 0, .18); }
footer div.bottom p { font-size: 14px; color: rgba(255, 255, 255, .7); padding: 18px 0; }
footer div.bottom p a { color: #fff; }

/* ---- 13. responsive ------------------------------------------------------------------------------------------ */
@media (max-width: 1100px) {
  #spotlight div.spotlight div.left h1 { font-size: 48px; }
  #contactus div.banner { padding: 40px 32px; }
  #contactus div.banner h2 { font-size: 30px; }
  #welcome .right, #register .right, #Otp-Verification .right { width: 100%; }
}
@media (max-width: 767px) {
  #spotlight div.spotlight div.left h1 { font-size: 36px; }
  #spotlight div.spotlight div.left div.search form { width: 100%; }
  #card-slider div.container div.left h2, #advertice div.right-box h2, #job-sites div.left-box h2, #map div.top-box h2 { font-size: 24px; }
  #contactus div.banner { width: calc(100% - 32px); padding: 32px 22px; border-radius: 18px; min-height: 0; }
  #contactus div.banner h2 { font-size: 24px; }
  #welcome .right, #register .right, #Otp-Verification .right { padding: 26px 20px; border-radius: 18px; }
  #welcome .left .content h1, #register .left .content h1 { font-size: 30px; padding-top: 24px; }
  #Otp-Verification .right .otp-inputs input { width: 42px; height: 50px; font-size: 20px; }
}

/* ---- 14. follow-ups from the visual pass -------------------------------------------------------------------- */
/* section headings: legacy rules add product_sans + 2px tracking; pin them to the scale */
#card-slider div.container div.left h2, #advertice div.right-box h2, #job-sites div.left-box h2, #map div.top-box h2, #spotlight div.spotlight div.left h1 { font-family: "Mulish", sans-serif; letter-spacing: -.02em; }
#card-slider div.container div.left h2 { max-width: 520px; }
/* header "Sign in" pill must not inherit the tall page-button metrics */
div.header div.nav nav ul.main-tab li a.button { min-height: 0; padding: 10px 20px; box-shadow: none; font-size: 14px; line-height: 1.2; transform: none; }
/* auth layout: two columns that centre vertically; illustration gets room */
#welcome .wrapper, #register .wrapper { min-height: calc(100vh - 80px); align-items: center; justify-content: space-between; }
#welcome .wrapper div.page-content, #register .wrapper div.page-content { flex: 1; margin-bottom: 0; }
#welcome .left, #register .left { width: 100%; margin-top: 0; }
#welcome .left .content h1, #register .left .content h1 { padding-top: 40px; }
#welcome .left .image, #register .left .image { width: 100%; max-width: 640px; }
#register .right .input { margin-bottom: 0 !important; }
#register .right .cx-consent-box label { align-items: center !important; }
#register .right .cx-consent-box input[type=checkbox] { width: 18px !important; height: 18px !important; min-height: 0; flex: none; margin: 0 !important; }
#register .right .inputs.category.Choice { margin-bottom: 12px; }
/* jobs banner: search row left, illustration right, no dead space below */
#contactus div.banner.banner-jobs { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 32px; padding: 44px 56px; min-height: 0; }
#contactus div.banner.banner-jobs .job-search { flex: 1; min-width: 0; }
#contactus div.banner.banner-jobs .job-search .job-head h2 { font-family: "Mulish", sans-serif; letter-spacing: -.02em; font-size: 36px; margin-bottom: 18px; }
#contactus div.banner.banner-jobs .job-vector { width: 220px; flex: none; text-align: right; }
#contactus div.banner.banner-jobs .job-vector img { width: 100%; max-height: 190px; object-fit: contain; }
@media (max-width: 900px) { #contactus div.banner.banner-jobs .job-vector { display: none; } }
/* contact: submit as a normal pill, uniform labels and section headings */
#contactus section.contact-spotlight div.spotlight div.contact-left form input.submit-button { width: auto; min-width: 180px; padding: 11px 28px; border: 0; border-radius: 999px; font-size: 16px; margin-top: 8px; }
#contactus section.contact-spotlight div.spotlight div.contact-left form input.submit-button:hover { background: var(--pub-orange-dark); color: #fff; border: 0; }
#contactus section.contact-spotlight div.spotlight div.contact-left form div.group label { font-size: 14px; font-weight: 700; color: #374151; letter-spacing: .02em; margin-bottom: 6px; }
#contactus div.contact-bottom div.services h2, #contactus div.contact-bottom div.phone h2, #contactus div.contact-bottom div.address h2 { font-family: "Mulish", sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; color: var(--cx-muted, #6b7280); margin-bottom: 14px; }
#contactus div.contact-bottom div.phone a, #contactus div.contact-bottom div.address p, #contactus div.contact-bottom div.address a { font-size: 16px; color: var(--cx-ink, #111827); }
#contactus div.banner h2 { font-family: "Mulish", sans-serif; letter-spacing: -.02em; }
/* footer: copyright bar spans the full width */
footer div.bottom { background: transparent; border-top: 1px solid rgba(255, 255, 255, .12); }
/* The header's top gap now lives on the bar itself (header.css), not on a `body >` selector:
   the bar is nested several levels deep on most public pages, so the old rule only matched
   some of them and the header sat at a different height from page to page. */
.cx-salaries { margin-bottom: 64px !important; }
#training-programs #wrapper { width: 90%; }
#contactus div.banner.banner-jobs .job-search { width: auto; }
#contactus div.banner.banner-jobs .job-search .top form { width: 100%; max-width: 820px; }

/* ---- 15. review round 2 -------------------------------------------------------------------------------------- */
/* jobs search bar: equal padding around the fields */
#contactus div.banner.banner-jobs .job-search .top form { padding: 6px; align-items: center; }
#contactus div.banner.banner-jobs .job-search .top form div.left { align-items: center; }
#contactus div.banner.banner-jobs .job-search .top form p { margin: 0; padding: 0 14px; min-height: 46px; }
#contactus div.banner.banner-jobs .job-search .top form p input { padding: 0 8px; }
/* jobs: one divider per filter group, breathing room in the empty state, gap before the alert card */
form.cx-filters .cx-filter-group { margin: 0; padding: 16px 0; border-top: 1px solid var(--cx-line, #e5e7eb); border-bottom: 0; }
form.cx-filters .cx-filters-head { padding-bottom: 12px; }
form.cx-filters .cx-filter-group:first-of-type { border-top: 0; }
form.cx-filters .cx-filter-actions { padding-top: 16px; border-top: 1px solid var(--cx-line, #e5e7eb); }
form.cx-filters .cx-filter-group select, form.cx-filters .cx-filter-group input[type=number], form.cx-filters .cx-filter-group input[type=text] { padding: 10px 14px; border: 1px solid var(--cx-line, #e5e7eb); border-radius: 12px; font-family: "Mulish", sans-serif; }
form.cx-filters .cx-filter-group select { padding-right: 40px; }
#cx-results .cx-empty { padding: 56px 24px 52px; border: 1px dashed var(--cx-line, #e5e7eb); border-radius: 16px; }
#cx-results .cx-empty p { margin: 0 0 6px; line-height: 1.5; }
#cx-results .cx-empty .cx-chip { margin-top: 16px; }
.cx-search .right .cx-card.cx-alert-anon { margin-top: 18px; padding: 20px; border-radius: 16px; }
.cx-search .right .cx-card.cx-alert-anon strong { display: block; margin-bottom: 12px; font-size: 16px; }
.cx-search .right .cx-card.cx-alert-anon .cx-skill-add { display: flex; gap: 10px; }
.cx-search .right .cx-card.cx-alert-anon small { display: block; margin-top: 10px; }
/* CV builder: the wrapper <p> drew a second outline around every field — the field itself carries the box now */
#Form div.form-set form div.form-box div.form-data div.flex-box p { border: 0; border-radius: 0; padding: 0; margin-bottom: 16px; background: transparent; }
#Form div.form-set form div.form-box div.form-data div.flex-box p input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=button]),
#Form div.form-set form div.form-box div.form-data div.flex-box p select,
#Form div.form-set form div.form-box div.form-data div.flex-box p textarea,
#Form div.form-set form div.form-box div.form-data div.flex-box p #days {
  width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--cx-line, #e5e7eb); border-radius: 12px; background-color: #fff;
  font-family: "Mulish", sans-serif; font-size: 16px; color: var(--cx-ink, #111827); box-sizing: border-box; box-shadow: none; outline: 0; transition: border-color .15s, box-shadow .15s;
}
#Form div.form-set form div.form-box div.form-data div.flex-box p input:focus, #Form div.form-set form div.form-box div.form-data div.flex-box p select:focus, #Form div.form-set form div.form-box div.form-data div.flex-box p textarea:focus { border-color: var(--cx-primary, #2563eb); box-shadow: 0 0 0 4px rgba(37, 99, 235, .12); }
#Form div.form-set form div.form-box div.form-data div.flex-box p select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; }
#Form div.form-set form div.form-box div.form-data div.flex-box p textarea { min-height: 140px; resize: vertical; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.child-box small.loc { display: block; width: 100%; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.child-box .loc, #Form div.form-set form div.form-box div.form-data div.flex-box p.child-1 .loc { border: 0; border-radius: 0; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.icon { position: relative; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.icon input:not([type=checkbox]) { width: 100% !important; padding-right: 44px; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.icon i, #Form div.form-set form div.form-box div.form-data div.flex-box p.icon .zmdi { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
/* CV builder header: same blue sign-in pill as everywhere else */
#spotlight-2 div.header div.nav nav ul li a.button { background: var(--cx-primary, #2563eb); border-radius: 999px; padding: 10px 20px; }
/* end-date row: the date input shares the row with a "Present" toggle */
#Form div.form-set form div.form-box div.form-data div.flex-box p.icon.end_date { display: flex; align-items: center; gap: 12px; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.icon.end_date input[type=text], #Form div.form-set form div.form-box div.form-data div.flex-box p.icon.end_date input[type=date] { flex: 1; width: auto !important; padding-right: 14px; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.icon.end_date .single-check-box { flex: none; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.icon.end_date .single-check-box label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: #374151; white-space: nowrap; cursor: pointer; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.icon.end_date .single-check-box input[type=checkbox] { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--cx-primary, #2563eb); }
#Form div.form-set form div.form-box div.form-data div.flex-box p.icon.end_date i, #Form div.form-set form div.form-box div.form-data div.flex-box p.icon.end_date .zmdi { position: static; transform: none; }
/* CV builder: a title above every field */
#Form div.form-set form div.form-box div.form-data div.flex-box p { display: flex; flex-wrap: wrap; align-content: flex-start; }
#Form div.form-set form div.form-box div.form-data div.flex-box p > .cx-lbl, #Form div.form-set form div.form-box div.form-data div.flex-box p small.loc > .cx-lbl { display: block; width: 100%; flex: 0 0 100%; margin: 0 0 6px; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: #374151; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.icon i, #Form div.form-set form div.form-box div.form-data div.flex-box p.icon .zmdi { top: auto; bottom: 14px; transform: none; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.icon.end_date { align-items: flex-end; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.icon.end_date .single-check-box { padding-bottom: 12px; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.child-box small.loc { display: flex; flex-wrap: wrap; }
/* CV builder: wrappers that were columns/rows now stack label + field */
#Form div.form-set form div.form-box div.form-data div.flex-box p { height: auto; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.child-box { flex-direction: row; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.child-box small.loc { width: 100%; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.child-box input.loc { width: 100%; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.child-1 { gap: 4%; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.child-1 .loc { width: 48%; display: flex; flex-wrap: wrap; align-items: flex-end; border: 0; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.child-1 .loc input { flex: 1; width: auto; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.child-1 .loc.end_date .single-check-box { flex: none; padding: 0 0 12px 10px; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.child-1 .loc.end_date .single-check-box label { display: inline-flex !important; align-items: center; gap: 8px; margin: 0; padding: 0 !important; font-size: 14px; color: #374151; white-space: nowrap; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.child-1 .loc.end_date .single-check-box input[type=checkbox] { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--cx-primary, #2563eb); }
#Form div.form-set form div.form-box div.form-data div.flex-box p.area-box, #Form div.form-set form div.form-box div.form-data div.flex-box p.area-box2, #Form div.form-set form div.form-box div.form-data div.flex-box p.area-about { margin-bottom: 16px; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.area-about textarea { height: auto; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.area-box textarea { height: auto; min-height: 140px; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.icon.end_date > i, #Form div.form-set form div.form-box div.form-data div.flex-box p.icon.end_date > .zmdi { display: none; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.icon.end_date input[type=text] { padding-right: 14px; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.area.inline-radio { align-items: flex-end; }

/* ---- 16. CV builder multi-entry sections: entry cards + add/discard buttons ------------------------------------ */
#Form .form_set_row.cx-collapsed, #Form .form_set_row.cx-deleted { display: none !important; }
#Form .cx-entries { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-bottom: 16px; }
#Form .cx-entries:empty { display: none; }
#Form .cx-entry-card { display: flex; align-items: flex-start; gap: 16px; padding: 16px 18px; background: var(--cx-card, #fff); border: 1px solid var(--cx-line, #e5e7eb); border-left: 4px solid var(--cx-primary, #2563eb); border-radius: 14px; box-shadow: 0 4px 14px rgba(17, 24, 39, .05); transition: box-shadow .15s; }
#Form .cx-entry-card:hover { box-shadow: 0 10px 28px rgba(17, 24, 39, .10); }
#Form .cx-entry-body { flex: 1; min-width: 0; }
#Form .cx-entry-body strong { display: block; font-size: 16px; font-weight: 700; color: var(--cx-ink, #111827); }
#Form .cx-entry-meta { display: block; margin-top: 3px; font-size: 14px; color: var(--cx-muted, #6b7280); }
#Form .cx-entry-body p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: #4b5563; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#Form .cx-entry-actions { display: flex; gap: 8px; flex: none; }
#Form .cx-entry-actions button { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--cx-bg, #f3f4f6); color: var(--cx-muted, #6b7280); font-size: 18px; cursor: pointer; transition: background .15s, color .15s; }
#Form .cx-entry-actions button.cx-entry-edit:hover { background: rgba(37, 99, 235, .12); color: var(--cx-primary, #2563eb); }
#Form .cx-entry-actions button.cx-entry-del:hover { background: rgba(185, 28, 28, .10); color: #b91c1c; }
/* the open entry gets a soft frame so it reads as "the one being edited" once cards exist */
#Form .form-box.cx-has-entries .form_set_row:not(.cx-collapsed) { padding: 18px 18px 6px; border: 1px dashed rgba(37, 99, 235, .45); border-radius: 14px; background: rgba(37, 99, 235, .03); }
/* add / discard controls */
#Form div.form-set form div.form-box div.form-data .add_button { width: 100%; margin: 4px 0 8px; border: 0 !important; background: transparent !important; padding: 0; }
#Form div.form-set form div.form-box div.form-data .add_button a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 22px; border: 1.5px solid var(--cx-primary, #2563eb); border-radius: 999px; background: #fff; color: var(--cx-primary, #2563eb) !important; font-family: "Mulish", sans-serif; font-size: 14px; font-weight: 700; text-decoration: none; transition: background .15s, color .15s; }
#Form div.form-set form div.form-box div.form-data .add_button a:hover { background: var(--cx-primary, #2563eb); color: #fff !important; }
#Form div.form-set form div.form-box div.form-data .add_button a i { font-size: 18px; }
#Form div.form-set form div.form-box div.form-data .delete_button { width: 100%; margin: 0 0 8px; border: 0 !important; background: transparent !important; padding: 0; text-align: right; }
#Form div.form-set form div.form-box div.form-data .delete_button a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; color: #b91c1c !important; font-family: "Mulish", sans-serif; font-size: 14px; font-weight: 600; text-decoration: none; }
#Form div.form-set form div.form-box div.form-data .delete_button a:hover { background: rgba(185, 28, 28, .08); }

/* ---- 17. CV builder: every section is a strict two-column grid -------------------------------------------------- */
#Form div.form-set form div.form-box div.form-data div.flex-box { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4%; row-gap: 0; align-items: start; }
#Form div.form-set form div.form-box div.form-data div.flex-box > p, #Form div.form-set form div.form-box div.form-data div.flex-box > div { width: auto !important; margin-bottom: 18px; }
#Form div.form-set form div.form-box div.form-data div.flex-box > p.area-about,
#Form div.form-set form div.form-box div.form-data div.flex-box > p.area-box2,
#Form div.form-set form div.form-box div.form-data div.flex-box > p.description,
#Form div.form-set form div.form-box div.form-data div.flex-box > p.bottom-add,
#Form div.form-set form div.form-box div.form-data div.flex-box > div.delete_button,
#Form div.form-set form div.form-box div.form-data div.flex-box > div.upload,
#Form div.form-set form div.form-box div.form-data div.flex-box > p.inline-radio-box { grid-column: 1 / -1; }
#Form div.form-set form div.form-box div.form-data div.flex-box > p[style*="visibility: hidden"] { display: none; }
#Form div.form-set form div.form-box div.form-data div.flex-box > div.delete_button { margin: -6px 0 0; }
/* every field fills its cell; labels sit on one line so the inputs line up across columns */
#Form div.form-set form div.form-box div.form-data div.flex-box p .cx-lbl { min-height: 18px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.icon input:not([type=checkbox]), #Form div.form-set form div.form-box div.form-data div.flex-box p.icon.end_date input[type=text] { flex: 0 0 100%; width: 100% !important; padding-right: 44px; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.icon.end_date { position: relative; align-items: flex-start; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.icon.end_date .single-check-box { position: absolute; right: 0; top: 0; padding: 0; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.icon.end_date .single-check-box label { line-height: 18px; font-size: 14px; font-weight: 600; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.icon.end_date .single-check-box input[type=checkbox] { width: 16px; height: 16px; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.icon i, #Form div.form-set form div.form-box div.form-data div.flex-box p.icon .zmdi { top: auto; bottom: 14px; }
/* start / end pair inside one cell */
#Form div.form-set form div.form-box div.form-data div.flex-box p.child-1 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; align-items: start; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.child-1 .loc { width: auto; position: relative; align-items: flex-start; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.child-1 .loc input:not([type=checkbox]) { flex: 0 0 100%; width: 100%; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.child-1 .loc.end_date .single-check-box { position: absolute; right: 0; top: 0; padding: 0; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.child-1 .loc.end_date .single-check-box label { line-height: 18px; font-size: 14px; font-weight: 600; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.child-1 .loc.end_date .single-check-box input[type=checkbox] { width: 16px; height: 16px; }
/* skill level segmented control aligns with its title field */
#Form div.form-set form div.form-box div.form-data div.flex-box p.area.inline-radio { align-items: stretch; padding-top: 24px; }
/* textareas share one height so side-by-side cells match */
#Form div.form-set form div.form-box div.form-data div.flex-box p textarea { min-height: 150px; height: 150px; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.area-about textarea, #Form div.form-set form div.form-box div.form-data div.flex-box p.area-box2 textarea { height: 150px; }
/* the open entry frame + cards share the same outer edges as the grid */
#Form .form-box.cx-has-entries .form_set_row:not(.cx-collapsed) { padding: 18px 18px 2px; margin-bottom: 14px; }
#Form .cx-entries { margin-bottom: 14px; }
@media (max-width: 767px) {
  #Form div.form-set form div.form-box div.form-data div.flex-box { grid-template-columns: 1fr; }
  #Form div.form-set form div.form-box div.form-data div.flex-box p.child-1 { grid-template-columns: 1fr 1fr; }
}
#Form div.form-set form div.form-box div.form-data div.flex-box .single-check-box input[type=checkbox] { width: 16px !important; height: 16px !important; min-height: 0; flex: none; padding: 0; }
#Form div.form-set form div.form-box div.form-data div.flex-box p.icon.end_date { row-gap: 0; }
/* section descriptions: plain sentence under the heading; card action icons centred in their circles */
#Form div.form-set form div.form-box div.form-data p.description { margin: -6px 0 18px; font-size: 14px; line-height: 1.5; color: var(--cx-muted, #6b7280); font-style: normal; }
#Form .cx-entry-card { align-items: center; }
#Form .cx-entry-actions { align-self: center; }
#Form .cx-entry-actions button { line-height: 1; padding: 0; }
#Form .cx-entry-actions button i { display: block; width: 18px; height: 18px; line-height: 18px; font-size: 18px; text-align: center; color: inherit; }
#Form div.form-set form div.form-box div.form-data .cx-entry-actions button i,
#Form .cx-entry-actions button i { margin: 0 !important; padding: 0 !important; width: 18px; height: 18px; display: flex !important; align-items: center; justify-content: center; line-height: 1; }
#Form .cx-entry-actions button i::before { display: block; line-height: 1; }
/* CV builder avatar: white disc behind the placeholder so it reads cleanly over the blue banner edge */
#spotlight-2 div.top-head div.image-position { background: #fff; border: 4px solid #fff; padding: 0; box-shadow: 0 10px 30px rgba(17, 24, 39, .18); }
#spotlight-2 div.top-head div.image-position img { background: #fff; }
#spotlight-2 div.top-head div.image-position label { z-index: 2; }
/* required-field marker (public CV builder labels + candidate resume builder) */
.cx-lbl.req::after, label.cx-req::after { content: " *"; color: #dc2626; font-weight: 700; }

/* ---- reusable page banner (same look as the Jobs / Training / Contact banners) ------------------------------- */
.cx-page-banner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; position: relative; overflow: hidden; min-height: 180px; padding: 44px 56px; border-radius: 24px; color: #fff;
  background: linear-gradient(115deg, var(--pub-navy) 0%, #1d6fb8 60%, #2a83cf 100%); box-shadow: 0 16px 44px rgba(11, 79, 138, .22); }
.cx-page-banner::after { content: ""; position: absolute; right: -120px; top: -160px; width: 520px; height: 520px; border-radius: 50%; background: rgba(255, 255, 255, .06); pointer-events: none; }
.cx-page-banner-text, .cx-page-banner-actions { position: relative; z-index: 1; }
.cx-page-banner h2 { margin: 0 0 8px; font-size: 36px; line-height: 1.15; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.cx-page-banner p { margin: 0; font-size: 16px; color: rgba(255, 255, 255, .88); }
.cx-page-chip { display: inline-block; margin: 0 4px; padding: 2px 12px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--pub-navy); font-size: 14px; font-weight: 700; vertical-align: middle; }
.cx-page-banner-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cx-page-banner .cx-account-btn { border-color: transparent; }
.cx-page-banner .cx-account-btn.primary { background: #fff; color: var(--cx-primary-dark, #1d4ed8); }
.cx-page-banner .cx-account-btn:not(.primary) { background: rgba(255, 255, 255, .16); color: #fff; }
.cx-page-banner .cx-account-btn:not(.primary):hover { background: rgba(255, 255, 255, .28); color: #fff; }
.cx-account { max-width: 1400px; width: 90%; margin: 18px auto 64px; padding: 0; }
.cx-account-narrow { max-width: 1400px; }
.cx-account-narrow .cx-account-section { max-width: 820px; }
@media (max-width: 767px) { .cx-page-banner { padding: 28px 22px; border-radius: 18px; min-height: 0; } .cx-page-banner h2 { font-size: 30px; } }

/* ---- page hero: every inner page (candidate / employer / franchisee) opens with the same banner as Training / Contact ---- */
.cx-hero-wrap { width: 90%; max-width: 1400px; margin: 18px auto 0; }
.cx-page-hero { min-height: 200px; padding: 48px 56px; }
.cx-page-hero h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.cx-page-hero h2 .cx-page-chip { margin: 0; }
.cx-page-hero h2 .cx-muted, .cx-page-hero h2 small { color: rgba(255, 255, 255, .75); font-size: 18px; font-weight: 500; }
.cx-page-hero h2 .cx-stage-pill { background: rgba(255, 255, 255, .92); color: var(--pub-navy); }
.cx-page-hero p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cx-page-eyebrow { display: block; margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.cx-hero-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap; text-decoration: none;
  background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .28); transition: background .15s, transform .15s; }
.cx-hero-btn i { font-size: 18px; }
.cx-hero-btn:hover { background: rgba(255, 255, 255, .28); color: #fff; transform: translateY(-1px); }
.cx-hero-btn.primary { background: #fff; color: var(--cx-primary-dark, #1d4ed8); border-color: transparent; }
.cx-hero-btn.primary:hover { background: #f3f6fb; color: var(--cx-primary-dark, #1d4ed8); }
.cx-hero-btn.accent { background: var(--pub-orange); color: #fff; border-color: transparent; }
.cx-hero-btn.accent:hover { background: var(--pub-orange-dark); color: #fff; }
.cx-hero-wrap + .cx-wizard, .cx-hero-wrap + link + .cx-wizard, .cx-hero-wrap + .cx-ats, .cx-hero-wrap + .cx-chat, .cx-hero-wrap + .cx-builder, .cx-hero-wrap + .cx-company { margin-top: 28px; }
.cx-wizard > .cx-builder-top:empty { display: none; }
@media (max-width: 767px) { .cx-hero-wrap { width: calc(100% - 32px); } .cx-page-hero { padding: 28px 22px; min-height: 0; } }