/********** MOBILE - 360PX ***************/
/*****************************************/
@media only screen and (min-width: 0rem) {
    /*************** FEATURED ****************/
    /*****************************************/
    #services-470 {
        padding: var(--sectionPadding);
        margin-top: 1.5rem;
    }
    #services-470 .cs-container {
        width: 100%;
        /* changes to 1280px at tablet */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #services-470 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: center;
    }

    #services-470 .cs-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* 16px - 20px */
        gap: clamp(1rem, 1.5vw, 1.25rem);
    }
    #services-470 .cs-item {
        width: 100%;
        text-align: left;
        list-style: none;
        /* 24px - 32px */
        padding: clamp(1.5rem, 3.5vw, 2rem);
        border: 2px solid #b4b2c7;
        background-color: #fafbfc;
        box-shadow: 0px 24px 54px rgba(87, 107, 147, 0.12);
        border-radius: 0.75rem;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        /* clips the border bottom to match the curve of the border */
        overflow: hidden;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        /* 16px - 36px */
        gap: clamp(1.5rem, 3vw, 2.25rem);
        position: relative;
        z-index: 1;
    }
    #services-470 .cs-item:hover:before {
        height: 100%;
    }
    #services-470 .cs-item:hover .cs-h3,
    #services-470 .cs-item:hover .cs-item-text,
    #services-470 .cs-item:hover .cs-link {
        color: var(--bodyTextColorWhite);
    }
    #services-470 .cs-item:hover .cs-picture {
        border-color: #fff;
    }
    #services-470 .cs-item:hover .cs-picture img {
        /* makes img turn grey, then brightened to get whiter */
        filter: grayscale(1) brightness(1000%);
    }
    #services-470 .cs-item:before {
        /* border bottom that aniates on hover */
        content: "";
        width: 100%;
        height: 0.375rem;
        background: var(--primaryLight);
        opacity: 1;
        position: absolute;
        display: block;
        bottom: 0;
        left: 0;
        z-index: -1;
        transition: height 0.3s;
    }
    #services-470 .cs-picture {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        /* 60px - 80px */
        width: clamp(3.75rem, 7vw, 5rem);
        height: clamp(3.75rem, 7vw, 5rem);
        border-radius: 50%;
        border: clamp(2px, 0.4vw, 4px) solid var(--primaryLight);
        /* prevents border from affecting height and width */
        box-sizing: border-box;
        /* prevents flexbox from squishing it */
        flex: none;
        z-index: 10;
        transition: border-color 0.3s;
    }
    #services-470 .cs-picture img {
        /* 30px - 44px */
        width: clamp(1.875rem, 4.5vw, 2.75rem);
        height: auto;
        display: block;
        position: relative;
        z-index: 10;
    }
    #services-470 .cs-h3 {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
        line-height: 1.5em;
        margin: 0;
        /* 8px - 16px */
        margin-bottom: clamp(0.5rem, 1.5vw, 1rem);
        color: var(--headerColor);
        transition: color 0.3s;
    }
    #services-470 .cs-item-text {
        font-size: 0.875rem;
        line-height: 1.5em;
        margin: 0 0 1.5rem 0;
        color: var(--bodyTextColor);
        transition: color 0.3s;
    }
    #services-470 .cs-link {
        font-size: 1rem;
        line-height: 1.2em;
        font-weight: 700;
        text-transform: uppercase;
        text-decoration: none;
        margin: 0;
        color: var(--primary);
        position: relative;
    }
    #services-470 .cs-link:hover:before {
        width: 100%;
    }
    #services-470 .cs-link:before {
        /* hover bar under link */
        content: "";
        width: 0%;
        height: 0.1875rem;
        background: currentColor;
        opacity: 1;
        position: absolute;
        display: block;
        bottom: -0.1875rem;
        left: 0;
        transition: width 0.3s;
    }
    /*********** SERVICES SBS ****************/
    /*****************************************/
    /* FIRST AND THIRD */
    #RTsbs-421,
    #RTsbsr-421,
    #RTsbst-421 {
        padding: var(--sectionPadding);
    }
    #RTsbs-421 .cs-container,
    #RTsbsr-421 .cs-container,
    #RTsbst-421 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #RTsbs-421 .cs-content,
    #RTsbsr-421 .cs-content,
    #RTsbst-421 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 32.625rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }

    #RTsbs-421 .cs-text,
    #RTsbsr-421 .cs-text,
    #RTsbst-421 .cs-text {
        margin-bottom: 1rem;
    }
    #RTsbs-421 .cs-text:last-of-type,
    #RTsbsr-421 .cs-text:last-of-type,
    #RTsbst-421 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #RTsbs-421 .cs-button-group,
    #RTsbsr-421 .cs-button-group,
    #RTsbst-421 .cs-button-group {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem;
    }
    #RTsbs-421 .cs-button-solid,
    #RTsbsr-421 .cs-button-solid,
    #RTsbst-421 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #fff;
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--primary);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #RTsbs-421 .cs-button-solid:before,
    #RTsbsr-421 .cs-button-solid:before,
    #RTsbst-421 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #RTsbs-421 .cs-button-solid:hover:before,
    #RTsbsr-421 .cs-button-solid:hover:before,
    #RTsbst-421 .cs-button-solid:hover:before {
        width: 100%;
    }
    #RTsbs-421 .cs-button-transparent,
    #RTsbsr-421 .cs-button-transparent,
    #RTsbst-421 .cs-button-transparent {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: var(--primary);
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: transparent;
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
        transition:
            color 0.3s,
            border-color 0.3s,
            background-color 0.3s;
    }
    #RTsbs-421 .cs-button-transparent:before,
    #RTsbsr-421 .cs-button-transparent:before,
    #RTsbst-421 .cs-button-transparent:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #RTsbs-421 .cs-button-transparent:hover,
    #RTsbsr-421 .cs-button-transparent:hover,
    #RTsbst-421 .cs-button-transparent:hover {
        color: #fff;
        border-color: #000;
        background-color: #000;
    }
    #RTsbs-421 .cs-button-transparent:hover:before,
    #RTsbsr-421 .cs-button-transparent:hover:before,
    #RTsbst-421 .cs-button-transparent:hover:before {
        width: 100%;
    }
    #RTsbs-421 .cs-image-group,
    #RTsbsr-421 .cs-image-group,
    #RTsbst-421 .cs-image-group {
        width: 100%;
        /* changes to 650px at desktop */
        max-width: 34.375rem;
        height: auto;
        /* removed at desktop */
        padding-top: 1.875rem;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 1;
        order: -1;
    }
    #RTsbs-421 .cs-info,
    #RTsbsr-421 .cs-info,
    #RTsbst-421 .cs-info {
        /* 12px - 20px */
        padding: clamp(0.75rem, 1.5vw, 1.25rem);
        /*260px - 360px */
        min-width: clamp(16.25rem, 30vw, 22.5rem);
        background-color: #fff;
        border: 1px solid #b4b2c7;
        border-radius: 0.75rem;
        box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.4);
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: absolute;
        /* next two properties centers it horizontally */
        left: 50%;
        transform: translateX(-50%);
        bottom: 1.25rem;
    }
    #RTsbs-421 .cs-icon,
    #RTsbsr-421 .cs-icon,
    #RTsbst-421 .cs-icon {
        /* 32px - 48px */
        width: clamp(2rem, 4vw, 3rem);
        height: auto;
        margin-right: 0.75rem;
    }
    #RTsbs-421 .cs-header,
    #RTsbsr-421 .cs-header,
    #RTsbst-421 .cs-header {
        /* 16px - 20px */
        font-size: clamp(1rem, 1.5vw, 1.25rem);
        font-weight: 700;
        line-height: 1.2em;
        margin-bottom: 0.25rem;
        color: var(--headerColor);
        display: block;
    }
    #RTsbs-421 .cs-desc,
    #RTsbsr-421 .cs-desc,
    #RTsbst-421 .cs-desc {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.2em;
        color: var(--bodyTextColor);
    }
    #RTsbs-421 .cs-picture,
    #RTsbsr-421 .cs-picture,
    #RTsbst-421 .cs-picture {
        width: 85%;
        max-width: 34.875rem;
        margin-bottom: 2.5rem;
        border-radius: 0.75rem;
        /* removed at tablet */
        aspect-ratio: 1.01115242;
        /* clips img corners */
        overflow: hidden;
        display: block;
        position: relative;
    }
    #RTsbs-421 .cs-picture img,
    #RTsbsr-421 .cs-picture img,
    #RTsbst-421 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* makes it act like a background image */
        object-fit: cover;
    }
    #RTsbs-421 .cs-trapezoid,
    #RTsbsr-421 .cs-trapezoid,
    #RTsbst-421 .cs-trapezoid {
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -1;
    }
    /* SECOND */
    #RTsbsr-421 {
        background-color: #f7f7f7;
    }
    #RTsbsr-421 .cs-trapezoid {
        /* flips it horizontally */
        transform: scaleX(-1);
    }
    /******** SERVICES WITH STATS ************/
    /*****************************************/
    /* STATS */
    #stats-477 {
        margin-bottom: 2rem;
        padding: 1.5rem;
        background-color: var(--primary);
        /* clips the glowing orbs from causing overflow issues when they overflow the container */
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    #stats-477:before,
    #stats-477:after {
        /* glowing orbs */
        width: 28.3125rem;
        height: 20.8125rem;
        background: #f1f1f4;
        opacity: 0.16;
        -webkit-filter: blur(182px);
        filter: blur(182px);
        position: absolute;
        display: block;
        top: -4.125rem;
        left: -14.1875rem;
        z-index: -1;
    }
    #stats-477:after {
        display: none;
    }
    #stats-477 .cs-container {
        width: 100%;
        max-width: 59.6875em;
        margin: auto;
    }
    #stats-477 .cs-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 3.75rem;
    }
    #stats-477 .cs-item {
        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-477 .cs-icon {
        /* 50px - 76px */
        width: clamp(3.125rem, 6vw, 4.75rem);
        height: auto;
        margin: 0 0 1.25rem;
        display: block;
    }
    #stats-477 .cs-number {
        /* 31px - 61px */
        font-size: clamp(1.9375rem, 4.3vw, 3.8125rem);
        line-height: 1.2em;
        text-align: center;
        font-weight: 400;
        margin: 0 0 0.25rem 0;
        color: var(--bodyTextColorWhite);
    }
    #stats-477 .cs-desc {
        /* 16px - 20px */
        font-size: clamp(1rem, 2vw, 1.15rem);
        line-height: 1.5em;
        text-align: center;
        width: 100%;
        color: var(--bodyTextColorWhite);
    }
    /* SERVICES */
    #services-477 {
        padding: var(--sectionPadding);
        /* 60px - 200px */
        padding-top: clamp(3.75em, 11vw, 12.5em);
        /* clips the cs-background section so it doesn't cause any overflow issues when it breaks the container */
        overflow: hidden;
    }
    #services-477 .cs-container {
        width: 100%;
        max-width: 80em;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #services-477 .cs-right-section {
        max-width: 52.75rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* 88px - 118px */
        gap: clamp(5.5rem, 10vw, 7.375rem);
    }
    #services-477 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: center;
    }
    #services-477 .cs-title {
        max-width: 20ch;
    }
    #services-477 .cs-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* resets to a clamp at tablet */
        gap: 3.625rem;
    }
    #services-477 .cs-item {
        list-style: none;
        width: 100%;
        /* 24px - 60px left & right */
        padding: 0 clamp(1.5rem, 2vw, 3.75rem) 2.5rem;
        border: 1px solid #b4b2c7;
        border-radius: 0.75rem;
        box-shadow: 0px 24px 54px rgba(87, 107, 147, 0.12);
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        transition: border-color 0.3s;
    }
    #services-477 .cs-item:hover {
        border-color: var(--primaryLight);
    }
    #services-477 .cs-item:hover .cs-picture {
        transform: scale(1.1);
    }
    #services-477 .cs-item:hover:before {
        opacity: 1;
    }
    #services-477 .cs-item:before {
        /* green border box on hover */
        content: "";
        width: 100%;
        height: 100%;
        background: transparent;
        /* prevent border from affecting height and width */
        box-sizing: border-box;
        border: 3px solid var(--primaryLight);
        border-radius: 0.625rem;
        /* prevents the mouse from interacting with it */
        pointer-events: none;
        opacity: 0;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        transition: opacity 0.3s;
    }
    #services-477 .cs-picture {
        /* 60px - 110px */
        width: clamp(3.75rem, 7vw, 6.875rem);
        height: clamp(3.75rem, 7vw, 6.875rem);
        /* wrapped in a calc function to multiple the clamp by a negative number to make its value negative, and multiple it by .5 so it pulls itself by half the height of itself. We copy and pasted the same height clamp. These must be equal every time */
        margin-top: calc(clamp(3.75rem, 7vw, 6.875rem) * -0.5);
        /* 30px - 40px */
        margin-bottom: clamp(1.875rem, 5vw, 2.5rem);
        background-color: #fff;
        border: 2px solid var(--primaryLight);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        /* places it above the hover border box */
        z-index: 10;
        transition: transform 0.3s;
    }
    #services-477 .cs-icon {
        /* 32px - 56px */
        width: clamp(2rem, 5vw, 3.5rem);
        height: auto;
        display: block;
    }
    #services-477 .cs-h3 {
        /* 20px - 31px */
        font-size: clamp(1.25rem, 2vw, 1.9375rem);
        line-height: 1.2em;
        font-weight: 700;
        margin: 0 0 0.75rem 0;
        color: var(--headerColor);
    }
    #services-477 .cs-item-text {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        font-weight: 400;
        text-align: center;
        /* 12px - 32px */
        margin: 0 0 clamp(0.75rem, 3vw, 2rem);
        color: var(--bodyTextColor);
    }
    #services-477 .cs-link {
        /* 16px - 20px */
        font-size: clamp(1rem, 2vw, 1.25rem);
        line-height: 1.5em;
        text-decoration: none;
        text-transform: uppercase;
        font-weight: 700;
        margin: auto 0 0 0;
        color: var(--primary);
        position: relative;
        display: block;
    }
    #services-477 .cs-link:hover:before {
        width: 100%;
    }
    #services-477 .cs-link:before {
        /* green underline on hover */
        content: "";
        width: 0%;
        height: 2px;
        background: currentColor;
        opacity: 1;
        position: absolute;
        display: block;
        bottom: -2px;
        left: 0;
        transition: width 0.3s;
    }
    #services-477 .cs-left-section {
        /* changes at tablet */
        width: 100%;
        /* 48px - 64px, removed at tablet */
        margin-bottom: clamp(3rem, 6vw, 4rem);
        /* removed at tablet */
        padding-top: 12.75rem;
        /* 24px - 40px */
        padding-bottom: clamp(1.5rem, 7vw, 2.5rem);
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        position: relative;
    }
    #services-477 .cs-background {
        /* width and height set in vw units so the grow as the screen grows.  We go over 100vw so they are long enough push outside the cs-container, passed the section padding, and off screen to mimic the lok in the design, they are reset at tablet */
        width: 120vw;
        height: 150vw;
        border-radius: 0 0 6.25rem 0;
        /* clips the gradient pseudo and img tag corner */
        overflow: hidden;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: -1;
    }
    #services-477 .cs-background:before {
        /* green gradient at the bottom */
        content: "";
        width: 100%;
        height: 100%;
        background: linear-gradient(
            360deg,
            #073506 0%,
            rgba(7, 53, 6, 0) 67.27%
        );
        -webkit-filter: drop-shadow(0px 24px 54px rgba(87, 107, 147, 0.12));
        filter: drop-shadow(0px 24px 54px rgba(87, 107, 147, 0.12));
        opacity: 1;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: 10;
    }
    #services-477 .cs-background img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* makes image act like a background image */
        object-fit: cover;
    }
    #services-477 .cs-cta {
        text-decoration: none;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        /* 12px - 24px */
        gap: clamp(0.75rem, 2vw, 1.5rem);
    }
    #services-477 .cs-cta:hover .cs-arrow-wrap {
        transform: scale(1.2);
    }
    #services-477 .cs-arrow-wrap {
        /* 40px - 70px */
        width: clamp(2.5rem, 6vw, 4.375rem);
        height: clamp(2.5rem, 6vw, 4.375rem);
        background: rgba(217, 217, 217, 0.3);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: transform 0.3s;
    }
    #services-477 .cs-arrow {
        width: 1.125rem;
        height: auto;
        display: block;
    }
    #services-477 .cs-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
    #services-477 .cs-tag {
        /* 20px - 31px */
        font-size: clamp(1.25rem, 3vw, 1.9375rem);
        line-height: 1.2em;
        font-weight: 700;
        text-align: left;
        margin: 0 0 0.25rem 0;
        color: #fff;
        display: block;
    }
    #services-477 .cs-desc {
        /* 14px - 25px */
        font-size: clamp(0.875rem, 2vw, 1.5625rem);
        line-height: 1.2em;
        font-weight: 400;
        text-align: left;
        margin: 0 0 0.25rem 0;
        color: #fff;
        display: block;
    }
}

/************** TABLET - 768PX ***********/
/*****************************************/
@media only screen and (min-width: 48rem) {
    /*************** FEATURED ****************/
    /*****************************************/
    #services-470 .cs-container {
        max-width: 80rem;
    }
    #services-470 .cs-card-group {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    #services-470 .cs-item {
        width: clamp(31.5%, 30.5vw, 32.2%);
        flex-direction: column;
        gap: 1.5rem;
    }
    /*********** SERVICES SBS ****************/
    /*****************************************/
    /* FIRST AND THIRD */
    #RTsbs-421 .cs-container,
    #RTsbsr-421 .cs-container,
    #RTsbst-421 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
    #RTsbs-421 .cs-content,
    #RTsbsr-421 .cs-content,
    #RTsbst-421 .cs-content {
        width: 50%;
        /* prevents flexbox from squishing it */
        flex: none;
    }
    #RTsbs-421 .cs-image-group,
    #RTsbsr-421 .cs-image-group,
    #RTsbst-421 .cs-image-group {
        max-width: 41.1875rem;
    }
    #RTsbs-421 .cs-picture,
    #RTsbsr-421 .cs-picture,
    #RTsbst-421 .cs-picture {
        /* 269px - 496px changes at desktop */
        height: clamp(16.8125rem, 35vw, 31rem);
        aspect-ratio: none;
    }
    /* SECOND */
    #RTsbsr-421 .cs-content {
        /* sends it to the right */
        order: -1;
    }
    #RTsbsr-421 .cs-info {
        left: 1.125rem;
        right: auto;
    }
    /******** SERVICES WITH STATS ************/
    /*****************************************/
    /* STATS */
    #stats-477:after {
        display: block;
        left: auto;
        top: 3.5625rem;
        right: -17.5625rem;
    }
    #stats-477 .cs-card-group {
        justify-content: space-between;
    }
    /* SERVICES */
    #services-477 .cs-container {
        flex-direction: row;
        align-items: stretch;
        justify-content: space-between;
        /* 60px - 130px */
        gap: clamp(3.75rem, 9vw, 8.125rem);
    }
    #services-477 .cs-left-section {
        width: 80%;
        margin: 0;
        padding-top: 0;
        justify-content: flex-end;
    }
    #services-477 .cs-background {
        width: 40vw;
        height: calc(135%);
    }
    #services-477 .cs-right-section {
        width: 55vw;
        /* prevents flexbox from squishing it */
        flex: none;
    }
    #services-477 .cs-cta {
        /* we need this link to break outside the cs-container, so we set a negative clamp value to translate left on the x axis as the screen gorws, slowly pulling it farther and farther left outside the cs-container to match the designs position */
        /* 24px - 100px */
        transform: translateX(calc(clamp(1.5rem, 6vw, 6.25rem) * -1));
    }
    #services-477 .cs-info {
        /* prevents flex-box from squishing it */
        flex: none;
    }
    #services-477 .cs-arrow-wrap {
        /* prevents flexbox from squishing it */
        flex: none;
    }
    #services-477 .cs-card-group {
        flex-direction: row;
        /* 16px - 20px */
        gap: clamp(1rem, 1.3vw, 1.25rem);
    }
}

/******** SMALL DESKTOP - 1024PX *********/
/*****************************************/
@media only screen and (min-width: 64rem) {
    /*********** SERVICES SBS ****************/
    /*****************************************/
    /* FIRST AND THIRD */
    #RTsbs-421 .cs-container,
    #RTsbsr-421 .cs-container,
    #RTsbst-421 .cs-container {
        align-items: center;
    }
    #RTsbs-421 .cs-image-group,
    #RTsbsr-421 .cs-image-group,
    #RTsbst-421 .cs-image-group {
        max-width: 40.625rem;
        padding: 0;
    }
    #RTsbs-421 .cs-picture,
    #RTsbsr-421 .cs-picture,
    #RTsbst-421 .cs-picture {
        /* 421px - 496px changes at desktop */
        height: clamp(26.3125rem, 40vw, 31rem);
    }
    #RTsbs-421 .cs-info,
    #RTsbsr-421 .cs-info,
    #RTsbst-421 .cs-info {
        left: auto;
        right: 1.125rem;
        transform: none;
    }
    #RTsbs-421 .cs-trapezoid,
    #RTsbsr-421 .cs-trapezoid,
    #RTsbst-421 .cs-trapezoid {
        height: 80%;
        bottom: 0;
    }
}

/******** LARGE DESKTOP 1300PX ***********/
/*****************************************/
@media only screen and (min-width: 81.25rem) {
    /*************** FEATURED ****************/
    /*****************************************/
    #services-470 .cs-item {
        flex-direction: row;
    }
}

/************** DARK MODE ****************/
/*****************************************/
@media only screen and (min-width: 0rem) {
    /*************** FEATURED ****************/
    /*****************************************/
    body.dark-mode #services-470 .cs-topper {
        color: var(--primaryLight);
    }
    body.dark-mode #services-470 .cs-title,
    body.dark-mode #services-470 .cs-text,
    body.dark-mode #services-470 .cs-heading3 {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #services-470 .cs-item {
        background-color: var(--accent);
    }
    body.dark-mode #services-470 .cs-h3,
    body.dark-mode #services-470 .cs-item-text,
    body.dark-mode #services-470 .cs-link {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #services-470 .cs-picture {
        border-color: #fff;
    }
    body.dark-mode #services-470 .cs-picture img {
        /* makes img turn grey, then brightened to get whiter */
        filter: grayscale(1) brightness(1000%);
    }
    /*********** SERVICES SBS ****************/
    /*****************************************/
    /* FIRST AND THIRD */
    body.dark-mode #RTsbs-421 .cs-topper,
    body.dark-mode #RTsbsr-421 .cs-topper,
    body.dark-mode #RTsbst-421 .cs-topper {
        color: var(--primaryLight);
    }
    body.dark-mode #RTsbs-421 .cs-title,
    body.dark-mode #RTsbsr-421 .cs-title,
    body.dark-mode #RTsbst-421 .cs-title,
    body.dark-mode #RTsbs-421 .cs-text,
    body.dark-mode #RTsbsr-421 .cs-text,
    body.dark-mode #RTsbst-421 .cs-text {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #RTsbs-421 .cs-text,
    body.dark-mode #RTsbsr-421 .cs-text,
    body.dark-mode #RTsbst-421 .cs-text {
        opacity: 0.8;
    }
    body.dark-mode #RTsbs-421 .cs-button-transparent,
    body.dark-mode #RTsbsr-421 .cs-button-transparent,
    body.dark-mode #RTsbst-421 .cs-button-transparent {
        color: var(--primaryLight);
    }
    body.dark-mode #RTsbs-421 .cs-button-transparent:hover,
    body.dark-mode #RTsbsr-421 .cs-button-transparent:hover,
    body.dark-mode #RTsbst-421 .cs-button-transparent:hover {
        color: #fff;
    }
    body.dark-mode #RTsbs-421 .cs-trapezoid,
    body.dark-mode #RTsbsr-421 .cs-trapezoid,
    body.dark-mode #RTsbst-421 .cs-trapezoid {
        filter: grayscale(1) brightness(150%);
        opacity: 0.3;
    }
    /* SECOND */
    body.dark-mode #RTsbsr-421 {
        background-color: rgba(0, 0, 0, 0.2);
    }
    /******** SERVICES WITH STATS ************/
    /*****************************************/
    /* STATS */
    body.dark-mode #stats-477 {
        background-color: var(--secondaryDark);
    }
    /* SERVICES */
    body.dark-mode #services-477 .cs-topper {
        color: var(--primaryLight);
    }
    body.dark-mode #services-477 .cs-title,
    body.dark-mode #services-477 .cs-text,
    body.dark-mode #services-477 .cs-h3,
    body.dark-mode #services-477 .cs-item-text {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #services-477 .cs-picture {
        background-color: var(--medium);
        border-color: #b4b2c7;
    }
    body.dark-mode #services-477 .cs-icon {
        /* turns the icon white */
        -webkit-filter: grayscale(1) brightness(1000%);
        filter: grayscale(1) brightness(1000%);
    }
    body.dark-mode #services-477 .cs-item-text {
        opacity: 0.8;
    }
    body.dark-mode #services-477 .cs-link {
        color: var(--primaryLight);
    }
}