/*
 * ============================================================
 * Brand refresh - professional design polish
 * ============================================================
 * Additive layer, loaded last. Restyles the site through the theme's
 * existing utility classes (.theme, .bg-theme, .rounded, .box-shadow,
 * .job-btn1, .counter, .testimonial-item, etc.) rather than rewriting
 * markup - safe to apply across every page without touching Blade files.
 *
 * Design direction: SAFA HR places Indian workers with Gulf employers.
 * The two audiences (employers who need compliant, verified manpower;
 * candidates trusting an agency with their livelihood) both run on the
 * same currency - proof and verification. That's the thread here: a
 * "verified registry" feel - crisp cards with a left credential-bar,
 * small tick-badges, ledger-style numbers - rather than generic startup
 * gradients.
 *
 * Tokens:
 *   Ink       #101828  primary text (was a low-contrast translucent navy)
 *   Ink-soft  #475467  secondary/body text
 *   Brand     #1554B0  deepened from the existing #1967D3 - same brand blue,
 *                       more authoritative
 *   Brand-tint #EAF1FC  section backgrounds
 *   Accent    #C8892A  warm amber - used ONLY for stat numbers and small
 *                       verification marks, never backgrounds
 *   Verified  #2F8F46  ties to the green in the SHR logo, used for
 *                       trust/verified badges
 *   Line      #E4E7EC  hairline borders
 * ============================================================
 */

:root {
  --ink: #101828;
  --ink-soft: #475467;
  --brand: #1554B0;
  --brand-tint: #EAF1FC;
  --accent: #C8892A;
  --verified: #2F8F46;
  --line: #E4E7EC;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);
}

/* ---------- Typography ---------- */

body {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* The theme forced text-transform:capitalize on every heading site-wide -
   this is the single biggest fix here. It made ordinary sentence-case
   headings read like "Every Word Capitalized Like This," which is what
   makes a page feel like an unfinished template rather than a real site. */
h1, h2, h3, h4, h5, h6 {
  text-transform: none !important;
  font-family: "Manrope", sans-serif;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

h1 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
h2 { font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; }
h3, h4 { font-weight: 700; }

p {
  color: var(--ink-soft);
}

/* Visible keyboard focus - accessibility floor, not optional polish */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ---------- Section rhythm ---------- */
/* NOTE: originally had a blanket rule applying 96px padding to every
   <section> tag site-wide. Removed - the theme already has its own
   deliberate per-section padding classes (pb-8, pt-20, pt-11, etc.), and
   the blanket rule was stacking on top of those, causing excessive
   double-spacing between sections (reported: too much gap before "Reviews
   By Clients" and elsewhere). Section-specific gaps are now handled
   individually where an actual problem was found, not globally. */

/* ---------- Refined brand colors (keeps existing class names/usage
   throughout every page, just deepens/cleans the actual values) ---------- */

.theme {
  color: var(--brand) !important;
}

.bg-theme {
  background: var(--brand) !important;
}

.title {
  color: var(--ink) !important;
}

.grey {
  color: var(--ink-soft) !important;
}

.bg-grey, .bg-lgrey {
  background: var(--brand-tint) !important;
}

/* ---------- Buttons ---------- */
/* Corporate/professional register: rounded corners, not pill-shaped;
   confident weight; a clean hover lift instead of the theme's default
   flat hover. */

.job-btn, .job-btn1, .btn1 {
  border-radius: var(--radius-sm) !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 12px 28px !important;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.job-btn:hover, .job-btn1:hover, .btn1:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ---------- Cards (generic .rounded.box-shadow combo used throughout:
   client logos, feature blocks, job cards) ---------- */

.rounded {
  border-radius: var(--radius) !important;
}

.box-shadow, .box-shadow-sm {
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--line);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.box-shadow:hover, .box-shadow-sm:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-3px);
}

/* ---------- Signature: verified registry marks ---------- */
/* Stat counters ("1050 Daily Active Users" etc.) get ledger-style
   treatment: amber numeral, thin rule underneath - reads like a verified
   register entry rather than a generic "big number" stat block. */

.counter .value {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  color: var(--accent);
  font-size: 2.5rem;
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
  white-space: nowrap; /* numbers must never wrap mid-digit - the
                           word-break rule applied to headings elsewhere
                           was splitting "2500" into "250" + "0" on narrow
                           mobile columns */
  word-break: keep-all;
  overflow-wrap: normal;
}

@media (max-width: 575px) {
  .counter .value {
    font-size: 2rem;
  }
}

.counter .value:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
}

.counter-item span {
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 500;
}

.counter-item i {
  border-radius: var(--radius-sm) !important;
}

/* Testimonial cards get a left credential-bar - a quiet nod to a verified
   client record rather than a floating quote bubble */
.testimonial-item {
  border-left: 3px solid var(--verified) !important;
  border-radius: var(--radius) !important;
  position: relative;
}

.testimonial-item:before {
  content: "\2713";
  position: absolute;
  top: 20px;
  right: 20px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--verified);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Header ---------- */

.main_header_area {
  box-shadow: var(--shadow-sm);
}

.header_menu {
  background: #fff;
}

.header_menu.fixed-top {
  box-shadow: var(--shadow-md);
}

/* Top contact bar and footer keep their original theme colors - not
   overridden to dark ink (reverted per feedback: keep the brand look
   consistent with what was already there) */

/* ---------- Hero ---------- */
/* Lighter overlay - brighter images while keeping just enough contrast for
   white headline text to stay readable */

.banner .color-overlay {
  background: linear-gradient(180deg, rgba(16,24,40,0.32) 0%, rgba(16,24,40,0.18) 45%, rgba(16,24,40,0.38) 100%);
}

.banner .banner-content h1,
.banner .banner-content h3 {
  text-shadow: 0 2px 12px rgba(0,0,0,0.35); /* keeps text readable now that
                                                the overlay is lighter */
}

.banner-content h5.bg-color {
  background: rgba(255,255,255,0.95) !important;
  color: var(--brand) !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-md);
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}

.banner-content h5.bg-color:before {
  content: "\2713";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--verified);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ---------- Footer ---------- */
/* Kept the footer's original background color (was being forced to dark
   ink before - reverted per feedback). Only fixing the link-hover color and
   the broken bullet icons below. */

footer a, .footer a {
  transition: color 0.15s ease;
}

footer a:hover, .footer a:hover {
  color: var(--accent) !important;
}

/* Fix: footer link list bullets show as a broken fallback glyph box instead
   of a chevron - same root cause as the earlier mobile-menu icon bug
   (style.css draws it via `font-family: 'fontawesome'`, the old v4 name,
   which isn't loaded - only Font Awesome 5 is). Cancel the broken glyph and
   draw a plain CSS chevron instead, no icon font dependency. */
footer .footer-upper .footer-links ul li a::before {
  content: none !important;
}

footer .footer-upper .footer-links ul li a {
  position: relative;
  padding-left: 16px !important;
  display: inline-block;
}

footer .footer-upper .footer-links ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em; /* aligns with the first line of text, not the vertical
                 center of the whole (possibly multi-line) link */
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.8;
}

/* Remove the theme's decorative dashed section dividers throughout the
   site (.border-b / .border-t utility classes, always rendered dashed) -
   cleaner plain gaps between sections instead */
.border-b,
.border-t {
  border-color: transparent !important;
}

.counter .d-line {
  border-color: transparent !important;
}

/* Fix: the "Real Candidate Success Stories" video block sits with no
   spacing at all right after the testimonials carousel above it, making it
   feel cramped/collapsed together. Give the whole block breathing room by
   padding the container that holds the video, rather than the iframe
   alone - keeps both columns (video + heading) aligned together. */
.container:has(> .row > div > iframe[src*="youtube"]) {
  padding-top: 56px;
}

iframe[src*="youtube"] {
  border-radius: var(--radius);
}

@media (min-width: 992px) {
  .container:has(> .row > div > iframe[src*="youtube"]) {
    padding-top: 72px;
  }
}

/* ---------- Hero text wrapping on small screens ---------- */
/* Fix: the hero headline/subtext block (.banner-in) is hardcoded to
   `width: 50%` with no responsive override, so on phones it's squeezed
   into a very narrow column, wrapping onto many lines and overflowing
   into the search widget positioned below the hero. Widen it on small
   screens so text wraps naturally in fewer, fuller lines. */
@media (max-width: 767px) {
  .banner-in {
    width: 92% !important;
  }

  .banner .banner-content h1 {
    font-size: 44px !important;
    line-height: 1.25 !important;
  }

  .banner .banner-content h3 {
    font-size: 20px !important;
    line-height: 1.4 !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .banner-in {
    width: 75% !important;
  }

  .banner .banner-content h1 {
    font-size: 60px !important;
  }
}

/* Larger, more confident hero text on standard/large screens */
.banner-content h5.bg-color {
  font-size: 16px !important;
  padding: 10px 22px !important;
}

@media (min-width: 992px) {
  .banner .banner-content h1 {
    font-size: 80px !important;
    line-height: 1.12 !important;
  }

  .banner .banner-content h3 {
    font-size: 28px !important;
    line-height: 1.4 !important;
  }
}

/* Remove the carousel prev/next arrows - only one hero image is in active
   use, so the arrows were adding clutter without serving a real purpose */
.banner .swiper-button-next,
.banner .swiper-button-prev {
  display: none !important;
}

/* ---------- Homepage search bar placement ---------- */
/* Fix: the search bar (Job Title / Where / Search Now) uses the theme's
   .mt-minus class, which sets margin-top:-6rem specifically to float it up
   and overlap the bottom of the hero image - by design, but it collides
   with the hero headline text. Moving it into normal document flow below
   the hero instead, with a clean gap, rather than overlapping. */
.form-section.mt-minus {
  margin-top: 40px !important;
}

/* Fix: the About Us section right below the search bar has a huge
   padding-top (10rem/160px from the theme's .pt-20 class), which combined
   with the search bar's own spacing left a large empty gap. .pt-20 is only
   used on this one section, so it's safe to reduce it directly. */
.about-us.pt-20 {
  padding-top: 48px !important;
}

/* Highlight the search bar's field labels (Job Title / Where) so they read
   as clear, confident section headers within the search widget rather than
   blending into the form */
.form-section .input-box label {
  color: var(--brand) !important;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Fix: the Job Title / Location dropdown (niceSelect plugin) renders too
   narrow, causing long option text ("ELECTRICAL ENGINEER", "KHADIM FOR THE
   MOSQUE") to wrap across 2-3 lines per option - which makes the whole
   dropdown list balloon in height and visually overlap the content below
   the search bar. Force it to match its trigger's width, and cap the list
   height with a scrollbar instead of letting it grow indefinitely. */
.custom-select .nice-select,
.custom-select .nice-select .list {
  width: 100% !important;
}

.nice-select .list {
  max-height: 260px;
  overflow-y: auto;
  white-space: normal;
}

.nice-select .option {
  white-space: normal;
  line-height: 1.4;
  padding: 10px 18px;
}

/* ---------- Hero height ---------- */
/* Fix/behavior requested: header + hero should exactly fill the initial
   screen (viewport height) with nothing peeking below - the search bar
   should only appear once the person scrolls. A fixed pixel height can't
   guarantee that across different screen heights, so this uses
   calc(100vh - header height) instead: whatever the viewport height is,
   the hero fills exactly what's left after the header. */

.banner .slider {
  height: calc(100vh - 126px) !important; /* 126px = top contact bar + main
                                              nav height on desktop */
  min-height: 420px; /* floor for unusually short viewports so text never
                         gets crushed */
}

@media (max-width: 1199px) {
  .banner .slider {
    height: calc(100vh - 126px) !important;
    min-height: 400px;
  }
}

@media (max-width: 767px) {
  .banner .slider {
    height: calc(100vh - 96px) !important; /* mobile header is shorter -
                                                single row, no top contact
                                                bar row shown the same way */
    min-height: 560px; /* mobile text wraps onto more lines, needs more
                           room even on short phone screens */
  }
}

/* Shorter laptop screens (many 13"-14" laptops report ~700-800px viewport
   height once browser chrome is subtracted) - scale text down a bit so it
   sits comfortably within the shorter hero the calc() above produces */
@media (min-width: 768px) and (max-height: 800px) {
  .banner .banner-content h1 {
    font-size: 56px !important;
  }

  .banner .banner-content h3 {
    font-size: 22px !important;
  }
}

@media (max-width: 767px) {
  .form-section.mt-minus {
    margin-top: 24px !important;
  }

  .about-us.pt-20 {
    padding-top: 32px !important;
  }
}
/* ---------- Testimonial carousel alignment ---------- */
/* Fix: the first slide sits noticeably higher than the others. Swiper
   doesn't set a consistent vertical alignment across slides by default -
   this forces all slides (and the cards inside them) to start at the same
   top edge regardless of content height differences. */
.testimonial .swiper-wrapper,
.swiper-wrapper {
  align-items: stretch;
}

.testimonial .swiper-slide {
  height: auto;
  display: flex;
}

.testimonial-item {
  width: 100%;
}