/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #hero-1060 {
        padding: var(--sectionPadding);
        /* 200px - 300px - leaving extra space for the navigation */
        padding-top: clamp(12.5rem, 31.95vw, 18.75rem);
        position: relative;
        z-index: 1;
    }
    #hero-1060 .cs-background {
        width: 100%;
        height: 55%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -2;
    }
    #hero-1060 .cs-background:before {
        /* Overlay */
        content: "";
        width: 100%;
        height: 100%;
        background: #1a1a1a;
        opacity: 0.84;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: 1;
        /* prevents the cursor from interacting with it */
        pointer-events: none;
    }
    #hero-1060 .cs-background img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
        /* makes the top of the image start at the top of the parent */
        object-position: top;
    }
    #hero-1060 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: clamp(6.25rem, 9vw, 7.5rem);
    }
    #hero-1060 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: center;
        width: 100%;
        max-width: 39.375rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: center;
    }
    #hero-1060 .cs-title {
        /* 39px - 61px */
        font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
        font-weight: 700;
        line-height: 1.2em;
        text-align: inherit;
        max-width: 51.8125rem;
        margin: 0 auto 1rem 0;
        color: #fff;
        position: relative;
    }
    #hero-1060 .cs-text {
        /* 16px - 20px */
        font-size: clamp(1rem, 1.95vw, 1.25rem);
        line-height: 1.5em;
        text-align: inherit;
        width: 100%;
        /* 464px - 622px */
        max-width: clamp(29rem, 60vw, 38.785rem);
        margin: 0 0 2.5rem 0;
        color: #fff;
    }
    #hero-1060 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        margin: 0;
        color: #fff;
        padding: 0 1.5rem;
        background-color: var(--primary);
        display: inline-block;
        position: relative;
        z-index: 1;
    }
    #hero-1060 .cs-button-solid:before {
        content: "";
        position: absolute;
        display: block;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width 0.3s;
    }
    #hero-1060 .cs-button-solid:hover:before {
        width: 100%;
    }
    #hero-1060 .cs-card-group {
        margin: 0;
        padding: 0;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        row-gap: 1.875rem;
    }
    #hero-1060 .cs-item {
        width: 100%;
        text-align: left;
        list-style: none;
        margin: 0;
        /* 24px - 32px */
        padding: clamp(1.5rem, 3vw, 2rem);
        background-color: #fff;
        box-shadow: 0px 12px 80px 0px rgba(26, 26, 26, 0.08);
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        grid-column: span 12;
        grid-row: span 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        position: relative;
        z-index: 1;
    }
    #hero-1060 .cs-icon-wrapper {
        width: 4.25rem;
        height: 4.25rem;
        margin: 0 0 1.5rem 0;
        background-color: var(--primary);
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    #hero-1060 .cs-icon {
        width: 3rem;
        height: auto;
    }
    #hero-1060 .cs-h3 {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
        line-height: 1.2em;
        font-weight: bold;
        text-align: inherit;
        margin: 0 0 0.75rem 0;
        color: var(--headerColor);
    }
    #hero-1060 .cs-item-text {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        max-width: 28.125rem;
        margin: 0;
        padding: 0;
        color: var(--bodyTextColor);
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #hero-1060 {
        padding-bottom: 0;
    }
    #hero-1060 .cs-container {
        align-items: flex-start;
    }
    #hero-1060 .cs-content {
        text-align: left;
        margin-left: 0;
        align-items: flex-start;
    }
    #hero-1060 .cs-card-group {
        column-gap: 1.875rem;
    }
    #hero-1060 .cs-item {
        grid-column: span 4;
    }
    #hero-1060 .cs-background {
        height: 87%;
    }
    #hero-1060 .cs-background:before {
        background: linear-gradient(
            to right,
            rgba(0, 0, 0, 0.94) 0%,
            rgba(0, 0, 0, 0.94) 2%,
            rgba(0, 0, 0, 0) 100%
        );
        opacity: 1;
    }
}
/* Large Desktop Parallax Effect - 100px */
@media only screen and (min-width: 100rem) {
    #hero-1060 .cs-background {
        background: url("/assets/images/landing.webp");
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
        /* creates the parallax effect */
        background-attachment: fixed;
    }
    #hero-1060 .cs-background img {
        display: none;
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbs-1161 {
        padding: var(--sectionPadding);
        /* clips grpahics from causing overflow issues */
        overflow: hidden;
        background-color: #f7f7f7;
    }
    #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;
    }

     #sbs-1161 .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;
    }
    #sbs-1161 .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;
    }
    #sbs-1161 .cs-text {
        font-size: var(--bodyFontSize);
        line-height: 1.5em;
        text-align: inherit;
        width: 100%;
        max-width: 40.625rem;
        margin: 0;
        color: var(--bodyTextColor);
    }

    #sbs-1161 .cs-text {
        margin-bottom: 1rem;
    }
    #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: 24.375em;
        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;
    }
}

/*-- -------------------------- -->
<---        Why Choose          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #why-choose-223 {
        padding: var(--sectionPadding);
        background-color: #fafbfc;
    }
    #why-choose-223 .cs-container {
        width: 100%;
        /* changes to 1280px on tablet */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #why-choose-223 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 39rem;
        margin-right: auto;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }
    #why-choose-223 .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;
    }
    #why-choose-223 .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;
    }
    #why-choose-223 .cs-text {
        font-size: var(--bodyFontSize);
        line-height: 1.5em;
        text-align: inherit;
        width: 100%;
        max-width: 40.625rem;
        margin: 0;
        color: var(--bodyTextColor);
    }
    #why-choose-223 .cs-text {
        margin-bottom: 1rem;
    }
    #why-choose-223 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #why-choose-223 .cs-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 1.25rem;
    }
    #why-choose-223 .cs-item {
        text-align: left;
        list-style: none;
        width: 100%;
        /* 32px - 44px top & bottom, 24px - 32px left & right */
        padding: clamp(2rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 2rem);
        margin: 0;
        border-radius: 0.3125rem;
        border: 1px solid #dad9e3;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        /* 16px - 32px */
        column-gap: clamp(1rem, 2vw, 2rem);
        /* 24px - 28px */
        row-gap: clamp(1.5rem, 1.5vw, 1.75rem);
        /* prevents padding from adding to height and width */
        box-sizing: border-box;
        transition: background-color 0.3s;
    }
    #why-choose-223 .cs-item:hover {
        background-color: var(--primary);
    }
    #why-choose-223 .cs-item:hover .cs-icon {
        filter: grayscale(1) brightness(1000%);
    }
    #why-choose-223 .cs-item:hover .cs-h3,
    #why-choose-223 .cs-item:hover .cs-item-text {
        color: #fff;
    }
    #why-choose-223 .cs-icon {
        /* 70px - 80px */
        width: clamp(4.375rem, 7vw, 5rem);
        height: auto;
        margin: 0;
        display: block;
    }
    #why-choose-223 .cs-h3 {
        /* 25px - 31px */
        font-size: clamp(1.5625rem, 2vw, 1.9375rem);
        line-height: 1.2em;
        font-weight: 700;
        text-align: inherit;
        width: 55%;
        margin: 0;
        color: var(--headerColor);
        transition: color 0.3s;
    }
    #why-choose-223 .cs-item-text {
        font-size: 1rem;
        line-height: 1.5em;
        text-align: inherit;
        width: 100%;
        margin: auto 0 0 0;
        color: var(--bodyTextColor);
        transition: color 0.3s;
    }
    #why-choose-223 .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;
    }
    #why-choose-223 .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;
    }
    #why-choose-223 .cs-button-solid:hover:before {
        width: 100%;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #why-choose-223 .cs-container {
        max-width: 80rem;
    }
    #why-choose-223 .cs-content {
        width: 70%;
    }
    #why-choose-223 .cs-card-group {
        /* switch to grid since there's no chance of adding or removing cards in this design.  We can be more set and rigid in our layout of this section and use grid for better spacing */
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
        /* if different boxes are different heights, this makes them all the same height so the grid is always even */
        align-items: stretch;
    }
    #why-choose-223 .cs-item {
        grid-column: span 1;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #why-choose-223 .cs-container {
        flex-direction: row;
        justify-content: space-between;
    }
    #why-choose-223 .cs-card-group {
        width: 60%;
        max-width: 47.375rem;
        /* prevents flexbox from squishing it */
        flex: none;
    }
}

/*-- -------------------------- -->
<---           Steps            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #steps-1171 {
        padding: var(--sectionPadding);
        background-color: #1a1a1a;
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    #steps-1171 .cs-container {
        width: 100%;
        /* changes to 1280px at desktop */
        max-width: 44rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #steps-1171 .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;
    }

    #steps-1171 .cs-topper {
        color: var(--secondary);
    }
    #steps-1171 .cs-title,
    #steps-1171 .cs-text {
        color: var(--bodyTextColorWhite);
    }
    #steps-1171 .cs-text {
        opacity: 0.8;
    }
    #steps-1171 .cs-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 1.25rem;
    }
    #steps-1171 .cs-item {
        text-align: center;
        list-style: none;
        display: flex;
        grid-column: span 12;
        flex-direction: column;
        align-items: center;
        position: relative;
    }
    #steps-1171 .cs-item:last-of-type:after {
        display: none;
    }
    #steps-1171 .cs-item:nth-of-type(even):after {
        /* scaleX -1 flips it horizontally */
        transform: rotate(-135deg) scaleX(-1);
    }
    #steps-1171 .cs-item:after {
        content: "";
        position: relative;
        display: block;
        /* 54px - 84px */
        width: clamp(3.375rem, 6vw, 5.25rem);
        height: clamp(3.375rem, 6vw, 5.25rem);
        margin-top: 1.25rem;
        background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/curved-arrow.svg");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 1;
        transform: rotate(135deg);
    }
    #steps-1171 .cs-picture {
        margin-bottom: 1.5rem;
        width: 5.5rem;
        height: 5.5rem;
        border: 1px solid rgba(255, 252, 243, 0.5);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #steps-1171 .cs-icon {
        width: 2.5rem;
        height: auto;
        display: block;
    }
    #steps-1171 .cs-h3 {
        font-size: 1.25rem;
        line-height: 1.2em;
        text-align: inherit;
        margin: 0 0 0.75rem 0;
        color: var(--bodyTextColorWhite);
    }
    #steps-1171 .cs-item-p {
        font-size: 1rem;
        line-height: 1.5em;
        text-align: inherit;
        max-width: 21.375rem;
        margin: 0;
        color: var(--bodyTextColorWhite);
        opacity: 0.8;
    }
    #steps-1171 .cs-graphic {
        width: 52.5rem;
        height: auto;
        opacity: 0.05;
        position: absolute;
        top: -5rem;
        left: -5rem;
        transform: rotate(-10deg);
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #steps-1171 .cs-item {
        grid-column: span 6;
    }
    #steps-1171 .cs-item:nth-of-type(2):after {
        display: none;
    }
    #steps-1171 .cs-item:nth-of-type(1):after {
        transform: rotate(135deg) scaleX(-1);
    }
    #steps-1171 .cs-item:after {
        margin: 0;
        position: absolute;
        right: -2.5rem;
        top: 0;
        transform: rotate(45deg);
    }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #steps-1171 .cs-container {
        max-width: 80rem;
    }
    #steps-1171 .cs-item {
        grid-column: span 3;
    }
    #steps-1171 .cs-item:nth-of-type(2):after {
        display: block;
        transform: rotate(45deg);
    }
    #steps-1171 .cs-item:nth-of-type(3):after {
        display: block;
        transform: rotate(135deg) scaleX(-1);
    }
    #steps-1171 .cs-item:after {
        right: -3rem;
    }
}

/*-- -------------------------- -->
<---          Contact           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #contact-1093 {
    background-color: #f7f7f7;
    position: relative;
    z-index: 1;
  }
  #contact-1093 .cs-container {
    width: 100%;
    /* chnaged to 1280px at large desktop */
    max-width: 96.875rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  #contact-1093 .cs-content {
    /* set text aling to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 49rem;
    padding: var(--sectionPadding);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #contact-1093 .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #contact-1093 .cs-topper {
    color: #767676;
  }
  #contact-1093 .cs-title {
    max-width: 20ch;
  }
  #contact-1093 .cs-text {
    margin-bottom: 1rem;
  }
  #contact-1093 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #contact-1093 .cs-form-group {
    width: 100%;
    /* moved section padding to the content so the picture can be full width */
    padding: var(--sectionPadding);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    position: relative;
  }
  #contact-1093 .cs-form-content {
    /* set text aling 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;
  }

  #contact-1093 .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;
        
    }
    #contact-1093 .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;
    }
    #contact-1093 .cs-text {
        font-size: var(--bodyFontSize);
        line-height: 1.5em;
        text-align: inherit;
        width: 100%;
        max-width: 40.625rem;
        margin: 0;
        color: var(--bodyTextColor);
    }
  #contact-1093 .cs-form-content .cs-topper {
    color: var(--primary);
  }
  #contact-1093 .cs-form-content .cs-title {
    color: var(--bodyTextColorWhite);
    /* 36px - 48px */
    margin-bottom: clamp(2.25rem, 4vw, 3rem);
  }
  #contact-1093 .cs-form {
    width: 100%;
    max-width: 49rem;
    /* 32px - 48px top & bottom */
    /* 16px - 48px left & right */
    padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 4vw, 3rem);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    background-color: rgba(26, 26, 26, 0.72);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }
  #contact-1093 .cs-label {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    width: 100%;
    color: var(--bodyTextColorWhite);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.25rem;
  }
  #contact-1093 .cs-input {
    font-size: 1rem;
    width: 100%;
    height: 3.5rem;
    padding: 0;
    padding-left: 1.5rem;
    color: var(--bodyTextColorWhite);
    background-color: #595756;
    border: none;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
    transition: border-color 0.3s;
  }
  #contact-1093 .cs-input:hover {
    border-color: var(--secondary);
  }
  #contact-1093 .cs-input:focus {
    outline: 1px solid var(--secondary);
  }
  #contact-1093 .cs-input::placeholder {
    color: #bababa;
    opacity: 0.6;
  }
  #contact-1093 .cs-textarea {
    min-height: 7.5rem;
    padding-top: 1.5rem;
    margin: 0;
    font-family: inherit;
  }
  #contact-1093 .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;
  }
  #contact-1093 .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;
  }
  #contact-1093 .cs-button-solid:hover:before {
    width: 100%;
  }
  #contact-1093 .cs-submit {
    min-width: 15.0625rem;
    /* 36px - 48px */
    margin-top: clamp(2.25rem, 4vw, 3rem);
    border: none;
    border-radius: 0;
  }
  #contact-1093 .cs-submit:hover {
    cursor: pointer;
  }
  #contact-1093 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #contact-1093 .cs-background:before {
    /* background color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #1a1a1a;
    opacity: 0.72;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #contact-1093 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
  }
  #contact-1093 .cs-icon {
    /* 48px - 72px */
    width: clamp(3rem, 6vw, 4.5rem);
    height: auto;
    /* 28px - 40px */
    margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
    display: block;
  }
  #contact-1093 .cs-review-group {
    /* 24px - 32px top & bottom */
    /* 16px - 32px left & right */
    padding: clamp(1.5rem, 4vw, 2rem) clamp(1rem, 5vw, 2rem);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1.75rem, 4vw, 2.5rem);
  }
  #contact-1093 .cs-picture {
    /* dimensions change at tablet */
    width: 100%;
    height: 15rem;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #contact-1093 .cs-picture img {
    width: 100%;
    max-width: 18.75rem;
    height: 100%;
    object-fit: cover;
    /* places the top of the image to the top of the parent */
    object-position: top;
    border-radius: 50%; 
  }
  #contact-1093 .cs-review-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-align: left;
    /* 16px - 28px */
    margin: 0 0 clamp(1rem, 3vw, 1.75rem);
    color: var(--bodyTextColor);
  }
  #contact-1093 .cs-name {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 3vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: bold;
    text-align: left;
    margin: 0;
    display: block;
  }
  #contact-1093 .cs-desc {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-align: left;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #contact-1093 .cs-review-group {
    flex-direction: row;
    justify-content: space-between;
  }
  #contact-1093 .cs-picture {
    width: 11.1875rem;
    height: 12.625rem;
  }
}
/* Large Desktop - 1500px */
@media only screen and (min-width: 93.75rem) {
  #contact-1093 {
    padding: var(--sectionPadding);
    position: relative;
  }
  #contact-1093 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    gap: 5.625rem;
  }
  #contact-1093 .cs-content {
    max-width: 39.375rem;
    padding: 0;
  }
  #contact-1093 .cs-form-group {
    padding: 0;
    /*sends it to the right in the 2nd position */
    order: 2;
    /* undo the position, so the cs-background will position itself relative to the next parent that has a decalred position relative, which we added to the #content parent div. Now we can position it relative to the whole section, allowing us to have more control on how it covers the section. */
    position: initial;
  }
  #contact-1093 .cs-form {
    transform: translateX(5rem);
  }
  #contact-1093 .cs-background {
    width: 50vw;
    margin-left: 5rem;
    left: 50%;
    right: auto;
    background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/mechanic16.jpg");
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    /* makes a parallax scroll effect */
    background-attachment: fixed;
  }
  #contact-1093 .cs-background img {
    display: none;
  }
}