/* CODESTITCH STYLES, RESET, HEADER/NAVIGATION AND FOOTER */
/*-- -------------------------- -->
<---        Core Styles         -->
<--- -------------------------- -*/
/* CodeStitch Root and Helpers */
@media only screen and (min-width: 0rem) {
  :root {
    --primary: #c9002c;
    --primaryLight: #d95665;
    --secondary: #001f3f;
    --secondaryLight: #001f3f;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    --headerTextColor: #32373d;
    --headerTextColorLight: #fff;
    --subHeaderTextColor: #84878b;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;

    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
  }

  .cs-topper {
    display: block;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    font-weight: 700;
    color: var(--primary);
    text-align: inherit;
  }

  .cs-title {
    position: relative;
    margin: 0 0 1rem 0;
    max-width: 43.75rem;
    font-size: var(--headerFontSize);
    line-height: 1.2em;
    font-weight: 900;
    color: var(--headerColor);
    text-align: inherit;
  }

  .cs-text {
    margin: 0;
    max-width: 40.625rem;
    width: 100%;
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    color: var(--bodyTextColor);
    text-align: inherit;
  }

  .cs-button-solid {
    z-index: 1;
    position: relative;
    display: inline-block;
    background-color: var(--primary);
    width: auto;
    padding: 0 1.875rem;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1rem;
    line-height: 3.125em;
    font-weight: bold;
    color: #fff;
    transition: color 0.3s;
    transition-delay: 0.1s;
    text-align: center;
  }

  .cs-button-solid:hover {
    color: #fff;
  }

  .cs-button-solid:hover:before {
    width: 100%;
  }

  .cs-button-solid:before {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    opacity: 1;
    display: block;
    background-color: #000;
    height: 100%;
    width: 0;
    transition: width 0.3s;
  }

  .cs-hide-on-mobile {
    display: none;
  }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  .cs-hide-on-mobile {
    display: block;
  }

  .cs-hide-on-desktop {
    display: none;
  }
}

/* Fonts and general styles */
@media only screen and (min-width: 0rem) {

  body,
  html {
    margin: 0;
    padding: 0;
    font-family: "Roboto", Arial, sans-serif;
    font-size: 100%;
    color: var(--bodyTextColor);
  }

  *,
  *:before,
  *:after {
    margin: 0;
    box-sizing: border-box;
    padding: 0;
  }

  body {
    transition: background-color 0.3s;
  }

  .container {
    position: relative;
    margin: auto;
    width: 92%;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
    color: var(--headerColor);
  }

  p,
  li,
  a {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5em;
  }

  p,
  li {
    color: #353535;
  }

  a:hover,
  button:hover {
    cursor: pointer;
  }

  .skip {
    z-index: -1111111;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }

  /* roboto-regular - latin */
  @font-face {
    font-style: normal;
    font-family: "Roboto";
    font-weight: 400;
    font-display: swap;
    src: local(""), url("/assets/fonts/roboto-v29-latin-regular.woff2") format("woff2"), url("/assets/fonts/roboto-v29-latin-regular.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

  /* roboto-700 - latin */
  @font-face {
    font-style: normal;
    font-family: "Roboto";
    font-weight: 700;
    font-display: swap;
    src: local(""), url("/assets/fonts/roboto-v29-latin-700.woff2") format("woff2"), url("/assets/fonts/roboto-v29-latin-700.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

  /* roboto-900 - latin */
  @font-face {
    font-style: normal;
    font-family: "Roboto";
    font-weight: 900;
    font-display: swap;
    src: local(""), url("/assets/fonts/roboto-v29-latin-900.woff2") format("woff2"), url("/assets/fonts/roboto-v29-latin-900.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
}

/* Reset Margins */
@media only screen and (min-width: 1024px) {

  body,
  html {
    margin: 0;
    padding: 0;
  }
}

/* Scale full website with the viewport width */
@media only screen and (min-width: 3000px) {

  body,
  html {
    font-size: 0.55vw;
  }
}

/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  body.cs-open {
    overflow: hidden;
  }

  #cs-navigation {
    z-index: 10000;
    position: fixed;
    background-color: #fff;
    width: 100%;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
    font-family: "Roboto", "Arial", sans-serif;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  }

  #cs-navigation .cs-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
  }

  #cs-navigation .cs-logo {
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 0 0;
    height: 100%;
    max-width: 9.125rem;
    width: 40%;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0;
  }

  #cs-navigation .cs-logo img {
    height: 100%;
    width: 100%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
    /* places the image to the left edge of the parent */
    object-position: left;
  }

  #cs-navigation .cs-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 0.25rem;
    margin: 0 0 0 auto;
    background-color: transparent;
    height: clamp(2.75rem, 6vw, 3rem);
    /* 44px - 48px */
    width: clamp(2.75rem, 6vw, 3rem);
  }

  #cs-navigation .cs-active .cs-line1 {
    top: 50%;
    transform: translate(-50%, -50%) rotate(225deg);
  }

  #cs-navigation .cs-active .cs-line2 {
    top: 50%;
    transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
    transform-origin: center;
  }

  #cs-navigation .cs-active .cs-line3 {
    bottom: 100%;
    opacity: 0;
  }

  #cs-navigation .cs-box {
    position: relative;
    /* 14px - 16px */
    height: clamp(0.875rem, 1.5vw, 1rem);
    /* 24px - 28px */
    width: clamp(1.5rem, 2vw, 1.75rem);
  }

  #cs-navigation .cs-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
    background-color: #1a1a1a;
    height: 2px;
    width: 100%;
  }

  #cs-navigation .cs-line1 {
    top: 0;
    transition: transform 0.5s, top 0.3s, left 0.3s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
    transform-origin: center;
  }

  #cs-navigation .cs-line2 {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: top 0.3s, left 0.3s, transform 0.5s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
  }

  #cs-navigation .cs-line3 {
    bottom: 0;
    transition: bottom 0.3s, opacity 0.3s;
  }

  #cs-navigation .cs-ul-wrapper {
    z-index: -1;
    position: absolute;
    top: 100%;
    left: auto;
    right: 0;
    opacity: 0;
    transform: scaleX(0);
    background-color: #fff;
    height: 100vh;
    overflow: hidden;
    transition: transform 0.4s, opacity 0.3s;
    box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
    transform-origin: top right;
  }

  #cs-navigation .cs-ul {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    margin: 0;
    height: 65vh;
    min-width: 40%;
    width: auto;
    overflow: scroll;
    /* 28px - 40px */
    padding: 3rem clamp(1.75rem, 3vw, 2.5rem) 2rem 4.375rem;
    gap: 1.25rem;
  }

  #cs-navigation .cs-li {
    opacity: 0;
    /* transition from these values */
    transform: translateX(-2.5rem);
    margin-right: 0;
    width: 100%;
    list-style: none;
    transition: transform 0.6s, opacity 0.9s;
    text-align: right;
  }

  #cs-navigation .cs-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }

  #cs-navigation .cs-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }

  #cs-navigation .cs-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }

  #cs-navigation .cs-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }

  #cs-navigation .cs-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }

  #cs-navigation .cs-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }

  #cs-navigation .cs-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }

  #cs-navigation .cs-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }

  #cs-navigation .cs-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }

  #cs-navigation .cs-li-link {
    position: relative;
    display: inline-block;
    margin: 0;
    text-decoration: none;
    /* 16px - 24px */
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    line-height: 1.2em;
    color: var(--headerColor);
  }

  #cs-navigation .cs-li-link:before {
    position: absolute;
    bottom: -0.125rem;
    left: 0;
    /* active state underline */
    content: "";
    opacity: 1;
    display: none;
    background: currentColor;
    height: 1px;
    width: 100%;
  }

  #cs-navigation .cs-li-link.cs-active:before {
    display: block;
  }

  #cs-navigation .cs-button-solid {
    display: none;
  }

  #cs-navigation:before {
    z-index: -11;
    position: absolute;
    top: 100%;
    right: 0;
    /* black blurred overlay */
    content: "";
    opacity: 0;
    display: block;
    background: rgba(0, 0, 0, 0.6);
    height: 100vh;
    width: 0%;
    transition: width 0.5s, opacity 0.3s;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  #cs-navigation.cs-active .cs-ul-wrapper {
    opacity: 1;
    transform: scaleX(1);
    transition-delay: 0.2s;
  }

  #cs-navigation.cs-active .cs-li {
    opacity: 1;
    transform: translateX(0);
  }

  #cs-navigation.cs-active:before {
    opacity: 1;
    width: 100%;
  }
}

/*-- -------------------------- -->
<---     Navigation Dropdown    -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  #cs-navigation .cs-dropdown {
    position: relative;
    color: var(--bodyTextColorWhite);
  }

  #cs-navigation .cs-dropdown .cs-li-link {
    position: relative;
    transition: opacity 0.3s;
  }

  #cs-navigation .cs-dropdown.cs-active .cs-drop-ul {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
    margin: 0.75rem 0 0 0;
    height: auto;
    padding: 1.5rem;
  }

  #cs-navigation .cs-dropdown.cs-active .cs-drop-link {
    opacity: 1;
  }

  #cs-navigation .cs-dropdown-button {
    border: none;
    background-color: transparent;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    appearance: none;
  }

  #cs-navigation .cs-drop-icon {
    position: absolute;
    top: 50%;
    right: -1.25rem;
    transform: translateY(-50%);
    height: auto;
    width: 0.9375rem;
  }

  #cs-navigation .cs-drop-ul {
    visibility: hidden;
    opacity: 0;
    transform: scale(0);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    margin: 0;
    background-color: var(--primary);
    height: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0 1.5rem 0 1.5rem;
    transition: padding 0.3s, margin 0.3s, height 0.3s, opacity 0.3s, transform 0.3s, visibility 0.3s;
    gap: 0.75rem;
    transform-origin: top right;
  }

  #cs-navigation .cs-drop-li {
    list-style: none;
    text-align: inherit;
  }

  #cs-navigation .cs-li-link.cs-drop-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 2vw, 1.25rem);
    color: #fff;
  }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cs-navigation .cs-dropdown {
    position: relative;
  }

  #cs-navigation .cs-dropdown.cs-active,
  #cs-navigation .cs-dropdown:hover {
    cursor: pointer;
  }

  #cs-navigation .cs-dropdown.cs-active .cs-drop-ul,
  #cs-navigation .cs-dropdown:hover .cs-drop-ul {
    visibility: visible;
    opacity: 1;
    transform: scaleY(1);
  }

  #cs-navigation .cs-dropdown.cs-active .cs-drop-li,
  #cs-navigation .cs-dropdown:hover .cs-drop-li {
    opacity: 1;
    transform: translateY(0);
  }

  #cs-navigation .cs-dropdown-button {
    border: none;
    background-color: transparent;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    appearance: none;
  }

  #cs-navigation .cs-drop-icon {
    display: inline-block;
    height: auto;
    width: 0.9375rem;
  }

  #cs-navigation .cs-drop-ul {
    z-index: -100;
    /* if you have 8 or more links in your dropdown nav, uncomment the columns property to make the list into 2 even columns. Change it to 3 or 4 if you need extra columns. Then remove the transition delays on the cs-drop-li so they don't have weird scattered animations */
    position: absolute;
    top: 100%;
    visibility: hidden;
    opacity: 0;
    transform: scaleY(0);
    border-bottom: 5px solid var(--primary);
    margin: 0;
    background-color: #fff;
    min-width: 12.5rem;
    overflow: hidden;
    padding: 0;
    transition: transform 0.3s, visibility 0.3s, opacity 0.3s;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 10px 16px;
    transform-origin: top;
  }

  #cs-navigation .cs-drop-li {
    opacity: 0;
    transform: translateY(-0.625rem);
    display: block;
    height: auto;
    width: 100%;
    list-style: none;
    text-decoration: none;
    font-size: 1rem;
    color: var(--bodyTextColor);
    transition: opacity 0.6s, transform 0.6s;
  }

  #cs-navigation .cs-drop-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }

  #cs-navigation .cs-drop-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }

  #cs-navigation .cs-drop-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }

  #cs-navigation .cs-drop-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }

  #cs-navigation .cs-drop-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }

  #cs-navigation .cs-drop-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }

  #cs-navigation .cs-drop-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }

  #cs-navigation .cs-drop-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }

  #cs-navigation .cs-drop-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }

  #cs-navigation .cs-drop-li:nth-of-type(10) {
    transition-delay: 0.5s;
  }

  #cs-navigation .cs-drop-li:nth-of-type(11) {
    transition-delay: 0.55s;
  }

  #cs-navigation .cs-drop-li:nth-of-type(12) {
    transition-delay: 0.6s;
  }

  #cs-navigation .cs-drop-li:nth-of-type(13) {
    transition-delay: 0.65s;
  }

  #cs-navigation .cs-li-link.cs-drop-link {
    display: block;
    width: 100%;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0.75rem;
    white-space: nowrap;
    text-decoration: none;
    font-size: 1rem;
    line-height: 1.5em;
    color: var(--bodyTextColor);
    transition: color 0.3s, background-color 0.3s;
  }

  #cs-navigation .cs-li-link.cs-drop-link:hover {
    background-color: #f7f7f7;
  }

  #cs-navigation .cs-li-link.cs-drop-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -4px;
  }

  #cs-navigation .cs-li-link.cs-drop-link:before {
    display: none;
  }
}


/*-- -------------------------- -->
<---     Desktop Navigation     -->
<--- -------------------------- -*/
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cs-navigation {
    z-index: 10000;
    position: fixed;
    background-color: #fff;
    width: 100%;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0 1rem;
    /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
    font-family: "Roboto", "Arial", sans-serif;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  }

  #cs-navigation .cs-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: auto;
    max-width: 80rem;
    width: 100%;
    gap: 1.5rem;
  }

  #cs-navigation .cs-toggle {
    display: none;
  }

  #cs-navigation .cs-logo {
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-right auto pushes everything away from it to the right */
    margin: 0 auto 0 0;
    height: 4.0625rem;
    max-width: 21.875rem;
    width: 18.4%;
    padding: 0;
  }

  #cs-navigation .cs-logo img {
    height: 100%;
    width: 100%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
  }

  #cs-navigation .cs-ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    width: 100%;
    padding: 0;
    /* 20px - 36px */
    gap: clamp(1.25rem, 2.6vw, 2.25rem);
  }

  #cs-navigation .cs-li {
    padding: 2rem 0;
    list-style: none;
    /* prevent flexbox from squishing it */
    flex: none;
  }

  #cs-navigation .cs-li-link {
    position: relative;
    display: block;
    margin: 0;
    text-decoration: none;
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1vw, 1rem);
    line-height: 1.5em;
    color: var(--bodyTextColor);
  }

  #cs-navigation .cs-li-link:hover:before {
    width: 100%;
  }

  #cs-navigation .cs-li-link:before {
    position: absolute;
    bottom: 0rem;
    left: 0;
    /* active state underline */
    content: "";
    opacity: 1;
    display: block;
    background: var(--primary);
    height: 2px;
    width: 0%;
    transition: width 0.3s;
  }

  #cs-navigation .cs-li-link.cs-active:before {
    width: 100%;
  }
}


/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  @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);
    }
  }

  #hero-1353 {
    /* 250px - 500px - leaving extra space for the navigation */
    padding: clamp(15.625rem, 35.95vw, 25rem) 1rem 0;
    padding-bottom: 0;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    z-index: 1;
    background: #faf8f7;
  }

  #hero-1353:before {
    /* Overlay */
    content: "";
    width: 100%;
    height: 30%;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 2;
    /* prevents the cursor from interacting with it */
    pointer-events: none;
  }

  #hero-1353 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }

  #hero-1353 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 39.375rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }

  #hero-1353 .cs-topper {
    font-size: 1.25rem;
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: #e8e8e8;
    margin-bottom: 0.5rem;
    display: block;
  }

  #hero-1353 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
    font-weight: 700;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 20ch;
    margin: 0 0 1rem 0;
    color: var(--headerTextColor);
    position: relative;
  }

  #hero-1353 .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 2.5rem 0;
    color: var(--subHeaderTextColor);
  }

  #hero-1353 .cs-button-solid {
    font-size: 1rem;
    line-height: 3.5rem;
    text-decoration: none;
    font-weight: 700;
    overflow: hidden;
    margin: 0;
    color: #fff;
    padding: 0 3rem;
    border-radius: 1.875rem;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }

  #hero-1353 .cs-button-solid:before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 0%;
    background: #fff;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }

  #hero-1353 .cs-button-solid:hover {
    color: var(--primary);
  }

  #hero-1353 .cs-button-solid:hover:before {
    width: 100%;
  }

  #hero-1353 .cs-picture {
    width: 100%;
    /* 427px - 621px */
    max-width: clamp(26.6875rem, 75vw, 38.8125rem);
    height: auto;
    display: flex;
    align-items: flex-end;
    position: relative;
    z-index: 7;
  }

  #hero-1353 .cs-picture img {
    width: 100%;
    height: auto;
  }

  #hero-1353 .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(2.9vw, 0.9em);
    position: absolute;
    z-index: -1;
  }

  #hero-1353 .cs-bubbles1 {
    width: 42.5em;
    height: 45.25em;
    right: -11.875rem;
    /* changes to 172 at large desktop */
    bottom: -6.25rem;
  }

  #hero-1353 .cs-bubbles1:before {
    /* white border bubble */
    content: "";
    width: 38.875em;
    height: 38.875em;
    background: transparent;
    border: 1px solid #fff;
    border-radius: 50%;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    animation-name: floatAnimation;
    animation-duration: 7s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }

  #hero-1353 .cs-bubbles1:after {
    /* orange bubble */
    content: "";
    width: 34.125em;
    height: 34.125em;
    background: linear-gradient(180deg, #F04D46 0%, #C9002C 100%);
    border-radius: 50%;
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
    animation-name: floatAnimation2;
    animation-duration: 10s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }

  #hero-1353 .cs-bubbles2 {
    width: 20.625rem;
    height: 29.75rem;
    /* changes to 160px at larger desktop */
    left: -16.25rem;
    /* removed at larger desktop */
    top: 3.75rem;
  }

  #hero-1353 .cs-bubbles2:before {
    /* white border bubble */
    content: "";
    width: 20.625rem;
    height: 20.625rem;
    background: transparent;
    border: 1px solid #fff;
    border-radius: 50%;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0;
    right: 0;
    animation-name: floatAnimation;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }

  #hero-1353 .cs-bubbles2:after {
    /* orange bubble */
    content: "";
    width: 16.25rem;
    height: 16.25rem;
    background: linear-gradient(180deg, #F04D46 0%, #C9002C 100%);
    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-fill-mode: forwards;
    animation-iteration-count: infinite;
  }

  #hero-1353 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }

  #hero-1353 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    /* makes the top of the image start at the top of the parent */
    object-position: top;
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-1353 {
    /* 180px - 250px */
    padding-bottom: clamp(11.25rem, 16.5vw, 15.625rem);
  }

  #hero-1353 .cs-container {
    flex-direction: row;
    justify-content: flex-end;
  }

  #hero-1353 .cs-content {
    text-align: left;
    width: 53%;
    align-items: flex-start;
  }

  #hero-1353 .cs-picture {
    width: 100%;
    position: absolute;
    bottom: -25rem;
    left: -14.375rem;
  }

  #hero-1353 .cs-bubbles {
    font-size: 1em;
  }

  #hero-1353 .cs-bubbles1 {
    /* changes to auto at large desktop */
    left: -18.75rem;
  }

  #hero-1353 .cs-bubbles2 {
    left: auto;
    right: -16.25rem;
  }
}

/* Desktop - 1024px */
@media only screen and (min-width: 48rem) {
  #hero-1353 .cs-picture {
    bottom: -24rem;
  }
}

/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #hero-1353 .cs-container {
    position: initial;
  }

  #hero-1353 .cs-picture {
    margin-right: 4.375rem;
    right: 50%;
    left: auto;
    bottom: -10rem;
  }

  #hero-1353 .cs-bubbles1 {
    /* 200px - 580px */
    margin-right: clamp(12.5rem, 20vw, 36.25rem);
    top: 10.75rem;
    left: auto;
    bottom: auto;
    right: 50%;
  }
}

/* Large Desktop Parallax Effect - 1600px */
@media only screen and (min-width: 100rem) {
  #hero-1353 .cs-background {
    background: #faf8f7;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }

  #hero-1353 .cs-background img {
    display: none;
  }
}

/* Larger Desktop - 1800px */
@media only screen and (min-width: 112.5rem) {
  #hero-1353 .cs-bubbles2 {
    margin-left: 50rem;
    left: 50%;
    right: auto;
    top: 13.125rem;
    bottom: auto;
  }
}

/*-- -------------------------- -->
<---    Final Call To Action    -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0rem) {
  #cta {
    position: relative;
    padding: 3.125rem 0;
  }

  #cta .container {
    text-align: center;
  }

  #cta picture {
    z-index: -2;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }

  #cta picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  #cta .title {
    position: relative;
    margin-bottom: 2.25rem;
    font-size: min(9vw, 3rem);
    line-height: 1.2083333333em;
    font-weight: 900;
    color: #fff;
    text-align: center;
  }

  #cta p {
    opacity: 1;
    margin: auto;
    margin-bottom: 2.25rem;
    max-width: 37.375rem;
    width: 96%;
    color: #fff;
    text-align: center;
  }

  #cta:before {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    opacity: 0.7;
    display: block;
    background: #000;
    height: 100%;
    width: 100%;
  }
}

/* Small Desktop */
@media only screen and (min-width: 64rem) {
  #cta {
    padding: 10.5rem 0;
  }
}

/* Large Desktop */
@media only screen and (min-width: 1300px) {
  #cta {
    position: relative;
    margin-top: 6.25rem;
  }

  #cta .container {
    margin: auto;
    width: 90.0625%;
  }

  #cta picture {
    left: 50%;
    transform: translateX(-50%);
    width: 90.0625%;
  }

  #cta picture:before {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    opacity: 0.7;
    display: block;
    background: #000;
    height: 100%;
    width: 100%;
  }

  #cta:before {
    display: none;
  }

  #cta:after {
    z-index: -3;
    position: absolute;
    bottom: 0;
    left: 50%;
    content: "";
    opacity: 1;
    transform: translateX(-50%);
    display: block;
    background: url("/assets/svgs/cta-squares.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 69.25rem;
    width: 125rem;
  }
}



/*-- -------------------------- -->
<---          Footer            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cs-footer-840 {
    padding: var(--sectionPadding);
    /* 30px - 50px */
    padding-bottom: clamp(1.875rem, 5vw, 3.125rem);
    background-color: #1a1a1a;
  }

  #cs-footer-840 .cs-container {
    width: 100%;
    /* reset on tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    column-gap: 3rem;
    row-gap: 2rem;
  }

  #cs-footer-840 .cs-logo-group {
    /* takes up all the space, lets the other ul's wrap below it */
    width: 100%;
    position: relative;
  }

  #cs-footer-840 .cs-logo {
    width: 13.125rem;
    height: auto;
    margin: 0 0 1.5rem 0;
    display: block;
  }

  #cs-footer-840 .cs-text {
    color: var(--bodyTextColorWhite);
    opacity: .8;
    margin: 0 0 2rem;
  }

  #cs-footer-840 .cs-logo-img {
    width: 100%;
    height: auto;
  }

  #cs-footer-840 .cs-social {
    display: inline-flex;
    justify-content: flex-start;
    gap: 1.75em;
  }

  #cs-footer-840 .cs-social-link {
    width: 3rem;
    height: 3rem;
    background-color: #484848;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    transition: transform 0.3s, background-color 0.3s;
  }

  #cs-footer-840 .cs-social-link:hover {
    background-color: var(--primaryLight);
    transform: translateY(-0.1875rem);
  }

  #cs-footer-840 .cs-social-link:hover .cs-social-img {
    filter: grayscale(1) brightness(1000%);
  }

  #cs-footer-840 .cs-social-img {
    height: 1.75rem;
    width: auto;
    display: block;
  }

  #cs-footer-840 .cs-header {
    font-size: 1.25rem;
    line-height: 1.5em;
    font-weight: 700;
    margin: 0 0 1.25rem 0;
    color: var(--bodyTextColorWhite);
    display: block;
    position: relative;
  }

  #cs-footer-840 .cs-ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }

  #cs-footer-840 .cs-ul-1 {
    width: 100%;
    max-width: 21.875rem;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    column-gap: 2rem;
  }

  #cs-footer-840 .cs-ul-1 .cs-li {
    width: 44%;
  }

  #cs-footer-840 .cs-li {
    list-style: none;
  }

  #cs-footer-840 .cs-link {
    font-size: 1rem;
    text-decoration: none;
    line-height: 1.5em;
    text-align: left;
    color: #bababa;
    display: inline-flex;
    align-items: flex-start;
    gap: 0.5rem;
    transition: color 0.3s;
  }

  #cs-footer-840 .cs-link:hover {
    color: var(--primaryLight);
  }

  #cs-footer-840 .cs-icon {
    width: 1.25rem;
    height: auto;
    margin-right: 0.125rem;
    display: block;
  }

  #cs-footer-840 .cs-bottom {
    text-align: center;
    width: 100%;
    max-width: 80rem;
    /* 48px - 64px */
    margin: clamp(3rem, 7vw, 4rem) auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid #484848;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
  }

  #cs-footer-840 .cs-credit,
  #cs-footer-840 .cs-bottom-link,
  #cs-footer-840 .cs-credit-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-decoration: none;
    width: auto;
    margin: 0;
    color: #bababa;
    display: inline-block;
    position: relative;
    transition: color 0.3s;
  }

  #cs-footer-840 .cs-credit {
    width: 100%;
  }

  #cs-footer-840 .cs-credit-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-decoration: none;
    width: auto;
    margin: 0;
    color: #bababa;
    display: inline-block;
    position: relative;
  }

  #cs-footer-840 .cs-credit-link:hover {
    color: var(--primary);
  }

  #cs-footer-840 .cs-bottom-links {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #cs-footer-840 .cs-bottom-link {
    display: flex;
    align-items: center;
  }

  #cs-footer-840 .cs-bottom-link:hover {
    color: var(--primary);
  }

  #cs-footer-840 .cs-bottom-link:last-of-type:before {
    /* separator */
    content: "";
    width: 1px;
    height: 0.875rem;
    margin: 0 0.75rem;
    background: currentColor;
    opacity: 1;
    display: block;
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cs-footer-840 .cs-container {
    max-width: 80rem;
    /* 48px - 64px */
    row-gap: clamp(3rem, 7vw, 4rem);
  }

  #cs-footer-840 .cs-bottom {
    justify-content: space-between;
    flex-wrap: nowrap;
  }

  #cs-footer-840 .cs-credit {
    text-align: left;
  }

  #cs-footer-840 .cs-bottom-links {
    justify-content: flex-end;
  }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cs-footer-840 .cs-container {
    /* pushes all flex children to the top */
    align-items: flex-start;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }

  #cs-footer-840 .cs-logo-group {
    width: 30%;
    max-width: 25rem;
    /* pushes everything to the right of it as far as possible in a flexbox */
    margin-right: auto;
  }

  #cs-footer-840 .cs-text {
    width: 100%;
  }

  #cs-footer-840 .cs-social {
    flex-direction: row;
    position: relative;
    top: auto;
    right: auto;
  }
}



/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  @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);
    }
  }

  #cs-wrapper-1411 {
    display: flex;
    flex-direction: column;
  }

  #reviews-1411 {
    /* centers the button */
    text-align: center;
    padding: var(--sectionPadding);
    background: linear-gradient(180deg, #f04d46 0%, #c9002c 100%);
    /* clips the orbs from causing overflow issues */
    /* overflow: hidden; */
    position: relative;
    z-index: 1;
  }

  #reviews-1411 .cs-container {
    width: 100%;
    /* changes to 1024px at desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 40px - 64px */
    gap: clamp(2.5rem, 5vw, 4rem);

    position: sticky;
    top: 150px;
  }

  #reviews-1411 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }

  #reviews-1411 .cs-title {
    max-width: 20ch;
    margin: 0;
    color: var(--headerTextColorLight);
  }

  #reviews-1411 .cs-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 28px - 60px */
    gap: clamp(1.75rem, 5vw, 3.75rem);
  }

  #reviews-1411 .cs-item {
    list-style: none;
    text-align: center;
    padding: 0;
    display: flex;
    grid-column: span 12;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    z-index: 1;
  }

  #reviews-1411 .cs-quote {
    width: 5.6875rem;
    height: auto;
    opacity: 0.3;
    display: block;
    position: absolute;
    top: -1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
  }

  #reviews-1411 .cs-item-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 2.6vw, 1.25rem);
    line-height: 1.5em;
    margin: 0;
    margin-bottom: 1.5rem;
    color: var(--bodyTextColorWhite);
  }

  #reviews-1411 .cs-flex-group {
    /* in case one card has more text than the other, this pushes up against the review text so the name and title are always at the bottom. Only works if parent is a flexbox */
    margin-top: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 8px - 24px */
    gap: clamp(0.8rem, 1.5vw, 1rem);
  }

  #reviews-1411 .cs-picture {
    width: 10rem;
    height: 10rem;
    margin: 0;
    border-radius: 50%;
    box-sizing: border-box;
    border: 2px solid var(--primary);
    background-color: var(--primary);
    display: block;
    /* sends it to the bottom in the 2nd position */
    order: 2;
    /* clips image corners to make circle */
    overflow: hidden;
    position: relative;
  }

  #reviews-1411 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes the image behave like a background image */
    object-fit: cover;
  }

  #reviews-1411 .cs-name {
    font-size: 1.5625rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: block;
  }

  #reviews-1411 .cs-job {
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 400;
    margin: 0;
    color: var(--bodyTextColorWhite);
    display: block;
  }

  #reviews-1411 .cs-bubbles {
    font-size: min(2.5vw, 0.7em);
    width: 35.125em;
    height: 35.125em;
    display: none;
    position: absolute;
    /* changes to 160px at larger desktop */
    left: -16.25em;
    /* changes to 30px at large desktop */
    bottom: -3.125em;
    z-index: -1;
  }

  #reviews-1411 .cs-bubbles:before {
    /* white border bubble */
    content: "";
    width: 26.25em;
    height: 26.25em;
    background: transparent;
    border: 1px solid #fff;
    border-radius: 50%;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    animation-name: floatAnimation;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }

  #reviews-1411 .cs-bubbles:after {
    /* orange bubble */
    content: "";
    width: 20.6875em;
    height: 20.6875em;
    background: linear-gradient(180deg, #c9002c 0%, #f04d46 100%);
    /* opacity: 0.15; */
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    animation-name: floatAnimation2;
    animation-duration: 14s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
}

/* Desktop - 1204px */
@media only screen and (min-width: 64rem) {
  #cs-wrapper-1411 {
    flex-direction: row;
  }

  #reviews-1411 {
    width: 50%;
    /* 40px - 80px */
    padding-left: clamp(2.5rem, 5vw, 5rem);
    padding-right: clamp(2.5rem, 5vw, 5rem);
  }

  #reviews-1411 .cs-content {
    text-align: left;
    align-items: flex-start;
  }

  #reviews-1411 .cs-flex,
  #reviews-1411 .cs-item {
    text-align: left;
    align-items: flex-start;
  }

  #reviews-1411 .cs-quote {
    left: 0;
    transform: none;
  }
}

/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #reviews-1411 .cs-container {
    margin-right: 0;
  }

  #reviews-1411 .cs-flex {
    flex-direction: row;
  }

  #reviews-1411 .cs-picture {
    /* sends it to the left in the 1st position */
    order: -1;
    /* prevents flexbox from squishing it */
    flex: none;
  }

  #reviews-1411 .cs-bubbles {
    display: block;
    margin-right: 15.625rem;
    left: auto;
    right: 50%;
  }
}

/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #faq-1411 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
  }

  #faq-1411 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 40px - 48px */
    gap: clamp(2.5rem, 5vw, 3rem);
  }

  #faq-1411 .cs-content {
    text-align: left;
  }

  #faq-1411 .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
  }

  #faq-1411 .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
  }

  #faq-1411 .cs-title {
    margin: 0 0 1.5rem 0;
    color: var(--bodyTextColorWhite);
  }

  #faq-1411 .cs-faq-group {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  #faq-1411 .cs-faq-item {
    list-style: none;
    width: 100%;
    border-bottom: 1px solid #e8e8e8;
    transition: border-bottom 0.3s;
  }

  #faq-1411 .cs-faq-item.active {
    border-color: #fff;
  }

  #faq-1411 .cs-faq-item.active .cs-button {
    color: var(--bodyTextColorWhite);
  }

  #faq-1411 .cs-faq-item.active .cs-button:before {
    background-color: #fff;
    transform: rotate(315deg);
  }

  #faq-1411 .cs-faq-item.active .cs-button:after {
    background-color: #fff;
    transform: rotate(-315deg);
  }

  #faq-1411 .cs-faq-item.active .cs-item-p {
    height: auto;
    /* 20px - 24px bottom */
    padding: 0 0 clamp(1.25rem, 1.3vw, 1.5rem);
    opacity: 1;
  }

  #faq-1411 .cs-button {
    font-size: 1.25rem;
    line-height: 1.2em;
    text-align: left;
    font-weight: bold;
    /* 16px - 20px */
    padding: clamp(1rem, 1.3vw, 1.25rem) 0;
    border: none;
    background: transparent;
    color: var(--bodyTextColorWhite);
    display: block;
    width: 100%;
    position: relative;
    transition:
      background-color 0.3s,
      color 0.3s;
  }

  #faq-1411 .cs-button:hover {
    cursor: pointer;
  }

  #faq-1411 .cs-button:before {
    /* left line */
    content: "";
    width: 0.5rem;
    height: 0.125rem;
    background-color: var(--bodyTextColorWhite);
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 45%;
    right: 1.5rem;
    transform: rotate(45deg);
    /* animate the transform from the left side of the x axis, and the center of the y */
    transform-origin: left center;
    transition: transform 0.5s;
  }

  #faq-1411 .cs-button:after {
    /* right line */
    content: "";
    width: 0.5rem;
    height: 0.125rem;
    background-color: var(--bodyTextColorWhite);
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 45%;
    right: 1.3125rem;
    transform: rotate(-45deg);
    /* animate the transform from the right side of the x axis, and the center of the y */
    transform-origin: right center;
    transition: transform 0.5s;
  }

  #faq-1411 .cs-button-text {
    width: 80%;
    display: block;
  }

  #faq-1411 .cs-item-p {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    width: 90%;
    height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    color: var(--bodyTextColorWhite);
    /* clips the text so it doesn't show up */
    overflow: hidden;
    transition:
      opacity 0.3s,
      padding-bottom 0.3s;
  }

  #faq-1411 .cs-card-group {
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 8px - 20px */
    gap: clamp(0.5rem, 2vw, 1.25rem);
  }

  #faq-1411 .cs-item {
    width: 100%;
    text-align: center;
    list-style: none;
    margin: 0;
    /* 24px - 32px */
    padding: 2rem clamp(1.5rem, 3vw, 2rem);
    background-color: #fff;
    border-radius: 1rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    grid-column: span 6;
    grid-row: span 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    transition:
      box-shadow 0.3s,
      border-color 0.3s;
  }

  #faq-1411 .cs-item:hover {
    box-shadow: 0px 4px 120px 0px rgba(0, 0, 0, 0.12);
    border-color: transparent;
  }

  #faq-1411 .cs-item:hover .cs-h3 {
    color: var(--primary);
  }

  #faq-1411 .cs-image-group {
    /* 80px - 100px */
    width: clamp(5rem, 6vw, 6.25rem);
    height: auto;
    /* 20px - 24px */
    margin: 0 0 clamp(1.25rem, 2.5vw, 1.5rem);
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
    position: relative;
  }

  #faq-1411 .cs-icon {
    /* 38px - 48px */
    width: clamp(2.375rem, 3vw, 3rem);
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  #faq-1411 .cs-graphic {
    width: 100%;
    height: auto;
  }

  #faq-1411 .cs-number {
    /* 25px - 49px */
    font-size: clamp(1.5625rem, 3.3vw, 3.0625rem);
    line-height: 1.2em;
    font-weight: bold;
    text-align: inherit;
    margin: 0;
    color: var(--headerColor);
    transition: color 0.3s;
  }

  #faq-1411 .cs-desc {
    font-size: 1rem;
    line-height: 1.5em;
    text-align: inherit;
    margin: 0;
    color: var(--bodyTextColor);
  }

  #faq-1411 .cs-background {
    /* background: linear-gradient(180deg, #f04d46 0%, #c9002c 100%); */
    background: #c9002c;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }

  #faq-1411 .cs-background img {
    background: linear-gradient(180deg, #f04d46 0%, #c9002c 100%);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
  }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #faq-1411 {
    width: 50%;
    /* 40px - 80px */
    padding-left: clamp(2.5rem, 5vw, 5rem);
    padding-right: clamp(2.5rem, 5vw, 5rem);
  }

  #faq-1411 .cs-container {
    max-width: 80rem;
    margin-left: 0;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3.25rem;
  }

  #faq-1411 .cs-content {
    max-width: 35rem;
  }

  #faq-1411 .cs-card-group {
    max-width: 39.375rem;
    /* pushes up the same amount the cs-items are being translated up to maintain the proper spacing */
    margin-top: 3.75rem;
    align-items: stretch;
    /* sends it to the left in the 1st */
    order: -1;
  }

  #faq-1411 .cs-background {
    background: linear-gradient(180deg, #f04d46 0%, #c9002c 100%);
  }
}

/*# sourceMappingURL=root.css.map */


/*-- -------------------------- -->
<---          Contact           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #contact-1268 {
    position: relative;
    z-index: 1;
  }

  #contact-1268 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-direction: column;
  }

  #contact-1268 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    padding: var(--sectionPadding);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
    position: sticky;
    top: 150px;
  }

  #contact-1268 .cs-form-group {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 44rem;
    /* resets to 0 at tablet */
    margin: auto;
    padding: var(--sectionPadding);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
    order: 2;
  }

  #contact-1268 .cs-title {
    text-align: left;
    color: var(--headerTextColor);
  }

  #contact-1268 .cs-text {
    margin: 0;
    color: var(--bodyTextColor);
    opacity: 0.8;
  }

  #contact-1268 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    text-align: center;
    /* max-width: 32.625rem; */
    margin: 0 auto 2rem 0;
    color: var(--headerColor);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
  }

  #contact-1268 .cs-picture {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: none;
    position: relative;
    z-index: 1;
  }

  #contact-1268 .cs-picture:before {
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0.2;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
  }

  #contact-1268 .cs-form {
    width: 100%;
    padding: 0;
    /* prevents flexbox from affecting height and width */
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.75rem;
  }

  #contact-1268 .cs-span-consent {
    /* 14px - 16px */
    display: flex;
    grid-column: span 12;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    gap: 0.5rem;
  }

  #contact-1268 .cs-checkbox-label {
    color: var(--bodyTextColor);
    /* Add this */
    display: inline-block;
    vertical-align: middle;
    max-width: 94%;
    /* Adjust as necessary */
  }

  #contact-1268 .cs-checkbox {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
  }

  #contact-1268 .cs-label {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    color: var(--headerColor);
    display: flex;
    grid-column: span 12;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.5rem;
  }

  #contact-1268 .cs-checkbox-label {
    color: var(--bodyTextColor);
  }

  #contact-1268 .cs-checkbox {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }

  #contact-1268 .cs-input {
    font-size: 1rem;
    width: 100%;
    /* 46px - 56px */
    height: clamp(2.875rem, 4.5vw, 3.5rem);
    padding: 0;
    padding-left: 1.5rem;
    color: var(--headerColor);
    border-radius: 0.5rem;
    border: 1px solid #dad9e3;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
  }

  #contact-1268 .cs-input::placeholder {
    color: #7d799c;
    opacity: 0.6;
  }

  #contact-1268 .cs-textarea {
    min-height: 7.5rem;
    padding-top: 1.5rem;
    margin-bottom: 1rem;
    font-family: inherit;
  }

  #contact-1268 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #1a1a1a;
    border: none;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    transition: color 0.3s;
  }

  #contact-1268 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }

  #contact-1268 .cs-button-solid:hover {
    color: #fff;
  }

  #contact-1268 .cs-button-solid:hover:before {
    width: 100%;
  }

  #contact-1268 .cs-submit {
    width: 100%;
    margin: 0;
    color: var(--bodyTextColorWhite);
    border-radius: 0.5rem;
    grid-column: span 12;
  }

  #contact-1268 .cs-submit:hover {
    cursor: pointer;
  }

  #contact-1268 .cs-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
  }

  #contact-1268 .cs-card-group {
    width: 100%;
    max-width: 32.625rem;
    margin: 0;
    padding: var(--sectionPadding);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 16px - 20px */
    gap: clamp(1rem, 2.3vw, 1.25rem);
    order: 1;
    position: relative;
    z-index: 1;
  }

  #contact-1268 .cs-item {
    text-align: left;
    list-style: none;
    width: 100%;
    margin: 0;
    /* 16px - 20px */
    padding: clamp(1rem, 4vw, 2.5rem);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    background-color: #fff;
    position: relative;
    z-index: 1;
  }

  #contact-1268 .cs-item:hover:before {
    opacity: 1;
  }

  #contact-1268 .cs-item:hover .cs-header,
  #contact-1268 .cs-item:hover .cs-item-text,
  #contact-1268 .cs-item:hover .cs-link {
    color: var(--bodyTextColorWhite);
  }

  #contact-1268 .cs-item:hover .cs-text,
  #contact-1268 .cs-item:hover .cs-link {
    opacity: 0.8;
  }

  #contact-1268 .cs-item:hover .cs-link:hover {
    color: var(--primary);
  }

  #contact-1268 .cs-item:hover .cs-icon {
    filter: grayscale(1) brightness(1000%);
  }

  #contact-1268 .cs-item:before {
    /* hover border and background */
    content: "";
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    border: 1px solid var(--primary);
    opacity: 0;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
    transition: opacity 0.3s;
  }

  #contact-1268 .cs-header {
    font-size: 1.25rem;
    line-height: 1.2em;
    text-align: inherit;
    font-weight: 700;
    /* 12px - 16px */
    margin: 0 0 clamp(0.75rem, 1.6vw, 1rem);
    display: block;
    transition: color 0.3s;
  }

  #contact-1268 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-align: inherit;
    margin: 0 0 0.25rem;
    color: var(--bodyTextColor);
    display: block;
    transition: color 0.3s;
  }

  #contact-1268 .cs-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-align: inherit;
    margin: 0;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.25rem;
    transition: color 0.3s;
  }

  #contact-1268 .cs-icon {
    width: 1rem;
    height: auto;
  }

  #contact-1268 .cs-background {
    width: 100%;
    height: 100%;
    /* background-color: #1a1a1a; */
    background: #faf8f7;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }

  #contact-1268 .cs-background img {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {

  #contact-1268 .cs-label:nth-of-type(1),
  #contact-1268 .cs-label:nth-of-type(2) {
    grid-column: span 6;
  }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #contact-1268 {
    /* moved padding back to the section container */
    padding: var(--sectionPadding);
  }

  #contact-1268 .cs-container {
    flex-direction: row;
    justify-content: space-between;
  }

  #contact-1268 .cs-content {
    text-align: left;
    margin: 0;
    padding: 0;
    align-items: flex-start;
  }

  #contact-1268 .cs-form-group {
    width: 43%;
    max-width: 32.625rem;
    margin: 0;
    padding: 0;
  }

  #contact-1268 .cs-form {
    padding: 0;
  }

  #contact-1268 .cs-wrapper {
    width: 50%;
    max-width: 32.75rem;
    flex: none;
    /* removes position from it so the absolutely positioned background group can now be positioned relative to the section container */
    position: initial;
  }

  #contact-1268 .cs-background {
    background: #faf8f7;
    width: 60vw;
    height: 100%;
    left: auto;
    right: 50%;
    top: 0;
  }

  #contact-1268 .cs-card-group {
    padding: 0;
  }
}

/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-418 {
    padding: var(--sectionPadding);
  }

  #sbs-418 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* 48px - 76px */
    gap: clamp(3rem, 9vw, 4.75rem);
  }

  #sbs-418 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 32.625rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }

  #sbs-418 .cs-text {
    margin-bottom: 1rem;
  }

  #sbs-418 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }

  #sbs-418 .cs-button-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
  }

  #sbs-418 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }

  #sbs-418 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }

  #sbs-418 .cs-button-solid:hover:before {
    width: 100%;
  }

  #sbs-418 .cs-button-transparent {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: var(--primary);
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: transparent;
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    transition:
      color 0.3s,
      border-color 0.3s,
      background-color 0.3s;
  }

  #sbs-418 .cs-button-transparent:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }

  #sbs-418 .cs-button-transparent:hover {
    color: #fff;
    border-color: #000;
    background-color: #000;
  }

  #sbs-418 .cs-button-transparent:hover:before {
    width: 100%;
  }

  #sbs-418 .cs-image-group {
    width: 100%;
    /* changes to 650px at desktop */
    max-width: 34.375rem;
    height: auto;
    /* removed at desktop */
    padding-top: 1.875rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    order: -1;
  }

  #sbs-418 .cs-info {
    /* 12px - 20px */
    padding: clamp(0.75rem, 1.5vw, 1.25rem);
    /*260px - 360px */
    min-width: clamp(16.25rem, 30vw, 22.5rem);
    background-color: #fff;
    border: 1px solid #b4b2c7;
    border-radius: 0.75rem;
    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    /* next two properties centers it horizontally */
    left: 50%;
    transform: translateX(-50%);
    bottom: 1.25rem;
  }

  #sbs-418 .cs-icon {
    /* 32px - 48px */
    width: clamp(2rem, 4vw, 3rem);
    height: auto;
    margin-right: 0.75rem;
  }

  #sbs-418 .cs-header {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-weight: 700;
    line-height: 1.2em;
    margin-bottom: 0.25rem;
    color: var(--headerColor);
    display: block;
  }

  #sbs-418 .cs-desc {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.2em;
    color: var(--bodyTextColor);
  }

  #sbs-418 .cs-picture {
    width: 85%;
    max-width: 34.875rem;
    margin-bottom: 2.5rem;
    border-radius: 0.75rem;
    /* removed at tablet */
    aspect-ratio: 1.01115242;
    /* clips img corners */
    overflow: hidden;
    display: block;
    position: relative;
  }

  #sbs-418 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes it act like a background image */
    object-fit: cover;
  }

  #sbs-418 .cs-trapezoid {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbs-418 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  #sbs-418 .cs-content {
    width: 50%;
    /* prevents flexbox from squishing it */
    flex: none;
  }

  #sbs-418 .cs-image-group {
    max-width: 41.1875rem;
  }

  #sbs-418 .cs-picture {
    /* 269px - 496px changes at desktop */
    height: clamp(16.8125rem, 35vw, 31rem);
    aspect-ratio: none;
  }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-418 .cs-container {
    align-items: center;
  }

  #sbs-418 .cs-image-group {
    max-width: 40.625rem;
    padding: 0;
  }

  #sbs-418 .cs-picture {
    /* 421px - 496px changes at desktop */
    height: clamp(26.3125rem, 40vw, 31rem);
  }

  #sbs-418 .cs-info {
    left: auto;
    right: 1.125rem;
    transform: none;
  }

  #sbs-418 .cs-trapezoid {
    height: 80%;
    bottom: 0;
  }
}