.wp-banner {
    position: relative;
    padding: 60px 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
  }

  /* the image comes from HubDB inline, so the overlay has to
     be a pseudo element rather than part of the shorthand */
  .wp-banner.has-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(11, 27, 63, .72);
  }

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

  .wp-banner h1 {
    margin: 0;
    color: #fff;
  }

  .wp-banner p {
    font-size: 16px;
  }

  .wp-banner-sub {
        margin: 0;
    color: #fff;
    max-width: 720px;
    margin: 16px auto 0;
    color: rgba(255, 255, 255, .82);
  }

  .wp-banner-sub p{
      color: #fff;}
  .wp-banner-cta {
    margin-top: 28px;
  }

  {% if module.need_shape_boolean %}
  .wp-banner .banner-info {
    padding-bottom: 0;
  }
  {% endif %}


  /* SHAPES
     The negative top margin pulls the white strip up over the
     banner, so the banner needs the padding above to stop the
     shapes covering the heading. */

  .our-solutions-page-shape {
    max-width: 1600px;
    margin: -68px auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
  }

  .our-solutions-page-shape img {
    display: block;
  }

  .our-solutions-page-shape img:first-child {
    margin-left: -50px;
  }

  .our-solutions-page-shape img:last-child {
    margin-right: -50px;
  }

  @media (max-width: 1680px) {
    .our-solutions-page-shape {
      max-width: 1100px;
    }
  }

  @media (max-width: 1199px) {
    .our-solutions-page-shape {
      display: none;
    }
  }

  /* shapes are hidden below 1199px, so the extra padding they
     needed goes with them */
  @media (max-width: 991px) {
    .wp-banner .banner-info {
      padding-bottom: 0;
    }
  }


  /* BREADCRUMB */

  .wp-banner .breadcrumb {
    margin-top: 20px;
  }

  .wp-banner .breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 1.4;
  }

  .wp-banner .breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .wp-banner .breadcrumb-item:not(:first-child)::before {
    content: "/";
    opacity: .45;
  }

  .wp-banner .breadcrumb-item a {
    color: inherit;
    text-decoration: none;
    opacity: .75;
    transition: opacity .2s ease;
  }

  .wp-banner .breadcrumb-item a:hover,
  .wp-banner .breadcrumb-item a:focus-visible {
    opacity: 1;
    text-decoration: underline;
  }

  .wp-banner .breadcrumb-item.is-current {
    font-weight: 600;
    opacity: 1;
  }


  @media (max-width: 767px) {

    .wp-banner {
      padding: 40px 0;
    }

    .wp-banner .breadcrumb {
      margin-top: 14px;
    }

    .wp-banner .breadcrumb-list {
      font-size: 13px;
      gap: 6px;
    }

  }