/* STYLES FOR ABOVE THE FOLD */
/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-1349 {
    background-color: black;
    box-sizing: border-box;
    padding: clamp(1rem, 25vw, 6rem) 1rem 0;
    /* 200px - 250px */
    padding-bottom: 6rem;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #hero-1349 .stars {
    margin-top: 1rem;
    width: 10rem;
  }
  #hero-1349 .cs-button-12 {
    margin: 0 auto 1rem auto;
  }
  #hero-1349 .cs-container {
    width: 100%;
    max-width: clamp(29rem, 60vw, 38.785rem);
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
  }
  #hero-1349 .cs-content {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: start;
  }
  #hero-1349 .cs-content #scroll-link {
    color: white;
    text-decoration: underline;
    text-underline-offset: 6px;
    margin: 0 auto;
  }
  #hero-1349 .cs-content #scroll-link picture {
    display: inline-block;
    vertical-align: middle;
    /* Aligns the arrow vertically */
  }
  #hero-1349 .cs-content #scroll-link img {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 2px;
  }
  #hero-1349 .cs-topper {
    margin-bottom: 0.5rem;
    color: #e8e8e8;
  }
  #hero-1349 .cs-title {
    font-size: clamp(1.85rem, 3vw, 3.2125rem);
    font-weight: 700;
    line-height: 1.1em;
    text-align: inherit;
    margin: 0 0 1rem 0;
    color: #fff;
    position: relative;
  }
  #hero-1349 .cs-text {
    font-size: 1.25rem;
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    /* 464px - 622px */
    max-width: clamp(29rem, 60vw, 38.785rem);
    margin: 0 0 1.75rem 0;
    color: #e8e8e8;
  }
  #hero-1349 .cs-bubbles {
    /* this scales the children inside of it down. They're all in ems so they pull from the parent font size for their value of em, in this case, the value of em is tied to the viewwidth size and stops growing when the font size is equal to 1em, which it pulls from the nearst parent with a declred font size (which is the html tag, and that tag is 16px by default) */
    font-size: min(2vw, 0.5em);
    position: absolute;
    z-index: -2;
  }
  #hero-1349 .cs-bubbles1 {
    width: 42.5em;
    height: 45.25em;
    /* changes to 172 at large desktop */
    top: 0;
    right: -11.875rem;
  }
  #hero-1349 .cs-bubbles1:before {
    border: 0;
  }
  #hero-1349 .cs-bubbles1:after {
    /* orange bubble */
    content: "";
    width: 34.125em;
    height: 34.125em;
    background: var(--primary);
    opacity: 0.8;
    border-radius: 50%;
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    animation-name: floatAnimation2;
    animation-duration: 10s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
  }
  #hero-1349 .cs-bubbles2 {
    width: 20.625rem;
    height: 29.75rem;
    /* removed at larger desktop */
    bottom: -16.25rem;
    /* changes to 160px at larger desktop */
    left: -13.75rem;
  }
  #hero-1349 .cs-bubbles2:before {
    /* white border bubble */
    content: "";
    width: 20.625rem;
    height: 20.625rem;
    background: transparent;
    opacity: 1;
    border: 1px solid #fff;
    border-radius: 50%;
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    animation-name: floatAnimation;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
  }
  #hero-1349 .cs-bubbles2:after {
    /* orange bubble */
    content: "";
    width: 16.25rem;
    height: 16.25rem;
    background: var(--primary);
    opacity: 0.8;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 0;
    right: 2.5rem;
    z-index: -1;
    animation-name: floatAnimation2;
    animation-duration: 14s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
  }
  #hero-1349 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    z-index: -3;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1800px;
  }
  #hero-1349 .cs-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* makes the top of the image start at the top of the parent */
    object-position: top;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-1349 {
    /* 250px - 500px - leaving extra space for the navigation */
    padding: clamp(0.625rem, 12.95vw, 10rem) 1rem 0;
    /* 200px - 250px */
    padding-bottom: clamp(2rem, 6vw, 15.625rem);
  }
  #hero-1349 #scroll-link {
    display: none;
  }
  #hero-1349 .stars {
    font-size: 1.5rem;
  }
  #hero-1349 .cs-button-12 {
    margin: 0 0 1.75rem 0;
  }
  #hero-1349 .cs-title {
    /* 39px - 61px */
    max-width: 20ch;
    font-size: clamp(2.4375rem, 3.4vw, 2.8rem);
  }
  #hero-1349 .cs-container {
    max-width: 80rem;
    align-items: flex-end;
    position: relative;
    z-index: 1;
    padding: 20px;
  }
  #hero-1349 .cs-content {
    max-width: 39.375rem;
    text-align: left;
    align-items: flex-start;
  }
  #hero-1349 .cs-content::after {
    content: "";
    position: absolute;
    top: -30px;
    left: -50px;
    bottom: -30px;
    right: -100vw;
    bottom: -30px;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -1;
    border-radius: 25px;
  }
  #hero-1349 .cs-bubbles {
    font-size: 1em;
  }
  #hero-1349 .cs-bubbles1 {
    /* changes to auto at large desktop */
    right: -26.75rem;
  }
  #hero-1349 .cs-bubbles1:before {
    /* white border bubble */
    content: "";
    width: 38.875em;
    height: 38.875em;
    background: transparent;
    opacity: 1;
    border: 1px solid #fff;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    animation-name: floatAnimation;
    animation-duration: 7s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
  }
  @keyframes floatAnimation {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-2rem);
    }
    100% {
      transform: translateY(0);
    }
  }
  @keyframes floatAnimation2 {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-3rem);
    }
    100% {
      transform: translateY(0);
    }
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #hero-1349 .cs-bubbles1 {
    /* 200px - 550px */
    margin-left: clamp(12.5rem, 32vw, 34.375rem);
    top: 10.75rem;
    right: auto;
    left: 50%;
  }
  #hero-1349 .cs-button-12 {
    margin-bottom: 0;
  }
}
/* 1600px */
/* Larger Desktop - 1800px */
@media only screen and (min-width: 112.5rem) {
  #hero-1349 .cs-bubbles2 {
    margin-right: 50rem;
    top: 13.125rem;
    right: 50%;
    bottom: auto;
    left: auto;
  }
}
/*-- -------------------------- -->
<---           Logos            -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #logos-857 {
    padding: 1rem;
    background-color: #f7f7f7;
  }
  #logos-857 .cs-container {
    width: 100%;
    max-width: 50rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #logos-857 .cs-logo-group {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2rem;
  }
  #logos-857 .cs-logo {
    width: auto;
    max-width: 7.5rem;
    max-height: 3rem;
    height: auto;
    margin: 0;
    display: block;
  }
  #logos-857 .hide-when-small {
    display: none;
  }
}
/* Mobile - 360px */
@media only screen and (min-width: 400px) {
  #logos-857 .hide-when-small {
    display: block;
  }
}
@media only screen and (min-width: 800px) {
  #logos-857 .cs-container {
    max-width: 37.5rem;
  }
}
@media only screen and (min-width: 1024px) {
  #logos-857 .cs-container {
    max-width: 64rem;
  }
  #logos-857 .cs-logo-group {
    gap: clamp(2rem, 4vw, 6rem);
  }
  #logos-857 .hide-when-small {
    display: block;
  }
}
@media only screen and (min-width: 1201px) {
  #logos-857 .cs-container {
    max-width: none;
  }
  #logos-857 .cs-logo-group .cs-logo:last-child {
    display: block;
  }
}
/* Desktop - 1350px */
@media only screen and (min-width: 84.375rem) {
  #logos-857 .cs-logo {
    max-height: 4.25rem;
  }
}

/*# sourceMappingURL=critical-7.css.map */
