/*-- -------------------------- -->
<---         Services           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1129 {
    padding: var(--sectionPadding);
  }
  #services-1129 .cs-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    max-width: 80rem;
    width: 100%;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-1129 .cs-content {
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
    max-width: 39.375rem;
    width: 100%;
    /* set text align to left if content needs to be left aligned */
    text-align: center;
  }
  #services-1129 .cs-card-group {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    margin: 0;
    width: 100%;
    padding: 0;
    /* 16px - 20px */
    gap: clamp(1rem, 2.3vw, 1.25rem);
  }
  #services-1129 .cs-item {
    z-index: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #e8e8e8;
    border-radius: 1rem;
    margin: 0;
    background-color: #fff;
    width: 100%;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    /* 24px - 32px */
    padding: clamp(1.5rem, 3vw, 2rem);
    list-style: none;
    transition: box-shadow 0.3s, border-color 0.3s;
    text-align: center;
    grid-column: span 12;
    grid-row: span 1;
  }
  #services-1129 .cs-item:hover {
    box-shadow: 0px 4px 120px 0px rgba(0, 0, 0, 0.12);
    border-color: transparent;
  }
  #services-1129 .cs-item:hover .cs-h3 {
    color: var(--primary);
  }
  #services-1129 .cs-image-group {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 20px - 24px */
    margin: 0 0 clamp(1.25rem, 2.5vw, 1.5rem);
    height: auto;
    width: 6.25rem;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #services-1129 .cs-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    width: 3rem;
  }
  #services-1129 .cs-graphic {
    height: auto;
    width: 100%;
  }
  #services-1129 .cs-h3 {
    margin: 0 0 0.75rem 0;
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: bold;
    color: var(--headerColor);
    transition: color 0.3s;
    text-align: inherit;
  }
  #services-1129 .cs-item-text {
    margin: 0;
    max-width: 28.125rem;
    padding: 0;
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    color: var(--bodyTextColor);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1129 .cs-item {
    align-items: flex-start;
    text-align: left;
    grid-column: span 4;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #services-1129 .cs-item {
    background-color: var(--dark);
    border-color: rgba(255, 255, 255, 0.2);
  }
  body.dark-mode #services-1129 .cs-item:hover .cs-h3 {
    color: var(--secondary);
  }
  body.dark-mode #services-1129 .cs-topper {
    color: var(--secondary);
  }
  body.dark-mode #services-1129 .cs-title,
  body.dark-mode #services-1129 .cs-text,
  body.dark-mode #services-1129 .cs-h3,
  body.dark-mode #services-1129 .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #services-1129 .cs-text {
    opacity: 0.8;
  }
  body.dark-mode #services-1129 .cs-icon {
    filter: grayscale(1) brightness(1000%);
  }
  body.dark-mode #services-1129 .cs-graphic {
    opacity: 0.2;
  }
}
/*-- -------------------------- -->
<---            Logos           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #logos-857 {
    padding: var(--sectionPadding);
    padding-top: 0;
    /* Flex container for arrows + carousel */
    /* Hide Splide's default arrows */
    /* Hide pagination dots */
  }
  #logos-857 .cs-container {
    width: 100%;
    max-width: calc(1440 / 16 * 1rem);
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(3rem, 6vw, 4rem);
  }
  #logos-857 .cs-content {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #logos-857 .cs-title {
    max-width: 34ch;
  }
  #logos-857 .cs-carousel-section {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  #logos-857 .cs-nav-button {
    background-color: transparent;
    border: none;
    width: calc(40 / 16 * 1rem);
    height: calc(40 / 16 * 1rem);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: calc(24 / 16 * 1rem);
    font-weight: bold;
    color: var(--primary);
    flex-shrink: 0;
    border-radius: 50%;
  }
  #logos-857 .cs-nav-button:hover {
    color: var(--headerColor);
  }
  #logos-857 .cs-nav-button:active {
    transform: scale(0.95);
  }
  #logos-857 .splide {
    flex: 1;
    min-width: 0;
  }
  #logos-857 .splide__track {
    overflow: hidden;
  }
  #logos-857 .splide__list {
    display: flex;
    align-items: center;
  }
  #logos-857 .splide__slide {
    width: clamp(100px, 15vw, 200px);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }
  #logos-857 .cs-logo-picture {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #logos-857 .cs-logo {
    width: 100%;
    height: auto;
    max-height: calc(180 / 16 * 1rem);
    object-fit: contain;
    opacity: 0.8;
    transition: opacity 0.3s ease;
  }
  #logos-857 .cs-logo:hover {
    opacity: 1;
  }
  #logos-857 .splide__arrow {
    display: none !important;
  }
  #logos-857 .splide__pagination {
    display: none;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #logos-857 .cs-carousel-section {
    gap: 1.5rem;
  }
  #logos-857 .cs-nav-button {
    width: calc(48 / 16 * 1rem);
    height: calc(48 / 16 * 1rem);
    font-size: calc(28 / 16 * 1rem);
  }
}
/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #logos-857 .cs-carousel-section {
    gap: 2rem;
  }
  #logos-857 .cs-nav-button {
    width: calc(56 / 16 * 1rem);
    height: calc(56 / 16 * 1rem);
    font-size: calc(32 / 16 * 1rem);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #logos-857 .cs-topper {
    color: var(--secondary);
  }
  body.dark-mode #logos-857 .cs-title {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #logos-857 .cs-logo {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(19deg) brightness(108%) contrast(107%);
    opacity: 1;
  }
  body.dark-mode #logos-857 .cs-logo.cs-ignore {
    filter: none;
  }
  body.dark-mode #logos-857 .cs-nav-button {
    color: var(--secondary);
  }
  body.dark-mode #logos-857 .cs-nav-button:hover {
    color: var(--bodyTextColorWhite);
  }
}
/*-- -------------------------- -->
<---       Safe & Secure        -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-r-870 {
    z-index: 1;
    position: relative;
    padding: var(--sectionPadding);
    padding-bottom: 25vw;
  }
  #sbs-r-870 .cs-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    /* changes to 1280px at desktop */
    max-width: 34.375rem;
    width: 100%;
    /* 48px - 64px */
    gap: clamp(3rem, 7vw, 4rem);
  }
  #sbs-r-870 .cs-content {
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
    max-width: 33.875rem;
    width: 100%;
    /* prevents padding from affecting width and height */
    box-sizing: border-box;
    /* set text align to left if content needs to be left aligned */
    text-align: left;
  }
  #sbs-r-870 .cs-title {
    /* 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 */
    /* 17 characters wide including spaces */
    max-width: 17ch;
  }
  #sbs-r-870 .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-r-870 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-r-870 .cs-picture {
    position: relative;
    display: block;
    /* 100px - 200px */
    border-radius: 1rem;
    /* 400px - 775px */
    height: clamp(25rem, 70vw, 48.4375rem);
    max-width: 39.375rem;
    width: 100%;
    /* clips img tag corners */
    overflow: hidden;
    box-shadow: 0px 2.80579px 42.0868px rgba(0, 0, 0, 0.16);
  }
  #sbs-r-870 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #sbs-r-870 .cs-wave {
    z-index: -1;
    position: absolute;
    bottom: -1px;
    left: 0;
    height: auto;
    width: 100%;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-r-870 {
    padding: var(--sectionPadding);
  }
  #sbs-r-870 .cs-container {
    flex-direction: row;
    justify-content: space-between;
    max-width: 80rem;
  }
  #sbs-r-870 .cs-content {
    /* sends it to the left in the 1st position */
    order: -1;
    width: 53%;
    /* reset the padding, add the section padding back to the section container */
    padding: 0;
  }
  #sbs-r-870 .cs-picture {
    position: relative;
    width: 47vw;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbs-r-870 {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #sbs-r-870 .cs-title,
  body.dark-mode #sbs-r-870 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbs-r-870 .cs-text {
    opacity: 0.8;
  }
  body.dark-mode #sbs-r-870 .cs-picture:before {
    background-color: var(--accent);
  }
}
/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-567 {
    z-index: 1;
    position: relative;
    padding: var(--sectionPadding);
    padding-bottom: 17vw;
  }
  #reviews-567 .cs-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: auto;
    /* changes to 1280px at tablet */
    max-width: 34.375rem;
    width: 100%;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #reviews-567 .cs-title {
    max-width: 20ch;
  }
  #reviews-567 .cs-card-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
    width: 100%;
    padding: 0;
    /* 16px - 20px */
    gap: clamp(1rem, 2.5vw, 1.15rem);
  }
  #reviews-567 .cs-item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    border-radius: 1rem;
    background-color: #f1f1f4;
    max-width: 39.375rem;
    width: 100%;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
    /* 32px - 60px top & bottom */
    /* 16px - 48px left & right */
    padding: clamp(2rem, 6.15vw, 3.75rem) clamp(1rem, 4.15vw, 3rem);
    list-style: none;
  }
  #reviews-567 .cs-stars {
    display: block;
    /* 20px - 24px */
    margin-bottom: clamp(1.25rem, 3vw, 1.5rem);
    height: auto;
    /* 169px - 189px */
    width: clamp(10.5625rem, 20vw, 11.8125rem);
  }
  #reviews-567 .cs-item-text {
    margin: 0;
    /* 40px - 64px */
    margin-bottom: clamp(2.5rem, 8vw, 4rem);
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    color: var(--bodyTextColor);
  }
  #reviews-567 .cs-flex-group {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* 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;
    gap: 1.25rem;
  }
  #reviews-567 .cs-profile {
    position: relative;
    display: block;
    border-radius: 50%;
    height: 5rem;
    width: 5rem;
    /* clips image corners to make circle */
    overflow: hidden;
  }
  #reviews-567 .cs-profile img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes the image behave like a background image */
    object-fit: cover;
  }
  #reviews-567 .cs-name {
    display: block;
    margin: 0 0 0.5rem 0;
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.5em;
    font-weight: 700;
    color: var(--headerColor);
  }
  #reviews-567 .cs-job {
    display: block;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    /* 13px - 16px */
    font-size: clamp(0.8125rem, 1.6vw, 1rem);
    line-height: 1.2em;
    font-weight: 400;
    color: var(--bodyTextColor);
  }
  #reviews-567 .cs-wave {
    z-index: -1;
    position: absolute;
    bottom: -1px;
    left: 0;
    height: auto;
    width: 100%;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #reviews-567 .cs-container {
    max-width: 80rem;
  }
  #reviews-567 .cs-card-group {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
  }
  #reviews-567 .cs-item {
    width: clamp(48.5%, 46.5vw, 49.5%);
  }
  #reviews-567 .cs-item:last-of-type {
    align-items: center;
    max-width: 100%;
    width: 100%;
  }
  #reviews-567 .cs-item:last-of-type .cs-item-text {
    max-width: 34.375rem;
    text-align: center;
  }
}
/* Desktop - 1200px */
@media only screen and (min-width: 75rem) {
  #reviews-567 .cs-card-group {
    flex-wrap: nowrap;
  }
  #reviews-567 .cs-item {
    align-items: flex-start;
    width: 100%;
  }
  #reviews-567 .cs-item:last-of-type {
    align-items: flex-start;
  }
  #reviews-567 .cs-item:last-of-type .cs-item-text {
    text-align: left;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #reviews-567 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #reviews-567 .cs-title,
  body.dark-mode #reviews-567 .cs-text,
  body.dark-mode #reviews-567 .cs-item-text,
  body.dark-mode #reviews-567 .cs-name,
  body.dark-mode #reviews-567 .cs-job {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #reviews-567 .cs-text {
    opacity: 0.8;
  }
  body.dark-mode #reviews-567 .cs-item {
    background-color: var(--accent);
  }
}
/*-- -------------------------- -->
<---         CS-Content         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cs-content-832 {
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
    width: 100%;
    /* set text align to left if content needs to be left aligned */
    text-align: left;
  }
  #cs-content-832 .cs-content-group {
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #cs-content-832 .cs-color {
    color: var(--primary);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cs-content-832 {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
  }
  #cs-content-832 .cs-content-group {
    width: 50%;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #cs-content-832 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #cs-content-832 .cs-title,
  body.dark-mode #cs-content-832 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #cs-content-832 .cs-text {
    opacity: 0.8;
  }
}
/*-- -------------------------- -->
<---           Steps            -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #steps-1174 {
    z-index: 1;
    position: relative;
    background-color: #f7f7f7;
    overflow: hidden;
    padding: var(--sectionPadding);
  }
  #steps-1174 .cs-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    /* changes to 1280px at desktop */
    max-width: 44rem;
    width: 100%;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #steps-1174 .cs-content {
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
    max-width: 56.5625rem;
    width: 100%;
    /* set text align to left if content needs to be left aligned */
    text-align: center;
  }
  #steps-1174 .cs-title {
    margin: 0;
  }
  #steps-1174 .cs-card-group {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    margin: 0;
    width: 100%;
    padding: 0;
    gap: 1.25rem;
  }
  #steps-1174 .cs-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    list-style: none;
    text-align: center;
    grid-column: span 12;
  }
  #steps-1174 .cs-item:last-of-type:after {
    display: none;
  }
  #steps-1174 .cs-item:nth-of-type(even):after {
    /* scaleX -1 flips it horizontally */
    transform: rotate(-135deg) scaleX(-1);
  }
  #steps-1174 .cs-item:after {
    position: relative;
    content: "";
    opacity: 0.5;
    transform: rotate(135deg);
    display: block;
    margin-top: 1.25rem;
    background: url("/assets/images/curved-arrow.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: clamp(3.375rem, 6vw, 5.25rem);
    /* 54px - 84px */
    width: clamp(3.375rem, 6vw, 5.25rem);
  }
  #steps-1174 .cs-picture {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(91, 167, 225, 0.5);
    border-radius: 50%;
    margin-bottom: 1.5rem;
    background-color: #fff;
    height: 5.5rem;
    width: 5.5rem;
  }
  #steps-1174 .cs-icon {
    display: block;
    height: auto;
    width: 2.5rem;
  }
  #steps-1174 .cs-h3 {
    margin: 0 0 0.75rem 0;
    font-size: 1.25rem;
    line-height: 1.2em;
    color: var(--headerColor);
    text-align: inherit;
  }
  #steps-1174 .cs-item-p {
    opacity: 0.8;
    margin: 0;
    max-width: 21.375rem;
    font-size: 1rem;
    line-height: 1.5em;
    color: var(--bodyTextColor);
    text-align: inherit;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #steps-1174 .cs-container {
    max-width: 80rem;
  }
  #steps-1174 .cs-item {
    grid-column: span 4;
  }
  #steps-1174 .cs-item:nth-of-type(1):after {
    transform: rotate(45deg);
  }
  #steps-1174 .cs-item:nth-of-type(2):after {
    transform: rotate(135deg) scaleX(-1);
  }
  #steps-1174 .cs-item:after {
    position: absolute;
    top: 0;
    right: -3rem;
    transform: rotate(45deg);
    margin: 0;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #steps-1174 {
    background-color: #030d14;
  }
  body.dark-mode #steps-1174 .cs-picture {
    background-color: var(--medium);
    border-color: rgba(255, 255, 255, 0.2);
  }
  body.dark-mode #steps-1174 .cs-icon {
    filter: grayscale(1) brightness(1000%);
  }
  body.dark-mode #steps-1174 .cs-h3,
  body.dark-mode #steps-1174 .cs-item-p {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #steps-1174 .cs-item-p {
    opacity: 0.8;
  }
}
/*-- -------------------------- -->
<---           Hiring           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta-697 {
    z-index: 1;
    position: relative;
    background-color: var(--primary);
    padding: var(--sectionPadding);
  }
  #cta-697 .cs-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    max-width: 80rem;
    width: 100%;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #cta-697 .cs-content {
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
    width: 100%;
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #cta-697 .cs-flex {
    max-width: 28.125rem;
  }
  #cta-697 .cs-title {
    color: var(--bodyTextColorWhite);
  }
  #cta-697 .cs-text {
    opacity: 0.8;
    color: var(--bodyTextColorWhite);
  }
  #cta-697 .cs-button-solid {
    background-color: #fff;
    color: var(--primary);
    transition: color 0.3s;
  }
  #cta-697 .cs-button-solid:hover {
    color: #fff;
  }
  #cta-697 .cs-background {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
    width: 100%;
    /* makes it act like a background image */
    object-fit: cover;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cta-697 .cs-content {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}
/*-- -------------------------- -->
<---           Quote            -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #quote-561 {
    background-color: #f7f7f7;
    padding: var(--sectionPadding);
  }
  #quote-561 .cs-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    max-width: 80rem;
    width: 100%;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #quote-561 .cs-content {
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
    width: 100%;
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #quote-561 .cs-topper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.2em;
    font-weight: 700;
    color: var(--headerColor);
    text-align: inherit;
    gap: 1.5rem;
  }
  #quote-561 .cs-topper:before {
    /* yellow line */
    content: "";
    opacity: 1;
    display: block;
    background: var(--primary);
    height: 2px;
    width: 3.125rem;
  }
  #quote-561 .cs-quote {
    margin: 0;
    /* 31px - 49px */
    font-size: clamp(1.9375rem, 5.1vw, 3.0625rem);
    line-height: 1.2em;
    font-weight: 900;
    color: var(--headerColor);
  }
  #quote-561 .cs-name {
    display: block;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    /* 16px - 20px */
    font-size: clamp(1rem, 1.7vw, 1.25rem);
    line-height: 1.2em;
    font-weight: 700;
    color: var(--primary);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #quote-561 {
    background-color: var(--medium);
  }
  body.dark-mode #quote-561 .cs-quote {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #quote-561 .cs-topper {
    color: var(--secondary);
  }
  body.dark-mode #quote-561 .cs-topper:before {
    background-color: var(--secondary);
  }
  body.dark-mode #quote-561 .cs-name {
    color: var(--secondary);
  }
}
/*-- -------------------------- -->
<---         Services           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1117 {
    z-index: 1;
    position: relative;
    padding: var(--sectionPadding);
    padding-top: 20vw;
    padding-bottom: 0;
  }
  #services-1117 .cs-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    max-width: 80rem;
    width: 100%;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-1117 .cs-card-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    width: 100%;
    padding: 0;
    /* changes to a clamp on tablet */
    gap: 2.5rem;
  }
  #services-1117 .cs-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 25.8125rem;
    width: 100%;
    list-style: none;
    text-align: center;
    /* 16px - 24px */
    gap: clamp(1rem, 3vw, 1.5rem);
  }
  #services-1117 .cs-image-group {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    /* 80px - 100px */
    width: clamp(5rem, 8vw, 6.25rem);
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #services-1117 .cs-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    /* 36px - 48px */
    width: clamp(2.25rem, 4vw, 4rem);
  }
  #services-1117 .cs-graphic {
    height: auto;
    width: 100%;
  }
  #services-1117 .cs-h2 {
    margin: 0;
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    color: var(--headerColor);
    text-align: inherit;
  }
  #services-1117 .cs-item-text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5em;
    color: var(--bodyTextColor);
    text-align: inherit;
  }
  #services-1117 .cs-wave {
    position: absolute;
    top: -1px;
    left: 0;
    height: auto;
    width: 100%;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1117 .cs-card-group {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    /* 16px - 20px */
    gap: clamp(1rem, 2.5vw, 1.25rem);
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #services-1117 .cs-item {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: auto;
    text-align: left;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #services-1117 .cs-h2,
  body.dark-mode #services-1117 .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #services-1117 .cs-item-text {
    opacity: 0.8;
  }
  body.dark-mode #services-1117 .cs-graphic {
    opacity: 0.2;
  }
  body.dark-mode #services-1117 .cs-icon {
    /* turns the icon white */
    filter: grayscale(1) brightness(1000%);
  }
}
/*-- -------------------------- -->
<---    Full Service Plumbing   -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-870 {
    z-index: 1;
    position: relative;
    padding: var(--sectionPadding);
    padding-bottom: 25vw;
  }
  #sbs-870 .cs-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    /* changes to 1280px at desktop */
    max-width: 34.375rem;
    width: 100%;
    /* 48px - 64px */
    gap: clamp(3rem, 7vw, 4rem);
  }
  #sbs-870 .list-1074 {
    columns: 2;
  }
  #sbs-870 .list-1074 .cs-li {
    overflow: hidden;
  }
  #sbs-870 .cs-content {
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
    max-width: 33.875rem;
    width: 100%;
    /* prevents padding from affecting width and height */
    box-sizing: border-box;
    /* set text align to left if content needs to be left aligned */
    text-align: left;
  }
  #sbs-870 .cs-title {
    /* 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 */
    /* 17 characters wide including spaces */
    max-width: 17ch;
  }
  #sbs-870 .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-870 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-870 .cs-picture {
    position: relative;
    display: block;
    /* 100px - 200px */
    border-radius: 1rem;
    /* 400px - 775px */
    height: clamp(25rem, 70vw, 48.4375rem);
    max-width: 39.375rem;
    width: 100%;
    /* clips img tag corners */
    overflow: hidden;
    box-shadow: 0px 2.80579px 42.0868px rgba(0, 0, 0, 0.16);
  }
  #sbs-870 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-870 {
    padding: var(--sectionPadding);
  }
  #sbs-870 .cs-container {
    flex-direction: row;
    justify-content: space-between;
    max-width: 80rem;
  }
  #sbs-870 .cs-content {
    width: 53%;
    /* reset the padding, add the section padding back to the section container */
    padding: 0;
  }
  #sbs-870 .list-1074 {
    column-gap: 4rem;
    display: block;
  }
  #sbs-870 .cs-picture {
    position: relative;
    width: 47vw;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbs-870 .cs-title,
  body.dark-mode #sbs-870 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbs-870 .cs-text {
    opacity: 0.8;
  }
  body.dark-mode #sbs-870 .cs-picture:before {
    background-color: var(--accent);
  }
}
/*-- -------------------------- -->
<---       Meet The Team        -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #meet-team-1140 {
    overflow: hidden;
    padding: var(--sectionPadding);
  }
  #meet-team-1140 .cs-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    max-width: 80rem;
    width: 100%;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #meet-team-1140 .cs-content {
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
    width: 100%;
    /* set text align to left if content needs to be left aligned */
    text-align: center;
  }
  #meet-team-1140 .cs-title {
    max-width: 25ch;
  }
  #meet-team-1140 .cs-card-group {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    width: 100%;
    padding: 0;
    /* 16px - 20px */
    gap: clamp(1rem, 2.3vw, 1.25rem);
  }
  #meet-team-1140 .cs-item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    list-style: none;
  }
  #meet-team-1140 .cs-item:hover .cs-picture img {
    transform: scale(1.1);
  }
  #meet-team-1140 .cs-item:hover .cs-picture:before,
  #meet-team-1140 .cs-item:hover .cs-picture:after {
    opacity: 1;
  }
  #meet-team-1140 .cs-item:hover .cs-info {
    background-color: var(--primary);
  }
  #meet-team-1140 .cs-item:hover .cs-name {
    color: var(--bodyTextColorWhite);
  }
  #meet-team-1140 .cs-item:hover .cs-job {
    color: var(--bodyTextColorWhite);
  }
  #meet-team-1140 .cs-picture {
    z-index: 1;
    position: relative;
    display: block;
    border-radius: 1rem;
    margin: 0 0 0.5rem 0;
    height: auto;
    width: 100%;
    /* clips the img corners */
    /* clips img tag from overflowing it on hover */
    overflow: hidden;
    /* removed at tablet */
    aspect-ratio: 0.80589681;
  }
  #meet-team-1140 .cs-picture img {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    /* makes sure the top of the image is at the top of the parent, heads won't get cut off this way */
    object-position: top;
    transition: transform 0.7s;
  }
  #meet-team-1140 .cs-info {
    z-index: 10;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 0.75rem;
    margin: -2.625rem 0 0;
    background-color: #f7f7f7;
    width: 90%;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 1rem;
    transition: background-color 0.3s;
  }
  #meet-team-1140 .cs-name {
    display: block;
    margin: 0 0 0.25rem 0;
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    color: var(--headerColor);
    transition: color 0.3s;
  }
  #meet-team-1140 .cs-job {
    display: block;
    margin-right: 0;
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    color: var(--bodyTextColor);
    transition: color 0.3s;
  }
}
/* Tablet - 550px */
@media only screen and (min-width: 34.375rem) {
  #meet-team-1140 .cs-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    text-align: left;
  }
  #meet-team-1140 .cs-title {
    margin: 0;
  }
  #meet-team-1140 .cs-card-group {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
  }
  #meet-team-1140 .cs-item {
    width: 48.3%;
  }
  #meet-team-1140 .cs-picture {
    height: 25.4375rem;
    /* remove the aspect ratio so the height can be squished */
    aspect-ratio: initial;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #meet-team-1140 .cs-card-group {
    justify-content: center;
  }
  #meet-team-1140 .cs-item {
    max-width: 19.0625rem;
    width: 22.7vw;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #meet-team-1140 .cs-topper {
    color: var(--secondary);
  }
  body.dark-mode #meet-team-1140 .cs-title,
  body.dark-mode #meet-team-1140 .cs-name,
  body.dark-mode #meet-team-1140 .cs-job {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #meet-team-1140 .cs-job {
    opacity: 0.8;
  }
  body.dark-mode #meet-team-1140 .cs-info {
    background-color: var(--medium);
  }
}
/*-- -------------------------- -->
<---       Plumbing Guide       -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-871 {
    z-index: 1;
    position: relative;
    background-color: #f7f7f7;
    padding: var(--sectionPadding);
  }
  #sbs-871 .cs-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    /* changes to 1280px at desktop */
    max-width: 34.375rem;
    width: 100%;
    /* 48px - 64px */
    gap: clamp(3rem, 7vw, 4rem);
  }
  #sbs-871 .list-1074 .cs-li {
    overflow: hidden;
  }
  #sbs-871 .cs-content {
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
    max-width: 32.625rem;
    width: 100%;
    /* prevents padding from affecting width and height */
    box-sizing: border-box;
    /* set text align to left if content needs to be left aligned */
    text-align: left;
  }
  #sbs-871 .cs-title {
    max-width: 22ch;
  }
  #sbs-871 .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-871 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-871 .cs-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 0.75rem;
  }
  #sbs-871 label {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  #sbs-871 .cs-input {
    display: block;
    border: none;
    border-radius: 0.5rem;
    margin: 0;
    height: 3.5rem;
    width: 100%;
    /* prevents padding from adding to width and height */
    box-sizing: border-box;
    padding: 0;
    padding-left: 1.25rem;
    font-size: 1rem;
  }
  #sbs-871 .cs-input::placeholder {
    color: #767676;
  }
  #sbs-871 .cs-submit {
    border: none;
    width: 100%;
  }
  #sbs-871 .cs-picture {
    position: relative;
    display: block;
    /* 100px - 200px */
    border-radius: 1rem;
    max-width: 39.375rem;
    width: 100%;
    /* clips img tag corners */
    overflow: hidden;
    aspect-ratio: 1041 / 1350;
    box-shadow: 0px 2.80579px 42.0868px rgba(0, 0, 0, 0.16);
  }
  #sbs-871 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: contain;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-871 {
    padding: var(--sectionPadding);
  }
  #sbs-871 .cs-container {
    flex-direction: row;
    justify-content: space-between;
    max-width: 80rem;
  }
  #sbs-871 .cs-content {
    order: -1;
    width: 53%;
    /* reset the padding, add the section padding back to the section container */
    padding: 0;
  }
  #sbs-871 .cs-form {
    max-width: 22.5rem;
  }
  #sbs-871 .list-1074 {
    column-gap: 4rem;
  }
  #sbs-871 .cs-picture {
    position: relative;
    width: 47vw;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbs-871 {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #sbs-871 .cs-title,
  body.dark-mode #sbs-871 .cs-text,
  body.dark-mode #sbs-871 label {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbs-871 .cs-text {
    opacity: 0.8;
  }
  body.dark-mode #sbs-871 .cs-picture:before {
    background-color: var(--accent);
  }
}
/*-- -------------------------- -->
<---    Side By Side Reverse    -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-872 {
    z-index: 1;
    position: relative;
    padding: var(--sectionPadding);
    padding-bottom: 25vw;
  }
  #sbs-872 .cs-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    /* changes to 1280px at desktop */
    max-width: 34.375rem;
    width: 100%;
    /* 48px - 64px */
    gap: clamp(3rem, 7vw, 4rem);
  }
  #sbs-872 .list-1074 {
    columns: 2;
  }
  #sbs-872 .list-1074 .cs-li {
    overflow: hidden;
  }
  #sbs-872 .cs-content {
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
    max-width: 33.875rem;
    width: 100%;
    /* prevents padding from affecting width and height */
    box-sizing: border-box;
    /* set text align to left if content needs to be left aligned */
    text-align: left;
  }
  #sbs-872 .cs-title {
    /* 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 */
    /* 17 characters wide including spaces */
    max-width: 17ch;
  }
  #sbs-872 .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-872 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-872 .cs-picture {
    position: relative;
    display: block;
    /* 100px - 200px */
    border-radius: 1rem;
    /* 400px - 775px */
    height: clamp(25rem, 70vw, 48.4375rem);
    max-width: 39.375rem;
    width: 100%;
    /* clips img tag corners */
    overflow: hidden;
    box-shadow: 0px 2.80579px 42.0868px rgba(0, 0, 0, 0.16);
  }
  #sbs-872 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-872 {
    padding: var(--sectionPadding);
  }
  #sbs-872 .cs-container {
    flex-direction: row;
    justify-content: space-between;
    max-width: 80rem;
  }
  #sbs-872 .cs-content {
    width: 53%;
    /* reset the padding, add the section padding back to the section container */
    padding: 0;
  }
  #sbs-872 .list-1074 {
    column-gap: 4rem;
    columns: 3;
    display: block;
  }
  #sbs-872 .cs-picture {
    position: relative;
    width: 47vw;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbs-872 .cs-title,
  body.dark-mode #sbs-872 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbs-872 .cs-text {
    opacity: 0.8;
  }
  body.dark-mode #sbs-872 .cs-picture:before {
    background-color: var(--accent);
  }
}
/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #faq-1261 {
    z-index: 1;
    position: relative;
    overflow: hidden;
    padding: var(--sectionPadding);
    padding-top: 0;
  }
  #faq-1261 .cs-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
    /* chnages to 1280px at desktop */
    max-width: 36.5rem;
    width: 100%;
    /* 40px - 48px */
    gap: clamp(2.5rem, 5vw, 3rem);
  }
  #faq-1261 .cs-content {
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
    width: 100%;
    /* set text align to left if content needs to be left aligned */
    text-align: center;
  }
  #faq-1261 .cs-title {
    margin: 0;
  }
  #faq-1261 .cs-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    /* 16px - 20px */
    gap: clamp(1rem, 2.4vw, 1.25rem);
  }
  #faq-1261 .cs-faq-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
    width: 100%;
    padding: 0;
    /* 16px - 20px */
    gap: clamp(1rem, 2.4vw, 1.25rem);
  }
  #faq-1261 .cs-faq-item {
    border-radius: 0.5rem;
    background-color: #f7f7f7;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    list-style: none;
    transition: border-bottom 0.3s;
  }
  #faq-1261 .cs-faq-item.active .cs-button {
    color: var(--primary);
  }
  #faq-1261 .cs-faq-item.active .cs-button:before {
    transform: rotate(315deg);
    background-color: var(--primary);
  }
  #faq-1261 .cs-faq-item.active .cs-button:after {
    transform: rotate(-315deg);
    background-color: var(--primary);
  }
  #faq-1261 .cs-faq-item.active .cs-item-p {
    opacity: 0.8;
    margin-top: 0.75rem;
    height: auto;
    /* 16px - 24px */
    padding-top: 0.75rem;
    padding-bottom: 1.5rem;
  }
  #faq-1261 .cs-faq-item.active .cs-item-p:before {
    position: absolute;
    top: 0;
    left: 1.5rem;
    right: 1.5rem;
    /* border top */
    content: "";
    opacity: 1;
    display: block;
    background: #7d799c;
    height: 1px;
  }
  #faq-1261 .cs-button {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    border: none;
    background: transparent;
    width: 100%;
    overflow: hidden;
    padding: 1.5rem 1.5rem 0;
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.2em;
    font-weight: bold;
    color: var(--headerColor);
    transition: background-color 0.3s, color 0.3s;
    text-align: left;
    /* 16px - 24px */
    gap: clamp(1rem, 2.5vw, 1.5rem);
  }
  #faq-1261 .cs-button:hover {
    cursor: pointer;
  }
  #faq-1261 .cs-button:before {
    position: absolute;
    top: 67%;
    right: 1.1875rem;
    /* left line */
    content: "";
    opacity: 1;
    transform: rotate(45deg);
    display: block;
    border-radius: 50%;
    background-color: var(--primary);
    height: 0.125rem;
    width: 0.5rem;
    transition: transform 0.5s;
    /* animate the transform from the left side of the x axis, and the center of the y */
    transform-origin: left center;
  }
  #faq-1261 .cs-button:after {
    position: absolute;
    top: 67%;
    right: 1rem;
    /* right line */
    content: "";
    opacity: 1;
    transform: rotate(-45deg);
    display: block;
    border-radius: 50%;
    background-color: var(--primary);
    height: 0.125rem;
    width: 0.5rem;
    transition: transform 0.5s;
    /* animate the transform from the right side of the x axis, and the center of the y */
    transform-origin: right center;
  }
  #faq-1261 .cs-button-text {
    display: block;
    width: 90%;
    padding: 0;
  }
  #faq-1261 .cs-item-p {
    position: relative;
    opacity: 0;
    margin: 0;
    height: 0;
    max-width: 33.8125rem;
    width: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    /* clips the text so it doesn't show up */
    overflow: hidden;
    /* 16px - 24px */
    padding: 0 1.5rem 1.5rem;
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    color: var(--bodyTextColor);
    transition: opacity 0.3s, padding-bottom 0.3s, padding-top 0.3s;
  }
  #faq-1261 .cs-background {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
  #faq-1261 .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) {
  #faq-1261 .cs-container {
    max-width: 80rem;
  }
  #faq-1261 .cs-wrapper {
    flex-direction: row;
    align-items: flex-start;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #faq-1261 .cs-faq-item {
    background-color: rgba(0, 0, 0, 0.3);
  }
  body.dark-mode #faq-1261 .cs-faq-item.active .cs-item-p {
    opacity: 0.8;
  }
  body.dark-mode #faq-1261 .cs-faq-item.active .cs-button {
    color: var(--secondary);
  }
  body.dark-mode #faq-1261 .cs-faq-item.active .cs-button:before,
  body.dark-mode #faq-1261 .cs-faq-item.active .cs-button:after {
    background-color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-1261 .cs-button,
  body.dark-mode #faq-1261 .cs-item-p {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-1261 .cs-button:before,
  body.dark-mode #faq-1261 .cs-button:after {
    background-color: var(--secondary);
  }
}