/* STYLES FOR ABOVE THE FOLD */
/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero {
    z-index: 1;
    position: relative;
    /* prevents overflow from the lines extending past the screen width */
    overflow: hidden;
    /* changes on tablet */
    padding: 0 1rem;
    padding-bottom: 6.25rem;
    font-family: "Montserrat", "Arial", sans-serif;
    /* Centers button */
    text-align: center;
  }
  #hero .cs-picture {
    z-index: -2;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
    /* Background Image */
    width: 100%;
  }
  #hero .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes image act like a background-image */
    object-fit: cover;
  }
  #hero .cs-picture:before {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    /* Black Color Overlay */
    content: "";
    opacity: 0.7;
    display: block;
    background: #000;
    height: 100%;
    width: 100%;
    /* prevents the cursor from interacting with it */
    pointer-events: none;
  }
  #hero .cs-container {
    position: relative;
    margin: auto;
    max-width: 80em;
    width: 100%;
    /* we put the padding top and bottom on the container instead of #Hero so the pseudo element lines go to the top and bottom of the section */
    /* 144px - 280px - leaving extra space for the navigation */
    /* changes on tablet */
    padding: clamp(9em, 25.95vw, 17.5em) 0;
  }
  #hero .cs-container:before {
    position: absolute;
    top: 0;
    left: 0;
    /* Left Line */
    content: "";
    opacity: 1;
    display: block;
    background: -moz-linear-gradient(top, rgba(250, 251, 252, 0.5) 0%, rgba(250, 251, 252, 0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(250, 251, 252, 0.5) 0%, rgba(250, 251, 252, 0) 100%); /* Chrome10-25,Safari5.1-6 */
    height: 100%;
    width: 1px;
  }
  #hero .cs-flex-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    margin: auto;
    /* 60px - 220px */
    margin-bottom: clamp(3.75em, 15.5vw, 13.75em);
    /* 464px - 562px */
    max-width: clamp(29em, 60vw, 35.125em);
    width: 80vw;
    box-sizing: border-box;
  }
  #hero .cs-topper {
    margin-bottom: 1rem;
    color: var(--primary);
    text-align: center;
  }
  #hero .cs-title {
    width: 100%;
    color: var(--bodyTextColorWhite);
    text-align: center;
  }
  #hero .cs-text {
    /* 32px - 40px */
    margin: 0 auto clamp(2rem, 4vw, 2.5rem) 0;
    /* 40px - 48px */
    margin-bottom: clamp(2.5rem, 4vw, 3rem);
    color: var(--bodyTextColorWhite);
    text-align: center;
  }
  #hero .cs-button-solid {
    margin-bottom: 1rem;
    height: initial;
    line-height: clamp(2.875em, 5.5vw, 3.5em);
  }
  #hero .cs-button-transparent {
    z-index: 1;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--bodyTextColorWhite);
    margin: 0 0.5rem;
    background-color: transparent;
    /* 46px - 56px */
    height: clamp(2.875em, 5.5vw, 3.5em);
    width: 11.25rem;
    box-sizing: border-box;
    padding: 0;
    text-decoration: none;
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    font-weight: 700;
    color: #fff;
    border-radius: 1em;
  }
  #hero .cs-button-transparent .cs-img {
    display: block;
    margin-right: 0.75rem;
  }
  #hero .cs-button-transparent:before {
    z-index: -1;
    position: absolute;
    /* so it sits on top of the border */
    top: -1px;
    bottom: -1px;
    left: -1px;
    right: -1px;
    content: "";
    opacity: 1;
    /* this is what creates the grow affect on hover */
    transform: scaleX(0);
    display: block;
    background: #ff4057;
    transition: transform 0.3s;
    transform-origin: left;
    border-radius: 1em;
  }
  #hero .cs-button-transparent:hover:before {
    transform: scaleX(1);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero {
    /* 32px - 40px */
    padding: 0 clamp(2em, 5vw, 2.5em);
  }
  #hero .cs-container {
    padding: clamp(7em, 27.95vw, 17.5em) 0 clamp(9em, 30.95vw, 23.5em) 0;
  }
  #hero .cs-container:after {
    position: absolute;
    top: 0;
    right: 0;
    /* Right Line */
    content: "";
    opacity: 1;
    display: block;
    background: -moz-linear-gradient(top, rgba(250, 251, 252, 0) 0%, rgba(250, 251, 252, 0.5) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(250, 251, 252, 0) 0%, rgba(250, 251, 252, 0.5) 100%); /* Chrome10-25,Safari5.1-6 */
    height: 100%;
    width: 1px;
  }
  #hero .cs-button-solid {
    margin-right: 1.25rem;
    margin-bottom: 0;
  }
}
/* Desktop Parallax Effect - 1300px */
@media only screen and (min-width: 81.25em) {
  #hero {
   /* background: url("/assets/images/hero-image.jpg"); */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* creates parallax effect on background image */
    background-attachment: fixed;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #hero .cs-background:before {
    opacity: 0.8;
  }
}
/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0rem) {
  .services {
    z-index: 100;
    position: relative;
    border-top: 0.375em solid var(--primary);
    border-radius: 0.3125em;
    margin: auto;
    margin-top: -10.4375em;
    margin-bottom: 3.125em;
    background: #fff;
    max-width: 82.5em;
    width: 90%;
    padding: 3.125em 1.25em;
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.05);
  }
  .services .card {
    display: block;
    margin: auto;
    margin-bottom: 3.125em;
    max-width: 22.3125em;
    width: 100%;
  }
  .services .card picture {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin: auto;
    margin-bottom: 1.4375em;
    background: var(--primary);
    height: 5.5em;
    width: 5.5em;
  }
  .services .card picture img {
    height: 3em;
    width: 3em;
  }
  .services .card h2 {
    margin-bottom: 0.65em;
    font-size: 2em;
    line-height: 1.35em;
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
  }
  .services .card p {
    opacity: 0.7;
    width: 100%;
    line-height: 1.3333333333em;
    text-align: center;
  }
  .services .card:last-of-type {
    margin-bottom: 0;
  }
}
/* Inbetween */
@media only screen and (min-width: 768px) {
  .services {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 98%;
    font-size: min(1.8vw, 1em);
  }
  .services .card {
    margin: 0;
    max-width: 20.3125em;
  }
}
/* Large Desktop */
@media only screen and (min-width: 1300px) {
  .services {
    padding: 3.125em 5em;
  }
  .services .card {
    max-width: 22.3125em;
  }
}
/* Dark mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #services {
    background: var(--medium);
  }
  body.dark-mode #services picture {
    background: var(--primaryDark);
  }
  body.dark-mode #services h2 {
    font-weight: bold;
    color: #fff;
  }
}
/*-- -------------------------- -->
<---       Why Choose Us        -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #why-choose-375 {
      padding: var(--sectionPadding);
      overflow: hidden;
  }
  @keyframes floatAnimation {
      0% {
          transform: translateY(0);
      }
      50% {
          transform: translateY(-2em);
      }
      100% {
          transform: translateY(0);
      }
  }
  @keyframes floatAnimation2 {
      0% {
          transform: translateY(0);
      }
      50% {
          transform: translateY(-1em);
      }
      100% {
          transform: translateY(0);
      }
  }
  #why-choose-375 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #why-choose-375 .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;
  }
  #why-choose-375 .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;
  }
  #why-choose-375 .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;
  }
  #why-choose-375 .cs-card-group {
      width: 100%;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1.5rem;
  }
  #why-choose-375 .cs-item {
      list-style: none;
      text-align: left;
      width: 100%;
      margin-right: 0;
      /* 24px - 32px */
      padding: clamp(1.5rem, 4vw, 2rem);
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      border: 1px solid #e8e8e8;
      border-radius: 1rem;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 1rem;
      transition:
          background-color 0.3s,
          transform 0.3s;
  }
  #why-choose-375 .cs-item:hover {
      background-color: var(--primary);
      transform: scale(1.05);
  }
  #why-choose-375 .cs-item:hover .cs-bullet {
      filter: grayscale(1) brightness(1000%);
  }
  #why-choose-375 .cs-item:hover .cs-h3,
  #why-choose-375 .cs-item:hover .cs-item-text {
      color: #fff;
  }
  #why-choose-375 .cs-bullet {
      width: 1.1875rem;
      height: auto;
      margin-top: 0.125rem;
  }
  #why-choose-375 .cs-h3 {
      font-size: 1.25rem;
      text-align: inherit;
      line-height: 1.2em;
      font-weight: 700;
      margin: 0 0 0.75rem 0;
      color: var(--headerColor);
      transition: color 0.3s;
  }
  #why-choose-375 .cs-item-text {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 2.2vw, 1rem);
      text-align: inherit;
      line-height: 1.5em;
      margin: 0;
      color: var(--bodyTextColor);
      transition: color 0.3s;
  }
  #why-choose-375 .cs-image-group {
      /* everything in the group is in ems so we can scale them down with this min/max font size tied to the view width */
      font-size: min(2.3vw, 1em);
      width: 36.1875em;
      height: 36.75em;
      position: relative;
      /* sends it to the top above the content */
      order: -1;
  }
  #why-choose-375 .cs-splash {
      width: 35.625em;
      height: 36.625em;
      opacity: 0.1;
      position: absolute;
      left: 0.3125em;
      top: 0;
  }
  #why-choose-375 .cs-blob {
      width: 24.5em;
      height: 31.0625em;
      position: absolute;
      right: 0em;
      top: 0.625em;
  }
  #why-choose-375 .cs-lightning {
      width: 4em;
      height: 6.4375em;
      position: absolute;
      right: 2.5em;
      top: 0.5em;
      transform: rotate(23deg);
  }
  #why-choose-375 .cs-left-image {
      width: 13.1875em;
      height: 13.1875em;
      border-radius: 50%;
      /* cover the 1px gap between border and image */
      background-color: #f7f7f7;
      border: 12px solid #f7f7f7;
      /* clips image to the circle */
      overflow: hidden;
      position: absolute;
      left: -0.75em;
      top: 8.1875em;
      z-index: 10;
      animation-name: floatAnimation2;
      animation-duration: 6s;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
  }
  #why-choose-375 .cs-left-image img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      /* makes it act like a background image */
      object-fit: cover;
  }
  #why-choose-375 .cs-bottom-image {
      width: 11.25em;
      height: 11.25em;
      border-radius: 50%;
      /* cover the 1px gap between border and image */
      background-color: #f7f7f7;
      border: 12px solid #f7f7f7;
      /* clips image to the circle */
      overflow: hidden;
      position: absolute;
      right: 11.25em;
      bottom: -0.75em;
      z-index: 10;
      animation-name: floatAnimation;
      animation-duration: 10s;
      animation-delay: 1s;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
  }
  #why-choose-375 .cs-bottom-image img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      /* makes it act like a background image */
      object-fit: cover;
  }
  #why-choose-375 .cs-person {
      width: 24.125em;
      height: auto;
      position: absolute;
      right: 2.875em;
      bottom: 4.0625em;
  }
  #why-choose-375 .cs-person img {
      width: 100%;
      height: auto;
  }
  #why-choose-375 .cs-mask {
      width: 23.9375em;
      height: 10.8125em;
      position: absolute;
      right: -2.0625em;
      bottom: 2.6875em;
      z-index: 2;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #why-choose-375 .cs-container {
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
  }
  #why-choose-375 .cs-image-group {
      font-size: min(1.1vw, 1em);
      /* prevents flexbox from squishing it */
      flex: none;
  }
}
/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #faq-489 {
      padding: var(--sectionPadding);
      background: #fafbfc;
  }
  #faq-489 .cs-container {
      width: 100%;
      /* changes to 1280px at tablet */
      max-width: 34.375rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      /* 40px - 48px */
      gap: clamp(2.5rem, 5vw, 3rem);
  }
  #faq-489 .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;
  }

  #faq-489 .cs-color {
      color: var(--primary);
  }

  #faq-489 .cs-title {
      /* 17 characters wide including spaces */
      max-width: 17ch;
  }
  #faq-489 .cs-text {
      /* 32px - 48px */
      margin-bottom: clamp(2rem, 3vw, 3rem);
  }
  #faq-489 .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;
  }
  #faq-489 .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;
  }
  #faq-489 .cs-button-solid:hover:before {
      width: 100%;
  }
  #faq-489 .cs-faq-group {
      max-width: 46.25rem;
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 1.25rem;
  }
  #faq-489 .cs-faq-item {
      list-style: none;
      width: 100%;
      /* prevents border from affecting width and height */
      box-sizing: border-box;
      border: 1px solid #f1f1f4;
      transition:
          border 0.3s,
          padding 0.3s,
          border-color 0.3s;
  }
  #faq-489 .cs-faq-item:hover {
      border-color: var(--primary);
  }
  #faq-489 .cs-faq-item.active {
      padding-bottom: 1rem;
      border-color: var(--primary);
  }
  #faq-489 .cs-faq-item.active .cs-button {
      color: var(--primary);
  }
  #faq-489 .cs-faq-item.active .cs-button:before {
      transform: translateY(-50%) rotate(180deg);
      opacity: 0;
      background-color: var(--primary);
  }
  #faq-489 .cs-faq-item.active .cs-button:after {
      transform: translateY(-50%) rotate(360deg);
      background-color: var(--primary);
  }
  #faq-489 .cs-faq-item.active .cs-item-p {
      height: auto;
      margin-top: 0.5rem;
      opacity: 1;
  }
  #faq-489 .cs-button {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 1vw, 1.5625rem);
      line-height: 1.2em;
      text-align: left;
      font-weight: bold;
      padding: 1rem 1.5rem;
      border: none;
      background: transparent;
      color: var(--headerColor);
      display: block;
      width: 100%;
      position: relative;
      transition:
          background-color 0.3s,
          color 0.3s;
  }
  #faq-489 .cs-button:hover {
      cursor: pointer;
  }
  #faq-489 .cs-button:before {
      /* horizontal line */
      content: "";
      width: 1rem;
      height: 0.1875rem;
      background-color: currentColor;
      opacity: 1;
      border-radius: 1px;
      position: absolute;
      display: block;
      top: 50%;
      right: 1.5rem;
      transform: translateY(-50%);
      transition:
          transform 0.5s,
          opacity 0.3s;
  }
  #faq-489 .cs-button:after {
      /* vertical line */
      content: "";
      width: 1rem;
      height: 0.1875rem;
      background-color: currentColor;
      opacity: 1;
      border-radius: 1px;
      position: absolute;
      display: block;
      top: 50%;
      right: 1.5rem;
      transform: translateY(-50%) rotate(90deg);
      transform-origin: center;
      transition: transform 0.5s;
  }
  #faq-489 .cs-button-text {
      width: 80%;
      display: block;
  }
  #faq-489 .cs-item-p {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      width: 90%;
      height: 0;
      margin: 0;
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      padding: 0 1.5rem;
      opacity: 0;
      color: var(--bodyTextColor);
      /* clips the text so it doesn't show up */
      overflow: hidden;
      transition:
          opacity 0.3s,
          padding-bottom 0.3s;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 48rem) {
  #faq-489 .cs-container {
      max-width: 80rem;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      gap: 3.25rem;
  }
  #faq-489 .cs-content {
      margin-top: 3.125rem;
  }
  #faq-489 .cs-title,
  #faq-489 .cs-topper {
      text-align: left;
      margin-left: 0;
  }
  #faq-489 .cs-faq-group {
      width: clamp(56%, 58vw, 58%);
      flex: none;
  }
}
/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #RPsbs-871,
  #RPsbsr-871 {
      padding: var(--sectionPadding);
      position: relative;
  }
  #RPsbs-871 .cs-container,
  #RPsbsr-871 .cs-container {
      width: 100%;
      /* changes to 1280px at desktop */
      max-width: 34.375rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #RPsbs-871 .cs-content,
  #RPsbsr-871 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: left;
      width: 100%;
      max-width: 35.625rem;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: flex-start;
  }

  #RPsbs-871 .cs-title,
  #RPsbsr-871 .cs-title {
      /* 23 characters wide including spaces */
      max-width: 23ch;
  }
  #RPsbs-871 .cs-text,
  #RPsbsr-871 .cs-text {
      margin-bottom: 1rem;
  }
  #RPsbs-871 .cs-text:last-of-type,
  #RPsbsr-871 .cs-text:last-of-type {
      margin-bottom: 2rem;
  }
  #RPsbs-871 .cs-button-solid,
  #RPsbsr-871 .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;
  }
  #RPsbs-871 .cs-button-solid:before,
  #RPsbsr-871 .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;
  }
  #RPsbs-871 .cs-button-solid:hover:before,
  #RPsbsr-871 .cs-button-solid:hover:before {
      width: 100%;
  }
  #RPsbs-871 .cs-image-group,
  #RPsbsr-871 .cs-image-group {
      width: 100%;
      max-width: 39.375rem;
      /* 400px - 775px */
      height: clamp(25rem, 69vw, 48.4375rem);
      /* 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 corners of the children around the border radius */
      overflow: hidden;
      position: relative;
  }
  #RPsbs-871 .cs-background,
  #RPsbsr-871 .cs-background {
      width: 100%;
      height: 100%;
      /* makes it cover the parent dimensions */
      object-fit: cover;
      display: block;
  }
  #RPsbs-871 .cs-background img,
  #RPsbsr-871 .cs-background img {
      width: 100%;
      height: 100%;
      /* makes it cover the parent like a backgorund image */
      object-fit: cover;
      display: block;
  }
  #RPsbs-871 .cs-box,
  #RPsbsr-871 .cs-box {
      text-align: center;
      /* 40px - 67px top & bottom */
      /* 20px - 28px left & right */
      padding: clamp(2.5rem, 5vw, 4.1875rem) clamp(1.25rem, 2vw, 1.75rem);
      background-color: #fff;
      /* 48px - 80px */
      border-radius: 0 clamp(3rem, 4vw, 5rem) 0 clamp(3rem, 4vw, 5rem);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      position: absolute;
      /* 16px - 20px */
      right: clamp(1rem, 2vw, 1.25rem);
      /* 16px - 20px */
      bottom: clamp(1rem, 2vw, 1.25rem);
  }
  #RPsbs-871 .cs-number,
  #RPsbsr-871 .cs-number {
      /* 31px - 39px */
      font-size: clamp(1.9375rem, 3vw, 2.4375rem);
      line-height: 1.2em;
      font-weight: 900;
      text-align: inherit;
      margin: 0;
      color: var(--primary);
  }
  #RPsbs-871 .cs-desc,
  #RPsbsr-871 .cs-desc {
      font-size: 1rem;
      line-height: 1.2em;
      text-align: inherit;
      font-weight: 700;
      width: 7.6875rem;
      margin: 0;
      color: var(--bodyTextColor);
  }
  #RPsbs-871 .cs-floater,
  #RPsbsr-871 .cs-floater {
      /* 231px - 351px */
      width: clamp(14.375rem, 27vw, 21.9375rem);
      height: auto;
      display: none;
      position: absolute;
      top: 0rem;
      right: 3.125rem;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #RPsbs-871 .cs-container,
  #RPsbsr-871 .cs-container {
      max-width: 80rem;
      flex-direction: row;
      justify-content: space-between;
  }
  #RPsbs-871 .cs-floater,
  #RPsbsr-871 .cs-floater {
      display: block;
  }
}

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

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #RPsbsr-871 {
      background-color: #f7f7f7;
  }
  #RPsbsr-871 .cs-image-group {
      /* 100px - 200px */
      border-radius: clamp(6.25rem, 17vw, 12.5rem) 0
          clamp(6.25rem, 17vw, 12.5rem) 0;
  }
  #RPsbsr-871 .cs-content {
      /* sends it to the left in the first position */
      order: -1;
  }
  #RPsbsr-871 .cs-box {
      right: auto;
      left: 1.25rem;
      /* 48px - 80px */
      border-radius: clamp(3rem, 4vw, 5rem) 0 clamp(3rem, 4vw, 5rem) 0;
  }
  #RPsbsr-871 .cs-floater {
      /* 231px - 351px */
      width: clamp(14.375rem, 27vw, 21.9375rem);
      height: auto;
      position: absolute;
      top: 0rem;
      left: 3.125rem;
      /* flips it horizontally */
      transform: scaleX(-1);
  }
}
/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/

/* 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);
      }
  }
  #gallery-1374 {
      padding: var(--sectionPadding);
      position: relative;
      z-index: 1;
      /* Prevents overflow from the image going off screen */
      overflow: hidden;
  }
  #gallery-1374 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #gallery-1374 .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;
  }

  #gallery-1374 .cs-topper {
      color: var(--secondary);
  }
  #gallery-1374 .cs-image-group {
      width: 100%;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: 1fr;
      /* 16px - 60px */
      gap: clamp(1rem, 4.3vw, 3.75rem);
  }
  #gallery-1374 .cs-link {
      text-decoration: none;
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 1rem;
  }
  #gallery-1374 .cs-item {
      list-style: none;
      width: 100%;
      height: 100%;
      margin: 0;
      grid-column: span 12;
  }
  #gallery-1374 .cs-item:hover .cs-h3,
  #gallery-1374 .cs-item:hover .cs-desc {
      color: #fff;
  }
  #gallery-1374 .cs-item:hover .cs-item-text {
      background-color: var(--primary);
  }
  #gallery-1374 .cs-item:hover .cs-icon-wrapper {
      border-color: #fff;
  }
  #gallery-1374 .cs-item:hover .cs-icon {
      filter: brightness(1000%) grayscale(1);
  }
  #gallery-1374 .cs-picture {
      width: 100%;
      /* 344px - 420px */
      height: clamp(21.5rem, 30vw, 26.25rem);
      margin: auto;
      border-radius: 1.5rem;
      display: block;
      position: relative;
      overflow: hidden;
  }
  #gallery-1374 .cs-picture img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
  }
  #gallery-1374 .cs-item-text {
      /* 16px - 20px top & bottom, 16px - 40px left & right */
      padding: clamp(1rem, 2vw, 1.25rem) clamp(1rem, 2.8vw, 2.5rem);
      background-color: #f7f7f7;
      border-radius: 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      /* makes the item text the element that grows to fill the container */
      flex-grow: 1;
      gap: 1rem;
      transition: background-color 0.3s;
  }
  #gallery-1374 .cs-flex {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
  }
  #gallery-1374 .cs-h3 {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 1.8vw, 1.5625rem);
      line-height: 1.2em;
      text-align: left;
      margin: 0;
      color: #1a1a1a;
      transition: color 0.3s;
  }
  #gallery-1374 .cs-desc {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.2vw, 1rem);
      line-height: 1.5em;
      color: #1a1a1a;
      transition: color 0.3s;
  }
  #gallery-1374 .cs-icon-wrapper {
      width: 3rem;
      height: 3rem;
      border: 1px solid #bababa;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      /* prevents the parent flexbox from shrinking the icon */
      flex-shrink: 0;
      transition: border-color 0.3s;
  }
  #gallery-1374 .cs-icon {
      width: auto;
      height: 0.75rem;
      transition: filter 0.3s;
  }
  #gallery-1374 .cs-button-solid {
      font-size: 1rem;
      font-weight: 700;
      /* 46px - 56px */
      line-height: clamp(2.875rem, 5.5vw, 3.5rem);
      text-align: center;
      text-decoration: none;
      min-width: 9.375rem;
      margin: 0;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
      overflow: hidden;
      padding: 0 1.5rem;
      color: #fff;
      background-color: var(--headerColor);
      border-radius: 3rem;
      display: inline-block;
      position: relative;
      z-index: 1;
  }
  #gallery-1374 .cs-button-solid:before {
      content: "";
      width: 0%;
      height: 100%;
      background: #000;
      opacity: 1;
      border-radius: 0.25rem;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s;
  }
  #gallery-1374 .cs-button-solid:hover:before {
      width: 100%;
  }
  #gallery-1374 .cs-bubbles {
      width: 25.9375rem;
      height: 34.125rem;
      position: absolute;
      right: -10.25rem;
      bottom: -2.875rem;
      z-index: -1;
  }
  #gallery-1374 .cs-bubbles:before {
      /* white border bubble */
      content: "";
      width: 21.3125rem;
      height: 21.3125rem;
      background: transparent;
      opacity: 1;
      border: 1px solid #1a1a1a;
      border-radius: 50%;
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      animation-name: floatAnimation;
      animation-duration: 5s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-fill-mode: forwards;
  }
  #gallery-1374 .cs-bubbles:after {
      /* red bubble */
      content: "";
      width: 21.3125rem;
      height: 21.3125rem;
      background: var(--headerColor);
      opacity: 0.1;
      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-iteration-count: infinite;
      animation-fill-mode: forwards;
  }
}
/* In Between - 600px */
@media only screen and (min-width: 37.5rem) {
  #gallery-1374 .cs-item {
      grid-column: span 6;
  }
}
/*-- -------------------------- -->
<---          Pricing           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #pricing-1384 {
      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-1384 .cs-container {
      width: 100%;
      /* changes to 1280px at tablet */
      max-width: 36.5rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 198px - 214px, 48px and 64px + the 150px negative margin to on the cs-flex. We add that negative marign value to the regular standard gap spacing so there's the proper standard spacing between the cs-content and the cs-card to account for the cs-flex pulling the cs-content closer to it with a negative margin */
      gap: clamp(12.375rem, 18vw, 13.375rem);
  }
  #pricing-1384 .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-1384 .cs-title {
      max-width: 20ch;
  }
  #pricing-1384 .cs-card-group {
      width: 100%;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      /* 16px - 20px */
      column-gap: clamp(1rem, 2.3vw, 1.25rem);
      /* 166px - 170px */
      row-gap: clamp(10.375rem, 20vw, 10.625rem);
  }
  #pricing-1384 .cs-item {
      text-align: center;
      list-style: none;
      width: 100%;
      margin: 0;
      padding: 0 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: center;
  }
  #pricing-1384 .cs-item.cs-popular .cs-flex {
      background-color: var(--headerColor);
  }
  #pricing-1384 .cs-item.cs-popular .cs-tag {
      display: flex;
  }
  #pricing-1384 .cs-item.cs-popular .cs-package,
  #pricing-1384 .cs-item.cs-popular .cs-price,
  #pricing-1384 .cs-item.cs-popular .cs-duration {
      color: var(--bodyTextColorWhite);
  }
  #pricing-1384 .cs-item.cs-popular .cs-duration {
      opacity: 0.8;
  }
  #pricing-1384 .cs-item.cs-popular .cs-button-transparent {
      background-color: var(--headerColor);
      color: #fff;
      transition:
          color 0.3s,
          border-color 0.6s,
          background-color 0.3s;
  }
  #pricing-1384 .cs-item.cs-popular .cs-button-transparent:hover {
      border-color: #1a1a1a;
      background-color: #1a1a1a;
  }
  #pricing-1384 .cs-flex {
      /* 196px - 250px */
      width: clamp(12.25rem, 25vw, 15.625rem);
      height: clamp(12.25rem, 25vw, 15.625rem);
      margin-top: -9.375rem;
      border-radius: 50%;
      background-color: #e8e8e8;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
  }
  #pricing-1384 .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-1384 .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-1384 .cs-icon {
      width: 1.25rem;
      height: auto;
      display: flex;
  }
  #pricing-1384 .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-1384 .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-1384 .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-1384 .cs-ul {
      width: 100%;
      margin: 2.5rem 0 2.5rem 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.75rem;
      position: relative;
  }
  #pricing-1384 .cs-li {
      font-size: 1rem;
      list-style: none;
      line-height: 1.5em;
      font-weight: 400;
      text-align: inherit;
      margin: 0;
      padding: 0;
      color: var(--bodyTextColor);
      display: block;
  }
  #pricing-1384 .cs-li.cs-disabled {
      opacity: 0.5;
  }
  #pricing-1384 .cs-button-transparent {
      font-size: 1rem;
      line-height: 3.5rem;
      text-decoration: none;
      font-weight: 700;
      overflow: hidden;
      margin: 0;
      color: var(--headerColor);
      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-1384 .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-1384 .cs-button-transparent:hover {
      color: var(--bodyTextColorWhite);
      border-color: #1a1a1a;
  }
  #pricing-1384 .cs-button-transparent:hover:before {
      width: 100%;
  }
  #pricing-1384 .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-1384 .cs-container {
      max-width: 80rem;
  }
  #pricing-1384 .cs-container .cs-card-group {
      flex-direction: row;
      align-items: stretch;
  }
}
/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-1060 {
      padding: var(--sectionPadding);
      /* 200px - 300px - leaving extra space for the navigation */
      padding-top: clamp(12.5rem, 31.95vw, 18.75rem);
      position: relative;
      z-index: 1;
  }
  #hero-1060 .cs-background {
      width: 100%;
      height: 55%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -2;
  }
  #hero-1060 .cs-background:before {
      /* Overlay */
      content: "";
      width: 100%;
      height: 100%;
      background: #1a1a1a;
      opacity: 0.84;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      z-index: 1;
      /* prevents the cursor from interacting with it */
      pointer-events: none;
  }
  #hero-1060 .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;
  }
  #hero-1060 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: clamp(6.25rem, 9vw, 7.5rem);
  }
  #hero-1060 .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-1060 .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: 51.8125rem;
      margin: 0 auto 1rem 0;
      color: var(--primary);
      position: relative;
  }
  #hero-1060 .cs-text {
      /* 16px - 20px */
      font-size: clamp(1rem, 1.95vw, 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: #fff;
  }
  #hero-1060 .cs-button-solid {
      font-size: 1rem;
      /* 46px - 56px */
      line-height: clamp(2.875rem, 5.5vw, 3.5rem);
      text-decoration: none;
      font-weight: 700;
      margin: 0;
      color: #fff;
      padding: 0 1.5rem;
      background-color: var(--primary);
      display: inline-block;
      position: relative;
      z-index: 1;
  }
  #hero-1060 .cs-button-solid:before {
      content: "";
      position: absolute;
      display: block;
      height: 100%;
      width: 0%;
      background: #000;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s;
  }
  #hero-1060 .cs-button-solid:hover:before {
      width: 100%;
  }
  #hero-1060 .cs-card-group {
      margin: 0;
      padding: 0;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      row-gap: 1.875rem;
  }
  #hero-1060 .cs-item {
      width: 100%;
      text-align: left;
      list-style: none;
      margin: 0;
      /* 24px - 32px */
      padding: clamp(1.5rem, 3vw, 2rem);
      background-color: #fff;
      box-shadow: 0px 12px 80px 0px rgba(26, 26, 26, 0.08);
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      grid-column: span 12;
      grid-row: span 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      position: relative;
      z-index: 1;
  }
  #hero-1060 .cs-icon-wrapper {
      width: 4.25rem;
      height: 4.25rem;
      margin: 0 0 1.5rem 0;
      background-color: var(--primary);
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
  }
  #hero-1060 .cs-icon {
      width: 3rem;
      height: auto;
  }
  #hero-1060 .cs-h3 {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
      line-height: 1.2em;
      font-weight: bold;
      text-align: inherit;
      margin: 0 0 0.75rem 0;
      color: var(--headerColor);
  }
  #hero-1060 .cs-item-text {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      max-width: 28.125rem;
      margin: 0;
      padding: 0;
      color: var(--bodyTextColor);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-1060 {
      padding-bottom: 0;
  }
  #hero-1060 .cs-container {
      align-items: flex-start;
  }
  #hero-1060 .cs-content {
      text-align: left;
      margin-left: 0;
      align-items: flex-start;
  }
  #hero-1060 .cs-card-group {
      column-gap: 1.875rem;
  }
  #hero-1060 .cs-item {
      grid-column: span 4;
  }
  #hero-1060 .cs-background {
      height: 87%;
  }
  #hero-1060 .cs-background:before {
      background: linear-gradient(
          to right,
          rgba(0, 0, 0, 0.94) 0%,
          rgba(0, 0, 0, 0.94) 2%,
          rgba(0, 0, 0, 0) 100%
      );
      opacity: 1;
  }
}
/* Large Desktop Parallax Effect - 100px */
@media only screen and (min-width: 100rem) {
  #hero-1060 .cs-background {
      background: url("/assets/images/landing2.jpg");
      background-size: cover;
      background-position: center top;
      background-repeat: no-repeat;
      /* creates the parallax effect */
      background-attachment: fixed;
  }
  #hero-1060 .cs-background img {
      display: none;
  }
}