body .main-title,
body h1 {
  color: #00164e;
  font-size: 36px;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.7;
  letter-spacing: normal;
  font-family: var(--bs-body-font-family);
  text-align: left;
  text-shadow: 0 4px 12px rgba(0, 0, 0, .05);
  font-weight: 700
}

body .main-title.bigger-size,
body h1.bigger-size {
  font-family: var(--bs-body-font-family);
  font-size: 60px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: .2px
}

body .main-title.biggest-size,
body h1.biggest-size {
  font-size: 99px;
  font-style: normal;
  font-weight: 700;
  line-height: 109px
}

body h2 {
  font-size: 24px
}

body h2,
body h3 {
  color: #0d1325;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  font-family: var(--bs-body-font-family);
  text-align: left;
  text-shadow: 0 4px 12px rgba(0, 0, 0, .05);
  font-weight: 700
}

body h3 {
  font-size: 18.72px
}

body h4 {
  font-size: 16px
}

body h4,
body h5 {
  color: #0d1325;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  font-family: var(--bs-body-font-family);
  text-align: left;
  text-shadow: 0 4px 12px rgba(0, 0, 0, .05);
  font-weight: 700
}

body h5 {
  font-size: 14px
}

body h6 {
  color: #0d1325;
  font-size: 12px;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  font-family: var(--bs-body-font-family);
  text-align: left;
  text-shadow: 0 4px 12px rgba(0, 0, 0, .05);
  font-weight: 700
}

body a,
body li,
body p {
  color: #000
}

body a,
body li,
body p {
  font-size: 14px;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  font-family: var(--bs-body-font-family);
  text-align: left;
  text-shadow: 0 4px 12px rgba(0, 0, 0, .05);
  font-weight: 400
}

body a {
  color: #5581ef;
}

body a:hover {
  color: #002b99
}

.main {
  margin-top: 35px !important;
  color: #000;
  font-size: 15px;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  font-family: Noto Sans;
  text-align: justify;
  text-shadow: 0 4px 12px rgba(0, 0, 0, .05);
  font-weight: 700;
  z-index: 1;
}

.country_button {
  color: #00164E;
  font-size: 16px;
  font-family: var(--nato-regular);
  text-decoration: none;
  border: none;
  background: none;
}

.country_button img {
  width: 20px;
}

.header_bg {
  background: #00164E;
  width: 100%;
  height: 100px;
  z-index: 1000;
}

.bg_deep_blue_color {
  background: #00164E;
}

.btn-outline-deep_blue {
  background: #00164E;
  color: #fff;
  border-radius: 3px;
  padding: .375rem .75rem;
  border: 1px solid #00164E;
  font-size: 15px;
  font-style: normal;
  font-stretch: normal;
  font-weight: 400;
  letter-spacing: normal;
  font-family: var(--nato-medium);
  text-decoration: none;
  display: inline-block;
  transition: background 0.3s ease;
}

@media (max-width: 991.98px) {
  .header_bg {
    height: 80px !important;
  }
}
/******************************************************************/

footer {
  background-color: #00164e;
  bottom: 0;
  top: 0;
  margin-top: 0;
  padding-bottom: 20px;
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  font-family: var(--nato-regular);
  text-align: left;
  text-shadow: 0 4px 12px rgba(0, 0, 0, .05);
  font-weight: 400;
}

footer a:hover {
  text-decoration: none;
  color: #ffab00 !important;
}

footer p {
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  font-family: var(--nato-regular);
  text-align: left;
  text-shadow: 0 4px 12px rgba(0, 0, 0, .05);
  font-weight: 400;
}

footer .widget h6 {
  font-size: 18px;
  font-family: var(--nato-regular);
  color: #fff;
  font-weight: 400;
}

footer .widget ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

footer .widget ul li {
  line-height: 30px;
}

footer .widget ul li a {
  font-size: 14px;
  font-family: var(--nato-regular);
  color: #fff;
  padding: 0 !important;
}

/* Links: match client spec (size + padding + teal) */
.footer-link {
  font-size: 14px;
  padding: 0px 15px;
  color: #4ac8c8;
  text-decoration: none;
}
/* .footer-link:hover {
    text-decoration: none;
    color: #ffab00 !important;
} */
.sep { color: #fff; padding: 0 2px; }

.footer-copy { 
  line-height: 1.6; 
  font-size: 0.85rem;
  opacity: 0.85;
  text-align: left;
}

@media (max-width: 575.98px) {
  .footer-links .footer-link {
    padding: 0px !important;
    color: #fff;
    font-size: 18px;
  }
}

/* Socials: fixed 50x50, no hover effects */
.footer-socials .icon-50 {
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff; 
  text-decoration: none;
  transition: transform 0.2s ease-in-out;
}

.footer-socials .icon-50 svg,
.footer-socials .icon-50 i {
  font-size: 22px;
  line-height: 1;
}


/******************************************************************/

.custom-modal .custom-modal-content {
  border: none !important;
  border-radius: 0px !important;
  background-color: #fff;
  box-shadow: 0 24px 60px rgba(0, 22, 78, 0.35), 0 8px 20px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.cmb-intro-lead {
  font-family: var(--benton-medium, var(--benton-regular));
  font-size: 16px;
  font-weight: 600;
  color: #00164E;
  line-height: 1.35;
}

.cmb-intro-body {
  font-size: 14px;
  color: #4a5468;
  line-height: 1.5;
}

.form-helper-text {
  font-size: 12px;
  color: #6c757d;
  line-height: 1.4;
  margin-top: 4px;
}

.cmb-tc-label {
  font-size: 13px;
  color: #4a5468;
  cursor: pointer;
  margin: 0;
}

.cmb-tc-text {
  line-height: 1.4;
}

.cmb-tc-text a {
  color: #00164E;
  text-decoration: underline;
  font-weight: 600;
}

.cmb-tc-text a:hover {
  color: #ffab00;
}

.modal-header-custom {
  min-height: 48px;
  /* enough space for vertical centering */
}

.modal-title-custom {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

.country-wrapper h2 {
  font-family: var(--nato-regular);
}

.country_box ul {
  margin: 0;
  padding: 0;
  list-style: none;

}

.country_box ul li {
  display: inline-block;
  margin-right: 50px;
  margin-top: 15px;
  margin-bottom: 20px;
}

.country_box ul li a {
  color: #1A314D;
  font-size: 16px;
  font-family: var(--benton-regular);
}

.country_box ul li a img {
  width: 35px;
  margin-right: 10px;
}

/*
*
PRODUCT CARD
*
*/
.product-slide-card {
  background-color: #dfeffe;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  position: relative;
  text-align: left;
  width: 100%;
  max-width: 340px;
  min-width: 280px;
  min-height: 380px;
  height: 100%;
}

/* Active styling on swiper-slide-active */
.product-swiper .swiper-slide-active>.product-slide-card {
  background-color: #fff !important;
  transform: scale(1.05);
  z-index: 2;
}

/* top-left ribbon */
.top-left-label {
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(90deg, #007bff, #0056d2);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 8px 30px 8px 8px;
  border-top-left-radius: 10px;
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
  z-index: 1;
}

/* Title & Text */
.product-slide-card h5 {
  font-size: 1.6rem;
  font-weight: 700;
  color: #333;
  line-height: 1.2;
}

.product-slide-card p {
  font-size: 1.1rem;
  color: #666;
}

/* Button */
.product-slide-card .btn {
  border: 1px solid #0d6efd !important;
  background-color: transparent;
  color: #0d3393 !important;
  font-size: 15px;
  font-weight: 400;
  height: 38px;
  width: auto;
  border-radius: 5px;
  padding: 8px 20px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.product-slide-card .btn:hover {
  background-color: transparent;
  color: #0d6efd;
}

/* === RESPONSIVE ADJUSTMENTS === */

/* Tablet */
@media (max-width: 991px) {
  .product-slide-card {
    max-width: 280px;
    min-height: 300px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .product-slide-card {
    max-width: 100%;
    min-width: 260px;
    min-height: 280px;
    padding: 16px;
  }

  .product-slide-card h5 {
    font-size: 1.3rem;
  }

  .product-slide-card p {
    font-size: 1rem;
  }

  .top-left-label {
    font-size: 0.8rem;
    padding: 6px 24px 6px 6px;
  }
}

/*
*
*PRODUCT TABS
*
*/
#product_slides {
  background-color: #efeff1;
  position: relative;
}

.product-tabs .nav-item .nav-link {
  position: relative;
  color: #495057;
  background-color: #fff;
  border: 1px solid #efeff1;
  border-radius: .5rem;
  margin: 0 5px;
  padding: 1.5rem !important;
  font-size: 16px !important;
  font-family: var(--nato-regular);
  text-align: center;
  box-shadow: 0 0 9px rgba(139, 146, 167, .5019607843);
}

.product-tabs .nav-item .nav-link.active {
  background-color: #efeff1;
  color: #212529;
  font-weight: 700;
  border: solid #efeff1;
  border-width: 1px 1px 1.4rem;
  box-shadow: none;
}

.product-tabs .nav-link:hover,
.product-tabs .nav-link:focus {
  background: #efeff1;
}

#product_slides .tab-content {
  background: #efeff1;
  border-radius: 0 0 10px 10px;
}

/* Background strip behind tabs */
.bg_swiper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  height: 88px;
  z-index: 0;
}

@media (max-width: 991px) {
  section#product_slides>.container {
    max-width: 100% !important;
  }

  .product-tabs {
    flex-direction: column;
    align-items: center;
    padding: 15px 5px;
    gap: 10px;
  }

  .product-tabs .nav-item {
    width: 100%;
    height: auto;
  }

  .product-tabs .nav-link:not(.active) {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #efeff1;
    background-color: #fff;
    box-shadow: 0 0 9px rgba(139, 146, 167, 0.5);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-radius: 8px;
  }

  .product-tabs .nav-link {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    font-size: 16px;
    padding: 20px;
    margin: 0px !important;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    width: 100%;
    text-align: center;
  }

  .product-tabs .nav-item.show .nav-link,
  .product-tabs .nav-link.active {
    background: #002b99 !important;
    color: #fff !important;
    border-bottom: none;
    border-radius: 8px;
    width: 100%;
    font-weight: 600;
    border: none !important;
  }
}

@media (max-width: 576px) {
  .bg_swiper {
    height: auto;
  }

  .product-tabs .nav-link {
    font-size: 15px;
    padding: 16px;
  }
}

.see-all-link {
  font-size: 14px;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  text-shadow: 0 4px 12px rgba(0, 0, 0, .05);
  font-weight: 400;
  color: #007bff;
  text-decoration: none;
  font-family: var(--nato-regular);
  display: flex;
  align-items: center;
  cursor: pointer;
}

.see-all-link:hover {
  color: #007bff;
  text-decoration: underline !important;
}

.see-all-link .see-all-icon {
  color: #0d6efd;
  width: 25px;
  height: 25px;
}



/***************************
  === Custom Swiper === 
****************************/
.content-section {
  height: 100%;
  display: grid;
  align-items: center;
  justify-content: start;
}

/* ============================================================
   Liberty hero banner — single source of truth
   Two layouts:
     .slide-content--split  → solid navy panel + slanted image right
     .slide-content--full   → full-bleed image with copy overlay
   Copy column lives inside Bootstrap .container so it auto-aligns
   horizontally with the navbar — i.e. the Liberty flame icon in
   the logo sits directly above the start of the hero copy.
   ============================================================ */

:root {
  --hero-copy-max: 500px;
  --hero-min-height: 460px;
  --hero-navy: #00164E;
  --hero-clip: 80px;
  /* Slant geometry — LOCKED 2026-05-05.
     The skew-line top-corner MUST land at horizontal centre (50% of
     viewport). This means the navy panel is exactly 50% wide and the
     slant top vertex (100% 0 of the panel) sits at 50vw. Same value on
     every slide, every country site — no per-slide overrides allowed.
     If a country brief asks for a different ratio, push back: the lock
     is the lock. Image area only varies via objectPosition / focalPoint
     on the photo itself, never via this token. */
  --hero-split-navy: 50%;
}

.custom-swiper {
  position: relative;
  min-height: var(--hero-min-height);
}

.custom-swiper .slide-content {
  position: relative;
  min-height: var(--hero-min-height);
  width: 100%;
  overflow: hidden;
}

/* --- Background layer: split variant (navy panel + image right) --- */
.custom-swiper .slide-content--split .slide-bg {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 0;
}

.custom-swiper .slide-content--split .slide-bg-left {
  flex: 0 0 var(--hero-split-navy);
  background: var(--hero-navy);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--hero-clip)) 100%, 0 100%);
  z-index: 2;
}

.custom-swiper .slide-content--split .slide-bg-right {
  flex: 1;
  margin-left: calc(var(--hero-clip) * -1);
  z-index: 1;
}

.custom-swiper .slide-content--split .slide-bg-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Background layer: full-bleed variant --- */
.custom-swiper .slide-content--full .slide-fullimage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

.custom-swiper .slide-content--full .slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,22,78,.65) 0%, rgba(0,22,78,.35) 45%, rgba(0,22,78,0) 75%);
  z-index: 1;
}

/* --- Copy overlay (shared by both variants) ---
   Uses Bootstrap .container so its left edge matches the navbar's
   left edge at every breakpoint. That places the hero text exactly
   under the Liberty flame icon in the logo. */
.custom-swiper .slide-copy {
  position: relative;
  z-index: 3;
  min-height: var(--hero-min-height);
  display: flex;
  align-items: center;
  color: #fff;
}

.custom-swiper .slide-copy .text-inner {
  width: 100%;
  /* max-width scales with parent width so the copy always stays inside
     the 50% navy panel's slant boundary — even when the Etuna FFA chat
     panel opens and reflows body via margin-right: 420px. The calc
     covers slant clip (80px) + container padding + buffer. Capped at
     --hero-copy-max (500px) at wide viewports. LOCKED 2026-05-11
     (second pass — first attempt used fixed 500px which overflowed
     when chat panel narrowed the body). */
  max-width: min(var(--hero-copy-max), calc(50% - 100px));
  /* Guaranteed minimum breathing room from the navy panel's left edge.
     Scales 16-24px with viewport. */
  padding-left: clamp(1rem, 2vw, 1.5rem);
}

/* --- Locked typography (used in both variants) --- */
.custom-swiper .text-inner {
  max-width: min(var(--hero-copy-max), calc(50% - 100px)) !important;
  padding-left: clamp(1rem, 2vw, 1.5rem);
}

.custom-swiper .hero-title {
  color: #fff;
  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
  line-height: 1.1;
  font-weight: 700;
  margin: 0 0 1rem;
  width: fit-content;
  max-width: 100%;
}

/* Subcopy must NEVER extend wider than the heading text — its
   max-width is set inline by JS in HomeCarousel.vue (alignSubtitlesToTitles)
   measuring each .hero-title's getBoundingClientRect().width and writing
   it onto the sibling .hero-subtitle. The rule below is the fallback cap
   used before the JS runs / on environments where it can't run. */
.custom-swiper .hero-subtitle {
  color: #fff;
  font-size: clamp(0.875rem, 1vw, 1rem);
  line-height: 1.5;
  font-family: 'NotoSans-Regular', sans-serif;
  font-weight: 400;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  max-width: 100%;
}

.custom-swiper .hero-subtitle p {
  color: #fff;
  margin: 0 0 0.5rem;
}

.custom-swiper .hero-subtitle p:last-child {
  margin-bottom: 0;
}

/* --- Locked CTA button --- */
.custom-swiper .quote-button,
.custom-swiper .hero-cta {
  display: inline-block;
  background-color: #002b99;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.75rem 1.75rem;
  border-radius: 4px;
  border: 0;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.custom-swiper .quote-button:hover,
.custom-swiper .hero-cta:hover {
  background-color: #0040d6;
  color: #fff;
  transform: translateY(-1px);
}

.custom-swiper .swiper-pagination {
  position: absolute;
  bottom: 30px !important;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: flex-start;
  gap: 0.2rem;
  margin: 0 auto;
  width: 100%;
  max-width: 1140px;
  box-sizing: border-box;
  padding: 0 12px !important;
}

.custom-swiper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  margin: 0 6px;
  opacity: 1;
  transition: background-color 0.3s;
}

.custom-swiper .swiper-pagination-bullet-active {
  background-color: #ffffff;
}

/* === Navigation Arrows === */
.custom-swiper .swiper-button-prev,
.custom-swiper .swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: #ffffff;
  color: #1d4ed8;
  width: 60px;
  height: 48px;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  padding: 0;
}

.custom-swiper .swiper-button-prev:hover,
.custom-swiper .swiper-button-next:hover {
  background-color: #5581ef;
  color: #ffffff;
}

.custom-swiper .swiper-button-prev {
  left: 0;
  border-radius: 0 4px 4px 0;
}

.custom-swiper .swiper-button-next {
  right: 0;
  border-radius: 4px 0 0 4px;
}

.custom-swiper .swiper-button-prev::after,
.custom-swiper .swiper-button-next::after,
.custom-swiper .swiper-button-prev::before,
.custom-swiper .swiper-button-next::before {
  content: none !important;
  display: none !important;
}

.custom-swiper .swiper-button-prev i,
.custom-swiper .swiper-button-next i {
  font-size: 1.2rem;
  color: inherit;
  pointer-events: none;
}


/* === Responsive Media Queries === */

/* Narrow-desktop / tablet / mobile — SA reference stack pattern.
   LOCKED 2026-05-11. The split-with-slant only renders at ≥1280px.
   Below 1280, the slant clips copy on narrow widths (title bleeds
   onto the photo) — instead we stack vertically: photo on top
   (full-width, no slant), navy panel below with copy in normal
   .container flow. This matches the SA reference's mobile pattern
   and aligns the breakpoint with the chevron-hide rule (also 1279.98). */
@media (max-width: 1279.98px) {
  /* Navy lives on the OUTER section so it fills the full viewport
     width below the image. Putting navy on .slide-copy (which IS
     Bootstrap .container) constrained it to the container's max-width
     and showed light-coloured gutter on either side — the 2026-05-11
     bug. Locked: navy bg goes on .slide-content--split. */
  .custom-swiper .slide-content--split {
    display: block;
    background-color: var(--hero-navy);
  }

  .custom-swiper .slide-content--split .slide-bg {
    position: relative;
    display: block;
    height: auto;
    inset: auto;
  }

  .custom-swiper .slide-content--split .slide-bg-left {
    display: none;
  }

  .custom-swiper .slide-content--split .slide-bg-right {
    position: relative;
    width: 100%;
    height: 280px;
    margin-left: 0;
    min-height: 0;
    flex: none;
  }

  .custom-swiper .slide-content--split .slide-bg-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Copy panel inside .container — no background of its own. The
     navy comes from the parent .slide-content--split (full-width).
     This keeps copy centered + aligned to .container's left edge
     while the navy fills the gutters. Liberty Flame alignment with
     the navbar preserved. */
  .custom-swiper .slide-content--split .slide-copy {
    position: relative;
    background: transparent;
    display: block;
    min-height: auto;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .custom-swiper .slide-content--full .slide-copy {
    padding-top: 2.5rem;
    padding-bottom: 4rem;
    min-height: 360px;
  }

  .custom-swiper .text-inner,
  .custom-swiper .slide-copy .text-inner {
    max-width: 100% !important;
  }

  .custom-swiper .hero-subtitle {
    margin-bottom: 1.25rem;
  }

  /* Pagination centered below the copy on the stacked layout */
  .custom-swiper .swiper-pagination {
    position: absolute;
    bottom: 20px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    justify-content: center;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* Chevron clearance — LOCKED 2026-05-05.
   The prev/next chevrons must NEVER touch the hero copy column. The
   copy column lives inside Bootstrap .container which only has gutter
   space at >=1280px viewport. Below 1280, the gutter collapses and a
   60px-wide chevron at left:0 overlaps the copy / CTA — illegible.
   Rule: chevrons hidden below 1280px. Users navigate via swipe + dot
   pagination at narrower widths. The 24px minimum clearance above
   1280 is enforced by the natural gutter (≥70px each side). */
@media (max-width: 1279.98px) {
  .custom-swiper .swiper-button-prev,
  .custom-swiper .swiper-button-next {
    display: none !important;
  }
}

/* Medium tablets */
@media (max-width: 767.98px) {
  .custom-swiper .slide-content--split .slide-copy {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .custom-swiper .slide-content--split .slide-bg-right {
    height: 240px;
  }

  .custom-swiper .swiper-pagination {
    bottom: 15px !important;
  }
}

/* Small mobile */
@media (max-width: 575.98px) {
  .custom-swiper {
    min-height: auto;
  }

  .custom-swiper .slide-content--split .slide-copy {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .custom-swiper .slide-content--split .slide-bg-right {
    height: 200px;
  }

  .custom-swiper .swiper-pagination {
    bottom: 10px !important;
  }

  .custom-swiper .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 4px;
  }

  .custom-swiper .quote-button,
  .custom-swiper .hero-cta {
    width: 100% !important;
    text-align: center;
  }
}

/* (Removed 2026-05-11: was overriding the new responsive padding-left
   clamp on .text-inner with `padding-left: 0` at ≥768px, which broke
   the "guaranteed breathing room from navy panel's left edge" rule.
   The base .text-inner padding-left clamp handles all widths now.) */

@media (min-width: 992px) {
  .custom-swiper .swiper-pagination {
    max-width: 94%;
  }
}

@media (min-width: 1200px) {
  .custom-swiper .swiper-pagination {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .custom-swiper .swiper-pagination {
    max-width: 1200px;
  }
}

/*
* Product Card Swiper
*/
:root {
  --swiper-navigation-size: 44px
}
/* ======================================================================
   Product Cards Carousel — Liberty SA layered pattern
   ======================================================================
   Reusable across Liberty Africa country sites. Adaptive layout by count:
   - 1-2 cards → static flex row (no Swiper); cards centred as a pair.
   - 3+ cards  → Swiper carousel with tier-based scaling (driven by the
                 .lpc-tier-{0,1,2,3} classes that ProductSliders.vue
                 stamps onto each slide via the applyTiers() helper).
   Tier semantics:
     tier-0 = active centre card (white, scale 1, shadow, top z-index)
     tier-1 = prev / next        (light blue, scale 0.85, behind active)
     tier-2 = prev-prev / next-next (light blue, scale 0.72, further behind)
     tier-3 = anything further out (hidden via opacity 0)
   spaceBetween: -40 in the Swiper config makes the visual edges of the
   tier-1 cards sit just behind the active card, producing the layered look.
   ====================================================================== */

/* Outer shell wraps the carousel container + the See all row, so they
   stack vertically and the carousel container can stay max-width 1200. */
.product-cards-shell {
  position: relative;
  width: 100%;
}

.product-cards { position: relative; }

.product-cards .swiper-container {
  overflow: hidden;
}

.product-cards .swiper-wrapper {
  align-items: center; /* keep side cards vertically centred as they scale */
}

/* Static (non-Swiper) layout for 1-2 card categories. Renders as a centred
   flex row so cards group together at the centre instead of dragging to
   one side. */
.product-cards-static {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 32px;
  flex-wrap: wrap;
}

/* Navigation arrow chips */
.product-cards .swiper-button-prev,
.product-cards .swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  color: #00164E;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border: 0 !important;
  outline: none !important;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,22,78,.18);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.product-cards .swiper-button-prev:focus,
.product-cards .swiper-button-next:focus,
.product-cards .swiper-button-prev:focus-visible,
.product-cards .swiper-button-next:focus-visible,
.product-cards .swiper-button-prev:active,
.product-cards .swiper-button-next:active {
  outline: none !important;
  border: 0 !important;
}

/* Pull buttons OUTSIDE the card cluster. The .product-cards container is
   Bootstrap .container max-width 1200; at viewports ≥1280 there's enough
   gutter to land the chips in without colliding with the visible card
   cluster. The cluster's tier-2 cards get clipped by the swiper-container
   overflow:hidden, so the chips sitting just outside container.left/right
   don't actually overlap any tier-2 *visible* content. */
.product-cards .swiper-button-prev { left: -24px; right: auto; }
.product-cards .swiper-button-next { right: -24px; left: auto; }

.product-cards .swiper-button-prev::after,
.product-cards .swiper-button-next::after {
  content: none !important;
  display: none !important;
}
.product-cards .swiper-button-prev i,
.product-cards .swiper-button-next i {
  font-size: 1.2rem;
  color: inherit;
  pointer-events: none;
}

.product-cards .swiper-button-prev:hover,
.product-cards .swiper-button-next:hover {
  background-color: #00164E;
  color: #fff;
}

/* ----- Card base ---------------------------------------------------- */
.product-cards .card {
  width: 320px;
  min-height: 440px;
  cursor: pointer;
  height: auto;
  background-color: #dfeffe;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  text-align: left;
  position: relative;
  transform-origin: center center;
  transition: transform 0.4s ease, opacity 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  z-index: 1;
}

/* ----- Tier scaling for the Swiper branch --------------------------
   Each transform combines the per-slide --lpc-tx (set by JS in
   applyTiers — see ProductSliders.vue) with the tier's scale. The tx
   value moves the slide to its LOGICAL loop position relative to the
   active card so the visible window stays symmetric, while CSS owns the
   visual scale + z-index per tier. */
/* Tier-0: active centre card */
.product-cards .swiper .card.lpc-tier-0 {
  background-color: #fff;
  box-shadow: 0 18px 44px rgba(0, 22, 78, 0.20);
  transform: translateX(var(--lpc-tx, 0)) scale(1);
  z-index: 5;
}
/* Tier-1: prev / next — slightly smaller, tucked close behind active */
.product-cards .swiper .card.lpc-tier-1 {
  background-color: #dfeffe;
  transform: translateX(var(--lpc-tx, 0)) scale(0.88);
  z-index: 3;
}
/* Tier-2: prev-prev / next-next — further behind, viewport-clipped */
.product-cards .swiper .card.lpc-tier-2 {
  background-color: #dfeffe;
  transform: translateX(var(--lpc-tx, 0)) scale(0.72);
  z-index: 2;
  opacity: 0.95;
}
/* Tier-3+: hidden (only relevant when the loop wraps a slide to the
   "back" of the carousel — out of sight, out of mind). */
.product-cards .swiper .card.lpc-tier-3 {
  opacity: 0;
  pointer-events: none;
  transform: translateX(var(--lpc-tx, 0)) scale(0.6);
}

/* Static-pair layout (1-2 card case): both cards equal-weight white. */
.product-cards-static .card {
  background-color: #fff;
  box-shadow: 0 12px 32px rgba(0, 22, 78, 0.14);
  transform: scale(1);
}

.product-cards .card .top-left-label {
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(90deg, #007bff, #0056d2);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 8px 30px 8px 8px;
  border-top-left-radius: 10px;
  -webkit-clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
}
.product-cards .card h5 {
  font-size: 1.6rem;
  font-weight: 700;
  color: #333;
  line-height: 1.2;
}
.product-cards .card p {
  font-size: 1.1rem;
  color: #666;
}

.product-cards .btn {
  border: 1px solid #0d6efd;
  background-color: transparent;
  color: #0d6efd;
  border-radius: 5px;
  padding: 8px 20px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.product-cards .btn:hover {
  background-color: #0d6efd;
  color: #fff;
}
.product-cards .btn:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

/* ----- See all link (below carousel) ------------------------------- */
.product-cards-seeall {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
.product-cards-seeall .see-all-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #00164E;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.product-cards-seeall .see-all-link:hover,
.product-cards-seeall .see-all-link:focus-visible {
  color: #ffab00;
  border-bottom-color: #ffab00;
}
.product-cards-seeall .see-all-chev {
  font-size: 0.8rem;
}

/* ----- Responsive -------------------------------------------------- */
@media (max-width: 1279.99px) {
  /* At ≤1280 the page container is narrower; the negative offset on the
     arrow chips would push them off-screen. Pull them back inside the
     container edge instead. */
  .product-cards .swiper-button-prev { left: 0; }
  .product-cards .swiper-button-next { right: 0; }
}

@media (max-width: 1023.99px) {
  .product-cards .card {
    max-width: 230px;
    width: 230px;
    min-height: 280px;
  }
  /* Below 1024px the cards fill most of the viewport — no clear gutter
     to land the arrow chips in without overlapping a card. Hide them
     and let the user swipe; tier-1 cards still peek so there's a clear
     hint that more content exists. */
  .product-cards .swiper-button-prev,
  .product-cards .swiper-button-next {
    display: none;
  }
}

@media (max-width: 576px) {
  .product-cards .card h5 { font-size: 1.35rem; }
  .product-cards .card p  { font-size: 1rem; }
  /* Below ~576px the tier-1 side cards reduce to thin slivers; hide
     them and let the user swipe through one card at a time. */
  .product-cards .swiper .card.lpc-tier-1,
  .product-cards .swiper .card.lpc-tier-2 {
    opacity: 0;
    pointer-events: none;
  }
}

/*
*
*Pagination
*
*/
.pagination {
  justify-content: center;
  gap: 10px;
}

.page-link {
  background: transparent;
  border: 0;
  border-radius: 2px;
  color: #5581ef!important;
  font-size: 14px !important;
  font-weight: 700;
  box-sizing: border-box;
  display: inline-block;
  min-width: 1.5em;
  padding: .25em .5em;
  margin-left: 5px;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.page-item.active .page-link {
  background: #002b99!important;
  color: #fff !important;
}

.page-item:not(.disabled):hover {
  cursor: pointer;
}

.page-link:hover {
  z-index: 2;
  background: #002b99!important;
  color: #fff !important;
  border-color: transparent !important;
}

.page-link:hover span {
  color: #fff;
  filter: brightness(0) saturate(100%) invert(99%) sepia(14%) saturate(0%) hue-rotate(61deg) brightness(112%) contrast(101%);
}

.page-link.disabled span {
  opacity: 0.5;
}

.page-item.disabled .page-link {
  pointer-events: none;
  background-color: transparent;
}

.page-link.page-button-prev:after, .page-link.page-button-next:after {
  font-family: swiper-icons;
  font-size: 1rem;
  text-transform: none !important;
  letter-spacing: 0;
  text-transform: none;
  font-variant: normal;
  line-height: 1;
}

.page-link.page-button-next:after {
  content: 'next';
}

.page-link.page-button-prev:after {
  content: 'prev';
}

/*
*Support block
*/
.support_section {
  padding: 50px 0;
}

.support_box {
  position: relative;
  border-radius: 32px;
  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, .08);
  overflow: hidden;
}

.support_content {
  color: #fff;
  max-width: 45%;
}

/* Responsive Fixes */
@media (max-width: 768px) {
  .support_section {
    padding: 40px 0;
  }

  .support_box img {
    width: 100%;
    height: 100% !important;
  }

  .support_content {
    top: 15px;
    bottom: 20px;
    left: 20px;
    transform: none;
    max-width: 90%;
  }

  .support-btn {
    font-size: 13px;
    padding: 8px 16px;
  }
}

/*
*
Media Card
*
*/
.featured_card {
  height: 100%;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.featured_card img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.card_content {
  padding: 20px;
}

.media_text h5,
.card_content h5 {
  color: #0d1325;
  font-size: 1.25rem;
  font-style: normal;
  font-stretch: normal;
  letter-spacing: normal;
  font-family: var(--nato-regular);
  text-align: left;
  text-shadow: 0 4px 12px rgba(0, 0, 0, .05);
  font-weight: 500;
  line-height: 1.2;
}

.media_text p,
.card_content p {
  font-size: 14px;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  font-family: var(--nato-regular);
  text-align: left;
  text-shadow: 0 4px 12px rgba(0, 0, 0, .05);
  font-weight: 400;
  color: #000;
  margin-top: 0;
  margin-bottom: 1rem;
}

.media_item_card {
  display: flex;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  height: 100%;
  flex-direction: row;
}

.media_item_card img {
  width: 200px;
  object-fit: cover;
  height: auto;
  flex-shrink: 0;
}

.media_text {
  padding: 15px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

@media (max-width: 768px) {
  .media_item_card {
    flex-direction: column;
  }

  .media_item_card img {
    width: 100%;
    height: auto;
  }

  .media_text {
    padding: 20px;
  }
}

/*
*Boxed card
*/
.boxed-card {
  background: transparent;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: none;
}

.boxed-card .boxed-card-footer {
  margin-top: auto;
}

.boxed-card h3 {
  font-size: 1.25rem;
  font-family: var(--nato-regular);
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: #0d1325;
  font-style: normal;
  font-stretch: normal;
  letter-spacing: normal;
  text-align: left;
  text-shadow: 0 4px 12px rgba(0, 0, 0, .05);
}

.boxed-card p {
  margin-bottom: 30px;
}

.boxed-support-btn {
  background: transparent;
  color: #0d3393;
  border-radius: 3px;
  padding: .375rem .75rem;
  border: 1px solid #5581ef;
  font-size: 15px;
  font-style: normal;
  font-stretch: normal;
  font-weight: 400;
  letter-spacing: normal;
  font-family: var(--nato-medium);
  text-decoration: none;
  display: inline-block;
  transition: background 0.3s ease;
}

.boxed-support-btn:hover {
  background: #dfeffe;
  color: #0d3393;
}

@media (max-width: 992px) {
  .boxed-card {
    margin-bottom: 20px;
  }
}

/*
*Quicklinks
*/
.section_third {
  width: 100%;
  background: #fff;
  padding-bottom: 50px;
}

.heading_media {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 30px;
  gap: 10px;
}

.heading_media h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #0d1325;
  font-family: var(--nato-semibold);
  margin: 0;
  text-align: left;
}

.media_wraper {
  background: #F2F6FF;
  padding: 50px 0;
}

/*
*Media
*/
.media_section {
  background: #f2f6ff;
  padding: 50px 0;
}

.media_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.media_header h2 {
  color: #0d1325;
  font-family: var(--nato-semibold);
  text-align: left;
  margin-bottom: 0;
}

.media_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}

.featured_area {
  height: 100%;
}

.stacked_area {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
}

/* Tablet adjustments - KEEP 2-column layout but optimize spacing */
@media (max-width: 991px) {
  .media_section {
    padding: 40px 0;
  }
  
  .media_grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .stacked_area {
    gap: 16px;
  }
  
  .media_header {
    margin-bottom: 1.5rem;
  }
}

/* Mobile adjustments - STILL keep 2-column but with minimal spacing */
@media (max-width: 768px) {
  .media_grid {
    gap: 12px; /* Even tighter for mobile */
  }
  
  .stacked_area {
    gap: 12px;
  }
}

@media (max-width: 576px) {
  .media_section {
    padding: 30px 0;
  }
  
  .media_grid {
    gap: 10px;
  }
  
  .stacked_area {
    gap: 10px;
  }
  
  .media_header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
  }
}

.bg-sky-blue {
  background-color: #F2F6FF;
}

.bg-tint-blue {
  background-color: #EFEFF1;
}

.bg-pale-gray {
  background-color: #F0F1F4;
}

.bg-light-gray {
  background-color: #f5f5f5;
}

.first-title {
  border-bottom: 1px solid #C5C7D2;
  padding-bottom: 20px;
}

.box_insurance {
  box-shadow: 0 0 4px #999;
  padding: 20px;
  border-radius: 8px;
  background: #FFFFFF;
  margin-bottom: 20px;
  height: 100%;
}

.box_insurance h2 {
  font-family: var(--nato-semibold);
  font-size: 16px;
  margin-bottom: 0px;
}

.box_insurance label {
  background-color: #803CB2;
  height: 30px;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  margin-right: 10px;
}

.box_insurance ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.box_insurance ul li {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  font-family: var(--nato-regular);
  font-size: 16px;
  color: #261F34;
}

.box_insurance ul li i {
  margin-right: 10px;
}

.box_insurance ul li b {
  margin-left: 10px;
}

.b-location h6 {
  margin: 0;
  color: #0D1325;
}

.b-location p,
.b-location a {
  color: #4378FD;
  margin: 0;
}

.b-location {
  margin-bottom: 15px;
}

.privacy-notes {
  padding: 20px 0 50px 0;
  background-color: #F2F6FF;
}

.privacy-notes-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.privacy-notes-inner .section-title {
  text-align: center;
  font-size: 30px;
  font-family: var(--nato-medium);
  color: #261F34;
}

.privacy-notes-inner a {
  font-size: 20px;
  font-family: var(--nato-medium);
  color: #261F34;
  text-decoration: underline;
}

/*
* Contact us
*/
.contact-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 0 4px #999;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}
.contact-card .contact-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #C5C7D2;
    padding-bottom: 20px;
    margin-bottom: 1rem;
    background: transparent;
}
.contact-card .contact-card-header .card-badge {
    background-color: #803CB2;
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
    margin-right: 10px;
}
.contact-card .contact-card-header .card-title {
    font-family: var(--nato-semibold);
    font-size: 16px;
    margin-bottom: 0px;
    color: #00164e;
}
.contact-card .contact-label, .contact-content strong {
    margin: 0;
    color: #0D1325;
    font-size: 12px;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    font-family: var(--bs-body-font-family);
    text-align: left;
    text-shadow: 0 4px 12px rgba(0, 0, 0, .05);
    font-weight: 700;
}
.contact-card .contact-item {
    margin-bottom: 15px;
}
.contact-card .contact-item:last-child {
    margin-bottom: 0;
}
.contact-content p{
    color: #4378FD;
}
.contact-content a {
    color: #4378FD;
    text-decoration: none;
    transition: color 0.2s ease;
}
.contact-content a:hover {
    color: #4378FD;
    text-decoration: underline;
}
.phone-group {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.phone-item {
    flex: 1;
    min-width: 140px;
}
.phone-columns {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}
.phone-column {
    flex: 1;
    min-width: 180px;
}
.emergency-phones {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.emergency-phones > div {
    flex: 1;
    min-width: 180px;
}
.note-text {
    font-size: 0.875em;
    color: #4378FD;
    margin-top: 4px;
}

@media (max-width: 768px) {
  .phone-group, .phone-columns {
      flex-direction: row;
      gap: 16px;
  }
}
@media (max-width: 576px) {
  .phone-group, .phone-columns {
      flex-direction: column;
      gap: 16px;
  }
  .emergency-phones  {
      flex-direction: column;
      gap: 0px;
  }
}

/* --- CARD WRAPPER --- */
.uphold-box-inner {
  margin: 30px 0;
  display: block;
  width: 100%;
}

@media (max-width: 576px) {
  .uphold-box-inner {
    margin: 15px 0;
  }
}

/* --- INDIVIDUAL CARD --- */
.uphold-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 1px 6px rgba(139, 146, 167, 0.31);
  min-height: 95px;
  height: 100%;
  transition: transform 0.2s ease;
}

.uphold-box:hover {
  transform: translateY(-2px);
}

.uphold-box h5 {
  font-family: var(--nato-semibold);
  color: #0D1325;
  word-break: break-word;
  width: 100%;
  text-align: center;
  margin-bottom: 0;
}

.uphold-box p {
  font-size: 12px;
  margin-bottom: 0;
  word-break: break-word;
  width: 100%;
  text-align: center;
}

/* --- IMAGE HOLDER (for teams only) --- */
.uphold-box-img {
  width: 80px;
  height: 80px;
  background-color: #00164E;
  border-radius: 100px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
}

.uphold-box-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-modal-content {
  max-height: 90vh;
  overflow-y: auto;
  padding-left: 50px;
  padding-right: 50px;
}

@media (max-width: 991.98px) {
  .member-modal-content {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media (max-width: 575.98px) {
  .member-modal-content {
    padding-left: 15px;
    padding-right: 15px;
  }
}

.member-modal-content {
  border: none !important;
  border-radius: 0px !important;
  background-color: #fff;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  scroll-behavior: smooth;
}

/* .media_search {
  padding-bottom: 10px !important;
}

.media_search p {
  color: #5C6C80;
  font-family: var(--benton-regular);
  font-size: 16px;
} */
.search-bar {
  color: #f9fafb;
  background-color: #f9fafb;
  border: 1px;
  border-radius: 0;
  border-color: #000;
  box-shadow: 2px 2px 9px 2px rgba(0, 0, 0, .33);
  justify-content: justify;
  color: #000;
  object-fit: cover;
  padding: 20px;
  flex-wrap: flex-column;
  margin: auto auto .5rem;
}
.search-bar .fa {
  color: #0d3393;
}
.search-bar #searchInput {
  border-left: 1px solid #fff;
}
.search-bar .label {
  color: #424757;
  font-size: 14px;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  font-family: var(--nato-regular);
  text-align: left;
  text-shadow: 0 4px 12px rgba(0, 0, 0, .05);
  font-weight: 400;
}
.search-title {
  color: #424757;
  font-size: 18px;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  font-family: var(--nato-regular);
  text-align: left;
  text-shadow: 0 4px 12px rgba(0, 0, 0, .05);
  font-weight: 400;
}

/* Custom Search Modal Styling */
.search-modal {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1050;
	display: block;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	outline: 0;
	background-color: rgba(0, 0, 0, 0.5);
}

.search-modal-dialog {
	max-width: 100%;
	margin: 1.75rem auto;
	position: relative;
	top: 125px;
	box-shadow: 2px 2px 9px 2px rgba(0, 0, 0, .33);
}

.search-modal-content {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	pointer-events: auto;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 0;
	outline: 0;
}

.search-modal-body {
	position: relative;
	flex: 1 1 auto;
	padding: 1rem;
}

/* Search input styling */
.search-textinput-modal .input-group-text {
    background-color: transparent;
    border: none;
}
.search-textinput-modal .fa {
  color: #0d3393;
}
.search-textinput-modal .ui-widget {
  width: 93%;
}

@media (max-width: 576px) {
	.search-modal-dialog {
		top: 50px;
	}
}

/* body:has(.search-modal) {
	overflow: hidden;
} */

.product-card-box {
  overflow: hidden;
  position: relative;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.product-card-box .card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-color: #dfeffe;
}

@media (max-width: 768px) {
  .product-card-box .card-image {
    height: auto;
  }
}

.product-card-box .card-title {
  font-size: 1.125rem;
  color: #0d1325;
  font-family: var(--nato-regular);
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.product-card-box .card-text {
  font-size: 0.875rem;
  color: #000;
  font-family: var(--nato-regular);
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.product-card-box .card-body {
  flex: 1 1 auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}

.product-card-box .card-body p,
.product-card-box .card-body .card-title {
  margin-bottom: 0.5rem;
}

.product-card-box .card-footer {
  padding: 0.75rem 1.25rem;
  background-color: inherit;
  border-top: none;
}

@media (max-width: 768px) {
  .product-card-box .card-image {
    height: auto;
  }
}

/* === HeroBanner Matched to Client === */
.hero-banner {
  position: relative;
  height: 462.25px;
  display: flex;
  align-items: center;
  justify-content: start;
  padding: 60px 15px;
  color: #fff;
  overflow: hidden;
  font-family: 'Noto Sans', sans-serif;
  text-align: left;
}

.hero-banner__picture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-banner__bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero-banner .overlay-dark {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.hero-banner .container {
  position: relative;
  z-index: 2;
}

.hero-banner .content-wrapper {
  max-width: 720px;
}

.hero-banner h1 {
  font-size: 40px;
  line-height: 68px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.hero-banner p {
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
}

.hero-banner .btn-primary {
  background-color: #4378fd;
  border-color: #4378fd;
  color: #fff;
  padding: 10px 24px;
  font-size: 14px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.hero-banner .btn-primary:hover {
  background-color: #335ed4;
}

/* Responsive Tweaks */
@media (max-width: 991.98px) {
  .hero-banner {
    height: 400px;
    padding: 50px 20px;
  }

  .hero-banner h1 {
    font-size: 32px;
    line-height: 48px;
  }

  .hero-banner p {
    font-size: 14px;
  }
}

@media (max-width: 767.98px) {
  .hero-banner {
    height: 320px;
    padding: 40px 15px;
    justify-content: center;
  }

  .hero-banner h1 {
    font-size: 28px;
    line-height: 38px;
  }

  .hero-banner p {
    font-size: 14px;
  }

  .hero-banner .btn-primary {
    padding: 8px 20px;
    font-size: 13px;
  }
}


.text-blue {
  color: #0d3393 !important;
}

.color-lib-blue {
  color: #00164e;
}

/*
*Summary
*/
.summary {
  padding: 60px 0px;
  background-color: #EFEFF1;
}

.more-content-section {
  width: 100%;
  margin: auto;
  padding: 2rem 0rem;
}

.more-content-section h1,
.more-content-section h2,
.more-content-section h3,
.more-content-section h4,
.more-content-section h5,
.more-content-section h6 {
  margin-bottom: 1rem;
  color: #00164e;
}

.more-content-section p {
  margin-bottom: 1rem;
  line-height: 1.7;
}

.more-content-section ul {
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}

.more-content-section ul li {
  margin-bottom: 0.5rem;
}

.img-fluid {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem 0;
}



/*
*
Frontend Banner
*
*/
.frontend-banner {
  display: flex;
  position: relative;
  max-height: 400px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.frontend-banner .banner_wrapper {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
}

@media (min-width: 576px) {
  .frontend-banner .banner_wrapper {
    max-width: 96%;
  }
}

@media (min-width: 768px) {
  .frontend-banner .banner_wrapper {
    max-width: 94%;
  }
}

@media (min-width: 992px) {
  .frontend-banner .banner_wrapper {
    max-width: 94%;
  }
}

@media (min-width: 1200px) {
  .frontend-banner .banner_wrapper {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .frontend-banner .banner_wrapper {
    max-width: 1200px;
  }
}

.frontend-banner .banner_content {
  max-width: 500px;
  padding: 0 1rem;
}

/* === Left Section === */
.frontend-banner .left-content {
  flex: 1;
  background: #2563eb;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  z-index: 2;
}

.frontend-banner .left-content::after {
  content: '';
  position: absolute;
  right: 50%;
  width: 80px;
  height: 100%;
  background: #2563eb;
  transform: translateX(110%) skewX(-10deg);
  z-index: 1;
}

.frontend-banner .banner_heading {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #ffffff;
  line-height: 68px;
  font-family: 'Noto Sans', sans-serif;
  text-align: left;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.frontend-banner .banner_subtext {
  font-size: 14px;
  font-weight: 400;
  color: #f0f4ff;
  margin-bottom: 20px;
  line-height: 1.5;
  font-family: 'Noto Sans', sans-serif;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* === Right Section === */
.frontend-banner .right-content {
  flex: 1;
  position: relative;
  background-color: #f5f5f5;
  min-height: 400px;
  z-index: 1;
}

.frontend-banner .right-content img {
  width: 100%;
  height: 100%;
  min-height: 400px;
  /* Ensures space is reserved before image loads */
  object-fit: cover;
}

/* === CTA Button === */
.frontend-banner .quote-button {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 24px;
  background-color: #fff;
  color: #1d4ed8;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
}

@media (min-width: 1200px) {
  .frontend-banner .banner_content {
    padding-left: 80px;
  }
}

@media (min-width: 768px) {
  .frontend-banner .banner_content {
    padding-left: 0;
    padding-right: 15px;
  }
}

@media (max-width: 991px) {
  .frontend-banner {
    height: 200px !important;
    flex-direction: column;
  }

  .frontend-banner .left-content {
    padding: 2rem;
  }

  .frontend-banner .right-content {
    display: none !important;
  }

  .frontend-banner .left-content::after {
    display: none;
  }
}

@media (max-width: 767px) {
  .frontend-banner {
    flex-direction: column;
  }

  .frontend-banner .left-content {
    background: #214ec0;
    padding: 1.5rem;
    text-align: center;
    order: 2;
  }

  .frontend-banner .banner_heading {
    font-size: 24px;
  }

  .frontend-banner .banner_subtext {
    font-size: 14px;
  }
}

/*
*
Learn More Card
*
*/
.learn_card {
  background: #fff;
  border-radius: 10px 10px 0px 0px;
  overflow: hidden;
  box-shadow: 0 -5px 15px 0 transparent;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 430px;
  margin-bottom: 20px;
}

.learn_card .card-img {
  width: 100%;
  height: 248px;
  object-fit: cover;
  background-color: #dfeffe;
  aspect-ratio: 372 / 248;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.learn_card .card-body {
  padding: 1.25rem;
  flex: 1 1 auto;
}

.learn_card .card-title {
  font-size: 16px;
  font-weight: 700;
  color: #00164e;
  font-family: 'Noto Sans', sans-serif;
  line-height: 1.69;
  text-align: left;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 0.75rem;
}

.learn_card .card-text {
  font-size: 16px;
  font-weight: 400;
  color: #000;
  font-family: 'Noto Sans', sans-serif;
  line-height: normal;
  text-align: left;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 0;
}

.learn_card .card-footer {
  background-color: inherit;
  border-top: none;
  padding: 0.75rem 1.25rem;
}

.learn_card .card-link {
  font-size: 16px;
  font-weight: 600;
  color: #5581ef;
  font-family: 'Noto Sans', sans-serif;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-shadow: 0 4px 12px rgba(0, 0, 0, .05);
  transition: all 0.2s ease;
}

.learn_card .card-link:hover {
  text-decoration: underline;
}

.learn_card .link-icon {
  color: #5581ef;
  font-size: 18px;
}

/* Responsive Fix */
@media (max-width: 768px) {
  .learn_card {
    margin-bottom: 20px;
  }
}

/*
*Summary
*/
.summary-section {
  background: #efeff1;
  padding: 3rem 0;
}

.summary-content {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: 1.875rem;
  overflow: hidden;
}

.summary-intro h1,
.summary-intro h2,
.summary-intro h3,
.summary-intro h4,
.summary-intro h5,
.summary-intro h6 {
  margin-bottom: 1rem;
  color: #00164e;
  font-family: var(--bs-body-font-family);
  text-align: left;
  text-shadow: 0 4px 12px rgba(0, 0, 0, .05);
  font-weight: 700;
}

.summary-intro p {
  margin-bottom: 1rem;
  color: #000;
  font-family: var(--bs-body-font-family);
  font-size: 14px;
  text-align: left;
  text-shadow: 0 4px 12px rgba(0, 0, 0, .05);
  font-weight: 400;
}

.summary-intro,
.summary-image {
  flex: 1 1 50%;
}

.summary-intro {
  padding: 1.5rem;
  min-height: 200px;
}

.summary-image {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7f7f7;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.summary-image img {
  height: 100%;
  width: auto;
  display: block;
}

@media (max-width: 991px) {
  .summary-content {
    flex-direction: column;
  }

  .summary-image img {
    height: auto;
    width: 100%;
  }
}

/*
*Benefits
*/
.benefits {
  padding: 3rem 0;
  background-color: #fff;
}

.benefits-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  border-radius: 1.875rem;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.benefits-image {
  flex: 1 1 50%;
}

.benefits-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.benefits-content {
  flex: 1 1 50%;
  padding: 1.5rem;
  color: #333;
  font-size: 16px;
  background-color: #dfeffe;
}

@media (max-width: 992px) {
  .benefits-wrapper {
    flex-direction: column;
  }

  .benefits-content {
    padding: 30px 20px;
  }

  .benefits-image {
    width: 100%;
  }

  .benefits-image img {
    max-height: 300px;
    height: auto;
    border-radius: 0;
  }
}

.contact-wrapper {
  padding: 3rem 0;
}

.contact-title {
  font-size: 28px;
  font-weight: 700;
  color: #21242C;
  margin-bottom: 10px;
}

.contact-subtext {
  font-size: 16px;
  color: #000;
  margin-bottom: 20px;
}

.box-contact {
  background-color: #fff;
  border-radius: 16px;
  padding: 15px;
  height: 180px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease;
}

.box-contact:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.box-contact img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  margin-bottom: 10px;
}

.contact-label {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  word-break: break-word;
  text-align: center;
}

.contact-label a {
  color: inherit;
  text-decoration: none;
}

.contact-label a:hover {
  text-decoration: underline;
}

.contact-wrapper .row .col-sm-4 {
  padding-left: 8px;
  padding-right: 8px;
}

/* Responsive */
@media (max-width: 768px) {
  .contact-title {
    font-size: 24px;
  }

  .contact-subtext {
    font-size: 15px;
  }

  .box-contact {
    margin-bottom: 20px;
    height: auto;
    padding: 25px 15px;
  }

  .contact-label {
    font-size: 15px;
  }
}


.according_wraper h1 {
  font-family: var(--nato-bold);
  font-size: 24px;
  margin-bottom: 20px;
  line-height: 31.2px;
  letter-spacing: 0.17000000178813934px;
  text-align: left;
}

.accordion-header button {
  font-family: var(--nato-bold);
  font-size: 16px;
  line-height: 31.2px;
  letter-spacing: 0.17000000178813934px;
  text-align: left;
  border-radius: 4px;
  min-height: 50px;
  display: flex;
  align-items: center;
  border: 1px solid #00164e;
  background-color: transparent;
  color: #00164e;
  padding: 20px 30px;
}

.accordion-flush .accordion-item .accordion-button {
  border-radius: 4px !important;
}

.accordion-item {
  margin: 15px 0;
}

.accordion-button {
  box-shadow: unset;
}

.accordion-button:not(.collapsed) {
  color: #0D1325;
}

@media (max-width: 768px) {
  .accordion-header button {
    font-size: 14px;
  }
}

/* --- SECTION HEADINGS --- */
.section-title {
  font-size: 32px;
  color: #0d1325;
  font-family: var(--nato-semibold);
  margin-bottom: 20px;
}

.section-title-description {
  font-size: 16px;
  color: #00164E;
}

@media (max-width: 768px) {
  .section-title {
    font-size: 24px;
    margin-bottom: 10px;
  }

  .section-title-description {
    font-size: 14px;
  }
}

/*
*Customer Service
*/
.privacy-notes-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.privacy-notes-inner .section-title {
  text-align: center;
  font-size: 30px;
  font-family: var(--nato-medium);
  color: #261F34;
}

.privacy-notes-inner a {
  font-size: 20px;
  font-family: var(--nato-medium);
  color: #261F34;
  text-decoration: underline;
}

.c-testimonial {
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  height: 100%;
}

.c-testimonial-img img {
  width: 100%;
}

.c-testimonial-img {
  position: relative;
}

.c-testimonial-img .img-play-button img {
  width: 24px;
}

.img-play-button {
  position: absolute;
  background: #0062E1;
  height: 50px;
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0 10px 0 0;
  cursor: pointer;
  bottom: 0;
  left: 0;
}

.c-testimonial-img .img-play-button img {
  width: 24px;
}

.c-testimonial-bottom {
  padding: 30px;
}

.c-testimonial-bottom h5 {
  font-size: 28px;
  margin-bottom: 0;
  color: #1A314D;
}

.c-testimonial-bottom p {
  margin-bottom: 0;
  font-size: 18px;
  color: #1A314D;
}

.testimonial-box {
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.testimonial-box .testimonial-image {
  position: relative;
  width: 100%;
  height: 210px;
  overflow: hidden;
}

.testimonial-box .testimonial-image .testimonial-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.testimonial-image .img-play-button {
  position: absolute;
  background: #0062E1;
  height: 50px;
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0 10px 0 0;
  cursor: pointer;
  bottom: 0;
  left: 0;
  transition: background 0.3s ease;
}

.testimonial-image .img-play-button:hover {
  background: #004bb5;
}

.testimonial-box .testimonial-content {
  padding: 30px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.testimonial-box .testimonial-content h5 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #1A314D;
}

.testimonial-box .testimonial-content p {
  margin: 0;
  font-size: 16px;
  color: #1A314D;
}

/* === Responsive Styles === */
@media (max-width: 991.98px) {
  .testimonial-box .testimonial-content {
    padding: 20px;
  }

  .testimonial-box .testimonial-content h5 {
    font-size: 20px;
  }

  .testimonial-box .testimonial-content p {
    font-size: 15px;
  }

  .testimonial-image .img-play-button {
    height: 40px;
    width: 40px;
  }
}

@media (max-width: 575.98px) {
  .testimonial-box .testimonial-content {
    padding: 16px;
  }

  .testimonial-box .testimonial-content h5 {
    font-size: 18px;
  }

  .testimonial-box .testimonial-content p {
    font-size: 14px;
  }

  .testimonial-image .img-play-button {
    height: 36px;
    width: 36px;
  }
}

.primary-hover .nav-link:hover,
.primary-hover .nav-link:focus {
  color: #ffab00 !important;
}

/* .b-location p {
  width: 75%;
} */

.news-content {
  position: relative;
  margin-top: -25px;
  margin-bottom: 25px;
  box-shadow: 2px 2px 9px 2px rgba(0, 0, 0, .33);
  padding: 30px;
  border-radius: 4px;
  background-color: #fff;
}
.px-20 {
  padding-left: 20px;
  padding-right: 20px;
}
.pb-20 {
  padding-bottom: 20px;
}

.plyr__control--overlaid {
  background: #00164e !important;
}

.plyr__control--overlaid svg {
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}
.plyr__control--overlaid:hover svg {
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}


/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-wave">
 *      <div class="sk-rect1"></div>
 *      <div class="sk-rect2"></div>
 *      <div class="sk-rect3"></div>
 *      <div class="sk-rect4"></div>
 *      <div class="sk-rect5"></div>
 *    </div>
 *
 */
.sk-spinner-wave.sk-spinner {
    margin: 0 auto;
    width: 50px;
    height: 30px;
    text-align: center;
    font-size: 10px;
}

.sk-spinner-wave div {
  background-color: #ffab00;
  height: 100%;
  width: 6px;
  display: inline-block;
  margin-right: 2px;
  -webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
  animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
}
.sk-spinner-wave div:last-child {
  margin-right: 0;
}

.sk-spinner-wave .sk-rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.sk-spinner-wave .sk-rect3 {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}

.sk-spinner-wave .sk-rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.sk-spinner-wave .sk-rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

@-webkit-keyframes sk-waveStretchDelay {
    0%, 40%, 100% {
        -webkit-transform: scaleY(0.4);
        transform: scaleY(0.4);
    }

    20% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}

@keyframes sk-waveStretchDelay {
    0%, 40%, 100% {
        -webkit-transform: scaleY(0.4);
        transform: scaleY(0.4);
    }

    20% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}

.faq-columns {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

@media (max-width: 576px) {
  .faq-columns {
    columns: 1;
    -webkit-columns: 1;
    -moz-columns: 1;
  }
}

/* .spinnerLoadingProgress > .sk-spinner {
    display: none;
}

.spinnerLoadingProgress.sk-loading {
    position: relative;
}

.spinnerLoadingProgress.sk-loading:after {
    content: '';
    background-color: rgba(255, 255, 255, 0.2);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.spinnerLoadingProgress.sk-loading > .sk-spinner {
    display: block;
    position: absolute;
    top: 40%;
    left: 0;
    right: 0;
    z-index: 2000;
} */
/* === Logo: Liberty Standard Bank Group === */
.navbar-brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
}

.navbar-brand-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.navbar-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.navbar-brand-name {
  font-family: 'Noto Sans', sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: #ffffff;
  letter-spacing: 1px;
  line-height: 1;
}

.navbar-brand-sub {
  font-family: 'Noto Sans', sans-serif;
  font-weight: 400;
  font-size: 10px;
  color: #ffffff;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* ============================================================
 * Liberty navbar — header logo + right-rail
 * Brand asset: single horizontal SVG (white variant) sourced from
 * the Liberty 2024 brand pack. Composed flame+wordmark approach
 * is retired — use the SVG directly.
 * ============================================================ */

/* Header SVG logo. Height locked to match the SA reference scale. */
.liberty-brand {
  display: inline-flex;
  align-items: center;
  padding: 0;
}
.liberty-brand__img {
  height: 56px;
  width: auto;
  display: block;
}

/* Push PERSONAL / BUSINESS toggles away from the brand so they
   visually separate from the logo (SA banner spacing). */
.header_bg .navbar-nav:not(.navbar-nav--rail) {
  margin-left: 3rem;
}

/* Prevent right nav from wrapping. */
.navbar-nav.ms-auto {
  flex-wrap: nowrap !important;
}

/* Right rail font-size bumped from 12px → 16px to match the
   SA reference (Talk to an Adviser / Media & Insights / About Us). */
.navbar-nav--rail .nav-link {
  font-size: 16px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  white-space: nowrap;
  color: #ffffff;
  font-weight: 500;
  letter-spacing: 0.2px;
}
.navbar-nav--rail .nav-link:hover {
  color: #ffab00;
}

/* Bordered "Login" chip — option B (locked 2026-05-01).
   Plain "Login" + down chevron. White outline + white text by default;
   amber outline + amber text + amber chevron on hover/focus.
   Namibia uses a single Login destination — health-specific labelling
   was retired because Namibia does not currently have a Liberty Health
   product. The href still points at the Liberty Health login until a
   Namibia-specific destination is confirmed (see TICKETS.md). */
.nav-link--login-chip {
  display: inline-flex !important;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 4px;
  padding: 0.45rem 1rem !important;
  margin-left: 0.5rem;
  color: #ffffff;
  background-color: transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-link--login-chip__chevron {
  font-size: 0.7rem;
  color: inherit;           /* picks up the link colour, switches with hover */
  transition: transform 0.15s ease;
  margin-top: 1px;          /* nudge to optical-centre with the cap height */
}
.nav-link--login-chip:hover,
.nav-link--login-chip:focus,
.nav-link--login-chip[aria-expanded="true"] {
  color: #ffab00 !important;
  border-color: #ffab00;
  background-color: transparent;
  text-decoration: none;
}

/* ============================================================
 * Liberty product mega-menu (Personal / Business)
 * SA pattern: orange-amber active toggle (text + underline),
 * translucent indigo dropdown panel ("mirror" effect),
 * white product links with no underline, tight centered columns.
 * ============================================================ */
:root {
  --liberty-indigo: #00164e;
  --liberty-amber: #ffab00;
  --liberty-panel-bg: rgba(0, 22, 78, 0.92);
}

.header_bg .navbar-nav .nav-item.megamenu > .dropdown-toggle {
  position: relative;
  padding: 0 1.25rem;
  height: 100%;
  display: inline-flex;
  align-items: center;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.5px;
  background-color: transparent;
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.header_bg .navbar-nav .nav-item.megamenu.hover-open > .dropdown-toggle,
.header_bg .navbar-nav .nav-item.megamenu > .dropdown-toggle.show,
.header_bg .navbar-nav .nav-item.megamenu > .dropdown-toggle[aria-expanded="true"] {
  background-color: transparent !important;
  color: var(--liberty-amber) !important;
  border-bottom-color: var(--liberty-amber);
}

/* Match the caret to the toggle text colour when active */
.header_bg .navbar-nav .nav-item.megamenu.hover-open > .dropdown-toggle::after,
.header_bg .navbar-nav .nav-item.megamenu > .dropdown-toggle.show::after,
.header_bg .navbar-nav .nav-item.megamenu > .dropdown-toggle[aria-expanded="true"]::after {
  color: var(--liberty-amber);
}

@media (min-width: 992px) {
  .header_bg .navbar-nav .nav-item.megamenu > .dropdown-menu {
    margin-top: 0;
    border: none;
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    padding: 1.75rem 0 1.5rem 0;
    min-width: 100vw;
    left: 0;
    right: 0;
    background-color: var(--liberty-panel-bg) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  /* Pin each dropdown's content to the left edge of its corresponding
   * navbar toggle. JS in Header.vue measures the toggle x-positions
   * and writes --menu-personal-x / --menu-business-x to :root. */
  .header_bg .navbar-nav .nav-item.megamenu .dropdown-menu[aria-labelledby="personalMenu"] > .container {
    margin: 0;
    padding: 0 0 0 var(--menu-personal-x, 0);
    max-width: none;
  }
  .header_bg .navbar-nav .nav-item.megamenu .dropdown-menu[aria-labelledby="businessMenu"] > .container {
    margin: 0;
    padding: 0 0 0 var(--menu-business-x, 0);
    max-width: none;
  }
  .header_bg .navbar-nav .nav-item.megamenu .dropdown-menu .row {
    justify-content: flex-start;
    margin: 0;
    --bs-gutter-x: 0;
  }
  .header_bg .navbar-nav .nav-item.megamenu .dropdown-menu .col-sm-6,
  .header_bg .navbar-nav .nav-item.megamenu .dropdown-menu .col-lg-3 {
    flex: 0 0 auto;
    width: auto;
    min-width: 200px;
    padding: 0 3rem 0 0;
  }
  .header_bg .navbar-nav .nav-item.megamenu .dropdown-menu .col-sm-6:last-child,
  .header_bg .navbar-nav .nav-item.megamenu .dropdown-menu .col-lg-3:last-child {
    padding-right: 0;
  }

  /* Category header — Title Case (matches productCategories.json names verbatim) */
  .header_bg .navbar-nav .nav-item.megamenu .dropdown-header {
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 600;
    letter-spacing: 0.2px;
    margin-bottom: 0.5rem;
    padding: 0;
    text-transform: none;
  }

  /* Product link */
  .header_bg .navbar-nav .nav-item.megamenu .dropdown-item {
    color: #fff !important;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none !important;
    padding: 0.35rem 0;
    background: transparent !important;
    white-space: normal;
  }
  .header_bg .navbar-nav .nav-item.megamenu .dropdown-item:hover,
  .header_bg .navbar-nav .nav-item.megamenu .dropdown-item:focus {
    color: var(--liberty-amber) !important;
    background: transparent !important;
    text-decoration: none !important;
  }
}

/* ============================================================
 * Liberty About Us — left-rail tabs (SA-pattern)
 * ============================================================ */
.about-us-section {
  padding: 4rem 0 5rem;
  background: #fff;
}

/* Keep the rail aside its natural content height so the column
   doesn't stretch into wasted whitespace alongside long content. */
.about-us-section .row > aside {
  align-self: flex-start;
}

.about-us-rail {
  list-style: none;
  padding: 0;
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0, 22, 78, 0.08);
}

/* Three-class specificity (0,3,0) so we beat
   `.nav.flex-column .nav-link { padding-left: 0 }` from style.css
   on source order. */
.about-us-section .about-us-rail .nav-link {
  display: block;
  background: #fff;
  color: #00164e;
  border: none;
  border-bottom: 1px solid rgba(0, 22, 78, 0.08);
  border-radius: 0;
  /* Padding bumped from the previous 1.25rem → 1.75rem so the active label
     text breathes away from the indigo highlight's left edge.
     Longhand to be unambiguous. */
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  font-family: var(--nato-medium, 'Noto Sans', sans-serif);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.about-us-rail .nav-link:hover {
  background: rgba(0, 22, 78, 0.04);
  color: #00164e;
}

.about-us-rail .nav-link.active,
.about-us-rail .nav-link.active:hover {
  background: #00164e;
  color: #fff;
  font-weight: 600;
}

.about-us-rail .nav-item:last-child .nav-link {
  border-bottom: none;
}

/* Right-hand content pane */
.about-us-pane {
  color: #1a1a1a;
  font-size: 16px;
  line-height: 1.7;
}

.about-us-pane > p:last-child {
  margin-bottom: 0;
}

.about-us-heading {
  color: #00164e;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin-bottom: 1.5rem;
}

.about-us-subheading {
  color: #00164e;
  font-size: 22px;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.about-us-statement {
  font-size: 20px;
  font-weight: 500;
  color: #00164e;
  border-left: 3px solid #00164e;
  padding-left: 1.25rem;
  margin: 0 0 1.5rem;
  line-height: 1.5;
}

.about-us-list {
  padding-left: 1.25rem;
  margin-bottom: 1.5rem;
}

.about-us-list li {
  margin-bottom: 0.5rem;
}

.about-us-tagline {
  font-style: italic;
  color: #00164e;
  font-weight: 500;
}

.about-us-tagline em {
  font-style: italic;
  font-weight: 600;
}

/* Leadership grid */
.leadership-grid .leader-card {
  margin: 0;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 22, 78, 0.08);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.leader-photo {
  aspect-ratio: 4 / 5;
  width: 100%;
  background: #f4f5f9;
  overflow: hidden;
}

.leader-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.leader-meta {
  padding: 1rem 1.25rem 1.25rem;
}

.leader-name {
  font-size: 17px;
  font-weight: 600;
  color: #00164e;
  margin: 0 0 0.25rem;
}

.leader-title {
  font-size: 14px;
  color: #5a6178;
  margin: 0;
  line-height: 1.4;
}

/* Board list */
.board-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.board-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.25rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(0, 22, 78, 0.1);
}

.board-row:last-child {
  border-bottom: none;
}

.board-name {
  font-size: 17px;
  font-weight: 600;
  color: #00164e;
  flex: 0 0 auto;
  min-width: 220px;
}

.board-designation {
  font-size: 15px;
  color: #5a6178;
  flex: 1 1 auto;
}

@media (max-width: 767.98px) {
  .about-us-section {
    padding: 2.5rem 0 3rem;
  }
  .about-us-heading {
    font-size: 26px;
  }
  .about-us-statement {
    font-size: 18px;
  }
  .board-row {
    flex-direction: column;
    gap: 0.25rem;
  }
  .board-name {
    min-width: 0;
  }
}

/* ============================================================
 * Liberty Forms & Documents page
 * Two-tab layout (Applications / Claims) with a name+link list.
 * Matches the SA pattern.
 * ============================================================ */
.forms-section {
  padding: 3.5rem 0 5rem;
  background: #fff;
}

.forms-tabs {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  gap: 0.75rem;
  border: none;
}

.forms-tab {
  flex: 0 0 auto;
}

.forms-tab-btn {
  background: #f4f5f9;
  color: #00164e;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
  padding: 0.85rem 2rem;
  font-family: var(--nato-medium, 'Noto Sans', sans-serif);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.forms-tab-btn:hover {
  background: #e9ebf2;
}

.forms-tab-btn.active {
  background: #fff;
  border-color: #d8dbe6;
  border-bottom-color: #fff;
  font-weight: 600;
  color: #00164e;
}

.forms-pane {
  background: #f4f5f9;
  border-radius: 0 4px 4px 4px;
  padding: 1.5rem 2rem;
}

.forms-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 3rem;
}

.forms-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(0, 22, 78, 0.1);
}

.forms-row:last-child,
.forms-row:nth-last-child(2):nth-child(odd) {
  border-bottom: 1px solid rgba(0, 22, 78, 0.1);
}

.forms-name {
  font-size: 15px;
  font-weight: 500;
  color: #00164e;
  flex: 1 1 auto;
  line-height: 1.4;
}

.forms-link {
  color: #00164e;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: color 0.18s ease;
}

.forms-link:hover {
  color: #ffab00;
  text-decoration: none;
}

.forms-link i {
  font-size: 12px;
}

.forms-empty {
  padding: 2rem 0;
  color: #1a1a1a;
}

.forms-cta-btn {
  background: #00164e;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.65rem 1.5rem;
  font-weight: 600;
  font-size: 15px;
  transition: background-color 0.18s ease;
}

.forms-cta-btn:hover {
  background: #001f70;
  color: #fff;
}

@media (max-width: 767.98px) {
  .forms-section {
    padding: 2rem 0 3rem;
  }
  .forms-pane {
    padding: 1rem 1.25rem;
  }
  .forms-list {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .forms-tab-btn {
    padding: 0.7rem 1.25rem;
    font-size: 14px;
  }
}

/* ======================================================================
   Media & Insights — article page (Ehoro and similar publications)
   ====================================================================== */

/* Article container — proper blog-post layout, generous reading width.
   Centered on the page, white surface, lift shadow. The hero banner above
   is full-width; the article body sits inside a card-style container. */
.news-article {
  max-width: 880px;
  margin: -60px auto 64px;
  padding: 56px 64px 64px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 24px 48px rgba(0, 22, 78, 0.10);
  position: relative;
  z-index: 2;
  color: #2a2f3c;
}
.news-article-header {
  border-bottom: 1px solid #e6ebf2;
  padding-bottom: 28px;
  margin-bottom: 32px;
}
.news-byline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #6b7280;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.news-byline-icon {
  font-size: 0.9rem;
  color: #00164E;
}
.news-lede {
  font-size: 1.5rem;
  line-height: 1.45;
  color: #00164E;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.news-article-body {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #2a2f3c;
}
.news-article-body p,
.news-article-body ul,
.news-article-body ol {
  font-size: 1.0625rem;
  line-height: 1.75;
  margin: 0 0 20px;
  color: #2a2f3c;
}
.news-article-body h2 {
  font-size: 1.875rem;
  font-weight: 700;
  color: #00164E;
  letter-spacing: -0.01em;
  margin: 48px 0 16px;
  line-height: 1.25;
}
.news-article-body h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #00164E;
  letter-spacing: -0.01em;
  margin: 40px 0 16px;
  line-height: 1.3;
}
.news-article-body h3:first-child {
  margin-top: 0;
}
.news-article-body ul,
.news-article-body ol {
  padding-left: 24px;
}
.news-article-body li {
  margin-bottom: 12px;
}
.news-article-body strong {
  color: #00164E;
  font-weight: 700;
}
.news-article-body a {
  color: #00164E;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.news-article-body a:hover {
  color: #ffab00;
}

.news-additional-urls {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #e6ebf2;
}
.news-additional-urls summary {
  font-weight: 700;
  color: #00164E;
  cursor: pointer;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.news-additional-urls ul {
  margin-top: 12px;
  padding-left: 24px;
}
.news-additional-urls a {
  color: #00164E;
  font-weight: 600;
}

/* Download-as-PDF CTA card. Rendered above and below the article body. */
.news-download-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #00164E;
  color: #fff !important;
  border-radius: 10px;
  padding: 18px 22px;
  margin: 24px 0 32px;
  text-decoration: none !important;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 16px rgba(0, 22, 78, 0.18);
}
.news-download-cta:hover {
  background: #001a5c;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 22, 78, 0.25);
  color: #fff !important;
}
.news-download-cta--bottom { margin: 40px 0 24px; }
.news-download-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #ffab00;
  flex-shrink: 0;
}
.news-download-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.news-download-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.news-download-help {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.78);
}
.news-download-arrow {
  font-size: 1.2rem;
  color: #ffab00;
  flex-shrink: 0;
}

/* Ehoro performance-vs-benchmark table.
   Rendered from the article HTML in newsData.json `details`. */
.ehoro-table-caption {
  font-size: 0.875rem;
  color: #6b7280;
  margin-bottom: 8px;
  font-style: italic;
}
.ehoro-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e6ebf2;
  border-radius: 8px;
  margin-bottom: 16px;
  background: #fff;
}
.ehoro-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  min-width: 720px;
}
.ehoro-table th,
.ehoro-table td {
  padding: 10px 12px;
  text-align: right;
  border-bottom: 1px solid #f0f3f8;
  vertical-align: middle;
}
.ehoro-table th {
  background: #00164E;
  color: #fff;
  font-weight: 700;
  text-align: center;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ehoro-table th.ehoro-th-fund,
.ehoro-table tbody td:first-child {
  text-align: left;
}
.ehoro-table tbody td:first-child {
  font-weight: 600;
  color: #00164E;
}
.ehoro-table tr.ehoro-tier td {
  background: #dfeffe;
  color: #00164E;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-align: left;
  padding: 8px 12px;
}
/* Color-coded performance cells. Match the legend in the source PDF. */
.ehoro-table .ehoro-ok { background: #c8e6c9; color: #1b5e20; font-weight: 700; }
.ehoro-table .ehoro-warn { background: #fff3c4; color: #8a6d00; font-weight: 700; }
.ehoro-table .ehoro-bad { background: #ffcdd2; color: #b71c1c; font-weight: 700; }
.ehoro-table tbody tr:hover td:not(.ehoro-ok):not(.ehoro-warn):not(.ehoro-bad) {
  background: #f7f9fc;
}

.ehoro-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 8px 0 24px;
  font-size: 0.85rem;
  color: #4a5568;
}
.ehoro-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ehoro-cell {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
}

.ehoro-source {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid #e6ebf2;
  font-size: 0.875rem;
  color: #6b7280;
}
.ehoro-source strong { color: #00164E; }

@media (max-width: 991.99px) {
  .news-article {
    margin: -32px auto 48px;
    padding: 40px 32px 48px;
  }
  .news-lede { font-size: 1.25rem; }
  .news-article-body h2 { font-size: 1.625rem; }
  .news-article-body h3 { font-size: 1.3rem; }
}
@media (max-width: 767.99px) {
  .news-article {
    margin: -16px auto 32px;
    padding: 32px 20px 40px;
    border-radius: 8px;
  }
  .news-lede { font-size: 1.125rem; }
  .news-article-body { font-size: 1rem; }
  .news-article-body p,
  .news-article-body ul,
  .news-article-body ol { font-size: 1rem; }
  .news-download-cta {
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
  }
  .news-download-help { font-size: 0.8rem; }
}