: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: #1666BA;
    --primaryLight: #1666BA;
    --secondary: #7AB3EF;
    --secondaryLight: #7AB3EF;
    --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;
    font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-style: normal;
}

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

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

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

/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/

body,
html {
    /* reset margin and padding so there's no gap between the nav and the screen edges */
    margin: 0;
       padding: 0;
}

/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
    body.cs-open {
        overflow: hidden;
    }
    #cs-navigation {
        width: 100%;
        padding: 1.25rem 1rem;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        background-color: #1a1a1a;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        position: fixed;
        z-index: 10000;
    }
    #cs-navigation:before {
        content: "";
        width: 100%;
        height: 0vh;
        background: rgba(0, 0, 0, 0.6);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        position: absolute;
        display: block;
        top: 100%;
        right: 0;
        z-index: -1100;
        opacity: 0;
        transition:
            height 0.5s,
            opacity 0.5s;
    }
    #cs-navigation.cs-active:before {
        height: 150vh;
        opacity: 1;
    }
    #cs-navigation.cs-active .cs-toggle {
        transform: rotate(180deg);
    }
    #cs-navigation.cs-active .cs-ul-wrapper {
        opacity: 1;
        transform: scaleY(1);
        transition-delay: 0.15s;
    }
    #cs-navigation.cs-active .cs-li {
        transform: translateY(0);
        opacity: 1;
    }
    #cs-navigation .cs-container {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    #cs-navigation .cs-logo {
        width: 40%;
        max-width: 9.125rem;
        height: 100%;
        margin: 0 auto 0 0;
        padding: 0;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10;
    }
    #cs-navigation .cs-logo img {
        width: 100%;
        height: 100%;
        /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
        object-fit: contain;
    }
    #cs-navigation .cs-toggle {
        width: 3.5rem;
        height: 3.5rem;
        margin: 0 0 0 auto;
        border-radius: 0.25rem;
        background-color: var(--primary);
        border: none;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: transform 0.6s;
    }
    #cs-navigation .cs-active .cs-line1 {
        top: 50%;
        transform: translate(-50%, -50%) rotate(225deg);
    }
    #cs-navigation .cs-active .cs-line2 {
        top: 50%;
        transform-origin: center;
        transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
    }
    #cs-navigation .cs-active .cs-line3 {
        bottom: 100%;
        opacity: 0;
    }
    #cs-navigation .cs-box {
        /* 24px - 28px */
        width: clamp(1.5rem, 2vw, 1.75rem);
        height: 1rem;
        position: relative;
    }
    #cs-navigation .cs-line {
        width: 100%;
        height: 2px;
        border-radius: 2px;
        background-color: #fafbfc;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    #cs-navigation .cs-line1 {
        top: 0;
        transform-origin: center;
        transition:
            transform 0.5s,
            top 0.3s,
            left 0.3s;
        animation-duration: 0.7s;
        animation-timing-function: ease;
        animation-fill-mode: forwards;
        animation-direction: normal;
    }
    #cs-navigation .cs-line2 {
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        transition:
            top 0.3s,
            left 0.3s,
            transform 0.5s;
        animation-duration: 0.7s;
        animation-timing-function: ease;
        animation-fill-mode: forwards;
        animation-direction: normal;
    }
    #cs-navigation .cs-line3 {
        bottom: 0;
        transition:
            bottom 0.3s,
            opacity 0.3s;
    }
    #cs-navigation .cs-ul-wrapper {
        width: 100%;
        height: auto;
        padding-bottom: 2.4em;
        opacity: 0;
        background-color: #fff;
        box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
        overflow: hidden;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: -1;
        transform: scaleY(0);
        transform-origin: top;
        transition:
            transform 0.4s,
            opacity 0.3s;
    }
    #cs-navigation .cs-ul {
        margin: 0;
        padding: 3rem 0 0 0;
        width: 100%;
        height: auto;
        max-height: 65vh;
        overflow: scroll;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
    }
    #cs-navigation .cs-li {
        width: 100%;
        text-align: center;
        list-style: none;
        margin-right: 0;
        /* transition from these values */
        transform: translateY(-4.375rem);
        opacity: 0;
        transition:
            transform 0.6s,
            opacity 0.9s;
    }
    #cs-navigation .cs-li:nth-of-type(1) {
        transition-delay: 0.05s;
    }
    #cs-navigation .cs-li:nth-of-type(2) {
        transition-delay: 0.1s;
    }
    #cs-navigation .cs-li:nth-of-type(3) {
        transition-delay: 0.15s;
    }
    #cs-navigation .cs-li:nth-of-type(4) {
        transition-delay: 0.2s;
    }
    #cs-navigation .cs-li:nth-of-type(5) {
        transition-delay: 0.25s;
    }
    #cs-navigation .cs-li:nth-of-type(6) {
        transition-delay: 0.3s;
    }
    #cs-navigation .cs-li:nth-of-type(7) {
        transition-delay: 0.35s;
    }
    #cs-navigation .cs-li:nth-of-type(8) {
        transition-delay: 0.4s;
    }
    #cs-navigation .cs-li:nth-of-type(9) {
        transition-delay: 0.45s;
    }
    #cs-navigation .cs-li:nth-of-type(10) {
        transition-delay: 0.5s;
    }
    #cs-navigation .cs-li:nth-of-type(11) {
        transition-delay: 0.55s;
    }
    #cs-navigation .cs-li:nth-of-type(12) {
        transition-delay: 0.6s;
    }
    #cs-navigation .cs-li:nth-of-type(13) {
        transition-delay: 0.65s;
    }
    #cs-navigation .cs-li-link {
        /* 16px - 24px */
        font-size: clamp(1rem, 2.5vw, 1.5rem);
        line-height: 1.2em;
        text-decoration: none;
        margin: 0;
        color: var(--headerColor);
        display: inline-block;
        position: relative;
    }
    #cs-navigation .cs-li-link.cs-active {
        color: var(--primary);
    }
    #cs-navigation .cs-li-link:hover {
        color: var(--primary);
    }
    #cs-navigation .cs-button-solid {
        display: none;
    }
}

/*-- -------------------------- -->
<---     Navigation Dropdown    -->
<--- -------------------------- -*/

/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
    #cs-navigation .cs-li {
        text-align: center;
        width: 100%;
        display: block;
    }
    #cs-navigation .cs-dropdown {
        position: relative;
        color: var(--bodyTextColorWhite);
    }
    #cs-navigation .cs-dropdown.cs-active .cs-drop-ul {
        height: auto;
        opacity: 1;
        visibility: visible;
        margin: 0.75rem 0 0 0;
        padding: 0.75rem 0;
    }
    #cs-navigation .cs-dropdown.cs-active .cs-drop-link {
        opacity: 1;
    }
    #cs-navigation .cs-dropdown .cs-li-link {
        position: relative;
        transition: opacity 0.3s;
    }
    #cs-navigation .cs-drop-icon {
        width: 0.9375rem;
        height: auto;
        position: absolute;
        top: 50%;
        right: -1.25rem;
        transform: translateY(-50%);
    }
    #cs-navigation .cs-drop-ul {
        width: 100%;
        height: 0;
        margin: 0;
        padding: 0;
        background-color: var(--primary);
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        transition:
            padding 0.3s,
            margin 0.3s,
            height 0.3s,
            opacity 0.3s,
            visibility 0.3s;
    }
    #cs-navigation .cs-drop-li {
        list-style: none;
    }
    #cs-navigation .cs-li-link.cs-drop-link {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 2vw, 1.25rem);
        color: #fff;
    }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #cs-navigation .cs-dropdown {
        position: relative;
    }
    #cs-navigation .cs-dropdown:hover {
        cursor: pointer;
    }
    #cs-navigation .cs-dropdown:hover .cs-drop-ul {
        transform: scaleY(1);
        opacity: 1;
        visibility: visible;
    }
    #cs-navigation .cs-dropdown:hover .cs-drop-li {
        opacity: 1;
        transform: translateY(0);
    }
    #cs-navigation .cs-drop-icon {
        width: 0.9375rem;
        height: auto;
        display: inline-block;
    }
    #cs-navigation .cs-drop-ul {
        min-width: 12.5rem;
        margin: 0;
        padding: 0;
        background-color: #1a1a1a;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        border-bottom: 5px solid var(--primary);
        /* if you have 8 or more links in your dropdown nav, uncomment the columns property to make the list into 2 even columns. Change it to 3 or 4 if you need extra columns. Then remove the transition delays on the cs-drop-li so they don't have weird scattered animations */
        position: absolute;
        top: 100%;
        z-index: -100;
        transform: scaleY(0);
        transform-origin: top;
        transition:
            transform 0.3s,
            visibility 0.3s,
            opacity 0.3s;
    }
    #cs-navigation .cs-drop-li {
        list-style: none;
        font-size: 1rem;
        text-decoration: none;
        opacity: 0;
        width: 100%;
        height: auto;
        display: block;
        transform: translateY(-0.625rem);
        transition:
            opacity 0.6s,
            transform 0.6s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(1) {
        transition-delay: 0.05s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(2) {
        transition-delay: 0.1s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(3) {
        transition-delay: 0.15s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(4) {
        transition-delay: 0.2s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(5) {
        transition-delay: 0.25s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(6) {
        transition-delay: 0.3s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(7) {
        transition-delay: 0.35s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(8) {
        transition-delay: 0.4s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(9) {
        transition-delay: 0.45s;
    }
    #cs-navigation .cs-li-link.cs-drop-link {
        text-transform: capitalize;
        white-space: nowrap;
        width: 100%;
        font-size: 1rem;
        line-height: 1.5em;
        text-decoration: none;
        padding: 0.75rem;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        color: var(--bodyTextColorWhite);
        display: block;
        transition:
            color 0.3s,
            background-color 0.3s;
    }
    #cs-navigation .cs-li-link.cs-drop-link:hover {
        background-color: var(--primary);
        color: var(--bodyTextColorWhite);
    }
    #cs-navigation .cs-li-link.cs-drop-link:before {
        display: none;
    }
}

/*-- -------------------------- -->
<---     Desktop Navigation     -->
<--- -------------------------- -*/

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #cs-navigation {
        width: 100%;
        padding: 0 1rem;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        background-color: #1a1a1a;
        position: fixed;
        z-index: 10000;
    }
    #cs-navigation .cs-container {
        width: 100%;
        /* same height as the cs-ul-wrapper */
        height: 9.8125rem;
        max-width: 80rem;
        margin: auto;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 1.5rem;
        position: relative;
    }
    #cs-navigation .cs-toggle {
        display: none;
    }
    #cs-navigation .cs-logo {
        width: 18.4%;
        max-width: 21.875rem;
        height: 8rem;
        /* margin-right auto pushes everything away from it to the right */
        margin: 0 auto 0 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 100;
    }
    #cs-navigation .cs-logo img {
        width: 100%;
        height: 100%;
        /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
        object-fit: contain;
    }
    #cs-navigation .cs-ul-wrapper {
        /* absolutely positioned to be dead center */
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    #cs-navigation .cs-ul {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        /* 20px - 36px */
        gap: clamp(1.25rem, 2.6vw, 2.25rem);
    }
    #cs-navigation .cs-li {
        list-style: none;
        padding: 2.25rem 0;
        /* prevent flexbox from squishing it */
        flex: none;
    }
    #cs-navigation .cs-li-link {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 0.6vw, 1rem);
        line-height: 1.5em;
        text-decoration: none;
        text-transform: uppercase;
        margin: 0;
        color: var(--bodyTextColorWhite);
        display: block;
        position: relative;
        transition: color 0.3s;
    }
    #cs-navigation .cs-li-link:hover {
        color: var(--primary);
    }
    #cs-navigation .cs-li-link.cs-active {
        color: var(--primary);
    }
    #cs-navigation .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875em, 5.5vw, 3.5em);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #fff;
        min-width: 9.375rem;
        padding: 0 2rem;
        background-color: var(--primary);
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
        transition: color 0.3s;
    }
    #cs-navigation .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #fff;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width 0.3s;
    }
    #cs-navigation .cs-button-solid:hover {
        color: #1a1a1a;
    }
    #cs-navigation .cs-button-solid:hover:before {
        width: 100%;
    }
}
                                

/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #hero-331 {
        /* Centers button */
        text-align: center;
        /* changes on tablet */
        padding: clamp(9rem, 25.95vw, 17.5rem) 1rem;
        /* 150px - 250px */
        padding-bottom: clamp(9.375rem, 30.5vw, 15.625rem);
        position: relative;
        z-index: 1;
        /* prevents overflow from the lines extending past the screen width */
        overflow: hidden;
    }
    #hero-331 .cs-background {
        /* Background Image */
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -2;
    }
    #hero-331 .cs-background:before {
        /* White Color Overlay */
        content: "";
        width: 100%;
        height: 100%;
        background: #fff;
        opacity: 0.55;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: 1;
        /* prevents the cursor from interacting with it */
        pointer-events: none;
    }
    #hero-331 .cs-background img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* Makes image act like a background-image */
        object-fit: cover;
        /* places the top of the image at the top of the parent */
        transform: translateY(15%);
    }
    #hero-331 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        position: relative;
        margin-top: 75px;
    }
    #hero-331 .cs-flex-group {
        /* 456px - 626px */
        max-width: clamp(28.5rem, 62vw, 39.125rem);
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: wrap;
        box-sizing: border-box;
    }
    #hero-331 .cs-title {
        /* 39px - 61px */
        font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
        font-weight: 900;
        line-height: 1.2em;
        text-align: left;
        width: 100%;
        margin: 0 auto 1rem;
        color: var(--headerColor);
        position: relative;
    }
    #hero-331 .cs-accent {
        color: var(--primary);
        display:inline-block;
    }
    #hero-331 .cs-text {
        /* 16px - 20px */
        font-size: clamp(1rem, 1.95vw, 1.25rem);
        line-height: 1.5em;
        text-align: left;
        width: 100%;
        max-width: 27.625rem;
        /* 32px - 40px */
        margin: 0 auto clamp(2rem, 4vw, 2.5rem) 0;
        /* 24px - 40px */
        margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
        color: var(--bodyTextColor);
    }
    #hero-331 .cs-button-group {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
    }
    #hero-331 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875em, 5.5vw, 3.5em);
        width: 11.25rem;
        text-decoration: none;
        font-weight: 700;
        border-radius: 0.5rem;
        /* clips corners of the before element */
        overflow: hidden;
        margin: 0;
        color: #fff;
        padding: 0;
        background-color: var(--secondary);
        display: inline-block;
        position: relative;
        z-index: 1;
    }
    #hero-331 .cs-button-solid:before {
        content: "";
        position: absolute;
        display: block;
        height: 100%;
        width: 0%;
        background: var(--primary);
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width 0.3s;
    }
    #hero-331 .cs-button-solid:hover:before {
        width: 100%;
    }
    #hero-331 .cs-button-transparent {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        width: 11.25rem;
        /* 46px - 56px */
        height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        margin: 0;
        color: var(--primary);
        padding: 0;
        background-color: transparent;
        box-sizing: border-box;
        display: inline-flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        z-index: 1;
    }
    #hero-331 .cs-button-transparent:before {
        /* white hover box */
        content: "";
        /* 46px - 56px */
        width: clamp(2.875rem, 5.5vw, 3.5rem);
        background: #fff;
        border-radius: 1.75rem;
        opacity: 1;
        position: absolute;
        display: block;
        top: 0px;
        bottom: 0px;
        left: 0px;
        z-index: -1;
        transition:
            width 0.3s,
            box-shadow 0.3s;
    }
    #hero-331 .cs-button-transparent:hover:before {
        width: 100%;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    }
    #hero-331 .cs-picture {
        /* 46px - 56px */
        width: clamp(2.875rem, 5.5vw, 3.5rem);
        height: clamp(2.875rem, 5.5vw, 3.5rem);
        margin-right: 0.5rem;
        background-color: var(--primary);
        border-radius: 50%;
        border: 6px solid #fff;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #hero-331 .cs-image {
        width: 0.75rem;
        height: auto;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #hero-331 .cs-background:before {
        width: 80%;
        background: -moz-linear-gradient(
            left,
            #f7f7f7 47%,
            #f9f9f9 59%,
            rgba(255, 255, 255, 0) 100%
        );
        background: -webkit-linear-gradient(
            left,
            #f7f7f7 47%,
            #f9f9f9 59%,
            rgba(255, 255, 255, 0) 100%
        );
        background: linear-gradient(
            to right,
            #f7f7f7 47%,
            #f9f9f9 59%,
            rgba(255, 255, 255, 0) 100%
        );
        opacity: 1;
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #services-331 {
        max-width: 80rem;
        padding: 0 1rem;
        margin: 0 auto;
        /* makes it overlap the hero section above it, changes at 1024px */
        margin-top: -6.25rem;
        display: flex;
        justify-content: center;
        align-items: stretch;
        flex-direction: column;
        gap: 1.25rem;
        position: relative;
        z-index: 10;
    }
    #services-331 .cs-item {
        list-style: none;
        width: 100%;
        border-radius: 0.75rem;
        background-color: #fff;
        /* 24px - 32px top & bottom */
        /* 16px - 24px left & right */
        padding: clamp(1.5rem, 3vw, 2rem) clamp(1rem, 3.2vw, 1.5rem);
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        /* prevents padding from adding to height and width */
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        gap: 1rem;
    }
    #services-331 .cs-icon-wrapper {
        width: 5rem;
        height: 5rem;
        border-radius: 50%;
        background-color: var(--primaryLight);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #services-331 .cs-icon {
        width: 2rem;
        height: auto;
        display: block;
    }
    #services-331 .cs-info-group {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #services-331 .cs-header {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 2vw, 1.5625rem);
        line-height: 1.2em;
        font-weight: bold;
        text-align: center;
        margin-bottom: 0.5rem;
        color: var(--headerColor);
        display: block;
    }
    #services-331 .cs-desc {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        text-align: center;
        color: var(--bodyTextColor);
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #services-331 {
        flex-direction: row;
    }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #services-331 {
        margin-top: -4.375rem;
    }
    #services-331 .cs-item {
        flex-direction: row;
        justify-content: flex-start;
        transition: transform 0.3s;
    }
    #services-331 .cs-item:hover {
        transform: translateY(-0.625rem);
    }
    #services-331 .cs-icon-wrapper {
        /* prevents flexbox from squishing it */
        flex: none;
    }
    #services-331 .cs-info-group {
        align-items: flex-start;
    }
    #services-331 .cs-header,
    #services-331 .cs-desc {
        text-align: left;
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #RTsbs-335,
    #RTsbsr-335,
    #RTsbst-335 {
        padding: var(--sectionPadding);
    }
    #RTsbs-335 .cs-container,
    #RTsbsr-335 .cs-container,
    #RTsbst-335 .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);
    }
    #RTsbs-335 .cs-content,
    #RTsbsr-335 .cs-content,
    #RTsbst-335 .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-335 .cs-text,
    #RTsbsr-335 .cs-text,
    #RTsbst-335 .cs-text {
        margin-bottom: 1rem;
    }
    #RTsbs-335 .cs-text:last-of-type,
    #RTsbsr-335 .cs-text:last-of-type,
    #RTsbst-335 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #RTsbs-335 .cs-ul,
    #RTsbsr-335 .cs-ul,
    #RTsbst-335 .cs-ul {
        width: 100%;
        margin: 0 0 2rem 0;
        padding-left: 1.25rem;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    #RTsbs-335 .cs-li,
    #RTsbsr-335 .cs-li,
    #RTsbst-335 .cs-li {
        font-size: var(--bodyFontSize);
        line-height: 1.5em;
        list-style: none;
        text-align: left;
        width: 100%;
        max-width: 25rem;
        margin: 0;
        color: var(--bodyTextColor);
        position: relative;
    }
    #RTsbs-335 .cs-li:before,
    #RTsbsr-335 .cs-li:before,
    #RTsbst-335 .cs-li:before {
        /* bullet */
        content: "";
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: currentColor;
        opacity: 1;
        position: absolute;
        display: block;
        top: 0.625rem;
        left: -0.9375rem;
    }
    #RTsbs-335 .cs-button-solid,
    #RTsbsr-335 .cs-button-solid,
    #RTsbst-335 .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-335 .cs-button-solid:before,
    #RTsbsr-335 .cs-button-solid:before,
    #RTsbst-335 .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-335 .cs-button-solid:hover:before,
    #RTsbsr-335 .cs-button-solid:hover:before,
    #RTsbst-335 .cs-button-solid:hover:before {
        width: 100%;
    }
    #RTsbs-335 .cs-image-group,
    #RTsbsr-335 .cs-image-group,
    #RTsbst-335 .cs-image-group {
        /* scaling entire section down. font-size starts at a min in vw, and stops
               when that value reaches 1em (16px). Since we want the picture elements to base their
               font size on the parent and not the root, we use ems for this entire section  */
        font-size: min(2.08vw, 0.791em);
        width: 42.875em;
        height: 41.125em;
        position: relative;
        z-index: 1;
    }
    @keyframes floatAnimation {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-3em);
        }
        100% {
            transform: translateY(0);
        }
    }
    @keyframes floatAnimation2 {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-2em);
        }
        100% {
            transform: translateY(0);
        }
    }
    #RTsbs-335 .cs-image-group:before,
    #RTsbsr-335 .cs-image-group:before,
    #RTsbst-335 .cs-image-group:before {
        /* blue circle */
        content: "";
        width: 7.5em;
        height: 7.5em;
        border-radius: 50%;
        background: var(--secondary);
        opacity: 1;
        position: absolute;
        display: block;
        bottom: 6.25em;
        left: 0em;
        z-index: 10;
        animation-name: floatAnimation;
        animation-duration: 6s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
    }
    #RTsbs-335 .cs-image-group:after,
    #RTsbsr-335 .cs-image-group:after,
    #RTsbst-335 .cs-image-group:after {
        /* white circle */
        content: "";
        width: 9.375em;
        height: 9.375em;
        border-radius: 50%;
        background: var(--primaryLight);
        opacity: 1;
        position: absolute;
        display: block;
        top: 0em;
        right: 6.25em;
        z-index: -1;
        animation-name: floatAnimation2;
        animation-duration: 4s;
        animation-delay: 0.2s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
    }
    #RTsbs-335 .cs-picture,
    #RTsbsr-335 .cs-picture,
    #RTsbst-335 .cs-picture {
        width: 39.375em;
        height: 39.375em;
        border-radius: 50%;
        border: clamp(6px, 1.2vw, 12px) solid #f7f7f7;
        /* clips the img tag corners */
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
    }
    #RTsbs-335 .cs-picture img,
    #RTsbsr-335 .cs-picture img,
    #RTsbst-335 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    #RTsbs-335 .cs-box,
    #RTsbsr-335 .cs-box,
    #RTsbst-335 .cs-box {
        width: 15.8125em;
        height: 15.8125em;
        border-radius: 50%;
        border: clamp(6px, 1.2vw, 12px) solid #f7f7f7;
        background-color: var(--primaryLight);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 0.25rem;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    #RTsbs-335 .cs-number,
    #RTsbsr-335 .cs-number,
    #RTsbst-335 .cs-number {
        /* 40px - 61px */
        font-size: clamp(2.5rem, 5vw, 3.8125rem);
        line-height: 1.2em;
        font-weight: bold;
        text-align: center;
        color: var(--bodyTextColorWhite);
    }
    #RTsbs-335 .cs-desc,
    #RTsbsr-335 .cs-desc,
    #RTsbst-335 .cs-desc {
        /* 14px - 25px */
        font-size: clamp(0.875rem, 2.2vw, 1.5625rem);
        line-height: 1.2em;
        text-align: center;
        max-width: 7.8125rem;
        color: var(--bodyTextColorWhite);
    }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #RTsbs-335 .cs-container,
    #RTsbsr-335 .cs-container,
    #RTsbst-335 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    #RTsbs-335 .cs-content,
    #RTsbsr-335 .cs-content,
    #RTsbst-335 .cs-content {
        width: 50%;
    }
    #RTsbs-335 .cs-image-group,
    #RTsbsr-335 .cs-image-group,
    #RTsbst-335 .cs-image-group {
        /* reset the scale */
        font-size: min(1.2vw, 1em);
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #RTsbsr-335 {
        background-color: #f7f7f7;
    }
    #RTsbsr-335 .cs-image-group {
        left: auto;
        right: 0;
    }
    #RTsbsr-335 .cs-image-group:before {
        left: auto;
        right: 0;
    }
    #RTsbsr-335 .cs-image-group:after {
        right: auto;
        left: 6.25em;
    }
    #RTsbsr-335 .cs-picture {
        border-color: #fff;
    }
    #RTsbsr-335 .cs-box {
        border-color: #fff;
        right: auto;
        left: 0;
    }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64em) {
    #RTsbsr-335 .cs-image-group {
        /* sends it to the right */
        order: 2;
    }
}

/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #gallery-378 {
      padding: var(--sectionPadding);
    }
    #gallery-378 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
    }
    #gallery-378 .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;
    }
    #gallery-378 .cs-gallery {
      width: 100%;
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      /* 16px - 20px */
      gap: clamp(1rem, 1.5vw, 1.25rem);
    }
    #gallery-378 .cs-image {
      border-radius: 1.25rem;
      width: 46%;
      /* 150px - 300px */
      height: clamp(9.375rem, 39vw, 18.75rem);
      max-width: 21.875rem;
      /* clips the image corners */
      overflow: hidden;
      display: block;
      position: relative;
    }
    #gallery-378 .cs-image img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      /* makes it act like a background image */
      object-fit: cover;
    }
  }
  /* Small Desktop - 1024px */
  @media only screen and (min-width: 64rem) {
    #gallery-378 .cs-image {
      width: 23.8%;
      /* 300px - 400px */
      height: clamp(18.75rem, 30vw, 25rem);
      aspect-ratio: 1;
    }
  }

  /*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #cta-384 {
      padding: var(--sectionPadding);
      position: relative;
    }
    #cta-384 .cs-background {
      width: 100%;
      height: 100%;
      opacity: 0.5;
      background-blend-mode: multiply;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }
    #cta-384 .cs-background img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      /* Makes img tag act as a background image */
      object-fit: cover;
    }
    #cta-384 .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-384 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: center;
      width: 100%;
      max-width: 27.125rem;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: center;
    }
    #cta-384 .cs-text {
      margin-bottom: 1rem;
    }
    #cta-384 .cs-text:last-of-type {
      margin-bottom: 2rem;
    }
    #cta-384 .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;
    }
    #cta-384 .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-384 .cs-button-solid:hover:before {
      width: 100%;
    }
    #cta-384 .cs-image-group {
      /* everything is in ems so we can scale the container down with a font size */
      font-size: min(2.6vw, .8em);
      width: 33.9375em;
      height: 28.75em;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #cta-384 .cs-bucket {
      width: 33.9375em;
      height: auto;
      display: block;
      position: relative;
    }
    #cta-384 .cs-bucket img {
      width: 100%;
      height: auto;
    }
    #cta-384 .cs-powder {
      width: 30.3125em;
      height: auto;
      display: block;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
      z-index: -1;
    }
    #cta-384 .cs-powder img {
      width: 100%;
      height: auto;
    }
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #cta-384 .cs-container {
      flex-direction: row;
      justify-content: space-between;
    }
    #cta-384 .cs-content {
      text-align: left;
      align-items: flex-start;
    }
    #cta-384 .cs-image-group {
      font-size: min(1.45vw, 1em);
    }
  }

  /*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #reviews-355 {
        padding: var(--sectionPadding);
    }
    #reviews-355 .cs-container {
        width: 100%;
        max-width: 90rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #reviews-355 .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;
    }

    #reviews-355 .cs-card-group {
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        /* 16px - 20px */
        gap: clamp(1rem, 2.5vw, 1.15rem);
    }
    #reviews-355 .cs-item {
        list-style: none;
        width: 100%;
        max-width: 39.375rem;
        margin: 0;
        /* 24px - 32px top & bottom */
        /* 16px - 40px left & right */
        padding: clamp(1.5rem, 3.15vw, 2rem) clamp(1rem, 3.15vw, 2.5rem);
        background-color: #f7f7f7;
        border-radius: 1rem;
        /* prevents padding from adding to height and width */
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        position: relative;
    }
    #reviews-355 .cs-quote {
        width: 2.5rem;
        height: auto;
        margin-bottom: 2rem;
        display: block;
    }
    #reviews-355 .cs-review {
        /* 14px - 20px */
        font-size: clamp(0.875rem, 2vw, 1.25rem);
        line-height: 1.5em;
        margin: 0;
        /* 20px - 40px */
        margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
        color: var(--bodyTextColor);
    }
    #reviews-355 .cs-name {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 3vw, 1.5625rem);
        line-height: 1.2em;
        font-weight: 700;
        margin: 0;
        /* in case one card has more text than the other, this pushes up against the review text so the name and title are always at the bottom. Only works if parent is a flexbox */
        margin-top: auto;
        color: var(--headerColor);
        display: block;
    }
    #reviews-355 .cs-job {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.6vw, 1rem);
        line-height: 1.5em;
        margin: 0;
        color: var(--bodyTextColor);
        display: block;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #reviews-355 .cs-card-group {
        flex-direction: row;
        justify-content: center;
        align-items: stretch;
        flex-wrap: wrap;
    }
    #reviews-355 .cs-item {
        width: clamp(31.5%, 30vw, 32.3%);
    }
}

/*-- -------------------------- -->
<---          Contact           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #contact-569 {
        padding: var(--sectionPadding);
        background-color: #fafbfc;
        position: relative;
        z-index: 1;
    }
    #contact-569 .cs-container {
        width: 100%;
        /* changes to 1064px at desktop */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 3rem;
    }
    #contact-569 .cs-left {
        max-width: 39.375rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 3rem;
    }
    #contact-569 .cs-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-569 .cs-form {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem;
    }
    #contact-569 .cs-label {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        width: 100%;
        color: var(--headerColor);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 0.25rem;
    }
    #contact-569 .cs-input {
        font-size: 1rem;
        width: 100%;
        height: 2.5rem;
        padding: 0;
        padding-left: 1.5rem;
        color: var(--headerColor);
        background-color: #fff;
        border: 1px solid #e0e0e0;
        /* prevents padding from adding to height and width */
        box-sizing: border-box;
        transition: border-color 0.3s;
    }
    #contact-569 .cs-input:hover {
        border-color: var(--secondary);
    }
    #contact-569 .cs-input:focus {
        outline: 1px solid var(--secondary);
    }
    #contact-569 .cs-input::placeholder {
        color: #7d799c;
        opacity: 0.6;
        font-size: 0.875rem;
    }
    #contact-569 .cs-textarea {
        /* 120px - 140px */
        min-height: clamp(7.5rem, 28vw, 8.75rem);
        padding-top: 1.5rem;
        margin-bottom: 0.75rem;
        font-family: inherit;
    }
    #contact-569 .cs-submit {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 2.6vw, 1.5625rem);
        /* 56px - 70px */
        line-height: clamp(3.5rem, 7vw, 4.375rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #1a1a1a;
        border: none;
        width: 100%;
        padding: 0 1.5rem;
        background-color: var(--secondary);
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
        transition: color 0.3s;
    }
    #contact-569 .cs-submit:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width 0.3s;
    }
    #contact-569 .cs-submit:hover {
        color: #fff;
        cursor: pointer;
    }
    #contact-569 .cs-submit:hover:before {
        width: 100%;
    }
    #contact-569 .cs-right {
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
        row-gap: 3rem;
    }
    #contact-569 .cs-flex {
        /* resets to 100% at desktop */
        width: 49%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    #contact-569 .cs-header {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 5vw, 1.5625rem);
        line-height: 1.2em;
        font-weight: 700;
        margin: 0;
        color: var(--headerColor);
        display: block;
    }
    #contact-569 .cs-link {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.4vw, 1rem);
        line-height: 1.5em;
        text-decoration: none;
        margin: 0;
        color: var(--headerColor);
        display: block;
    }
    #contact-569 .cs-link:hover {
        text-decoration: underline;
    }
    #contact-569 .cs-phone {
        /* scoot it 8px up to override the 16px gap on the parent and make it 8px */
        margin-top: -0.5rem;
    }
    #contact-569 .cs-social {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        /* 24px - 30px */
        gap: clamp(1.5rem, 3vw, 1.875rem);
    }
    #contact-569 .cs-li {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #contact-569 .cs-social-link {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 2.5rem;
        height: 2.5rem;
        border: 1px solid var(--secondary);
        border-radius: 50%;
        transition:
            background-color 0.3s,
            transform 0.3s;
    }
    #contact-569 .cs-social-link:hover {
        background-color: var(--secondary);
        transform: translateY(-0.25rem);
    }
    #contact-569 .cs-social-link:hover .cs-icon {
        /* turn icon white */
        filter: grayscale(1) brightness(1000%);
    }
    #contact-569 .cs-icon {
        width: auto;
        height: 0.9375rem;
    }
}
/* Tablet - 650px */
@media only screen and (min-width: 40.625rem) {
    #contact-569 .cs-label {
        width: 48.4%;
    }
    #contact-569 .cs-message {
        width: 100%;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #contact-569 .cs-container {
        max-width: 66.5rem;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }
    #contact-569 .cs-left {
        width: 60%;
    }
    #contact-569 .cs-submit {
        width: 15rem;
    }
    #contact-569 .cs-right {
        width: 19rem;
        flex-direction: column;
        /* prevent flexbox from squishing it */
        flex: none;
    }
    #contact-569 .cs-flex {
        width: 100%;
    }
    #contact-569 .cs-social {
        /* adds an extra 16px + 48px row gap on the parent to make 64px space between */
        margin-top: 1rem;
    }
}

/*-- -------------------------- -->
<---          Footer            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #footer-1391 {
        padding: var(--sectionPadding);
        position: relative;
        z-index: 1;
    }
    #footer-1391 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #footer-1391 .cs-top {
        width: 100%;
        margin-bottom: 2.5rem;
        /* 24px - 64px */
        padding-bottom: clamp(1.5rem, 5vw, 4rem);
        border-bottom: 1px solid #e8e8e8;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* 24px - 40px */
        gap: clamp(1.25rem, 4vw, 2.5rem);
    }
    #footer-1391 .cs-ul {
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        row-gap: 0.5rem;
        /* 24px - 36px */
        column-gap: clamp(1.5rem, 4vw, 2.25rem);
    }
    #footer-1391 .cs-li {
        list-style: none;
    }
    #footer-1391 .cs-link {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        text-decoration: none;
        margin: 0;
        color: var(--bodyTextColor);
        display: block;
        transition: color 0.3s;
    }
    #footer-1391 .cs-link:hover {
        color: var(--primary);
    }
    #footer-1391 .cs-logo {
        width: 100%;
        max-width: 13.0625rem;
        height: auto;
        display: block;
    }
    #footer-1391 .cs-logo-img {
        width: 100%;
        height: auto;
        display: block;
    }
    #footer-1391 .cs-bottom {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    #footer-1391 .cs-social {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
    }
    #footer-1391 .cs-social-li {
        list-style: none;
    }
    #footer-1391 .cs-social-link {
        width: 2rem;
        height: 2rem;
        background-color: #484848;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background-color 0.3s;
    }
    #footer-1391 .cs-social-link:hover {
        background-color: var(--primary);
    }
    #footer-1391 .cs-social-link:hover .cs-social-icon {
        filter: grayscale(1) brightness(1000%);
        opacity: 1;
    }
    #footer-1391 .cs-social-icon {
        width: 0.75rem;
        height: auto;
        display: block;
        transition: opacity 0.3s;
    }
    #footer-1391 .cs-copyright {
        font-size: 1rem;
        color: var(--bodyTextColor);
        line-height: 1.5em;
        margin: 0;
        display: block;
    }
    #footer-1391 .cs-copyright-link,
    #footer-1391 .cs-separater {
        font-size: 1rem;
        text-decoration: none;
        color: var(--bodyTextColor);
        transition: color 0.3s;
    }
    #footer-1391 .cs-copyright-link:hover,
    #footer-1391 .cs-separater:hover {
        color: var(--primary);
    }
    #footer-1391 .cs-separater {
        margin: 0 1rem;
        display: inline-block;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #footer-1391 .cs-top {
        align-items: flex-start;
    }
    #footer-1391 .cs-bottom {
        flex-direction: row;
        justify-content: center;
    }
    #footer-1391 .cs-flex {
        margin: 0 auto;
    }
    #footer-1391 .cs-social {
        /* sends it to the right in the 3rd position */
        order: 3;
    }
}
                                                                                               

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #services-367 {
        padding: var(--sectionPadding);
    }
    @keyframes floatAnimation2 {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-4px);
        }
        70% {
            transform: translateY(4px);
        }
        100% {
            transform: translateY(0);
        }
    }
    @keyframes InAndOut {
        0% {
            transform: translateY(3.75rem) scale(1);
            opacity: 1;
        }
        30% {
            transform: translateY(1.875rem) scale(0.8);
            opacity: 1;
        }
        60% {
            transform: translateY(0.625rem) scale(0.5);
            opacity: 0.2;
        }
        100% {
            transform: translateY(0rem) scale(0.2);
            opacity: 0;
        }
    }
    @keyframes InAndOut2 {
        0% {
            transform: translateY(4.375rem) scale(1);
            opacity: 1;
        }
        30% {
            transform: translateY(2.5rem) scale(0.8);
            opacity: 1;
        }
        60% {
            transform: translateY(1.25rem) scale(0.6);
            opacity: 1;
        }
        100% {
            transform: translateY(0rem) scale(0.4);
            opacity: 0;
        }
    }
    #services-367 .cs-container {
        width: 100%;
        /* changes to 1440px at desktop */
        max-width: 59rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #services-367 .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;
        margin-top: 30%;
    }

    #services-367 .cs-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: column;
        /* 16px - 20px */
        gap: clamp(1rem, 2vw, 1.25rem);
    }
    #services-367 .cs-item {
        list-style: none;
        width: 100%;
        max-width: 31.25rem;
        /* 20px - 40px top & bottom */
        /* 16px - 32px left & right */
        padding: clamp(1.25rem, 3.5vw, 2.5rem) clamp(1rem, 2.5vw, 2rem);
        border-radius: 1rem;
        border: 1px solid #e8e8e8;
        box-sizing: border-box;
        transition: background-color 0.3s;
    }
    #services-367 .cs-item:hover {
        background-color: var(--primary);
    }
    #services-367 .cs-item:hover .cs-icon-wrapper:before,
    #services-367 .cs-item:hover .cs-bubble:before,
    #services-367 .cs-item:hover .cs-icon-wrapper:after,
    #services-367 .cs-item:hover .cs-bubble:after {
        background-color: #449ffc;
    }
    #services-367 .cs-item:hover .cs-icon {
        /* makes it white on hover */
        filter: grayscale(1) brightness(1000%);
    }
    #services-367 .cs-item:hover .cs-h3 {
        color: #fff;
    }
    #services-367 .cs-item:hover .cs-item-text {
        color: #fff;
    }
    #services-367 .cs-link {
        text-decoration: none;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #services-367 .cs-icon-wrapper {
        width: 6.125rem;
        height: 7.5rem;
        margin-bottom: 1.5rem;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        position: relative;
    }
    #services-367 .cs-icon-wrapper:before {
        /* Small Bubble */
        content: "";
        width: 1.6875rem;
        height: 1.6875rem;
        border-radius: 50%;
        background: #e5f2ff;
        opacity: 1;
        position: absolute;
        display: block;
        top: 0;
        left: 0.1875rem;
        animation-name: InAndOut;
        animation-duration: 1.6s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        transition: background-color 0.3s;
    }
    #services-367 .cs-icon-wrapper:after {
        /* Small Bubble */
        content: "";
        width: 1.6875rem;
        height: 1.6875rem;
        border-radius: 50%;
        background: #e5f2ff;
        opacity: 1;
        position: absolute;
        display: block;
        top: 0.6875rem;
        right: 0.3125rem;
        animation-name: InAndOut2;
        animation-duration: 2s;
        animation-delay: 0.3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        transition: background-color 0.3s;
    }
    #services-367 .cs-bubble {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
    #services-367 .cs-bubble:before {
        /* Big Bubble */
        content: "";
        width: 3.9375rem;
        height: 3.9375rem;
        border-radius: 50%;
        background: #e5f2ff;
        opacity: 1;
        position: absolute;
        display: block;
        bottom: 0.25rem;
        left: 0rem;
        animation-name: floatAnimation2;
        animation-duration: 12s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        transition: background-color 0.3s;
    }
    #services-367 .cs-bubble:after {
        /* Big Bubble */
        content: "";
        width: 3.125rem;
        height: 3.125rem;
        border-radius: 50%;
        background: #e5f2ff;
        opacity: 1;
        position: absolute;
        display: block;
        bottom: -0.25rem;
        right: 0rem;
        animation-name: floatAnimation2;
        animation-duration: 10s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        transition: background-color 0.3s;
    }
    #services-367 .cs-icon {
        width: 4.5rem;
        height: auto;
        position: relative;
        z-index: 10;
    }
    #services-367 .cs-h3 {
        font-size: 1.25rem;
        font-weight: 900;
        text-align: center;
        line-height: 1.2em;
        margin: 0;
        margin-bottom: 0.75rem;
        color: var(--headerColor);
        transition: color 0.3s;
    }
    #services-367 .cs-item-text {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        text-align: center;
        line-height: 1.5em;
        margin: 0;
        color: var(--bodyTextColor);
        transition: color 0.3s;
    }
    #services-367 .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;
    }
    #services-367 .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;
    }
    #services-367 .cs-button-solid:hover:before {
        width: 100%;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #services-367 .cs-container {
        margin-top: -10%;
    }
    #services-367 .cs-card-group {
        flex-direction: row;
        justify-content: center;
    }
    #services-367 .cs-item {
        width: 48%;
    }
}
/* Desktop - 1200px */
@media only screen and (min-width: 75rem) {
    #services-367 .cs-container {
        max-width: 90rem;
        margin-top: -15%;
    }
    #services-367 .cs-item {
        /* we do this so it's stackable. You can add any number of reviews you want and they will stack and center in the middle. We dont use grid because if you have an odd number of cards, they don't stay centered, they align with their grid lines. This way its more FLEX-ible*/
        width: clamp(23.47%, 23vw, 23.955%);
    }
}


  /*-- -------------------------- -->
<---          Contact Page         -->
<--- -------------------------- -*/

body.dark-mode .cs-button-solid {
    background-color: var(--secondaryLight);
    color: #1a1a1a;
}
body.dark-mode .cs-button-solid:before {
    background-color: #fff;
}
.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;
}
.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;
}
.cs-button-solid:hover:before {
    width: 100%;
}
/* ^^^ remove everything above this comment and place in global stylesheet ^^^ */

/*-- -------------------------- -->
<---          Banner            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #ContactBanner-721 {
        /* 175px - 200px top */
        padding: clamp(10.9375rem, 10vw, 12.5rem) 1rem 6.25rem;
        position: relative;
        z-index: 1;
    }
    #ContactBanner-721 .cs-container {
        text-align: center;
        width: 100%;
        max-width: 80rem;
        margin: auto;
        margin-top: 10%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;
    }
    #ContactBanner-721 .cs-int-title {
        /* 39px - 61px */
        font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
        font-weight: 900;
        line-height: 1.2em;
        text-align: inherit;
        margin: 0;
        color: var(--bodyTextColorWhite);
        position: relative;
    }
    #ContactBanner-721 .cs-background {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    #ContactBanner-721 .cs-background:before {
        /* background color overlay */
        content: "";
        position: absolute;
        display: block;
        height: 100%;
        width: 100%;
        background: #000;
        opacity: 0.75;
        top: 0;
        left: 0;
        z-index: 1;
    }
    #ContactBanner-721 .cs-background img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* Makes img tag act as a background image */
        object-fit: cover;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #ContactBanner-721 .cs-background:before {
        opacity: 1;
        background: linear-gradient(
            90.01deg,
            rgba(0, 0, 0, 0.9) 16.86%,
            rgba(0, 0, 0, 0) 100%
        );
    }
}

/*-- -------------------------- -->
<---          Contact           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #ContactForm-721 {
        padding: var(--sectionPadding);
        position: relative;
        z-index: 1;
    }
    #ContactForm-721 .cs-container {
        width: 100%;
        /* changes to 1280px at desktop */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 3.25rem;
    }
    #ContactForm-721 .cs-picture {
        width: 100%;
        max-width: 40.625rem;
        height: auto;
        /* reset at desktop */
        aspect-ratio: 1.00516351;
        position: relative;
    }
    #ContactForm-721 .cs-picture img {
        width: 100%;
        height: 100%;
        /* makes it act like a background image */
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
    }
    #ContactForm-721 .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;
    }

    #ContactForm-721 .cs-form {
        /* 24px - 48px top and bottom */
        /* 20px - 32px left and right */
        padding: clamp(1.25rem, 4.18vw, 3rem) clamp(1.25rem, 4.18vw, 2rem);
        background-color: #f7f8f8;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem;
    }
    #ContactForm-721 .cs-label {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        width: 100%;
        color: var(--headerColor);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 0.25rem;
    }
    #ContactForm-721 .cs-input {
        font-size: 1rem;
        width: 100%;
        height: 3.5rem;
        padding: 0;
        padding-left: 1.5rem;
        color: var(--headerColor);
        background-color: #fff;
        border: none;
        /* prevents padding from adding to height and width */
        box-sizing: border-box;
    }
    #ContactForm-721 .cs-input::placeholder {
        color: #7d799c;
        opacity: 0.6;
    }
    #ContactForm-721 .cs-textarea {
        min-height: 7.5rem;
        padding-top: 1.5rem;
        margin-bottom: 0.75rem;
        font-family: inherit;
    }
    #ContactForm-721 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875em, 5.5vw, 3.5em);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #fff;
        border: none;
        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;
        transition: color 0.3s;
    }
    #ContactForm-721 .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;
    }
    #ContactForm-721 .cs-button-solid:hover {
        color: #fff;
    }
    #ContactForm-721 .cs-button-solid:hover:before {
        width: 100%;
    }
    #ContactForm-721 .cs-submit {
        min-width: 17.6875rem;
        border-radius: 0;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #ContactForm-721 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        justify-content: space-between;
        gap: 3.25rem;
    }
    #ContactForm-721 .cs-picture {
        height: 51.875rem;
        aspect-ratio: initial;
        /* sends it to the right in the 2nd position */
        order: 2;
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0em) {
    #ContactStrip-721 {
        padding: var(--sectionPadding);
        background-color: var(--primary);
        position: relative;
        z-index: 1;
    }
    #ContactStrip-721 .cs-stat-group {
        width: 100%;
        /* changes to 1280px at desktop */
        max-width: 37.5rem;
        margin: auto;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 2.5rem;
    }
    #ContactStrip-721 .cs-item {
        list-style: none;
        width: 18.125rem;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    #ContactStrip-721 .cs-item:hover .cs-picture {
        background-color: #fff;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        transform: scale(1.1);
    }
    #ContactStrip-721 .cs-picture {
        width: 5rem;
        height: 5rem;
        /* 12px - 20px */
        margin-right: clamp(0.75rem, 3vw, 1.25rem);
        border-radius: 50%;
        border: 1px solid #f6e5db;
        display: flex;
        justify-content: center;
        align-items: center;
        /* prevents flexbox from squishing it */
        flex: none;
        transition:
            background-color 0.3s,
            box-shadow 0.3s,
            transform 0.6s;
    }
    #ContactStrip-721 .cs-flex-group {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
    }
    #ContactStrip-721 .cs-icon {
        width: 2.5rem;
        height: auto;
    }
    #ContactStrip-721 .cs-header {
        font-size: 1.25rem;
        color: var(--bodyTextColorWhite);
        font-weight: 900;
        line-height: 1.2em;
        margin: 0;
        margin-bottom: 0.75rem;
        display: block;
    }
    #ContactStrip-721 .cs-link,
    #ContactStrip-721 .cs-address {
        font-size: var(--bodyTextColor);
        line-height: 1.5em;
        text-decoration: none;
        color: var(--bodyTextColorWhite);
        display: block;
    }
    #ContactStrip-721 .cs-link:hover {
        text-decoration: underline;
    }
    #ContactStrip-721 .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;
    }
}
/* Tablet - 650px */
@media only screen and (min-width: 40.625em) {
    #ContactStrip-721 .cs-stat-group {
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: 1.25rem;
        row-gap: 2rem;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64em) {
    #ContactStrip-721 .cs-stat-group {
        max-width: 80rem;
        flex-wrap: nowrap;
        justify-content: space-evenly;
    }
}

/*-- -------------------------- -->
<---            Map             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #ContactMap-721 {
        min-height: 33.75rem;
        padding: var(--sectionPadding);
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    #ContactMap-721 .cs-background {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    #ContactMap-721 .cs-background img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* Makes img tag act as a background image */
        object-fit: cover;
    }
}

/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #ContactFAQ-721 {
        position: relative;
        overflow: hidden;
    }
    #ContactFAQ-721 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* 40px - 48px */
        gap: clamp(2.5rem, 5vw, 3rem);
    }
    #ContactFAQ-721 .cs-content {
        text-align: left;
        max-width: 33.8125rem;
        /* move section padding to the cs-content so we can make the cs-picture full width */
        padding: var(--sectionPadding);
        padding-top: 0;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
    }

    #ContactFAQ-721 .cs-faq-group {
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #ContactFAQ-721 .cs-faq-item {
        list-style: none;
        width: 100%;
        border-bottom: 1px solid #e8e8e8;
        transition: border-bottom 0.3s;
    }
    #ContactFAQ-721 .cs-faq-item.active {
        border-color: var(--primaryLight);
    }
    #ContactFAQ-721 .cs-faq-item.active .cs-button {
        color: var(--primary);
    }
    #ContactFAQ-721 .cs-faq-item.active .cs-button:before {
        background-color: var(--primaryLight);
        transform: rotate(315deg);
    }
    #ContactFAQ-721 .cs-faq-item.active .cs-button:after {
        background-color: var(--primaryLight);
        transform: rotate(-315deg);
    }
    #ContactFAQ-721 .cs-faq-item.active .cs-item-p {
        height: auto;
        /* 20px - 24px bottom */
        padding: 0 0 clamp(1rem, 2vw, 1.5rem) 0;
        opacity: 1;
    }
    #ContactFAQ-721 .cs-button {
        /* 16px - 20px */
        font-size: clamp(1rem, 2vw, 1.25rem);
        line-height: 1.2em;
        text-align: left;
        font-weight: bold;
        /* 16px - 24px */
        padding: clamp(1rem, 2.3vw, 1.5rem) 0;
        border: none;
        background: transparent;
        color: var(--headerColor);
        display: block;
        width: 100%;
        position: relative;
        transition:
            background-color 0.3s,
            color 0.3s;
    }
    #ContactFAQ-721 .cs-button:hover {
        cursor: pointer;
    }
    #ContactFAQ-721 .cs-button:before {
        /* left line */
        content: "";
        width: 0.5rem;
        height: 0.125rem;
        background-color: var(--headerColor);
        opacity: 1;
        border-radius: 50%;
        position: absolute;
        display: block;
        top: 45%;
        right: 0.25rem;
        transform: rotate(45deg);
        /* animate the transform from the left side of the x axis, and the center of the y */
        transform-origin: left center;
        transition: transform 0.5s;
    }
    #ContactFAQ-721 .cs-button:after {
        /* right line */
        content: "";
        width: 0.5rem;
        height: 0.125rem;
        background-color: var(--headerColor);
        opacity: 1;
        border-radius: 50%;
        position: absolute;
        display: block;
        top: 45%;
        right: 0.0625rem;
        transform: rotate(-45deg);
        /* animate the transform from the right side of the x axis, and the center of the y */
        transform-origin: right center;
        transition: transform 0.5s;
    }
    #ContactFAQ-721 .cs-button-text {
        width: 90%;
        display: block;
    }
    #ContactFAQ-721 .cs-item-p {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        width: 90%;
        max-width: 33.8125rem;
        height: 0;
        margin: 0;
        padding: 0;
        opacity: 0;
        color: var(--bodyTextColor);
        /* clips the text so it doesn't show up */
        overflow: hidden;
        transition:
            opacity 0.3s,
            padding-bottom 0.3s;
    }
    #ContactFAQ-721 .cs-graphic {
        width: 22.5625rem;
        height: auto;
        opacity: 0.5;
        display: none;
        position: absolute;
        left: -11.25rem;
        bottom: 1.875rem;
        /* flips it horizontally */
        transform: scaleX(-1);
    }
    #ContactFAQ-721 .cs-picture {
        display: block;
        position: relative;
        width: 100%;
        height: 16rem;
        z-index: 1;
    }
    #ContactFAQ-721 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #ContactFAQ-721 {
        /* moved seciton padding back to the section */
        padding: var(--sectionPadding);
    }
    #ContactFAQ-721 .cs-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
    #ContactFAQ-721 .cs-picture {
        width: 50%;
        max-width: 40.625rem;
        /* 500px - 750px */
        height: clamp(31.25rem, 68vw, 46.875rem);
        /* sends it to the right in the 2nd position */
        order: 2;
    }
    #ContactFAQ-721 .cs-content {
        width: 55%;
        padding: 0;
    }
}
/* Desktop - 1600px */
@media only screen and (min-width: 100rem) {
    #ContactFAQ-721 .cs-graphic {
        display: block;
    }
}

/*-- -------------------------- -->
<---    Google Maps Iframe      -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #map-1403 iframe {
        width: 100%;
        /* 400px - 560px */
        height: clamp(25rem, 42vw, 35rem);
    }
}

/* Capability statement */
#cs-statement-body {
    text-align: center;
}

#capabilitystatement {
    position: relative;
    padding-top: 161px;
    padding-bottom: 45%;
    text-align: center;
    height: 100%;
    font-family: Helvetica;
    background-image: url(imgs/CapabilityStatementBackgroundImage.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#cs-sectionheader {
    font-size: 5vh;
    color: #1666BA;
}

.container {
    display: grid;
    width: 50%;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
        "logo logo info info info"
        "whatwedo whatwedo whoweare whoweare whoweare"
        "clientslabel clientslabel clientslabel clientslabel clientslabel"
        "clients clients clients clients clients";
    overflow: hidden;
}

.idinfohalf {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
}

.idinfo {
    text-align: center;
}

#logo {
    grid-area: logo;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.logohalf img {
    height: 150px;
    width: auto;
}

#info {
    grid-area: info;
    background-color: #1666BA;
    color: white;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
}

.top-halfInfo {
    display: flex;
    justify-content: space-between;
    line-height: .5cm;
}

.top-halfInfo p {
    margin: 5%;
}

.janitor {
    font-weight: bolder;
    color: black;
}

.headshot {
    min-width: 125px;
}

.headshot img {
    max-width: 195px;
}

.bottom-halfInfo {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 20px 15px;
    width: auto;
}

.cscontactinfo h3, p{
    margin-top: 0;
    margin-bottom: 0;
}

.link {
    text-decoration: underline;
}

#whatwedo {
    grid-area: whatwedo;
}

#whatwedo li {
    margin: 10px 0;
}

#whatwedo ul{
    text-align: left;
    list-style-type: square;
}

#whoweare {
    grid-area: whoweare;
}

.whowearecontainer {
    width: 80%;
}

.whowearecontainer ul{
    list-style-type: square;
}

.whowearecontainer li{
    margin: 10px 0;
}

#clients-label {
    grid-area: clientslabel;
    background-color: #1666BA;
    color: white;
}

#clients-label h3 {
    margin: 1px;
}

#clients {
    grid-area: clients;
}

.label {
    display: inline-block;
    font-size: larger;
}

.bold {
    font-weight: bolder;
    display: inline-block;
}

.logoimg {
    height: 15%;
    width: 15%;
}

#download-cs {
    background-color: #1666BA;
    color: white;
    padding: 15px 25px;
    text-decoration: none;
    margin-top: 1%;
  }

  #download-cs:hover {
    background-color: #1a1a1a;
  }

@media screen and (max-width: 1800px) {
    .cscontactinfo h3, p{
        font-size: 85%;
    }
    .headshot img{
        height: 90%;
        width: 90%;
    }
  }


  @media screen and (max-width: 1428px) {
    .logohalf img {
        height: 90%;
        width: 90%;
    }
  }

  @media screen and (max-width: 1314px) {
    .container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas: 
            "logo"
            "info"
            "whatwedo"
            "whoweare"
            "clientslabel"
            "clients";
        overflow: hidden;
        width: 100vw;
        margin: 0;
    }

    /* .logohalf img {
        height: 100%;
        width: auto;
    } */

    .idinfohalf {
        justify-content:center;
    }

    .headshot img {
        height: 162px;
        width: auto;
    }

    .headshot {
        height: 162px;
    }

    .cscontactinfo h3, p{
        font-size: 100%;
    }
  }

  @media screen and (max-width: 670px) {
    .logo-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .logoimg {
        height: 200px;
        width: auto;
    }
  }

  @media screen and (max-width: 505px) {
    .idinfo p{
        font-size: 85%;
    }

    .top-halfInfo p{
        font-size: 80%;
        justify-content: center;
        width: 100%;
    }

    .bottom-halfInfo {
        flex-direction: column;
    }

    .headshot img {
        height: 150px;
        width: 150px;
    }

    .cscontactinfo {
        text-align: center;
    }

    .cscontactinfo h3, p {
        font-size: 90%;
    }
  }
/* 
  @media screen and (max-width: 372px) {
    .bottom-halfInfo {
        flex-direction: column;
    }
    .headshot img {
        height: 150px;
        width: 150px;
    }
    .cscontactinfo {
        text-align: left;
    }
  } */