/* BFAG brand theme. Loaded last so these tokens beat the base template's. */
:root {
  --primaryColor: #06332E;
  --secondaryColor: #8FD9C7;
  --optionalColor: #4FAE9B;
  --titleColor: #17302B;
  --paraColor: #667370;
  --ashColor: #F3F7F6;
  --borderColor: rgba(6, 51, 46, 0.12);

  --bfagTeal: #045B53;
  --bfagTealDark: #06332E;
  --bfagNavy: #0A3161;
  --bfagRed: #D10F17;
  --bfagMint: #8FD9C7;
}

/* The base template only ships margin-bottom at this scale; fill in the rest. */
.mt-15 {
  margin-top: 15px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-25 {
  margin-top: 25px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-35 {
  margin-top: 35px;
}

.mt-40 {
  margin-top: 40px;
}

.pt-25 {
  padding-top: 25px;
}

.py-60 {
  padding-top: 60px;
  padding-bottom: 60px;
}

/* Testimonials are paragraphs, not one-liners — fix the height so the marquee can't thrash. */
.testimonial-slider-one .swiper-slide {
  height: auto;
}

.testimonial-card.style-one {
  height: 372px;
  min-height: 372px;
  padding: 24px;
}

.testimonial-card.style-one>div:first-child {
  min-height: 0;
}

.testimonial-card.style-one p {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 0;
}

.testimonial-card.style-one .client-info h6 {
  margin-bottom: 2px;
}

.testimonial-card.style-one .client-info span {
  font-size: 13.5px;
  line-height: 1.4;
  display: block;
}

/* Icon tile for the home slider. No hover recolor: the card's background never changes. */
.bfag-service-slide-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: 22px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--bfagMint);
  font-size: 28px;
}

.fs-xxl-20 {
  font-size: 20px;
  line-height: 1.65;
}

/* ---- Frameworks & standards badge grid ---- */
.bfag-framework-card {
  position: relative;
  height: 100%;
  padding: 28px 22px;
  text-align: center;
  background: var(--whiteColor);
  border: 1px solid rgba(6, 51, 46, 0.08);
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(6, 51, 46, 0.05);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

/* Cross-fade a pre-rendered shadow instead of animating box-shadow (repaints). */
.bfag-framework-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  box-shadow: 0 16px 38px rgba(6, 51, 46, 0.12);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.bfag-framework-card:hover {
  transform: translateY(-5px);
  border-color: var(--bfagTeal);
}

.bfag-framework-card:hover::before {
  opacity: 1;
}

.bfag-framework-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: var(--ashColor);
  color: var(--bfagTeal);
  font-size: 24px;
  transition: background 0.3s ease, color 0.3s ease;
}

.bfag-framework-card:hover .bfag-framework-icon {
  background: var(--bfagTeal);
  color: var(--whiteColor);
}

.bfag-framework-name {
  display: block;
  font-family: var(--secondaryFont);
  font-size: 19px;
  font-weight: 600;
  color: var(--titleColor);
  line-height: 1.25;
  margin-bottom: 6px;
}

.bfag-framework-desc {
  display: block;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--paraColor);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {

  .bfag-framework-card,
  .bfag-framework-icon {
    transition: none;
  }

  .bfag-framework-card:hover {
    transform: none;
  }
}

/* Labels are words, not years, and the template's label column is a fixed 105px. */
.promo-card.style-one {
  display: block;
  padding: 24px 20px 24px 0;
}

.promo-card.style-one span {
  display: block;
  width: 100%;
  font-size: 26px;
  line-height: 1.25;
  margin-bottom: 10px;
}

.promo-card.style-one p {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Square photos in a wide banner: crop low or the glass-wall branding cuts under the header. */
.hero-slide-item.style-one .hero-bg img {
  object-position: 50% 68%;
}

/* Hero slides 2+ are <h2> (single H1 for SEO) — mirror the h1 sizing. */
.hero-slide-item.style-one .hero-content h2.hero-title {
  font-size: 54px;
  line-height: 72px;
  margin-bottom: 155px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-slide-item.style-one .hero-content h2.hero-title {
    font-size: 40px;
    line-height: 58px;
    margin-bottom: 125px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-slide-item.style-one .hero-content h2.hero-title {
    font-size: 54px;
    line-height: 70px;
    margin-bottom: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .hero-slide-item.style-one .hero-content h2.hero-title {
    font-size: 30px;
    line-height: 44px;
    margin-bottom: 30px;
  }
}

/* The wordmark is bigger than the template's mark — lift the width caps, let max-height size it. */
.navbar-brand img {
  max-height: 66px;
  width: auto;
}

/* Footer wordmark, width-only — matching what the old .footer-logo img rule actually applied. */
.bfag-footer-logo {
  max-width: 200px;
  width: auto;
}

@media only screen and (min-width: 1400px) {
  .navbar-area .navbar-brand img {
    max-width: 230px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .navbar-area .navbar-brand img {
    max-width: 210px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .navbar-area .navbar-brand img {
    max-width: 190px;
  }
}

@media only screen and (max-width: 991px) {
  .navbar-area .navbar .navbar-brand img {
    max-width: 165px;
    max-height: 48px;
  }
}

/* The full-colour logo needs a light ground; the header is dark in every state. */
.bfag-logo-pill {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 14px;
  background: var(--whiteColor);
}

@media only screen and (max-width: 991px) {
  .bfag-logo-pill {
    padding: 7px 12px;
    border-radius: 10px;
  }
}

/* Small red accent, echoing the logo's dash/triangle marks */
.bfag-accent-bar {
  display: inline-block;
  width: 40px;
  height: 3px;
  background-color: var(--bfagRed);
  margin-bottom: 14px;
}

.text-navy {
  color: var(--bfagNavy) !important;
}

.bg-navy {
  background-color: var(--bfagNavy) !important;
}

/* Pending-content notice banners */
.bfag-pending-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background-color: #FFF7E6;
  border: 1px solid #F2C94C;
  border-left: 4px solid var(--bfagRed);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 32px;
}

.bfag-pending-notice i {
  color: var(--bfagRed);
  font-size: 20px;
  line-height: 1.4;
}

.bfag-pending-notice p {
  margin: 0;
  color: #4A3B00;
  font-size: 15px;
  line-height: 1.6;
}

.bfag-pending-notice strong {
  color: #4A3B00;
}

.bfag-service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 16px;
  background-color: var(--ashColor);
  color: var(--bfagTeal);
  font-size: 28px;
  margin-bottom: 26px;
  transition: var(--transition);
}

/* Offsets in-page anchors below the sticky header */
.bfag-anchor-offset {
  scroll-margin-top: 120px;
}

/* style.css hardcodes this box's background instead of using --primaryColor */
.cta-box.style-one {
  background-color: var(--bfagTealDark);
}

/* Office / contact cards */
.bfag-office-card {
  height: 100%;
  padding: 32px 28px;
  background-color: var(--whiteColor);
  border-radius: 18px;
  box-shadow: 0 10px 40px rgba(6, 51, 46, 0.06);
}

/* ---- Contact page: trust & authority ---- */
.bfag-contact-panel {
  position: relative;
  /* Fills the column so panel and form card end level. Only valid while the panel is the only child. */
  height: 100%;
  padding: 48px 42px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(158deg, var(--bfagTealDark) 0%, #0a4a42 52%, var(--bfagNavy) 128%);
  color: #fff;
}

.bfag-contact-panel::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(143, 217, 199, 0.22), transparent 70%);
  pointer-events: none;
}

.bfag-contact-panel>* {
  position: relative;
  z-index: 1;
}

.bfag-contact-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bfagMint);
  margin-bottom: 16px;
}

.bfag-contact-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--bfagRed);
}

.bfag-contact-panel h3 {
  color: #fff;
}

.bfag-method {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.bfag-method.first {
  border-top: none;
  padding-top: 0;
}

.bfag-method-icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(143, 217, 199, 0.14);
  color: var(--bfagMint);
  font-size: 20px;
  transition: all 0.3s ease;
}

.bfag-method:hover .bfag-method-icon {
  background: var(--bfagMint);
  color: var(--bfagTealDark);
}

.bfag-method-label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 4px;
}

.bfag-method a,
.bfag-method p {
  color: #fff;
  margin: 0;
  font-size: 16px;
  transition: color 0.25s ease;
}

.bfag-method a:hover {
  color: var(--bfagMint);
}

.bfag-offices {
  display: grid;
  gap: 12px;
  margin-top: 6px;
}

.bfag-office-line {
  display: flex;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

.bfag-office-line i {
  color: var(--bfagMint);
  margin-top: 2px;
}

.bfag-office-line strong {
  color: #fff;
  font-weight: 600;
}

.bfag-trust-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bfag-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
}

.bfag-trust-pill i {
  font-size: 14px;
  line-height: 1;
  color: var(--bfagMint);
}

/* ---- Form card ---- */
.bfag-form-card {
  height: 100%;
  background: var(--whiteColor);
  border-radius: 20px;
  padding: 46px 42px;
  box-shadow: 0 24px 60px rgba(6, 51, 46, 0.08);
}

.bfag-field {
  margin-bottom: 24px;
}

.bfag-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--titleColor);
  margin-bottom: 8px;
}

.bfag-field label .req {
  color: var(--bfagRed);
  margin-left: 3px;
}

.bfag-input {
  width: 100%;
  background: var(--ashColor);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 15px;
  font-family: var(--primaryFont);
  color: var(--titleColor);
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.bfag-input::placeholder {
  color: #9aa5a2;
}

.bfag-input:hover {
  background: #eef4f2;
}

.bfag-input:focus {
  outline: none;
  background: #fff;
  border-color: var(--bfagTeal);
  box-shadow: 0 0 0 3px rgba(4, 91, 83, 0.14);
}

textarea.bfag-input {
  min-height: 130px;
  resize: vertical;
}

.bfag-input.is-invalid {
  border-color: var(--bfagRed);
  box-shadow: 0 0 0 3px rgba(209, 15, 23, 0.12);
}

.bfag-error {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--bfagRed);
}


/* Success state fills the card, which is height:100% to match the contact panel. */
.bfag-form-card.bfag-sent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 440px;
}

.bfag-sent-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin-bottom: 26px;
  border-radius: 50%;
  background: var(--bfagMint);
  color: var(--bfagTealDark);
  font-size: 38px;
  line-height: 1;
}

.bfag-sent-title {
  margin: 0 0 12px;
  font-size: 26px;
  line-height: 1.3;
  color: var(--titleColor);
}

.bfag-sent-lead {
  max-width: 390px;
  margin: 0 0 26px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--paraColor);
}

.bfag-sent-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 430px;
  margin: 0 0 30px;
  padding: 14px 18px;
  text-align: left;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--paraColor);
  background: var(--ashColor);
  border-radius: 12px;
}

.bfag-sent-note i {
  flex: 0 0 auto;
  margin-top: 1px;
  font-size: 16px;
  color: var(--bfagTeal);
}

.bfag-sent-again {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1px solid var(--borderColor);
  border-radius: 999px;
  background: transparent;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--titleColor);
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.bfag-sent-again:hover {
  border-color: var(--bfagTeal);
  color: var(--bfagTeal);
}

/* Map strip */
.bfag-contact-map {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(6, 51, 46, 0.08);
  line-height: 0;
}

.bfag-contact-map iframe {
  width: 100%;
  height: 340px;
  border: 0;
  filter: grayscale(0.2) contrast(1.05);
}

/* A full-width map needs more height to stay in proportion. */
.bfag-contact-map.is-full iframe {
  height: 520px;
}

@media (max-width: 991px) {

  .bfag-contact-panel,
  .bfag-form-card {
    padding: 34px 26px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .bfag-method-icon,
  .bfag-input,
  .bfag-sent-again,
  .bfag-method a {
    transition: none;
  }
}

/* Small utilities replacing inline styles on the contact page. */
.text-teal {
  color: var(--bfagTeal);
}

.bfag-office-bullet {
  font-size: 6px;
}

.bfag-panel-divider {
  margin-top: 15px;
  padding-top: 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.bfag-map-caption {
  margin: 12px 0 0;
  font-size: 13.5px;
  color: var(--paraColor);
}

/* 404 sits outside (site), so no header or footer. min-height guards short viewports. */
.error-wrap {
  min-height: 640px;
}

/* style.css pins column 2 to 50px, too narrow for "Certification". Match its specificity to win. */
/* Without this the Scope value drops to its own line when the Framework name is long. */
.about-area.style-one .about-content .achievement-box ul li {
  /* !important because Bootstrap's .flex-wrap utility is !important too. */
  flex-wrap: nowrap !important;
}

.about-area.style-one .about-content .achievement-box ul li span {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 12px;
}

.about-area.style-one .about-content .achievement-box ul li span:nth-child(2) {
  width: auto;
  flex: 0 0 auto;
  padding-right: 0;
  text-align: right;
}

/* .promo-box is pinned to 462px, wider than a phone, so overflow-hidden clips it. The clip-path is sized for 462px and has to go too. */
@media only screen and (max-width: 575px) {
  .promo-area.style-one .promo-box {
    width: 100%;
    padding: 32px 24px 60px;
    clip-path: none;
    border-radius: 20px;
  }
}

/* Back to top and the chat bubble both sit bottom-right — stack ours above it. */
.progress-wrap {
  bottom: 85px;
  right: 20px;
}

/* ---- Dark mode for the .bfag-* surfaces ---- */

/* scoped, not token overrides: style.css uses --titleColor/--ashColor as backgrounds */
.theme-dark {
  --borderColor: rgba(255, 255, 255, 0.15);
}

/* Cards sitting on the page background */
.theme-dark .bfag-framework-card,
.theme-dark .bfag-office-card,
.theme-dark .bfag-form-card {
  background: var(--aztechColor);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.theme-dark .bfag-framework-name,
.theme-dark .bfag-field label {
  color: var(--whiteColor);
}

.theme-dark .bfag-framework-desc,
.theme-dark .bfag-map-caption {
  color: var(--darkParaColor);
}

.theme-dark .bfag-framework-card::before {
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.55);
}

/* Icon chips read as a lighter block against the card */
.theme-dark .bfag-framework-icon,
.theme-dark .bfag-service-icon {
  background: rgba(255, 255, 255, 0.08);
  color: var(--secondaryColor);
}

/* Teal fails contrast on #111828 — accents switch to the mint */
.theme-dark .text-teal {
  color: var(--secondaryColor);
}

.theme-dark .bfag-framework-card:hover {
  border-color: var(--secondaryColor);
}

.theme-dark .bfag-framework-card:hover .bfag-framework-icon {
  background: var(--secondaryColor);
  color: var(--bfagTealDark);
}

/* Form controls */
.theme-dark .bfag-input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--whiteColor);
}

.theme-dark .bfag-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.theme-dark .bfag-input:hover {
  background: rgba(255, 255, 255, 0.1);
}

.theme-dark .bfag-input:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--secondaryColor);
  box-shadow: 0 0 0 3px rgba(143, 217, 199, 0.18);
}

/* Notices keep their amber / green meaning, tinted for a dark surface */
.theme-dark .bfag-pending-notice {
  background-color: rgba(242, 201, 76, 0.1);
  border-color: rgba(242, 201, 76, 0.35);
}

.theme-dark .bfag-pending-notice p,
.theme-dark .bfag-pending-notice strong {
  color: #F0DFA8;
}

/* Embedded maps glare against a dark page */
.theme-dark .bfag-contact-map iframe {
  filter: grayscale(0.3) contrast(1.05) brightness(0.85);
}

.theme-dark .bfag-sent-title {
  color: var(--whiteColor);
}

.theme-dark .bfag-sent-lead,
.theme-dark .bfag-sent-note {
  color: var(--darkParaColor);
}

.theme-dark .bfag-sent-note {
  background: rgba(255, 255, 255, 0.06);
}

.theme-dark .bfag-sent-note i,
.theme-dark .bfag-sent-again:hover {
  color: var(--secondaryColor);
}

.theme-dark .bfag-sent-again {
  color: var(--whiteColor);
  border-color: rgba(255, 255, 255, 0.2);
}

.theme-dark .bfag-sent-again:hover {
  border-color: var(--secondaryColor);
}

.hero-slide-item.style-one:after {
  background: linear-gradient(90deg, rgba(0, 37, 44, 0.92) 0%, rgba(0, 37, 44, 0.6) 42%, rgba(0, 37, 44, 0.18) 100%);
}

@media only screen and (min-width: 992px) {
  .hero-slide-item.style-one .hero-para {
    margin-top: 230px;
  }
}

@media (hover: none), (max-width: 991px) {
  .cursor,
  .cursor-inner {
    display: none;
  }
}