./****************** Start of Custom CSS ******************/



.eyebrow-container {
  align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 20px;
    width: fit-content;
    white-space: nowrap!important;
}

.hero-copy p {font-family: Literata, serif;
max-width:90%;}


.banner-content-inner-container h1 {
    line-height: 1.1!Important;
}


.eyebrow-container {
  align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 20px;
    width: fit-content;
    white-space: nowrap!important;
}


.button-container {align-items: center;
    gap: 1rem;}
/* Button 1 */
a.button.button--banner.button1 {background: var(--dark-green);
color: var(--white);
      border: 1px solid var(--dark-green);
      margin-bottom: 10px;
}

a.button.button--banner.button1:hover, a.button.button--banner.button1:focus {background: var(--black);
color: var(--white);
      border: 1px solid var(--black);
}


/* Button 2 */
a.button.button--banner.button2 {background: transparent;
color: var(--dark-green);
      border: 3px solid var(--dark-green);
}
a.button.button--banner.button2:hover, a.button.button--banner.button2:focus {
background: var(--black);
color: var(--white);
      border: 3px solid var(--black);
}
a.button.button--banner.button2:hover img, a.button.button--banner.button2:focus img
{filter: brightness(0) invert(1);}

.eyebrow-container p {
    margin: 0px 0px 10px 0px;
}
.banner-content-inner-container .button {
    width: fit-content;
}

img.featured-partner-logo {
    max-width: 100px;
}

.red-bg .banner-content-inner-container {
  background: #f6290a;
}

.tan-bg .banner-content-inner-container {
  background: #f9f8f6;
}

.green-bg .banner-content-inner-container {
  background: #d1eedc;
}

.banner .banner-content-inner-container {justify-content:center;}
/* TEXT */
.red-bg .banner-content-inner-container,
.red-bg .banner-content-inner-container h1,
.red-bg .banner-content-inner-container h2,
.red-bg .banner-content-inner-container h3,
.red-bg .banner-content-inner-container h4,
.red-bg .banner-content-inner-container h5,
.red-bg .banner-content-inner-container h6
{
    color: white;
}

.red-bg .banner-content-inner-container h1,
.red-bg .banner-content-inner-container h2,
.red-bg .banner-content-inner-container h3,
.red-bg .banner-content-inner-container h4,
.red-bg .banner-content-inner-container h5,
.red-bg .banner-content-inner-container h6
{

  font-weight: 600;}
.tan-bg .banner-content-inner-container,
.tan-bg .banner-content-inner-container h1,
.tan-bg .banner-content-inner-container h2,
.tan-bg .banner-content-inner-container h3,
.tan-bg .banner-content-inner-container h4,
.tan-bg .banner-content-inner-container h5,
.tan-bg .banner-content-inner-container h6,
.tan-bg .banner-content-inner-container p {
    color: #512850;
}


.green-bg .banner-content-inner-container,
.green-bg .banner-content-inner-container h1,
.green-bg .banner-content-inner-container h2,
.green-bg .banner-content-inner-container h3,
.green-bg .banner-content-inner-container h4,
.green-bg .banner-content-inner-container h5,
.green-bg .banner-content-inner-container h6
{
    color: #2c5841;
}

.green-bg .banner-content-inner-container h1,
.green-bg .banner-content-inner-container h2,
.green-bg .banner-content-inner-container h3,
.green-bg .banner-content-inner-container h4,
.green-bg .banner-content-inner-container h5,
.green-bg .banner-content-inner-container h6
{

  font-weight: 600;}
/* TAN SVG SWAPS */

.tan-bg .banner--block .banner-content::before {
    content: url("https://45317943.fs1.hubspotusercontent-na1.net/hubfs/45317943/Assets/Curves/image_curve_tan.svg");
}

.tan-bg .banner .banner-content::before {
    content: url("https://45317943.fs1.hubspotusercontent-na1.net/hubfs/45317943/Assets/Curves/bell_curve_before_tan.svg");
}

.tan-bg .banner .banner-content::after {
    content: url("https://45317943.fs1.hubspotusercontent-na1.net/hubfs/45317943/Assets/Curves/bell_curve_after_tan.svg");
}

/* GREEN SVG SWAPS */

.green-bg .banner--block .banner-content::before {
    content: url("https://45317943.fs1.hubspotusercontent-na1.net/hubfs/45317943/Assets/Curves/image_curve_green.svg");
}

.green-bg .banner .banner-content::before {
    content: url("https://45317943.fs1.hubspotusercontent-na1.net/hubfs/45317943/Assets/Curves/bell_curve_before_green.svg");
}

.green-bg .banner .banner-content::after {
    content: url("https://45317943.fs1.hubspotusercontent-na1.net/hubfs/45317943/Assets/Curves/bell_curve_after_green.svg");
}
/****************** END of Custom CSS ******************/

.banner *,
.banner *::before,
.banner *::after {
    box-sizing: border-box;
}

/*

body, html {
    overflow-x: hidden;
    scroll-behavior: smooth
}
*/



.box--large { padding: 2rem 1rem }

.stack {
    display: flex;
    flex-flow: column nowrap
}

.stack > * + * { margin-top: 1rem }

.stack--loose > * + * { margin-top: 2rem }

.stack--center  { align-items: center }

.stack--justify-center { justify-content: center }



.row--justify-center { justify-content: center }

.distribute-s > * + * { margin-left: .5rem }

/* Background image utility */
.background-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    margin: 0 !important;
    padding: 0 !important;
    z-index: -2
}




/* Banner */
.banner {
    position: relative;
    min-height: 35.625rem;
    overflow: hidden
}

.banner .background-image {
    height: 24rem
}

@media (min-width: 960px) {
    .banner .background-image {
        height: unset;
        width: 50%;
        left: unset
    }
}

.banner .header,
.banner .banner-content { position: relative }

.banner .header {
    max-width: calc(100% - 4rem);
    margin-left: .5rem;
    color: #fff
}

.tan-bg .header {
  color: #512850;
}

@media (min-width: 460px) {
    .banner .header { max-width: calc(100% - 2rem) }
}

@media (min-width: 960px) {
    .banner .header { max-width: 55rem }
}

.banner .sub-header {
    padding: 1rem .5rem .5rem .5rem;
    max-width: 34rem;
    margin: 0;
    text-transform: none;

    color: #fff
}

@media (min-width: 960px) {
    .banner .sub-header { padding: .5rem }
}

.banner .banner-content {
    margin-top: 20.438rem;
    padding: 0;
    align-items: flex-start;
    text-align: left;
    background: none
}

.banner .banner-content::before {
    content: url("https://45317943.fs1.hubspotusercontent-na1.net/hubfs/45317943/Assets/Curves/image-curve.svg");
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -3rem
}

@media screen and (min-width: 360px) {

  .banner .banner-content::before {
      margin-bottom: -3.00rem;
      width: 19.5rem;
      content: url("https://45317943.fs1.hubspotusercontent-na1.net/hubfs/45317943/Assets/Curves/bell_curve_before.svg");
  }

  .banner.tan-bg .banner-content::before {
      content: url("https://45317943.fs1.hubspotusercontent-na1.net/hubfs/45317943/Assets/Curves/bell_curve_before_tan.svg");
  }
  
    .banner.green-bg .banner-content::before {
      content: url("https://45317943.fs1.hubspotusercontent-na1.net/hubfs/45317943/Assets/Curves/bell_curve_before_green.svg");
  }
.banner-content-inner-container {
    padding-top: 70px !important;
}
}


@media (min-width: 960px) {
    .banner .banner-content {
        background: #f6290a;
        margin-top: 0;
        min-height: 35.625rem;
        padding: 12.5rem 3rem;
        width: 50%;
        align-items: center;
        
    }

    .banner .banner-content::before { display: none }

    .banner .banner-content::after {
        content: url("https://45317943.fs1.hubspotusercontent-na1.net/hubfs/45317943/Assets/Curves/bell_curve_after.svg");
        right: -6.257rem;
        position: absolute;
        height: 35.625rem
    }
}

.banner .banner-content .header {

    font-weight: 600;
    line-height: 2.6375rem;
    letter-spacing: -0.82px;
    margin-top: 2.6375rem
}

@media (min-width: 460px) {
    .banner .banner-content .header {

        font-weight: 600;
        line-height: 2.9375rem;
        letter-spacing: -0.82px;
        margin-top: 2.9375rem
    }
}

@media (min-width: 1240px) {
    .banner .banner-content .header {

        font-weight: 600;
        line-height: 4.6125rem;
        letter-spacing: -1.35px;
        margin-top: 3.8125rem
    }
}

.banner .banner-content.text-align-center .rich-text > * {
    margin-left: auto;
    margin-right: auto
}

@media (min-width: 960px) {
    .banner .banner-content {
        padding-top: 12.5rem;
        display: flex;
        align-items: center;

    }

    .banner .banner-content__header,
    .banner .banner-content .sub-header { padding: 0 }

    .banner .banner-content__buttons .button--banner { margin-top: 0 }
}

@media (min-width: 960px) {
    .banner .banner-content p { }
}

.banner .banner-content-inner-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0, 77% 0%, 77% 40.7px, 23% 40.7px, 23% 0);
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0, 77% 0%, 77% 40.7px, 23% 40.7px, 23% 0);
    padding: 2.438rem 1rem;
    min-height: 16rem
}

@media screen and (min-width: 360px) {
    .banner .banner-content-inner-container {
        -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0, 77% 0%, 77% 46px, 23% 46px, 23% 0);
        clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0, 77% 0%, 77% 46px, 23% 46px, 23% 0)
    }
}

@media screen and (min-width: 360px) and (min-width: 640px) {
    .banner .banner-content-inner-container {
        -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0, 68% 0%, 68% 46px, 32% 46px, 32% 0);
        clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0, 68% 0%, 68% 46px, 32% 46px, 32% 0)
    }
}

@media (min-width: 960px) {
    .banner .banner-content-inner-container {
        padding: 0;
        -webkit-clip-path: none;
        clip-path: none;
    }
}

.banner .banner-content__header { z-index: 1 }

@media (min-width: 960px) {
    .banner .banner-content__header {
        min-height: auto;
        width: auto
    }
}

.banner .banner-content__buttons {
    justify-content: flex-start;
    z-index: 1;
    margin-top: 0
}

.banner .banner-content__buttons a { margin-left: 0 }

@media (min-width: 960px) {
    .banner .banner-content__buttons {
        justify-content: center;
        margin-top: unset
    }

    .banner .banner-content__buttons a { margin: 1rem 2rem }
}

/* Banner block variant */
.banner--block { overflow: hidden }

/*.banner--block:first-child { margin-top: -1rem }*/

@media (min-width: 960px) {
    .banner--block {
        align-items: flex-end
    }

    .banner--block .banner-content {
        padding: 0;
        background: none;
        min-height: 51.875rem
    }

    .banner--block .banner-content::before {
        content: url("https://45317943.fs1.hubspotusercontent-na1.net/hubfs/45317943/Assets/Curves/image-curve.svg");
        position: absolute;
        display: block;
        left: -0.40rem;
        height: 45.875rem;
        width: 6.75rem;
        margin-top: -3.125rem
    }

    .banner--block .banner-content::after { display: none }

    .banner--block .banner-content-inner-container {
        min-height: 51.875rem;
padding: 4rem 4.563rem 4rem 8.813rem;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 70%, 107px 70%, 107px 30%, 0 30%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 70%, 107px 70%, 107px 30%, 0 30%);
              justify-content: center; /* ADD THIS */

    }

  .red-bg .banner-content-inner-container {
    background: #f6290a;
}

.tan-bg .banner-content-inner-container {
    background: #f9f8f6;
}
  
    .banner--block .background-image {
        left: 0;
        right: unset;
        width: 52%
    }
}

/* Directional variants */
@media (min-width: 960px) {
    .banner {
        display: flex;
        width: 100%
    }

    .banner .background-image-container {
        flex: 1;
        overflow: hidden
    }

    .banner .background-image {
        height: 100%;
        background-size: cover;
        background-position: center;
        right: 0;
        left: unset
    }

    .banner-direction-left { flex-direction: row-reverse }

    .banner-direction-left .banner-content::before { display: none }

    .banner-direction-left .banner-content::after { display: block !important }

    .banner-direction-left .banner-content-inner-container {
        padding: 100px;
        -webkit-clip-path: none;
        clip-path: none
    }

    .banner-direction-right { flex-direction: row }

    .banner-direction-right .background-image {
        left: 0;
        right: unset
    }
}

@media (min-width: 960px) and (min-width: 960px) {
    .banner-direction-right .background-image { width: 66% }
}

@media screen and (min-width: 960px) and (min-width: 960px) and (min-width: 1029px) {
    .banner-direction-right .background-image { width: 60% }
}

/* disable-zoom modifier (used on .background-image) */
.background-image.disable-zoom {
    animation: none;
    top: 0;
    left: 0;
    background-position: center
}

@media (min-width: 960px) {
    .background-image.disable-zoom { left: unset }
}

/* Banner animation */
@keyframes slide-from-right {
    0%   { transform: translate(100%) }
    100% { transform: translate(0%) }
}

@keyframes slide-from-left {
    0%   { transform: translate(-100%) }
    100% { transform: translate(0%) }
}

@media (prefers-reduced-motion: no-preference) {

  .banner-animation {
    opacity: 0;
    transform: translateY(40px);
  }

  .banner-animation.animate-in {
    opacity: 1;
    transform: translateY(0);
    animation: slide-from-left 1s ease forwards;
  }

  .banner-direction-right.banner-animation.animate-in {
    animation: slide-from-right 1s ease forwards;
  }

}



@media (min-width: 960px) {

  .tan-bg.banner--block .banner-content::before {
      content: url("https://45317943.fs1.hubspotusercontent-na1.net/hubfs/45317943/Assets/Curves/image_curve_tan.svg");
  }

  .tan-bg .banner-content::before {
      content: url("https://45317943.fs1.hubspotusercontent-na1.net/hubfs/45317943/Assets/Curves/bell_curve_before_tan.svg");
  }

  .tan-bg .banner-content::after {
      content: url("https://45317943.fs1.hubspotusercontent-na1.net/hubfs/45317943/Assets/Curves/bell_curve_after_tan_new.svg");
  }

  
    .green-bg.banner--block .banner-content::before {
      content: url("https://45317943.fs1.hubspotusercontent-na1.net/hubfs/45317943/Assets/Curves/image_curve_green.svg");
  }

  .green-bg .banner-content::before {
      content: url("https://45317943.fs1.hubspotusercontent-na1.net/hubfs/45317943/Assets/Curves/bell_curve_before_green.svg");
  }

  .green-bg .banner-content::after {
      content: url("https://45317943.fs1.hubspotusercontent-na1.net/hubfs/45317943/Assets/Curves/bell_curve_after_green_new.svg");
  }
  
}


@media screen and (min-width: 360px) {
  .banner.green-bg .banner-content::before {
    content: url("https://45317943.fs1.hubspotusercontent-na1.net/hubfs/45317943/Assets/Curves/bell_curve_before_green.svg");
  }
}
@media (min-width: 960px) and (max-width: 1096px) {
  .banner h1 {
    font-size: 2.5rem;
    line-height: 1.15;
  }
}

@media (max-width: 1096px) {
  .mobile-hide { display: none !important; }
}

@media (max-width: 360px) {
.banner .banner-content::before {
    content: url("https://45317943.fs1.hubspotusercontent-na1.net/hubfs/45317943/Assets/Curves/bell_curve_before_green.svg");
  
  
  }