/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-964 {
    padding: var(--sectionPadding);
    background-size: auto;
    background-position: center;
    background-repeat: repeat;
    position: relative;
    z-index: 1;
  }
  #services-964 .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);
  }
  #services-964 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 50rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #services-964 .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
  }
  #services-964 .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
  }
  #services-964 .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #services-964 .cs-title,
  #services-964 .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: 100%;
  }
  #services-964 .cs-card-group {
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    row-gap: 1.875rem;
  }
  #services-964 .cs-item {
    width: 100%;
    text-align: left;
    list-style: none;
    /* margin top value to match the negative margin value of the .cs-icon-wrapper */
    margin: 2.75rem 0 0 0;
    /* 24px - 64px bottom */
    /* 24px - 40px left & right */
    padding: 0 clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 6vw, 4rem);
    background-color: #F7F3EE;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    grid-column: span 12;
    grid-row: span 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    z-index: 1;
  }
  #services-964 .cs-item:hover .cs-h3 {
    color: var(--bodyTextColorWhite);
  }
  #services-964 .cs-item:hover .cs-item-text {
    color: var(--bodyTextColorWhite);
    opacity: 0.9;
  }
  #services-964 .cs-item:hover .cs-background {
    opacity: 1;
  }
  #services-964 .cs-icon-wrapper {
    width: 5.5rem;
    height: 5.5rem;
    margin: -2.75rem auto 2rem 0;
    background-color: var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    left: calc(clamp(1.5rem, 4vw, 2.5rem)*-1);
  }
  #services-964 .cs-icon {
    width: 2.5rem;
    height: auto;
  }
  #services-964 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: bold;
    text-align: inherit;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
  }
  #services-964 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    max-width: 18.75rem;
    margin: 0 0 2rem 0;
    padding: 0;
    color: var(--bodyTextColor);
  }
  #services-964 .cs-link {
    text-decoration: none;
    font-size: 0.8rem;
    line-height: 1.2em;
    font-weight: bold;
    margin: 0;
    padding: 0;
    color: var(--primary);
    position: relative;
    transition: color 0.3s;
  }
  #services-964 .cs-link:hover {
    color: #fff;
  }
  #services-964 .cs-link:before {
    /* underline */
    content: '';
    width: 100%;
    height: 1px;
    background: currentColor;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0rem;
    left: 0;
  }
  #services-964 .cs-background {
    width: 100%;
    height: 100%;
    opacity: 0;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: opacity 0.3s;
  }
  #services-964 .cs-background:before {
    /* background color overlay */
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #1A1A1A;
    opacity: 0.7;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #services-964 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
  }
  #services-964 .cs-waves {
    width: 100%;
    height: 13.875rem;
    background-color: var(--primary);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
  }
  #services-964 .cs-waves img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-964 .cs-container {
    max-width: 80rem;
  }
  #services-964 .cs-card-group {
    column-gap: 1.875rem;
  }
  #services-964 .cs-item {
    grid-column: span 6;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #services-964 .cs-item {
    grid-column: span 4;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #services-964 {
    background-color: #1a1a1a;
    background-size: auto;
    background-position: center;
    background-repeat: repeat;
  }
  body.dark-mode #services-964 .cs-title,
  body.dark-mode #services-964 .cs-text,
  body.dark-mode #services-964 .cs-h3,
  body.dark-mode #services-964 .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #services-964 .cs-text,
  body.dark-mode #services-964 .cs-item-text {
    opacity: 0.9;
  }
  body.dark-mode #services-964 .cs-item {
    background-color: var(--medium);
  }
}
/*-- -------------------------- -->
<---        Why Choose us        -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #why-choose-223 {
    padding: var(--sectionPadding);
    background-color: #FFF;
  }
  #why-choose-223 .cs-container {
    width: 100%;
    /* changes to 1280px on tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #why-choose-223 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 39rem;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #why-choose-223 .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
  }
  #why-choose-223 .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
  }
  #why-choose-223 .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #why-choose-223 .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;
  }
  #why-choose-223 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #why-choose-223 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1.25rem;
  }
  #why-choose-223 .cs-item {
    text-align: left;
    list-style: none;
    width: 100%;
    /* 32px - 44px top & bottom, 24px - 32px left & right */
    padding: clamp(2rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 2rem);
    margin: 0;
    border: 1.5px solid var(--primary);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    /* 16px - 32px */
    column-gap: clamp(1rem, 2vw, 2rem);
    /* 24px - 28px */
    row-gap: clamp(1.5rem, 1.5vw, 1.75rem);
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
    transition: background-color 0.3s;
  }
  #why-choose-223 .cs-item:hover {
    background-color: var(--primary);
  }
  #why-choose-223 .cs-item:hover .cs-icon {
    filter: grayscale(1) brightness(1000%);
  }
  #why-choose-223 .cs-item:hover .cs-h3,
  #why-choose-223 .cs-item:hover .cs-item-text {
    color: #fff;
  }
  #why-choose-223 .cs-icon {
    /* 70px - 80px */
    width: clamp(4.375rem, 7vw, 5rem);
    height: auto;
    margin: 0;
    display: block;
  }
  #why-choose-223 .cs-h3 {
    /* 25px - 31px */
    font-size: clamp(1.5625rem, 2vw, 1.9375rem);
    line-height: 1.2em;
    font-weight: 700;
    text-align: inherit;
    width: 55%;
    margin: 0;
    color: var(--headerColor);
    transition: color 0.3s;
  }
  #why-choose-223 .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    margin: auto 0 0 0;
    color: var(--bodyTextColor);
    transition: color 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #why-choose-223 .cs-container {
    max-width: 80rem;
  }
  #why-choose-223 .cs-content {
    width: 70%;
  }
  #why-choose-223 .cs-card-group {
    /* switch to grid since there's no chance of adding or removing cards in this design.  We can be more set and rigid in our layout of this section and use grid for better spacing */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    /* if different boxes are different heights, this makes them all the same height so the grid is always even */
    align-items: stretch;
  }
  #why-choose-223 .cs-item {
    grid-column: span 1;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #why-choose-223 .cs-container {
    flex-direction: row;
    justify-content: space-between;
  }
  #why-choose-223 .cs-card-group {
    width: 60%;
    max-width: 47.375rem;
    /* prevents flexbox from squishing it */
    flex: none;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #why-choose-223 {
    background-color: #1a1a1a;
  }
  body.dark-mode #why-choose-223 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #why-choose-223 .cs-title,
  body.dark-mode #why-choose-223 .cs-text,
  body.dark-mode #why-choose-223 .cs-h3,
  body.dark-mode #why-choose-223 .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #why-choose-223 .cs-icon {
    filter: grayscale(1) brightness(1000%);
  }
}
/*-- -------------------------- -->
<---       About Us             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-945 {
    padding: var(--sectionPadding);
    /* clips anything overflowing */
    overflow: hidden;
    position: relative;
  }
  #sbs-945 .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);
  }
  #sbs-945 .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;
  }
  #sbs-945 .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
  }
  #sbs-945 .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
  }
  #sbs-945 .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #sbs-945 .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-945 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-945 .cs-contact-group {
    width: 100%;
    margin-bottom: 2rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  #sbs-945 .cs-link {
    text-decoration: none;
    padding-right: 1.875rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    position: relative;
  }
  #sbs-945 .cs-link:hover:before {
    width: 100%;
    height: 3.5em;
  }
  #sbs-945 .cs-link:hover .cs-wrapper {
    transform: scale(1.2);
  }
  #sbs-945 .cs-link:hover .cs-icon {
    transform: translateX(7/16rem);
  }
  #sbs-945 .cs-link:before {
    /* light green circle that animates on hover */
    content: '';
    width: 3rem;
    height: 3rem;
    background: #F6F3EE;
    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;
  }
  #sbs-945 .cs-wrapper {
    width: 3rem;
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
    transition: transform 0.3s;
  }
  #sbs-945 .cs-icon {
    width: 1.5rem;
    height: auto;
    display: block;
    transition: transform 0.3s;
  }
  #sbs-945 .cs-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  #sbs-945 .cs-header {
    font-size: 1rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: block;
  }
  #sbs-945 .cs-link-content {
    font-size: 1rem;
    line-height: 1.2em;
    font-weight: 400;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
  }
  #sbs-945 .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.24vw, .844em);
    /* everything inside this box is in ems so we can scale it all down proportionally with a font size */
    width: 40.625em;
    height: 42.9375em;
    position: relative;
    z-index: 1;
  }
  #sbs-945 .cs-picture {
    /* clips the image to match the border radius of the cs-picture */
    overflow: hidden;
    display: block;
    position: absolute;
  }
  #sbs-945 .cs-picture img {
    width: 100%;
    height: 100%;
    /* makes it act like a background image */
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #sbs-945 .cs-picture1 {
    width: 21.8125em;
    height: 36.875em;
    top: 3.0625em;
    left: 0;
  }
  #sbs-945 .cs-picture2 {
    width: 17.5625em;
    height: 24.1875em;
    top: 0;
    right: 0;
  }
  #sbs-945 .cs-picture3 {
    width: 17.5625em;
    height: 17.5em;
    bottom: 0;
    right: 0;
  }
  #sbs-945 .cs-seal {
    width: 9.375em;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-30%, -40%);
  }
  #sbs-945 .cs-floater {
    display: none;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-945 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  #sbs-945 .cs-image-group {
    /* set to inherit at Large Desktop */
    font-size: min(1.15vw, 1em);
    margin: 0;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #sbs-945 .cs-content {
    width: 51%;
  }
}
/* Large Desktop - 1800px */
@media only screen and (min-width: 112.5rem) {
  #sbs-945 .cs-floater {
    width: 27.8125rem;
    height: auto;
    display: block;
    position: absolute;
    right: 0;
    top: 1.25rem;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbs-945 .cs-title,
  body.dark-mode #sbs-945 .cs-text,
  body.dark-mode #sbs-945 .cs-header,
  body.dark-mode #sbs-945 .cs-link-content {
    color: var(--bodyTextColorWhite);
    transition: color 0.3s;
  }
  body.dark-mode #sbs-945 .cs-text {
    opacity: 0.8;
  }
  body.dark-mode #sbs-945 .cs-link:before {
    background-color: var(--medium);
  }
  body.dark-mode #sbs-945 .cs-icon {
    /* makes icons that are not black turn white */
    filter: grayscale(1) brightness(1000%);
  }
  body.dark-mode #sbs-945 .cs-graphic1,
  body.dark-mode #sbs-945 .cs-graphic2 {
    filter: brightness(50%);
  }
}
/* Mobile - 360px */
/* you can copy and paste these styles into the section CSS where you placed the #list-1113 HTML, or you can place it in your global stylesheet so you can reuse the HTML in any Side By Side section on your site. That way when you make changes to it, it will also change everywhere in the site */
@media only screen and (min-width: 0rem) {
  #list-1113 {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  #list-1113 .cs-li {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  #list-1113 .cs-h3 {
    /* 20px - 25px */
    font-size: 1.25rem, 3vw, 1.5625rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0 0 0.75rem;
  }
  #list-1113 .cs-li-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 39.375rem;
    margin: 0;
    color: var(--bodyTextColor);
  }
}
/* Dark Mode, copy and paste only the styles inside the #list-1113 brackets into your section's dark mode media query */
@media only screen and (min-width: 0rem) {
  body.dark-mode #list-1113 .cs-li-text,
  body.dark-mode #list-1113 .cs-h3 {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #list-1113 .cs-li-text {
    opacity: 0.8;
  }
}
/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-r-868 {
    padding: var(--sectionPadding);
    position: relative;
    background-color: #F6F3EE;
  }
  #sbs-r-868 .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);
  }
  #sbs-r-868 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 35.625rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #sbs-r-868 .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
  }
  #sbs-r-868 .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 */
    /* 23 characters wide including spaces */
    max-width: 23ch;
  }
  #sbs-r-868 .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-868 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-r-868 .cs-image-group {
    width: 100%;
    max-width: 39.375rem;
    /* 400px - 775px */
    height: clamp(25rem, 69vw, 48.4375rem);
    /* 100px - 200px */
    box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.16);
    /* clips the corners of the children around the border radius */
    overflow: hidden;
    position: relative;
  }
  #sbs-r-868 .cs-background {
    width: 100%;
    height: 100%;
    /* makes it cover the parent dimensions */
    object-fit: cover;
    display: block;
  }
  #sbs-r-868 .cs-background img {
    width: 100%;
    height: 100%;
    /* makes it cover the parent like a backgorund image */
    object-fit: cover;
    display: block;
  }
  #sbs-r-868 .cs-box {
    text-align: center;
    /* 40px - 67px top & bottom */
    /* 20px - 28px left & right */
    padding: clamp(2.5rem, 5vw, 4.1875rem) clamp(1.25rem, 2vw, 1.75rem);
    background-color: #fff;
    /* 48px - 80px */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: absolute;
    /* 16px - 20px */
    right: clamp(1rem, 2vw, 1.25rem);
    /* 16px - 20px */
    bottom: clamp(1rem, 2vw, 1.25rem);
  }
  #sbs-r-868 .cs-number {
    /* 31px - 39px */
    font-size: clamp(1.9375rem, 3vw, 2.4375rem);
    line-height: 1.2em;
    font-weight: 900;
    text-align: inherit;
    margin: 0;
    color: var(--primary);
  }
  #sbs-r-868 .cs-desc {
    font-size: 1rem;
    line-height: 1.2em;
    text-align: inherit;
    font-weight: 700;
    width: 7.6875rem;
    margin: 0;
    color: var(--bodyTextColor);
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-r-868 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
  }
  #sbs-r-868 .cs-content {
    /* sends it to the left in the 1st position */
    order: -1;
  }
  #sbs-r-868 .cs-box {
    right: auto;
    left: 1.25rem;
    /* 48px - 80px */
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbs-r-868 {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #sbs-r-868 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #sbs-r-868 .cs-title,
  body.dark-mode #sbs-r-868 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbs-r-868 .cs-text {
    opacity: 0.8;
  }
  body.dark-mode #sbs-r-868 .cs-floater {
    opacity: 0.5;
  }
}
/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-865 {
    padding: var(--sectionPadding);
    position: relative;
  }
  #sbs-865 .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);
  }
  #sbs-865 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 35.625rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #sbs-865 .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
  }
  #sbs-865 .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
  }
  #sbs-865 .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #sbs-865 .cs-title {
    /* 23 characters wide including spaces */
    max-width: 23ch;
  }
  #sbs-865 .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-865 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-865 .cs-image-group {
    width: 100%;
    max-width: 39.375rem;
    /* 400px - 775px */
    height: clamp(25rem, 69vw, 48.4375rem);
    /* 100px - 200px */
    box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.16);
    /* clips the corners of the children around the border radius */
    overflow: hidden;
    position: relative;
  }
  #sbs-865 .cs-background {
    width: 100%;
    height: 100%;
    /* makes it cover the parent dimensions */
    object-fit: cover;
    display: block;
  }
  #sbs-865 .cs-background img {
    width: 100%;
    height: 100%;
    /* makes it cover the parent like a backgorund image */
    object-fit: cover;
    display: block;
  }
  #sbs-865 .cs-box {
    text-align: center;
    /* 40px - 67px top & bottom */
    /* 20px - 28px left & right */
    padding: clamp(2.5rem, 5vw, 4.1875rem) clamp(1.25rem, 2vw, 1.75rem);
    background-color: #fff;
    /* 48px - 80px */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: absolute;
    /* 16px - 20px */
    right: clamp(1rem, 2vw, 1.25rem);
    /* 16px - 20px */
    bottom: clamp(1rem, 2vw, 1.25rem);
  }
  #sbs-865 .cs-number {
    /* 31px - 39px */
    font-size: clamp(1.9375rem, 3vw, 2.4375rem);
    line-height: 1.2em;
    font-weight: 900;
    text-align: inherit;
    margin: 0;
    color: var(--primary);
  }
  #sbs-865 .cs-desc {
    font-size: 1rem;
    line-height: 1.2em;
    text-align: inherit;
    font-weight: 700;
    width: 7.6875rem;
    margin: 0;
    color: var(--bodyTextColor);
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-865 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbs-865 {
    background-color: #1a1a1a;
  }
  body.dark-mode #sbs-865 .cs-topper {
    color: var(--primary);
  }
  body.dark-mode #sbs-865 .cs-title,
  body.dark-mode #sbs-865 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbs-865 .cs-text {
    opacity: 0.8;
  }
  body.dark-mode #sbs-865 .cs-floater {
    opacity: 0.5;
  }
}
/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #faq-351 {
    padding: var(--sectionPadding);
    background: #F6F3EE;
  }
  #faq-351 .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 */
    row-gap: clamp(3rem, 6vw, 4rem);
  }
  #faq-351 .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;
  }
  #faq-351 .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
  }
  #faq-351 .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
  }
  #faq-351 .cs-title {
    /* 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 second cs-text is a section specific override that stays inside this stitch */
    margin: 0;
  }
  #faq-351 .cs-faq-group {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  #faq-351 .cs-faq-item {
    list-style: none;
    width: 100%;
    border-bottom: 1px solid #E8E8E8;
    transition: border-bottom 0.3s;
  }
  #faq-351 .cs-faq-item.active {
    border-color: var(--primaryLight);
  }
  #faq-351 .cs-faq-item.active .cs-button {
    color: var(--primaryLight);
  }
  #faq-351 .cs-faq-item.active .cs-button:before {
    background-color: var(--primaryLight);
    transform: rotate(315deg);
  }
  #faq-351 .cs-faq-item.active .cs-button:after {
    background-color: var(--primaryLight);
    transform: rotate(-315deg);
  }
  #faq-351 .cs-faq-item.active .cs-item-p {
    height: auto;
    /* 20px - 24px bottom */
    /* 16px - 24px left & right */
    padding: 0 clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 1.3vw, 1.5rem);
    opacity: 1;
  }
  #faq-351 .cs-button {
    font-size: 1rem;
    line-height: 1.2em;
    text-align: left;
    font-weight: bold;
    /* 16px - 20px */
    padding: clamp(1rem, 1.3vw, 1.25rem);
    border: none;
    background: transparent;
    color: var(--headerColor);
    display: block;
    width: 100%;
    position: relative;
    transition: background-color 0.3s, color 0.3s;
  }
  #faq-351 .cs-button:hover {
    cursor: pointer;
  }
  #faq-351 .cs-button:before {
    /* left line */
    content: '';
    width: 0.5rem;
    height: 0.125rem;
    background-color: var(--headerColor);
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 45%;
    right: 1.5rem;
    transform: rotate(45deg);
    /* animate the transform from the left side of the x axis, and the center of the y */
    transform-origin: left center;
    transition: transform 0.5s;
  }
  #faq-351 .cs-button:after {
    /* right line */
    content: '';
    width: 0.5rem;
    height: 0.125rem;
    background-color: var(--headerColor);
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 45%;
    right: 1.3125rem;
    transform: rotate(-45deg);
    /* animate the transform from the right side of the x axis, and the center of the y */
    transform-origin: right center;
    transition: transform 0.5s;
  }
  #faq-351 .cs-button-text {
    width: 80%;
    display: block;
  }
  #faq-351 .cs-item-p {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    width: 90%;
    height: 0;
    margin: 0;
    /* 16px - 24px */
    padding: 0 clamp(1rem, 2vw, 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: 64rem) {
  #faq-351 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    /* push everything to the top */
    align-items: flex-start;
    flex-wrap: wrap;
  }
  #faq-351 .cs-content {
    width: 100%;
  }
  #faq-351 .cs-faq-group {
    width: 48%;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #faq-351 {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #faq-351 .cs-picture {
    border-color: var(--accent);
  }
  body.dark-mode #faq-351 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #faq-351 .cs-title,
  body.dark-mode #faq-351 .cs-item-p {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-351 .cs-faq-item {
    border-color: rgba(255, 255, 255, 0.2);
  }
  body.dark-mode #faq-351 .cs-faq-item.active {
    border-color: var(--primaryLight);
  }
  body.dark-mode #faq-351 .cs-faq-item.active .cs-button {
    color: var(--primaryLight);
  }
  body.dark-mode #faq-351 .cs-faq-item.active .cs-button:before,
  body.dark-mode #faq-351 .cs-faq-item.active .cs-button:after {
    background-color: var(--primaryLight);
  }
  body.dark-mode #faq-351 .cs-button {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-351 .cs-button:before,
  body.dark-mode #faq-351 .cs-button:after {
    background-color: var(--bodyTextColorWhite);
  }
}
/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-607 {
    padding: var(--sectionPadding);
  }
  #reviews-607 .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);
  }
  #reviews-607 .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-607 .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
  }
  #reviews-607 .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
  }
  #reviews-607 .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #reviews-607 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
  }
  #reviews-607 .cs-item {
    list-style: none;
    width: 100%;
    margin: 0;
    /* 32px - 48px top & bottom */
    /* 16px - 32px left & right */
    padding: clamp(2rem, 7vw, 3rem) clamp(1rem, 4vw, 2rem);
    /* makes padding not affect height and width */
    box-sizing: border-box;
    background-color: #F6F3EE;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #reviews-607 .cs-icon {
    /* 30px - 40px */
    width: clamp(1.875rem, 4vw, 2.5rem);
    height: auto;
    margin: 0 0 2rem 0;
    display: block;
  }
  #reviews-607 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 4vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    margin: 0 0 1.5rem 0;
    color: var(--headerColor);
  }
  #reviews-607 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 4vw, 1rem);
    line-height: 1.5em;
    max-width: 24.25rem;
    margin: 0 0 3rem 0;
    color: var(--bodyTextColor);
  }
  #reviews-607 .cs-name {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 500;
    margin: auto 0 0 0;
    color: var(--headerColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    position: relative;
  }
  #reviews-607 .cs-name:before {
    content: '';
    width: 0.5rem;
    height: 1px;
    background: currentColor;
    display: block;
    position: relative;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #reviews-607 .cs-container {
    max-width: 80rem;
  }
  #reviews-607 .cs-card-group {
    /* we went grid on tablet so that we can have an even spaced section with this design. Flexbox has a hard time making this type of design work with even gaps. */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  #reviews-607 .cs-item {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  #reviews-607 .cs-item:nth-of-type(2) {
    grid-column: 2/3;
    grid-row: 1/2;
  }
  #reviews-607 .cs-item:nth-of-type(3) {
    grid-column: 1/3;
    grid-row: 2/3;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #reviews-607 .cs-card-group {
    /* went back to flexbox for an easier transition to this horizontal layout. We don't have to re-target each cs-item to reset its grid positioning, we can just revert to flexbox and make the layout in less code and hassle */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
  }
  #reviews-607 .cs-item {
    width: 100%;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #reviews-607 {
    background-color: #1a1a1a;
  }
  body.dark-mode #reviews-607 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #reviews-607 .cs-title,
  body.dark-mode #reviews-607 .cs-text,
  body.dark-mode #reviews-607 .cs-h3,
  body.dark-mode #reviews-607 .cs-name,
  body.dark-mode #reviews-607 .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #reviews-607 .cs-text,
  body.dark-mode #reviews-607 .cs-item-text {
    opacity: 0.8;
  }
  body.dark-mode #reviews-607 .cs-item {
    background-color: var(--medium);
  }
}
/*-- -------------------------- -->
<---         Services           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-880 {
    /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
    font-family: 'Roboto', 'Arial', sans-serif;
    background-color: #F6F3EE;
    padding: var(--sectionPadding);
  }
  #services-880 .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);
  }
  #services-880 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 32.625rem;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #services-880 .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
  }
  #services-880 .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
  }
  #services-880 .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #services-880 .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 */
    /* max width of 18 characters, includes spaces between words */
    max-width: 18ch;
  }
  #services-880 .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;
  }
  #services-880 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #services-880 .cs-card-group {
    width: 100%;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }
  #services-880 .cs-item {
    text-align: center;
    list-style: none;
    overflow: hidden;
    background-color: #F6F3EE;
    grid-column: span 4;
    position: relative;
    z-index: 1;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    transition: box-shadow 0.3s, transform 0.3s;
  }
  #services-880 .cs-item:hover {
    box-shadow: rgba(107, 112, 118, 0.2) 0px 8px 24px;
  }
  #services-880 .cs-item:hover .cs-picture img {
    opacity: 0.3;
    transform: scale(1.1);
  }
  #services-880 .cs-item:hover .cs-h3 {
    color: var(--primaryLight);
  }
  #services-880 .cs-link {
    text-decoration: none;
    padding: 0 0 1.25rem 0;
    display: block;
  }
  #services-880 .cs-picture {
    width: 100%;
    height: 12.5rem;
    margin-bottom: 1.25rem;
    background-color: var(--primaryLight);
    /* clips the img tag corners */
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 10;
  }
  #services-880 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.6s, opacity 0.3s;
  }
  #services-880 .cs-h3 {
    font-size: 1.25rem;
    text-align: inherit;
    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-880 .cs-item-text {
    /* 14px - 16px  */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    text-align: inherit;
    line-height: 1.5em;
    color: var(--bodyTextColor);
    margin: 0;
    padding: 0 1.25rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-880 .cs-container {
    max-width: 80rem;
  }
  #services-880 .cs-item {
    grid-column: span 2;
  }
}
/* Desktop - 1200px */
@media only screen and (min-width: 75rem) {
  #services-880 .cs-container {
    flex-direction: row;
    justify-content: space-between;
  }
  #services-880 .cs-card-group {
    width: 50%;
    max-width: 39.375rem;
    /* offsets by the same amount the cards are translated */
    margin-bottom: 3.75rem;
    grid-template-columns: repeat(2, 1fr);
  }
  #services-880 .cs-item {
    grid-column: span 1;
  }
  #services-880 .cs-item:nth-of-type(1),
  #services-880 .cs-item:nth-of-type(3) {
    transform: translateY(60/16rem);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #services-880 {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #services-880 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #services-880 .cs-title,
  body.dark-mode #services-880 .cs-text,
  body.dark-mode #services-880 .cs-h3,
  body.dark-mode #services-880 .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #services-880 .cs-text,
  body.dark-mode #services-880 .cs-item-text {
    opacity: 0.8;
  }
  body.dark-mode #services-880 .cs-item {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #services-880 .cs-item:before {
    opacity: 0.3;
  }
}