/* =============================================================================
   HRLoop Light Theme Overrides
   Applied after Axino template styles via angular.json global styles array.
   Principle: minimal, targeted edits — preserve layout, spacing, interactions.
   Palette:
     Background main : #F7F9FC
     Background alt  : #EEF3FA
     Card background : #FFFFFF
     Dark navy       : #14213D
     Mid navy        : #223A5E
     Accent orange   : #FF8A00
     Headline text   : #0F172A
     Body text       : #475467
     Subtle border   : rgba(20, 33, 61, 0.08)
     Orange glow     : rgba(255, 138, 0, 0.18)
   ============================================================================= */


/* =============================================================================
   1. CSS CUSTOM PROPERTY OVERRIDES  (:root)
   These propagate to all elements that reference the variable — no !important.
   ============================================================================= */
:root {
  /* Re-brand: HRLoop orange replaces the template's green */
  --theme-color1: #FF8A00;
  --theme-color1-rgb: 255, 138, 0;

  /* Page background — overrides #060712 / #031112 from style-4.css / style.css */
  --body-bg: #F7F9FC;

  /* NOTE: --surface / --grad-1 / --grad-2 are intentionally NOT overridden here.
     The hero widget (.banner-section-four) needs them to stay dark so the
     floating workflow panels keep their dark-navy appearance.
     Those variables are overridden only on specific non-hero sections below. */

  /* Typography — dark on light */
  --headings-color: #0F172A;
  --text-color: #475467;
  --text-color2: #64748B;

  /* Section titles */
  --sec-title-color: #0F172A;
  --sec-title-subtitle-color: #FF8A00;

  /* Navigation dark accent */
  --theme-color-dark: #14213D;
  --theme-color-gray: #223A5E;

  /* Links */
  --link-color: #FF8A00;
  --link-hover-color: #FF8A00;

  /* Gradient overrides — used by benefits, FAQs, process cards */
  --gradient-1:  linear-gradient(181.35deg, rgba(247,249,252,0) 1.15%, rgba(255,138,0,0.06) 98.91%);
  --gradient-2:  linear-gradient(145deg, #F7F9FC 0%, #EEF3FA 100%);
  --gradient-3:  linear-gradient(145deg, #EEF3FA 0%, #F7F9FC 100%);
  --gradient-4:  linear-gradient(145deg, #FFFFFF 0%, #F4F7FB 100%);
  --gradient-5:  linear-gradient(145.36deg, rgba(238,243,250,0.9) 11.7%, rgba(247,249,252,0.97) 80.03%);
  --gradient-10: linear-gradient(39.66deg, #FFFFFF 0%, #F7F9FC 100%);
  --gradient-12: linear-gradient(39.66deg, #FFFFFF 0%, #F4F7FB 100%);
  --gradient-13: linear-gradient(39.66deg, #FFFFFF 0%, #F4F7FB 100%);
  --gradient-14: radial-gradient(155.99% 118.93% at 100% 98.08%, #FFFFFF 0%, #F4F7FB 55.18%);
}


/* =============================================================================
   1b. SECTION-SCOPED PANEL VARIABLE OVERRIDES
   Flip --surface / --grad-1 / --grad-2 to light values for every section
   EXCEPT the hero — the hero widget panels must stay dark navy.
   ============================================================================= */
.features-section-two-h4,
.feature-section-layout4,
.pricing-section-layout4,
.benefits-section-layout4,
.faqs-section-layout4,
.rating-section-layout4,
.process-section-layout4,
.team-section-layout4,
.testimonial-section-layout4 {
  --surface:            #FFFFFF;
  --card-bg:            #F4F7FB;
  --grad-1:             #F7F9FC;
  --grad-2:             #EEF3FA;
  --panel-border-muted: rgba(20, 33, 61, 0.08);
  --panel-border:       rgba(20, 33, 61, 0.12);
  --panel-glow:         rgba(20, 33, 61, 0.06);
  --panel-inner-glow:   rgba(20, 33, 61, 0.02);
  --panel-shadow:       0 4px 28px rgba(20, 33, 61, 0.06), inset 0 1px 0 rgba(255,255,255,0.8);
}


/* =============================================================================
   2. HERO SECTION  (.banner-section-four)
   Two-column premium composition: left = text only, right = globe only.
   No floating workflow cards, no central badge, no connector elements.
   ============================================================================= */

body,
.page-wrapper,
.app-default {
  background-color: #F7F9FC !important;
}

/* Section: clean light background, no structural overrides that break Swiper.
   overflow: clip (not hidden) — allows the globe to bleed right while still
   preventing scroll bars. Falls back gracefully on older browsers. */
.banner-section-four {
  background: none !important;
  position: relative;
  overflow-x: clip;
}

/* ── SECTION ATMOSPHERE — clean SaaS hero background ────────────────────────
   Subtle, professional — supports the product panel without competing with it.
   No globe-specific glow. Just a gentle ambient depth field. */
.banner-section-four::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Soft right-side ambient — keeps the panel area airy and lit */
    radial-gradient(ellipse 70% 80% at 78% 45%, rgba(100,140,240,0.09) 0%, transparent 62%),
    /* Overall hero wash — very subtle blue depth */
    radial-gradient(ellipse 110% 90% at 50% 100%, rgba(214,228,255,0.08) 0%, transparent 70%),
    /* Top-left warmth — ties to header / text side */
    radial-gradient(ellipse 50% 40% at 12% 10%, rgba(232,240,255,0.14) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Globe halo removed — no decorative radial behind the globe */
.banner-section-four::after {
  content: none;
}

/* ── GLOBE REMOVED ───────────────────────────────────────────────────────────
   The globe visual direction was abandoned. The .bg-shape element is hidden.
   Right side of the hero is now the product panel (.hrloop-hero-panel). */
.banner-section-four .bg-shape {
  display: none !important;
}

/* Keep this rule below for reference but it no longer has any visible effect */
.banner-section-four .bg-shape-_unused {
  position: absolute !important;
  right: -3% !important;
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: min(52vw, 700px) !important;
  height: auto !important;
  z-index: 1 !important;
  display: block !important;

  border-radius: 50% !important;
  overflow: hidden !important;

  /* Highlight at top-left (32% 26%) → deep at bottom-right.
     Deeper blue-indigo palette, not near-black, for a luminous premium feel. */
  background: radial-gradient(circle at 32% 26%,
    #2C5299 0%,
    #183970 20%,
    #0D2250 44%,
    #070F2C 72%,
    #030818 100%) !important;

  /* Blue-tinted ambient shadow — not dark-gray, so it integrates with the atmosphere */
  box-shadow:
    0 0 60px  rgba(30, 80, 180, 0.35),
    0 0 160px rgba(20, 55, 140, 0.15),
    inset 0 0 50px rgba(0, 5, 20, 0.28) !important;
}

/* Atmosphere rim — restored ::before for a limb-lighting effect:
   a corona highlight at top-left + a soft atmospheric ring at the sphere edge.
   This prevents the globe from looking like a flat disc. */
.banner-section-four .bg-shape::before {
  display: block !important;
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    /* Top-left corona — simulates sun catching the sphere's upper hemisphere */
    radial-gradient(circle at 28% 22%,
      rgba(160, 210, 255, 0.24) 0%,
      rgba(120, 175, 255, 0.10) 28%,
      transparent 50%),
    /* Atmospheric limb ring — edge glow like a planet's atmosphere in sunlight */
    radial-gradient(circle at 50% 50%,
      transparent 56%,
      rgba(80, 145, 255, 0.16) 72%,
      rgba(80, 145, 255, 0.06) 86%,
      transparent 100%);
  z-index: 2;
  pointer-events: none;
}

/* Orange city-light glow nodes — secondary accent points, not dominant features.
   Reduced intensity so they read as warmth details, not competing focal points.
   z-index: 3 so they sit above the atmosphere rim (::before, z-index: 2). */
.banner-section-four .bg-shape::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 36% 34%, rgba(255,138,0,0.70) 0%, rgba(255,138,0,0.16) 1.6%, transparent 3.4%),
    radial-gradient(circle at 58% 48%, rgba(255,138,0,0.58) 0%, rgba(255,138,0,0.13) 1.4%, transparent 3.0%),
    radial-gradient(circle at 48% 63%, rgba(255,138,0,0.48) 0%, rgba(255,138,0,0.10) 1.5%, transparent 3.2%),
    radial-gradient(circle at 71% 39%, rgba(255,138,0,0.40) 0%, rgba(255,138,0,0.08) 1.1%, transparent 2.6%),
    radial-gradient(circle at 30% 54%, rgba(255,138,0,0.34) 0%, rgba(255,138,0,0.06) 1.0%, transparent 2.4%),
    radial-gradient(circle at 64% 68%, rgba(255,138,0,0.26) 0%, rgba(255,138,0,0.05) 0.9%, transparent 2.0%);
  z-index: 3;
  pointer-events: none;
}

/* Globe dotmap image — blue-tinted and subtle.
   hue-rotate(195deg) shifts cream/white dots toward soft blue-cyan:
   looks like city lights viewed from orbit rather than a flat dot pattern.
   Reduced opacity so the sphere gradient body shows through prominently. */
.banner-section-four .bg-shape img {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  filter: brightness(1.9) saturate(0.50) hue-rotate(195deg) contrast(0.82) !important;
  opacity: 0.36 !important;
}

/* ── HIDE WORKFLOW PANELS ────────────────────────────────────────────────────
   Hero is text + globe only. No floating cards, no badge, no connectors. */
.banner-section-four .hero-workflow-wrapper,
.banner-section-four .workflow-stage,
.banner-section-four .switch-wrapper,
.banner-section-four .connector-svg {
  display: none !important;
}

/* Content slider sits above globe */
.banner-section-four .banner-slider {
  position: relative;
  z-index: 2;
}

/* ── HERO INNER CONTAINER — HEIGHT & VERTICAL RHYTHM ────────────────────────
   Sizing rationale:
   - The Axino home-4 hero is full-bleed: the section starts at viewport top 0.
     The fixed header overlaps the section. The ONLY clearance mechanism is
     padding-top on this inner-container — there is no section-level offset.
   - padding-top: 100px = ~80–90px fixed header + ~10–20px breathing gap.
     Anything below 90px risks clipping behind the navbar on any viewport.
   - min-height: 74vh — compact but premium canvas.
     At 1080px: 74vh = 799px. Content area = 799 - 100 - 48 = 651px.
     Panel (~470px) centred in 651px = 90px above/below. Spacious, not empty.
   - padding-bottom: 48px — asymmetric intentionally; visual mass sits
     slightly above geometric centre, which reads as more balanced. */
.banner-section-four .banner-slide .inner-container {
  min-height: 74vh !important;
  display: flex !important;
  align-items: center !important;
  padding-top: 100px !important;
  padding-bottom: 48px !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* Neutralise only BOTTOM padding/margin from style-4.css.
   IMPORTANT: padding-top on the section/slider/slide is left untouched —
   the Axino template uses it to clear the fixed header. Zeroing it
   caused the panel to sit behind the navbar.
   Only the bottom stacking is removed here to fix the dead gap below the hero. */
.banner-section-four,
.banner-section-four .banner-slider,
.banner-section-four .banner-slide {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* ── TWO-COLUMN LAYOUT (desktop) ─────────────────────────────────────────── */
@media (min-width: 992px) {
  /* Text column: left 46%.
     align-self: flex-start + margin-top: 64px positions the headline above
     the right panel's geometric top (~90px from content area start at 1080px).
     Result: headline sits ~26px higher than the panel top — natural SaaS hero
     hierarchy where the left copy leads and the right panel has more visual mass.
     Previously align-self: center put the text 53px lower than the panel top. */
  .banner-section-four .banner-slide .content-box {
    max-width: 46% !important;
    flex: 0 0 46% !important;
    align-self: flex-start !important;
    margin-top: 64px !important;
  }

  /* Product panel column: right 54% — visible, centred, padded. Unchanged. */
  .banner-section-four .banner-slide .image-box {
    display: flex !important;
    flex: 0 0 54% !important;
    max-width: 54% !important;
    align-items: center !important;
    align-self: center !important;
    justify-content: center !important;
    padding-left: 48px !important;
  }
}

/* ── LEFT CONTENT BLOCK — COMPACT PREMIUM TEXT STACK ────────────────────────
   Root cause of the weak left side: .inner-box had no max-width, so the h1
   stretched to the full 46% column (~635px at 1440px). The paragraph at
   max-width:500px was narrower than the headline — creating a disconnected,
   two-width stack. The CTA had no deliberate spacing anchor.

   Fix strategy:
   1. Constrain .inner-box to 480px → headline and paragraph share one width
   2. Reduce headline max font-size so 2–3 line wrap fits elegantly in 480px
   3. Explicit margin-bottom on title and text → one coherent, rhythmic stack
   4. CTA row locked with deliberate gap, no extra margin-top needed
   ─────────────────────────────────────────────────────────────────────────── */

/* THE KEY FIX: cap the inner text stack within the 46% column.
   Without this, the h1 fills ~635px and refuses to wrap naturally.
   480px forces a clean 2–3 line headline break and aligns the paragraph
   flush beneath it — the whole stack reads as one intentional block. */
.banner-section-four .content-box .inner-box {
  max-width: 480px !important;
}

/* Headline: slight size reduction so the 2-line wrap sits elegantly in 480px.
   clamp(2.6rem, 3.6vw, 3.6rem) = ~57.6px at 1440px.
   Deliberate margin-bottom connects it tightly to the paragraph below. */
.banner-section-four .content-box .title,
.banner-section-four .content-box h1 {
  font-size: clamp(2.6rem, 3.6vw, 3.6rem) !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: #0F172A !important;
  margin-bottom: 18px !important;
}

/* Orange emphasis — unchanged */
.banner-section-four .content-box .title span,
.banner-section-four .content-box h1 span {
  color: #FF8A00 !important;
}

/* Paragraph: now inherits the 480px inner-box width (max-width: 100% !important).
   Previously max-width:500px had no !important and was wider than the inner-box —
   the paragraph and headline appeared to belong to different stacks.
   Now both share the same 480px column: one unified, readable block.
   margin-bottom: 32px anchors the CTA at a deliberate, readable distance. */
.banner-section-four .content-box .text {
  color: #475467 !important;
  font-size: 1.05rem !important;
  line-height: 1.72 !important;
  max-width: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 32px !important;
}

/* CTA row: paragraph provides the gap above; row is flex with a clean 24px gap. */
.banner-section-four .content-box .button-box {
  margin-top: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
}

/* Secondary ghost CTA — dark readable on light hero background */
.banner-section-four .banner-play-btn {
  color: #14213D !important;
}

.banner-section-four .banner-play-btn .icon {
  border-color: rgba(20, 33, 61, 0.25) !important;
  color: #14213D !important;
}

/* ── MOBILE: text full-width, panel stacks below ────────────────────────── */
@media (max-width: 991px) {
  .banner-section-four .banner-slide .inner-container {
    min-height: auto !important;
    padding-top: 72px !important;
    padding-bottom: 48px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .banner-section-four .banner-slide .content-box {
    max-width: 100% !important;
    flex: unset !important;
    align-self: auto !important;
  }

  /* Panel: centred below text */
  .banner-section-four .banner-slide .image-box {
    display: flex !important;
    align-self: auto !important;
    justify-content: center !important;
    padding-left: 0 !important;
    padding-top: 36px !important;
  }
}


/* =============================================================================
   2b. HERO PRODUCT PANEL  (.hrloop-hero-panel)
   Premium SaaS-style product UI panel — the visual anchor of the hero right side.
   One clean card. No clutter. Content represents the HR/AI matching product.
   ============================================================================= */

/* Float animation — very gentle vertical oscillation */
@keyframes heroFloat {
  0%, 100% { transform: translateY(0px);    }
  50%       { transform: translateY(-10px);  }
}

/* Panel wrapper — centres the card within the flex image-box */
.banner-section-four .hrloop-hero-panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: #FFFFFF;
  border: 1px solid rgba(20, 33, 61, 0.08);
  border-radius: 24px;
  padding: 28px 28px 24px;
  box-shadow:
    0 2px 8px   rgba(20, 33, 61, 0.04),
    0 12px 40px  rgba(20, 33, 61, 0.09),
    0 32px 80px  rgba(20, 33, 61, 0.06);
  animation: heroFloat 5.5s ease-in-out infinite;
  box-sizing: border-box;
  z-index: 2;
}

/* Ambient glow behind the panel */
.banner-section-four .hrloop-hero-panel::before {
  content: '';
  position: absolute;
  inset: -40px;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(100, 140, 255, 0.11) 0%,
    rgba(255, 138, 0, 0.04) 45%,
    transparent 72%);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}

/* Top status bar */
.banner-section-four .hhp-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.banner-section-four .hhp-topbar-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748B;
}

.banner-section-four .hhp-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.banner-section-four .hhp-topbar-meta {
  font-size: 11px;
  font-weight: 600;
  color: #FF8A00;
  background: rgba(255, 138, 0, 0.08);
  border: 1px solid rgba(255, 138, 0, 0.18);
  border-radius: 999px;
  padding: 2px 10px;
}

/* Candidate row */
.banner-section-four .hhp-candidate-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(20, 33, 61, 0.06);
}

.banner-section-four .hhp-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF8A00, #FF6000);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.02em;
}

.banner-section-four .hhp-candidate-info {
  flex: 1;
  min-width: 0;
}

.banner-section-four .hhp-name {
  font-size: 15px;
  font-weight: 700;
  color: #0F172A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.banner-section-four .hhp-role {
  font-size: 12px;
  color: #64748B;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.banner-section-four .hhp-match-badge {
  flex-shrink: 0;
  text-align: center;
  background: linear-gradient(145deg, rgba(255,138,0,0.10), rgba(255,138,0,0.05));
  border: 1px solid rgba(255, 138, 0, 0.22);
  border-radius: 14px;
  padding: 6px 14px;
}

.banner-section-four .hhp-match-pct {
  font-size: 20px;
  font-weight: 800;
  color: #FF8A00;
  line-height: 1;
  display: block;
}

.banner-section-four .hhp-match-label {
  font-size: 10px;
  font-weight: 500;
  color: #94A3B8;
  letter-spacing: 0.04em;
  margin-top: 1px;
  display: block;
}

/* Sections (skills, culture fit) */
.banner-section-four .hhp-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(20, 33, 61, 0.06);
}

.banner-section-four .hhp-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #94A3B8;
  margin-bottom: 10px;
}

/* Skills tags */
.banner-section-four .hhp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.banner-section-four .hhp-tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  background: #F4F7FB;
  border: 1px solid rgba(20, 33, 61, 0.09);
  color: #475467;
  white-space: nowrap;
}

.banner-section-four .hhp-tag--active {
  background: rgba(255, 138, 0, 0.07);
  border-color: rgba(255, 138, 0, 0.22);
  color: #B86000;
  font-weight: 600;
}

/* Culture fit bars */
.banner-section-four .hhp-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
}

.banner-section-four .hhp-bar-row:last-child {
  margin-bottom: 0;
}

.banner-section-four .hhp-bar-name {
  font-size: 12px;
  color: #64748B;
  min-width: 120px;
  white-space: nowrap;
}

.banner-section-four .hhp-bar {
  flex: 1;
  height: 5px;
  background: #EEF3FA;
  border-radius: 999px;
  overflow: hidden;
}

.banner-section-four .hhp-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #FF8A00, #FF6A00);
  transition: width 0.6s ease;
}

.banner-section-four .hhp-bar-pct {
  font-size: 12px;
  font-weight: 700;
  color: #0F172A;
  min-width: 28px;
  text-align: right;
}

/* AI insight block */
.banner-section-four .hhp-insight {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: linear-gradient(145deg, #F7F9FC, #EEF3FA);
  border: 1px solid rgba(20, 33, 61, 0.07);
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 16px;
}

.banner-section-four .hhp-insight-icon {
  color: #FF8A00;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
  line-height: 1;
}

.banner-section-four .hhp-insight-text {
  margin: 0;
  font-size: 12.5px;
  color: #475467;
  line-height: 1.58;
}

/* Action buttons */
.banner-section-four .hhp-actions {
  display: flex;
  gap: 9px;
  margin-top: 16px;
}

.banner-section-four .hhp-btn-primary {
  flex: 1;
  height: 38px;
  background: linear-gradient(180deg, #FF9200, #FF6A00);
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255, 106, 0, 0.28);
  letter-spacing: 0.01em;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.banner-section-four .hhp-btn-primary:hover {
  box-shadow: 0 6px 18px rgba(255, 106, 0, 0.36);
  transform: translateY(-1px);
}

.banner-section-four .hhp-btn-secondary {
  height: 38px;
  padding: 0 14px;
  background: transparent;
  color: #14213D;
  border: 1px solid rgba(20, 33, 61, 0.18);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.banner-section-four .hhp-btn-secondary:hover {
  background: rgba(20, 33, 61, 0.04);
  border-color: rgba(20, 33, 61, 0.28);
}

/* Mobile: panel full-width, max constrained */
@media (max-width: 991px) {
  .banner-section-four .hrloop-hero-panel {
    max-width: 420px;
    width: 100%;
  }
}


/* =============================================================================
   2d. PROCESS / WORKFLOW SECTION  (.hrloop-process-section)
   The AI recruitment flow-chart — shown as a standalone section below the hero.
   Light-theme cards: white surface, dark text, orange accents.
   ============================================================================= */
.hrloop-process-section {
  background: linear-gradient(180deg, #F7F9FC 0%, #EEF3FA 100%);
  padding: 80px 0 100px;
  overflow: hidden;

  /* Scope dark-navy panel variables to light values for this section */
  --surface:            #FFFFFF;
  --card-bg:            #F4F7FB;
  --grad-1:             #FFFFFF;
  --grad-2:             #EEF3FA;
  --panel-border-muted: rgba(20, 33, 61, 0.07);
  --panel-border:       rgba(20, 33, 61, 0.12);
  --text:               #0F172A;
  --muted:              #64748B;
  --orange:             #FF8A00;
  --orange-2:           #FF9E20;
  --glow:               rgba(255, 138, 0, 0.08);
  --inner-glow:         rgba(255, 255, 255, 0.0);
  --radius:             24px;
}

.hrloop-process-section .process-title-wrap {
  text-align: center;
  margin-bottom: 60px;
}

.hrloop-process-section .process-title-wrap .sub-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FF8A00;
  margin-bottom: 16px;
}

.hrloop-process-section .process-title-wrap h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.hrloop-process-section .process-title-wrap .process-sub {
  font-size: 1.05rem;
  color: #475467;
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.65;
}

/* Light-theme panel cards */
.hrloop-process-section .panel {
  background: linear-gradient(145deg, #FFFFFF 0%, #F8FAFB 45%, #EEF3FA 100%) !important;
  border: 1px solid rgba(20, 33, 61, 0.10) !important;
  box-shadow:
    0 2px 8px  rgba(20, 33, 61, 0.05),
    0 10px 30px rgba(20, 33, 61, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

.hrloop-process-section .panel::before {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.70) 0%,
    rgba(255, 255, 255, 0.20) 30%,
    transparent 55%) !important;
}

.hrloop-process-section .panel::after {
  border: 1px solid rgba(20, 33, 61, 0.06) !important;
}

.hrloop-process-section .panel .card-title-row {
  color: #0F172A !important;
}

.hrloop-process-section .panel p,
.hrloop-process-section .panel .header-line {
  color: #475467 !important;
}

.hrloop-process-section .panel strong {
  color: #0F172A !important;
}

/* Light chips */
.hrloop-process-section .chip {
  background: linear-gradient(145deg, #F4F7FB, #EEF3FA) !important;
  border: 1px solid rgba(20, 33, 61, 0.10) !important;
  color: #14213D !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* Central badge — keep orange brand identity */
.hrloop-process-section .switch {
  background: linear-gradient(145deg, #14213D, #0B1526) !important;
  border: 2px solid rgba(255, 138, 0, 0.35) !important;
  box-shadow:
    0 4px 20px rgba(20, 33, 61, 0.20),
    0 0 0 6px rgba(255, 138, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

/* ── CONNECTOR TRACK LINES ───────────────────────────────────────────────── */
/* Dotted base tracks — slightly deeper blue so they read on the light bg */
.hrloop-process-section .flow-line {
  stroke: rgba(30, 70, 180, 0.14) !important;
}

/* ── CONNECTOR FLOW ANIMATION ────────────────────────────────────────────────
   Problem: the global inline <style> sets stroke:url(#lavaStroke) and
   mask:url(#edgeFadeMask) on ALL .flow-lava elements. Those IDs live in the
   hero's hidden SVG (.hero-workflow-wrapper display:none). Chrome/Safari do
   not resolve url() references into display:none subtrees — so the stroke
   renders as nothing and the animation is invisible.

   Fix: scope these properties to the process section's own SVG defs (-p IDs),
   which are in the rendered DOM. @keyframes lavaFlow is duplicated here as a
   stable fallback (harmless if already defined in the inline style).
   ─────────────────────────────────────────────────────────────────────────── */

@keyframes lavaFlow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -1010; }
}

/* Traveling signal on the connector lines.
   IMPORTANT: stroke-dashoffset must NOT be set with !important here.
   CSS animations cannot override !important declarations — a static
   stroke-dashoffset:0 !important would freeze the dash at frame 0. */
.hrloop-process-section .flow-lava {
  fill:              none                   !important;
  stroke:            url(#lavaStroke-p)     !important; /* process section's own defs */
  stroke-width:      5px                    !important;
  stroke-linecap:    round                  !important;
  stroke-dasharray:  110 900                !important; /* dash 110px · gap 900px */
  animation:         lavaFlow 6s linear infinite !important;
  /* Lighter glow tuned for the light-bg section */
  filter: drop-shadow(0 0 8px  rgba(255, 106, 0, 0.32))
          drop-shadow(0 0 16px rgba(255, 106, 0, 0.16)) !important;
  mask:   url(#edgeFadeMask-p)              !important; /* process section's own mask */
}

/* Junction nodes — orange fill + soft glow readable on light bg */
.hrloop-process-section .diagram .node {
  fill:   #FF8A00                                      !important;
  filter: drop-shadow(0 0 8px rgba(255, 106, 0, 0.50)) !important;
}

/* Section stage wrapper */
.hrloop-process-section .hero-workflow-wrapper {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  overflow: hidden;
}

.hrloop-process-section .stage {
  background: transparent !important;
}


/* =============================================================================
   3. MAIN HEADER  (.header-style-one)
   Light hero means readable dark nav links.
   Subtle border separation. Sticky header remains dark navy.
   ============================================================================= */
.header-style-one .header-lower .inner-container {
  border-bottom-color: rgba(20, 33, 61, 0.07);
}

/* Main nav: dark readable links on light background */
.header-style-one .main-menu .navigation > li > a {
  color: #14213D !important;
}

.header-style-one .main-menu .navigation > li:hover > a,
.header-style-one .main-menu .navigation > li.current > a {
  color: #FF8A00 !important;
}

.sticky-header {
  background: #14213D !important;
}

.sticky-header .main-menu .navigation > li > a {
  color: rgba(255, 255, 255, 0.8) !important;
}

.sticky-header .main-menu .navigation > li.current > a,
.sticky-header .main-menu .navigation > li:hover > a {
  color: #FF8A00 !important;
}


/* =============================================================================
   4. PLATFORM SECTION  (.features-section-two-h4)
   The outer rounded card becomes a soft off-white.
   Feature list column becomes pure white with clear card separation.
   ============================================================================= */
.features-section-two-h4 .outer-box {
  background: linear-gradient(150deg, #EEF3FA 0%, #F2F6FB 100%) !important;
  border-color: rgba(20, 33, 61, 0.07) !important;
}

/* Left column feature list card */
.features-section-two-h4 .content-colmun .inner-colmun {
  background-color: #FFFFFF !important;
  border-color: rgba(20, 33, 61, 0.08) !important;
  box-shadow: 0 4px 28px rgba(20, 33, 61, 0.06);
}

/* Feature list item dividers */
.features-section-two-h4 .features-block-h4 {
  border-bottom-color: rgba(20, 33, 61, 0.07) !important;
}

/* Feature block typography */
.features-section-two-h4 .features-block-h4 .content .title {
  color: #0F172A !important;
}

.features-section-two-h4 .features-block-h4 .content .text {
  color: #475467 !important;
}

/* Feature arrow icon — idle state */
.features-section-two-h4 .features-block-h4 .arrow-icon {
  background-color: rgba(255, 138, 0, 0.1) !important;
  color: #FF8A00 !important;
}

/* Feature arrow icon — active / hover state */
.features-section-two-h4 .features-block-h4.active .arrow-icon,
.features-section-two-h4 .features-block-h4:hover .arrow-icon {
  background-color: #FF8A00 !important;
  color: #FFFFFF !important;
}

/* Feature icon color */
.features-section-two-h4 .features-block-h4 .icon i {
  color: #FF8A00 !important;
}


/* =============================================================================
   5. AI DECISION SYSTEM SECTION  (.feature-section-layout4)
   Light page background inherited from body. Feature cards become white.
   ============================================================================= */
.feature-section-layout4 {
  background-color: #F7F9FC;
}

/* Individual feature cards */
.feature-block-l4 .feature-block-post-layout4 .inner {
  background: #FFFFFF !important;
  border-color: rgba(20, 33, 61, 0.08) !important;
  box-shadow: 0 4px 24px rgba(20, 33, 61, 0.06);
}

.feature-block-post-layout4 .info-box .icon i {
  color: #FF8A00 !important;
}

.feature-block-post-layout4 .counter-title a,
.feature-block-post-layout4 h4 {
  color: #0F172A !important;
}

.feature-block-post-layout4 .text {
  color: #475467 !important;
}


/* =============================================================================
   6. PRICING SECTION  (.pricing-section-layout4)
   Alternate alt background. Outer wrapper = white card.
   Inner "featured" wrapper = dark navy (premium contrast).
   ============================================================================= */
.pricing-section-layout4 {
  background-color: #EEF3FA;
}

/* Tab toggle */
.pricing-section-layout4 .nav-link {
  color: #475467 !important;
}

.pricing-section-layout4 .nav-link::before {
  background: linear-gradient(135deg, #F0F4FB 0%, #EEF3FA 100%) !important;
  border-color: rgba(20, 33, 61, 0.15) !important;
}

.pricing-section-layout4 .nav-link.active {
  color: #0F172A !important;
}

/* Outer pricing wrapper (light outer shell) */
.pricing-wrapper-layout4 {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(20, 33, 61, 0.08);
  box-shadow: 0 8px 40px rgba(20, 33, 61, 0.08);
}

/* Inner highlighted wrapper (right-side featured plans) */
.pricing-wrapper-layout4 .pricing-wrapper-child {
  background: linear-gradient(145deg, #14213D 0%, #1E3160 60%, #223A5E 100%) !important;
  border-radius: 16px;
}

/* Left (outer) pricing item typography */
.pricing-item-l4 > .pricing-header .title,
.pricing-item-l4 > .pricing-header h4.title {
  color: #0F172A !important;
}

.pricing-item-l4 .subtitle {
  color: #475467 !important;
}

.pricing-item-l4 .price {
  color: #0F172A !important;
}

.pricing-item-l4 .price .month {
  color: #475467 !important;
}

.pricing-item-l4 .features ul li span {
  color: #475467 !important;
}

.pricing-item-l4 .features ul li.disabled span {
  color: #B0B8C9 !important;
}

/* Featured plans (inside dark wrapper) keep white text */
.pricing-wrapper-child .pricing-item-l4 .pricing-header .title,
.pricing-wrapper-child .pricing-item-l4 h4.title {
  color: #FFFFFF !important;
}

.pricing-wrapper-child .pricing-item-l4 .subtitle {
  color: rgba(255, 255, 255, 0.60) !important;
}

.pricing-wrapper-child .pricing-item-l4 .price {
  color: #FF8A00 !important;
}

.pricing-wrapper-child .pricing-item-l4 .price .month {
  color: rgba(255, 255, 255, 0.55) !important;
}

.pricing-wrapper-child .pricing-item-l4 .features ul li span {
  color: rgba(255, 255, 255, 0.78) !important;
}

.pricing-wrapper-child .pricing-item-l4 .features ul li.disabled span {
  color: rgba(255, 255, 255, 0.35) !important;
}

/* Pricing divider line between items */
.pricing-wrapper-layout4 .pricing-item-l4 + .pricing-item-l4,
.pricing-wrapper-child .pricing-item-l4 + .pricing-item-l4 {
  border-left-color: rgba(255, 255, 255, 0.08) !important;
}


/* =============================================================================
   7. BENEFITS SECTION  (.benefits-section-layout4)
   Light background. All benefit cards become white with subtle shadow.
   ============================================================================= */
.benefits-section-layout4 {
  background-color: #F7F9FC;
}

/* Main tall benefit card (left col) */
.benefits-block-layout4 .inner-block {
  background: #FFFFFF !important;
  border-color: rgba(20, 33, 61, 0.08) !important;
  box-shadow: 0 4px 28px rgba(20, 33, 61, 0.06);
}

/* Smaller benefit cards (right 2-col grid) */
.benefits-block-two-l4 .inner-block {
  background: #FFFFFF !important;
  border-color: rgba(20, 33, 61, 0.08) !important;
  box-shadow: 0 4px 28px rgba(20, 33, 61, 0.06);
}

/* Benefit card typography */
.benefits-block-layout4 .inner-block .title,
.benefits-block-layout4 .inner-block h4,
.benefits-block-two-l4 .inner-block .title,
.benefits-block-two-l4 .inner-block h4 {
  color: #0F172A !important;
}

.benefits-block-layout4 .inner-block .text,
.benefits-block-two-l4 .inner-block .text {
  color: #475467 !important;
}

/* Large decorative numbers (02, 03) — very faint navy */
.benefits-block-two-l4 .inner-block > h1 {
  color: rgba(20, 33, 61, 0.06) !important;
  -webkit-text-fill-color: rgba(20, 33, 61, 0.06) !important;
}

/* Bottom info/CTA strip inside benefits */
.benefits-section-layout4 .bottom-box .inner-box {
  background: linear-gradient(135deg, #14213D 0%, #1E3160 60%, #223A5E 100%) !important;
  border-color: rgba(255, 138, 0, 0.25) !important;
}

.benefits-section-layout4 .bottom-box .inner-box .title,
.benefits-section-layout4 .bottom-box .inner-box h4 {
  color: #FFFFFF !important;
}

.benefits-section-layout4 .bottom-box .inner-box .text {
  color: rgba(255, 255, 255, 0.65) !important;
}


/* =============================================================================
   8. CTA / CONTACT SECTION  (.rating-section-layout4)
   Strong dark navy CTA block with orange accent border.
   ============================================================================= */
.rating-section-layout4 .outer-box {
  background: linear-gradient(135deg, #0E1E38 0%, #14213D 45%, #1B2E52 100%) !important;
  border-color: rgba(255, 138, 0, 0.30) !important;
  box-shadow:
    0 24px 60px rgba(14, 30, 56, 0.35),
    0 0 0 1px rgba(255, 138, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.rating-section-layout4 .rating-title {
  color: #FFFFFF !important;
}

.rating-cta-text {
  color: rgba(255, 255, 255, 0.70) !important;
}

/* Decorative CTA cubes stay subtle orange */
.cta-cube {
  background: rgba(255, 138, 0, 0.18) !important;
  border-color: rgba(255, 138, 0, 0.35) !important;
}

.cta-particle {
  background: rgba(255, 138, 0, 0.45) !important;
}


/* =============================================================================
   9. FAQ SECTION  (.faqs-section-layout4)
   Outer box becomes a soft off-white. Left contact card stays dark navy.
   Accordion items become white cards.
   ============================================================================= */
.faqs-section-layout4 .outer-box {
  background: linear-gradient(150deg, #EEF3FA 0%, #F4F7FB 100%) !important;
  border-color: rgba(20, 33, 61, 0.07) !important;
}

/* Left contact card (darker, premium feel) */
.faqs-block-layout4 .inner-block {
  background: linear-gradient(145deg, #14213D 0%, #1B2E52 60%, #223A5E 100%) !important;
  border-color: rgba(255, 138, 0, 0.25) !important;
  box-shadow: 0 8px 32px rgba(14, 30, 56, 0.18);
}

.faqs-block-layout4 .inner-block .title {
  color: #FFFFFF !important;
}

.faqs-block-layout4 .inner-block .text {
  color: rgba(255, 255, 255, 0.68) !important;
}

/* Accordion items — white cards */
.accordion-box-layout4 .block {
  background-color: #FFFFFF !important;
  border-color: rgba(20, 33, 61, 0.08) !important;
  box-shadow: 0 2px 12px rgba(20, 33, 61, 0.04);
}

.accordion-box-layout4 .accordion .acc-btn {
  color: #0F172A !important;
}

.accordion-box-layout4 .accordion .acc-btn.active {
  color: #FF8A00 !important;
}

.accordion-box-layout4 .accordion .acc-btn .icon {
  color: #FF8A00 !important;
}

.accordion-box-layout4 .acc-content .text {
  color: #475467 !important;
}


/* =============================================================================
   10. SECTION TITLES  (.sec-title.home4)
   Sub-title badge: orange-tinted glass pill.
   Heading h2: dark navy.
   Body text: medium grey.
   ============================================================================= */

/* Sub-title badge */
.sec-title.home4 .sub-title {
  background: linear-gradient(135deg, rgba(255, 138, 0, 0.08) 0%, rgba(255, 138, 0, 0.04) 100%) !important;
  border-color: rgba(255, 138, 0, 0.30) !important;
  color: #FF8A00 !important;
}

.sec-title.home4 .sub-title .icon-img {
  /* Keep icon color consistent */
  filter: none !important;
}

/* Section h2 titles */
.sec-title .title,
.sec-title h2 {
  color: #0F172A !important;
}

.sec-title h2 span {
  color: #FF8A00 !important;
}

/* Section intro text */
.sec-title .text {
  color: #475467 !important;
}


/* =============================================================================
   11. PROCESS SECTION CARDS (used if visible)
   Hard-coded dark backgrounds replaced with white.
   ============================================================================= */

/* Layout-4 process card */
.process-box-layout4 .inner-box {
  background: #FFFFFF !important;
  border-color: rgba(20, 33, 61, 0.08) !important;
  box-shadow: 0 4px 24px rgba(20, 33, 61, 0.06);
}

.process-box-layout4 .inner-box .step {
  background: #FFFFFF !important;
  border-color: rgba(20, 33, 61, 0.10) !important;
  color: #0F172A !important;
}

.process-box-layout4 .inner-box .title {
  color: #0F172A !important;
}

.process-box-layout4 .inner-box .text {
  color: #475467 !important;
}

/* Process block two (vertical timeline) */
.process-block-two .inner-block .content {
  background-color: #FFFFFF !important;
  border-color: rgba(20, 33, 61, 0.08) !important;
  box-shadow: 0 4px 20px rgba(20, 33, 61, 0.05);
}

.process-block-two .inner-block .content:before {
  background-color: #EEF3FA !important;
}

.process-block-two .inner-block .content .title {
  color: #0F172A !important;
}

.process-block-two .inner-block .content .text {
  color: #475467 !important;
}

.process-block-two .inner-block .step {
  background-color: #EEF3FA !important;
  color: #FF8A00 !important;
}

.process-block-two .inner-block .step span::before {
  background-color: #FF8A00 !important;
  border-color: #EEF3FA !important;
}


/* =============================================================================
   12. FOOTER  (.footer-style-four)
   Two-tier matching reference:
   - Upper widget area: light (#F4F7FB), dark text — clean and premium
   - Bottom band (.footer-bottom4): deep dark navy, white/muted text
   ============================================================================= */

/* Upper footer widget area: light surface like the reference */
.main-footer,
.footer-style-four {
  background-color: #F4F7FB !important;
}

/* Footer widget headings: dark navy on light background */
.footer-style-four .widget-head .title,
.main-footer .widget-title {
  color: #0F172A !important;
}

/* Footer description text */
.footer-style-four .footer-content p,
.main-footer .widget-content .text {
  color: #64748B !important;
}

/* Footer navigation links */
.user-links li a {
  color: #64748B !important;
}

.user-links li a:hover {
  color: #FF8A00 !important;
}

/* Dark bottom band: matches reference's dark footer strip */
.footer-bottom4 {
  background-color: #0B1526 !important;
  border-top: none !important;
}

/* Bottom band text: white/muted */
.footer-bottom4 p,
.footer-bottom4 .policy-link li,
.footer-bottom4 .policy-link li a {
  color: rgba(255, 255, 255, 0.55) !important;
}

.footer-bottom4 .policy-link li a:hover {
  color: #FF8A00 !important;
}

/* Social icons: on light background — dark bordered circles */
.social-icon-list4 li a {
  background-color: rgba(20, 33, 61, 0.06) !important;
  border: 1px solid rgba(20, 33, 61, 0.14) !important;
  color: #223A5E !important;
}

.social-icon-list4 li a:hover {
  background-color: #FF8A00 !important;
  border-color: #FF8A00 !important;
  color: #FFFFFF !important;
}


/* =============================================================================
   13. BUTTONS — Keep strong and modern
   ============================================================================= */

/* Primary theme button */
.theme-btn.btn-style-five,
a.btn-style-five.theme-btn {
  background-color: #FF8A00 !important;
  border-color: #FF8A00 !important;
  color: #FFFFFF !important;
}

a.btn-style-five.theme-btn:hover {
  background-color: #E07A00 !important;
  border-color: #E07A00 !important;
}

/* Header CTA button */
.header-btn-main.theme-btn {
  background-color: #FF8A00 !important;
  border-color: #FF8A00 !important;
  color: #FFFFFF !important;
}

.header-btn-main.theme-btn:hover {
  background-color: #E07A00 !important;
}

/* Pricing buttons */
.btn-pricing {
  color: #FF8A00 !important;
  border-color: rgba(255, 138, 0, 0.35) !important;
}

.btn-pricing:hover {
  background-color: #FF8A00 !important;
  color: #FFFFFF !important;
  border-color: #FF8A00 !important;
}


/* =============================================================================
   14. GENERAL TEXT / TYPOGRAPHY CLEANUP
   Make sure no stray white text appears on the light background.
   ============================================================================= */

/* Any section paragraph text that still uses white */
.sec-title .text,
.content .text {
  color: #475467;
}

/* Heading fallback — catches any missed headings */
.sec-title h2,
.sec-title h3,
.sec-title h4 {
  color: #0F172A;
}

/* Mobile menu backdrop stays dark */
.mobile-menu .menu-backdrop {
  background: rgba(14, 30, 56, 0.85) !important;
}

/* Back-to-top button */
.back-to-top-btn {
  background-color: #FF8A00 !important;
  border-color: #FF8A00 !important;
  color: #FFFFFF !important;
}


/* =============================================================================
   15. SCROLLBAR — Match the light theme
   ============================================================================= */
::-webkit-scrollbar-track {
  background: #EEF3FA;
}

::-webkit-scrollbar-thumb {
  background: rgba(20, 33, 61, 0.18);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 138, 0, 0.55);
}