Code of Stitch

Reverse

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

<section id="sbsr-1363">
    <div class="cs-container">
        <div class="cs-image-group">
            <picture class="cs-background">
                <!--Mobile Image-->
                <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/people10.jpg">
                <!--Tablet and above Image-->
                <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/people10.jpg">
                <img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/people10.jpg" alt="people" width="605868" height="690">
            </picture>
            <div class="cs-box">
                <img class="cs-box-icon" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/gear-white.svg" alt="people" width="60" height="60">
                <span class="cs-desc">
                    We’ve Over 26 Years of Experience
                </span>
            </div>
        </div>
        <div class="cs-content">
            <span class="cs-topper">WHy choose us</span>
            <h2 class="cs-title">Why Choose Our Professional Digital Solutions</h2>
            <p class="cs-text">
                On the other hand, we denounce with righteous indignation dislike men who areso beguiled and demoralized by the charms of pleasure moment blinded by desire that they cannot foresee
            </p>
            <ul class="cs-card-group">
                <li class="cs-item">
                    <h3 class="cs-h3">
                        <img class="cs-h3-icon" aria-hidden="true" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/trophy.svg" alt="icon" width="32" height="32">
                        Quality Services
                    </h3>
                    <p class="cs-item-text">
                        There are many variations of but the majority is simply free suffered.
                    </p>
                </li>
                <li class="cs-item">
                    <h3 class="cs-h3">
                        <img class="cs-h3-icon" aria-hidden="true" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/circle-check.svg" alt="icon" width="32" height="32">
                        Quality Services
                    </h3>
                    <p class="cs-item-text">
                        There are many variations of but the majority is simply free suffered.
                    </p>
                </li>
            </ul>
            <ul class="cs-ul">
                <li class="cs-li">
                    <img class="cs-icon" aria-hidden="true" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/black-check.svg" alt="checkmark" width="24" height="24">
                    Digital Solutions Provider Agency
                </li>
                <li class="cs-li">
                    <img class="cs-icon" aria-hidden="true" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/black-check.svg" alt="checkmark" width="24" height="24">
                    Unicode, UTF8 & Character Sets The Ultimate Guide
                </li>
                <li class="cs-li">
                    <img class="cs-icon" aria-hidden="true" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/black-check.svg" alt="checkmark" width="24" height="24">
                    WordPress Guides For The Advanced Beginner
                </li>
                <li class="cs-li">
                    <img class="cs-icon" aria-hidden="true" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/black-check.svg" alt="checkmark" width="24" height="24">
                    Digital Clean Checklist Prepared New Year
                </li>
            </ul>
            <a href="" class="cs-button-solid">Discover More</a>
        </div>
    </div>
    <div class="cs-bubbles" aria-hidden="true"></div>
</section>

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    @keyframes floatAnimation {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-2rem);
        }
        100% {
            transform: translateY(0);
        }
    }
    @keyframes floatAnimation2 {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-3rem);
        }
        100% {
            transform: translateY(0);
        }
    }
    #sbsr-1363 {
        padding: var(--sectionPadding);
        position: relative;
        overflow: hidden;
        z-index: 1;
    }
    #sbsr-1363 .cs-container {
        width: 100%;
        /* changes to 1280px at desktop */
        max-width: 36.5rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #sbsr-1363 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 39.375rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }

    #sbsr-1363 .cs-topper {
        color: #767676;
    }
    #sbsr-1363 .cs-title {
        /* 23 characters wide including spaces */
        max-width: 26ch;
    }
    #sbsr-1363 .cs-text {
        margin-bottom: 1rem;
    }
    #sbsr-1363 .cs-text:last-of-type {
        margin-bottom: 1.5rem;
    }
    #sbsr-1363 .cs-card-group {
        width: 100%;
        max-width: 39.375rem;
        margin: 0 0 1.5rem 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(15.625rem, 1fr));
        align-items: center;
        gap: clamp(1rem, 2vw, 1.25rem);
    }
    #sbsr-1363 .cs-item {
        list-style: none;
        /* 16px - 24px */
        padding: clamp(1rem, 3vw, 1.5rem);
        /* prevents padding from affecting height and width */
        box-sizing: border-box;
        background-color: #f7f7f7;
        border-radius: 1rem;
        border: 1px solid #e8e8e8;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    #sbsr-1363 .cs-h3 {
        font-size: 1.25rem;
        line-height: 1.2em;
        font-weight: 700;
        margin: 0;
        color: var(--headerColor);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 0.5rem;
    }
    #sbsr-1363 .cs-h3-icon {
        width: 2rem;
        height: auto;
        display: block;
    }
    #sbsr-1363 .cs-item-text {
        font-size: 0.875rem;
        line-height: 1.5em;
        margin: 0;
        color: var(--bodyTextColor);
    }
    #sbsr-1363 .cs-ul {
        width: 100%;
        margin: 0 0 1.5rem 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    #sbsr-1363 .cs-li {
        font-size: var(--bodyFontSize);
        list-style: none;
        line-height: 1.5em;
        width: 100%;
        color: var(--bodyTextColor);
        display: flex;
        justify-content: flex-start;
        /* push icon top the top so if the list item goes to two lines the icon stays at the top */
        align-items: flex-start;
        gap: 0.5rem;
    }
    #sbsr-1363 .cs-icon {
        width: 1.5rem;
        height: auto;
        /* adds extra space between the icon and top of parent so it's more centered */
        margin-top: 1px;
        display: block;
    }
    #sbsr-1363 .cs-button-solid {
        font-size: 1rem;
        line-height: 3.5rem;
        text-decoration: none;
        font-weight: 700;
        overflow: hidden;
        margin: 0;
        color: #fff;
        padding: 0 3rem;
        border-radius: 1.875rem;
        background-color: var(--primary);
        display: inline-block;
        position: relative;
        z-index: 1;
        transition: color 0.3s;
    }
    #sbsr-1363 .cs-button-solid:before {
        content: "";
        position: absolute;
        display: block;
        height: 100%;
        width: 0%;
        background: #1a1a1a;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width 0.3s;
    }
    #sbsr-1363 .cs-button-solid:hover {
        color: var(--primary);
    }
    #sbsr-1363 .cs-button-solid:hover:before {
        width: 100%;
    }
    #sbsr-1363 .cs-image-group {
        width: 100%;
        max-width: 36.625rem;
        /* Changes to auto at desktop */
        height: 32.5rem;
        /* 32px - 48px */
        border-radius: clamp(2rem, 4vw, 3rem);
        /* clips the corners of the children around the border radius */
        overflow: hidden;
        position: relative;
    }
    #sbsr-1363 .cs-background {
        width: 100%;
        height: 100%;
        /* makes it cover the parent dimensions */
        object-fit: cover;
        display: block;
    }
    #sbsr-1363 .cs-background img {
        width: 100%;
        height: 100%;
        /* makes it cover the parent like a backgorund image */
        object-fit: cover;
        display: block;
    }
    #sbsr-1363 .cs-box {
        text-align: left;
        width: 100%;
        max-width: 19rem;
        padding: 2rem;
        /* prevents padding from affecting height and width */
        box-sizing: border-box;
        background-color: var(--primary);
        /* 48px - 80px */
        border-radius: 2rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        position: absolute;
        /* 12px - 20px */
        right: clamp(0.75rem, 1.9vw, 1.5rem);
        /* 12px - 20px */
        bottom: clamp(0.75rem, 1.9vw, 1.5rem);
    }
    #sbsr-1363 .cs-box-icon {
        width: 3.75rem;
        height: auto;
        display: block;
    }
    #sbsr-1363 .cs-desc {
        font-size: 1.25rem;
        line-height: 1.2em;
        text-align: inherit;
        font-weight: 700;
        width: 100%;
        margin: 0;
        color: var(--bodyTextColorWhite);
    }
    #sbsr-1363 .cs-bubbles {
        font-size: min(2.5vw, 0.7em);
        width: 26.1875em;
        height: 26.6875em;
        position: absolute;
        /* reset at larger desktop */
        right: -16.25em;
        /* changes to 30px at desktop */
        bottom: -3.125em;
        z-index: -1;
    }
    #sbsr-1363 .cs-bubbles:before {
        /* white border bubble */
        content: "";
        width: 20.625em;
        height: 20.625em;
        background: transparent;
        border: 1px solid #1a1a1a;
        border-radius: 50%;
        opacity: 1;
        position: absolute;
        display: block;
        top: 0;
        right: 0;
        animation-name: floatAnimation;
        animation-duration: 5s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
    }
    #sbsr-1363 .cs-bubbles:after {
        /* orange bubble */
        content: "";
        width: 16.25em;
        height: 16.25em;
        background: var(--primary);
        opacity: 0.15;
        border-radius: 50%;
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -1;
        animation-name: floatAnimation2;
        animation-duration: 14s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbsr-1363 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
    }
    #sbsr-1363 .cs-image-group {
        height: auto;
        /* sends it to the right in the 2nd position */
        order: 2;
    }
    #sbsr-1363 .cs-bubbles {
        font-size: min(2.5vw, 1em);
        right: -6.25rem;
        bottom: 0rem;
    }
}
/* Large Desktop 1600px */
@media only screen and (min-width: 100rem) {
    #sbsr-1363 .cs-bubbles {
        margin-right: 46.875rem;
        left: auto;
        right: 50%;
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    @keyframes floatAnimation {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-2rem);
        }
        100% {
            transform: translateY(0);
        }
    }
    @keyframes floatAnimation2 {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-3rem);
        }
        100% {
            transform: translateY(0);
        }
    }
    #sbsr-1363 {
        padding: var(--sectionPadding);
        position: relative;
        overflow: hidden;
        z-index: 1;
    }
    #sbsr-1363 .cs-container {
        width: 100%;
        /* changes to 1280px at desktop */
        max-width: 36.5rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #sbsr-1363 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 39.375rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }

    #sbsr-1363 .cs-topper {
        color: #767676;
    }
    #sbsr-1363 .cs-title {
        /* 23 characters wide including spaces */
        max-width: 26ch;
    }
    #sbsr-1363 .cs-text {
        margin-bottom: 1rem;
    }
    #sbsr-1363 .cs-text:last-of-type {
        margin-bottom: 1.5rem;
    }
    #sbsr-1363 .cs-card-group {
        width: 100%;
        max-width: 39.375rem;
        margin: 0 0 1.5rem 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(15.625rem, 1fr));
        align-items: center;
        gap: clamp(1rem, 2vw, 1.25rem);
    }
    #sbsr-1363 .cs-item {
        list-style: none;
        /* 16px - 24px */
        padding: clamp(1rem, 3vw, 1.5rem);
        /* prevents padding from affecting height and width */
        box-sizing: border-box;
        background-color: #f7f7f7;
        border-radius: 1rem;
        border: 1px solid #e8e8e8;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    #sbsr-1363 .cs-h3 {
        font-size: 1.25rem;
        line-height: 1.2em;
        font-weight: 700;
        margin: 0;
        color: var(--headerColor);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 0.5rem;
    }
    #sbsr-1363 .cs-h3-icon {
        width: 2rem;
        height: auto;
        display: block;
    }
    #sbsr-1363 .cs-item-text {
        font-size: 0.875rem;
        line-height: 1.5em;
        margin: 0;
        color: var(--bodyTextColor);
    }
    #sbsr-1363 .cs-ul {
        width: 100%;
        margin: 0 0 1.5rem 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    #sbsr-1363 .cs-li {
        font-size: var(--bodyFontSize);
        list-style: none;
        line-height: 1.5em;
        width: 100%;
        color: var(--bodyTextColor);
        display: flex;
        justify-content: flex-start;
        /* push icon top the top so if the list item goes to two lines the icon stays at the top */
        align-items: flex-start;
        gap: 0.5rem;
    }
    #sbsr-1363 .cs-icon {
        width: 1.5rem;
        height: auto;
        /* adds extra space between the icon and top of parent so it's more centered */
        margin-top: 1px;
        display: block;
    }
    #sbsr-1363 .cs-button-solid {
        font-size: 1rem;
        line-height: 3.5rem;
        text-decoration: none;
        font-weight: 700;
        overflow: hidden;
        margin: 0;
        color: #fff;
        padding: 0 3rem;
        border-radius: 1.875rem;
        background-color: var(--primary);
        display: inline-block;
        position: relative;
        z-index: 1;
        transition: color 0.3s;
    }
    #sbsr-1363 .cs-button-solid:before {
        content: "";
        position: absolute;
        display: block;
        height: 100%;
        width: 0%;
        background: #1a1a1a;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width 0.3s;
    }
    #sbsr-1363 .cs-button-solid:hover {
        color: var(--primary);
    }
    #sbsr-1363 .cs-button-solid:hover:before {
        width: 100%;
    }
    #sbsr-1363 .cs-image-group {
        width: 100%;
        max-width: 36.625rem;
        /* Changes to auto at desktop */
        height: 32.5rem;
        /* 32px - 48px */
        border-radius: clamp(2rem, 4vw, 3rem);
        /* clips the corners of the children around the border radius */
        overflow: hidden;
        position: relative;
    }
    #sbsr-1363 .cs-background {
        width: 100%;
        height: 100%;
        /* makes it cover the parent dimensions */
        object-fit: cover;
        display: block;
    }
    #sbsr-1363 .cs-background img {
        width: 100%;
        height: 100%;
        /* makes it cover the parent like a backgorund image */
        object-fit: cover;
        display: block;
    }
    #sbsr-1363 .cs-box {
        text-align: left;
        width: 100%;
        max-width: 19rem;
        padding: 2rem;
        /* prevents padding from affecting height and width */
        box-sizing: border-box;
        background-color: var(--primary);
        /* 48px - 80px */
        border-radius: 2rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        position: absolute;
        /* 12px - 20px */
        right: clamp(0.75rem, 1.9vw, 1.5rem);
        /* 12px - 20px */
        bottom: clamp(0.75rem, 1.9vw, 1.5rem);
    }
    #sbsr-1363 .cs-box-icon {
        width: 3.75rem;
        height: auto;
        display: block;
    }
    #sbsr-1363 .cs-desc {
        font-size: 1.25rem;
        line-height: 1.2em;
        text-align: inherit;
        font-weight: 700;
        width: 100%;
        margin: 0;
        color: var(--bodyTextColorWhite);
    }
    #sbsr-1363 .cs-bubbles {
        font-size: min(2.5vw, 0.7em);
        width: 26.1875em;
        height: 26.6875em;
        position: absolute;
        /* reset at larger desktop */
        right: -16.25em;
        /* changes to 30px at desktop */
        bottom: -3.125em;
        z-index: -1;
    }
    #sbsr-1363 .cs-bubbles:before {
        /* white border bubble */
        content: "";
        width: 20.625em;
        height: 20.625em;
        background: transparent;
        border: 1px solid #1a1a1a;
        border-radius: 50%;
        opacity: 1;
        position: absolute;
        display: block;
        top: 0;
        right: 0;
        animation-name: floatAnimation;
        animation-duration: 5s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
    }
    #sbsr-1363 .cs-bubbles:after {
        /* orange bubble */
        content: "";
        width: 16.25em;
        height: 16.25em;
        background: var(--primary);
        opacity: 0.15;
        border-radius: 50%;
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -1;
        animation-name: floatAnimation2;
        animation-duration: 14s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbsr-1363 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
    }
    #sbsr-1363 .cs-image-group {
        height: auto;
        /* sends it to the right in the 2nd position */
        order: 2;
    }
    #sbsr-1363 .cs-bubbles {
        font-size: min(2.5vw, 1em);
        right: -6.25rem;
        bottom: 0rem;
    }
}
/* Large Desktop 1600px */
@media only screen and (min-width: 100rem) {
    #sbsr-1363 .cs-bubbles {
        margin-right: 46.875rem;
        left: auto;
        right: 50%;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #sbsr-1363 .cs-topper {
        color: var(--primary);
    }
    body.dark-mode #sbsr-1363 .cs-title,
    body.dark-mode #sbsr-1363 .cs-text,
    body.dark-mode #sbsr-1363 .cs-li,
    body.dark-mode #sbsr-1363 .cs-item-text {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #sbsr-1363 .cs-text,
    body.dark-mode #sbsr-1363 .cs-li,
    body.dark-mode #sbsr-1363 .cs-item-text {
        opacity: 0.8;
    }
    body.dark-mode #sbsr-1363 .cs-item {
        background-color: rgba(0, 0, 0, 0.2);
        border-color: rgba(255, 255, 255, 0.2);
    }
    body.dark-mode #sbsr-1363 .cs-h3 {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #sbsr-1363 .cs-icon {
        filter: grayscale(1) brightness(1000%);
    }
    body.dark-mode #sbsr-1363 .cs-bubbles:before {
        border-color: rgba(255, 255, 255, 0.2);
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    @keyframes floatAnimation {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-2rem);
        }
        100% {
            transform: translateY(0);
        }
    }

    @keyframes floatAnimation2 {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-3rem);
        }
        100% {
            transform: translateY(0);
        }
    }

    #sbsr-1363 {
        padding: var(--sectionPadding);
        position: relative;
        overflow: hidden;
        z-index: 1;

        .cs-container {
            width: 100%;
            /* changes to 1280px at desktop */
            max-width: (584/16rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 48px - 64px */
            gap: clamp(3rem, 6vw, 4rem);
        }

        .cs-content {
            /* set text align to left if content needs to be left aligned */
            text-align: left;
            width: 100%;
            max-width: (630/16rem);
            display: flex;
            flex-direction: column;
            /* centers content horizontally, set to flex-start to left align */
            align-items: flex-start;
        }

        .cs-topper {
            color: #767676;
        }

        .cs-title {
            /* 23 characters wide including spaces */
            max-width: 26ch;
        }

        .cs-text {
            margin-bottom: (16/16rem);
            &:last-of-type {
                margin-bottom: (24/16rem);
            }
        }

        .cs-card-group {
            width: 100%;
            max-width: (630/16rem);
            margin: 0 0 (24/16rem) 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(15.625rem, 1fr));
            align-items: center;
            gap: clamp(1rem, 2vw, 1.25rem);
        }

        .cs-item {
            list-style: none;
            /* 16px - 24px */
            padding: clamp(1rem, 3vw, 1.5rem);
            /* prevents padding from affecting height and width */
            box-sizing: border-box;
            background-color: #f7f7f7;
            border-radius: (16/16rem);
            border: 1px solid #e8e8e8;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: (12/16rem);
        }

        .cs-h3 {
            font-size: (20/16rem);
            line-height: 1.2em;
            font-weight: 700;
            margin: 0;
            color: var(--headerColor);
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: (8/16rem);
        }

        .cs-h3-icon {
            width: (32/16rem);
            height: auto;
            display: block;
        }

        .cs-item-text {
            font-size: (14/16rem);
            line-height: 1.5em;
            margin: 0;
            color: var(--bodyTextColor);
        }

        .cs-ul {
            width: 100%;
            margin: 0 0 (24/16rem) 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: (12/16rem);
        }

        .cs-li {
            font-size: var(--bodyFontSize);
            list-style: none;
            line-height: 1.5em;
            width: 100%;
            color: var(--bodyTextColor);
            display: flex;
            justify-content: flex-start;
            /* push icon top the top so if the list item goes to two lines the icon stays at the top */
            align-items: flex-start;
            gap: (8/16rem);
        }

        .cs-icon {
            width: (24/16rem);
            height: auto;
            /* adds extra space between the icon and top of parent so it's more centered */
            margin-top: 1px;
            display: block;
        }

        .cs-button-solid {
            font-size: (16/16rem);
            line-height: (56/16rem);
            text-decoration: none;
            font-weight: 700;
            overflow: hidden;
            margin: 0;
            color: #fff;
            padding: 0 (48/16rem);
            border-radius: (30/16rem);
            background-color: var(--primary);
            display: inline-block;
            position: relative;
            z-index: 1;
            transition: color 0.3s;

            &:before {
                content: "";
                position: absolute;
                display: block;
                height: 100%;
                width: 0%;
                background: #1a1a1a;
                opacity: 1;
                top: 0;
                left: 0;
                z-index: -1;
                transition: width 0.3s;
            }

            &:hover {
                color: var(--primary);
                &:before {
                    width: 100%;
                }
            }
        }

        .cs-image-group {
            width: 100%;
            max-width: (586/16rem);
            /* Changes to auto at desktop */
            height: (520/16rem);
            /* 32px - 48px */
            border-radius: clamp(2rem, 4vw, 3rem);
            /* clips the corners of the children around the border radius */
            overflow: hidden;
            position: relative;
        }

        .cs-background {
            width: 100%;
            height: 100%;
            /* makes it cover the parent dimensions */
            object-fit: cover;
            display: block;

            img {
                width: 100%;
                height: 100%;
                /* makes it cover the parent like a backgorund image */
                object-fit: cover;
                display: block;
            }
        }

        .cs-box {
            text-align: left;
            width: 100%;
            max-width: (304/16rem);
            padding: (32/16rem);
            /* prevents padding from affecting height and width */
            box-sizing: border-box;
            background-color: var(--primary);
            /* 48px - 80px */
            border-radius: (32/16rem);
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: (24/16rem);
            position: absolute;
            /* 12px - 20px */
            right: clamp(0.75rem, 1.9vw, 1.5rem);
            /* 12px - 20px */
            bottom: clamp(0.75rem, 1.9vw, 1.5rem);
        }

        .cs-box-icon {
            width: (60/16rem);
            height: auto;
            display: block;
        }

        .cs-desc {
            font-size: (20/16rem);
            line-height: 1.2em;
            text-align: inherit;
            font-weight: 700;
            width: 100%;
            margin: 0;
            color: var(--bodyTextColorWhite);
        }

        .cs-bubbles {
            font-size: ~"min(2.5vw, .7em)";
            width: (419/16em);
            height: (427/16em);
            position: absolute;
            /* reset at larger desktop */
            right: (-260/16em);
            /* changes to 30px at desktop */
            bottom: (-50/16em);
            z-index: -1;

            &:before {
                /* white border bubble */
                content: "";
                width: (330/16em);
                height: (330/16em);
                background: transparent;
                border: 1px solid #1a1a1a;
                border-radius: 50%;
                opacity: 1;
                position: absolute;
                display: block;
                top: 0;
                right: 0;
                animation-name: floatAnimation;
                animation-duration: 5s;
                animation-timing-function: ease-in-out;
                animation-fill-mode: forwards;
                animation-iteration-count: infinite;
            }

            &:after {
                /* orange bubble */
                content: "";
                width: (260/16em);
                height: (260/16em);
                background: var(--primary);
                opacity: 0.15;
                border-radius: 50%;
                display: block;
                position: absolute;
                bottom: 0;
                left: 0;
                z-index: -1;
                animation-name: floatAnimation2;
                animation-duration: 14s;
                animation-timing-function: ease-in-out;
                animation-fill-mode: forwards;
                animation-iteration-count: infinite;
            }
        }
    }
}

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

        .cs-image-group {
            height: auto;
            /* sends it to the right in the 2nd position */
            order: 2;
        }

        .cs-bubbles {
            font-size: ~"min(2.5vw, 1em)";
            right: (-100/16rem);
            bottom: (0/16rem);
        }
    }
}

/* Large Desktop 1600px */
@media only screen and (min-width: 100rem) {
    #sbsr-1363 {
        .cs-bubbles {
            margin-right: (750/16rem);
            left: auto;
            right: 50%;
        }
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    @keyframes floatAnimation {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-2rem);
        }
        100% {
            transform: translateY(0);
        }
    }

    @keyframes floatAnimation2 {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-3rem);
        }
        100% {
            transform: translateY(0);
        }
    }

    #sbsr-1363 {
        padding: var(--sectionPadding);
        position: relative;
        overflow: hidden;
        z-index: 1;

        .cs-container {
            width: 100%;
            /* changes to 1280px at desktop */
            max-width: (584/16rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 48px - 64px */
            gap: clamp(3rem, 6vw, 4rem);
        }

        .cs-content {
            /* set text align to left if content needs to be left aligned */
            text-align: left;
            width: 100%;
            max-width: (630/16rem);
            display: flex;
            flex-direction: column;
            /* centers content horizontally, set to flex-start to left align */
            align-items: flex-start;
        }

        .cs-topper {
            color: #767676;
        }

        .cs-title {
            /* 23 characters wide including spaces */
            max-width: 26ch;
        }

        .cs-text {
            margin-bottom: (16/16rem);
            &:last-of-type {
                margin-bottom: (24/16rem);
            }
        }

        .cs-card-group {
            width: 100%;
            max-width: (630/16rem);
            margin: 0 0 (24/16rem) 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(15.625rem, 1fr));
            align-items: center;
            gap: clamp(1rem, 2vw, 1.25rem);
        }

        .cs-item {
            list-style: none;
            /* 16px - 24px */
            padding: clamp(1rem, 3vw, 1.5rem);
            /* prevents padding from affecting height and width */
            box-sizing: border-box;
            background-color: #f7f7f7;
            border-radius: (16/16rem);
            border: 1px solid #e8e8e8;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: (12/16rem);
        }

        .cs-h3 {
            font-size: (20/16rem);
            line-height: 1.2em;
            font-weight: 700;
            margin: 0;
            color: var(--headerColor);
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: (8/16rem);
        }

        .cs-h3-icon {
            width: (32/16rem);
            height: auto;
            display: block;
        }

        .cs-item-text {
            font-size: (14/16rem);
            line-height: 1.5em;
            margin: 0;
            color: var(--bodyTextColor);
        }

        .cs-ul {
            width: 100%;
            margin: 0 0 (24/16rem) 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: (12/16rem);
        }

        .cs-li {
            font-size: var(--bodyFontSize);
            list-style: none;
            line-height: 1.5em;
            width: 100%;
            color: var(--bodyTextColor);
            display: flex;
            justify-content: flex-start;
            /* push icon top the top so if the list item goes to two lines the icon stays at the top */
            align-items: flex-start;
            gap: (8/16rem);
        }

        .cs-icon {
            width: (24/16rem);
            height: auto;
            /* adds extra space between the icon and top of parent so it's more centered */
            margin-top: 1px;
            display: block;
        }

        .cs-button-solid {
            font-size: (16/16rem);
            line-height: (56/16rem);
            text-decoration: none;
            font-weight: 700;
            overflow: hidden;
            margin: 0;
            color: #fff;
            padding: 0 (48/16rem);
            border-radius: (30/16rem);
            background-color: var(--primary);
            display: inline-block;
            position: relative;
            z-index: 1;
            transition: color 0.3s;

            &:before {
                content: "";
                position: absolute;
                display: block;
                height: 100%;
                width: 0%;
                background: #1a1a1a;
                opacity: 1;
                top: 0;
                left: 0;
                z-index: -1;
                transition: width 0.3s;
            }

            &:hover {
                color: var(--primary);
                &:before {
                    width: 100%;
                }
            }
        }

        .cs-image-group {
            width: 100%;
            max-width: (586/16rem);
            /* Changes to auto at desktop */
            height: (520/16rem);
            /* 32px - 48px */
            border-radius: clamp(2rem, 4vw, 3rem);
            /* clips the corners of the children around the border radius */
            overflow: hidden;
            position: relative;
        }

        .cs-background {
            width: 100%;
            height: 100%;
            /* makes it cover the parent dimensions */
            object-fit: cover;
            display: block;

            img {
                width: 100%;
                height: 100%;
                /* makes it cover the parent like a backgorund image */
                object-fit: cover;
                display: block;
            }
        }

        .cs-box {
            text-align: left;
            width: 100%;
            max-width: (304/16rem);
            padding: (32/16rem);
            /* prevents padding from affecting height and width */
            box-sizing: border-box;
            background-color: var(--primary);
            /* 48px - 80px */
            border-radius: (32/16rem);
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: (24/16rem);
            position: absolute;
            /* 12px - 20px */
            right: clamp(0.75rem, 1.9vw, 1.5rem);
            /* 12px - 20px */
            bottom: clamp(0.75rem, 1.9vw, 1.5rem);
        }

        .cs-box-icon {
            width: (60/16rem);
            height: auto;
            display: block;
        }

        .cs-desc {
            font-size: (20/16rem);
            line-height: 1.2em;
            text-align: inherit;
            font-weight: 700;
            width: 100%;
            margin: 0;
            color: var(--bodyTextColorWhite);
        }

        .cs-bubbles {
            font-size: ~"min(2.5vw, .7em)";
            width: (419/16em);
            height: (427/16em);
            position: absolute;
            /* reset at larger desktop */
            right: (-260/16em);
            /* changes to 30px at desktop */
            bottom: (-50/16em);
            z-index: -1;

            &:before {
                /* white border bubble */
                content: "";
                width: (330/16em);
                height: (330/16em);
                background: transparent;
                border: 1px solid #1a1a1a;
                border-radius: 50%;
                opacity: 1;
                position: absolute;
                display: block;
                top: 0;
                right: 0;
                animation-name: floatAnimation;
                animation-duration: 5s;
                animation-timing-function: ease-in-out;
                animation-fill-mode: forwards;
                animation-iteration-count: infinite;
            }

            &:after {
                /* orange bubble */
                content: "";
                width: (260/16em);
                height: (260/16em);
                background: var(--primary);
                opacity: 0.15;
                border-radius: 50%;
                display: block;
                position: absolute;
                bottom: 0;
                left: 0;
                z-index: -1;
                animation-name: floatAnimation2;
                animation-duration: 14s;
                animation-timing-function: ease-in-out;
                animation-fill-mode: forwards;
                animation-iteration-count: infinite;
            }
        }
    }
}

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

        .cs-image-group {
            height: auto;
            /* sends it to the right in the 2nd position */
            order: 2;
        }

        .cs-bubbles {
            font-size: ~"min(2.5vw, 1em)";
            right: (-100/16rem);
            bottom: (0/16rem);
        }
    }
}

/* Large Desktop 1600px */
@media only screen and (min-width: 100rem) {
    #sbsr-1363 {
        .cs-bubbles {
            margin-right: (750/16rem);
            left: auto;
            right: 50%;
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #sbsr-1363 {
            .cs-topper {
                color: var(--primary);
            }

            .cs-title,
            .cs-text,
            .cs-li,
            .cs-item-text {
                color: var(--bodyTextColorWhite);
            }

            .cs-text,
            .cs-li,
            .cs-item-text {
                opacity: 0.8;
            }

            .cs-item {
                background-color: rgba(0, 0, 0, 0.2);
                border-color: rgba(255, 255, 255, 0.2);
            }

            .cs-h3 {
                color: var(--bodyTextColorWhite);
            }

            .cs-icon {
                filter: grayscale(1) brightness(1000%);
            }

            .cs-bubbles {
                &:before {
                    border-color: rgba(255, 255, 255, 0.2);
                }
            }
        }
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    @keyframes floatAnimation {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-2rem);
        }
        100% {
            transform: translateY(0);
        }
    }

    @keyframes floatAnimation2 {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-3rem);
        }
        100% {
            transform: translateY(0);
        }
    }

    #sbsr-1363 {
        padding: var(--sectionPadding);
        position: relative;
        overflow: hidden;
        z-index: 1;

        .cs-container {
            width: 100%;
            /* changes to 1280px at 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 {
            /* set text align to left if content needs to be left aligned */
            text-align: left;
            width: 100%;
            max-width: calc(630 / 16 * 1rem);
            display: flex;
            flex-direction: column;
            /* centers content horizontally, set to flex-start to left align */
            align-items: flex-start;
        }

        .cs-topper {
            color: #767676;
        }

        .cs-title {
            /* 23 characters wide including spaces */
            max-width: 26ch;
        }

        .cs-text {
            margin-bottom: calc(16 / 16 * 1rem);
            &:last-of-type {
                margin-bottom: calc(24 / 16 * 1rem);
            }
        }

        .cs-card-group {
            width: 100%;
            max-width: calc(630 / 16 * 1rem);
            margin: 0 0 calc(24 / 16 * 1rem) 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(15.265rem, 1fr));
            align-items: center;
            gap: clamp(1rem, 2vw, 1.25rem);
        }

        .cs-item {
            list-style: none;
            /* 16px - 24px */
            padding: clamp(1rem, 3vw, 1.5rem);
            /* prevents padding from affecting height and width */
            box-sizing: border-box;
            background-color: #f7f7f7;
            border-radius: calc(16 / 16 * 1rem);
            border: 1px solid #e8e8e8;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: calc(12 / 16 * 1rem);
        }

        .cs-h3 {
            font-size: calc(20 / 16 * 1rem);
            line-height: 1.2em;
            font-weight: 700;
            margin: 0;
            color: var(--headerColor);
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: calc(8 / 16 * 1rem);
        }

        .cs-h3-icon {
            width: calc(32 / 16 * 1rem);
            height: auto;
            display: block;
        }

        .cs-item-text {
            font-size: calc(14 / 16 * 1rem);
            line-height: 1.5em;
            margin: 0;
            color: var(--bodyTextColor);
        }

        .cs-ul {
            width: 100%;
            margin: 0 0 calc(24 / 16 * 1rem) 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: calc(12 / 16 * 1rem);
        }

        .cs-li {
            font-size: var(--bodyFontSize);
            list-style: none;
            line-height: 1.5em;
            width: 100%;
            color: var(--bodyTextColor);
            display: flex;
            justify-content: flex-start;
            /* push icon top the top so if the list item goes to two lines the icon stays at the top */
            align-items: flex-start;
            gap: calc(8 / 16 * 1rem);
        }

        .cs-icon {
            width: calc(24 / 16 * 1rem);
            height: auto;
            /* adds extra space between the icon and top of parent so it's more centered */
            margin-top: 1px;
            display: block;
        }

        .cs-button-solid {
            font-size: calc(16 / 16 * 1rem);
            line-height: calc(56 / 16 * 1rem);
            text-decoration: none;
            font-weight: 700;
            overflow: hidden;
            margin: 0;
            color: #fff;
            padding: 0 calc(48 / 16 * 1rem);
            border-radius: calc(30 / 16 * 1rem);
            background-color: var(--primary);
            display: inline-block;
            position: relative;
            z-index: 1;
            transition: color 0.3s;

            &:before {
                content: "";
                position: absolute;
                display: block;
                height: 100%;
                width: 0%;
                background: #1a1a1a;
                opacity: 1;
                top: 0;
                left: 0;
                z-index: -1;
                transition: width 0.3s;
            }

            &:hover {
                color: var(--primary);
                &:before {
                    width: 100%;
                }
            }
        }

        .cs-image-group {
            width: 100%;
            max-width: calc(586 / 16 * 1rem);
            /* Changes to auto at desktop */
            height: calc(520 / 16 * 1rem);
            /* 32px - 48px */
            border-radius: clamp(2rem, 4vw, 3rem);
            /* clips the corners of the children around the border radius */
            overflow: hidden;
            position: relative;
        }

        .cs-background {
            width: 100%;
            height: 100%;
            /* makes it cover the parent dimensions */
            object-fit: cover;
            display: block;

            img {
                width: 100%;
                height: 100%;
                /* makes it cover the parent like a backgorund image */
                object-fit: cover;
                display: block;
            }
        }

        .cs-box {
            text-align: left;
            width: 100%;
            max-width: calc(304 / 16 * 1rem);
            padding: calc(32 / 16 * 1rem);
            /* prevents padding from affecting height and width */
            box-sizing: border-box;
            background-color: var(--primary);
            /* 48px - 80px */
            border-radius: calc(32 / 16 * 1rem);
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: calc(24 / 16 * 1rem);
            position: absolute;
            /* 12px - 20px */
            right: clamp(0.75rem, 1.9vw, 1.5rem);
            /* 12px - 20px */
            bottom: clamp(0.75rem, 1.9vw, 1.5rem);
        }

        .cs-box-icon {
            width: calc(60 / 16 * 1rem);
            height: auto;
            display: block;
        }

        .cs-desc {
            font-size: calc(20 / 16 * 1rem);
            line-height: 1.2em;
            text-align: inherit;
            font-weight: 700;
            width: 100%;
            margin: 0;
            color: var(--bodyTextColorWhite);
        }

        .cs-bubbles {
            font-size: min(2.5vw, 0.7em);
            width: calc(419 / 16 * 1em);
            height: calc(427 / 16 * 1em);
            position: absolute;
            /* Reset at larger desktop */
            right: calc(-260 / 16 * 1em);
            /* chnages to 30px at desktop */
            bottom: calc(-50 / 16 * 1em);
            z-index: -1;

            &:before {
                /* white border bubble */
                content: "";
                width: calc(330 / 16 * 1em);
                height: calc(330 / 16 * 1em);
                background: transparent;
                border: 1px solid #1a1a1a;
                border-radius: 50%;
                opacity: 1;
                position: absolute;
                display: block;
                top: 0;
                right: 0;
                animation-name: floatAnimation;
                animation-duration: 5s;
                animation-timing-function: ease-in-out;
                animation-fill-mode: forwards;
                animation-iteration-count: infinite;
            }

            &:after {
                /* orange bubble */
                content: "";
                width: calc(260 / 16 * 1em);
                height: calc(260 / 16 * 1em);
                background: var(--primary);
                opacity: 0.15;
                border-radius: 50%;
                display: block;
                position: absolute;
                bottom: 0;
                left: 0;
                z-index: -1;
                animation-name: floatAnimation2;
                animation-duration: 14s;
                animation-timing-function: ease-in-out;
                animation-fill-mode: forwards;
                animation-iteration-count: infinite;
            }
        }
    }
}

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

        .cs-image-group {
            height: auto;
            /* sends it to the right in the 2nd position */
            order: 2;
        }

        .cs-bubbles {
            font-size: min(2.5vw, 1em);
            bottom: calc(0 / 16 * 1rem);
            right: calc(-100 / 16 * 1rem);
        }
    }
}

/* Large Desktop 1600px */
@media only screen and (min-width: 100rem) {
    #sbsr-1363 {
        .cs-bubbles {
            margin-right: calc(750 / 16 * 1rem);
            left: auto;
            right: 50%;
        }
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    @keyframes floatAnimation {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-2rem);
        }
        100% {
            transform: translateY(0);
        }
    }

    @keyframes floatAnimation2 {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-3rem);
        }
        100% {
            transform: translateY(0);
        }
    }

    #sbsr-1363 {
        padding: var(--sectionPadding);
        position: relative;
        overflow: hidden;
        z-index: 1;

        .cs-container {
            width: 100%;
            /* changes to 1280px at 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 {
            /* set text align to left if content needs to be left aligned */
            text-align: left;
            width: 100%;
            max-width: calc(630 / 16 * 1rem);
            display: flex;
            flex-direction: column;
            /* centers content horizontally, set to flex-start to left align */
            align-items: flex-start;
        }

        .cs-topper {
            color: #767676;
        }

        .cs-title {
            /* 23 characters wide including spaces */
            max-width: 26ch;
        }

        .cs-text {
            margin-bottom: calc(16 / 16 * 1rem);
            &:last-of-type {
                margin-bottom: calc(24 / 16 * 1rem);
            }
        }

        .cs-card-group {
            width: 100%;
            max-width: calc(630 / 16 * 1rem);
            margin: 0 0 calc(24 / 16 * 1rem) 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(15.265rem, 1fr));
            align-items: center;
            gap: clamp(1rem, 2vw, 1.25rem);
        }

        .cs-item {
            list-style: none;
            /* 16px - 24px */
            padding: clamp(1rem, 3vw, 1.5rem);
            /* prevents padding from affecting height and width */
            box-sizing: border-box;
            background-color: #f7f7f7;
            border-radius: calc(16 / 16 * 1rem);
            border: 1px solid #e8e8e8;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: calc(12 / 16 * 1rem);
        }

        .cs-h3 {
            font-size: calc(20 / 16 * 1rem);
            line-height: 1.2em;
            font-weight: 700;
            margin: 0;
            color: var(--headerColor);
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: calc(8 / 16 * 1rem);
        }

        .cs-h3-icon {
            width: calc(32 / 16 * 1rem);
            height: auto;
            display: block;
        }

        .cs-item-text {
            font-size: calc(14 / 16 * 1rem);
            line-height: 1.5em;
            margin: 0;
            color: var(--bodyTextColor);
        }

        .cs-ul {
            width: 100%;
            margin: 0 0 calc(24 / 16 * 1rem) 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: calc(12 / 16 * 1rem);
        }

        .cs-li {
            font-size: var(--bodyFontSize);
            list-style: none;
            line-height: 1.5em;
            width: 100%;
            color: var(--bodyTextColor);
            display: flex;
            justify-content: flex-start;
            /* push icon top the top so if the list item goes to two lines the icon stays at the top */
            align-items: flex-start;
            gap: calc(8 / 16 * 1rem);
        }

        .cs-icon {
            width: calc(24 / 16 * 1rem);
            height: auto;
            /* adds extra space between the icon and top of parent so it's more centered */
            margin-top: 1px;
            display: block;
        }

        .cs-button-solid {
            font-size: calc(16 / 16 * 1rem);
            line-height: calc(56 / 16 * 1rem);
            text-decoration: none;
            font-weight: 700;
            overflow: hidden;
            margin: 0;
            color: #fff;
            padding: 0 calc(48 / 16 * 1rem);
            border-radius: calc(30 / 16 * 1rem);
            background-color: var(--primary);
            display: inline-block;
            position: relative;
            z-index: 1;
            transition: color 0.3s;

            &:before {
                content: "";
                position: absolute;
                display: block;
                height: 100%;
                width: 0%;
                background: #1a1a1a;
                opacity: 1;
                top: 0;
                left: 0;
                z-index: -1;
                transition: width 0.3s;
            }

            &:hover {
                color: var(--primary);
                &:before {
                    width: 100%;
                }
            }
        }

        .cs-image-group {
            width: 100%;
            max-width: calc(586 / 16 * 1rem);
            /* Changes to auto at desktop */
            height: calc(520 / 16 * 1rem);
            /* 32px - 48px */
            border-radius: clamp(2rem, 4vw, 3rem);
            /* clips the corners of the children around the border radius */
            overflow: hidden;
            position: relative;
        }

        .cs-background {
            width: 100%;
            height: 100%;
            /* makes it cover the parent dimensions */
            object-fit: cover;
            display: block;

            img {
                width: 100%;
                height: 100%;
                /* makes it cover the parent like a backgorund image */
                object-fit: cover;
                display: block;
            }
        }

        .cs-box {
            text-align: left;
            width: 100%;
            max-width: calc(304 / 16 * 1rem);
            padding: calc(32 / 16 * 1rem);
            /* prevents padding from affecting height and width */
            box-sizing: border-box;
            background-color: var(--primary);
            /* 48px - 80px */
            border-radius: calc(32 / 16 * 1rem);
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: calc(24 / 16 * 1rem);
            position: absolute;
            /* 12px - 20px */
            right: clamp(0.75rem, 1.9vw, 1.5rem);
            /* 12px - 20px */
            bottom: clamp(0.75rem, 1.9vw, 1.5rem);
        }

        .cs-box-icon {
            width: calc(60 / 16 * 1rem);
            height: auto;
            display: block;
        }

        .cs-desc {
            font-size: calc(20 / 16 * 1rem);
            line-height: 1.2em;
            text-align: inherit;
            font-weight: 700;
            width: 100%;
            margin: 0;
            color: var(--bodyTextColorWhite);
        }

        .cs-bubbles {
            font-size: min(2.5vw, 0.7em);
            width: calc(419 / 16 * 1em);
            height: calc(427 / 16 * 1em);
            position: absolute;
            /* Reset at larger desktop */
            right: calc(-260 / 16 * 1em);
            /* chnages to 30px at desktop */
            bottom: calc(-50 / 16 * 1em);
            z-index: -1;

            &:before {
                /* white border bubble */
                content: "";
                width: calc(330 / 16 * 1em);
                height: calc(330 / 16 * 1em);
                background: transparent;
                border: 1px solid #1a1a1a;
                border-radius: 50%;
                opacity: 1;
                position: absolute;
                display: block;
                top: 0;
                right: 0;
                animation-name: floatAnimation;
                animation-duration: 5s;
                animation-timing-function: ease-in-out;
                animation-fill-mode: forwards;
                animation-iteration-count: infinite;
            }

            &:after {
                /* orange bubble */
                content: "";
                width: calc(260 / 16 * 1em);
                height: calc(260 / 16 * 1em);
                background: var(--primary);
                opacity: 0.15;
                border-radius: 50%;
                display: block;
                position: absolute;
                bottom: 0;
                left: 0;
                z-index: -1;
                animation-name: floatAnimation2;
                animation-duration: 14s;
                animation-timing-function: ease-in-out;
                animation-fill-mode: forwards;
                animation-iteration-count: infinite;
            }
        }
    }
}

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

        .cs-image-group {
            height: auto;
            /* sends it to the right in the 2nd position */
            order: 2;
        }

        .cs-bubbles {
            font-size: min(2.5vw, 1em);
            bottom: calc(0 / 16 * 1rem);
            right: calc(-100 / 16 * 1rem);
        }
    }
}

/* Large Desktop 1600px */
@media only screen and (min-width: 100rem) {
    #sbsr-1363 {
        .cs-bubbles {
            margin-right: calc(750 / 16 * 1rem);
            left: auto;
            right: 50%;
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #sbsr-1363 {
            .cs-topper {
                color: var(--primary);
            }

            .cs-title,
            .cs-text,
            .cs-li,
            .cs-item-text {
                color: var(--bodyTextColorWhite);
            }

            .cs-text,
            .cs-li,
            .cs-item-text {
                opacity: 0.8;
            }

            .cs-item {
                background-color: rgba(0, 0, 0, 0.2);
                border-color: rgba(255, 255, 255, 0.2);
            }

            .cs-h3 {
                color: var(--bodyTextColorWhite);
            }

            .cs-icon {
                filter: grayscale(1) brightness(1000%);
            }

            .cs-bubbles {
                &:before {
                    border-color: rgba(255, 255, 255, 0.2);
                }
            }
        }
    }
}

: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);
}