/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #services-447 {
        padding: var(--sectionPadding);
    }
    #services-447 .cs-container {
        width: 100%;
        /* changes to 1440px at tablet */
        max-width: 34.375em;
        margin: auto;
    }
    #services-447 .cs-container {
        width: 100%;
        /* changes to 1440px at tablet */
        max-width: 34.375em;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #services-447 .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-447 .cs-card-group {
        width: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1.5rem;
    }
    #services-447 .cs-item {
        list-style: none;
        width: 100%;
        /* changes at desktop */
        padding-top: 9rem;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    #services-447 .cs-item:hover .cs-picture img {
        transform: scale(1.2);
        opacity: 0.4;
    }
    #services-447 .cs-item:hover .cs-box:before {
        opacity: 1;
    }
    #services-447 .cs-picture {
        width: 100%;
        /* changes at desktop */
        height: 15.625rem;
        border-radius: 0.5rem;
        background-color: var(--primary);
        /* clips the corners of the image */
        overflow: hidden;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    #services-447 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* makes it behave like a background image */
        object-fit: cover;
        /* positions top of image to the top of the container */
        object-position: top;
        transition:
            transform 0.9s,
            opacity 0.5s;
    }
    #services-447 .cs-box {
        text-align: center;
        width: 88%;
        padding: 0 1.5rem 1.5rem 1.5rem;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        border: 1px solid #dad9e3;
        border-radius: 0.75rem;
        background-color: #fff;
        box-shadow: 0px 24px 54px rgba(87, 107, 147, 0.12);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    #services-447 .cs-box:before {
        /* hover border box */
        content: "";
        background: transparent;
        /* prevents the mouse from interacting with it */
        pointer-events: none;
        border: 4px solid var(--primary);
        border-radius: 0.75rem;
        /* prevents border from affecting height and width */
        box-sizing: border-box;
        opacity: 0;
        position: absolute;
        display: block;
        top: -1px;
        left: -1px;
        right: -1px;
        bottom: -1px;
        transition: opacity 0.5s;
    }
    #services-447 .cs-wrapper {
        /* 80px - 120px */
        width: clamp(5rem, 9.2vw, 7.5rem);
        height: clamp(5rem, 9.2vw, 7.5rem);
        /* 20px - 24px */
        margin: 0 0 clamp(1.25rem, 1.5vw, 1.5rem);
        /* we use the same clamp value for height & width, but multiple by -.5 so it will be a negative value, and be half of the height.  Negative margins pull things toward the element so they overlap them, in this case we want the .cs-wrapper to overlap .cs-box by half its height, so we use the same clamp for height and half it for the margin top value */
        margin-top: calc(clamp(5rem, 9.2vw, 7.5rem) * -0.5);
        border-radius: 50%;
        border: 4px solid var(--primary);
        background-color: #fff;
        /* prevents border from affecting height and width */
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 10;
    }
    #services-447 .cs-icon {
        /* 48px - 64px */
        width: clamp(3rem, 4.3vw, 4rem);
        height: auto;
        display: block;
    }
    #services-447 .cs-h3 {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 1.9vw, 1.5625rem);
        line-height: 1.2em;
        font-weight: 700;
        margin: 0 0 0.5rem 0;
        color: var(--headerColor);
    }
    #services-447 .cs-item-text {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        font-weight: 400;
        /* 20px - 24px */
        margin: 0 0 clamp(1.25rem, 1.5vw, 1.5rem);
        color: var(--bodyTextColor);
    }
    #services-447 .cs-link {
        /* 16px - 20px */
        font-size: clamp(1rem, 1.5vw, 1.25rem);
        line-height: 1.5em;
        font-weight: 700;
        text-transform: uppercase;
        text-decoration: none;
        margin: 0;
        color: var(--primary);
        display: inline-block;
        position: relative;
    }
    #services-447 .cs-link:hover:before {
        width: 100%;
    }
    #services-447 .cs-link:before {
        /* animated underline */
        content: "";
        width: 0%;
        height: 3px;
        background: currentColor;
        opacity: 1;
        position: absolute;
        display: block;
        bottom: -0.125rem;
        left: 0;
        transition: width 0.3s;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #services-447 .cs-container {
        max-width: 90rem;
    }
    #services-447 .cs-card-group {
        flex-wrap: wrap;
        flex-direction: row;
        /* 16px - 20px */
        column-gap: clamp(1rem, 1.5vw, 1.25rem);
        row-gap: 3.75rem;
    }
    #services-447 .cs-item {
        width: 47%;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #services-447 .cs-card-group {
        flex-wrap: nowrap;
    }
    #services-447 .cs-item {
        width: 100%;
        /* 144px - 274px */
        padding-top: clamp(9rem, 17.5vw, 17.125rem);
    }
    #services-447 .cs-picture {
        /* 224px - 428px */
        height: clamp(14rem, 28vw, 26.75rem);
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #services-447 .cs-topper {
        color: var(--primaryLight);
    }
    body.dark-mode #services-447 .cs-title {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #services-447 .cs-text {
        color: var(--bodyTextColorWhite);
        opacity: 0.8;
    }
    body.dark-mode #services-447 .cs-box,
    body.dark-mode #services-447 .cs-wrapper {
        background-color: var(--medium);
    }
    body.dark-mode #services-447 .cs-h3,
    body.dark-mode #services-447 .cs-item-text {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #services-447 .cs-link {
        color: var(--primaryLight);
    }
}
/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #RPsbs-1097,
    #RPsbsr-1097 {
        padding: var(--sectionPadding);
    }
    #RPsbs-1097 .cs-container,
    #RPsbsr-1097 .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);
    }
    #RPsbs-1097 .cs-content,
    #RPsbsr-1097 .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;
    }
    #RPsbs-1097 .cs-text,
    #RPsbsr-1097 .cs-text {
        margin-bottom: 1rem;
    }
    #RPsbs-1097 .cs-text:last-of-type,
    #RPsbsr-1097 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #RPsbs-1097 .cs-button-solid,
    #RPsbsr-1097 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #fff;
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--primary);
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #RPsbs-1097 .cs-button-solid:before,
    #RPsbsr-1097 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width 0.3s;
    }
    #RPsbs-1097 .cs-button-solid:hover:before,
    #RPsbsr-1097 .cs-button-solid:hover:before {
        width: 100%;
    }
    #RPsbs-1097 .cs-list,
    #RPsbsr-1097 .cs-list {
        max-width: 39.375rem;
        margin: 0 0 2rem 0;
        padding: 0;
        /* clips the bullets to create the half circle */
        overflow: hidden;
    }
    #RPsbs-1097 .cs-li,
    #RPsbsr-1097 .cs-li {
        list-style: none;
        margin: 0 0 0.5rem 0;
        color: var(--bodyTextColor);
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 0.75rem;
        position: relative;
    }
    #RPsbs-1097 .cs-li:before,
    #RPsbsr-1097 .cs-li:before {
        /* bullet */
        content: "";
        width: 1rem;
        height: 1rem;
        margin-top: 0.1875rem;
        /* make it overflow the parent by half it's width to make an eclipse */
        margin-left: -0.5rem;
        background: var(--secondary);
        border-radius: 50%;
        display: block;
        /* prevents flexbox from squishing it */
        flex: none;
    }
    #RPsbs-1097 .cs-info,
    #RPsbsr-1097 .cs-info {
        width: 100%;
        padding-top: 2rem;
        border-top: 1px solid #e8e8e8;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 0.75rem;
        position: relative;
    }
    #RPsbs-1097 .cs-icon,
    #RPsbsr-1097 .cs-icon {
        width: 3.25rem;
        height: auto;
        display: block;
        transition: transform 0.3s;
    }
    #RPsbs-1097 .cs-flex,
    #RPsbsr-1097 .cs-flex {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    #RPsbs-1097 .cs-name,
    #RPsbsr-1097 .cs-name {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 4vw, 1.5625rem);
        line-height: 1.2em;
        font-weight: 700;
        margin: 0;
        color: var(--headerColor);
        display: block;
    }
    #RPsbs-1097 .cs-desc,
    #RPsbsr-1097 .cs-desc {
        font-size: 0.875rem;
        line-height: 1.5em;
        margin: 0;
        color: var(--bodyTextColor);
        display: block;
    }
    #RPsbs-1097 .cs-image-group,
    #RPsbsr-1097 .cs-image-group {
        /* scales the whole group based on the view width size and stop when that vales equals .789em, resets at desktop */
        font-size: min(2.09vw, 0.789em);
        width: 43.375em;
        height: 43em;
        display: block;
        position: relative;
        z-index: 1;
    }
    #RPsbs-1097 .cs-picture,
    #RPsbsr-1097 .cs-picture {
        width: 33.875em;
        height: 38em;
        position: absolute;
        bottom: 0;
        left: 5.5em;
        z-index: -1;
    }
    #RPsbs-1097 .cs-picture img,
    #RPsbsr-1097 .cs-picture img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
    }
    #RPsbs-1097 .cs-stripes,
    #RPsbsr-1097 .cs-stripes {
        width: 32.625em;
        height: auto;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -2;
    }
    #RPsbs-1097 .cs-graphic,
    #RPsbsr-1097 .cs-graphic {
        width: 11.5em;
        height: auto;
        display: block;
        position: absolute;
        bottom: 5em;
        right: 0;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #RPsbs-1097 .cs-container,
    #RPsbsr-1097 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    #RPsbs-1097 .cs-image-group,
    #RPsbsr-1097 .cs-image-group {
        font-size: min(1.2vw, 1em);
        flex: none;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #RPsbs-1097 .cs-title,
    body.dark-mode #RPsbs-1097 .cs-text,
    body.dark-mode #RPsbs-1097 .cs-li,
    body.dark-mode #RPsbs-1097 .cs-desc,
    body.dark-mode #RPsbs-1097 .cs-name,
    body.dark-mode #RPsbsr-1097 .cs-title,
    body.dark-mode #RPsbsr-1097 .cs-text,
    body.dark-mode #RPsbsr-1097 .cs-li,
    body.dark-mode #RPsbsr-1097 .cs-desc,
    body.dark-mode #RPsbsr-1097 .cs-name {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #RPsbs-1097 .cs-text,
    body.dark-mode #RPsbs-1097 .cs-li,
    body.dark-mode #RPsbs-1097 .cs-desc,
    body.dark-mode #RPsbsr-1097 .cs-text,
    body.dark-mode #RPsbsr-1097 .cs-li,
    body.dark-mode #RPsbsr-1097 .cs-desc {
        opacity: 0.8;
    }
    body.dark-mode #RPsbs-1097 .cs-stripes,
    body.dark-mode #RPsbsr-1097 .cs-stripes {
        opacity: 0.2;
    }
}
/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #RPsbsr-1097 {
        background-color: #f7f7f7;
    }
    #RPsbsr-1097 .cs-picture {
        right: 5.5em;
        left: auto;
    }
    #RPsbsr-1097 .cs-stripes {
        right: 0;
        left: auto;
    }
    #RPsbsr-1097 .cs-graphic {
        left: 0;
        right: auto;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #RPsbsr-1097 .cs-image-group {
        /* sends it to the right in the 2nd position */
        order: 2;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #RPsbsr-1097 {
        background-color: rgba(0, 0, 0, 0.6);
    }
}
/*-- -------------------------- -->
<---           Steps            -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #steps-284 {
        padding: var(--sectionPadding);
    }
    #steps-284 .cs-container {
        width: 100%;
        /* changes to 1104px on tablet */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #steps-284 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 27.125rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }
    #steps-284 .cs-text {
        margin-bottom: 1rem;
    }
    #steps-284 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #steps-284 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #fff;
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--primary);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #steps-284 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #steps-284 .cs-button-solid:hover:before {
        width: 100%;
    }
    #steps-284 .cs-right-section {
        margin: 0;
        padding: 0;
        max-width: 35.125rem;
    }
    #steps-284 .cs-item {
        list-style: none;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    #steps-284 .cs-item:nth-of-type(1) .cs-item-text:before {
        height: 50%;
        top: auto;
        bottom: -1px;
    }
    #steps-284 .cs-item:nth-of-type(2),
    #steps-284 .cs-item:nth-of-type(4) {
        justify-content: flex-end;
        text-align: right;
    }
    #steps-284 .cs-item:nth-of-type(2) .cs-number,
    #steps-284 .cs-item:nth-of-type(4) .cs-number {
        /* Send number to the right */
        order: 2;
        margin: 0;
        /* 15px - 24px */
        margin-left: clamp(0.9375rem, 3vw, 1.5rem);
    }
    #steps-284 .cs-item:nth-of-type(2) .cs-item-text,
    #steps-284 .cs-item:nth-of-type(4) .cs-item-text {
        /* reverse padding */
        padding-left: 0;
        /* 15px - 24px */
        padding-right: clamp(0.9375rem, 3vw, 1.5rem);
        /* reset the border on the :before */
    }
    #steps-284 .cs-item:nth-of-type(2) .cs-item-text:before,
    #steps-284 .cs-item:nth-of-type(4) .cs-item-text:before {
        border-top: 1px solid var(--primary);
        border-left: none;
        border-right: 1px solid var(--primary);
        left: auto;
        right: 0;
        bottom: 0;
        border-radius: 0 0.5rem 0.5rem 0;
    }
    #steps-284 .cs-item:nth-of-type(2) .cs-item-text:after,
    #steps-284 .cs-item:nth-of-type(4) .cs-item-text:after {
        /* move dot to the right now */
        left: auto;
        right: -0.9375rem;
    }
    #steps-284 .cs-item:nth-of-type(3) .cs-item-text:before {
        height: auto;
        border-top: 1px solid var(--primary);
        border-radius: 0.5rem 0 0 0.5rem;
        top: 1px;
        bottom: 0px;
    }
    #steps-284 .cs-item:nth-of-type(4) .cs-item-text:before {
        height: 50%;
        border-radius: 0 0.5rem 0 0;
        border-bottom: none;
        top: -1px;
    }
    #steps-284 .cs-number {
        /* 16px - 20px */
        font-size: clamp(1rem, 2vw, 1.25rem);
        font-weight: 700;
        /* 15px - 24px */
        margin-right: clamp(0.9375rem, 3vw, 1.5rem);
        /* 40px - 52px */
        width: clamp(2.5rem, 5.1vw, 3.25rem);
        height: clamp(2.5rem, 5.1vw, 3.25rem);
        border-radius: 50%;
        border: 2px solid var(--primary);
        color: var(--headerColor);
        background-color: transparent;
        display: flex;
        justify-content: center;
        align-items: center;
        /* prevents flexbox from squishing it */
        flex: none;
        position: relative;
    }
    #steps-284 .cs-item-text {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.6vw, 1rem);
        line-height: 1.5em;
        margin: 0;
        max-width: 18.75rem;
        /* 22px - 32px */
        padding: clamp(1.375rem, 3vw, 2rem) 0;
        box-sizing: content-box;
        /* 15px - 24px */
        padding-left: clamp(0.9375rem, 3vw, 1.5rem);
        position: relative;
    }
    #steps-284 .cs-item-text:before {
        /* Green line */
        content: "";
        width: 70%;
        height: 100%;
        border-radius: 0 0 0 0.5rem;
        border-left: 1px solid var(--primary);
        border-bottom: 1px solid var(--primary);
        box-sizing: content-box;
        opacity: 1;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
    }
    #steps-284 .cs-item-text:after {
        /* list circle */
        content: "";
        width: 0.5rem;
        height: 0.5rem;
        background: var(--primary);
        border-radius: 50%;
        border: 12px solid #fff;
        box-sizing: content-box;
        opacity: 1;
        position: absolute;
        display: block;
        top: 50%;
        left: -0.9375rem;
        transform: translateY(-50%);
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #steps-284 .cs-container {
        max-width: 69rem;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        column-gap: 2.75rem;
    }
    #steps-284 .cs-content {
        width: 50%;
        /* reset margin to play nice with flexbox */
        margin: 0;
    }
    #steps-284 .cs-right-section {
        width: 57%;
        /* 20px - 25px - this pulls the section up so it's flush with the top of the left section, the padding top on the .cs-item-text is creating a gap at the top of the section. Wrapped in a calc() function to turn clamp() value into a negative number */
        margin-top: calc(clamp(1.25rem, 2vw, 1.5625rem) * -1);
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #steps-284 .cs-title,
    body.dark-mode #steps-284 .cs-text,
    body.dark-mode #steps-284 .cs-number {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #steps-284 .cs-item-text:after {
        border: 12px solid var(--dark);
    }
}
/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #faq-1193 {
        padding: var(--sectionPadding);
        position: relative;
        overflow: hidden;
    }
    #faq-1193 .cs-container {
        width: 100%;
        /* chnages to 1280px at desktop */
        max-width: 36.5rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* 40px - 48px */
        gap: clamp(2.5rem, 5vw, 3rem);
    }
    #faq-1193 .cs-content {
        text-align: left;
        max-width: 39.375rem;
    }
    #faq-1193 .cs-title {
        /* 20 characters wide including spaces */
        max-width: 20ch;
        margin: 0 0 2rem 0;
    }
    #faq-1193 .cs-faq-group {
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 1rem;
    }
    #faq-1193 .cs-faq-item {
        list-style: none;
        width: 100%;
        background-color: #f7f7f7;
        padding: 1.25rem;
        box-sizing: border-box;
        transition: border-bottom 0.3s;
    }
    #faq-1193 .cs-faq-item.active {
        border-color: var(--primaryLight);
    }
    #faq-1193 .cs-faq-item.active .cs-button {
        color: var(--primary);
    }
    #faq-1193 .cs-faq-item.active .cs-button:before {
        background-color: var(--primaryLight);
        transform: rotate(315deg);
    }
    #faq-1193 .cs-faq-item.active .cs-button:after {
        background-color: var(--primaryLight);
        transform: rotate(-315deg);
    }
    #faq-1193 .cs-faq-item.active .cs-item-p {
        height: auto;
        padding-top: 1rem;
        opacity: 1;
    }
    #faq-1193 .cs-button {
        /* 16px - 20px */
        font-size: clamp(1rem, 2vw, 1.25rem);
        line-height: 1.2em;
        text-align: left;
        font-weight: bold;
        padding: 0;
        border: none;
        background: transparent;
        color: var(--headerColor);
        display: block;
        width: 100%;
        position: relative;
        transition:
            background-color 0.3s,
            color 0.3s;
    }
    #faq-1193 .cs-button:hover {
        cursor: pointer;
    }
    #faq-1193 .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: 0.25rem;
        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-1193 .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: 0.0625rem;
        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-1193 .cs-button-text {
        width: 90%;
        display: block;
    }
    #faq-1193 .cs-item-p {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        width: 90%;
        max-width: 33.8125rem;
        height: 0;
        margin: 0;
        padding: 0;
        opacity: 0;
        color: var(--bodyTextColor);
        /* clips the text so it doesn't show up */
        overflow: hidden;
        transition:
            opacity 0.3s,
            padding-bottom 0.3s;
    }
    #faq-1193 .cs-image-group {
        /* we use ems for everything in the container so they pull their value for em from the font size of this parent instead of the root element (html). This font size scales with the view width of the screen and stops when the font size equals the value of 1em (16px) and stops growing */
        font-size: min(2.43vw, 1em);
        width: 37.375em;
        height: 42.375em;
        display: block;
        position: relative;
    }
    #faq-1193 .cs-picture {
        display: block;
        position: absolute;
        z-index: 1;
    }
    #faq-1193 .cs-picture1 {
        width: 32.625em;
        height: 38.0625em;
        top: 0;
        left: 0;
    }
    #faq-1193 .cs-picture1 img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    #faq-1193 .cs-picture2 {
        width: 25em;
        height: 40.625em;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        bottom: 0;
        right: 0;
    }
    #faq-1193 .cs-picture2 img {
        width: auto;
        height: 100%;
        max-height: 40.625rem;
        object-fit: contain;
    }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #faq-1193 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
    }
    #faq-1193 .cs-content {
        width: 55%;
    }
    #faq-1193 .cs-image-group {
        font-size: min(1.4vw, 1em);
        height: auto;
        min-height: 42.375rem;
    }
    #faq-1193 .cs-picture1 {
        height: 90%;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #faq-1193 .cs-title,
    body.dark-mode #faq-1193 .cs-item-p {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #faq-1193 .cs-item-p {
        opacity: 0.8;
    }
    body.dark-mode #faq-1193 .cs-faq-item {
        background-color: rgba(0, 0, 0, 0.4);
    }
    body.dark-mode #faq-1193 .cs-faq-item.active {
        border-color: var(--bodyTextColorWhite);
    }
    body.dark-mode #faq-1193 .cs-faq-item.active .cs-button {
        color: var(--secondary);
    }
    body.dark-mode #faq-1193 .cs-faq-item.active .cs-button:before,
    body.dark-mode #faq-1193 .cs-faq-item.active .cs-button:after {
        background-color: var(--secondary);
    }
    body.dark-mode #faq-1193 .cs-button {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #faq-1193 .cs-button:before,
    body.dark-mode #faq-1193 .cs-button:after {
        background-color: var(--bodyTextColorWhite);
    }
}