/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #faq-489 {
    padding: var(--sectionPadding);
    background: #fafbfc;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
  }
  #faq-489 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    /* 40px - 48px */
    gap: clamp(2.5rem, 5vw, 3rem);
  }
  #faq-489 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #faq-489 .cs-content .cs-title {
    /* 17 characters wide including spaces */
    max-width: 17ch;
  }
  #faq-489 .cs-content .cs-text {
    /* 32px - 48px */
    margin-bottom: clamp(2rem, 3vw, 3rem);
  }
  #faq-489 .cs-faq-group {
    max-width: 46.25rem;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1.25rem;
  }
  #faq-489 .cs-faq-group .cs-faq-item {
    list-style: none;
    width: 100%;
    /* prevents border from affecting width and height */
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #f1f1f4;
    transition: border 0.3s, padding 0.3s, border-color 0.3s;
  }
  #faq-489 .cs-faq-group .cs-faq-item:hover {
    border-color: var(--primary);
  }
  #faq-489 .cs-faq-group .cs-faq-item.active {
    padding-bottom: 1rem;
    border-color: var(--primary);
  }
  #faq-489 .cs-faq-group .cs-faq-item .cs-button {
    /* 20px - 25px */
    font-size: 1.3rem;
    line-height: 1.2em;
    text-align: left;
    font-weight: bold;
    padding: 1rem 1.5rem;
    border: none;
    background: transparent;
    color: var(--headerColor);
    display: block;
    width: 100%;
    position: relative;
    transition: background-color 0.3s, color 0.3s;
  }
  #faq-489 .cs-faq-group .cs-faq-item .cs-button:hover {
    cursor: pointer;
  }
  #faq-489 .cs-faq-group .cs-faq-item .cs-button:before {
    /* horizontal line */
    content: "";
    width: 1rem;
    height: 0.1875rem;
    background-color: currentColor;
    opacity: 1;
    border-radius: 1px;
    position: absolute;
    display: block;
    top: 50%;
    right: 1.5rem;
    transform: translateY(-50%);
    transition: transform 0.5s, opacity 0.3s;
  }
  #faq-489 .cs-faq-group .cs-faq-item .cs-button:after {
    /* vertical line */
    content: "";
    width: 1rem;
    height: 0.1875rem;
    background-color: currentColor;
    opacity: 1;
    border-radius: 1px;
    position: absolute;
    display: block;
    top: 50%;
    right: 1.5rem;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: center;
    transition: transform 0.5s;
  }
  #faq-489 .cs-faq-group .cs-faq-item .cs-button[aria-expanded="true"] {
    color: var(--primary);
  }
  #faq-489 .cs-faq-group .cs-faq-item .cs-button[aria-expanded="true"]:before {
    transform: translateY(-50%) rotate(180deg);
    opacity: 0;
    background-color: var(--primary);
  }
  #faq-489 .cs-faq-group .cs-faq-item .cs-button[aria-expanded="true"]:after {
    transform: translateY(-50%) rotate(360deg);
    background-color: var(--primary);
  }
  #faq-489 .cs-faq-group .cs-faq-item .cs-button[aria-expanded="true"] + .cs-item-p {
    height: auto;
    margin-top: 0.5rem;
    opacity: 1;
  }
  #faq-489 .cs-faq-group .cs-faq-item .cs-button .cs-button-text {
    width: 80%;
    display: block;
  }
  #faq-489 .cs-faq-group .cs-faq-item .cs-item-p {
    /* 14px - 16px */
    font-size: 1.1rem;
    line-height: 1.5em;
    width: 90%;
    height: 0;
    margin: 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    opacity: 0;
    color: var(--bodyTextColor);
    /* clips the text so it doesn't show up */
    overflow: hidden;
    transition: opacity 0.3s, padding-bottom 0.3s;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 48rem) {
  #faq-489 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3.25rem;
  }
  #faq-489 .cs-content {
    margin-top: 3.125rem;
  }
  #faq-489 .cs-content .cs-title,
  #faq-489 .cs-content .cs-topper {
    text-align: left;
    margin-left: 0;
  }
  #faq-489 .cs-faq-group {
    width: clamp(56%, 58vw, 58%);
    flex: none;
  }
}
/*-- -------------------------- -->
<---         Services           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-343 {
    padding: var(--sectionPadding);
  }
  #services-343 .cs-container {
    width: 100%;
    /* changes to 1440px at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-343 .cs-container .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #services-343 .cs-container .cs-content .cs-text {
    font-size: var(--bodyFontSize);
  }
  #services-343 .cs-container .cs-card-group {
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1.25rem;
  }
  #services-343 .cs-container .cs-card-group .cs-item {
    list-style: none;
    width: 100%;
    max-width: 31.25rem;
    border-radius: 0.5rem;
    background-color: #fff;
    position: relative;
    z-index: 1;
    transition: box-shadow 0.3s, transform 0.3s;
  }
  #services-343 .cs-container .cs-card-group .cs-item:hover {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    transform: translateY(-0.4375rem);
  }
  #services-343 .cs-container .cs-card-group .cs-item:hover .cs-picture img {
    opacity: 0.3;
    transform: scale(1.1);
  }
  #services-343 .cs-container .cs-card-group .cs-item:hover .cs-h3 {
    color: var(--primaryLight);
  }
  #services-343 .cs-container .cs-card-group .cs-item:hover .cs-button-solid {
    background-color: var(--primaryDark);
  }
  #services-343 .cs-container .cs-card-group .cs-item:before {
    /* border, done in pseudo so it can sit under the picture */
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
    border: 1px solid #e8e8e8;
    /* prevents border from affecting height and width */
    box-sizing: border-box;
    background: transparent;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #services-343 .cs-container .cs-card-group .cs-item .cs-link {
    text-decoration: none;
    /* 16px - 24px */
    padding-bottom: clamp(1rem, 2.2vw, 1.5rem);
    display: block;
  }
  #services-343 .cs-container .cs-card-group .cs-item .cs-link .cs-picture {
    width: 100%;
    height: 15rem;
    /* 16px - 24px */
    margin-bottom: clamp(1rem, 2.2vw, 1.5rem);
    border-radius: 0.5rem 0.5rem 0 0;
    background-color: var(--primaryLight);
    /* clips the img tag corners */
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 10;
  }
  #services-343 .cs-container .cs-card-group .cs-item .cs-link .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.6s, opacity 0.3s;
  }
  #services-343 .cs-container .cs-card-group .cs-item .cs-link .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 3vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    color: var(--headerColor);
    margin: 0 0 0.75rem 0;
    /* 16px - 24px */
    padding: 0 clamp(1rem, 2vw, 1.5rem);
    transition: color 0.3s;
  }
  #services-343 .cs-container .cs-card-group .cs-item .cs-link .cs-item-text {
    /* 14px - 16px  */
    font-size: 1rem;
    line-height: 1.5em;
    color: var(--bodyTextColor);
    margin: 0;
    /* 16px - 24px */
    padding: 0 clamp(1rem, 2.2vw, 1.5rem);
  }
  #services-343 .cs-container .cs-card-group .cs-item .cs-link .cs-button-solid {
    margin: 1rem clamp(1rem, 2.2vw, 1.5rem) 0;
    line-height: 0.2rem;
    padding: 0.9rem;
    font-size: 0.9rem;
    font-weight: normal;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-343 .cs-container {
    max-width: 80rem;
  }
  #services-343 .cs-container .cs-card-group {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 2rem;
  }
}
/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #services-343 .cs-container .cs-card-group {
    gap: 1rem;
  }
  #services-343 .cs-container .cs-card-group .cs-item {
    /* we do this so it's stackable. You can add any number of reviews you want and they will stack and center in the middle. We dont use grid because if you have an odd number of reviews, they don't stay centered.  They align with their grid lines. If you want 4 reviews in a row, lower the width under 22.5vw or 23% to get the desired sizes fit 4 in a row and then stack when you add more */
    width: 23.8%;
  }
}
/*-- -------------------------- -->
<---       Services (shared)         -->
<--- -------------------------- -*/
@media only screen and (min-width: 0rem) {
  #services-343 {
    background: radial-gradient(circle, #0197f1, #017ac3);
    /* For older browsers (optional) */
    background: -webkit-radial-gradient(circle, #0197f1, #017ac3);
    background: -moz-radial-gradient(circle, #0197f1, #017ac3);
    background: -o-radial-gradient(circle, #0197f1, #017ac3);
    background: -ms-radial-gradient(circle, #0197f1, #017ac3);
  }
  #services-343 .cs-content .cs-title {
    color: #fff;
  }
  #services-343 .cs-content .cs-text {
    color: #fff;
  }
}
/*-- -------------------------- -->
<---       About Us         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-68 {
    padding: var(--sectionPadding);
  }
  #sbs-68 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #sbs-68 .cs-container .cs-picture {
    width: 95%;
    max-width: 15.625rem;
    margin: 0;
    position: relative;
    display: block;
    /* width divided by height */
    aspect-ratio: 312/335;
    border-radius: 1rem;
    z-index: 1;
  }
  #sbs-68 .cs-container .cs-picture:before {
    /* Top right box */
    content: "";
    width: 10rem;
    /* 202px - 248px */
    height: clamp(12.625rem, 25vw, 15.5rem);
    background: var(--primaryDark);
    opacity: 1;
    border-radius: 1rem;
    position: absolute;
    display: block;
    /* 16px -20px */
    /* wrapped in a calc function to get a negative clamp value */
    top: calc(clamp(.5rem, 2.09vw, 1.25rem) * -1);
    right: calc(clamp(.5rem, 2.09vw, 1.25rem) * -1);
  }
  #sbs-68 .cs-container .cs-picture:after {
    /* Bottom left box */
    content: "";
    width: 10rem;
    /* 202px - 248px */
    height: clamp(12.625rem, 25vw, 15.5rem);
    background: var(--primaryDark);
    opacity: 1;
    border-radius: 1rem;
    position: absolute;
    display: block;
    /* 16px -20px */
    /* wrapped in a calc function to get a negative clamp value */
    bottom: calc(clamp(.5rem, 2.09vw, 1.25rem) * -1);
    left: calc(clamp(.5rem, 2.09vw, 1.25rem) * -1);
    z-index: -1;
  }
  #sbs-68 .cs-container .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 1rem;
  }
  #sbs-68 .cs-container .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #sbs-68 .cs-container .cs-content .cs-text {
    margin-bottom: 1rem;
    font-size: 1.2rem;
  }
  #sbs-68 .cs-container .cs-content .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-68 .cs-container .cs-content .cs-button-solid {
    align-self: center;
  }
  #sbs-68 .cs-container .cs-content .list-1114 {
    width: 100%;
    max-width: 39.375rem;
    margin: 0 0 2rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 16px - 24px */
    gap: clamp(1rem, 2.5vw, 1.5rem);
  }
  #sbs-68 .cs-container .cs-content .list-1114 .cs-li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.25rem;
  }
  #sbs-68 .cs-container .cs-content .list-1114 .cs-icon {
    width: 3rem;
    height: auto;
    display: block;
    filter: var(--greenSvgFilter);
  }
  #sbs-68 .cs-container .cs-content .list-1114 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    font-weight: 700;
    line-height: 1.2em;
    text-align: left;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
  }
  #sbs-68 .cs-container .cs-content .list-1114 .cs-li-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: left;
    margin: 0;
    color: var(--bodyTextColor);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbs-68 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: clamp(3rem, 6.909789vw, 6rem);
  }
  #sbs-68 .cs-container .cs-picture {
    /* 328px - 502px */
    width: clamp(20.5rem, 37.5vw, 31.375rem);
    /* 440px - 520px */
    height: clamp(27.5rem, 40vw, 32.5rem);
    /* 16px - 20px */
    margin: 0 0 0 clamp(1rem, 5vw, 1.25rem);
    flex: none;
    max-width: 34.375rem;
  }
  #sbs-68 .cs-container .cs-content .cs-title {
    max-width: 20ch;
  }
  #sbs-68 .cs-container .cs-content .cs-button-solid {
    align-self: flex-start;
  }
}
/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-67 {
    padding: var(--sectionPadding);
    background: linear-gradient(to bottom, #f7f7f7, #ffffff);
  }
  #reviews-67 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  #reviews-67 .cs-container .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-67 .cs-container .cs-card-group {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    column-gap: 1.25rem;
    row-gap: 2rem;
  }
  #reviews-67 .cs-container .cs-card-group .cs-item {
    text-align: left;
    list-style: none;
    width: 100%;
    max-width: 39.375rem;
    /* pushes up the same amount the cs-item-img overlaps the card */
    margin: 0;
    /* Padding L & R - 16px - 32px */
    padding: 2rem clamp(1rem, 3.2vw, 2rem) 0;
    padding-bottom: 1.8rem;
    box-shadow: 0px 20px 39px 0px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
    border-radius: 0.25rem;
    background: #fff;
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    /* Prevents padding from affecting height & width */
    box-sizing: border-box;
  }
  #reviews-67 .cs-container .cs-card-group .cs-item:last-of-type {
    margin-bottom: 0;
  }
  #reviews-67 .cs-container .cs-card-group .cs-item .cs-item-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    margin: 0 0 1.25rem;
    padding-bottom: 1.25rem;
    color: var(--bodyTextColor);
    border-bottom: 1px solid #e8e9ec;
  }
  #reviews-67 .cs-container .cs-card-group .cs-item .cs-info {
    width: 100%;
    /* margin-top auto pushes up against the rest of the card, that way when one card has more text than the other, the reviewer info is always pushed to the bottom and lined up with the rest of them.  This ensures better responsiveness for changing content */
    margin: auto 0 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #reviews-67 .cs-container .cs-card-group .cs-item .cs-info .cs-flex-group {
    width: 100%;
    margin: 0;
  }
  #reviews-67 .cs-container .cs-card-group .cs-item .cs-info .cs-flex-group .cs-name {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    font-weight: 700;
    width: 40%;
    margin: 0;
    color: var(--headerColor);
  }
  #reviews-67 .cs-container .cs-card-group .cs-item .cs-info .cs-flex-group .cs-desc {
    font-size: 1rem;
    font-weight: 400;
    color: #3e3e3e;
    display: block;
  }
  #reviews-67 .cs-container .cs-card-group .cs-item .cs-info .cs-item-stars {
    width: 6rem;
    height: 1rem;
  }
  #reviews-67 .cs-container .cs-button-solid {
    margin-top: 2rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #reviews-67 .cs-container .cs-card-group {
    flex-direction: row;
    justify-content: space-between;
  }
}
/*-- -------------------------- -->
<---       Service Areas         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-68-service-areas {
    padding: var(--sectionPadding);
  }
  #sbs-68-service-areas .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #sbs-68-service-areas .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 33.875rem;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #sbs-68-service-areas .cs-title {
    font-size: 2.5rem;
  }
  #sbs-68-service-areas .cs-text {
    margin-bottom: 1rem;
  }
  #sbs-68-service-areas .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-68-service-areas .cs-picture {
    width: 95%;
    margin: 0;
    position: relative;
    display: block;
    /* width divided by height */
    aspect-ratio: 312/335;
    border-radius: 1rem;
    z-index: 1;
  }
  #sbs-68-service-areas .cs-picture:before {
    /* Top right box */
    content: "";
    width: 13.75rem;
    /* 202px - 248px */
    height: clamp(12.625rem, 25vw, 15.5rem);
    background: var(--primary);
    opacity: 1;
    border-radius: 1rem;
    position: absolute;
    display: block;
    /* 16px -20px */
    /* wrapped in a calc function to get a negative clamp value */
    top: calc(clamp(.5rem, 2.09vw, 1.25rem) * -1);
    right: calc(clamp(.5rem, 2.09vw, 1.25rem) * -1);
  }
  #sbs-68-service-areas .cs-picture:after {
    /* Bottom left box */
    content: "";
    width: 14.375rem;
    /* 202px - 248px */
    height: clamp(12.625rem, 25vw, 15.5rem);
    background: var(--primary);
    opacity: 1;
    border-radius: 1rem;
    position: absolute;
    display: block;
    /* 16px -20px */
    /* wrapped in a calc function to get a negative clamp value */
    bottom: calc(clamp(.5rem, 2.09vw, 1.25rem) * -1);
    left: calc(clamp(.5rem, 2.09vw, 1.25rem) * -1);
    z-index: -1;
  }
  #sbs-68-service-areas .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 1rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 64rem) {
  #sbs-68-service-areas .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: flex-start;
    /* 60px - 128px */
    gap: 4rem;
  }
  #sbs-68-service-areas .cs-picture {
    /* 328px - 502px */
    width: clamp(29.56rem, 57.5vw, 52rem);
    /* 440px - 520px */
    height: clamp(27.5rem, 40vw, 32.5rem);
    /* 16px - 20px */
    margin: 0 clamp(1rem, 5vw, 1.25rem) 0 0;
    flex: none;
    /* sends it to the right in the 2nd position */
    order: 1;
  }
  #sbs-68-service-areas .cs-content {
    width: 45%;
    order: 2;
  }
}