/* CTA Banner
   Full-width call-to-action band: icon + heading + body on one side, button + caption
   on the other. Settable section background + light/dark text scheme (.scheme-light /
   .scheme-dark). Brand: $darkblue #023769 / $blue #03a1e2 · breakpoints 991.98 / 767.98. */

.cta-banner {
  position: relative;
  padding-top: 46px;
  padding-bottom: 46px;
}

/* Narrower content well than the page default (still centered).
   Keep width + max-width:100% so it caps at the viewport on mobile
   (overriding only max-width leaves the base width:1440px uncapped → overflow). */
.cta-banner .content-area {
  width: 1000px;
  max-width: 100%;
}

.cta-banner .cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* Left: icon + text */
.cta-banner .cta-content {
  display: flex;
  align-items: center;
  gap: 22px;
}
.cta-banner .cta-icon {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #03a1e2; /* theme blue circle for the icon */
  display: flex;
  align-items: center;
  justify-content: center;
}
.cta-banner .cta-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.cta-banner .cta-text h2 {
  font-size: 26px;
  line-height: 1.25;
  margin: 0 0 6px;
}
.cta-banner .cta-body p {
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}

/* Right: button + caption */
.cta-banner .cta-action {
  flex: 0 0 auto;
  text-align: center;
}
.cta-banner .cta-action .btn {
  white-space: normal;
}
.cta-banner .cta-caption {
  font-size: 13px;
  line-height: 1.5;
  margin: 12px 0 0;
}

/* ---- Text schemes ---- */
/* Light text (for dark section backgrounds) */
.cta-banner.scheme-light .cta-text h2 {
  color: #fff;
}
.cta-banner.scheme-light .cta-body p {
  color: rgba(255, 255, 255, 0.82);
}
.cta-banner.scheme-light .cta-caption {
  color: rgba(255, 255, 255, 0.7);
}
/* Dark text (for light section backgrounds) */
.cta-banner.scheme-dark .cta-text h2 {
  color: #023769;
}
.cta-banner.scheme-dark .cta-body p {
  color: rgba(2, 55, 105, 0.75);
}
.cta-banner.scheme-dark .cta-caption {
  color: rgba(2, 55, 105, 0.6);
}

/* Tablet / mobile — stack and center */
@media (max-width: 991.98px) {
  .cta-banner .cta-inner {
    flex-direction: column;
    text-align: center;
    gap: 28px;
  }
  .cta-banner .cta-content {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
}
@media (max-width: 767.98px) {
  .cta-banner .cta-text h2 {
    font-size: 22px;
  }
}