/*-- -------------------------- -->
<---         Services           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-296 {
    padding: var(--sectionPadding);
  }
  #services-296 .cs-container {
    width: 100%;
    /* changes to 1440px on desktop */
    max-width: 43.75rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-296 .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-296 .cs-title {
    max-width: 30ch;
  }
  #services-296 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 1.5vw, 1.25rem);
  }
  #services-296 .cs-item {
    list-style: none;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 2rem;
    background-color: #F7F7F7;
    /* clips image corners */
    overflow: hidden;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    transition: background-color 0.3s;
  }
  #services-296 .cs-item:hover {
    cursor: pointer;
  }
  #services-296 .cs-item:hover .cs-image {
    opacity: 1;
  }
  #services-296 .cs-item:hover .cs-image img {
    transform: scale(1.1);
  }
  #services-296 .cs-item:hover .cs-icon {
    /* turns it white */
    filter: grayscale(1) brightness(1000%);
  }
  #services-296 .cs-item:hover .cs-h3,
  #services-296 .cs-item:hover .cs-item-text {
    color: #fff;
  }
  #services-296 .cs-image {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    z-index: -1;
    background-color: var(--primary);
    transition: opacity .3s;
  }
  #services-296 .cs-image img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: .2;
    object-fit: cover;
    transition: transform .6s;
  }
  #services-296 .cs-link {
    text-decoration: none;
  }
  #services-296 .cs-icon {
    width: auto;
    height: 3rem;
    margin-bottom: 1.5rem;
    display: block;
  }
  #services-296 .cs-icon path {
    transition: fill .3s;
  }
  #services-296 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2vw, 1.5625rem);
    line-height: 1.2em;
    margin: 0;
    margin-bottom: 1rem;
    color: var(--headerColor);
    transition: color .3s;
  }
  #services-296 .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    transition: color .3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-296 .cs-card-group {
    justify-content: space-between;
    /* makes sure every box "stetches" to be the same height as the tallest box */
    align-items: stretch;
    flex-direction: row;
    flex-wrap: wrap;
  }
  #services-296 .cs-item {
    width: 48.6%;
  }
}
/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #services-296 .cs-container {
    max-width: 90rem;
  }
  #services-296 .cs-card-group {
    justify-content: center;
  }
  #services-296 .cs-item {
    /* we do this so it's stackable. You can add new 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: clamp(23.84%, 22.5vw, 23.95%);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #services-296 .cs-title,
  body.dark-mode #services-296 .cs-text,
  body.dark-mode #services-296 .cs-h3,
  body.dark-mode #services-296 .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #services-296 .cs-item {
    background-color: var(--accent);
  }
  body.dark-mode #services-296 .cs-item:hover {
    background-color: var(--primary);
  }
  body.dark-mode #services-296 .cs-icon {
    /* turns it white */
    filter: grayscale(1) brightness(1000%);
  }
}
/*-- -------------------------- -->
<---     Exterior Painting      -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-317 {
    padding: var(--sectionPadding);
    background-color: #f7f7f7;
  }
  #sbs-317 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #sbs-317 .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-317 .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-317 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-317 .cs-picture {
    /* set font size to scale with view width, stopping at 68% the value of em */
    font-size: min(2.16vw, .68em);
    width: 32.5em;
    height: 42.5em;
    /* margin top and bottom to match the exact amount the grey square overflows the parent for consistent spacing */
    margin: 3em 0;
    position: relative;
    display: block;
  }
  #sbs-317 .cs-picture:before {
    /* grey box */
    content: '';
    width: 100%;
    height: 100%;
    background: #efecec;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    transform: rotate(15deg);
  }
  #sbs-317 .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-317 .cs-container {
    max-width: 80rem;
    /* set to horizontal arrangement */
    flex-direction: row;
    justify-content: center;
    /* 77px - 160px */
    gap: clamp(4.8125rem, 11vw, 10rem);
  }
  #sbs-317 .cs-content {
    text-align: left;
    align-items: flex-start;
  }
  #sbs-317 .cs-picture {
    font-size: min(1.1vw, 1em);
    margin: 3.5em 0 3.5em 5em;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #sbs-317 .cs-circles {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  #sbs-317 .cs-ring-wrapper {
    /* breaks the children out of the container.  They can now be arrnaged as if thy are all children of the cs-circle */
    display: contents;
  }
  #sbs-317 .cs-ring {
    /* make the ring position absolute so it can sit on top of the other elements that are centered relatively in the cs-circle */
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
  }
  #sbs-317 .cs-number {
    /* make the number relative positioning so it and the cs-desc can position themselves around each other */
    position: relative;
    top: auto;
    left: auto;
    transform: none;
  }
  #sbs-317 .cs-desc {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbs-317 {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #sbs-317 .cs-picture:before,
  body.dark-mode #sbs-317 .cs-picture:after {
    background: var(--accent);
  }
  body.dark-mode #sbs-317 .cs-title,
  body.dark-mode #sbs-317 .cs-text,
  body.dark-mode #sbs-317 .cs-call,
  body.dark-mode #sbs-317 .cs-number,
  body.dark-mode #sbs-317 .cs-desc {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbs-317 .cs-text {
    opacity: .8;
  }
}
/*-- -------------------------- -->
<---        Why Choose          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #process-688 {
    padding: var(--sectionPadding);
    /* Centers button */
    text-align: center;
    position: relative;
    z-index: 1;
  }
  #process-688 .cs-container {
    width: 100%;
    max-width: 90rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #process-688 .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;
  }
  #process-688 .cs-title,
  #process-688 .cs-text,
  #process-688 .cs-topper {
    color: var(--bodyTextColorWhite);
  }
  #process-688 .cs-card-group {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    column-gap: 1.25rem;
    row-gap: 2.5rem;
  }
  #process-688 .cs-item {
    list-style: none;
    width: 100%;
    max-width: 25.8125rem;
  }
  #process-688 .cs-picture {
    width: 6.25rem;
    height: 6.25rem;
    margin: auto;
    margin-bottom: 1.5rem;
    background-color: #FDFAF8;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #process-688 .cs-icon {
    width: auto;
    height: 3.125rem;
    display: block;
  }
  #process-688 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 3vw, 1.5625rem);
    font-weight: 700;
    margin: 0;
    margin-bottom: 0.75rem;
    color: #fff;
  }
  #process-688 .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #process-688 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #process-688 .cs-background:before {
    /* background color overlay */
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: .83;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #process-688 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #process-688 .cs-card-group {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    align-items: stretch;
  }
  #process-688 .cs-item {
    width: 48%;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #process-688 .cs-item {
    width: clamp(23.45%, 22vw, 23.8%);
  }
}
/* Desktop - 1500px */
@media only screen and (min-width: 93.75rem) {
  #process-688 .cs-background {
    background: url("/assets/images/why.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
  #process-688 .cs-background img {
    display: none;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #process-688 {
    background-color: #2d3b35;
  }
}
/*-- -------------------------- -->
<---       Extra Services       -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-345 {
    /* centers the button */
    text-align: center;
    padding: var(--sectionPadding);
  }
  #services-345 .cs-container {
    width: 100%;
    max-width: 90rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-345 .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-345 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #services-345 .cs-item {
    list-style: none;
    width: 100%;
    max-width: 31.25rem;
    /* 16px - 32px */
    padding: clamp(1rem, 2vw, 2rem);
    border: 1px solid #E8E8E8;
    box-sizing: border-box;
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
  }
  #services-345 .cs-item:hover {
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 50px;
    transform: translateY(-0.4375rem);
  }
  #services-345 .cs-item:hover .cs-picture:before {
    width: 100%;
    height: 100%;
    opacity: 1;
  }
  #services-345 .cs-link {
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  #services-345 .cs-picture {
    width: 5rem;
    height: 5rem;
    margin: 0;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f7f7f7;
    position: relative;
    z-index: 1;
  }
  #services-345 .cs-icon {
    height: 2.5rem;
    width: auto;
  }
  #services-345 .cs-h3 {
    font-size: 1.25rem;
    font-weight: 900;
    text-align: center;
    line-height: 1.2em;
    margin: 0;
    margin-bottom: 0.75rem;
    color: var(--headerColor);
    transition: color .3s;
  }
  #services-345 .cs-item-text {
    font-size: 1rem;
    text-align: center;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    transition: color .3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-345 .cs-card-group {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
  }
  #services-345 .cs-item {
    width: 48.9%;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #services-345 .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 cards, they don't stay centered, they align with their grid lines. This way its more FLEX-ible*/
    width: clamp(23.47%, 22vw, 23.955%);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #services-345 .cs-title,
  body.dark-mode #services-345 .cs-text,
  body.dark-mode #services-345 .cs-h3,
  body.dark-mode #services-345 .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #services-345 .cs-picture {
    background-color: var(--medium);
  }
  body.dark-mode #services-345 .cs-item {
    border-color: rgba(255, 255, 255, 0.3);
    position: relative;
    transition: background-color 0.3s, transform 0.3s;
  }
  body.dark-mode #services-345 .cs-item:hover {
    background-color: var(--accent);
  }
  body.dark-mode #services-345 .cs-item:hover:before {
    opacity: 1;
  }
  body.dark-mode #services-345 .cs-item:hover .cs-h3,
  body.dark-mode #services-345 .cs-item:hover .cs-item-text {
    color: #fff;
  }
  body.dark-mode #services-345 .cs-icon {
    filter: brightness(180%);
  }
}
/*-- -------------------------- -->
<---   Kitchen and Bathroom     -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbsr-298 {
    padding: var(--sectionPadding);
    background-color: #f7f7f7;
  }
  #sbsr-298 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  #sbsr-298 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 32.625rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #sbsr-298 .cs-text {
    /* Override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This selector is a section specific override that stays inside this stitch */
    margin-bottom: 1rem;
  }
  #sbsr-298 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbsr-298 .cs-link {
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--primary);
  }
  #sbsr-298 .cs-image-group {
    width: 100%;
    max-width: 34.375rem;
    /* 78px - 108px */
    margin: 0 auto clamp(4.875rem, 16.5vw, 6.75rem);
    position: relative;
    display: block;
    /* width divided by height */
    aspect-ratio: 0.90358127;
  }
  #sbsr-298 .cs-picture {
    /* big background image */
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
  }
  #sbsr-298 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #sbsr-298 .cs-box {
    /* 204px - 326px & changes at desktop */
    width: clamp(12.75rem, 50vw, 20.375rem);
    height: clamp(12.75rem, 50vw, 20.375rem);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    left: 50%;
    /* 38px - 60px - wrapped in a calc function to make clamp values negative */
    bottom: calc(clamp(2.375rem, 7.9vw, 3.75rem) *-1);
    transform: translateX(-50%);
    z-index: 10;
  }
  #sbsr-298 .cs-box-picture {
    /* Background image for cs-box */
    width: 100%;
    height: 100%;
    background-color: #1a1a1a;
    /* clips img corners and bg corners */
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    z-index: -1;
  }
  #sbsr-298 .cs-box-picture img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: .75;
    height: 100%;
    width: 100%;
    object-fit: cover;
    mix-blend-mode: lighten;
  }
  #sbsr-298 .cs-number {
    /* 75px - 100px */
    font-size: clamp(4.6875rem, 8vw, 6.25rem);
    line-height: 1em;
    font-weight: 900;
    margin-bottom: 0.5rem;
    color: var(--headerColor);
    /* creates the transparent clipping text */
    mix-blend-mode: screen;
    display: block;
    z-index: 10;
  }
  #sbsr-298 .cs-number:before {
    /* opaque white box - For mix-blend-mode to work, we need the 
                   white box inside the .cs-number, so we use a pseudo element.
                   We DONT add a position to the cs-number so the pseudo positions
                   itself relative to the .cs-box, which has posiiton relative. This
                   allows us to center to .cs-number pseudo inside the .cs-box */
    content: '';
    /* 184px - 294px & changes at desktop */
    width: clamp(11.5rem, 45vw, 18.375rem);
    height: clamp(11.5rem, 45vw, 18.375rem);
    opacity: 1;
    background-color: #fff;
    position: absolute;
    display: block;
    /* these next 3 properties are an old school way to center an absolutely
                   positioned element inside a relative position parent */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
  }
  #sbsr-298 .cs-desc {
    /* 16px - 25px */
    font-size: clamp(1rem, 4vw, 1.5625rem);
    font-weight: 700;
    line-height: 1.2em;
    text-transform: lowercase;
    text-align: center;
    width: 80%;
    color: var(--headerColor);
    position: relative;
    z-index: 10;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbsr-298 {
    /* aligns the button */
    text-align: left;
  }
  #sbsr-298 .cs-container {
    max-width: 80rem;
    /* set to horizontal arrangement */
    flex-direction: row;
    justify-content: space-between;
    gap: 10rem;
  }
  #sbsr-298 .cs-content {
    text-align: left;
    align-items: flex-start;
  }
  #sbsr-298 .cs-image-group {
    width: 40vw;
    max-width: 32.5625rem;
    /* 520px - 672px */
    height: clamp(32.5rem, 51.9vw, 42rem);
    margin: 0;
    /* sends it to the right in the 2nd position */
    order: 2;
  }
  #sbsr-298 .cs-box {
    /* 251px - 325px */
    width: clamp(15.6875rem, 24.5vw, 20.3125rem);
    height: clamp(15.6875rem, 24.5vw, 20.3125rem);
    left: auto;
    transform: none;
    /* -52px to -102px */
    left: calc(clamp(3.25rem, 5.5vw + 1.6rem, 6.375rem) *-1);
    /* 62px - 80px */
    bottom: clamp(3.875rem, 6.2vw, 5rem);
  }
  #sbsr-298 .cs-number:before {
    /* 226px - 293px */
    width: clamp(14.125rem, 22.7vw, 18.3125rem);
    height: clamp(14.125rem, 22.7vw, 18.3125rem);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbsr-298 {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #sbsr-298 .cs-title,
  body.dark-mode #sbsr-298 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbsr-298 .cs-link {
    color: var(--secondaryLight);
  }
  body.dark-mode #sbsr-298 .cs-text {
    opacity: .8;
  }
}
/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #faq-326 {
    padding: var(--sectionPadding);
  }
  #faq-326 .cs-container {
    width: 100%;
    max-width: 43.75rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #faq-326 .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-326 .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-326 .cs-flex {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  #faq-326 .cs-faq-group {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0.75rem;
  }
  #faq-326 .cs-faq-item {
    list-style: none;
    width: 100%;
    background-color: #F7F7F7;
    /* clips all corners of the button that overlap the rounded border */
    overflow: hidden;
    transition: border-bottom 0.3s;
  }
  #faq-326 .cs-faq-item.active .cs-button {
    background-color: var(--primary);
    color: var(--bodyTextColorWhite);
  }
  #faq-326 .cs-faq-item.active .cs-button:before {
    background-color: var(--bodyTextColorWhite);
    transform: rotate(315deg);
  }
  #faq-326 .cs-faq-item.active .cs-button:after {
    background-color: var(--bodyTextColorWhite);
    transform: rotate(-315deg);
  }
  #faq-326 .cs-faq-item.active .cs-item-p {
    height: auto;
    /* 20px - 24px top & bottom */
    /* 16px - 24px left & right */
    padding: clamp(1.25rem, 1.3vw, 1.5rem) clamp(1rem, 2vw, 1.5rem);
    opacity: 1;
  }
  #faq-326 .cs-button {
    font-size: 1rem;
    line-height: 1.2em;
    text-align: left;
    font-weight: bold;
    /* 16px - 20px */
    padding: clamp(1rem, 1.3vw, 1.25rem);
    background-color: #F7F7F7;
    border: none;
    color: var(--headerColor);
    display: block;
    width: 100%;
    position: relative;
    transition: background-color 0.3s, color 0.3s;
  }
  #faq-326 .cs-button:hover {
    cursor: pointer;
  }
  #faq-326 .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: 50%;
    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 .5s;
  }
  #faq-326 .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: 50%;
    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 .5s;
  }
  #faq-326 .cs-button-text {
    width: 80%;
    display: block;
  }
  #faq-326 .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-326 .cs-container {
    max-width: 80rem;
  }
  #faq-326 .cs-flex-group {
    width: 100%;
  }
  #faq-326 .cs-flex {
    flex-direction: row;
    gap: 2rem;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #faq-326 .cs-title,
  body.dark-mode #faq-326 .cs-item-p {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-326 .cs-faq-item {
    background-color: var(--accent);
  }
  body.dark-mode #faq-326 .cs-faq-item.active .cs-button {
    background-color: var(--primary);
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-326 .cs-faq-item.active .cs-button:before,
  body.dark-mode #faq-326 .cs-faq-item.active .cs-button:after {
    background-color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-326 .cs-button {
    background-color: var(--accent);
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-326 .cs-button:before,
  body.dark-mode #faq-326 .cs-button:after {
    background-color: var(--bodyTextColorWhite);
  }
}
/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta-697 {
    padding: var(--sectionPadding);
    background-color: var(--primary);
    position: relative;
    z-index: 1;
  }
  #cta-697 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #cta-697 .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;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #cta-697 .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    /* 25 characters wide including spaces */
    max-width: 25ch;
    margin: 0;
    color: var(--bodyTextColorWhite);
    position: relative;
  }
  #cta-697 .cs-button-solid {
    background-color: #fff;
    color: #1a1a1a;
    transition: color .3s;
  }
  #cta-697 .cs-button-solid:hover {
    color: #fff;
  }
  #cta-697 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    /* makes it act like a background image */
    object-fit: cover;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cta-697 .cs-content {
    text-align: left;
    flex-direction: row;
    justify-content: space-between;
  }
}