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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-856 {
    /* centers button */
    text-align: center;
    /* 116px - 164px top */
    /* 60px - 100px  bottom */
    padding: clamp(7.25rem, 16.82vw, 10.25rem) 1rem clamp(3.75rem, 7.82vw, 6.25rem);
    background-color: #f7f7f7;
    /* clips the svg wave from overflowing */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #hero-856 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 3rem;
  }
  #hero-856 .cs-content {
    max-width: 39.375rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  #hero-856 .cs-topper {
    font-size: 1rem;
    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;
  }
  #hero-856 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 5vw, 3.8125rem);
    font-weight: 900;
    line-height: 1.2em;
    text-align: center;
    /* 23 characters including spaces wide */
    max-width: 23ch;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
  }
  #hero-856 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.5em;
    text-align: center;
    width: 100%;
    max-width: 33.1875rem;
    /* 28px - 40px */
    margin: 0 0 clamp(1.75rem, 3.92vw, 2.5rem) 0;
    color: var(--bodyTextColor);
  }
  #hero-856 .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;
  }
  #hero-856 .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;
  }
  #hero-856 .cs-button-solid:hover:before {
    width: 100%;
  }
  #hero-856 .cs-picture {
    width: 100%;
    max-width: 35.625rem;
    /* 400px - 712px */
    height: clamp(25rem, 95vw, 44.5rem);
    /* 100px - 200px */
    border-radius: 0 clamp(6.25rem, 17vw, 12.5rem) 0 clamp(6.25rem, 17vw, 12.5rem);
    box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.16);
    /* clips the img tag corners */
    overflow: hidden;
    display: block;
    position: relative;
  }
  #hero-856 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes image act as a background image */
    object-fit: cover;
    /* ensures the top of the images is at the top of the container, no heads getting cut off */
    object-position: top;
  }
  #hero-856 .cs-wave {
    /* we're stretching the svg wider than the viewport so it's taller and has more of a presence */
    width: 320%;
    height: auto;
    display: block;
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    z-index: -1;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #hero-856 {
    text-align: left;
  }
  #hero-856 .cs-container {
    flex-direction: row;
    justify-content: space-between;
  }
  #hero-856 .cs-content {
    width: 40vw;
    /* prevents flex-box from squishing it */
    flex: none;
    align-items: flex-start;
    /* sends it to the right in the 2nd position */
    order: 2;
  }
  #hero-856 .cs-title,
  #hero-856 .cs-text {
    text-align: left;
  }
  #hero-856 .cs-picture {
    /* 623px - 814px */
    height: clamp(38.9375rem, 60vw, 50.875rem);
  }
  #hero-856 .cs-wave {
    width: 100%;
    left: 0;
    /* flips it horizontally */
    transform: scaleX(-1);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #hero-856 {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #hero-856 .cs-title,
  body.dark-mode #hero-856 .cs-text,
  body.dark-mode #hero-856 .cs-number,
  body.dark-mode #hero-856 .cs-desc {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #hero-856 .cs-wave path {
    fill: var(--dark);
  }
}
/*-- -------------------------- -->
<---        Why Choose          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-296 {
      padding: var(--sectionPadding);
  }
  #services-296 .cs-container {
      width: 100%;
      /* changes to 1440px on desktop */
      max-width: 43.75rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #services-296 .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;
  }

  #services-296 .cs-title {
      max-width: 30ch;
  }
  #services-296 .cs-card-group {
      width: 100%;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      /* 16px - 20px */
      gap: clamp(1rem, 1.5vw, 1.25rem);
  }
  #services-296 .cs-item {
      list-style: none;
      text-align: left;
      width: 100%;
      margin: 0;
      padding: 2rem;
      background-color: #f7f7f7;
      border-radius: 1rem;
      /* clips image corners */
      overflow: hidden;
      /* prevents padding from adding to height and width */
      box-sizing: border-box;
      position: relative;
      z-index: 1;
      transition: background-color 0.3s;
  }
  #services-296 .cs-item:hover {
      cursor: pointer;
  }
  #services-296 .cs-item:hover .cs-image {
      opacity: 1;
  }
  #services-296 .cs-item:hover .cs-image img {
      transform: scale(1.1);
  }
  #services-296 .cs-item:hover .cs-icon {
      /* turns it white */
      filter: grayscale(1) brightness(1000%);
  }
  #services-296 .cs-item:hover .cs-h3,
  #services-296 .cs-item:hover .cs-item-text {
      color: #fff;
  }
  #services-296 .cs-image {
      width: 100%;
      height: 100%;
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      z-index: -1;
      background-color: var(--primary);
      transition: opacity 0.3s;
  }
  #services-296 .cs-image img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      opacity: 0.4;
      object-fit: cover;
      transition: transform 0.6s;
  }
  #services-296 .cs-link {
      text-decoration: none;
  }
  #services-296 .cs-icon {
      width: auto;
      height: 3rem;
      margin-bottom: 1.5rem;
      display: block;
  }
  #services-296 .cs-icon path {
      transition: fill 0.3s;
  }
  #services-296 .cs-h3 {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 2vw, 1.5625rem);
      line-height: 1.2em;
      margin: 0;
      margin-bottom: 1rem;
      color: var(--headerColor);
      transition: color 0.3s;
      font-weight: bold;
  }
  #services-296 .cs-item-text {
      font-size: 1rem;
      line-height: 1.5em;
      margin: 0;
      color: var(--bodyTextColor);
      transition: color 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-296 .cs-card-group {
      justify-content: space-between;
      /* makes sure every box "stretches" to be the same height as the tallest box */
      align-items: stretch;
      flex-direction: row;
      flex-wrap: wrap;
  }
  #services-296 .cs-item {
      width: 48.6%;
  }
}
/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #services-296 .cs-container {
      max-width: 90rem;
  }
  #services-296 .cs-card-group {
      justify-content: center;
  }
  #services-296 .cs-item {
      /* we do this so it's stackable. You can add new any number of reviews you want and they will stack and center in the middle. We dont use grid because if you have an odd number of reviews, they don't stay centered.  They align with their grid lines. If you want 4 reviews in a row, lower the width under 22.5vw or 23% to get the desired sizes fit 4 in a row and then stack when you add more */
      width: clamp(23.84%, 22.5vw, 23.95%);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #services-296 .cs-topper {
      color: var(--secondaryLight);
  }
  body.dark-mode #services-296 .cs-title,
  body.dark-mode #services-296 .cs-text,
  body.dark-mode #services-296 .cs-h3,
  body.dark-mode #services-296 .cs-item-text {
      color: var(--bodyTextColorWhite);
  }
  body.dark-mode #services-296 .cs-item {
      background-color: var(--accent);
  }
  body.dark-mode #services-296 .cs-item:hover {
      background-color: var(--primary);
  }
  body.dark-mode #services-296 .cs-icon {
      /* turns it white */
      filter: grayscale(1) brightness(1000%);
  }
}

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

/* 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);
      }
  }
  #sbsr-1363 {
      padding: var(--sectionPadding);
      position: relative;
      overflow: hidden;
      z-index: 1;
  }
  #sbsr-1363 .cs-container {
      width: 100%;
      /* changes to 1280px at desktop */
      max-width: 36.5rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #sbsr-1363 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: left;
      width: 100%;
      max-width: 39.375rem;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: flex-start;
  }

  #sbsr-1363 .cs-topper {
      color: #767676;
  }
  #sbsr-1363 .cs-title {
      /* 23 characters wide including spaces */
      max-width: 26ch;
  }
  #sbsr-1363 .cs-text {
      margin-bottom: 1rem;
  }
  #sbsr-1363 .cs-text:last-of-type {
      margin-bottom: 1.5rem;
  }
  #sbsr-1363 .cs-card-group {
      width: 100%;
      max-width: 39.375rem;
      margin: 0 0 1.5rem 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(15.625rem, 1fr));
      align-items: center;
      gap: clamp(1rem, 2vw, 1.25rem);
  }
  #sbsr-1363 .cs-item {
      list-style: none;
      /* 16px - 24px */
      padding: clamp(1rem, 3vw, 1.5rem);
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      background-color: #f7f7f7;
      border-radius: 1rem;
      border: 1px solid #e8e8e8;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.75rem;
  }
  #sbsr-1363 .cs-h3 {
      font-size: 1.25rem;
      line-height: 1.2em;
      font-weight: 700;
      margin: 0;
      color: var(--headerColor);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 0.5rem;
  }
  #sbsr-1363 .cs-h3-icon {
      width: 2rem;
      height: auto;
      display: block;
  }
  #sbsr-1363 .cs-item-text {
      font-size: 0.875rem;
      line-height: 1.5em;
      margin: 0;
      color: var(--bodyTextColor);
  }
  #sbsr-1363 .cs-ul {
      width: 100%;
      margin: 0 0 1.5rem 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.75rem;
  }
  #sbsr-1363 .cs-li {
      font-size: var(--bodyFontSize);
      list-style: none;
      line-height: 1.5em;
      width: 100%;
      color: var(--bodyTextColor);
      display: flex;
      justify-content: flex-start;
      /* push icon top the top so if the list item goes to two lines the icon stays at the top */
      align-items: flex-start;
      gap: 0.5rem;
  }
  #sbsr-1363 .cs-icon {
      width: 1.5rem;
      height: auto;
      /* adds extra space between the icon and top of parent so it's more centered */
      margin-top: 1px;
      display: block;
  }
  #sbsr-1363 .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;
  }
  #sbsr-1363 .cs-button-solid:before {
      content: "";
      position: absolute;
      display: block;
      height: 100%;
      width: 0%;
      background: #1a1a1a;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s;
  }
  #sbsr-1363 .cs-button-solid:hover {
      color: var(--primary);
  }
  #sbsr-1363 .cs-button-solid:hover:before {
      width: 100%;
  }
  #sbsr-1363 .cs-image-group {
      width: 100%;
      max-width: 36.625rem;
      /* Changes to auto at desktop */
      height: 32.5rem;
      /* 32px - 48px */
      border-radius: clamp(2rem, 4vw, 3rem);
      /* clips the corners of the children around the border radius */
      overflow: hidden;
      position: relative;
  }
  #sbsr-1363 .cs-background {
      width: 100%;
      height: 100%;
      /* makes it cover the parent dimensions */
      object-fit: cover;
      display: block;
  }
  #sbsr-1363 .cs-background img {
      width: 100%;
      height: 100%;
      /* makes it cover the parent like a backgorund image */
      object-fit: cover;
      display: block;
  }
  #sbsr-1363 .cs-box {
      text-align: left;
      width: 100%;
      max-width: 19rem;
      padding: 2rem;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      background-color: var(--primary);
      /* 48px - 80px */
      border-radius: 2rem;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1.5rem;
      position: absolute;
      /* 12px - 20px */
      right: clamp(0.75rem, 1.9vw, 1.5rem);
      /* 12px - 20px */
      bottom: clamp(0.75rem, 1.9vw, 1.5rem);
  }
  #sbsr-1363 .cs-box-icon {
      width: 3.75rem;
      height: auto;
      display: block;
  }
  #sbsr-1363 .cs-desc {
      font-size: 1.25rem;
      line-height: 1.2em;
      text-align: inherit;
      font-weight: 700;
      width: 100%;
      margin: 0;
      color: var(--bodyTextColorWhite);
  }
  #sbsr-1363 .cs-bubbles {
      font-size: min(2.5vw, 0.7em);
      width: 26.1875em;
      height: 26.6875em;
      position: absolute;
      /* reset at larger desktop */
      right: -16.25em;
      /* changes to 30px at desktop */
      bottom: -3.125em;
      z-index: -1;
  }
  #sbsr-1363 .cs-bubbles:before {
      /* white border bubble */
      content: "";
      width: 20.625em;
      height: 20.625em;
      background: transparent;
      border: 1px solid #1a1a1a;
      border-radius: 50%;
      opacity: 1;
      position: absolute;
      display: block;
      top: 0;
      right: 0;
      animation-name: floatAnimation;
      animation-duration: 5s;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
  }
  #sbsr-1363 .cs-bubbles:after {
      /* orange bubble */
      content: "";
      width: 16.25em;
      height: 16.25em;
      background: var(--primary);
      opacity: 0.15;
      border-radius: 50%;
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: -1;
      animation-name: floatAnimation2;
      animation-duration: 14s;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbsr-1363 .cs-container {
      max-width: 80rem;
      flex-direction: row;
      justify-content: space-between;
      align-items: stretch;
  }
  #sbsr-1363 .cs-image-group {
      height: auto;
      /* sends it to the right in the 2nd position */
      order: 2;
  }
  #sbsr-1363 .cs-bubbles {
      font-size: min(2.5vw, 1em);
      right: -6.25rem;
      bottom: 0rem;
  }
}
/* Large Desktop 1600px */
@media only screen and (min-width: 100rem) {
  #sbsr-1363 .cs-bubbles {
      margin-right: 46.875rem;
      left: auto;
      right: 50%;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbsr-1363 .cs-topper {
      color: var(--primary);
  }
  body.dark-mode #sbsr-1363 .cs-title,
  body.dark-mode #sbsr-1363 .cs-text,
  body.dark-mode #sbsr-1363 .cs-li,
  body.dark-mode #sbsr-1363 .cs-item-text {
      color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbsr-1363 .cs-text,
  body.dark-mode #sbsr-1363 .cs-li,
  body.dark-mode #sbsr-1363 .cs-item-text {
      opacity: 0.8;
  }
  body.dark-mode #sbsr-1363 .cs-item {
      background-color: rgba(0, 0, 0, 0.2);
      border-color: rgba(255, 255, 255, 0.2);
  }
  body.dark-mode #sbsr-1363 .cs-h3 {
      color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbsr-1363 .cs-icon {
      filter: grayscale(1) brightness(1000%);
  }
  body.dark-mode #sbsr-1363 .cs-bubbles:before {
      border-color: rgba(255, 255, 255, 0.2);
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #RPsbs-1587,
  #RPsbsr-1587 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
  }
  #RPsbs-1587 .cs-container,
  #RPsbsr-1587 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(2.5rem, 6vw, 4rem);
  }
  #RPsbs-1587 .cs-picture,
  #RPsbsr-1587 .cs-picture {
    width: 100%;
    height: clamp(25rem, 80vw, 47rem);
    display: block;
    position: relative;
  }
  #RPsbs-1587 .cs-picture img,
  #RPsbsr-1587 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #RPsbs-1587 .cs-content,
  #RPsbsr-1587 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 39.375rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
    justify-content: center;
  }
  #RPsbs-1587 .cs-title,
  #RPsbsr-1587 .cs-title {
    /* 26 characters wide including spaces */
    max-width: 26ch;
    margin: 0;
  }
  #RPsbs-1587 .cs-card-group,
  #RPsbsr-1587 .cs-card-group {
    width: 100%;
    /* 550px - 630px */
    max-width: clamp(34.375rem, 50vw, 39.375rem);
    padding: 0;
    /* 24px - 40px */
    margin: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(1.75rem, 4vw, 2.5rem) 0;
    display: grid;
    align-items: center;
    gap: clamp(1rem, 4vw, 2.5rem);
  }
  #RPsbs-1587 .cs-item,
  #RPsbsr-1587 .cs-item {
    list-style: none;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #RPsbs-1587 .wrapper,
  #RPsbsr-1587 .wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.625rem;
  }
  #RPsbs-1587 .cs-item-number,
  #RPsbsr-1587 .cs-item-number {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--primary);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
  }
  #RPsbs-1587 .cs-h3,
  #RPsbsr-1587 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
  }
  #RPsbs-1587 .cs-item-text,
  #RPsbsr-1587 .cs-item-text {
    font-size: 0.875rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #RPsbs-1587 .cs-button-solid,
  #RPsbsr-1587 .cs-button-solid {
    font-size: 1rem;
    line-height: 3.5em;
    text-decoration: none;
    font-weight: 700;
    overflow: hidden;
    width: auto;
    margin: 0;
    color: #fff;
    padding: 0 3rem;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #RPsbs-1587 .cs-button-solid:before,
  #RPsbsr-1587 .cs-button-solid:before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 0%;
    background: #1a1a1a;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #RPsbs-1587 .cs-button-solid:hover,
  #RPsbsr-1587 .cs-button-solid:hover {
    color: var(--primary);
  }
  #RPsbs-1587 .cs-button-solid:hover:before,
  #RPsbsr-1587 .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #RPsbs-1587 .cs-container,
  #RPsbsr-1587 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #RPsbs-1587 .cs-content,
  #RPsbsr-1587 .cs-content {
    width: 50%;
    max-width: 39.375rem;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #RPsbs-1587 .cs-card-group,
  #RPsbsr-1587 .cs-card-group {
    grid-template-columns: repeat(12, 1fr);
  }
  #RPsbs-1587 .cs-item,
  #RPsbsr-1587 .cs-item {
    grid-column: span 11;
  }
  #RPsbs-1587 .cs-picture,
  #RPsbsr-1587 .cs-picture {
    height: auto;
    min-height: 32.8125rem;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #RPsbs-1587 .cs-content,
  #RPsbsr-1587 .cs-content {
    padding: 5.25rem 0;
    align-self: center;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #RPsbs-1587 .cs-topper,
  body.dark-mode #RPsbsr-1587 .cs-topper {
    color: var(--primary);
  }
  body.dark-mode #RPsbs-1587 .cs-title,
  body.dark-mode #RPsbsr-1587 .cs-title,
  body.dark-mode #RPsbs-1587 .cs-li,
  body.dark-mode #RPsbsr-1587 .cs-li,
  body.dark-mode #RPsbs-1587 .cs-item-text,
  body.dark-mode #RPsbsr-1587 .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #RPsbs-1587 .cs-li,
  body.dark-mode #RPsbsr-1587 .cs-li,
  body.dark-mode #RPsbs-1587 .cs-item-text,
  body.dark-mode #RPsbsr-1587 .cs-item-text {
    opacity: 0.8;
  }
  body.dark-mode #RPsbs-1587 .cs-h3,
  body.dark-mode #RPsbsr-1587 .cs-h3 {
    color: var(--bodyTextColorWhite);
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #RPsbsr-1587 {
    background-color: #f7f7f7;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #RPsbsr-1587 .cs-picture {
    order: 2;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #RPsbsr-1587 {
    background-color: rgba(0, 0, 0, 0.2);
  }
}
 /*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-521 {
      padding: var(--sectionPadding);
  }
  #sbs-521 .cs-container {
      width: 100%;
      /* changes to 1280px at tablet */
      max-width: 34.375rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 60px */
      gap: clamp(3rem, 10vw, 3.75rem);
  }
  #sbs-521 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: left;
      width: 100%;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: flex-start;
  }

  #sbs-521 .cs-text {
      margin-bottom: 1rem;
  }
  #sbs-521 .cs-text:last-of-type {
      margin-bottom: 2rem;
  }
  #sbs-521 .cs-ul {
      width: 80%;
      /* 32px - 36px */
      margin: 0 0 clamp(2rem, 4vw, 2.25rem) 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      /* 24px - 32px */
      row-gap: clamp(1.5rem, 4vw, 2rem);
  }
  #sbs-521 .cs-li {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      list-style: none;
      line-height: 1.5em;
      font-weight: 700;
      margin: 0;
      color: var(--headerColor);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 2rem;
  }
  #sbs-521 .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-521 .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-521 .cs-button-solid:hover:before {
      width: 100%;
  }
  #sbs-521 .cs-image-group {
      width: 100%;
      max-width: 39.375rem;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      /* 40px - 48px */
      row-gap: clamp(2.5rem, 6vw, 3rem);
      /* sends it to the top in the first position */
      order: -1;
  }
  #sbs-521 .cs-stat-group {
      margin: 0;
      padding: 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 1rem;
  }
  #sbs-521 .cs-stat {
      list-style: none;
      max-width: 14.375rem;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
  }
  #sbs-521 .cs-number {
      /* 39px - 61px */
      font-size: clamp(2.4375rem, 5vw, 3.8125rem);
      line-height: 1.2em;
      font-weight: 900;
      color: var(--headerColor);
  }
  #sbs-521 .cs-desc {
      font-size: clamp(0.875rem, 1rem, 1.25rem);
      line-height: 1.5em;
      font-weight: 400;
      margin: 0;
      color: var(--bodyTextColor);
  }
  #sbs-521 .cs-picture {
      width: 100%;
      /* 244px - 339px, changes clamp at tablet */
      height: clamp(14rem, 62vw, 21.1875rem);
      display: block;
      position: relative;
  }
  #sbs-521 .cs-picture img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbs-521 .cs-container {
      max-width: 80rem;
      flex-direction: row;
      align-items: flex-start;
  }
  #sbs-521 .cs-content {
      width: 71%;
      max-width: 33.75rem;
  }
  #sbs-521 .cs-image-group {
      width: 68%;
  }
  #sbs-521 .cs-stat-group {
      justify-content: flex-start;
  }
  #sbs-521 .cs-picture {
      /* 340px - 461px */
      height: clamp(21.25rem, 35vw, 28.8125rem);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbs-521 .cs-title,
  body.dark-mode #sbs-521 .cs-text,
  body.dark-mode #sbs-521 .cs-li,
  body.dark-mode #sbs-521 .cs-desc {
      color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbs-521 .cs-number,
  body.dark-mode #sbs-521 .cs-topper {
      color: var(--secondary);
  }
  body.dark-mode #sbs-521 .cs-button-solid {
      background-color: var(--secondary);
      color: #1a1a1a;
  }
  body.dark-mode #sbs-521 .cs-button-solid:before {
      background-color: #fff;
  }
}

/*-- -------------------------- -->
<---          Pricing           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #pricing-1387 {
      padding: var(--sectionPadding);
      /* clips the cs-floater and prevents it from causing overflow issues */
      overflow: hidden;
      background-color: #f7f7f7;
      position: relative;
      z-index: 1;
  }
  #pricing-1387 .cs-container {
      width: 100%;
      /* changes to 1280px at tablet */
      max-width: 36.5rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 3vw, 4rem);
      position: relative;
  }
  #pricing-1387 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: center;
      width: 100%;
      max-width: 33.875rem;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: center;
  }

  #pricing-1387 .cs-title {
      max-width: 20ch;
  }
  #pricing-1387 .cs-text {
      margin-bottom: 1rem;
  }
  #pricing-1387 .cs-text:last-of-type {
      margin-bottom: 2rem;
  }
  #pricing-1387 .cs-toggle-group {
      width: 100%;
      max-width: 25.875rem;
      margin: 0;
      padding: 0.75rem;
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      background-color: #f1f1f4;
      border-radius: 0.5rem;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  #pricing-1387 .cs-plan {
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.5em;
      margin: 0;
      padding: 0;
      color: var(--headerColor);
  }
  #pricing-1387 .cs-plan:hover {
      cursor: pointer;
  }
  #pricing-1387 .cs-toggle {
      width: 3.25rem;
      height: 2rem;
      border-radius: 2.5rem;
      background-color: var(--primaryLight);
      margin: 0 1.5rem;
      position: relative;
      /* prevent flexbox from squishing it */
      flex: none;
  }
  #pricing-1387 .cs-toggle:hover {
      cursor: pointer;
  }
  #pricing-1387 .cs-toggle.active:before {
      opacity: 1;
  }
  #pricing-1387 .cs-toggle.active .cs-toggle-switch {
      left: 1.4375rem;
  }
  #pricing-1387 .cs-toggle:before {
      /* top right box */
      content: "";
      width: 100%;
      height: 100%;
      background: var(--primary);
      opacity: 0;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      border-radius: 2.5rem;
      transition: opacity 0.3s;
  }
  #pricing-1387 .cs-toggle-switch {
      width: 1.625rem;
      height: 1.625rem;
      display: block;
      border-radius: 50%;
      filter: drop-shadow(0px 3px 1px rgba(0, 0, 0, 0.06))
          drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.15));
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0.1875rem;
      transition: left 0.3s;
      background: #fff;
  }
  #pricing-1387 .cs-card-group {
      width: 100%;
      max-width: 39.375rem;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      /* 16px - 20px */
      gap: clamp(1rem, 2.3vw, 1.25rem);
  }
  #pricing-1387 .cs-card-group.cs-active.cs-option1 {
      /* when the active class is on the cs-card-group, run these styles */
      transform: scale(0);
      position: absolute;
      right: 0;
      bottom: 0;
      opacity: 0;
      visibility: hidden;
  }
  #pricing-1387 .cs-card-group.cs-active.cs-option1 .cs-item {
      /* when the active class is on the cs-card-group, run these styles */
      opacity: 0;
      transform: translateY(1.25rem) rotateY(90deg);
      transition:
          opacity 0.3s,
          transform 0.6s;
  }
  #pricing-1387 .cs-card-group.cs-active.cs-option2 {
      /* when the active class is on the cs-card-group, run these styles */
      visibility: visible;
      pointer-events: all;
      opacity: 1;
      position: relative;
      right: auto;
      bottom: auto;
      transform: scale(1);
  }
  #pricing-1387 .cs-card-group.cs-active.cs-option2 .cs-item {
      /* when the active class is on the cs-card-group, run these styles */
      opacity: 1;
      transform: translateY(0rem) rotateY(0deg);
  }
  #pricing-1387 .cs-option1 {
      /* default styles when there is no active class on the cs-card-group */
      opacity: 1;
      visibility: visible;
      right: 0;
      bottom: auto;
      transform: scale(1);
      transform-origin: top;
      transition:
          transform 0.6s,
          opacity 0.3s,
          visibility 0.3s;
  }
  #pricing-1387 .cs-option1 .cs-item {
      /* default styles when there is no active class on the cs-card-group */
      opacity: 1;
      transform: translateY(0rem) rotateY(0deg);
      transition:
          opacity 0.3s,
          transform 0.6s;
  }
  #pricing-1387 .cs-option1 .cs-item:nth-of-type(2) {
      transition-delay: 0.2s;
  }
  #pricing-1387 .cs-option1 .cs-item:nth-of-type(3) {
      transition-delay: 0.4s;
  }
  #pricing-1387 .cs-option2 {
      /* default styles when there is no active class on the cs-card-group */
      visibility: hidden;
      pointer-events: none;
      opacity: 0;
      position: absolute;
      right: 0;
      bottom: 0;
      transform: scale(0);
      transform-origin: top;
      transition:
          transform 0.6s,
          opacity 0.3s,
          visibility 0.3s;
  }
  #pricing-1387 .cs-option2 .cs-item {
      /* default styles when there is no active class on the cs-card-group */
      opacity: 0;
      transform: translateY(1.25rem) rotateY(90deg);
      transition:
          opacity 0.3s,
          transform 0.6s;
  }
  #pricing-1387 .cs-option2 .cs-item:nth-of-type(2) {
      transition-delay: 0.2s;
  }
  #pricing-1387 .cs-option2 .cs-item:nth-of-type(3) {
      transition-delay: 0.4s;
  }
  #pricing-1387 .cs-item {
      text-align: center;
      list-style: none;
      width: 100%;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      justify-content: center;
  }
  #pricing-1387 .cs-item.cs-popular .cs-flex {
      background-color: var(--primary);
  }
  #pricing-1387 .cs-item.cs-popular .cs-tag {
      display: flex;
  }
  #pricing-1387 .cs-item.cs-popular .cs-package,
  #pricing-1387 .cs-item.cs-popular .cs-price,
  #pricing-1387 .cs-item.cs-popular .cs-duration {
      color: var(--bodyTextColorWhite);
  }
  #pricing-1387 .cs-item.cs-popular .cs-duration {
      opacity: 0.8;
  }
  #pricing-1387 .cs-item.cs-popular .cs-button-transparent {
      background-color: var(--primary);
      color: #fff;
      transition:
          color 0.3s,
          border-color 0.6s,
          background-color 0.3s;
  }
  #pricing-1387 .cs-item.cs-popular .cs-button-transparent:hover {
      border-color: #1a1a1a;
      background-color: #1a1a1a;
  }
  #pricing-1387 .cs-flex {
      /* 196px - 250px */
      width: clamp(12.25rem, 25vw, 15.625rem);
      height: clamp(12.25rem, 25vw, 15.625rem);
      margin-bottom: -6.25rem;
      border-radius: 50%;
      background-color: #e8e8e8;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
  }
  #pricing-1387 .cs-tag {
      font-size: 0.8125rem;
      color: var(--headerColor);
      text-transform: uppercase;
      /* keeps the text in one line, won't jump to two lines */
      white-space: nowrap;
      font-weight: 700;
      padding: 0.5rem;
      gap: 0.25rem;
      border-radius: 50px;
      background-color: #fff;
      /* clips the corners of the pseudo element */
      overflow: hidden;
      display: none;
      justify-content: center;
      align-items: center;
      position: absolute;
      left: 50%;
      bottom: -0.25rem;
      transform: translateX(-50%);
  }
  #pricing-1387 .cs-tag:before {
      content: "";
      width: 100%;
      height: 100%;
      background: var(--primary);
      opacity: 0.3;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      z-index: -1;
  }
  #pricing-1387 .cs-icon {
      width: 1.25rem;
      height: auto;
      display: flex;
  }
  #pricing-1387 .cs-package {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 2vw, 1.5625rem);
      line-height: 1.2em;
      text-align: inherit;
      font-weight: 700;
      /* 4px - 8px */
      margin: 0 0 clamp(0.25rem, 1vw, 0.5rem) 0;
  }
  #pricing-1387 .cs-price {
      /* 31px - 49px */
      font-size: clamp(1.9375rem, 4vw, 3.0625rem);
      line-height: 1.2em;
      font-weight: 700;
      text-align: inherit;
      margin: 0;
      padding: 0;
      color: var(--headerColor);
      display: flex;
      justify-content: center;
      align-items: flex-end;
  }
  #pricing-1387 .cs-duration {
      font-size: 1rem;
      line-height: 1.5em;
      font-weight: 400;
      text-align: inherit;
      margin: 0;
      /* 4px - 8px */
      padding: clamp(0.25rem, 1vw, 0.5rem) 0;
      color: var(--bodyTextColor);
      display: block;
  }
  #pricing-1387 .cs-info {
      width: 100%;
      padding: 5.375rem 2.5rem 2.5rem;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 1.5rem;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
  }
  #pricing-1387 .cs-ul {
      width: 100%;
      margin: 2.5rem 0 2.5rem 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.75rem;
      position: relative;
  }
  #pricing-1387 .cs-li {
      font-size: 1rem;
      list-style: none;
      line-height: 1.5em;
      font-weight: 400;
      text-align: left;
      margin: 0 0 0 2.3rem;
      padding: 0;
      color: var(--bodyTextColor);
      display: flex;
      align-items: center;
      justify-content: flex-start;
  }
  #pricing-1387 .cs-li.cs-disabled {
      opacity: 0.5;
  }
  #pricing-1387 .cs-button-transparent {
      font-size: 1rem;
      line-height: 3.5rem;
      text-decoration: none;
      font-weight: 700;
      overflow: hidden;
      margin: 0;
      color: var(--primary);
      padding: 0 3rem;
      border-radius: 1.875rem;
      border: 1px solid var(--primary);
      display: inline-block;
      position: relative;
      z-index: 1;
      transition: color 0.3s;
  }
  #pricing-1387 .cs-button-transparent:before {
      content: "";
      position: absolute;
      display: block;
      height: 100%;
      width: 0%;
      background: #1a1a1a;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s;
  }
  #pricing-1387 .cs-button-transparent:hover {
      color: var(--bodyTextColorWhite);
      border-color: #1a1a1a;
  }
  #pricing-1387 .cs-button-transparent:hover:before {
      width: 100%;
  }
  #pricing-1387 .cs-button-transparent {
      /* this is the section specific override if you choose to pull out the cs-button-transparent and place it in a global stylesheet to resue acorss the entire site */
      margin-top: auto;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #pricing-1387 .cs-container {
      max-width: 80rem;
  }
  #pricing-1387 .cs-container .cs-card-group {
      flex-direction: row;
      align-items: stretch;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #pricing-1387 .cs-container {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
  }
  #pricing-1387 .cs-content {
      text-align: left;
      width: 47%;
      align-items: flex-start;
  }
  #pricing-1387 .cs-info {
      min-height: 27rem;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #pricing-1387 {
      background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #pricing-1387 .cs-title,
  body.dark-mode #pricing-1387 .cs-text {
      color: var(--bodyTextColorWhite);
  }
  body.dark-mode #pricing-1387 .cs-text {
      opacity: 0.8;
  }
  body.dark-mode #pricing-1387 .cs-toggle-group {
      background-color: rgba(0, 0, 0, 0.3);
  }
  body.dark-mode #pricing-1387 .cs-plan {
      color: var(--bodyTextColorWhite);
  }
  body.dark-mode #pricing-1387 .cs-flex {
      background-color: var(--dark);
  }
  body.dark-mode #pricing-1387 .cs-ul:before {
      opacity: 0.5;
  }
  body.dark-mode #pricing-1387 .cs-item.cs-popular .cs-button-transparent {
      background-color: #fff;
      color: var(--primary);
  }
  body.dark-mode #pricing-1387 .cs-item.cs-popular .cs-button-transparent:hover {
      background-color: #1a1a1a;
  }
  body.dark-mode #pricing-1387 .cs-info {
      background-color: var(--medium);
  }
  body.dark-mode #pricing-1387 .cs-package {
      color: var(--primary);
  }
  body.dark-mode #pricing-1387 .cs-price,
  body.dark-mode #pricing-1387 .cs-duration,
  body.dark-mode #pricing-1387 .cs-li {
      color: var(--bodyTextColorWhite);
  }
  body.dark-mode #pricing-1387 .cs-duration,
  body.dark-mode #pricing-1387 .cs-li {
      opacity: 0.8;
  }
  body.dark-mode #pricing-1387 .cs-button-transparent {
      background-color: var(--primary);
      color: #fff;
      border: none;
      transition:
          color 0.3s,
          background-color 0.3s;
  }
  body.dark-mode #pricing-1387 .cs-button-transparent:hover {
      background-color: #1a1a1a;
  }
}
/* -------------------------- */
/*            CTA             */
/* -------------------------- */

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta-51 {
      padding: var(--sectionPadding);
      position: relative;
  }
  #cta-51 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #cta-51 .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;
  }

  #cta-51 .cs-title {
      color: var(--bodyTextColorWhite);
  }
  #cta-51 .cs-text {
      margin-bottom: 1rem;
      color: var(--bodyTextColorWhite);
      opacity: 0.8;
  }
  #cta-51 .cs-text:last-of-type {
      margin-bottom: 2rem;
  }
  #cta-51 .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;
  }
  #cta-51 .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;
  }
  #cta-51 .cs-button-solid:hover:before {
      width: 100%;
  }
  #cta-51 .cs-picture {
      height: 100%;
      width: 100%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
  }
  #cta-51 .cs-picture:before {
      /* black color overlay */
      content: "";
      position: absolute;
      display: block;
      height: 100%;
      width: 100%;
      background: #000;
      opacity: 0.8;
      top: 0;
      left: 0;
      z-index: 1;
  }
  #cta-51 .cs-picture img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
  }
}
                             


/* -------------------------- */
/*          Footer            */
/* -------------------------- */

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cs-footer-1292 {
    padding: var(--sectionPadding);
    padding-bottom: 1.25rem;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    z-index: 10;
    /* Navigation Links */
  }
  #cs-footer-1292 .cs-container {
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    column-gap: 1.5rem;
    row-gap: 2.25rem;
  }
  #cs-footer-1292 .cs-logo-group {
    /* takes up all the space, lets the other ul's wrap below it */
    width: 100%;
    position: relative;
  }
  #cs-footer-1292 .cs-logo {
    width: 12.3125rem;
    height: auto;
    display: block;
    /* 20px - 24px */
    margin: 0 0 clamp(1.25rem, 2vw, 1.5rem) 0;
  }
  #cs-footer-1292 .cs-logo-img {
    width: 100%;
    height: auto;
  }
  #cs-footer-1292 .cs-logo-img.dark {
    display: none;
  }
  #cs-footer-1292 .cs-text {
    margin-bottom: 2rem;
  }
  #cs-footer-1292 .cs-link {
    font-size: 0.875rem;
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    transition: color 0.3s;
  }
  #cs-footer-1292 .cs-link:hover {
    color: var(--primary);
  }
  #cs-footer-1292 .cs-nav {
    width: 45%;
    max-width: 11.25rem;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }
  #cs-footer-1292 .cs-nav-li {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }
  #cs-footer-1292 .cs-header {
    font-size: 1rem;
    line-height: 1.2em;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--headerColor);
    position: relative;
    display: block;
  }
  #cs-footer-1292 .cs-nav-link {
    font-size: 0.875rem;
    text-decoration: none;
    line-height: 1.5em;
    width: auto;
    color: var(--bodyTextColor);
    position: relative;
    display: inline-block;
    transition: color 0.3s;
  }
  #cs-footer-1292 .cs-nav-link:before {
    /* underline */
    content: "";
    width: 0%;
    height: 0.125rem;
    background: currentColor;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: -0.125rem;
    left: 0;
    transition: width 0.3s;
  }
  #cs-footer-1292 .cs-nav-link:hover {
    color: var(--primary);
  }
  #cs-footer-1292 .cs-nav-link:hover:before {
    width: 100%;
  }
  #cs-footer-1292 .cs-bottom {
    max-width: 80rem;
    margin: auto;
    /* 48px - 100px */
    margin-top: clamp(3rem, 9vw, 6.25rem);
    /* 20px - 32px */
    padding: clamp(1.25rem, 3vw, 2rem) 0 0 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 2.25rem;
    row-gap: 0.75rem;
  }
  #cs-footer-1292 .cs-copyright,
  #cs-footer-1292 .cs-copyright-link {
    font-size: 0.875rem;
    line-height: 1.5em;
    color: var(--bodyTextColor);
  }
  #cs-footer-1292 .cs-copyright {
    text-align: center;
    width: 100%;
  }
  #cs-footer-1292 .cs-copyright-link {
    text-decoration: none;
    transition: color 0.3s;
  }
  #cs-footer-1292 .cs-copyright-link:hover {
    color: var(--secondary);
  }
  #cs-footer-1292 .cs-floater {
    width: 31.625rem;
    height: 31.625rem;
    margin-left: 34.375rem;
    border-radius: 50%;
    border: 2px solid var(--primary);
    opacity: 0.1;
    display: none;
    position: absolute;
    left: 50%;
    top: 0;
    z-index: -1;
  }
  #cs-footer-1292 .cs-floater:before {
    content: "";
    width: 44.6875rem;
    height: 44.6875rem;
    border: 2px solid var(--primary);
    border-radius: 50%;
    opacity: 0.6;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #cs-footer-1292 .cs-floater:after {
    content: "";
    width: 60.1875rem;
    height: 60.1875rem;
    border: 2px solid var(--primary);
    border-radius: 50%;
    opacity: 0.3;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cs-footer-1292 .cs-container {
    row-gap: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: clamp(2.75rem, 6vw, 5.5rem);
    row-gap: 2.5rem;
  }
  #cs-footer-1292 .cs-nav {
    width: auto;
  }
  #cs-footer-1292 .cs-bottom {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  #cs-footer-1292 .cs-copyright {
    text-align: left;
    width: auto;
    margin-right: auto;
  }
  #cs-footer-1292 .cs-floater {
    display: block;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cs-footer-1292 .cs-container {
    max-width: 80rem;
    flex-wrap: nowrap;
    /* align everything to the right */
    justify-content: flex-end;
    column-gap: clamp(2.5rem, 6vw, 5.25rem);
  }
  #cs-footer-1292 .cs-logo-group {
    width: 30%;
    max-width: 24.1875rem;
    /* pushes away from everything to the right */
    margin-right: auto;
  }
  #cs-footer-1292 .cs-text {
    width: 100%;
  }
  #cs-footer-1292 .cs-graphic {
    display: block;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #cs-footer-1292 .cs-text,
  body.dark-mode #cs-footer-1292 .cs-link,
  body.dark-mode #cs-footer-1292 .cs-nav-link,
  body.dark-mode #cs-footer-1292 .cs-header,
  body.dark-mode #cs-footer-1292 .cs-copyright,
  body.dark-mode #cs-footer-1292 .cs-copyright-link {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #cs-footer-1292 .cs-link .cs-link-icon {
    filter: grayscale(1) brightness(1000%);
  }
}
                                                          

/* Start with a system fallback so the later swap is obvious */
#maria-title {
  /* use system first so we can see a clear change after lazy load */
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 900; /* change to 900 if you’ll load a 900 file */
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

#maria-title .cs-profile {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: 0 0 52px;
}

#maria-title.font-ready { transition: font 150ms ease; }

/* --- Video Testimonial --- */
.video-testimonial {
  position: relative;
  width: 100%;
  max-width: 586px;            /* match your previous image width if desired */
  aspect-ratio: 16 / 9;        /* keeps a steady box to avoid layout shift */
  border-radius: 12px;          /* adjust to taste */
  overflow: hidden;
  background: #000;
}

/* Thumbnail button covers the box */
.video-thumb {
  all: unset;
  display: grid;
  place-items: center;
  cursor: pointer;
  width: 100%;
  height: 100%;
  position: relative;
  isolation: isolate;           /* ensure overlay paints above the image */
}
.video-thumb:focus-visible { outline: 2px solid #4c9ffe; outline-offset: 2px; }

.video-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.001);      /* avoid subpixel gaps */
}

/* Play badge */
.video-thumb-play {
  position: absolute;
  width: 68px; height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  background: rgba(0,0,0,.55);
  color: #fff;
  transition: transform .15s ease, background-color .15s ease;
}
.video-thumb:hover .video-thumb-play { transform: scale(1.06); background: rgba(0,0,0,.7); }

/* When iframe is injected, it fills the box */
.video-iframe,
.video-testimonial iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .video-thumb-play { transition: none; }
}