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

            /*-- -------------------------- -->
            <---          Services          -->
            <--- -------------------------- -*/

            /* Mobile - 360px */
            @media only screen and (min-width: 0rem) {
                #services-502 {
                    /* margin: var(--sectionPadding); */
                    margin-left: 0;
                    margin-right: 0;
                    padding: 0 1rem;
                    /* prevents overflow from the slant shape */
                    overflow: hidden;
                    position: relative;
                    z-index: 1;
                    background: #384a8d;
                }
                #services-502:before {
                    /* section background */
                    content: '';
                    width: 100%;
                    height: 100%;
                    background: var(--primary);
                    opacity: 1;
                    position: absolute;
                    display: block;
                    top: 0;
                    left: 0;
                    z-index: -1;
                }
                #services-502 .cs-container {
                    width: 100%;
                    max-width: 80rem;
                    margin: auto;
                    /* 60px - 80px top and bottom */
                    padding: clamp(4.75em, 8.82vw, 10em) 0;
                    /* maintains proportional margin top as screen size grows */
                    margin-top: 56vw;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: flex-start;
                    /* 40px - 70px */
                    gap: clamp(2.7rem, 5.7vw, 2.375rem);
                    position: relative;
                    /* places it on top of the cs-background */
                    z-index: 10;
                }
                #services-502 .cs-container:before {
                    /* section slant on mobile */
                    content: '';
                    width: 62.5rem;
                    height: 125rem;
                    /* background: #384a8de3; */
                    background: linear-gradient(45deg, #384a8d, #000000a1);
                    opacity: 1;
                    position: absolute;
                    z-index: -1;
                    display: block;
                    top: -28.75rem;
                    /* these last two center it horizontally and rotate -65deg */
                    left: 50%;
                    transform: translateX(-50%) rotate(-65deg);
                }
                #services-502 .cs-background {
                    width: 100%;
                    height: auto;
                    aspect-ratio: 1;
                    display: block;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
                #services-502 .cs-background img {
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 100%;
                    width: 100%;
                    object-fit: cover;
                }
                #services-502 .cs-content {
                    width: 100%;
                }

                #services-502 .cs-topper {
                    color: var(--bodyTextColorWhite);
                }
                #services-502 .cs-title {
                    /* changes to 45% at tablet */
                    width: 95%;
                    max-width: 32.125rem;
                    color: var(--bodyTextColorWhite);
                }
                #services-502 .cs-card-group {
                    width: 100%;
                    max-width: 35.25rem;
                    padding: 0;
                    margin: 0;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    /* 20px - 32px */
                    gap: clamp(1.25rem, 3vw, 2rem);
                }
                #services-502 .cs-item {
                    list-style: none;
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: flex-start;
                    /* 32px - 64px */
                    gap: clamp(2rem, 5vw, 4rem);
                }
                #services-502 .cs-icon {
                    width: 3.75rem;
                    height: auto;
                    display: block;
                }
                #services-502 .cs-h3 {
                    /* 25px - 31px */
                    font-size: clamp(1.5625rem, 3vw, 1.9375rem);
                    line-height: 1.2em;
                    font-weight: 700;
                    text-transform: uppercase;
                    margin: 0 0 1.25rem 0;
                    color: var(--bodyTextColorWhite);
                }
                #services-502 .cs-item-text {
                    /* 16px - 20px */
                    font-size: clamp(1rem, 1rem, 1.25rem);
                    line-height: 1.5em;
                    text-align: left;
                    margin: 0;
                    color: var(--bodyTextColorWhite);
                }
                #services-502 .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: #000;
                    min-width: 9.375rem;
                    padding: 0 1.5rem;
                    background-color: var(--secondary);
                    border-radius: 0.25rem;
                    display: inline-block;
                    position: relative;
                    z-index: 1;
                    /* prevents padding from adding to the width */
                    box-sizing: border-box;
                }
                #services-502 .cs-button-solid:before {
                    content: '';
                    position: absolute;
                    height: 100%;
                    width: 0%;
                    background: #fff;
                    opacity: 1;
                    top: 0;
                    left: 0;
                    z-index: -1;
                    border-radius: 0.25rem;
                    transition: width 0.3s;
                }
                #services-502 .cs-button-solid:hover:before {
                    width: 100%;
                }
            }
            /* Tablet - 768px */
            @media only screen and (min-width: 48rem) {
                #services-502:before {
                    /* remove the pseudo for the section background */
                    display: none;
                }
                #services-502 .cs-background {
                    /* reset height to let top and bottom properties create the height */
                    height: auto;
                    aspect-ratio: initial;
                    position: absolute;
                    /* creates the gap between the image and the blue section */
                    /* top: 3.75rem; */
                    bottom: 0;
                }
                #services-502 .cs-background img {
                    width: 100%;
                    left: auto;
                    right: 0;
                    /* object-position: 80% top; */
                }
                #services-502 .cs-container {
                    margin-top: 0;
                }
                #services-502 .cs-container:before {
                    /* make really tall so it always covers top to bottom, even when you add more list items */
                    /* height: 250rem; */
                    /* make really really wide so it covers the left side at large scree sizes */
                    /* width: 200rem; */
                    /* push X amount from the center line to the right.  If after you added content and the slant is not covering everything, make this negative number even more negative to pull it more to the right */
                    /* margin-right: -68.75rem; */
                    /* prevents the mouse from interacting with it */
                    /* pointer-events: none;
        top: 50%;
        left: auto; */
                    /* pushes the right edge of the element to the center line of the parent */
                    /* right: 50%;
        transform: rotate(-35deg) translateY(-50%); */
                    height: 251rem;
                    width: 176rem;
                    margin-right: -49.75rem;
                    pointer-events: none;
                    top: 50%;
                    left: auto;
                    right: 50%;
                    transform: rotate(333deg) translateY(-50%);
                }
                #services-502 .cs-title {
                    width: 45%;
                }
                #services-502 .cs-card-group {
                    width: 38%;
                    /* 24px - 32px */
                    /* padding-left: clamp(1.5rem, 3vw, 2rem); */
                    /* prevents padding from adding to width */
                    box-sizing: border-box;
                }
                #services-502 .cs-item {
                    flex-direction: row;
                }
            }
            /*-- -------------------------- -->
<---      Why Choose Us         -->
<--- -------------------------- -*/

            /* Mobile - 360px */
            @media only screen and (min-width: 0rem) {
                #why-choose-1634 {
                    padding: var(--sectionPadding);
                }
                #why-choose-1634 .cs-container {
                    width: 100%;
                    /* changes to 1280px at tablet */
                    max-width: 36.5rem;
                    margin: auto;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    /* 48px - 100px */
                    /* gap: clamp(3rem, 10vw, 6.25rem); */
                }
                #why-choose-1634 .cs-content {
                    /* set text align to left if content needs to be left aligned */
                    text-align: left;
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    /* centers content horizontally, set to flex-start to left align */
                    align-items: flex-start;
                }
                #why-choose-1634 .cs-flex {
                    max-width: 38.5rem;
                }
                #why-choose-1634 .cs-title {
                    max-width: 20ch;
                }
                #why-choose-1634 .cs-text {
                    margin-bottom: 1rem;
                }
                #why-choose-1634 .cs-text:last-of-type {
                    margin-bottom: 0;
                }
                #why-choose-1634 .cs-wrapper {
                    width: 100%;
                }
                #why-choose-1634 .cs-card-group {
                    width: 100%;
                    margin: 0;
                    padding: 0;
                    display: grid;
                    grid-template-columns: repeat(12, 1fr);
                    row-gap: 1.75rem;
                    /* 16px - 20px */
                    column-gap: clamp(1rem, 2.3vw, 1.25rem);
                }
                #why-choose-1634 .cs-item {
                    text-align: left;
                    list-style: none;
                    width: 100%;
                    margin: 0;
                    box-sizing: border-box;
                    display: flex;
                    grid-column: span 12;
                    flex-direction: column;
                    align-items: flex-start;
                    /* 16px - 24px */
                    gap: clamp(1rem, 3vw, 1.5rem);
                }
                #why-choose-1634 .cs-icon-wrapper {
                    /* 60px - 80px */
                    width: clamp(3.75rem, 7vw, 5rem);
                    height: clamp(3.75rem, 7vw, 5rem);
                    margin: 0;
                    box-sizing: border-box;
                    border: 1px solid #f4f5fa;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: relative;
                    /* prevents flexbox from squishing it */
                    flex: none;
                }
                #why-choose-1634 .cs-icon {
                    width: 2rem;
                    height: auto;
                    display: block;
                }
                #why-choose-1634 .cs-h3 {
                    font-size: 1.25rem;
                    line-height: 1.5em;
                    margin: 0;
                    margin-bottom: 0.5rem;
                    color: var(--headerColor);
                    text-align: inherit;
                }
                #why-choose-1634 .cs-item-text {
                    /* 14px - 16px */
                    font-size: clamp(0.875rem, 1.5vw, 1rem);
                    line-height: 1.5em;
                    margin: 0;
                    color: var(--bodyTextColor);
                    text-align: inherit;
                }
                #why-choose-1634 .cs-wrapper {
                    /* makes the contents of this container act as though the container doesn't exist. They are now children of the cs-container so they can be positioned around each other. This allows us to sue the order property to place the cs-image-group at the top of the page on mobile */
                    display: contents;
                }
                #why-choose-1634 .cs-image-group {
                    font-size: min(2.7vw, 1em);
                    width: 33.875em;
                    height: 30.875em;
                    /* sends it to teh top in the 1st position */
                    order: -1;
                    position: relative;
                    z-index: 1;
                }
                #why-choose-1634 .cs-picture-wrapper {
                    width: 80.073801%;
                    height: 83.805668%;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: stretch;
                    position: absolute;
                    z-index: 1;
                    top: 0;
                    left: 0;
                }
                #why-choose-1634 .cs-box {
                    width: 60%;
                    margin-top: -2.375em;
                    margin-left: 1.5em;
                    padding: 1em;
                    background-color: #f7f7f7;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 0.25rem;
                    position: relative;
                    z-index: 10;
                }
                #why-choose-1634 .cs-header {
                    font-size: 1em;
                    line-height: 1.2em;
                    font-weight: 700;
                    margin: 0;
                    color: var(--headerColor);
                    display: block;
                }
                #why-choose-1634 .cs-desc {
                    font-size: 0.875em;
                    line-height: 1.5em;
                    margin: 0;
                    color: var(--primary);
                    display: block;
                }
                #why-choose-1634 .cs-picture {
                    position: relative;
                    z-index: 1;
                }
                #why-choose-1634 .cs-picture img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
                #why-choose-1634 .cs-picture1 {
                    width: 100%;
                    height: 100%;
                }
                #why-choose-1634 .cs-picture2 {
                    width: 36.346863%;
                    height: 39.878543%;
                    position: absolute;
                    bottom: 0;
                    right: 0;
                }
            }
            /* Tablet - 768px */
            @media only screen and (min-width: 48rem) {
                #why-choose-1634 .cs-container {
                    max-width: 80rem;
                }
                #why-choose-1634 .cs-content {
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                }
                #why-choose-1634 .cs-flex {
                    text-align: left;
                    width: 40vw;
                    max-width: 40rem;
                    flex: none;
                }
                #why-choose-1634 .cs-title {
                    margin: 0;
                }
                #why-choose-1634 .cs-h3,
                #why-choose-1634 .cs-item-text {
                    text-align: left;
                }
                #why-choose-1634 .cs-item {
                    grid-column: span 4;
                }
                #why-choose-1634 .cs-image-group {
                    width: 100%;
                }
            }
            /* Small Desktop - 1024px */
            @media only screen and (min-width: 64rem) {
                #why-choose-1634 {
                    /* set the darker background color on the main div */
                    background: linear-gradient(45deg, #f8f5f1, #ffffff9e), url(../images/edesk/watercolor.jpg);
                    background-size: cover;

                    overflow: hidden;
                }
                #why-choose-1634 .cs-content {
                    align-items: flex-start;
                }
                #why-choose-1634 .cs-flex {
                    width: 50%;
                }
                #why-choose-1634 .cs-wrapper {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: stretch;
                    gap: 2.5rem;
                    position: relative;
                    z-index: 1;
                }
                #why-choose-1634 .cs-wrapper:before {
                    /* make the white space dependant on the height of the cs-wrapper as a pseudo element attached to the cs wrapper. This makes the white background responsive to the amount of items you have in your list. When the list grows or shrinks, the design will maintain its same spacing */
                    content: '';
                    width: 100vw;
                    height: 100vw;
                    background: #fff;
                    opacity: 1;
                    position: absolute;
                    display: block;
                    top: 0;
                    left: 50%;
                    z-index: -1;
                    transform: translateX(-50%);
                }
                #why-choose-1634 .cs-card-group {
                    max-width: 39.375rem;
                    /* use padding to push add the same amount of space between the content and the top of the card group as the negative margin top value on the cs-image-group. This makes sure that it counter acts the effects of the negative margin affecting the card group as well */
                    padding-top: 3rem;
                    align-self: flex-start;
                }
                #why-choose-1634 .cs-image-group {
                    width: 33.875em;
                    /* by setting height to auto, it will stretch to fill the container height. So when you add or subtract more cards and change the height of the container, the image group will shrink as well. Thats why we set the heights of the images in percentages. They will always be X% tall inside the cs-image-group. So when the image group stretches to match the container height, the pictures percentage height also grows proportionally. This ensures the design responds to changes in height from the card section on the left. */
                    height: auto;
                    min-height: 30.875em;
                    /* makes it overlap the .cs-wrapper div */
                    margin-top: -3rem;
                    order: 2;
                    flex: none;
                }
                #why-choose-1634 .cs-item {
                    grid-column: span 12;
                    flex-direction: row;
                }
            }
            /*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/

            #sbs-1161 .cs-title {
                color: #5a70cf;
                font-size: 2.5rem;
            }
            /* Mobile - 360px */
            @media only screen and (min-width: 0rem) {
                #sbs-1161 {
                    padding: var(--sectionPadding);
                    /* clips grpahics from causing overflow issues */
                    overflow: hidden;
                    background-color: #ffffff;
                    position: relative;
                }
                #sbs-1161 .cs-container {
                    width: 100%;
                    /* changes to 1280px at desktop */
                    max-width: 34.375rem;
                    margin: auto;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    /* 48px - 64px */
                    gap: clamp(3rem, 6vw, 4rem);
                }
                #sbs-1161 .cs-content {
                    /* set text align to left if content needs to be left aligned */
                    text-align: left;
                    width: 100%;
                    max-width: 33.875rem;
                    display: flex;
                    flex-direction: column;
                    /* centers content horizontally, set to flex-start to left align */
                    align-items: flex-start;
                    z-index: 1;
                }

                #sbs-1161 .cs-text {
                    margin-bottom: 1rem;
                    font-size: 19px;
                }
                #sbs-1161 .cs-text:last-of-type {
                    margin-bottom: 2rem;
                }
                #sbs-1161 .cs-ul {
                    max-width: 39.375rem;
                    margin: 0 0 2rem 0;
                    padding: 0;
                    /* clips the bullets to create the half circle */
                    overflow: hidden;
                }
                #sbs-1161 .cs-li {
                    list-style: none;
                    margin: 0 0 0.5rem 0;
                    color: var(--bodyTextColor);
                    display: flex;
                    justify-content: flex-start;
                    align-items: flex-start;
                    gap: 0.75rem;
                    position: relative;
                }
                #sbs-1161 .cs-li:before {
                    /* bullet */
                    content: '';
                    width: 0.5rem;
                    height: 0.5rem;
                    margin-top: 0.5rem;
                    background: var(--secondary);
                    display: block;
                    /* prevents flexbox from squishing it */
                    flex: none;
                }
                #sbs-1161 .cs-button-solid {
                    font-size: 1rem;
                    /* 46px - 56px */
                    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
                    text-decoration: none;
                    font-weight: 700;
                    text-align: center;
                    margin: 0;
                    color: #fff;
                    min-width: 9.375rem;
                    padding: 0 1.5rem;
                    background-color: var(--primary);
                    display: inline-block;
                    position: relative;
                    z-index: 1;
                    /* prevents padding from adding to the width */
                    box-sizing: border-box;
                }
                #sbs-1161 .cs-button-solid:before {
                    content: '';
                    position: absolute;
                    height: 100%;
                    width: 0%;
                    background: #000;
                    opacity: 1;
                    top: 0;
                    left: 0;
                    z-index: -1;
                    transition: width 0.3s;
                }
                #sbs-1161 .cs-button-solid:hover:before {
                    width: 100%;
                }
                #sbs-1161 .cs-image-group {
                    /* scales the whole group based on the view width size and stop when that vales equals .8em, resets at desktop */
                    font-size: min(2.15vw, 0.8em);
                    width: 42.375em;
                    height: 36.75em;
                    display: block;
                    position: relative;
                    z-index: 1;
                }
                #sbs-1161 .cs-picture {
                    position: absolute;
                }
                #sbs-1161 .cs-picture img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
                #sbs-1161 .cs-picture1 {
                    width: 39.375em;
                    height: 100%;
                    top: 0;
                    left: 0;
                    z-index: 10;
                }
                #sbs-1161 .cs-picture2 {
                    width: 28.8125em;
                    height: 18.75em;
                    bottom: 0;
                    right: 0;
                    z-index: 10;
                }
                #sbs-1161 .cs-graphic {
                    height: auto;
                    position: absolute;
                }
                #sbs-1161 .cs-graphic1 {
                    width: 72.125em;
                    top: 1.25em;
                    right: -3.75em;
                    transform: rotate(-15deg);
                }
                #sbs-1161 .cs-graphic2 {
                    width: 67.8125em;
                    top: 11.5625em;
                    right: -1.5625em;
                }
                #sbs-1161 .cs-box {
                    width: 12.3125em;
                    height: 11.125em;
                    padding: 0.5rem;
                    /* prevents padding and border from affecting height and width */
                    box-sizing: border-box;
                    background-color: var(--primary);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    position: absolute;
                    z-index: 20;
                    left: 0;
                    bottom: 0;
                }
                #sbs-1161 .cs-number {
                    /* 20px - 39px */
                    font-size: clamp(1.25rem, 4vw, 2.4375rem);
                    text-align: center;
                    line-height: 1.2em;
                    font-weight: 700;
                    width: 100%;
                    /* 4px - 8px */
                    margin: 0 0 clamp(0.25rem, 1vw, 0.5rem);
                    color: var(--bodyTextColorWhite);
                    display: block;
                }
                #sbs-1161 .cs-desc {
                    /* 12px - 16px */
                    font-size: clamp(0.75rem, 1.9vw, 1rem);
                    text-align: center;
                    line-height: 1.2em;
                    font-weight: 700;
                    width: 100%;
                    max-width: 12ch;
                    margin: 0;
                    color: var(--bodyTextColorWhite);
                    display: block;
                }
            }
            /* Small Desktop - 1024px */
            @media only screen and (min-width: 64rem) {
                #sbs-1161 .cs-container {
                    max-width: 80rem;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;
                }
                #sbs-1161 .cs-image-group {
                    font-size: min(1.2vw, 1em);
                    flex: none;
                }
            }
            /*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/
            /* Mobile - 360px */
            @media only screen and (min-width: 0rem) {
                #cta-697 {
                    padding: var(--sectionPadding);
                    background-color: var(--primary);
                    position: relative;
                    z-index: 1;
                }
                #cta-697 .cs-container {
                    width: 100%;
                    max-width: 80rem;
                    margin: auto;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    /* 48px - 64px */
                    gap: clamp(3rem, 6vw, 4rem);
                }
                #cta-697 .cs-content {
                    /* set text align to left if content needs to be left aligned */
                    text-align: center;
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    /* centers content horizontally, set to flex-start to left align */
                    align-items: center;
                    /* 48px - 64px */
                    gap: clamp(3rem, 6vw, 4rem);
                }
                #cta-697 .cs-title {
                    color: var(--bodyTextColorWhite);
                }
                #cta-697 .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: var(--bodyTextColorWhite);
                    min-width: 9.375rem;
                    padding: 0 1.5rem;
                    background-color: var(--secondary);
                    border-radius: 0.25rem;
                    display: inline-block;
                    position: relative;
                    z-index: 1;
                    /* prevents padding from adding to the width */
                    box-sizing: border-box;
                }
                #cta-697 .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;
                }
                #cta-697 .cs-button-solid:hover:before {
                    width: 100%;
                }
                #cta-697 .cs-background {
                    width: 100%;
                    height: 100%;
                    display: block;
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: -1;
                    /* makes it act like a background image */
                    object-fit: cover;
                }
            }
            /* Small Desktop - 1024px */
            @media only screen and (min-width: 64rem) {
                #cta-697 .cs-content {
                    text-align: left;
                    flex-direction: row;
                    justify-content: space-between;
                }
            }
            .bf-hero {
                background: linear-gradient(135deg, #0f3e66b5, #1875a9), url(../images/edesk/watercolor.jpg);
                color: white;
                padding: 4rem 2rem;
                border-radius: 1rem;
                text-align: center;
            }
            .bf-hero h1 {
                font-size: 2.5rem;
                margin-bottom: 1rem;
            }
            .bf-hero p {
                font-size: 1.2rem;
                max-width: 800px;
                margin: 0 auto;
            }
            .bf-section {
                margin-top: 4rem;
            }
            .bf-subtitle {
                font-size: 1.8rem;
                margin-bottom: 1rem;
                color: #0f3e66;
            }
            .bf-text-block {
                font-size: 1.1rem;
                line-height: 1.7;
                margin-bottom: 2rem;
            }
            .bf-highlight-cards {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
                gap: 3rem;
                margin-top: 2rem;
            }
            .bf-card {
                z-index: 2;
    background: rgb(255 255 255 / 66%);
    mix-blend-mode: normal;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0px 30px 30px rgba(1, 10, 10, 0.1), inset 0px 0px 0.5px rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    position: relative;
    height: 100%;
    width: 90%;
    padding: 50px 30px 45px;
    transition: 0.3s;
    margin: 0 auto;
            }
            .bf-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
            }
            .bf-card h3 {
                color: #1875a9;
                margin-bottom: 0.8rem;
            }
            .bf-footer {
                background: #0f3e66;
                color: white;
                padding: 2rem;
                text-align: center;
                border-radius: 1rem;
                margin-top: 4rem;
            }

             .bf-purple {
                background: linear-gradient(41.25deg, #ffd7ff 25.09%, #edd1ff 94.14%);
            }
            .bf-blue {
                background: linear-gradient(41.25deg, #b2d6f8 25.09%, #81e0f5 94.14%);
            }
            .bf-beige {
                background: linear-gradient(41.25deg, #ffead7 25.09%, #ffddd1 94.14%);
            }
            .bg-shape {
                border-radius: 20px;
                position: absolute;
                top: 0;
                left: 0;
                right: 20px;
                height: 99%;
                width: 90%;
                transform: rotate(-10deg);
                z-index: 1;
                transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) 0s;
                margin: 0 auto;
            }
            .pattern-1{
                 background-image: url(../images/edesk/shape-3.png);
                                    position: absolute;
                                    top: 30px;
                                    left: 0px;
                                    width: 815px;
                                    height: 100%;
                                    z-index: 0;
                                    background-repeat: no-repeat;
                                        -webkit-animation: slide_up_down 2s ease-in-out infinite alternate both;
    animation: slide_up_down 2s ease-in-out infinite alternate both;
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
            }
            .pattern-2{
                 background-image: url(../images/edesk/shape-4.png);
                                    position: absolute;
                                    right: 0px;
                                    top: 45%;
                                    width: 753px;
                                    height: 100%;
                                    background-repeat: no-repeat;
                                    z-index: 0;
                                    transform: rotate(180deg);
                                        -webkit-animation: slide_up_down 2s ease-in-out infinite alternate both;
    animation: slide_up_down 2s ease-in-out infinite alternate both;
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
            }

            @keyframes slide_up_down {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); } }