Code of Stitch

Standard

<!-- ============================================ -->
<!--                   Stats                      -->
<!-- ============================================ -->

<section id="stats-1575">
    <div class="cs-container">
        <ul class="cs-card-group">
            <li class="cs-item">
                <img class="cs-icon" aria-hidden="true" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/thumbs-up.svg" loading="lazy" decoding="async" alt="icon" width="48" height="48">
                <span class="cs-number">99%</span>
                <span class="cs-desc">Positive customer feedback</span>
            </li>
            <li class="cs-item">
                <img class="cs-icon" aria-hidden="true" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/box.svg" loading="lazy" decoding="async" alt="icon" width="48" height="48">
                <span class="cs-number">10</span>
                <span class="cs-desc">Days free return policy</span>
            </li>
            <li class="cs-item">
                <img class="cs-icon" aria-hidden="true" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/hand.svg" loading="lazy" decoding="async" alt="icon" width="48" height="48">
                <span class="cs-number">24/7</span>
                <span class="cs-desc">Online customer support</span>
            </li>
        </ul>
    </div>
    <picture class="cs-background">
        <!--Mobile Image-->
        <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/waves-side.svg">
        <!--Tablet and above Image-->
        <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/waves-side.svg">
        <img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/waves-side.svg" alt="wave" width="1280" height="568">
    </picture>
</section>                   

<!-- ============================================ -->
<!--             Side By Side Reverse             -->
<!-- ============================================ -->

<section id="sbsr-1575">
    <div class="cs-container">
        <!-- Left Section -->
        <div class="cs-image-group">
            <div class="cs-row">
                <picture class="cs-picture cs-picture1">
                    <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/man2.jpg">
                    <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/man2.jpg">
                    <img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/man2.jpg" alt="man" width="305" height="410">
                </picture>
                <picture class="cs-picture cs-picture3">
                    <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/fishing2.jpg">
                    <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/fishing2.jpg">
                    <img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/fishing2.jpg" alt="man fishing" width="305" height="467">
                </picture>
            </div>
            <div class="cs-row">
                <picture class="cs-picture cs-picture2">
                    <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/fishing.jpg">
                    <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/fishing.jpg">
                    <img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/fishing.jpg" alt="man fishing" width="305" height="615">
                </picture>
                <picture class="cs-picture cs-picture4">
                    <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/fish.jpg">
                    <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/fish.jpg">
                    <img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/fish.jpg" alt="fish" width="305" height="277">
                </picture>
            </div>
        </div>
        <div class="cs-content">
            <span class="cs-topper">Asked questions</span>
            <h2 class="cs-title">Frequently Asked Questions</h2>
            <ul class="cs-faq-group">
                <!-- Active class added as default -->
                <li class="cs-faq-item active">
                    <button class="cs-button">
                        <span class="cs-button-text">
                            What are your prices for brake replacement?
                        </span>
                        <span class="cs-indicator" aria-hidden="true"></span>
                    </button>
                    <p class="cs-item-p">
                        Some cleaning plans require a minimum commitment term. Cancelling your plan before the minimum term is complete will result in a $99 fee. If you want to learn more information about how to cancel, please inbox us.
                    </p>
                </li>
                <li class="cs-faq-item">
                    <button class="cs-button">
                        <span class="cs-button-text">
                            What is your plan cancellation policy?
                        </span>
                        <span class="cs-indicator" aria-hidden="true"></span>
                    </button>
                    <p class="cs-item-p">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit convallis nunc neque, bibendum pulvinar vitae commodo velit. Proin diam tortor sed malesuada nunc, habitant. Dignissim ipsum porta enim, magna urna, quam. 
                    </p>
                </li>
                <li class="cs-faq-item">
                    <button class="cs-button">
                        <span class="cs-button-text">
                            What are your prices for brake replacement?
                        </span>
                        <span class="cs-indicator" aria-hidden="true"></span>
                    </button>
                    <p class="cs-item-p">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit convallis nunc neque, bibendum pulvinar vitae commodo velit. Proin diam tortor sed malesuada nunc, habitant. Dignissim ipsum porta enim, magna urna, quam. 
                    </p>
                </li>
                <li class="cs-faq-item">
                    <button class="cs-button">
                        <span class="cs-button-text">
                            What are your prices for brake replacement?
                        </span>
                        <span class="cs-indicator" aria-hidden="true"></span>
                    </button>
                    <p class="cs-item-p">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit convallis nunc neque, bibendum pulvinar vitae commodo velit. Proin diam tortor sed malesuada nunc, habitant. Dignissim ipsum porta enim, magna urna, quam. 
                    </p>
                </li>
                <li class="cs-faq-item">
                    <button class="cs-button">
                        <span class="cs-button-text">
                            What are your prices for brake replacement?
                        </span>
                        <span class="cs-indicator" aria-hidden="true"></span>
                    </button>
                    <p class="cs-item-p">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit convallis nunc neque, bibendum pulvinar vitae commodo velit. Proin diam tortor sed malesuada nunc, habitant. Dignissim ipsum porta enim, magna urna, quam. 
                    </p>
                </li>
                <li class="cs-faq-item">
                    <button class="cs-button">
                        <span class="cs-button-text">
                            What are your prices for brake replacement?
                        </span>
                        <span class="cs-indicator" aria-hidden="true"></span>
                    </button>
                    <p class="cs-item-p">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit convallis nunc neque, bibendum pulvinar vitae commodo velit. Proin diam tortor sed malesuada nunc, habitant. Dignissim ipsum porta enim, magna urna, quam. 
                    </p>
                </li>
            </ul>
        </div>
    </div>
</section>

const faqItems = Array.from(document.querySelectorAll('.cs-faq-item'));
        for (const item of faqItems) {
            const onClick = () => {
            item.classList.toggle('active')
        }
        item.addEventListener('click', onClick)
        }

/*-- -------------------------- -->
<---           Stats            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #stats-1575 {
    padding: var(--sectionPadding);
    background-color: #1a1a1a;
    position: relative;
    z-index: 1;
  }
  #stats-1575 .cs-container {
    width: 100%;
    /* Changes to 1280px at small desktop */
    max-width: 59.6875rem;
    margin: auto;
  }
  #stats-1575 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 3.75rem;
  }
  #stats-1575 .cs-item {
    text-align: center;
    list-style: none;
    width: 47%;
    max-width: 15rem;
    margin: 0;
    padding: 0 0.75rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #stats-1575 .cs-icon {
    width: 3rem;
    height: auto;
    margin: 0 0 1.5rem;
    display: block;
  }
  #stats-1575 .cs-number {
    /* 31px - 61px */
    font-size: clamp(1.9375rem, 4.3vw, 2.4375rem);
    line-height: 1.2em;
    text-align: inherit;
    font-weight: 400;
    margin: 0 0 0.25rem 0;
    color: var(--bodyTextColorWhite);
    display: block;
  }
  #stats-1575 .cs-desc {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    color: var(--bodyTextColorWhite);
  }
  #stats-1575 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #stats-1575 .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) {
  #stats-1575 .cs-card-group {
    justify-content: space-between;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #stats-1575 .cs-container {
    max-width: 80rem;
  }
  #stats-1575 .cs-card-group {
    max-width: 39.375rem;
    justify-content: flex-start;
  }
  #stats-1575 .cs-item {
    text-align: left;
    max-width: 12.5rem;
    align-items: flex-start;
  }
}

/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbsr-1575 {
    padding: var(--sectionPadding);
  }
  #sbsr-1575 .cs-container {
    width: 100%;
    /* changes to 1280px at small desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #sbsr-1575 .cs-content {
    text-align: center;
    max-width: 39.375rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #sbsr-1575 .cs-title {
    /* 20 characters wide including spaces */
    max-width: 20ch;
    margin: 0 0 2rem 0;
  }
  #sbsr-1575 .cs-faq-group {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0.75rem;
  }
  #sbsr-1575 .cs-faq-item {
    text-align: left;
    list-style: none;
    width: 100%;
    background-color: #f7f7f7;
    /* 12px - 16px */
    padding: clamp(0.75rem, 2vw, 1rem) 1rem;
    box-sizing: border-box;
    transition: border-bottom 0.3s;
  }
  #sbsr-1575 .cs-faq-item.active {
    border-color: var(--primaryLight);
  }
  #sbsr-1575 .cs-faq-item.active .cs-button {
    color: var(--primary);
  }
  #sbsr-1575 .cs-faq-item.active .cs-button .cs-indicator:before {
    transform: translate(-50%, -50%) rotate(360deg);
  }
  #sbsr-1575 .cs-faq-item.active .cs-button .cs-indicator:after {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  #sbsr-1575 .cs-faq-item.active .cs-item-p {
    height: auto;
    padding-top: 1rem;
    opacity: 1;
    transform: scaleY(1);
  }
  #sbsr-1575 .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: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
    transition: background-color 0.3s, color 0.3s;
  }
  #sbsr-1575 .cs-button:hover {
    cursor: pointer;
  }
  #sbsr-1575 .cs-button .cs-indicator {
    width: 1.5rem;
    height: 1.5rem;
    position: relative;
    z-index: 1;
  }
  #sbsr-1575 .cs-button .cs-indicator:before {
    /* left line */
    content: '';
    width: 1rem;
    height: 0.125rem;
    background-color: #767676;
    opacity: 1;
    border-radius: 2px;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform .5s;
  }
  #sbsr-1575 .cs-button .cs-indicator:after {
    /* right line */
    content: '';
    width: 1rem;
    height: 0.125rem;
    background-color: #767676;
    opacity: 1;
    border-radius: 2px;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    transition: transform .5s;
  }
  #sbsr-1575 .cs-button-text {
    width: 90%;
    display: block;
  }
  #sbsr-1575 .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;
    transform: scaleY(0);
    transform-origin: top;
    transition: opacity 0.3s, transform 0.3s, padding-bottom 0.3s;
  }
  #sbsr-1575 .cs-image-group {
    /* everything inside the image group is in ems so the font size will scale them down.  Font size minimum is tied to view width size, and grows until it reaches 75% of the value on em */
    font-size: min(2.3vw, .89em);
    width: 39.375em;
    min-height: 63.125em;
    display: flex;
    gap: 1.25em;
    position: relative;
    z-index: 1;
  }
  #sbsr-1575 .cs-picture {
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 1;
  }
  #sbsr-1575 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #sbsr-1575 .cs-row {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25em;
  }
  #sbsr-1575 .cs-picture1 {
    width: 19.0625em;
    height: 40.594059%;
    margin-top: 7.125em;
  }
  #sbsr-1575 .cs-picture2 {
    width: 19.0625em;
    height: 60.891089%;
  }
  #sbsr-1575 .cs-picture3 {
    width: 19.0625em;
    height: 60%;
  }
  #sbsr-1575 .cs-picture4 {
    width: 19.0625em;
    height: 27.425743%;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbsr-1575 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #sbsr-1575 .cs-content {
    text-align: left;
    align-items: flex-start;
  }
  #sbsr-1575 .cs-image-group {
    font-size: min(1.2vw, 1em);
    height: auto;
    /* -210px to -384px */
    margin-top: calc(clamp(13.125rem, 23vw, 24rem)*-1);
    flex: none;
    /* sends it to the right in the 2nd position */
    order: 2;
  }
}

/*-- -------------------------- -->
<---           Stats            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #stats-1575 {
    padding: var(--sectionPadding);
    background-color: #1a1a1a;
    position: relative;
    z-index: 1;
  }
  #stats-1575 .cs-container {
    width: 100%;
    /* Changes to 1280px at small desktop */
    max-width: 59.6875rem;
    margin: auto;
  }
  #stats-1575 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 3.75rem;
  }
  #stats-1575 .cs-item {
    text-align: center;
    list-style: none;
    width: 47%;
    max-width: 15rem;
    margin: 0;
    padding: 0 0.75rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #stats-1575 .cs-icon {
    width: 3rem;
    height: auto;
    margin: 0 0 1.5rem;
    display: block;
  }
  #stats-1575 .cs-number {
    /* 31px - 61px */
    font-size: clamp(1.9375rem, 4.3vw, 2.4375rem);
    line-height: 1.2em;
    text-align: inherit;
    font-weight: 400;
    margin: 0 0 0.25rem 0;
    color: var(--bodyTextColorWhite);
    display: block;
  }
  #stats-1575 .cs-desc {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    color: var(--bodyTextColorWhite);
  }
  #stats-1575 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #stats-1575 .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) {
  #stats-1575 .cs-card-group {
    justify-content: space-between;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #stats-1575 .cs-container {
    max-width: 80rem;
  }
  #stats-1575 .cs-card-group {
    max-width: 39.375rem;
    justify-content: flex-start;
  }
  #stats-1575 .cs-item {
    text-align: left;
    max-width: 12.5rem;
    align-items: flex-start;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #stats-1575 {
    background-color: rgba(0, 0, 0, 0.6);
  }
}

/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbsr-1575 {
    padding: var(--sectionPadding);
  }
  #sbsr-1575 .cs-container {
    width: 100%;
    /* changes to 1280px at small desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #sbsr-1575 .cs-content {
    text-align: center;
    max-width: 39.375rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #sbsr-1575 .cs-title {
    /* 20 characters wide including spaces */
    max-width: 20ch;
    margin: 0 0 2rem 0;
  }
  #sbsr-1575 .cs-faq-group {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0.75rem;
  }
  #sbsr-1575 .cs-faq-item {
    text-align: left;
    list-style: none;
    width: 100%;
    background-color: #f7f7f7;
    /* 12px - 16px */
    padding: clamp(0.75rem, 2vw, 1rem) 1rem;
    box-sizing: border-box;
    transition: border-bottom 0.3s;
  }
  #sbsr-1575 .cs-faq-item.active {
    border-color: var(--primaryLight);
  }
  #sbsr-1575 .cs-faq-item.active .cs-button {
    color: var(--primary);
  }
  #sbsr-1575 .cs-faq-item.active .cs-button .cs-indicator:before {
    transform: translate(-50%, -50%) rotate(360deg);
  }
  #sbsr-1575 .cs-faq-item.active .cs-button .cs-indicator:after {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  #sbsr-1575 .cs-faq-item.active .cs-item-p {
    height: auto;
    padding-top: 1rem;
    opacity: 1;
    transform: scaleY(1);
  }
  #sbsr-1575 .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: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
    transition: background-color 0.3s, color 0.3s;
  }
  #sbsr-1575 .cs-button:hover {
    cursor: pointer;
  }
  #sbsr-1575 .cs-button .cs-indicator {
    width: 1.5rem;
    height: 1.5rem;
    position: relative;
    z-index: 1;
  }
  #sbsr-1575 .cs-button .cs-indicator:before {
    /* left line */
    content: '';
    width: 1rem;
    height: 0.125rem;
    background-color: #767676;
    opacity: 1;
    border-radius: 2px;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform .5s;
  }
  #sbsr-1575 .cs-button .cs-indicator:after {
    /* right line */
    content: '';
    width: 1rem;
    height: 0.125rem;
    background-color: #767676;
    opacity: 1;
    border-radius: 2px;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    transition: transform .5s;
  }
  #sbsr-1575 .cs-button-text {
    width: 90%;
    display: block;
  }
  #sbsr-1575 .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;
    transform: scaleY(0);
    transform-origin: top;
    transition: opacity 0.3s, transform 0.3s, padding-bottom 0.3s;
  }
  #sbsr-1575 .cs-image-group {
    /* everything inside the image group is in ems so the font size will scale them down.  Font size minimum is tied to view width size, and grows until it reaches 75% of the value on em */
    font-size: min(2.3vw, .89em);
    width: 39.375em;
    min-height: 63.125em;
    display: flex;
    gap: 1.25em;
    position: relative;
    z-index: 1;
  }
  #sbsr-1575 .cs-picture {
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 1;
  }
  #sbsr-1575 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #sbsr-1575 .cs-row {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25em;
  }
  #sbsr-1575 .cs-picture1 {
    width: 19.0625em;
    height: 40.594059%;
    margin-top: 7.125em;
  }
  #sbsr-1575 .cs-picture2 {
    width: 19.0625em;
    height: 60.891089%;
  }
  #sbsr-1575 .cs-picture3 {
    width: 19.0625em;
    height: 60%;
  }
  #sbsr-1575 .cs-picture4 {
    width: 19.0625em;
    height: 27.425743%;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbsr-1575 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #sbsr-1575 .cs-content {
    text-align: left;
    align-items: flex-start;
  }
  #sbsr-1575 .cs-image-group {
    font-size: min(1.2vw, 1em);
    height: auto;
    /* -210px to -384px */
    margin-top: calc(clamp(13.125rem, 23vw, 24rem)*-1);
    flex: none;
    /* sends it to the right in the 2nd position */
    order: 2;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbsr-1575 .cs-title,
  body.dark-mode #sbsr-1575 .cs-text,
  body.dark-mode #sbsr-1575 .cs-item-p,
  body.dark-mode #sbsr-1575 .cs-button {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbsr-1575 .cs-item-p {
    opacity: .8;
  }
  body.dark-mode #sbsr-1575 .cs-faq-item {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #sbsr-1575 .cs-icon {
    filter: brightness(125%);
  }
}

/*-- -------------------------- -->
<---           Stats            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #stats-1575 {
        padding: var(--sectionPadding);
        background-color: #1a1a1a;
        position: relative;
        z-index: 1;

        .cs-container {
            width: 100%;
            /* Changes to 1280px at small desktop */
            max-width: (955/16rem);
            margin: auto;
        }

        .cs-card-group {
            width: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            row-gap: (60/16rem);
        }

        .cs-item {
            text-align: center;
            list-style: none;
            width: 47%;
            max-width: (240/16rem);
            margin: 0;
            padding: 0 (12/16rem);
            /* prevents padding and border from affecting height and width */
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .cs-icon {
            width: (48/16rem);
            height: auto;
            margin: 0 0 (24/16rem);
            display: block;
        }

        .cs-number {
            /* 31px - 61px */
            font-size: clamp(1.9375rem, 4.3vw, 2.4375rem);
            line-height: 1.2em;
            text-align: inherit;
            font-weight: 400;
            margin: 0 0 (4/16rem) 0;
            color: var(--bodyTextColorWhite);
            display: block;
        }

        .cs-desc {
            /* 16px - 20px */
            font-size: clamp(1rem, 2vw, 1.15rem);
            line-height: 1.5em;
            text-align: inherit;
            width: 100%;
            color: var(--bodyTextColorWhite);
        }

        .cs-background {
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;

            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) {
    #stats-1575 {
        .cs-card-group {
            justify-content: space-between;
        }
    }
}    

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #stats-1575 {
        .cs-container {
            max-width: (1280/16rem);
        }

        .cs-card-group {
            max-width: (630/16rem);
            justify-content: flex-start;
        }

        .cs-item {
            text-align: left;
            max-width: (200/16rem);
            align-items: flex-start;
        }
    }
}

/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbsr-1575 {
        padding: var(--sectionPadding);
        
        .cs-container {
            width: 100%;
            /* changes to 1280px at small desktop */
            max-width: (584/16rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 48px - 64px */
            gap: clamp(3rem, 6vw, 4rem);
        }

        .cs-content {
            text-align: center;
            max-width: (630/16rem);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .cs-title {
            /* 20 characters wide including spaces */
            max-width: 20ch;
            margin: 0 0 (32/16rem) 0;
        }

        .cs-faq-group {
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: (12/16rem);
        }

        .cs-faq-item {
            text-align: left;
            list-style: none;
            width: 100%;
            background-color: #f7f7f7;
            /* 12px - 16px */
            padding: clamp(.75rem, 2vw, 1rem) (16/16rem);
            box-sizing: border-box;
            transition: border-bottom 0.3s;

            &.active {
                border-color: var(--primaryLight);
                .cs-button {
                    color: var(--primary);
                    .cs-indicator {
                        &:before {
                            transform: translate(-50%, -50%) rotate(360deg);
                        }

                        &:after {
                            transform: translate(-50%, -50%) rotate(0deg);
                        }
                    }
                }
                .cs-item-p {
                    height: auto;
                    padding-top: (16/16rem);
                    opacity: 1;
                    transform: scaleY(1);
                }
            }
        }

        .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: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            position: relative;
            transition:
                background-color 0.3s,
                color 0.3s;

            &:hover {
                cursor: pointer;
            }

            .cs-indicator {
                width: (24/16rem);
                height: (24/16rem);
                position: relative;
                z-index: 1;

                &:before {
                    /* left line */
                    content: '';
                    width: (16/16rem);
                    height: (2/16rem);
                    background-color: #767676;
                    opacity: 1;
                    border-radius: 2px;
                    position: absolute;
                    display: block;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    transition: transform .5s;
                }
    
                &:after {
                    /* right line */
                    content: '';
                    width: (16/16rem);
                    height: (2/16rem);
                    background-color: #767676;
                    opacity: 1;
                    border-radius: 2px;
                    position: absolute;
                    display: block;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%) rotate(90deg);
                    transition: transform .5s;
                }
            }
        }

        .cs-button-text {
            width: 90%;
            display: block;
        }

        .cs-item-p {
            /* 14px - 16px */
            font-size: clamp(0.875rem, 1.5vw, 1rem);
            line-height: 1.5em;
            width: 90%;
            max-width: (541/16rem);
            height: 0;
            margin: 0;
            padding: 0;
            opacity: 0;
            color: var(--bodyTextColor);
            /* clips the text so it doesn't show up */
            overflow: hidden;
            transform: scaleY(0);
            transform-origin: top;
            transition:
                opacity 0.3s,
                transform .3s,
                padding-bottom 0.3s;
        }

        .cs-image-group {
            /* everything inside the image group is in ems so the font size will scale them down.  Font size minimum is tied to view width size, and grows until it reaches 75% of the value on em */
            font-size:~"min(2.3vw, .89em)";
            width: (630/16em);
            min-height: (1010/16em);
            display: flex;
            gap: (20/16em);
            position: relative;
            z-index: 1;
        }

        .cs-picture {
            overflow: hidden;
            display: block;
            position: relative;
            z-index: 1;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                position: absolute;
                top: 0;
                left: 0;
            }
        }

        .cs-row {
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: (20/16em);
        }

        .cs-picture1 {
            width: (305/16em);
            height: 40.594059%;
            margin-top: (114/16em);
        }

        .cs-picture2 {
            width: (305/16em);
            height: 60.891089%;
        }

        .cs-picture3 {
            width: (305/16em);
            height: 60%;
        }

        .cs-picture4 {
            width: (305/16em);
            height: 27.425743%;
        }
    }

}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbsr-1575 {
        .cs-container {
            max-width: (1280/16rem);
            flex-direction: row;
            justify-content: space-between;
            align-items: stretch;
        }

        .cs-content {
            text-align: left;
            align-items: flex-start;
        }

        .cs-image-group {
            font-size:~"min(1.2vw, 1em)";
            height: auto;
            /* -210px to -384px */
            margin-top: ~"calc(clamp(13.125rem, 23vw, 24rem)*-1)";
            flex: none;
            /* sends it to the right in the 2nd position */
            order: 2;
        }
    }
}

/*-- -------------------------- -->
<---           Stats            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #stats-1575 {
        padding: var(--sectionPadding);
        background-color: #1a1a1a;
        position: relative;
        z-index: 1;

        .cs-container {
            width: 100%;
            /* Changes to 1280px at small desktop */
            max-width: (955/16rem);
            margin: auto;
        }

        .cs-card-group {
            width: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            row-gap: (60/16rem);
        }

        .cs-item {
            text-align: center;
            list-style: none;
            width: 47%;
            max-width: (240/16rem);
            margin: 0;
            padding: 0 (12/16rem);
            /* prevents padding and border from affecting height and width */
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .cs-icon {
            width: (48/16rem);
            height: auto;
            margin: 0 0 (24/16rem);
            display: block;
        }

        .cs-number {
            /* 31px - 61px */
            font-size: clamp(1.9375rem, 4.3vw, 2.4375rem);
            line-height: 1.2em;
            text-align: inherit;
            font-weight: 400;
            margin: 0 0 (4/16rem) 0;
            color: var(--bodyTextColorWhite);
            display: block;
        }

        .cs-desc {
            /* 16px - 20px */
            font-size: clamp(1rem, 2vw, 1.15rem);
            line-height: 1.5em;
            text-align: inherit;
            width: 100%;
            color: var(--bodyTextColorWhite);
        }

        .cs-background {
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;

            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) {
    #stats-1575 {
        .cs-card-group {
            justify-content: space-between;
        }
    }
}    

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #stats-1575 {
        .cs-container {
            max-width: (1280/16rem);
        }

        .cs-card-group {
            max-width: (630/16rem);
            justify-content: flex-start;
        }

        .cs-item {
            text-align: left;
            max-width: (200/16rem);
            align-items: flex-start;
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #stats-1575 {
            background-color: rgba(0, 0, 0, .6);
        }
    }
}

/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbsr-1575 {
        padding: var(--sectionPadding);
        
        .cs-container {
            width: 100%;
            /* changes to 1280px at small desktop */
            max-width: (584/16rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 48px - 64px */
            gap: clamp(3rem, 6vw, 4rem);
        }

        .cs-content {
            text-align: center;
            max-width: (630/16rem);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .cs-title {
            /* 20 characters wide including spaces */
            max-width: 20ch;
            margin: 0 0 (32/16rem) 0;
        }

        .cs-faq-group {
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: (12/16rem);
        }

        .cs-faq-item {
            text-align: left;
            list-style: none;
            width: 100%;
            background-color: #f7f7f7;
            /* 12px - 16px */
            padding: clamp(.75rem, 2vw, 1rem) (16/16rem);
            box-sizing: border-box;
            transition: border-bottom 0.3s;

            &.active {
                border-color: var(--primaryLight);
                .cs-button {
                    color: var(--primary);
                    .cs-indicator {
                        &:before {
                            transform: translate(-50%, -50%) rotate(360deg);
                        }

                        &:after {
                            transform: translate(-50%, -50%) rotate(0deg);
                        }
                    }
                }
                .cs-item-p {
                    height: auto;
                    padding-top: (16/16rem);
                    opacity: 1;
                    transform: scaleY(1);
                }
            }
        }

        .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: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            position: relative;
            transition:
                background-color 0.3s,
                color 0.3s;

            &:hover {
                cursor: pointer;
            }

            .cs-indicator {
                width: (24/16rem);
                height: (24/16rem);
                position: relative;
                z-index: 1;

                &:before {
                    /* left line */
                    content: '';
                    width: (16/16rem);
                    height: (2/16rem);
                    background-color: #767676;
                    opacity: 1;
                    border-radius: 2px;
                    position: absolute;
                    display: block;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    transition: transform .5s;
                }
    
                &:after {
                    /* right line */
                    content: '';
                    width: (16/16rem);
                    height: (2/16rem);
                    background-color: #767676;
                    opacity: 1;
                    border-radius: 2px;
                    position: absolute;
                    display: block;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%) rotate(90deg);
                    transition: transform .5s;
                }
            }
        }

        .cs-button-text {
            width: 90%;
            display: block;
        }

        .cs-item-p {
            /* 14px - 16px */
            font-size: clamp(0.875rem, 1.5vw, 1rem);
            line-height: 1.5em;
            width: 90%;
            max-width: (541/16rem);
            height: 0;
            margin: 0;
            padding: 0;
            opacity: 0;
            color: var(--bodyTextColor);
            /* clips the text so it doesn't show up */
            overflow: hidden;
            transform: scaleY(0);
            transform-origin: top;
            transition:
                opacity 0.3s,
                transform .3s,
                padding-bottom 0.3s;
        }

        .cs-image-group {
            /* everything inside the image group is in ems so the font size will scale them down.  Font size minimum is tied to view width size, and grows until it reaches 75% of the value on em */
            font-size:~"min(2.3vw, .89em)";
            width: (630/16em);
            min-height: (1010/16em);
            display: flex;
            gap: (20/16em);
            position: relative;
            z-index: 1;
        }

        .cs-picture {
            overflow: hidden;
            display: block;
            position: relative;
            z-index: 1;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                position: absolute;
                top: 0;
                left: 0;
            }
        }

        .cs-row {
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: (20/16em);
        }

        .cs-picture1 {
            width: (305/16em);
            height: 40.594059%;
            margin-top: (114/16em);
        }

        .cs-picture2 {
            width: (305/16em);
            height: 60.891089%;
        }

        .cs-picture3 {
            width: (305/16em);
            height: 60%;
        }

        .cs-picture4 {
            width: (305/16em);
            height: 27.425743%;
        }
    }

}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbsr-1575 {
        .cs-container {
            max-width: (1280/16rem);
            flex-direction: row;
            justify-content: space-between;
            align-items: stretch;
        }

        .cs-content {
            text-align: left;
            align-items: flex-start;
        }

        .cs-image-group {
            font-size:~"min(1.2vw, 1em)";
            height: auto;
            /* -210px to -384px */
            margin-top: ~"calc(clamp(13.125rem, 23vw, 24rem)*-1)";
            flex: none;
            /* sends it to the right in the 2nd position */
            order: 2;
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #sbsr-1575 {
            .cs-title, .cs-text, .cs-item-p, .cs-button {
                color: var(--bodyTextColorWhite);
            }

            .cs-item-p {
                opacity: .8;
            }

            .cs-faq-item {
                background-color: rgba(0, 0, 0, .2);
            }

            .cs-icon {
                filter: brightness(125%);
            }
        }
    }
}

/*-- -------------------------- -->
<---           Stats            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #stats-1575 {
        padding: var(--sectionPadding);
        background-color: #1a1a1a;
        position: relative;
        z-index: 1;

        .cs-container {
            width: 100%;
            /* Changes to 1280px at small desktop */
            max-width: calc(955 / 16 * 1rem);
            margin: auto;
        }

        .cs-card-group {
            width: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            row-gap: calc(60 / 16 * 1rem);
        }

        .cs-item {
            text-align: center;
            list-style: none;
            width: 47%;
            max-width: calc(240 / 16 * 1rem);
            margin: 0;
            padding: 0 calc(12 / 16 * 1rem);
            /* prevents padding and border from affecting height and width */
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .cs-icon {
            width: calc(48 / 16 * 1rem);
            height: auto;
            margin: 0 0 calc(24 / 16 * 1rem);
            display: block;
        }

        .cs-number {
            /* 31px - 61px */
            font-size: clamp(1.9375rem, 4.3vw, 2.4375rem);
            line-height: 1.2em;
            text-align: inherit;
            font-weight: 400;
            margin: 0 0 calc(4 / 16 * 1rem) 0;
            color: var(--bodyTextColorWhite);
            display: block;
        }

        .cs-desc {
            /* 16px - 20px */
            font-size: clamp(1rem, 2vw, 1.15rem);
            line-height: 1.5em;
            text-align: inherit;
            width: 100%;
            color: var(--bodyTextColorWhite);
        }

        .cs-background {
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;

            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) {
    #stats-1575 {
        .cs-card-group {
            justify-content: space-between;
        }
    }
}    

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #stats-1575 {
        .cs-container {
            max-width: calc(1280 / 16 * 1rem);
        }

        .cs-card-group {
            max-width: calc(630 / 16 * 1rem);
            justify-content: flex-start;
        }

        .cs-item {
            text-align: left;
            max-width: calc(200 / 16 * 1rem);
            align-items: flex-start;
        }
    }
}

/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbsr-1575 {
        padding: var(--sectionPadding);
        
        .cs-container {
            width: 100%;
            /* changes to 1280px at small desktop */
            max-width: calc(584 / 16 * 1rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 48px - 64px */
            gap: clamp(3rem, 6vw, 4rem);
        }

        .cs-content {
            text-align: center;
            max-width: calc(630 / 16 * 1rem);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .cs-title {
            /* 20 characters wide including spaces */
            max-width: 20ch;
            margin: 0 0 calc(32 / 16 * 1rem) 0;
        }

        .cs-faq-group {
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: calc(12 / 16 * 1rem);
        }

        .cs-faq-item {
            text-align: left;
            list-style: none;
            width: 100%;
            background-color: #f7f7f7;
            /* 12px - 16px */
            padding: clamp(.75rem, 2vw, 1rem) calc(16 / 16 * 1rem);
            box-sizing: border-box;
            transition: border-bottom 0.3s;

            &.active {
                border-color: var(--primaryLight);
                .cs-button {
                    color: var(--primary);
                    .cs-indicator {
                        &:before {
                            transform: translate(-50%, -50%) rotate(360deg);
                        }

                        &:after {
                            transform: translate(-50%, -50%) rotate(0deg);
                        }
                    }
                }
                .cs-item-p {
                    height: auto;
                    padding-top: calc(16 / 16 * 1rem);
                    opacity: 1;
                    transform: scaleY(1);
                }
            }
        }

        .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: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            position: relative;
            transition:
                background-color 0.3s,
                color 0.3s;

            &:hover {
                cursor: pointer;
            }

            .cs-indicator {
                width: calc(24 / 16 * 1rem);
                height: calc(24 / 16 * 1rem);
                position: relative;
                z-index: 1;

                &:before {
                    /* left line */
                    content: '';
                    width: calc(16 / 16 * 1rem);
                    height: calc(2 / 16 * 1rem);
                    background-color: #767676;
                    opacity: 1;
                    border-radius: 2px;
                    position: absolute;
                    display: block;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    transition: transform .5s;
                }
    
                &:after {
                    /* right line */
                    content: '';
                    width: calc(16 / 16 * 1rem);
                    height: calc(2 / 16 * 1rem);
                    background-color: #767676;
                    opacity: 1;
                    border-radius: 2px;
                    position: absolute;
                    display: block;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%) rotate(90deg);
                    transition: transform .5s;
                }
            }
        }

        .cs-button-text {
            width: 90%;
            display: block;
        }

        .cs-item-p {
            /* 14px - 16px */
            font-size: clamp(0.875rem, 1.5vw, 1rem);
            line-height: 1.5em;
            width: 90%;
            max-width: calc(541 / 16 * 1rem);
            height: 0;
            margin: 0;
            padding: 0;
            opacity: 0;
            color: var(--bodyTextColor);
            /* clips the text so it doesn't show up */
            overflow: hidden;
            transform: scaleY(0);
            transform-origin: top;
            transition:
                opacity 0.3s,
                transform .3s,
                padding-bottom 0.3s;
        }

        .cs-image-group {
            /* everything inside the image group is in ems so the font size will scale them down.  Font size minimum is tied to view width size, and grows until it reaches 75% of the value on em */
            font-size: min(2.3vw, .89em);
            width: calc(630 / 16 * 1em);
            min-height: calc(1010 / 16 * 1em);
            display: flex;
            gap: calc(20 / 16 * 1em);
            position: relative;
            z-index: 1;
        }

        .cs-picture {
            overflow: hidden;
            display: block;
            position: relative;
            z-index: 1;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                position: absolute;
                top: 0;
                left: 0;
            }
        }

        .cs-row {
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: calc(20 / 16 * 1em);
        }

        .cs-picture1 {
            width: calc(305 / 16 * 1em);
            height: 40.594059%;
            margin-top: calc(114 / 16 * 1em);
        }

        .cs-picture2 {
            width: calc(305 / 16 * 1em);
            height: 60.891089%;
        }

        .cs-picture3 {
            width: calc(305 / 16 * 1em);
            height: 60%;
        }

        .cs-picture4 {
            width: calc(305 / 16 * 1em);
            height: 27.425743%;
        }
    }

}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbsr-1575 {
        .cs-container {
            max-width: calc(1280 / 16 * 1rem);
            flex-direction: row;
            justify-content: space-between;
            align-items: stretch;
        }

        .cs-content {
            text-align: left;
            align-items: flex-start;
        }

        .cs-image-group {
            font-size: min(1.2vw, 1em);
            height: auto;
            /* -210px to -384px */
            margin-top: calc(clamp(13.125rem, 23vw, 24rem)*-1);
            flex: none;
            /* sends it to the right in the 2nd position */
            order: 2;
        }
    }
}

/*-- -------------------------- -->
<---           Stats            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #stats-1575 {
        padding: var(--sectionPadding);
        background-color: #1a1a1a;
        position: relative;
        z-index: 1;

        .cs-container {
            width: 100%;
            /* Changes to 1280px at small desktop */
            max-width: calc(955 / 16 * 1rem);
            margin: auto;
        }

        .cs-card-group {
            width: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            row-gap: calc(60 / 16 * 1rem);
        }

        .cs-item {
            text-align: center;
            list-style: none;
            width: 47%;
            max-width: calc(240 / 16 * 1rem);
            margin: 0;
            padding: 0 calc(12 / 16 * 1rem);
            /* prevents padding and border from affecting height and width */
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .cs-icon {
            width: calc(48 / 16 * 1rem);
            height: auto;
            margin: 0 0 calc(24 / 16 * 1rem);
            display: block;
        }

        .cs-number {
            /* 31px - 61px */
            font-size: clamp(1.9375rem, 4.3vw, 2.4375rem);
            line-height: 1.2em;
            text-align: inherit;
            font-weight: 400;
            margin: 0 0 calc(4 / 16 * 1rem) 0;
            color: var(--bodyTextColorWhite);
            display: block;
        }

        .cs-desc {
            /* 16px - 20px */
            font-size: clamp(1rem, 2vw, 1.15rem);
            line-height: 1.5em;
            text-align: inherit;
            width: 100%;
            color: var(--bodyTextColorWhite);
        }

        .cs-background {
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;

            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) {
    #stats-1575 {
        .cs-card-group {
            justify-content: space-between;
        }
    }
}    

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #stats-1575 {
        .cs-container {
            max-width: calc(1280 / 16 * 1rem);
        }

        .cs-card-group {
            max-width: calc(630 / 16 * 1rem);
            justify-content: flex-start;
        }

        .cs-item {
            text-align: left;
            max-width: calc(200 / 16 * 1rem);
            align-items: flex-start;
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #stats-1575 {
            background-color: rgba(0, 0, 0, .6);
        }
    }
}

/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbsr-1575 {
        padding: var(--sectionPadding);
        
        .cs-container {
            width: 100%;
            /* changes to 1280px at small desktop */
            max-width: calc(584 / 16 * 1rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 48px - 64px */
            gap: clamp(3rem, 6vw, 4rem);
        }

        .cs-content {
            text-align: center;
            max-width: calc(630 / 16 * 1rem);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .cs-title {
            /* 20 characters wide including spaces */
            max-width: 20ch;
            margin: 0 0 calc(32 / 16 * 1rem) 0;
        }

        .cs-faq-group {
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: calc(12 / 16 * 1rem);
        }

        .cs-faq-item {
            text-align: left;
            list-style: none;
            width: 100%;
            background-color: #f7f7f7;
            /* 12px - 16px */
            padding: clamp(.75rem, 2vw, 1rem) calc(16 / 16 * 1rem);
            box-sizing: border-box;
            transition: border-bottom 0.3s;

            &.active {
                border-color: var(--primaryLight);
                .cs-button {
                    color: var(--primary);
                    .cs-indicator {
                        &:before {
                            transform: translate(-50%, -50%) rotate(360deg);
                        }

                        &:after {
                            transform: translate(-50%, -50%) rotate(0deg);
                        }
                    }
                }
                .cs-item-p {
                    height: auto;
                    padding-top: calc(16 / 16 * 1rem);
                    opacity: 1;
                    transform: scaleY(1);
                }
            }
        }

        .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: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            position: relative;
            transition:
                background-color 0.3s,
                color 0.3s;

            &:hover {
                cursor: pointer;
            }

            .cs-indicator {
                width: calc(24 / 16 * 1rem);
                height: calc(24 / 16 * 1rem);
                position: relative;
                z-index: 1;

                &:before {
                    /* left line */
                    content: '';
                    width: calc(16 / 16 * 1rem);
                    height: calc(2 / 16 * 1rem);
                    background-color: #767676;
                    opacity: 1;
                    border-radius: 2px;
                    position: absolute;
                    display: block;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    transition: transform .5s;
                }
    
                &:after {
                    /* right line */
                    content: '';
                    width: calc(16 / 16 * 1rem);
                    height: calc(2 / 16 * 1rem);
                    background-color: #767676;
                    opacity: 1;
                    border-radius: 2px;
                    position: absolute;
                    display: block;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%) rotate(90deg);
                    transition: transform .5s;
                }
            }
        }

        .cs-button-text {
            width: 90%;
            display: block;
        }

        .cs-item-p {
            /* 14px - 16px */
            font-size: clamp(0.875rem, 1.5vw, 1rem);
            line-height: 1.5em;
            width: 90%;
            max-width: calc(541 / 16 * 1rem);
            height: 0;
            margin: 0;
            padding: 0;
            opacity: 0;
            color: var(--bodyTextColor);
            /* clips the text so it doesn't show up */
            overflow: hidden;
            transform: scaleY(0);
            transform-origin: top;
            transition:
                opacity 0.3s,
                transform .3s,
                padding-bottom 0.3s;
        }

        .cs-image-group {
            /* everything inside the image group is in ems so the font size will scale them down.  Font size minimum is tied to view width size, and grows until it reaches 75% of the value on em */
            font-size: min(2.3vw, .89em);
            width: calc(630 / 16 * 1em);
            min-height: calc(1010 / 16 * 1em);
            display: flex;
            gap: calc(20 / 16 * 1em);
            position: relative;
            z-index: 1;
        }

        .cs-picture {
            overflow: hidden;
            display: block;
            position: relative;
            z-index: 1;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                position: absolute;
                top: 0;
                left: 0;
            }
        }

        .cs-row {
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: calc(20 / 16 * 1em);
        }

        .cs-picture1 {
            width: calc(305 / 16 * 1em);
            height: 40.594059%;
            margin-top: calc(114 / 16 * 1em);
        }

        .cs-picture2 {
            width: calc(305 / 16 * 1em);
            height: 60.891089%;
        }

        .cs-picture3 {
            width: calc(305 / 16 * 1em);
            height: 60%;
        }

        .cs-picture4 {
            width: calc(305 / 16 * 1em);
            height: 27.425743%;
        }
    }

}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbsr-1575 {
        .cs-container {
            max-width: calc(1280 / 16 * 1rem);
            flex-direction: row;
            justify-content: space-between;
            align-items: stretch;
        }

        .cs-content {
            text-align: left;
            align-items: flex-start;
        }

        .cs-image-group {
            font-size: min(1.2vw, 1em);
            height: auto;
            /* -210px to -384px */
            margin-top: calc(clamp(13.125rem, 23vw, 24rem)*-1);
            flex: none;
            /* sends it to the right in the 2nd position */
            order: 2;
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #sbsr-1575 {
            .cs-title, .cs-text, .cs-item-p, .cs-button {
                color: var(--bodyTextColorWhite);
            }

            .cs-item-p {
                opacity: .8;
            }

            .cs-faq-item {
                background-color: rgba(0, 0, 0, .2);
            }

            .cs-icon {
                filter: brightness(125%);
            }
        }
    }
}

:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary: #ff6a3e;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

body {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
}

.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;
}

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
}

:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary: #ff6a3e;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

body {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: (4/16rem);
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: (700/16rem);
    margin: 0 0 (16/16rem) 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: (650/16rem);
    margin: 0;
    color: var(--bodyTextColor);
}

:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary: #ff6a3e;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

body {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: calc(4 / 16 * 1rem);
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: calc(700 / 16 * 1rem);
    margin: 0 0 calc(16 / 16 * 1rem) 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: calc(650 / 16 * 1rem);
    margin: 0;
    color: var(--bodyTextColor);
}