/* PAGE-SPECIFIC STYLES FOR THE HOME PAGE */
/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/
/* 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);
    }
  }
  #sbs-1362 {
    padding: var(--sectionPadding);
    position: relative;
    overflow: hidden;
    z-index: 1;
  }
  #sbs-1362 .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);
  }
  #sbs-1362 .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;
    /* text before image on mobile */
    order: -1;
  }
  #sbs-1362 .cs-title {
    /* 23 characters wide including spaces */
    max-width: 26ch;
  }
  #sbs-1362 .cs-text {
    margin-bottom: 1rem;
  }
  #sbs-1362 .cs-text:last-of-type {
    margin-bottom: 1.5rem;
  }
  #sbs-1362 .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);
  }
  #sbs-1362 .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: 0.5rem;
    border: 1px solid #e8e8e8;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #sbs-1362 .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;
  }
  #sbs-1362 .cs-h3-icon {
    width: 2rem;
    height: auto;
    display: block;
  }
  #sbs-1362 .cs-item-text {
    font-size: 0.875rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #sbs-1362 .cs-ul {
    width: 100%;
    margin: 0 0 1.5rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #sbs-1362 .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;
  }
  #sbs-1362 .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;
  }
  #sbs-1362 .cs-image-group {
    width: 100%;
    max-width: 36.625rem;
    /* Changes to auto at desktop */
    height: 32.5rem;
    /* 32px - 48px */
    border-radius: clamp(1rem, 2vw, 1.5rem);
    /* clips the corners of the children around the border radius */
    overflow: hidden;
    position: relative;
  }
  #sbs-1362 .cs-background {
    width: 100%;
    height: 100%;
    /* makes it cover the parent dimensions */
    object-fit: cover;
    display: block;
  }
  #sbs-1362 .cs-background img {
    width: 100%;
    height: 100%;
    /* makes it cover the parent like a backgorund image */
    object-fit: cover;
    display: block;
  }
  #sbs-1362 .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: clamp(1rem, 2vw, 1.5rem);
    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);
  }
  #sbs-1362 .cs-box-icon {
    width: 3.75rem;
    height: auto;
    display: block;
  }
  #sbs-1362 .cs-desc {
    font-size: 1.25rem;
    line-height: 1.2em;
    text-align: inherit;
    font-weight: 700;
    width: 100%;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #sbs-1362 .cs-bubbles {
    font-size: min(2.5vw, .7em);
    width: 26.1875em;
    height: 26.6875em;
    position: absolute;
    /* changes to 160px at larger desktop */
    right: -16.25em;
    /* changes to 30px at large desktop */
    bottom: -3.125em;
    z-index: -1;
  }
  #sbs-1362 .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;
  }
  #sbs-1362 .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) {
  #sbs-1362 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #sbs-1362 .cs-image-group {
    height: auto;
  }
  #sbs-1362 .cs-content {
    order: initial;
  }
  #sbs-1362 .cs-bubbles {
    font-size: min(2.5vw, 1em);
  }
}
/* Large Desktop 1600px */
@media only screen and (min-width: 100rem) {
  #sbs-1362 .cs-bubbles {
    margin-left: 40.625rem;
    right: auto;
    left: 50%;
    bottom: 1.875rem;
  }
}
/*-- -------------------------- -->
<---        Why Choose Us       -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #why-choose-1662 {
    padding: var(--sectionPadding);
    background-color: #fff;
    position: relative;
    overflow: hidden;
    z-index: 1;
  }
  #why-choose-1662 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 40px - 64px */
    gap: clamp(2.5rem, 3.9vw, 4rem);
  }
  #why-choose-1662 .cs-content {
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #why-choose-1662 .cs-title {
    margin: 0;
    max-width: 100%;
  }
  #why-choose-1662 .cs-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* 16px - 32px */
    gap: clamp(1rem, 3.2vw, 2rem);
  }
  #why-choose-1662 .cs-card-group {
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    /* 16px - 32px */
    gap: clamp(1rem, 2vw, 2rem);
  }
  #why-choose-1662 .cs-item {
    list-style: none;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
  }
  #why-choose-1662 .cs-item-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  #why-choose-1662 .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;
  }
  #why-choose-1662 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
  }
  #why-choose-1662 .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #why-choose-1662 .cs-floater {
    /* 246px - 582px */
    width: clamp(15.375rem, 50vw, 36.375rem);
    height: auto;
    position: absolute;
    right: -4rem;
    top: -0.5rem;
    z-index: -1;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #why-choose-1662 .cs-wrapper {
    flex-direction: row;
    align-items: flex-start;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #why-choose-1662 {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #why-choose-1662 .cs-title,
  body.dark-mode #why-choose-1662 .cs-h3,
  body.dark-mode #why-choose-1662 .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #why-choose-1662 .cs-item-text {
    opacity: 0.8;
  }
  body.dark-mode #why-choose-1662 .cs-floater {
    opacity: 0.1;
  }
}
/*-- -------------------------- -->
<---   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-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: 0.5rem;
    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-image-group {
    width: 100%;
    max-width: 36.625rem;
    /* Changes to auto at desktop */
    height: 32.5rem;
    /* 32px - 48px */
    border-radius: clamp(1rem, 2vw, 1.5rem);
    /* 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: clamp(1rem, 2vw, 1.5rem);
    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, .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 */
/* you can copy and paste these styles into the section CSS where you placed the #list-1405 HTML, or you can place it in your global stylesheet so you can reuse the HTML in any Side By Side section on your site. That way when you make changes to it, it will also change everywhere in the site */
@media only screen and (min-width: 0rem) {
  #list-1405 {
    width: 100%;
    margin: 0 0 1.5rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #list-1405 .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;
  }
  #list-1405 .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;
  }
}
/* Dark Mode, copy and paste only the styles inside the #list-1405 brackets into your section's dark mode media query */
@media only screen and (min-width: 0rem) {
  body.dark-mode #list-1405 .cs-li {
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  body.dark-mode #list-1405 .cs-icon {
    filter: grayscale(1) brightness(1000%);
  }
}
/* Mobile - 360px */
@media only screen and (min-width: 0em) {
  #sbs {
    padding: var(--sectionPadding);
  }
  #sbs .cs-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 0.5rem;
    margin: auto;
    max-width: 80rem;
    width: 100%;
    row-gap: 2.5rem;
  }
  #sbs .cs-left {
    position: relative;
    border-radius: 0.5rem;
    height: 39.75em;
    /* using ems so we can use font size to scale the whole section */
    width: 39.4375em;
    /* scaling the font size with the view width */
    font-size: min(2.31vw, 0.7em);
  }
  #sbs .cs-picture {
    position: absolute;
    display: block;
    border-radius: clamp(1rem, 2vw, 1.5rem);
    /* clips img tag corners */
    overflow: hidden;
  }
  #sbs .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: clamp(1rem, 2vw, 1.5rem);
    height: 100%;
    width: 100%;
    /* makes image act like a background image */
    object-fit: cover;
  }
  #sbs .cs-picture1 {
    top: 0;
    left: 0;
    border-radius: clamp(1rem, 2vw, 1.5rem);
    height: 36.3125em;
    width: 32.625em;
  }
  #sbs .cs-picture2 {
    bottom: 0;
    right: 0;
    /* 6px - 12px */
    border: clamp(0.375em, 1.5vw, 0.75em) solid #fff;
    border-radius: clamp(1rem, 2vw, 1.5rem);
    background-color: #fff;
    height: 25em;
    width: 25.875em;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 40px;
  }
  #sbs .cs-right {
    border-radius: 0.5rem;
    margin: auto;
    max-width: 33.875rem;
  }
  #sbs .cs-topper {
    margin-bottom: 0.25rem;
    text-align: left;
  }
  #sbs .cs-title {
    max-width: 50rem;
    text-align: left;
  }
  #sbs .cs-text {
    margin-bottom: 1rem;
    max-width: 46.875rem;
    text-align: left;
  }
  #sbs .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs .cs-flex-group {
    position: relative;
    border-radius: 0.5rem;
    background-color: #f7f7f7;
    /* 16px - 32px */
    padding: clamp(1rem, 3vw, 2rem);
  }
  #sbs .cs-flex-p {
    margin: 0 0 1rem;
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    color: #353535;
  }
  #sbs .cs-name {
    display: block;
    margin: 0 0 0.25rem;
    text-transform: uppercase;
    font-size: 1rem;
    line-height: 1.2em;
    font-family: "Outfit";
    font-weight: 700;
    color: var(--headerColor);
  }
  #sbs .cs-job {
    display: block;
    font-size: 0.875rem;
    line-height: 1.5em;
    color: #353535;
  }
  #sbs .cs-quote-icon {
    position: absolute;
    bottom: 0rem;
    /* 16px - 32px */
    right: clamp(1rem, 4vw, 2rem);
    border-radius: 0.5rem;
    height: auto;
    /* 60px - 136px */
    width: clamp(3.75rem, 10vw, 8.5rem);
    color: #1a1a1a;
  }
  #sbs .cs-button-solid {
    margin-top: 2rem;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64em) {
  #sbs .cs-container {
    flex-flow: row;
    justify-content: space-between;
    gap: 3.25rem;
  }
  #sbs .cs-left {
    font-size: min(1.2vw, 1em);
    flex: none;
  }
  #sbs .cs-right {
    margin: 0;
  }
}
/*-- -------------------------- -->
<---       Why Choose Us        -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #why-choose-682 {
    padding: var(--sectionPadding);
  }
  #why-choose-682 .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-682 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 33.875rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #why-choose-682 .cs-color {
    color: var(--primary);
  }
  #why-choose-682 .cs-text {
    margin-bottom: 1rem;
  }
  #why-choose-682 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #why-choose-682 .cs-ul {
    width: 100%;
    margin: 0 0 2rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  #why-choose-682 .cs-li {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #why-choose-682 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--headerColor);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #why-choose-682 .cs-icon {
    width: 1.0625rem;
    height: auto;
    margin-top: 0.25rem;
  }
  #why-choose-682 .cs-item-text {
    font-size: 0.875rem;
    line-height: 1.5em;
    text-align: left;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #why-choose-682 .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;
  }
  #why-choose-682 .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;
  }
  #why-choose-682 .cs-button-solid:hover:before {
    width: 100%;
  }
  #why-choose-682 .cs-image-group {
    /* everything inside the image group is in ems so the font size will scale them down.  Font size minimum is tied to view width size, and grows until it reaches 75% of the value on em */
    font-size: min(2.3vw, .75em);
    width: 39.5em;
    height: 51.25em;
    position: relative;
    z-index: 1;
    /* flips it horizontally */
    transform: scaleX(-1);
  }
  #why-choose-682 .cs-picture {
    width: 19.125em;
    height: 22.5em;
    border-radius: 0.5rem;
    overflow: hidden;
    display: block;
    position: absolute;
  }
  #why-choose-682 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.5rem;
    position: absolute;
    top: 0;
    left: 0;
    /* so the images are the original orientation, undoing the flip the cs-image-group is doing */
    transform: scaleX(-1);
  }
  #why-choose-682 .cs-picture1 {
    top: 5em;
    left: 0;
  }
  #why-choose-682 .cs-picture2 {
    top: 0;
    right: 0;
  }
  #why-choose-682 .cs-picture3 {
    bottom: 0;
    left: 0;
  }
  #why-choose-682 .cs-picture4 {
    bottom: 5em;
    right: 0;
  }
  #why-choose-682 .cs-graphic {
    display: none;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #why-choose-682 .cs-container {
    flex-direction: row;
    justify-content: space-between;
  }
  #why-choose-682 .cs-image-group {
    font-size: min(1.2vw, 1em);
    flex: none;
    /* sends it to the right in the 2nd position */
    order: 2;
  }
  #why-choose-682 .cs-graphic {
    width: 61.4375em;
    height: auto;
    display: block;
    position: absolute;
    bottom: 10.3125em;
    right: -2em;
    z-index: -1;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #why-choose-682 .cs-topper .cs-color {
    color: var(--primary);
  }
  body.dark-mode #why-choose-682 .cs-title,
  body.dark-mode #why-choose-682 .cs-text,
  body.dark-mode #why-choose-682 .cs-h3,
  body.dark-mode #why-choose-682 .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #why-choose-682 .cs-text,
  body.dark-mode #why-choose-682 .cs-item-text {
    opacity: 0.8;
  }
  body.dark-mode #why-choose-682 .cs-icon {
    filter: brightness(125%);
  }
  body.dark-mode #why-choose-682 .cs-graphic {
    opacity: 0.5;
  }
}
/*-- -------------------------- -->
<---    Side By Side Reverse     -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbsr-312 {
    padding: var(--sectionPadding);
  }
  #sbsr-312 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #sbsr-312 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 33.875rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #sbsr-312 .cs-text {
    margin-bottom: 1rem;
  }
  #sbsr-312 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbsr-312 .cs-quote {
    margin: 0 0 2rem 0;
    /* 16px - 32px */
    padding: clamp(1rem, 3vw, 2rem);
    background-color: #f7f7f7;
    border-radius: 0.5rem;
    position: relative;
  }
  #sbsr-312 .cs-quote-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin: 0 0 1rem;
    color: #767676;
    display: block;
  }
  #sbsr-312 .cs-name {
    font-size: 1rem;
    line-height: 1.2em;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0 0 0.25rem;
    color: var(--headerColor);
    display: block;
  }
  #sbsr-312 .cs-job {
    font-size: 0.875rem;
    line-height: 1.5em;
    color: #767676;
    display: block;
  }
  #sbsr-312 .cs-quote-icon {
    /* 60px - 136px */
    width: clamp(3.75rem, 10vw, 8.5rem);
    height: auto;
    position: absolute;
    bottom: 0rem;
    /* 16px - 32px */
    right: clamp(1rem, 4vw, 2rem);
  }
  #sbsr-312 .cs-image-group {
    /* scaling the font size with the view width */
    font-size: min(2.31vw, 0.7em);
    /* using ems so we can use font size to scale the whole section */
    width: 39.4375em;
    height: 39.75em;
    border-radius: 0.5rem;
    position: relative;
  }
  #sbsr-312 .cs-picture {
    position: absolute;
    display: block;
    border-radius: clamp(1rem, 2vw, 1.5rem);
    /* clips img tag corners */
    overflow: hidden;
  }
  #sbsr-312 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: clamp(1rem, 2vw, 1.5rem);
    height: 100%;
    width: 100%;
    /* makes image act like a background image */
    object-fit: cover;
  }
  #sbsr-312 .cs-picture1 {
    top: 0;
    left: 0;
    border-radius: clamp(1rem, 2vw, 1.5rem);
    height: 36.3125em;
    width: 32.625em;
  }
  #sbsr-312 .cs-picture2 {
    bottom: 0;
    right: 0;
    /* 6px - 12px */
    border: clamp(0.375em, 1.5vw, 0.75em) solid #fff;
    border-radius: clamp(1rem, 2vw, 1.5rem);
    background-color: #fff;
    height: 25em;
    width: 25.875em;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 40px;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbsr-312 .cs-image-group {
    /* sends it to the left in the 1st position */
    order: 1;
  }
  #sbsr-312 .cs-content {
    order: 2;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbsr-312 .cs-container {
    flex-flow: row;
    justify-content: space-between;
    gap: 3.25rem;
  }
  #sbsr-312 .cs-image-group {
    font-size: min(1.2vw, 1em);
    flex: none;
  }
  #sbsr-312 .cs-content {
    margin: 0;
  }
}
/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #faq-2286 {
    padding: var(--sectionPadding);
    position: relative;
  }
  #faq-2286 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 40px - 48px */
    gap: clamp(2.5rem, 5vw, 3rem);
  }
  #faq-2286 .cs-content {
    text-align: left;
    max-width: 33.875rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
  }
  #faq-2286 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 33.875rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #faq-2286 .cs-title {
    /* 20 characters wide including spaces */
    max-width: 20ch;
    margin: 0 auto 2rem 0;
  }
  #faq-2286 .cs-faq-group {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  #faq-2286 .cs-faq-item {
    list-style: none;
    width: 100%;
    border-bottom: 1px solid #e8e8e8;
    transition: border-bottom 0.3s;
  }
  #faq-2286 .cs-faq-item.active {
    border-bottom: 4px solid var(--primary);
  }
  #faq-2286 .cs-faq-item.active .cs-button {
    color: var(--primary);
  }
  #faq-2286 .cs-faq-item.active .cs-button .cs-indicator:before {
    transform: translate(-50%, -50%) rotate(360deg);
  }
  #faq-2286 .cs-faq-item.active .cs-button .cs-indicator:after {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  #faq-2286 .cs-faq-item.active .cs-item-p {
    height: auto;
    /* 20px - 24px bottom */
    padding: 0 0 clamp(1rem, 2vw, 1.5rem) 0;
    opacity: 1;
  }
  #faq-2286 .cs-button {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.2em;
    text-align: left;
    font-weight: bold;
    /* 16px - 24px */
    padding: clamp(1rem, 2.3vw, 1.5rem) 0;
    border: none;
    background: transparent;
    color: var(--headerColor);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
    transition: background-color 0.3s, color 0.3s;
  }
  #faq-2286 .cs-button:hover {
    cursor: pointer;
  }
  #faq-2286 .cs-button .cs-indicator {
    width: 1.5rem;
    height: 1.5rem;
    position: relative;
    z-index: 1;
  }
  #faq-2286 .cs-button .cs-indicator:before {
    /* left line */
    content: '';
    width: 0.75rem;
    height: 0.125rem;
    background-color: #585B5D;
    opacity: 1;
    border-radius: 2px;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.5s;
  }
  #faq-2286 .cs-button .cs-indicator:after {
    /* right line */
    content: '';
    width: 0.75rem;
    height: 0.125rem;
    background-color: #585B5D;
    opacity: 1;
    border-radius: 2px;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    transition: transform 0.5s;
  }
  #faq-2286 .cs-button-text {
    width: 90%;
    display: block;
  }
  #faq-2286 .cs-item-p {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    width: 90%;
    max-width: 33.8125rem;
    height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    color: var(--bodyTextColor);
    /* clips the text so it doesn't show up */
    overflow: hidden;
    transition: opacity 0.3s, padding-bottom 0.3s;
  }
  #faq-2286 .cs-image-group {
    /* everything inside the image group is in ems so the font size will scale them down.  Font size minimum is tied to view width size, and grows until it reaches 86% of the value on em */
    font-size: min(2.3vw, .86rem);
    width: 39.375em;
    height: 37.8125em;
    position: relative;
    z-index: 1;
  }
  #faq-2286 .cs-picture {
    overflow: hidden;
    display: block;
    position: absolute;
    border-radius: 0.5rem;
  }
  #faq-2286 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #faq-2286 .cs-picture1 {
    width: 19.0625em;
    height: 25.3125em;
    top: 0;
    left: 0;
  }
  #faq-2286 .cs-picture2 {
    width: 19.0625em;
    height: 11.25em;
    top: 0;
    right: 0;
  }
  #faq-2286 .cs-picture3 {
    width: 19.0625em;
    height: 11.25em;
    bottom: 0;
    left: 0;
  }
  #faq-2286 .cs-picture4 {
    width: 19.0625em;
    height: 25.3125em;
    bottom: 0;
    right: 0;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #faq-2286 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.25rem;
  }
  #faq-2286 .cs-content {
    width: 55%;
    max-width: 33.125rem;
    padding: 0;
  }
  #faq-2286 .cs-image-group {
    font-size: inherit;
    width: 45vw;
    max-width: 39.375rem;
    min-height: 28.875rem;
    order: 2;
    flex: none;
  }
  #faq-2286 .cs-picture1 {
    width: auto;
    margin-right: 0.625em;
    right: 50%;
  }
  #faq-2286 .cs-picture2 {
    width: auto;
    margin-left: 0.625em;
    left: 50%;
  }
  #faq-2286 .cs-picture3 {
    width: auto;
    margin-right: 0.625em;
    right: 50%;
  }
  #faq-2286 .cs-picture4 {
    width: auto;
    margin-left: 0.625em;
    left: 50%;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #faq-2286 .cs-topper {
    color: var(--primary);
  }
  body.dark-mode #faq-2286 .cs-title,
  body.dark-mode #faq-2286 .cs-item-p {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-2286 .cs-faq-item {
    border-color: rgba(255, 255, 255, 0.2);
  }
  body.dark-mode #faq-2286 .cs-faq-item.active {
    border-color: var(--primary);
  }
  body.dark-mode #faq-2286 .cs-faq-item.active .cs-button {
    color: var(--primary);
  }
  body.dark-mode #faq-2286 .cs-faq-item.active .cs-button .cs-indicator:before,
  body.dark-mode #faq-2286 .cs-faq-item.active .cs-button .cs-indicator:after {
    background-color: var(--primary);
  }
  body.dark-mode #faq-2286 .cs-button {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-2286 .cs-button .cs-indicator:before,
  body.dark-mode #faq-2286 .cs-button .cs-indicator:after {
    background-color: var(--bodyTextColorWhite);
  }
}