:root {
      --hero-blue: #0f4cff;
      --hero-eyebrow: #9db4f5;
        --remarketing-hero-section: #EEF4FC;
  --remarketing-hero-section-border-color: #d8d8d8;
  --tagline-inner-wrapper-border-color: #d8d8d8;
    }


/* 2. Override variables when the user prefers Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --remarketing-hero-section: #575757;
      --remarketing-hero-section-border-color: #373737;

  }
}

.remarketing-hero-section {
    position: relative;
    display: flex;
    background-color: var(--remarketing-hero-section);
    border-bottom: 1px solid var(--remarketing-hero-section-border-color);
}

.remarketing-hero-section h1 {
    margin-bottom: 10px;
    margin-top: 10px;
    line-height: 110%;
    color: var(--igg-dark-text);
    font-size: 3rem;
    font-weight: normal;
}


.remarketing-hero-section p {
    font-size: 1.2em;
    line-height: 120%;
    color: var(--igg-dark-text);
    font-weight: normal;
   
}


    /* ---------- Base (mobile, < 768px) ---------- */
    .hero {
      position: relative;
      display: flex;
      align-items: flex-end;            /* copy sits at the bottom */
        min-height: 660px;
      max-height: 660px;
      color: #fff;
      background-color: #0b1020;
      /* Replace with your portrait crop */
      background-image: url("../images/affiliate-hero-mobile.jpg");
      background-size: cover;
      background-position: 60% top;
      overflow: hidden;
    }

    /* Gradient overlay: transparent at top, dark navy behind the copy */
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        rgba(8, 12, 30, 0) 0%,
        rgba(8, 12, 30, 0) 40%,
        rgba(8, 12, 30, .85) 62%,
        rgba(8, 12, 30, .97) 100%
      );
    }

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

    .hero-content { padding: 3rem 0 2.5rem; }

    .hero-eyebrow {
      font-size: .95rem;
      font-weight: 500;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--hero-eyebrow);
      margin-bottom: 1rem;
    }

    .hero-title {
      font-weight: 400;
      font-size: 2.75rem;
      line-height: 1.12;
      letter-spacing: -.01em;
      margin-bottom: 1.25rem;
      text-shadow: 2px 2px #000000;
    }

    .hero-text {
      font-weight: 300;
      font-size: 1.15rem;
      line-height: 1.7;
      color: rgba(255, 255, 255, .92);
      margin-bottom: 2rem;
    }

    .btn-hero {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      background: var(--hero-blue);
      color: #fff;
      font-weight: 600;
      font-size: 1rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: 1.15rem 2.25rem;
      border: 0;
      border-radius: 50rem;
      box-shadow: 0 0 28px rgba(15, 76, 255, .55);
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    }
    .btn-hero:hover,
    .btn-hero:focus-visible {
      background: #2d62ff;
      color: #fff;
      transform: translateY(-1px);
      box-shadow: 0 0 36px rgba(15, 76, 255, .75);
    }

    /* Full-width button on small phones */
    @media (max-width: 575.98px) {
      .btn-hero { width: 100%; }
      .hero-title { font-size: 2.5rem; }
    }

    /* ---------- Tablet (768px - 1199px) ---------- */
    @media (min-width: 768px) {
      .hero {
        align-items: center;            /* copy vertically centred, left */
        min-height: 560px;
        height: 520px;
        max-height: 520px;
        background-image: url("../images/affiliate-hero-desktop.jpg");
        background-position: 70% center;
      }

      /* Horizontal gradient: dark left, clear right */
      .hero::before {
        background: linear-gradient(
          to right,
          rgba(20, 22, 40, .78) 0%,
          rgba(20, 22, 40, .55) 45%,
          rgba(20, 22, 40, 0) 75%
        );
      }

      .hero-content { max-width: 30rem; padding: 0; }
      .hero-eyebrow { font-size: .9rem; margin-bottom: 1.25rem; }
      .hero-title   { font-size: 3.25rem; margin-bottom: 1.5rem; }
      .hero-text    { font-size: 1.1rem; margin-bottom: 2.25rem; }
      .btn-hero     { padding: 1.1rem 2.5rem; }
    }

    /* ---------- Desktop (>= 1200px) ---------- */
    @media (min-width: 1200px) {
      .hero {
        height: 50vw;
        max-height: 820px;
        background-position: center;
      }

      .hero::before {
        background: linear-gradient(
          to right,
          rgba(20, 22, 40, .72) 0%,
          rgba(20, 22, 40, .45) 38%,
          rgba(20, 22, 40, 0) 65%
        );
      }

      .hero-content { max-width: 36rem; }
      .hero-eyebrow { font-size: .85rem; letter-spacing: .14em; }
      .hero-title   { font-size: 4rem; line-height: 1.1; }
      .hero-text    { font-size: 1.15rem; max-width: 30rem; }
    }

    /* Extra-large screens: keep content aligned with the container grid */
    @media (min-width: 1400px) {
      .hero-title { font-size: 4.25rem; }
    }




@media (max-width: 992px) {
  .tagline-main-wrapper > .tagline-inner-wrapper {
    border-right: none !important;
  }
  .tagline-images img {
    width: 50% !important;
  }
}

.tagline-main-wrapper > .tagline-inner-wrapper {
   border-right: solid 1px var(--tagline-inner-wrapper-border-color);

}

.tagline-main-wrapper > .tagline-inner-wrapper:last-child {
   border-right: none;
}



.tagline-icons {
  font-size: 2.5rem;
  text-align: center;
  color: var(--igg-dark-blue);
}


.tagline-images {
  display: flex !important;
    justify-content: center;
}

.tagline-images img {
  width: 85%;
}

.tagline-text {
  font-weight: 600;
  text-align: center;
}

.tagline-subtext {
  text-align: center;
}


.hero-ul-class {
    padding-left: 16px;
}

.hero-ul-class > li {
    color: var(--igg-light-text);
}





.banktivity_metrics_wrapper {
  background-color: #009AFA;
}

.banktivity_metrics_inner_wrapper {
  margin-bottom: 10px;
}

.banktivity_metrics_row {
  display: flex;
  justify-content: stretch;
}



.banktivity_metrics {
  border: solid 2px #97cdee;
  border-radius: 10px;
  padding: 25px 4px 25px 4px;
  height: 100%;
}


.banktivity_metrics_number {
  font-size: 35px;
}


.banktivity_metrics_row_annotation {
  color: #ffffff;
  font-size: 12px;
}