.bgt-commercial-flow {
  width: 100%;
  background: #071c27;
  color: #fff;
}

.bgt-commercial-flow,
.bgt-commercial-flow * {
  box-sizing: border-box;
}

.bgt-commercial-flow__container {
  width: 100%;
  max-width: 1340px;
  margin-inline: auto;
}

.bgt-commercial-flow__grid {
  display: grid;
  grid-template-columns: 39% minmax(0, 1fr);
  column-gap: 72px;
  align-items: start;
}

.bgt-commercial-flow__left,
.bgt-commercial-flow__steps {
  min-width: 0;
}

/* BGT 2026.56 — keep the marked left content sticky only while this widget's
   own grid/container is scrolling through the viewport. Because the sticky
   element is the left grid item itself, its containing block is this widget's
   grid, so it automatically releases at the bottom of the Commercial Flow
   section instead of continuing into the next Elementor section. */
@media (min-width: 1025px) {
  .bgt-commercial-flow__left {
    position: sticky;
    top: var(--bgt-commercial-flow-sticky-top, 100px);
    align-self: start;
    z-index: 2;
  }
}

@media (max-width: 1024px) {
  .bgt-commercial-flow__left {
    position: static;
    top: auto;
  }
}

.bgt-commercial-flow__eyebrow {
  margin: 0 0 24px;
  color: #81edb9;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.bgt-commercial-flow__heading {
  margin: 0;
  color: #fff;
  font-family: inherit;
  font-size: 60px;
  font-weight: 700;
  line-height: .99;
  letter-spacing: -.035em;
}

.bgt-commercial-flow__description {
  margin-top: 26px;
  max-width: 455px;
  color: #9cb8c6;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
}

.bgt-commercial-flow__button {
  margin-top: 30px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border: 0;
  border-radius: 28px;
  background: #fff;
  color: #071c27;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

.bgt-commercial-flow__button:hover,
.bgt-commercial-flow__button:focus-visible {
  color: #071c27;
  text-decoration: none !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
}

.bgt-commercial-flow__button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #13b979;
}

.bgt-commercial-flow__button-icon svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}

.bgt-commercial-flow__steps {
  border-top: 1px solid #24424d;
}

.bgt-commercial-flow__step {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) max-content;
  column-gap: 18px;
  align-items: start;
  padding: 29px 4px 29px 0;
  border-bottom: 1px solid #24424d;
  color: inherit;
  text-decoration: none !important;
}

.bgt-commercial-flow__step:hover,
.bgt-commercial-flow__step:focus-visible {
  text-decoration: none !important;
}

.bgt-commercial-flow__number {
  padding-top: 2px;
  color: #74e7ae;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
}

.bgt-commercial-flow__step-title {
  color: #fff;
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.bgt-commercial-flow__step-description {
  margin-top: 10px;
  max-width: 610px;
  color: #91b3c2;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.55;
}

.bgt-commercial-flow__step-arrow {
  width: 46px;
  height: 46px;
  margin-top: -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  border: 2px solid #2f6573;
  border-radius: 50%;
  background: rgba(71, 229, 160, .06);
  color: #fff;
  --bgt-flow-icon-rotation: 45deg;
  --bgt-flow-icon-hover-scale: 1.06;
  --bgt-flow-icon-glow-size: 12px;
  --bgt-flow-icon-glow-color: rgba(71, 229, 160, .16);
  box-shadow: 0 0 var(--bgt-flow-icon-glow-size) var(--bgt-flow-icon-glow-color);
  transform: rotate(var(--bgt-flow-icon-rotation));
  transition: border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.bgt-commercial-flow__step-arrow svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.bgt-commercial-flow__step-arrow i {
  font-size: 18px;
  color: currentColor;
  line-height: 1;
}

/* BGT 2026.61 — the Commercial Flow icon glyphs are white by default so
   they stay clear and prominent against the dark section. The Elementor
   "White Step Icon Glyphs" switch can be turned off whenever custom global
   or individual step colours are preferred. */
.bgt-commercial-flow--white-step-icons .bgt-commercial-flow__step-arrow,
.bgt-commercial-flow--white-step-icons .bgt-commercial-flow__step-arrow i {
  color: #fff !important;
}

.bgt-commercial-flow--white-step-icons .bgt-commercial-flow__step-arrow svg {
  color: #fff !important;
  fill: #fff !important;
}

.bgt-commercial-flow__step:hover .bgt-commercial-flow__step-arrow,
.bgt-commercial-flow__step:focus-visible .bgt-commercial-flow__step-arrow {
  border-color: #47e5a0;
  background: rgba(71, 229, 160, .12);
  color: #fff;
  box-shadow: 0 0 calc(var(--bgt-flow-icon-glow-size) + 4px) var(--bgt-flow-icon-glow-color);
  transform: rotate(var(--bgt-flow-icon-rotation)) scale(var(--bgt-flow-icon-hover-scale));
}

@media (max-width: 1024px) {
  .bgt-commercial-flow__grid {
    grid-template-columns: 1fr !important;
    row-gap: 54px;
  }

  .bgt-commercial-flow__heading {
    font-size: 52px;
  }

  .bgt-commercial-flow__description {
    max-width: 650px;
  }
}

@media (max-width: 767px) {
  .bgt-commercial-flow__grid {
    row-gap: 42px;
  }

  .bgt-commercial-flow__eyebrow {
    font-size: 10px;
    letter-spacing: .18em;
  }

  .bgt-commercial-flow__heading {
    font-size: 40px;
    line-height: 1.02;
  }

  .bgt-commercial-flow__description {
    font-size: 15px;
    line-height: 1.6;
  }

  .bgt-commercial-flow__step {
    grid-template-columns: 36px minmax(0, 1fr) max-content;
    column-gap: 12px;
    padding: 22px 0;
  }

  .bgt-commercial-flow__step-title {
    font-size: 17px;
  }

  .bgt-commercial-flow__step-description {
    margin-top: 7px;
    font-size: 12px;
  }

  .bgt-commercial-flow__step-arrow {
    width: 38px;
    height: 38px;
  }
}

/* BGT v22 responsive hardening */
.bgt-commercial-flow { max-width: 100%; overflow-x: clip; }
.bgt-commercial-flow__container,
.bgt-commercial-flow__grid,
.bgt-commercial-flow__left,
.bgt-commercial-flow__steps,
.bgt-commercial-flow__step { min-width: 0; max-width: 100%; }
.bgt-commercial-flow__heading,
.bgt-commercial-flow__description,
.bgt-commercial-flow__step-title,
.bgt-commercial-flow__step-description { overflow-wrap: anywhere; }
@media (max-width: 1300px) {
  .bgt-commercial-flow__container { padding-inline: clamp(18px, 2.6vw, 32px); }
}
@media (max-width: 900px) {
  .bgt-commercial-flow__grid { grid-template-columns: 1fr !important; row-gap: 42px; }
}
@media (max-width: 560px) {
  .bgt-commercial-flow__heading { font-size: clamp(36px, 10.8vw, 44px) !important; line-height: 1.03 !important; }
  .bgt-commercial-flow__step { grid-template-columns: 30px minmax(0,1fr) max-content; column-gap: 10px; }
  .bgt-commercial-flow__step-title { font-size: 16px; }
  .bgt-commercial-flow__step-arrow { width: 38px; height: 38px; }
}
@media (max-width: 380px) {
  .bgt-commercial-flow__container { padding-inline: 14px; }
  .bgt-commercial-flow__step { grid-template-columns: 26px minmax(0,1fr) max-content; column-gap: 8px; }
  .bgt-commercial-flow__step-arrow { width: 36px; height: 36px; }
}