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

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

.cs-button-1 {
    font-family: 'Roboto', 'Arial', sans-serif;
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 8vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    margin: auto;
    color: #fff;
    padding: 0 1.5rem;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
}

.cs-button-1:hover:before {
    width: 100%;
}

.cs-button-1:before {
    /* hover box */
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width .3s;
}

:root {
    /* remove this whole :root and put in your global css file that's shared on all pages, then just remove this section from all other Stitches you add later, only need this once in your global stylesheet */
    --primary: #5A766A;
    --primaryLight: #5A766A;
    --secondary: #FFBA43;
    --secondaryLight: #FFBA43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4E4B66;
    --bodyTextColorWhite: #FAFBFC;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75em, 7.82vw, 6.25em) 1rem;
}

/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
    body.cs-open {
        overflow: hidden;
    }

    #cs-navigation {
        /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
        font-family: 'Roboto', 'Arial', sans-serif;
        width: 100%;
        padding: 0.75rem 1rem;
        /* prevents padding from affecting height and width */
        box-sizing: border-box;
        background-color: #fff;
        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 .5s, opacity .5s;
    }

    #cs-navigation.cs-active:before {
        height: 150vh;
        opacity: 1;
    }

    #cs-navigation.cs-active .cs-ul-wrapper {
        opacity: 1;
        transform: scaleY(1);
        transition-delay: .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 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 {
        /* 44px - 48px */
        width: clamp(2.75rem, 6vw, 3rem);
        height: clamp(2.75rem, 6vw, 3rem);
        margin: 0 0 0 auto;
        border-radius: 0.25rem;
        background-color: transparent;
        border: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #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);
        /* 14px - 16px */
        height: clamp(0.875rem, 1.5vw, 1rem);
        position: relative;
    }

    #cs-navigation .cs-line {
        width: 100%;
        height: 2px;
        border-radius: 2px;
        background-color: #1a1a1a;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    #cs-navigation .cs-line1 {
        top: 0;
        transform-origin: center;
        transition: transform .5s, top .3S, left .3S;
        animation-duration: .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 .3s, left .3s, transform .5s;
        animation-duration: .7s;
        animation-timing-function: ease;
        animation-fill-mode: forwards;
        animation-direction: normal;
    }

    #cs-navigation .cs-line3 {
        bottom: 0;
        transition: bottom .3s, opacity .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 .4s, opacity .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 .6s, opacity .9s;
    }

    #cs-navigation .cs-li:nth-of-type(1) {
        transition-delay: .05s;
    }

    #cs-navigation .cs-li:nth-of-type(2) {
        transition-delay: .1s;
    }

    #cs-navigation .cs-li:nth-of-type(3) {
        transition-delay: .15s;
    }

    #cs-navigation .cs-li:nth-of-type(4) {
        transition-delay: .2s;
    }

    #cs-navigation .cs-li:nth-of-type(5) {
        transition-delay: .25s;
    }

    #cs-navigation .cs-li:nth-of-type(6) {
        transition-delay: .3s;
    }

    #cs-navigation .cs-li:nth-of-type(7) {
        transition-delay: .35s;
    }

    #cs-navigation .cs-li:nth-of-type(8) {
        transition-delay: .4s;
    }

    #cs-navigation .cs-li:nth-of-type(9) {
        transition-delay: .45s;
    }

    #cs-navigation .cs-li:nth-of-type(10) {
        transition-delay: .5s;
    }

    #cs-navigation .cs-li:nth-of-type(11) {
        transition-delay: .55s;
    }

    #cs-navigation .cs-li:nth-of-type(12) {
        transition-delay: .6s;
    }

    #cs-navigation .cs-li:nth-of-type(13) {
        transition-delay: .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:before {
        /* active state underline */
        content: '';
        width: 100%;
        height: 1px;
        background: currentColor;
        opacity: 1;
        position: absolute;
        display: none;
        bottom: -0.125rem;
        left: 0;
    }

    #cs-navigation .cs-li-link.cs-active:before {
        display: block;
    }

    #cs-navigation .cs-button-solid {
        display: none;
    }
}

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

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #cs-navigation {
        /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
        font-family: 'Roboto', 'Arial', sans-serif;
        width: 100%;
        padding: 0 1rem;
        /* prevents padding from affecting height and width */
        box-sizing: border-box;
        background-color: #fff;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        position: fixed;
        z-index: 10000;
    }

    #cs-navigation .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 1.5rem;
    }

    #cs-navigation .cs-toggle {
        display: none;
    }

    #cs-navigation .cs-logo {
        width: 18.4%;
        max-width: 21.875rem;
        height: 4.0625rem;
        /* 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 {
        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: 2rem 0;
        /* prevent flexbox from squishing it */
        flex: none;
    }

    #cs-navigation .cs-li-link {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1vw, 1rem);
        line-height: 1.5em;
        text-decoration: none;
        margin: 0;
        color: var(--bodyTextColor);
        display: block;
        position: relative;
    }

    #cs-navigation .cs-li-link:hover:before {
        width: 100%;
    }

    #cs-navigation .cs-li-link.cs-active:before {
        width: 100%;
    }

    #cs-navigation .cs-li-link:before {
        /* active state underline */
        content: '';
        width: 0%;
        height: 2px;
        background: var(--primary);
        opacity: 1;
        position: absolute;
        display: block;
        bottom: 0rem;
        left: 0;
        transition: width .3s;
    }

    #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 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-navigation .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 .3s;
    }

    #cs-navigation .cs-button-solid:hover:before {
        width: 100%;
    }
}
/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {

    #services-448 {
        /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
        font-family: 'Roboto', 'Arial', sans-serif;
        padding: var(--sectionPadding);
        padding-top: 100px;
    }

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

    #services-448 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: center;
    }

    #services-448 .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;
    }

    #services-448 .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;
    }

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

    #services-448 .cs-card-group {
        width: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* 16px - 20px */
        column-gap: clamp(1rem, 1.5vw, 1.25rem);
        /* 24px - 60px */
        row-gap: clamp(1.5rem, 5vw, 3.75rem);
    }

    #services-448 .cs-item {
        list-style: none;
        width: 100%;
        max-width: 22.5rem;
        /* changes at desktop */
        padding-top: 9rem;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #services-448 .cs-item:hover .cs-picture img {
        transform: scale(1.2);
        opacity: .4;
    }

    #services-448 .cs-item:hover .cs-flex:before {
        opacity: 1;
    }

    #services-448 .cs-picture {
        width: 100%;
        /* changes at desktop */
        height: 15.625rem;
        border-radius: 0.5rem;
        background-color: var(--primary);
        /* clips the corners of the image */
        overflow: hidden;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }

    #services-448 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* makes it behave like a background image */
        object-fit: cover;
        /* positions top of image to the top of the container */
        object-position: top;
        transition: transform .9s, opacity .5s;
    }

    #services-448 .cs-flex {
        text-align: center;
        width: 88%;
        padding: 0 1.5rem 1.5rem 1.5rem;
        /* prevents padding from affecting height and width */
        box-sizing: border-box;
        border: 1px solid #DAD9E3;
        border-radius: 0.75rem;
        background-color: #fff;
        box-shadow: 0px 24px 54px rgba(87, 107, 147, 0.12);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    #services-448 .cs-flex:before {
        /* hover border box */
        content: '';
        background: transparent;
        /* prevents the mouse from interacting with it */
        pointer-events: none;
        border: 4px solid var(--primary);
        border-radius: 0.75rem;
        /* prevents border from affecting height and width */
        box-sizing: border-box;
        opacity: 0;
        position: absolute;
        display: block;
        top: -1px;
        left: -1px;
        right: -1px;
        bottom: -1px;
        transition: opacity .5s;
    }

    #services-448 .cs-wrapper {
        /* 80px - 120px */
        width: clamp(5rem, 9.2vw, 7.5rem);
        height: clamp(5rem, 9.2vw, 7.5rem);
        /* 20px - 24px */
        margin: 0 0 clamp(1.25rem, 1.5vw, 1.5rem);
        /* we use the same clamp value for height & width, but multiple by -.5 so it will be a negative value, and be half of the height.  Negative margins pull things toward the element so they overlap them, in this case we want the .cs-wrapper to overlap .cs-flex by half its height, so we use the same clamp for height and half it for the margin top value */
        margin-top: calc(clamp(5rem, 9.2vw, 7.5rem)*-.5);
        border-radius: 50%;
        border: 4px solid var(--primary);
        background-color: #fff;
        /* prevents border from affecting height and width */
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 10;
    }

    #services-448 .cs-icon {
        /* 48px - 64px */
        width: clamp(3rem, 4.3vw, 4rem);
        height: auto;
        display: block;
    }

    #services-448 .cs-h3 {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 1.9vw, 1.5625rem);
        line-height: 1.2em;
        font-weight: 700;
        margin: 0 0 0.5rem 0;
        color: var(--headerColor);
    }

    #services-448 .cs-item-text {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        font-weight: 400;
        /* 20px - 24px */
        margin: 0 0 clamp(1.25rem, 1.5vw, 1.5rem);
        color: var(--bodyTextColor);
    }

    #services-448 .cs-link {
        /* 16px - 20px */
        font-size: clamp(1rem, 1.5vw, 1.25rem);
        line-height: 1.5em;
        font-weight: 700;
        text-transform: uppercase;
        text-decoration: none;
        margin: 0;
        color: var(--primary);
        display: inline-block;
        position: relative;
    }

    #services-448 .cs-link:hover:before {
        width: 100%;
    }

    #services-448 .cs-link:before {
        /* animated underline */
        content: '';
        width: 0%;
        height: 3px;
        background: currentColor;
        opacity: 1;
        position: absolute;
        display: block;
        bottom: -0.125rem;
        left: 0;
        transition: width .3s;
    }
}

/* .cs-container{
    padding-top: 100px !important;
} */

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #services-448 .cs-container {
        max-width: 80rem;
    }

    #services-448 .cs-card-group {
        flex-direction: row;
    }

    #services-448 .cs-item {
        width: 47%;
    }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #services-448 .cs-card-group {
        flex-wrap: nowrap;
    }

    #services-448 .cs-item {
        width: 100%;
        /* 144px - 274px */
        padding-top: clamp(9rem, 17.5vw, 17.125rem);
    }

    #services-448 .cs-picture {
        /* 224px - 428px */
        height: clamp(14rem, 28vw, 26.75rem);
    }
}

/* Mobile - 360px */
/* you can copy and paste these styles into the section CSS where you placed the #list-1165 HTML, or you can place it in your global stylesheet so you can reuse the HTML in any Side By Side section on your site. That way when you make changes to it, it will also change everywhere in the site */
@media only screen and (min-width: 0rem) {
    #list-1165 {
        max-width: 39.375rem;
        margin: 0 0 2rem 0;
        padding: 0;
        /* clips the bullets to create the half circle */
        overflow: hidden;
    }

    #list-1165 .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;
    }

    #list-1165 .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;
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {

    #cs-footer-274 {
        font-family: 'Roboto', 'Arial', sans-serif;
        padding: var(--sectionPadding);
        /* Navigation Links */
    }

    #cs-footer-274 .cs-container {
        width: 100%;
        /* reset on tablet */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        column-gap: 5.5rem;
        row-gap: 2rem;
    }

    #cs-footer-274 .cs-logo-group {
        /* takes up all the space, lets the other ul's wrap below it */
        width: 100%;
        position: relative;
    }

    #cs-footer-274 .cs-logo-group {
        /* 44px - 52px */
        margin-bottom: clamp(2.75rem, 6.8vw, 3.25rem);
    }

    #cs-footer-274 .cs-logo {
        /* 210px - 240px */
        width: clamp(13.125rem, 8vw, 15rem);
        height: auto;
        display: block;
    }

    #cs-footer-274 .cs-logo-img {
        width: 100%;
        height: auto;
    }

    #cs-footer-274 .cs-social {
        display: inline-flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 0.75rem;
        position: absolute;
        top: 0;
        right: 0;
    }

    #cs-footer-274 .cs-social-link {
        width: 1.5rem;
        height: 1.5rem;
        background-color: #4E4B66;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 1;
        transition: transform 0.3s, background-color 0.3s;
    }

    #cs-footer-274 .cs-social-link:hover {
        background-color: var(--primary);
        transform: translateY(-0.1875rem);
    }

    #cs-footer-274 .cs-social-img {
        height: 0.8125rem;
        width: auto;
        display: block;
    }

    #cs-footer-274 .cs-nav {
        padding: 0;
        margin: 0;
    }

    #cs-footer-274 .cs-nav-li {
        list-style: none;
        margin: 0;
        color: var(--bodyTextColor);
    }

    #cs-footer-274 .cs-header {
        font-size: 1rem;
        line-height: 1.5em;
        font-weight: 700;
        /* 16px - 20px */
        margin-bottom: clamp(1rem, 2.7vw, 1.25rem);
        color: var(--bodyTextColor);
        position: relative;
        display: block;
    }

    #cs-footer-274 .cs-nav-link {
        font-size: 1rem;
        text-decoration: none;
        line-height: 1.5em;
        color: var(--bodyTextColor);
        position: relative;
    }

    #cs-footer-274 .cs-nav-link:before {
        /* underline */
        content: '';
        width: 0%;
        height: 0.125rem;
        background: var(--bodyTextColor);
        opacity: 1;
        position: absolute;
        display: block;
        bottom: -0.125rem;
        left: 0;
        transition: width .3s;
    }

    #cs-footer-274 .cs-nav-link:hover:before {
        width: 100%;
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #cs-footer-274 .cs-container {
        max-width: 80rem;
        row-gap: 0;
        /* 44px - 88px */
        column-gap: clamp(2.75rem, calc(6%), 5.5rem);
    }

    #cs-footer-274 .cs-logo-group {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    #cs-footer-274 .cs-social {
        flex-direction: row;
        position: relative;
        top: auto;
        right: auto;
    }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #cs-footer-274 .cs-container {
        justify-content: flex-end;
    }

    #cs-footer-274 .cs-logo-group {
        width: auto;
        margin: 0;
        /* pushes the rest of the content to the right in a flexbox */
        margin-right: auto;
        flex-direction: column;
    }

    #cs-footer-274 .cs-logo-img {
        margin-bottom: 2.75rem;
    }

    #cs-footer-274 .cs-nav {
        margin-top: 0.75rem;
    }
}