/* =========================================================
   FONT OVERRIDE
   ========================================================= */
@font-face {
  font-family: "Aspekta";
  src: url("/fonts/AspektaVF.b042a8.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

html, body {
  font-family: "Aspekta", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/****************************************************
 HERO OVERLAY FIX — MATCH LIVE WORDPRESS SITE
****************************************************/

/* Ensure hero can host overlay */
.hero-banner {
  position: relative;
  overflow: hidden;
}

/* Force the hero image to behave like a true background */
.hero-banner img.img-background{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0 !important;
}

/* Dark overlay — above image, below text */
.hero-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;

  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.40) 35%,
    rgba(0, 0, 0, 0.15) 60%,
    rgba(0, 0, 0, 0.00) 75%
  );
}

/* Keep the text above the overlay */
.hero-banner .container-xxl,
.hero-banner .row,
.hero-banner .col-lg-5 {
  position: relative;
  z-index: 2;
}
/* =========================================================
   WORDPRESS wp-custom-css (copied from live site)
   ========================================================= */

#menu-menu-primary .menu-item.active .nav-link {
  text-decoration: none !important;
}
/* =========================================================
   FIX 1: TEXT COLOR — MATCH LIVE WORDPRESS SITE
   ========================================================= */

/* Orange gradient sections (process + accordion areas) */
.bg-gradient,
section.bg-gradient,
.two-columns.bg-gradient,
.collapse-wrapper,
.accordion,
.accordion-row,
.accordion-header,
.accordion-button,
.accordion-button span,
.accordion-button strong,
.accordion-button p {
  color: #ffffff !important;
}

/* Ensure headings are white */
.bg-gradient h1,
.bg-gradient h2,
.bg-gradient h3,
.bg-gradient h4,
.bg-gradient h5,
.bg-gradient h6 {
  color: #ffffff !important;
}

/* Ensure paragraph + list text is white */
.bg-gradient p,
.bg-gradient li {
  color: #ffffff !important;
}

/* =========================================================
   FIX 2: EXPAND / COLLAPSE LABEL BEHAVIOR
   ========================================================= */

/* Hide both labels by default */
button.btn-collapse .btn-open,
button.btn-collapse .btn-hide {
  display: none !important;
}

/* COLLAPSED state → show Expand */
button.btn-collapse.collapsed .btn-open {
  display: inline !important;
}

/* EXPANDED state → show Collapse */
button.btn-collapse:not(.collapsed) .btn-hide {
  display: inline !important;
}

/* Accessibility safety (aria-expanded) */
button.btn-collapse[aria-expanded="false"] .btn-open {
  display: inline !important;
}

button.btn-collapse[aria-expanded="true"] .btn-hide {
  display: inline !important;
}
/* =========================================================
   SERVICES OFFERED — FORCE BLACK TEXT (ONLY THIS SECTION)
   ========================================================= */

/* Main text inside Services Offered */
.collapse-wrapper {
  color: #000000 !important;
}

/* Paragraphs and lists */
.collapse-wrapper p,
.collapse-wrapper li,
.collapse-wrapper ul {
  color: #000000 !important;
}

/* Expand / Collapse button text */
.collapse-wrapper .btn,
.collapse-wrapper .btn span {
  color: #000000 !important;
}

/* Expand / Collapse icons */
.collapse-wrapper svg,
.collapse-wrapper svg path {
  fill: #000000 !important;
}
/* =========================================================
   ACCORDION OPEN STATE — REMOVE WHITE BOX AROUND HEADINGS
   ========================================================= */

/* When an accordion item is OPEN, Bootstrap adds a background + shadow */
.accordion .accordion-button:not(.collapsed) {
  background-color: transparent !important;
  color: inherit !important;         /* keeps your white/black rules working */
  box-shadow: none !important;
}

/* Also remove any border that can look like a box */
.accordion .accordion-button {
  border: 0 !important;
  box-shadow: none !important;
}

/* Remove the focus ring/outline that can appear as a box after clicking */
.accordion .accordion-button:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* If Bootstrap is adding a background to the accordion item itself */
.accordion .accordion-item,
.accordion .accordion-header {
  background: transparent !important;
}
/* =========================================================
   FIX: FAQ accordion is inheriting "orange-section" styles
   (question text becomes invisible on light background)
   ========================================================= */

/* 1) Make accordion text BLACK on light sections (FAQ / light-gray sections) */
.bg-white .accordion-button,
.bg-white .accordion-button *,
.bg-gradient-gray .accordion-button,
.bg-gradient-gray .accordion-button * {
  color: #111 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* If your FAQ section has an id/class (common), these also help and are safe */
#faq .accordion-button,
#faq .accordion-button *,
.faq .accordion-button,
.faq .accordion-button * {
  color: #111 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* 2) Keep FAQ accordion headers from going "transparent" if you overrode that globally */
.bg-white .accordion-item,
.bg-white .accordion-button,
.bg-gradient-gray .accordion-item,
.bg-gradient-gray .accordion-button {
  background-color: transparent !important;
}

/* 3) (Optional but recommended) remove the WHITE BOX on the ORANGE accordion expand state only */
.bg-gradient-orange .accordion-item,
.bg-gradient-orange .accordion-button:not(.collapsed),
.bg-gradient-orange .accordion-button:focus {
  background: transparent !important;
  box-shadow: none !important;
}
/* =========================================================
   FINAL FIX: FAQ expanded text color (light background)
   ========================================================= */

/* Target ONLY the FAQ accordion body text */
#faq .accordion-body,
.faq .accordion-body,
.bg-white .accordion-body,
.bg-gradient-gray .accordion-body {
  color: #111 !important;
  opacity: 1 !important;
}

/* Ensure paragraphs, lists, and links inside FAQ answers are readable */
#faq .accordion-body *,
.faq .accordion-body *,
.bg-white .accordion-body *,
.bg-gradient-gray .accordion-body * {
  color: #111 !important;
  opacity: 1 !important;
}

/* Keep icons correct (don’t inherit white from orange section rules) */
#faq .accordion-button svg,
.faq .accordion-button svg {
  fill: currentColor !important;
}
/* =========================================================
   FINAL FIX: "Why Choose CyberSteward?" right-column text
   ========================================================= */

/* Force right-column text to black on light grey background */
.bg-gradient-gray .col-lg-6:last-child,
.bg-gradient-gray .col-lg-6:last-child * {
  color: #111 !important;
  opacity: 1 !important;
}
/* =========================================================
   FINAL FIX: Why Choose CyberSteward – right column text
   ========================================================= */

/* Force ALL text in right column to black on light grey bg */
.bg-gradient-gray .row > .col-lg-6:nth-child(2),
.bg-gradient-gray .row > .col-lg-6:nth-child(2) * {
  color: #111 !important;
  opacity: 1 !important;
}
/* =========================================================
   FIX: "Why Choose CyberSteward?" right-column text → black
   ========================================================= */

/* Try the most likely containers used on this build */
section.bg-gradient-gray .col-inner,
section.bg-gradient-gray .col-inner *,

section.bg-gradient-gray .col-lg-6:last-child,
section.bg-gradient-gray .col-lg-6:last-child *,

section.bg-gradient-gray [class*="col-"]:last-child,
section.bg-gradient-gray [class*="col-"]:last-child * {
  color: #111 !important;
  opacity: 1 !important;
  --bs-text-opacity: 1 !important;
}
/* =========================================================
   FIX: Make accordion dotted icons WHITE on orange section
   ========================================================= */

/* Target ONLY the dotted SVG icons inside the orange process section */
section.bg-gradient-orange .accordion-button svg,
section.bg-gradient-orange .accordion-button svg path {
  fill: #fff !important;
  color: #fff !important;
}
/* =========================================================
   FIX: Orange accordion dotted icon (SVG sprite) stays black
   Cause: sprite paths use fill: var(--color1, #000)
   Solution: override --color1 locally + add fill fallbacks
   ========================================================= */

/* 1) Set the sprite color variables to white ONLY in orange section */
section.bg-gradient-orange,
section.bg-gradient-orange * {
  --color1: #fff !important;
  --color: #fff !important;
  --icon-color: #fff !important;
}

/* 2) Fallbacks (in case some icons use fill/currentColor instead of vars) */
section.bg-gradient-orange .accordion-button svg,
section.bg-gradient-orange .accordion-button svg * ,
section.bg-gradient-orange .accordion-button .icon,
section.bg-gradient-orange .accordion-button .icon * {
  fill: #fff !important;
  color: #fff !important;
}

/* 3) If the dotted icon is an SVG <use> reference, this catches it too */
section.bg-gradient-orange .accordion-button use {
  fill: #fff !important;
}
/* =========================================================
   FORCE the dotted accordion icons to WHITE (orange section)
   Works even if the sprite path has inline fill/style
   ========================================================= */

/* A) Force fill/stroke on the actual SVG + its internal paths */
.bg-gradient-orange .accordion-button svg.icon,
.bg-gradient-orange .accordion-button svg.icon * {
  fill: #fff !important;
  stroke: #fff !important;
  color: #fff !important;
}

/* B) Specifically catch the dotted icon you inspected earlier */
.bg-gradient-orange .accordion-button svg.icon.icon-expand,
.bg-gradient-orange .accordion-button svg.icon.icon-expand * {
  fill: #fff !important;
  stroke: #fff !important;
  color: #fff !important;
}

/* C) If the icon is a <use> reference, force it too */
.bg-gradient-orange .accordion-button svg use {
  fill: #fff !important;
  stroke: #fff !important;
}