/*-- -------------------------- -->
<---         About Us           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-691 {
    padding: var(--sectionPadding);
    overflow: hidden;
    position: relative;
    background-color: #f7f7f7;
  }
  #sbs-691 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #sbs-691 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 32.625rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #sbs-691 .cs-color {
    color: var(--primary);
  }
  #sbs-691 .cs-text {
    /* Override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This selector is a section specific override that stays inside this stitch */
    margin-bottom: 1rem;
  }
  #sbs-691 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-691 .cs-floater {
    /* 80px - 216px */
    width: clamp(5rem, 9vw, 13.5rem);
    height: auto;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
  }
  #sbs-691 .cs-image-group {
    /* scales the whole section down and ties the font size to the vw and stops at 75% of the vale of 1em, changes at desktop */
    font-size: min(2.15vw, .75em);
    /* everything inside this box is in ems so we can scale it all down proportionally with a font size */
    width: 42.1875em;
    height: 50.3125em;
    /* prevents flexbox from squishing it */
    flex: none;
    position: relative;
    z-index: 1;
  }
  #sbs-691 .cs-picture {
    overflow: hidden;
    display: block;
    position: absolute;
  }
  #sbs-691 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #sbs-691 .cs-picture1 {
    width: 33.875em;
    height: 40.4375em;
    border-radius: 17.8125em;
    top: 0;
    left: 0;
  }
  #sbs-691 .cs-picture2 {
    width: 25.8125em;
    height: 30.8125em;
    border-radius: 12.875em;
    border: 0.75em solid #ffffff;
    background-color: #fff;
    bottom: 0;
    right: 0;
  }
  #sbs-691 .cs-flower {
    width: 22.6875em;
    height: auto;
    display: block;
    position: absolute;
    bottom: -1.875em;
    left: 0em;
    z-index: -1;
    transform: rotate(-142deg);
  }
  #sbs-691 .cs-sense {
    width: 5.0625em;
    height: auto;
    display: block;
    position: absolute;
    bottom: 28.75em;
    right: 1.375em;
    transform: rotate(164deg);
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-691 .cs-container {
    flex-direction: row;
    justify-content: space-between;
  }
  #sbs-691 .cs-image-group {
    font-size: min(1.15vw, 1em);
  }
  #sbs-691 .cs-content {
    width: 48%;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbs-691 {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #sbs-691 .cs-topper,
  body.dark-mode #sbs-691 .cs-color {
    color: var(--primaryLight);
  }
  body.dark-mode #sbs-691 .cs-picture2 {
    border-color: var(--dark);
  }
  body.dark-mode #sbs-691 .cs-flower {
    opacity: .5;
  }
  body.dark-mode #sbs-691 .cs-sense {
    filter: brightness(150%);
  }
  body.dark-mode #sbs-691 .cs-title,
  body.dark-mode #sbs-691 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbs-691 .cs-text {
    opacity: .8;
  }
}
/*-- -------------------------- -->
<---           Steps            -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #steps-889 {
    padding: var(--sectionPadding);
  }
  #steps-889 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #steps-889 .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;
  }
  #steps-889 .cs-text {
    /* Override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This selector is a section specific override that stays inside this stitch */
    max-width: 66.5rem;
  }
  #steps-889 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 20px - 40px */
    gap: clamp(1.25rem, 3vw, 2.5rem);
  }
  #steps-889 .cs-item {
    text-align: center;
    list-style: none;
    width: 100%;
    max-width: 20.375rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #steps-889 .cs-picture {
    margin-bottom: 1.5rem;
    width: 4.5rem;
    height: 4.5rem;
    background-color: rgba(206, 65, 13, 0.05);
    border-radius: 1rem 0 1rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #steps-889 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    text-align: inherit;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
  }
  #steps-889 .cs-item-p {
    font-size: 1rem;
    line-height: 1.5em;
    text-align: inherit;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #steps-889 .cs-arrow {
    /* 48px - 80px */
    width: clamp(3rem, 6vw, 5rem);
    height: auto;
    display: block;
    flex: none;
    transform: rotate(120deg);
  }
  #steps-889 .cs-arrow-img {
    width: 100%;
    display: block;
  }
  #steps-889 .cs-icon {
    width: 2rem;
    height: auto;
    display: block;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #steps-889 .cs-card-group {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #steps-889 .cs-arrow {
    align-self: center;
    transform: rotate(40deg);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #steps-889 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #steps-889 .cs-title,
  body.dark-mode #steps-889 .cs-text,
  body.dark-mode #steps-889 .cs-h3,
  body.dark-mode #steps-889 .cs-item-p {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #steps-889 .cs-text,
  body.dark-mode #steps-889 .cs-item-p {
    opacity: .8;
  }
  body.dark-mode #steps-889 .cs-picture {
    background-color: var(--accent);
  }
  body.dark-mode #steps-889 .cs-arrow {
    opacity: .5;
  }
}
/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services1 {
    padding: var(--sectionPadding);
  }
  #services1 .cs-container {
    width: 100%;
    max-width: 80em;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services1 .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;
  }
  #services1 .cs-flex-group {
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #services1 .cs-title {
    /* 22 characters including spaces */
    max-width: 22ch;
  }
  #services1 .cs-text {
    max-width: 33.8125rem;
    margin: 0;
  }
  #services1 .cs-card-group {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    row-gap: 1rem;
  }
  #services1 .cs-item {
    list-style: none;
    /* changes on tablet */
    max-width: 28.875rem;
    border-radius: 0.25rem;
    /* 24px - 40px top & bottom */
    padding: clamp(1.25rem, 4vw, 2.5rem) 1.5rem;
    background-color: #F7F8F8;
    box-sizing: border-box;
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
  }
  #services1 .cs-item:hover {
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 50px;
    transform: translateY(-0.4375rem);
  }
  #services1 .cs-item:hover .cs-picture:before {
    width: 100%;
    height: 100%;
    opacity: 1;
  }
  #services1 .cs-link {
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  #services1 .cs-picture {
    width: 4rem;
    height: 4rem;
    margin: 0;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0px 12px 30px rgba(26, 26, 26, 0.04);
    position: relative;
    z-index: 1;
  }
  #services1 .cs-icon {
    height: 2rem;
    width: auto;
  }
  #services1 .cs-h3 {
    font-size: 1.25rem;
    font-weight: 900;
    text-align: center;
    line-height: 1.2em;
    margin: 0;
    margin-bottom: 0.75rem;
    color: var(--headerColor);
    transition: color .3s;
  }
  #services1 .cs-item-p {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    text-align: center;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    transition: color .3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services1 .cs-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  #services1 .cs-card-group {
    /* pushes down the same amount the 2nd and 5th cards are translated down to maintain the even spacing at the bottom of the cs-card-group */
    margin-bottom: 2.5rem;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 1.25rem;
  }
  #services1 .cs-item {
    width: 30vw;
    max-width: 25.8125rem;
  }
  #services1 .cs-item:nth-of-type(2),
  #services1 .cs-item:nth-of-type(5) {
    transform: translateY(2.5rem);
  }
  #services1 .cs-item:nth-of-type(2):hover,
  #services1 .cs-item:nth-of-type(5):hover {
    /* make these two have a separate hover translate amount, they're already translated 40px down, so to match the same hover animatons as the other cards we just subtract their translate values from the 40px and they will move up by the same amount as the other cards */
    transform: translateY(2.0625rem);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #services1 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #services1 .cs-title,
  body.dark-mode #services1 .cs-text,
  body.dark-mode #services1 .cs-h3,
  body.dark-mode #services1 .cs-item-p {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #services1 .cs-text,
  body.dark-mode #services1 .cs-item-p {
    opacity: .8;
  }
  body.dark-mode #services1 .cs-item {
    background-color: var(--medium);
  }
}
/*-- -------------------------- -->
<---     Featured Service       -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbsr-678 {
    padding: var(--sectionPadding);
    /* clips anything overflowing */
    overflow: hidden;
    position: relative;
    background-color: #f7f7f7;
  }
  #sbsr-678 .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);
  }
  #sbsr-678 .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-678 .cs-text {
    /* Override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This selector is a section specific override that stays inside this stitch */
    margin-bottom: 1rem;
  }
  #sbsr-678 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbsr-678 .cs-contact-group {
    width: 100%;
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
  }
  #sbsr-678 .cs-link {
    text-decoration: none;
    padding-right: 1.875rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    position: relative;
  }
  #sbsr-678 .cs-link:hover:before {
    width: 100%;
    height: 3.5em;
    border-radius: 1.875rem;
  }
  #sbsr-678 .cs-link:hover .cs-wrapper {
    transform: scale(1.2);
  }
  #sbsr-678 .cs-link:hover .cs-icon {
    transform: translateX(0.4375rem);
  }
  #sbsr-678 .cs-link:before {
    /* light green circle that animates on hover */
    content: '';
    width: 3rem;
    height: 3rem;
    background: #EFF1F0;
    border-radius: 1.5rem;
    opacity: 1;
    position: absolute;
    display: block;
    top: 50%;
    left: 0;
    z-index: -1;
    transform: translateY(-50%);
    transition: width 0.3s, height 0.3s, border-radius 0.3s;
  }
  #sbsr-678 .cs-wrapper {
    width: 3rem;
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
    transition: transform .3s;
  }
  #sbsr-678 .cs-icon {
    width: 1.5rem;
    height: auto;
    display: block;
    transition: transform .3s;
  }
  #sbsr-678 .cs-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  #sbsr-678 .cs-header {
    font-size: 1rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: block;
  }
  #sbsr-678 .cs-link-content {
    font-size: 1rem;
    line-height: 1.2em;
    font-weight: 400;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
  }
  #sbsr-678 .cs-image-group {
    /* scales the whole section down and ties the font size to the vw and stops at 75% of the vale of 1em, changes at desktop */
    font-size: min(2vw, .75em);
    /* everything inside this box is in ems so we can scale it all down proportionally with a font size */
    width: 41.5625em;
    height: 52.625em;
    margin-left: auto;
    position: relative;
    z-index: 1;
  }
  #sbsr-678 .cs-picture {
    width: 35.125em;
    height: 42.5em;
    border-radius: 17.8125em;
    /* clips the image to match the border radius of the cs-picture */
    overflow: hidden;
    display: block;
    position: absolute;
    left: 0.9375em;
    bottom: 2em;
  }
  #sbsr-678 .cs-picture img {
    width: 100%;
    height: 100%;
    /* makes it act like a background image */
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #sbsr-678 .cs-graphic1 {
    width: 40.625em;
    height: auto;
    display: block;
    position: absolute;
    right: -12.8125em;
    top: -7.8125em;
    z-index: -1;
    /* flips it horizontally */
    transform: scaleX(-1);
  }
  #sbsr-678 .cs-graphic2 {
    width: 18.75em;
    height: auto;
    display: block;
    position: absolute;
    transform: rotate(-137deg) scaleX(-1);
    left: -2.8125em;
    bottom: -1.4375em;
    z-index: -1;
  }
  #sbsr-678 .cs-floater {
    display: none;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbsr-678 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  #sbsr-678 .cs-image-group {
    /* set to inherit at Large Desktop */
    font-size: min(1.2vw, 1em);
    margin: 0;
    /* sends it to the right in the 2nd position */
    order: 2;
  }
  #sbsr-678 .cs-content {
    width: 51%;
  }
}
/* Large Desktop - 1900px */
@media only screen and (min-width: 118.75rem) {
  #sbsr-678 .cs-floater {
    width: 18.25rem;
    height: auto;
    display: block;
    position: absolute;
    left: 0;
    top: 1.25rem;
    /* flips it horizontally */
    transform: scaleX(-1);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbsr-678 {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #sbsr-678 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #sbsr-678 .cs-title,
  body.dark-mode #sbsr-678 .cs-text,
  body.dark-mode #sbsr-678 .cs-header,
  body.dark-mode #sbsr-678 .cs-link-content {
    color: var(--bodyTextColorWhite);
    transition: color .3s;
  }
  body.dark-mode #sbsr-678 .cs-text {
    opacity: .8;
  }
  body.dark-mode #sbsr-678 .cs-link:before {
    background-color: var(--accent);
  }
  body.dark-mode #sbsr-678 .cs-icon {
    /* makes icons that are not black turn white */
    filter: grayscale(1) brightness(1000%);
  }
  body.dark-mode #sbsr-678 .cs-graphic1,
  body.dark-mode #sbsr-678 .cs-graphic2 {
    filter: brightness(50%);
  }
}
/*-- -------------------------- -->
<---           Stats            -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #stats-316 {
    padding: var(--sectionPadding);
    background-color: var(--primary);
  }
  #stats-316 .cs-card-group {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 37.5em;
    margin: auto;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2.5rem;
  }
  #stats-316 .cs-item {
    list-style: none;
    width: 14.6875rem;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  #stats-316 .cs-picture {
    width: 5rem;
    height: 5rem;
    /* 12px - 20px */
    margin-right: clamp(0.75rem, 3vw, 1.25rem);
    border-radius: 50%;
    border: 1px solid var(--bodyTextColorWhite);
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #stats-316 .cs-icon {
    width: 2.5rem;
    height: auto;
  }
  #stats-316 .cs-flex-group {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
  }
  #stats-316 .cs-number {
    font-size: var(--headerFontSize);
    color: var(--bodyTextColorWhite);
    font-weight: 900;
    line-height: 1.2em;
    margin: 0;
    display: block;
  }
  #stats-316 .cs-desc {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    color: var(--bodyTextColorWhite);
    display: block;
  }
}
/* Tablet - 650px */
@media only screen and (min-width: 40.625rem) {
  #stats-316 .cs-card-group {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 1.25rem;
    row-gap: 2rem;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #stats-316 .cs-card-group {
    max-width: 80rem;
    flex-wrap: nowrap;
    justify-content: space-evenly;
  }
}
/*-- -------------------------- -->
<---       Why Choose Us        -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #why-choose {
    padding: var(--sectionPadding);
  }
  #why-choose .cs-container {
    width: 100%;
    max-width: 80em;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #why-choose .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;
    /* flips it horizontally */
    transform: scaleX(-1);
    z-index: 1;
  }
  #why-choose .cs-picture {
    width: 19.125em;
    height: 22.5em;
    overflow: hidden;
    display: block;
    position: absolute;
    border-radius: 0.25rem;
  }
  #why-choose .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #why-choose .cs-picture1 {
    top: 5em;
    left: 0;
  }
  #why-choose .cs-picture2 {
    top: 0;
    right: 0;
  }
  #why-choose .cs-picture3 {
    bottom: 0;
    left: 0;
  }
  #why-choose .cs-picture4 {
    bottom: 5em;
    right: 0;
  }
  #why-choose .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 .cs-ul {
    margin: 0 0 2.5rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  #why-choose .cs-li {
    list-style: none;
  }
  #why-choose .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 .cs-icon {
    width: 1.0625rem;
    height: auto;
    margin-top: 0.25rem;
  }
  #why-choose .cs-item-p {
    font-size: 0.875rem;
    line-height: 1.5em;
    text-align: left;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #why-choose .cs-graphic {
    display: none;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #why-choose .cs-container {
    flex-direction: row;
    justify-content: space-between;
  }
  #why-choose .cs-image-group {
    font-size: min(1.2vw, 1em);
    flex: none;
    /* sends it to the right in the 2nd position */
    order: 2;
  }
  #why-choose .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 .cs-topperm .cs-color {
    color: var(--primaryLight);
  }
  body.dark-mode #why-choose .cs-title,
  body.dark-mode #why-choose .cs-text,
  body.dark-mode #why-choose .cs-h3,
  body.dark-mode #why-choose .cs-item-p {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #why-choose .cs-text,
  body.dark-mode #why-choose .cs-item-p {
    opacity: .8;
  }
  body.dark-mode #why-choose .cs-icon {
    filter: brightness(125%);
  }
  body.dark-mode #why-choose .cs-graphic {
    opacity: .5;
  }
}
/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-355 {
    padding: var(--sectionPadding);
    background-color: #f7f7f7;
  }
  #reviews-355 .cs-container {
    width: 100%;
    max-width: 90rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #reviews-355 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #reviews-355 .cs-title {
    max-width: 25ch;
  }
  #reviews-355 .cs-card-group {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 2.5vw, 1.15rem);
  }
  #reviews-355 .cs-item {
    list-style: none;
    width: 100%;
    max-width: 39.375rem;
    margin: 0;
    /* 24px - 32px top & bottom */
    /* 16px - 40px left & right */
    padding: clamp(1.5rem, 3.15vw, 2rem) clamp(1rem, 3.15vw, 2.5rem);
    background-color: #fff;
    border-radius: 0.5rem;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    position: relative;
  }
  #reviews-355 .cs-quote {
    width: 2.5rem;
    height: auto;
    margin-bottom: 2rem;
    display: block;
  }
  #reviews-355 .cs-review {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 2vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    /* 20px - 40px */
    margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
    color: var(--bodyTextColor);
  }
  #reviews-355 .cs-name {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 3vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    /* in case one card has more text than the other, this pushes up against the review text so the name and title are always at the bottom. Only works if parent is a flexbox */
    margin-top: auto;
    color: var(--headerColor);
    display: block;
  }
  #reviews-355 .cs-job {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.6vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #reviews-355 .cs-card-group {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
  }
  #reviews-355 .cs-item {
    width: clamp(31.5%, 30vw, 32.3%);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #reviews-355 {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #reviews-355 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #reviews-355 .cs-title,
  body.dark-mode #reviews-355 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #reviews-355 .cs-item {
    background-color: var(--accent);
  }
  body.dark-mode #reviews-355 .cs-review,
  body.dark-mode #reviews-355 .cs-name {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #reviews-355 .cs-job {
    color: var(--bodyTextColorWhite);
    opacity: .7;
  }
}
/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-598 {
    position: relative;
  }
  #sbs-598 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #sbs-598 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 32.625rem;
    /* moved section padding to cs-content so the cs-background can be full width */
    padding: var(--sectionPadding);
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #sbs-598 .cs-text {
    /* Override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This selector is a section specific override that stays inside this stitch */
    margin-bottom: 1rem;
  }
  #sbs-598 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-598 .cs-background {
    display: block;
    position: relative;
    width: 100%;
    height: 16rem;
    z-index: 1;
  }
  #sbs-598 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbs-598 {
    /* 90px - 150px */
    /* returned section padding to the section container, this Stitch has 1.5X padding top and bottom than the normal Stitch */
    padding: clamp(5.625rem, 9vw, 9.375rem) 1rem;
  }
  #sbs-598 .cs-container {
    flex-direction: row;
    justify-content: flex-end;
  }
  #sbs-598 .cs-background {
    width: 50%;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 50%;
  }
  #sbs-598 .cs-content {
    width: 45%;
    padding: 0;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbs-598 .cs-topper {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbs-598 .cs-title,
  body.dark-mode #sbs-598 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbs-598 .cs-text {
    opacity: .8;
  }
}