/* ═══════════════════════════════════════════════════════════════════════
   BOH section spacing system — single source of truth for vertical rhythm.

   Compact landing-page spacing on the 8pt grid — the tight end of the
   industry range, keeping clear section breaks without dead air:

     desktop  (> 991px)   48px per section side → 96px between sections
     tablet   (≤ 991px)   40px                  → 80px
     mobile   (≤ 767px)   32px                  → 64px

   This file is loaded LAST in TEMPLATE_STYLESHEETS, so the rules below win
   over style.css / responsive.css at equal specificity without !important.
   (Sections whose padding is defined in component <style> blocks — .wwa,
   .oae-*, .aff-*, .pjx-*, .js-* — use var(--section-space) directly at the
   source instead, since those rules sit later in document order.)

   Deliberately NOT normalised:
     • heroes / banners (.banner-section, .page-title, .jobseekers-hero,
       .mission-hero) — full-bleed blocks with their own rhythm
     • .clients-section — the logo marquee strip, not a content section
     • .sec-pad / .sec-pad-2 — explicit template utility overrides
     • compact bands and asymmetric blocks whose padding is structural
       (.advice-section, .placejob-section, .team-intro, .values-section,
       .aff-logos, .js-process-compact, CTA strips)
     • .main-footer
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --section-space: 48px;
}

@media (max-width: 991px) {
  :root {
    --section-space: 40px;
  }
}

@media (max-width: 767px) {
  :root {
    --section-space: 32px;
  }
}

/* Standard content sections — template classes that previously carried
   jittery per-section values (95/120, 95/130, 100/110, ...) now share the
   one rhythm above. padding-block only touches top/bottom, so any
   horizontal padding a section defines is preserved. */
.welcome-section,
.about-section,
.service-section,
.recruitment-technology,
.industries-section,
.process-section,
.team-section,
.news-section,
.testimonial-section,
.awards-section,
.chooseus-section,
.pricing-section,
.faq-section,
.findjob-section,
.contact-section,
.contactinfo-section,
.project-section,
.service-details,
.job-details,
.locations-section,
.advantages-section,
.hiring-strategies,
.about-style-two,
.about-style-three,
.team-style-two,
.team-style-three,
.team-style-four,
.testimonial-style-two,
.testimonial-style-three,
.growth-style-two,
.sidebar-page-container,
.error-section,
.home-ceo-quote,
.home-cta,
/* `.about-page` variant carried its own 80px bottom padding in style.css
   (two-class specificity beat the single-class rule above); list it
   explicitly so /about and /our-values land on the same 96px rhythm.
   /affiliations' component <style> still wins there (later in document
   order) and keeps its deliberate flush-bottom override. */
.about-style-two.about-page,
/* Logo/CTA strips on /faq, /contact and /testimonials used template
   defaults (120/120, 140/110) — pull them onto the same rhythm. */
.clients-style-two,
.clients-style-three,
/* Technology band on /service (and FeatureSection on the landing page)
   carried only horizontal padding — give it the same vertical rhythm. */
.feature-section {
  padding-block: var(--section-space);
}

/* Trailing block margins inside sections are dead space — the section's
   own bottom padding already separates it from the next band. */
.service-details-content .content-one:last-child {
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   CTA arrow + navy↔orange hover (site-wide)

   Every button-style CTA carries the hero link's leading
   flaticon-right-arrow glyph (\f109), and hovering swaps the brand pair:
   navy #0C1E33 ↔ orange #E06A42. theme-btn-one/two already wipe to the
   opposite colour on hover (style.css :after + color.css), so the rules
   below only add the arrow to those classes and extend the same
   arrow + colour-toggle treatment to the template's other CTA classes.

   Component-scoped <style> blocks (.home-cta, .oae-*, .aff-*, .fp-*,
   .whychoose-cta, .spr-*, .jh-*, .jo-*, .ti-*, .wwa-*) sit later in
   document order than this file, so those buttons get the arrow/hover at
   the source instead — keep the two in sync.

   The navbar CTA is deliberately excluded (no arrow in the header).
   ═══════════════════════════════════════════════════════════════════════ */

.theme-btn-one::before,
.theme-btn-two::before,
.clients-style-two .title-inner .btn-box a::before,
.banner-carousel .btn-box a::before,
.hiring-section .inner-box a::before,
.pricing-block-one .inner-box a::before,
.pricing-block-two .inner-box a::before,
.single-job-post .job-inner .apply-btn a::before,
.sidebar-page-container .more-btn a::before,
.protfolio-page .more-btn a::before {
  content: "\f109";
  font-family: "Flaticon";
  font-style: normal;
  font-weight: 400;
  display: inline-block;
  margin-right: 10px;
  font-size: 1.35em;
  vertical-align: -0.1em;
}

/* Navbar CTA — excluded by design (header-lower + sticky-header both live
   inside .main-header). */
.main-header .theme-btn-one::before,
.main-header .theme-btn-two::before {
  content: none;
  margin-right: 0;
}

/* Navy↔orange hover for the template CTA classes. Navy text on the
   #E06A42 orange keeps WCAG AA (~5.3:1); white on orange is only ~3.3:1. */
.clients-style-two .title-inner .btn-box a.btn-one:hover {
  background: #0C1E33;
  color: #fff;
}

.clients-style-two .title-inner .btn-box a.btn-two:hover {
  background: #E06A42;
  color: #0C1E33;
}

.single-job-post .job-inner .apply-btn a:hover {
  background: #0C1E33;
  border-color: #0C1E33;
  color: #fff;
}

.sidebar-page-container .more-btn a:hover,
.protfolio-page .more-btn a:hover {
  background: #0C1E33;
  border-color: #0C1E33;
  color: #fff;
}

/* Banner carousel ghost button — hover wipes in navy instead of white. */
.banner-carousel .btn-box .btn-two:after {
  background: #0C1E33;
}
.banner-carousel .btn-box .btn-two:hover {
  color: #fff;
}

/* Pricing "Get Started" — navy resting swaps to orange on hover. */
.pricing-block-one .inner-box a:hover,
.pricing-block-two .inner-box a:hover {
  background: #E06A42;
  color: #0C1E33;
}

/* ═══════════════════════════════════════════════════════════════════════
   CTA treatment (site-wide) — plain arrow links, no rectangular boxes.

   Every CTA anchor renders like the homepage hero links: no fill, no
   border — just text + leading arrow. The first/primary CTA's arrow
   takes the brand navy (#0C1E33) — or white on the dark navy bands and
   image panels where navy would vanish; a second/secondary CTA's arrow
   takes the brand orange (#E06A42). Link text is white on dark bands
   and navy on light sections; hover turns the label orange, matching
   the template's .link a:hover convention.

   Deliberately NOT unboxed: the navbar "Apply Now" button, icon-only
   circle links (.link a rounds on cards/overlays), tabs, pagination.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · Strip the button chrome ────────────────────────────────────── */
.theme-btn-one,
.theme-btn-two,
.cta-buttons a,
.oae-cta-buttons a,
.aff-cta-buttons a,
.aff .aff-cta-link,
.fp-btn,
.whychoose-cta__btn,
.svc-process .spr-btn,
.jobseekers-hero .jh-btn,
.js-opps .jo-btn,
.pricing-block-one .inner-box a,
.pricing-block-two .inner-box a,
.single-job-post .job-inner .apply-btn a,
.job-sidebar .apply-btn a,
.sidebar-page-container .more-btn a,
.protfolio-page .more-btn a,
.hiring-section .inner-box a,
.overlay-content a,
.clients-style-two .title-inner .btn-box a {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Kill the hover-wipe pseudo fills (::before stays — it carries the
   injected arrow glyph). */
.theme-btn-one::after,
.theme-btn-two::after,
.banner-carousel .btn-box a::after,
.hiring-section .inner-box a::after {
  content: none !important;
}

/* ── 2 · Link text colour ───────────────────────────────────────────── */
/* Light sections → navy. */
.theme-btn-one,
.theme-btn-two,
.fp-btn,
.svc-process .spr-btn,
.js-opps .jo-btn,
.pricing-block-one .inner-box a,
.pricing-block-two .inner-box a,
.single-job-post .job-inner .apply-btn a,
.job-sidebar .apply-btn a,
.sidebar-page-container .more-btn a,
.protfolio-page .more-btn a,
.clients-style-two .title-inner .btn-box a,
.aff-community .aff-cta-link {
  color: #0C1E33 !important;
}

/* Dark bands / image heroes → white. */
.cta-buttons a,
.oae-cta-buttons a,
.aff-cta-buttons a,
.aff-workforce .aff-cta-link,
.whychoose-cta__btn,
.jobseekers-hero .jh-btn,
/* growth-style-two's side column sits on the dark .image-column panel
   (template styles its h2 white) — /jobseeker, /mission, /why-choose-us. */
.growth-style-two .inner-column .theme-btn-two,
.hiring-section .inner-box a,
.banner-section .theme-btn-one,
.banner-section .theme-btn-two,
.banner-carousel .btn-box a,
/* .page-title is the dark photo banner atop every inner page — the
   /our-approach hero CTA lives there. */
.page-title .theme-btn-one,
.wwa-partner .theme-btn-two,
.hiring-strategies .theme-btn-two {
  color: #ffffff !important;
}

/* Hover → label goes orange, matching the template's link convention. */
.theme-btn-one:hover,
.theme-btn-two:hover,
.cta-buttons a:hover,
.oae-cta-buttons a:hover,
.aff-cta-buttons a:hover,
.aff .aff-cta-link:hover,
.fp-btn:hover,
.whychoose-cta__btn:hover,
.svc-process .spr-btn:hover,
.jobseekers-hero .jh-btn:hover,
.js-opps .jo-btn:hover,
.pricing-block-one .inner-box a:hover,
.pricing-block-two .inner-box a:hover,
.single-job-post .job-inner .apply-btn a:hover,
.job-sidebar .apply-btn a:hover,
.sidebar-page-container .more-btn a:hover,
.protfolio-page .more-btn a:hover,
.hiring-section .inner-box a:hover,
.clients-style-two .title-inner .btn-box a:hover {
  color: #E06A42 !important;
}

/* The navbar "Apply Now" stays a filled button. */
.main-header .theme-btn-two {
  background: #E06A42 !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  padding: 10px 14px !important;
}
.main-header .theme-btn-two::after {
  content: "" !important;
}
.main-header .theme-btn-two:hover {
  color: #ffffff !important;
}

/* ── 3 · Arrow colours ──────────────────────────────────────────────── */
/* <i> arrows — brand navy on light sections. The substring selector
   also covers the -angle / -2 icon variants used on card and portfolio
   links. */
a i[class*="flaticon-right-arrow"] {
  color: #0C1E33;
}

/* On the dark bands a navy arrow vanishes — primaries take the link's
   white. Listed before the secondary rule so even/secondary anchors
   still go orange (equal specificity → later rule wins). */
.cta-buttons a i[class*="flaticon-right-arrow"],
.oae-cta-buttons a i[class*="flaticon-right-arrow"],
.aff-cta-buttons a i[class*="flaticon-right-arrow"],
.aff-workforce .aff-cta-link i[class*="flaticon-right-arrow"],
.whychoose-cta__btn i[class*="flaticon-right-arrow"],
.jobseekers-hero .jh-btn i[class*="flaticon-right-arrow"] {
  color: #ffffff;
}

a:nth-of-type(even) i[class*="flaticon-right-arrow"],
a.secondary i[class*="flaticon-right-arrow"],
[class*="--ghost"] i[class*="flaticon-right-arrow"] {
  color: #E06A42;
}

/* The navy card overlay loses its orange bar — orange arrow instead. */
.overlay-content a i[class*="flaticon-right-arrow"] {
  color: #E06A42;
}

/* Still-filled round icon links keep the navy arrow. */
.project-block-two .link a i[class*="flaticon-right-arrow"] {
  color: #0C1E33;
}

/* White-circle card links fill orange on hover → navy arrow. */
.industries-style-two .link a:hover i[class*="flaticon-right-arrow"],
.industries-section .link a:hover i[class*="flaticon-right-arrow"] {
  color: #0C1E33;
}

/* ::before arrows injected above — same pairing for the button CTAs. */
.theme-btn-one::before,
.theme-btn-two::before,
.clients-style-two .title-inner .btn-box a::before,
.banner-carousel .btn-box a::before,
.hiring-section .inner-box a::before,
.pricing-block-one .inner-box a::before,
.pricing-block-two .inner-box a::before,
.single-job-post .job-inner .apply-btn a::before,
.sidebar-page-container .more-btn a::before,
.protfolio-page .more-btn a::before {
  color: #0C1E33;
}

/* Dark-band ::before primaries → white. */
.growth-style-two .inner-column .theme-btn-two::before,
.page-title .theme-btn-one::before,
.banner-section .theme-btn-one::before,
.banner-section .theme-btn-two::before,
.banner-carousel .btn-box a::before,
.hiring-section .inner-box a::before,
.wwa-partner .theme-btn-two::before,
.hiring-strategies .theme-btn-two::before {
  color: #ffffff;
}

.theme-btn-one:nth-of-type(even)::before,
.theme-btn-two:nth-of-type(even)::before,
.clients-style-two .title-inner .btn-box a:nth-of-type(even)::before,
.banner-carousel .btn-box a:nth-of-type(even)::before {
  color: #E06A42;
}

/* ── 4 · Primary CTA arrows take the hero's navy blue (#1D4E89) ───────────
   The "Partner With Us"-style primary of each CTA pair matches the
   .boh-hero-link--navy treatment — including on the dark bands where the
   arrow was white. Secondaries keep their orange arrow. */
.cta-buttons a.primary i[class*="flaticon-right-arrow"],
.oae-cta-buttons a.primary i[class*="flaticon-right-arrow"],
.aff-cta-buttons a.primary i[class*="flaticon-right-arrow"],
.whychoose-cta__btn--primary i[class*="flaticon-right-arrow"],
.fp-btn--primary i[class*="flaticon-right-arrow"],
.jobseekers-hero .jh-btn i[class*="flaticon-right-arrow"],
.growth-style-two .inner-column .theme-btn-two::before,
.wwa-partner .theme-btn-two::before,
.banner-section .theme-btn-one::before,
.hiring-section .inner-box a::before {
  color: #1D4E89;
}

/* Page-title CTA — the boxed .theme-btn-one was replaced by the hero's
   arrow-link pattern (.boh-hero-link): uppercase Inter text with a navy
   flaticon arrow. The page-title band is dark, so the label is white. */
.page-title .boh-cta-link {
  display: inline-block;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 26px;
  font-weight: 700 !important;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #ffffff;
  transition: color 0.3s ease;
}
.page-title .boh-cta-link i[class*="flaticon-right-arrow"] {
  font-size: 30px;
  font-weight: 400;
  margin-right: 8px;
  position: relative;
  top: 6px;
  color: #1d4e89;
  transition: color 0.3s ease;
}
.page-title .boh-cta-link:hover,
.page-title .boh-cta-link:hover i {
  color: #e06a42;
}

/* growth-style-two hides .image-column below 992px, dropping the side CTA
   onto the light band — navy label there instead of white-on-beige. */
@media (max-width: 991px) {
  .growth-style-two .inner-column .theme-btn-two {
    color: #0C1E33 !important;
  }
}