/* ==========================================================================
   Fiscal Edge — site-level styles (additive, brand-consistent)
   Design tokens preserved from assets/scss/default/_variables.scss
   Primary: #29878e | Secondary: #103d67 | Title: #141416 | Body: #5D666F
   ========================================================================== */

/* --- Accessibility: skip link --- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  background: #103d67;
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
  color: #fff;
}

/* --- Accessibility: visible focus --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #29878e;
  outline-offset: 2px;
}

/* --- Hero: professional image background with brand overlay --- */
.bg_banner-seven.two {
  background-image: url(../images/corporate/hero-office.jpg);
  background-position: center;
  background-size: cover;
}
.bg_banner-seven.two::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(22, 22, 48, 0.9) 0%, rgba(16, 61, 103, 0.68) 45%, rgba(16, 61, 103, 0.18) 100%);
  z-index: 0;
}
.bg_banner-seven.two .container {
  position: relative;
  z-index: 1;
}

/* --- Working process (services page): process icons are navy-filled
   (same files as the fpe-icon-card chips), so the icon circle on the
   dark navy "How we work" section must be light to keep them visible --- */
.working-process-one .single-working-process-one .left .icon {
  background: #FFFFFF;
}

/* --- Generic icon card (value props / industries / professionals) --- */
.fpe-icon-card {
  background: #fff;
  border: 1px solid #EEEBFB;
  border-radius: 10px;
  padding: 40px 30px;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.fpe-icon-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(16, 61, 103, 0.10);
  border-color: rgba(41, 135, 142, 0.45);
}
.fpe-icon-card .icon {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  background: rgba(41, 135, 142, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.fpe-icon-card .icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.fpe-icon-card .title {
  font-family: "Red Hat Display", serif;
  font-size: 20px;
  line-height: 1.4;
  color: #141416;
  margin-bottom: 12px;
  font-weight: 700;
}
.fpe-icon-card .disc {
  color: #5D666F;
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}

/* --- Home "Our Core Services" (why-choose-us-area):
   equal thumbnail heights so the overlay icons sit on the same line,
   and a centered CTA button under the cards --- */
.why-choose-us-area .single-why-choose-four .thumbnail {
  height: 400px;
}
.why-choose-us-area .single-why-choose-four .thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.why-choose-us-area .rts-btn.btn-primary {
  margin: 0 auto;
}
@media only screen and (max-width: 991px) {
  .why-choose-us-area .single-why-choose-four .thumbnail {
    height: 340px;
  }
}
@media only screen and (max-width: 575px) {
  .why-choose-us-area .single-why-choose-four .thumbnail {
    height: 280px;
  }
}

/* --- Home "Why Fiscal Edge" side features: navy titles --- */
.business-solution-area-right-content .featuremain-wrapper .single-feature-wrapper .title {
  color: #103d67;
}

/* --- Home "Our Professionals": center the CTA button --- */
.rts-blog-area .rts-btn.btn-primary {
  margin: 0 auto;
}

/* --- Check list (homepage about + about page) --- */
.fpe-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
  margin-top: 26px;
}
.fpe-checks .item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #141416;
  font-weight: 600;
  font-size: 15px;
}
.fpe-checks .item i {
  color: #29878e;
  font-size: 18px;
  margin-top: 2px;
}
@media only screen and (max-width: 575px) {
  .fpe-checks {
    grid-template-columns: 1fr;
  }
}

/* --- Home "Why Fiscal Edge": elegant hexagon photo without the
   overlapping small image. The large photo fills the hexagon
   uniformly via object-fit so the clip looks clean. --- */
.business-solution-area-left-thumbnail .iamge-large {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
}
.business-solution-area-left-thumbnail .iamge-large img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Office contact card (replaces stat counters) --- */
.fpe-office-card .inner {
  padding: 8px;
}
.fpe-office-card .inner .icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(41, 135, 142, 0.15);
  color: #29878e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  font-size: 18px;
}
.fpe-office-card .inner .title {
  display: block;
  font-size: 22px;
  line-height: 1.3;
  margin-bottom: 8px;
}
.fpe-office-card .inner span {
  font-size: 14px;
  line-height: 1.6;
}

/* --- Home "Why Fiscal Edge" office card: big number variant ---
   (scoped to the homepage hexagon card only; keeps about.html card as-is) --- */
.business-solution-area-left-thumbnail .success-rate-area .inner .icon {
  background: transparent;
  border-radius: 0;
  width: auto;
  height: auto;
  color: #ffffff;
  font-size: 46px;
}
.business-solution-area-left-thumbnail .success-rate-area .inner .title {
  font-size: 50px;
  line-height: 1;
  font-weight: 800;
  margin-bottom: 6px;
  color: #ffffff;
}

/* --- Home "Who We Are": align small hexagon photo with the navy
   hexagon frame (poligon-shape.svg is 234x266, portrait).
   The small image box must keep the same aspect ratio so the
   clip-path hexagon matches the frame; the photo fills it via
   object-fit and is centered inside the navy frame. --- */
.thumbnail-about-right-4 .poligon-shape {
  left: -142px;
  bottom: -41px;
}
.thumbnail-about-right-4 .small-image {
  aspect-ratio: 234 / 266;
  left: -134px;
  bottom: -32px;
}
.thumbnail-about-right-4 .small-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thumbnail-about-right-4 .large-iamge {
  max-width: 432px;
  margin-left: auto;
}
.thumbnail-about-right-4 .large-iamge img {
  display: block;
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 575px) {
  /* On phones the three-element collage (big hexagon + small photo +
     navy frame) gets crowded and looks broken; keep just a clean,
     centered hexagon photo. */
  .thumbnail-about-right-4 .small-image,
  .thumbnail-about-right-4 .poligon-shape {
    display: none;
  }
  .thumbnail-about-right-4 .large-iamge {
    max-width: 320px;
    margin: 15px auto;
  }
}

/* --- About / Career "Who We Are" thumbnail: the navy counter card was
   removed from the page; keep the main photo filling its frame (the
   template leaves it at natural size, which overflows on small
   screens). --- */
.left-thumbnail-about-area-two > img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Home CTA banner: keep the photo compact so the heading gets
   more width (default template shows the image at natural size,
   which squeezes the text next to it) --- */
.bg_call-toaction-4 .cta-four-wrapper .left .img-area {
  flex: 0 0 auto;
}
.bg_call-toaction-4 .cta-four-wrapper .left .img-area img {
  display: block;
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 50%;
}

/* --- Contact form (contact.html) --- */
.contact-form-p .form-group {
  margin-bottom: 20px;
}
.contact-form-p label {
  display: block;
  font-weight: 600;
  color: #141416;
  font-size: 14px;
  margin-bottom: 8px;
}
.contact-form-p label .req {
  color: #29878e;
}
.contact-form-p input,
.contact-form-p select,
.contact-form-p textarea {
  width: 100%;
  border: 1px solid #DDD8F9;
  border-radius: 8px;
  background: #fff;
  padding: 13px 16px;
  font-size: 15px;
  color: #141416;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.contact-form-p textarea {
  min-height: 130px;
  resize: vertical;
}
.contact-form-p input::placeholder,
.contact-form-p textarea::placeholder {
  color: #9aa0a8;
}
.contact-form-p input:focus,
.contact-form-p select:focus,
.contact-form-p textarea:focus {
  border-color: #29878e;
  box-shadow: 0 0 0 3px rgba(41, 135, 142, 0.18);
  outline: none;
}
.contact-form-p .field-error {
  display: none;
  color: #c0392b;
  font-size: 13px;
  margin-top: 6px;
}
.contact-form-p .has-error input,
.contact-form-p .has-error select,
.contact-form-p .has-error textarea {
  border-color: #c0392b;
}
.contact-form-p .has-error .field-error {
  display: block;
}
.contact-form-p .form-messages {
  display: none;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 1.6;
}
.contact-form-p .form-messages.success {
  display: block;
  background: rgba(62, 183, 94, 0.12);
  border: 1px solid rgba(62, 183, 94, 0.45);
  color: #1e7a41;
}
.contact-form-p .form-messages.error {
  display: block;
  background: rgba(255, 0, 3, 0.08);
  border: 1px solid rgba(255, 0, 3, 0.35);
  color: #a81f1f;
}
.contact-form-p .rts-btn {
  width: 100%;
}
.contact-form-p .form-note {
  margin-top: 14px;
  font-size: 13px;
  color: #5D666F;
}
.contact-form-p .form-note a {
  color: #103d67;
  font-weight: 600;
}

/* --- Breadcrumb / inner pages image sizing --- */
.about-invena-large-image img {
  width: 100%;
  border-radius: 10px;
}

/* --- Services page: full-width alternating service rows.
   The template splits each row 50/50 and only stacks below 767px,
   which lets the natural-size image overflow and squeeze the text.
   We stack the whole row on tablets too and let the thumbnail
   never exceed its share, so content can't overlap. --- */
.rts-service-main-wrapper-10 .signle-service-style-10 {
  flex-basis: 100%;
  scroll-margin-top: 130px;
}
.rts-service-main-wrapper-10 .signle-service-style-10 .thumbnail {
  flex: 0 0 50%;
  width: 50%;
  min-width: 0;
}
.rts-service-main-wrapper-10 .signle-service-style-10 .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The service icons are a hand-drawn set on one shared 68x68 grid; this
   keeps them from drifting apart again. */
.rts-service-main-wrapper-10 .signle-service-style-10 .content-area-wrapper .icon img {
  width: 68px;
  height: 68px;
  object-fit: contain;
}
@media only screen and (max-width: 991px) {
  .rts-service-main-wrapper-10 .signle-service-style-10 {
    flex-direction: column;
    align-items: stretch;
  }
  .rts-service-main-wrapper-10 .signle-service-style-10 .thumbnail,
  .rts-service-main-wrapper-10 .signle-service-style-10 .content-area-wrapper {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }
  .rts-service-main-wrapper-10 .signle-service-style-10 .thumbnail img {
    height: auto;
  }
  .rts-service-main-wrapper-10 .signle-service-style-10 .content-area-wrapper {
    padding: 30px 24px;
  }
}
@media only screen and (max-width: 575px) {
  .rts-service-main-wrapper-10 .signle-service-style-10 .content-area-wrapper {
    padding: 22px 18px;
  }
}

/* --- Home "Our Core Services": the template renders the card SVGs at
   natural size (89x87) with no centering box. Normalize them so every
   icon sits in the same centered 80px box, and compact the overlay on
   phones so it never crowds the card's bottom edge. --- */
.single-why-choose-four .inner-content .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
}
.single-why-choose-four .inner-content .icon img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}
@media only screen and (max-width: 575px) {
  .single-why-choose-four .inner-content {
    bottom: 16px;
    padding: 0 12px;
  }
  .single-why-choose-four .inner-content .icon {
    margin-bottom: 12px;
  }
  .single-why-choose-four .inner-content .icon img {
    width: 60px;
    height: 60px;
  }
  .single-why-choose-four .inner-content .title {
    font-size: 20px;
  }
  .single-why-choose-four .inner-content p.disc {
    font-size: 14px;
    margin-bottom: 14px;
  }
}

/* --- Home "Why Fiscal Edge": keep the navy stat card balanced on the
   hexagon and the feature icons tidy on phones. --- */
@media only screen and (max-width: 575px) {
  .business-solution-area-left-thumbnail .success-rate-area {
    width: 148px;
    height: 168px;
    right: 10px;
    top: 24px;
  }
  .business-solution-area-left-thumbnail .success-rate-area .inner .icon {
    font-size: 32px;
  }
  .business-solution-area-left-thumbnail .success-rate-area .inner .title {
    font-size: 34px;
  }
  .business-solution-area-right-content .featuremain-wrapper .single-feature-wrapper {
    padding: 24px 16px 24px 74px;
  }
  .business-solution-area-right-content .featuremain-wrapper .single-feature-wrapper img {
    width: 52px;
    height: 52px;
    left: 12px;
    object-fit: contain;
  }
}

/* --- About "Our Approach": the small animated thumbnail was removed
   from the page; the large photo fills its frame and stays centered
   on small screens (the template's img has no width rule, so it
   rendered at natural size). --- */
.business-goal-area-2 .thumbnail-business-area-right-two .large-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
@media only screen and (max-width: 767px) {
  .business-goal-area-2 .thumbnail-business-area-right-two .large-thumbnail {
    max-width: 100%;
    margin: 30px auto 0;
  }
}

/* --- Mega menu service icons: the template only caps the width, so give
   them a uniform square box for a consistent row. --- */
.rts-mega-menu.service-mega-menu-style li a .single-service-menu .icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

/* --- Training & Business Development Consulting: the detail block that sits
   between the service grid and the process section. It is the one service
   with a full breakdown, so it gets its own section rather than a longer
   card that would break the grid's rhythm. --- */
.fpe-detail-area .title-style-one .title {
  margin-bottom: 20px;
}
.fpe-detail-note {
  color: #5D666F;
}
.fpe-detail-note + .fpe-detail-note {
  margin-top: 16px;
}
.fpe-detail-lead {
  color: #103D67;
  font-weight: 700;
  margin-bottom: 20px;
}
.fpe-detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fpe-detail-list li {
  position: relative;
  margin-bottom: 20px;
  padding-left: 26px;
}
.fpe-detail-list li:last-child {
  margin-bottom: 0;
}
.fpe-detail-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #103D67;
}
.fpe-detail-item-title {
  display: block;
  color: #103D67;
  font-weight: 700;
  margin-bottom: 4px;
}
.fpe-detail-item-text {
  display: block;
  color: #5D666F;
}

/* --- Legal pages: reading-friendly content columns --- */
.fpe-legal-prose {
  max-width: 820px;
}
.fpe-legal-prose h2 {
  font-family: "Red Hat Display", serif;
  font-size: 24px;
  line-height: 1.4;
  color: #141416;
  margin: 40px 0 14px;
  font-weight: 700;
}
.fpe-legal-prose h3 {
  font-family: "Red Hat Display", serif;
  font-size: 19px;
  line-height: 1.4;
  color: #141416;
  margin: 28px 0 10px;
  font-weight: 700;
}
.fpe-legal-prose p,
.fpe-legal-prose li {
  color: #5D666F;
  font-size: 15.5px;
  line-height: 1.8;
  margin-bottom: 12px;
}
.fpe-legal-prose ul {
  padding-left: 20px;
}
.fpe-legal-prose .updated {
  font-size: 14px;
  color: #8a919a;
  margin-top: -10px;
}

/* --- Career page: open-positions notice --- */
.fpe-open-positions {
  border: 1px dashed rgba(41, 135, 142, 0.6);
  background: rgba(41, 135, 142, 0.07);
  border-radius: 10px;
  padding: 36px 30px;
  text-align: center;
}
.fpe-open-positions h3 {
  font-family: "Red Hat Display", serif;
  color: #141416;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
}
.fpe-open-positions p {
  color: #5D666F;
  font-size: 15.5px;
  max-width: 640px;
  margin: 0 auto 18px;
  line-height: 1.7;
}

/* --- 404 page action buttons --- */
.not-found-links {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* --- Keep CTA band legible --- */
.rts-call-to-action-area {
  overflow: hidden;
}

/* ==========================================================================
   Footer (footer-two/footer-three) — fixes & brand polish

   The template ships two regressions on the light footer:
   1. `.footer-two-single-wized.right` gets `margin-top: 77px`, which drops
      the "Contact Us" widget below the other columns.
   2. Widget headings inherit the ORANGE `--color-heading-1` token (#29878e);
      on the grey footer texture (02.webp is a 60x3px #D9D9D9 strip stretched
      to "cover") that reads at ~1.5:1 contrast — effectively invisible.
   ========================================================================== */

/* Keep every footer column on the same baseline (remove the 77px offset) */
.footer-two-single-wized.right {
  margin-top: 0;
}

/* Deliberate light background instead of the stretched 3px pattern */
.rts-footer-area.footer-bg-two {
  background-color: #F6F6FB;
  background-image: none;
}

/* Hairline above the copyright bar */
.rts-copy-right-1 {
  border-top: 1px solid #E6E3F7;
}

/* Readable widget headings ("Our Services" / "Company" / "Contact Us") */
.rts-footer-area .footer-two-single-wized .wized-title {
  color: #103d67;
  font-weight: 700;
}

/* Footer link hover accent — the template references `--color-primary-2`
   but never declares it, so footer hovers silently did nothing */
:root {
  --color-primary-2: #216C72;
}

/* ==========================================================================
   Contact page — layout polish (brand-consistent, no new colors)

   The contact page copies the template's two-column contact area but with:
   - boxed info cards (`.fpe-info-card`) for phone / email / location
   - the form inside a soft elevated panel (`.fpe-form-card`)
   - the map in a rounded framed card (`.fpe-map-card`)
   - a "What Happens Next" 3-step row reusing `.fpe-icon-card`
   ========================================================================== */

/* Boxed contact info cards */
.fpe-info-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border: 1px solid #EEEBFB;
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 18px;
  text-decoration: none;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.fpe-info-card:hover {
  transform: translateY(-4px);
  border-color: #29878e;
  box-shadow: 0 18px 35px rgba(16, 61, 103, 0.08);
}
.fpe-info-card .icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(41, 135, 142, 0.12);
  color: #29878e;
  font-size: 20px;
}
.fpe-info-card .meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fpe-info-card .meta small {
  color: #5D666F;
  font-size: 13px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-weight: 600;
}
.fpe-info-card .meta strong {
  color: #103d67;
  font-size: 17px;
  font-weight: 600;
  word-break: break-word;
}

/* Form panel */
.fpe-form-card {
  background: #fff;
  border: 1px solid #EEEBFB;
  border-radius: 10px;
  padding: 40px 36px;
  box-shadow: 0 18px 45px rgba(16, 61, 103, 0.07);
}
@media only screen and (max-width: 575px) {
  .fpe-form-card {
    padding: 28px 18px;
  }
}

/* Map in a rounded framed card */
.fpe-map-card {
  border: 1px solid #EEEBFB;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(16, 61, 103, 0.06);
}
.fpe-map-card iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}
@media only screen and (max-width: 575px) {
  .fpe-map-card iframe {
    height: 300px;
  }
}

/* ==========================================================================
   Hero vertical email strip — remove the decorative line that crosses the
   email text. The template lays the email out vertically (writing-mode:
   vertical-rl + rotate 180deg) and anchors a 1px white line at a fixed
   `bottom: 148px`. With a longer real address the line lands on the text
   instead of below it, so the email looks struck through.
   ========================================================================== */

.banner-seven-swiper-wrapper .email-area-left::after {
  display: none;
}

/* Tighten the spacing between the envelope icon and the email address */
.banner-seven-swiper-wrapper .email-area-left {
  gap: 20px;
}

/* ==========================================================================
   Contact page — text on the dark teal info panel (`.contact-info-area-wrapper-p`)
   is white so it stays readable on the teal background. The white boxed
   `.fpe-info-card` items keep their own colors.
   ========================================================================== */

.contact-info-area-wrapper-p .title-style-two .pre,
.contact-info-area-wrapper-p .title-style-two .title {
  color: #FFFFFF;
}

/* The "Explore Our Services" button inside the panel is transparent (btn-border),
   so its text must be white to stay readable on the teal background.
   (btn-primary included in the selector to out-rank the light-section rule above.) */
.contact-info-area-wrapper-p .rts-btn.btn-primary.btn-border {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.55);
}
.contact-info-area-wrapper-p .rts-btn.btn-primary.btn-border:hover {
  background: #103d67;
  color: #FFFFFF;
  border-color: #103d67;
}

/* ==========================================================================
   Brand polish — hover/focus interactions aligned with the navy/teal identity
   ========================================================================== */

/* The template references --color-heading but never declares it;
   define it as the brand navy so headings/citations render correctly. */
:root {
  --color-heading: #103d67;
}

/* Smooth scrolling for same-page anchors (services page uses #id links)
   and offset so the fixed header doesn't cover the target section. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 132px;
}

/* Brand-tinted text selection */
::selection {
  background: #29878e;
  color: #ffffff;
}

/* Visible keyboard focus. The template strips focus borders on buttons
   (.rts-btn:focus), so restore a clear brand-colored ring for keyboard users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #29878e;
  outline-offset: 3px;
}

/* Primary CTA: teal -> navy fill with white text on hover.
   (The .btn-white variant keeps its own colors — higher specificity.) */
.rts-btn.btn-primary {
  color: #ffffff;
}
.rts-btn.btn-primary::before {
  background: #103d67;
}
.rts-btn.btn-primary:hover {
  background: #103d67;
  color: #ffffff;
}

/* Outline-style primary buttons (btn-primary + btn-border) sit on LIGHT
   sections (about / 404): navy text + light border so they stay readable.
   On hover the outline fills navy and the text turns white. */
.rts-btn.btn-primary.btn-border {
  color: #103d67;
}
.rts-btn.btn-primary.btn-border:hover {
  background: #103d67;
  color: #ffffff;
  border-color: #103d67;
}

/* Exception: the same outline combo inside the dark hero (index) must
   keep white text on the video background. */
.banner-seven-inner-content .rts-btn.btn-primary.btn-border {
  color: #ffffff;
}

/* Feature tiles ("Why Fiscal Edge"): add a soft brand shadow and shift
   the title to teal on hover, on top of the template's lift effect. */
.business-solution-area-right-content .featuremain-wrapper .single-feature-wrapper {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.business-solution-area-right-content .featuremain-wrapper .single-feature-wrapper:hover {
  box-shadow: 0 18px 40px rgba(16, 61, 103, 0.10);
}
.business-solution-area-right-content .featuremain-wrapper .single-feature-wrapper:hover .title {
  color: #29878e;
}

/* --- Career page: center the "Open Positions" block and its CTA button --- */
.fpe-open-positions {
  text-align: center;
}
.fpe-open-positions .rts-btn.btn-primary {
  margin: 0 auto;
}

/* --- Preloader: finance-style loader on the navy brand colour —
   rotating hexagon ring (matches the brand shape) around the white
   logo, with a 0 -> 100% counter and a tagline. --- */
.loader-wrapper {
  background: #103d67;
}
.loader-wrapper .loader-section {
  background: #103d67;
}
.fpe-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  text-align: center;
}
.fpe-loader::after {
  display: none;
}
.fpe-loader-hex {
  position: relative;
  width: 118px;
  height: 118px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fpe-loader-hex::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid rgba(41, 135, 142, 0.22);
  border-top-color: #29878e;
  border-bottom-color: #29878e;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: fpe-loader-spin 1.8s linear infinite;
}
.fpe-loader-logo {
  width: 88px;
  height: 88px;
  object-fit: contain;
}
.fpe-loader-count {
  margin-top: 16px;
  font-family: "Red Hat Display", serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
  color: #ffffff;
}
.fpe-loader-pct {
  color: #55b6bc;
}
.fpe-loader-note {
  margin: 8px 0 0;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
@keyframes fpe-loader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Scroll-to-top vs WhatsApp
   --------------------------------------------------------------------------
   The template parks .progress-wrap in the bottom-right corner — exactly
   where the WhatsApp button goes — so the two overlapped and only the
   top one was clickable. Keep them on opposite sides, and flip both with
   `dir` so they stay opposite in Arabic too.
   ========================================================================== */

.progress-wrap {
  right: auto;
  left: 30px;
}

[dir="rtl"] .progress-wrap {
  left: auto;
  right: 30px;
}

/* ==========================================================================
   WhatsApp — fixed contact button
   --------------------------------------------------------------------------
   One number, one button, every page. Sits in the bottom corner where the
   reading starts, so it never lands on top of the content the visitor is
   currently reading, and flips with `dir` in Arabic.
   ========================================================================== */

.fpe-whatsapp-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.35);
  transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.fpe-whatsapp-fab:hover {
  background: #1ebe5a;
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(37, 211, 102, 0.45);
}

.fpe-whatsapp-fab:focus-visible {
  outline: 3px solid #103d67;
  outline-offset: 3px;
}

[dir="rtl"] .fpe-whatsapp-fab {
  right: auto;
  left: 24px;
}

@media only screen and (max-width: 575px) {
  .fpe-whatsapp-fab {
    right: 16px;
    bottom: 16px;
    width: 50px;
    height: 50px;
    font-size: 25px;
  }

  [dir="rtl"] .fpe-whatsapp-fab {
    right: auto;
    left: 16px;
  }
}