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

/* Mobile - 1023px */
@media only screen and (max-width: 1023px) {
  body.cs-open {
    overflow: hidden;
  }
  body.scroll #cs-navigation {
    /* 53px, same height as the cs-top-container */
    transform: translateY(-3.3125rem);
  }
  #cs-navigation {
    width: 100%;
    /* 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;
    transition: transform .3s;
  }
  #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-top-bar {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #cs-navigation .cs-top-container {
    width: 100%;
    padding: 1rem 1.5rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    background-color: #f7f7f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  }
  #cs-navigation .cs-top-contact {
    width: auto;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 16px - 24px */
    gap: clamp(1rem, 2vw, 1.5rem);
  }
  #cs-navigation .cs-top-link {
    font-size: 0.875rem;
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    position: relative;
  }
  #cs-navigation .cs-top-link:nth-of-type(2) {
    display: none;
  }
  #cs-navigation .cs-link-icon {
    width: 1rem;
    height: auto;
    display: block;
  }
  #cs-navigation .cs-top-social {
    visibility: visible;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    transition: opacity .3s, visibility .3s, height .3s;
  }
  #cs-navigation .cs-social-link {
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
  }
  #cs-navigation .cs-social-icon {
    width: 1.25rem;
    height: auto;
    display: block;
  }
  #cs-navigation .cs-container {
    width: 100%;
    padding: 1.25rem 1rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
  }
  #cs-navigation .cs-logo {
    width: auto;
    height: 2.5rem;
    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;
    order: 1;
    z-index: 10;
  }
  #cs-navigation .cs-logo img {
    width: auto;
    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-nav {
    order: 2;
  }
  #cs-navigation .cs-toggle {
    width: 2.875rem;
    height: 2.875rem;
    margin: 0 0 0 auto;
    background-color: var(--primary);
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform .6s;
  }
  #cs-navigation .cs-toggle.cs-active {
    transform: rotate(180deg);
  }
  #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: 0.75rem;
    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 .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: 3rem;
    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.cs-active {
    color: var(--primary);
  }
  #cs-navigation .cs-li-link:hover {
    color: var(--primary);
  }
  #cs-navigation .cs-button-solid {
    display: none;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cs-navigation .cs-top-link:nth-of-type(2) {
    display: flex;
  }
}

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

/* Mobile - 1023px */
@media only screen and (max-width: 1023px) {
  #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 .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 .3s, margin .3s, height .3s, opacity .3s, visibility .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.75rem;
    height: auto;
    margin-left: 0.25rem;
    display: inline-block;
  }
  #cs-navigation .cs-drop-ul {
    min-width: 12.5rem;
    margin: 0;
    padding: 0;
    background-color: #fff;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 10px 16px;
    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 .3s, visibility .3s, opacity .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 .6s, transform .6s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(1) {
    transition-delay: .05s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(2) {
    transition-delay: .1s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(3) {
    transition-delay: .15s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(4) {
    transition-delay: .2s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(5) {
    transition-delay: .25s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(6) {
    transition-delay: .3s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(7) {
    transition-delay: .35s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(8) {
    transition-delay: .4s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(9) {
    transition-delay: .45s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(10) {
    transition-delay: .5s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(11) {
    transition-delay: .55s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(12) {
    transition-delay: .6s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(13) {
    transition-delay: .65s;
  }
  #cs-navigation .cs-li-link.cs-drop-link {
    font-size: 1rem;
    white-space: nowrap;
    line-height: 1.5em;
    text-decoration: none;
    width: 100%;
    padding: 0.75rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    color: var(--bodyTextColor);
    display: block;
    transition: color 0.3s, background-color 0.3s;
  }
  #cs-navigation .cs-li-link.cs-drop-link:hover {
    color: var(--primary);
    background-color: #f7f7f7;
  }
  #cs-navigation .cs-li-link.cs-drop-link:before {
    display: none;
  }
}

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

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  body.scroll #cs-navigation {
    /* 53px, the ssme height as the cs-top-container */
    transform: translateY(-3.3125rem);
  }
  #cs-navigation {
    width: 100%;
    padding: 0;
    /* 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;
    transition: transform .3s;
  }
  #cs-navigation .cs-top-bar {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #cs-navigation .cs-top-container {
    width: 100%;
    max-width: 80rem;
    padding: 1rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3.125rem;
    position: relative;
    z-index: 1;
  }
  #cs-navigation .cs-top-container:before {
    /* grey background */
    content: '';
    width: 100vw;
    height: 100%;
    background: #f7f7f7;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 50%;
    z-index: -1;
    transform: translateX(-50%);
  }
  #cs-navigation .cs-top-contact {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1.5rem;
  }
  #cs-navigation .cs-top-link {
    font-size: 0.875rem;
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    position: relative;
  }
  #cs-navigation .cs-top-link:hover {
    text-decoration: underline;
  }
  #cs-navigation .cs-link-icon {
    width: 1rem;
    height: auto;
    display: block;
  }
  #cs-navigation .cs-top-social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
  }
  #cs-navigation .cs-social-link {
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform .3s;
  }
  #cs-navigation .cs-social-link:hover {
    transform: scale(1.1);
  }
  #cs-navigation .cs-social-icon {
    width: 1.25rem;
    height: auto;
    display: block;
  }
  #cs-navigation .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    padding: 0 1rem;
    /* prevents padding from affectin gheight */
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
    position: relative;
  }
  #cs-navigation .cs-toggle {
    display: none;
  }
  #cs-navigation .cs-logo {
    /* 40px - 44px */
    height: clamp(2.5rem, 4vw, 2.75rem);
    /* 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: auto;
    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;
    gap: 3rem;
  }
  #cs-navigation .cs-li {
    list-style: none;
    padding: 1.9375rem 0;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #cs-navigation .cs-li-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.3vw, 1rem);
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: block;
    position: relative;
    transition: color .3s;
  }
  #cs-navigation .cs-li-link:hover {
    color: var(--primary);
  }
  #cs-navigation .cs-li-link.cs-active {
    font-weight: 700;
    color: var(--headerColor);
  }
  #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;
    padding: 0 2rem;
    background-color: var(--primary);
    overflow: hidden;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    transition: color .3s;
  }
  #cs-navigation .cs-button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: #1a1a1a;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width .3s;
  }
  #cs-navigation .cs-button-solid:hover:before {
    width: 100%;
  }
  #cs-navigation .cs-nav-button {
    line-height: 2.875rem;
    margin-left: 1.5rem;
  }
}
                                
                                  


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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    @keyframes floatAnimation {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-2rem);
        }
        100% {
            transform: translateY(0);
        }
    }
    @keyframes floatAnimation2 {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-3rem);
        }
        100% {
            transform: translateY(0);
        }
    }
    #hero-1349 {
        /* 250px - 500px - leaving extra space for the navigation */
        padding: clamp(15.625rem, 35.95vw, 25rem) 1rem 0;
        /* 200px - 250px */
        padding-bottom: clamp(12.5rem, 16.5vw, 15.625rem);
        box-sizing: border-box;
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    #hero-1349:before {
        /* Overlay */
        content: "";
        width: 100%;
        height: 30%;
        background: -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(#000000),
            to(rgba(0, 0, 0, 0))
        );
        background: -o-linear-gradient(top, #000000 0%, rgba(0, 0, 0, 0) 100%);
        background: linear-gradient(
            to bottom,
            #000000 0%,
            rgba(0, 0, 0, 0) 100%
        );
        opacity: 1;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: 2;
        /* prevents the cursor from interacting with it */
        pointer-events: none;
    }
    #hero-1349 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
    #hero-1349 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: center;
        width: 100%;
        max-width: 39.375rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: center;
    }
    #hero-1349 .cs-topper {
        font-size: 1.25rem;
        line-height: 1.2em;
        text-transform: uppercase;
        text-align: inherit;
        letter-spacing: 0.1em;
        font-weight: 700;
        color: #e8e8e8;
        margin-bottom: 0.5rem;
        display: block;
    }
    #hero-1349 .cs-title {
        /* 39px - 61px */
        font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
        font-weight: 700;
        line-height: 1.2em;
        text-align: inherit;
        max-width: 20ch;
        margin: 0 0 1rem 0;
        color: #fff;
        position: relative;
    }
    #hero-1349 .cs-text {
        font-size: 1.25rem;
        line-height: 1.5em;
        text-align: inherit;
        width: 100%;
        /* 464px - 622px */
        max-width: clamp(29rem, 60vw, 38.785rem);
        margin: 0 0 2.5rem 0;
        color: #e8e8e8;
    }
    #hero-1349 .cs-button-solid {
        font-size: 1rem;
        line-height: 3.5rem;
        text-decoration: none;
        font-weight: 700;
        overflow: hidden;
        margin: 0;
        color: #fff;
        padding: 0 3rem;
        border-radius: 1.875rem;
        background-color: var(--primary);
        display: inline-block;
        position: relative;
        z-index: 1;
        transition: color 0.3s;
    }
    #hero-1349 .cs-button-solid:before {
        content: "";
        position: absolute;
        display: block;
        height: 100%;
        width: 0%;
        background: #fff;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width 0.3s;
    }
    #hero-1349 .cs-button-solid:hover {
        color: var(--primary);
    }
    #hero-1349 .cs-button-solid:hover:before {
        width: 100%;
    }
    #hero-1349 .cs-bubbles {
        /* this scales the children inside of it down. They're all in ems so they pull from the parent font size for their value of em, in this case, the value of em is tied to the viewwidth size and stops growing when the font size is equal to 1em, which it pulls from the nearst parent with a declred font size (which is the html tag, and that tag is 16px by default) */
        font-size: min(2vw, 0.5em);
        position: absolute;
        z-index: -1;
    }
    #hero-1349 .cs-bubbles1 {
        width: 42.5em;
        height: 45.25em;
        right: -11.875rem;
        /* changes to 172 at large desktop */
        top: 0;
    }
    #hero-1349 .cs-bubbles1:before {
        /* white border bubble */
        content: "";
        width: 38.875em;
        height: 38.875em;
        background: transparent;
        border: 1px solid #fff;
        border-radius: 50%;
        opacity: 1;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        animation-name: floatAnimation;
        animation-duration: 7s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
    }
    #hero-1349 .cs-bubbles1:after {
        /* orange bubble */
        content: "";
        width: 34.125em;
        height: 34.125em;
        background: var(--primary);
        opacity: 0.8;
        border-radius: 50%;
        display: block;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: -1;
        animation-name: floatAnimation2;
        animation-duration: 10s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
    }
    #hero-1349 .cs-bubbles2 {
        width: 20.625rem;
        height: 29.75rem;
        /* changes to 160px at larger desktop */
        left: -13.75rem;
        /* removed at larger desktop */
        bottom: -16.25rem;
    }
    #hero-1349 .cs-bubbles2:before {
        /* white border bubble */
        content: "";
        width: 20.625rem;
        height: 20.625rem;
        background: transparent;
        border: 1px solid #fff;
        border-radius: 50%;
        opacity: 1;
        position: absolute;
        display: block;
        bottom: 0;
        right: 0;
        animation-name: floatAnimation;
        animation-duration: 5s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
    }
    #hero-1349 .cs-bubbles2:after {
        /* orange bubble */
        content: "";
        width: 16.25rem;
        height: 16.25rem;
        background: var(--primary);
        opacity: 0.8;
        border-radius: 50%;
        display: block;
        position: absolute;
        top: 0;
        right: 2.5rem;
        z-index: -1;
        animation-name: floatAnimation2;
        animation-duration: 14s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
    }
    #hero-1349 .cs-background {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -2;
    }
    #hero-1349 .cs-background:before {
        /* Overlay */
        content: "";
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0.4;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: 1;
        /* prevents the cursor from interacting with it */
        pointer-events: none;
    }
    #hero-1349 .cs-background img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
        /* makes the top of the image start at the top of the parent */
        object-position: top;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #hero-1349 .cs-container {
        align-items: flex-start;
    }
    #hero-1349 .cs-content {
        text-align: left;
        align-items: flex-start;
    }
    #hero-1349 .cs-bubbles {
        font-size: 1em;
    }
    #hero-1349 .cs-bubbles1 {
        /* changes to auto at large desktop */
        right: -26.75rem;
    }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
    #hero-1349 .cs-bubbles1 {
        /* 200px - 450px */
        margin-left: clamp(12.5rem, 20vw, 28.125rem);
        top: 10.75rem;
        right: auto;
        left: 50%;
    }
}
/* Large Desktop Parallax Effect - 1600px */
@media only screen and (min-width: 100rem) {
    #hero-1349 .cs-background {
        background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/on-computer.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
    #hero-1349 .cs-background img {
        display: none;
    }
}
/* Larger Desktop - 1800px */
@media only screen and (min-width: 112.5rem) {
    #hero-1349 .cs-bubbles2 {
        margin-right: 50rem;
        right: 50%;
        left: auto;
        top: 13.125rem;
        bottom: auto;
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #cs-footer-711 {
        padding: var(--sectionPadding);
        padding-bottom: 3.125rem;
    }
    #cs-footer-711 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #cs-footer-711 .cs-logo-wrapper {
        width: 100%;
    }
    #cs-footer-711 .cs-logo {
        width: 100%;
        max-width: 13.125rem;
        height: auto;
        margin-right: auto;
        display: block;
    }
    #cs-footer-711 .cs-logo img {
        width: 100%;
        height: auto;
    }
    #cs-footer-711 .cs-top {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        /* 64px - 100px */
        column-gap: clamp(4rem, 9vw, 6.25rem);
        row-gap: 2rem;
    }
    #cs-footer-711 .cs-ul {
        margin: 0;
        padding: 0;
        width: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        flex: none;
    }
    #cs-footer-711 .cs-contact-ul {
        /* we remove the :before animated underline from the contact list and replace it with an underline.  The animated line doesn't work well on this section */
        width: 100%;
        max-width: 100%;
        gap: 0.75rem;
    }
    #cs-footer-711 .cs-contact-ul .cs-link:hover {
        text-decoration: underline;
    }
    #cs-footer-711 .cs-contact-ul .cs-link:before {
        display: none;
    }
    #cs-footer-711 .cs-li {
        list-style: none;
        margin: 0;
        display: block;
    }
    #cs-footer-711 .cs-header {
        font-size: 1rem;
        line-height: 1.2em;
        font-weight: 700;
        margin: 0 0 1.5rem 0;
        color: var(--headerColor);
        display: block;
    }
    #cs-footer-711 .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: flex;
        justify-content: flex-start;
        align-items: flex-start;
        position: relative;
    }
    #cs-footer-711 .cs-link:hover:before {
        width: 100%;
    }
    #cs-footer-711 .cs-link:before {
        /* on hover underline */
        content: "";
        width: 0%;
        height: 1px;
        background: currentColor;
        opacity: 1;
        position: absolute;
        display: block;
        bottom: 0;
        left: 0;
        transition: width 0.3s;
    }
    #cs-footer-711 .cs-block {
        display: block;
    }
    #cs-footer-711 .cs-icon {
        width: 1.5rem;
        height: auto;
        margin: -0.0625rem 0.75rem 0 0;
    }
    #cs-footer-711 .cs-middle {
        width: 100%;
        /* changes at tablet */
        max-width: 28.125rem;
        /* 60px - 100px */
        margin: clamp(3.75rem, 8vw, 6.25rem) 0 0 0;
        /* 24px - 40px */
        padding-bottom: clamp(1.25rem, 5vw, 2.5rem);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    #cs-footer-711 .cs-nav {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        column-gap: 2.5rem;
        row-gap: 0.5rem;
    }
    #cs-footer-711 .cs-nav-li {
        list-style: none;
    }
    #cs-footer-711 .cs-nav-link {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        text-decoration: none;
        margin: 0;
        color: var(--bodyTextColor);
        position: relative;
    }
    #cs-footer-711 .cs-nav-link:hover:before {
        width: 100%;
    }
    #cs-footer-711 .cs-nav-link:before {
        /* on hover underline */
        content: "";
        width: 0%;
        height: 1px;
        background: currentColor;
        opacity: 1;
        position: absolute;
        display: block;
        bottom: 0;
        left: 0;
        transition: width 0.3s;
    }
    #cs-footer-711 .cs-social {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
    }
    #cs-footer-711 .cs-social-li {
        list-style: none;
    }
    #cs-footer-711 .cs-social-link {
        width: 2rem;
        height: 2rem;
        background-color: transparent;
        border: 1px solid var(--bodyTextColor);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background-color 0.3s;
    }
    #cs-footer-711 .cs-social-link:hover {
        background-color: var(--bodyTextColor);
    }
    #cs-footer-711 .cs-social-link:hover .cs-social-icon {
        filter: grayscale(1) brightness(2000%);
    }
    #cs-footer-711 .cs-social-icon {
        width: 0.75rem;
        height: auto;
        display: block;
    }
    #cs-footer-711 .cs-hover {
        display: none;
    }
    #cs-footer-711 .cs-bottom {
        width: 100%;
        margin: 0;
        /* 24px - 40px, matches the cs-middle padding bottom */
        padding: clamp(1.25rem, 5vw, 2.5rem) 0 0 0;
        border-top: 1px solid rgba(186, 186, 186, 0.2);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #cs-footer-711 .cs-copyright {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        text-align: center;
        width: 70%;
        margin: 0;
        color: var(--bodyTextColor);
        display: block;
    }
    #cs-footer-711 .cs-copyright-link {
        font-size: inherit;
        line-height: inherit;
        text-decoration: none;
        margin: 0;
        color: inherit;
        display: inline-block;
    }
    #cs-footer-711 .cs-copyright-link:hover {
        text-decoration: underline;
    }
}
/* inbetween - 600px */
@media only screen and (min-width: 37.5rem) {
    #cs-footer-711 .cs-top {
        justify-content: flex-end;
    }
    #cs-footer-711 .cs-ul {
        width: auto;
    }
    #cs-footer-711 .cs-contact-ul {
        width: 15rem;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #cs-footer-711 .cs-top {
        flex-wrap: nowrap;
    }
    #cs-footer-711 .cs-logo-wrapper {
        width: auto;
        margin-right: auto;
    }
    #cs-footer-711 .cs-middle {
        max-width: 100%;
    }
}
/* Small Desktop 1024px */
@media only screen and (min-width: 64rem) {
    #cs-footer-711 .cs-middle {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}
                                

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #services-1645 {
      padding: var(--sectionPadding);
    }
    #services-1645 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(2.5rem, 3.9vw, 4rem);
    }
    #services-1645 .cs-content {
      width: 100%;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: center;
      /* set text align to left if content needs to be left aligned */
      text-align: center;
    }
    #services-1645 .cs-title {
      color: var(--headerColor);
    }
    #services-1645 .cs-text {
      margin-bottom: 1rem;
      color: var(--bodyTextColor);
      opacity: 0.8;
    }
    #services-1645 .cs-text:last-of-type {
      margin-bottom: 2rem;
    }
    #services-1645 .cs-button-solid {
      font-size: 1rem;
      text-align: center;
      /* 46px - 56px */
      line-height: clamp(2.875rem, 5.5vw, 3.5rem);
      font-weight: 700;
      text-decoration: none;
      min-width: 9.1875rem;
      margin: 0;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
      padding: 0 1.5rem;
      color: var(--bodyTextColorWhite);
      background-color: var(--primary);
      display: inline-block;
      position: relative;
      z-index: 1;
      transition: color 0.3s;
    }
    #services-1645 .cs-button-solid:hover {
      color: #fff;
    }
    #services-1645 .cs-button-solid:hover:before {
      width: 100%;
    }
    #services-1645 .cs-button-solid:before {
      content: "";
      width: 0%;
      height: 100%;
      background: #000;
      opacity: 1;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s;
    }
    #services-1645 .cs-card-group {
      width: 100%;
      max-width: 50.1875rem;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      justify-content: center;
      /* prevents flexbox from squishing it */
      flex: none;
      /* 16px - 20px */
      gap: clamp(1rem, 2.5vw, 1.25rem);
    }
    #services-1645 .cs-item {
      list-style: none;
      /* .cs-h3 and .cs-item-text both use text-align: inherit, so change the below to affect the whole item */
      text-align: left;
      width: 100%;
      margin: 0;
      box-sizing: border-box;
      /* 20px - 48px */
      padding: clamp(1.5rem, 3.2vw, 2rem);
      background-color: #fff;
      border: 1px solid #E8E8E8;
      display: flex;
      flex-direction: column;
      transition: border-color 0.3s;
      /* 16px - 24px */
      gap: clamp(1rem, 1.5vw, 1.5rem);
      grid-column: span 12;
    }
    #services-1645 .cs-item:hover {
      border-color: var(--primary);
    }
    #services-1645 .cs-icon {
      width: 3rem;
      height: auto;
      margin: 0;
      display: block;
      /* prevents flexbox from squishing it */
      flex: none;
    }
    #services-1645 .cs-h3 {
      font-size: 1.25rem;
      text-align: inherit;
      line-height: 1.2em;
      margin: 0;
      margin-bottom: 1rem;
      color: var(--headerColor);
      transition: color 0.3s;
    }
    #services-1645 .cs-item-text {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      text-align: inherit;
      line-height: 1.5em;
      margin: 0;
      color: var(--bodyTextColor);
      opacity: 0.8;
    }
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #services-1645 .cs-item {
      flex-direction: row;
      grid-column: span 6;
    }
  }
  /* Large Desktop - 1024px */
  @media only screen and (min-width: 80rem) {
    #services-1645 .cs-container {
      flex-direction: row;
    }
    #services-1645 .cs-content {
      align-items: flex-start;
      text-align: left;
    }
  }
                                  

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #why-choose-1635 {
    padding: var(--sectionPadding);
  }
  #why-choose-1635 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 100px */
    gap: clamp(3rem, 10vw, 6.25rem);
  }
  #why-choose-1635 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #why-choose-1635 .cs-flex {
    max-width: 38.5rem;
  }
  #why-choose-1635 .cs-title {
    max-width: 20ch;
  }
  #why-choose-1635 .cs-text {
    margin-bottom: 1rem;
  }
  #why-choose-1635 .cs-text:last-of-type {
    margin-bottom: 0;
  }
  #why-choose-1635 .cs-wrapper {
    width: 100%;
  }
  #why-choose-1635 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    row-gap: 1.75rem;
    /* 16px - 20px */
    column-gap: clamp(1rem, 2.3vw, 1.25rem);
  }
  #why-choose-1635 .cs-item {
    text-align: left;
    list-style: none;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    grid-column: span 12;
    flex-direction: column;
    align-items: flex-start;
    /* 16px - 24px */
    gap: clamp(1rem, 3vw, 1.5rem);
  }
  #why-choose-1635 .cs-icon-wrapper {
    /* 60px - 80px */
    width: clamp(3.75rem, 7vw, 5rem);
    height: clamp(3.75rem, 7vw, 5rem);
    margin: 0;
    box-sizing: border-box;
    border: 1px solid var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #why-choose-1635 .cs-icon {
    width: 2rem;
    height: auto;
    display: block;
  }
  #why-choose-1635 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.5em;
    margin: 0;
    margin-bottom: 0.5rem;
    color: var(--headerColor);
    text-align: inherit;
  }
  #why-choose-1635 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    text-align: inherit;
  }
  #why-choose-1635 .cs-wrapper {
    /* makes the contents of this container act as though the container doesn't exist. They are now children of the cs-container so they can be positioned around each other. This allows us to sue the order property to place the cs-image-group at the top of the page on mobile */
    display: contents;
  }
  #why-choose-1635 .cs-image-group {
    font-size: min(2.7vw, 1em);
    width: 33.875em;
    height: 30.875em;
    /* sends it to teh top in the 1st position */
    order: -1;
    position: relative;
    z-index: 1;
  }
  #why-choose-1635 .cs-picture-wrapper {
    width: 80.073801%;
    height: 83.805668%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: stretch;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
  }
  #why-choose-1635 .cs-box {
    width: 60%;
    margin-top: -2.375em;
    margin-left: 1.5em;
    padding: 1em;
    background-color: #f7f7f7;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    position: relative;
    z-index: 10;
  }
  #why-choose-1635 .cs-header {
    font-size: 1em;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: block;
  }
  #why-choose-1635 .cs-desc {
    font-size: 0.875em;
    line-height: 1.5em;
    margin: 0;
    color: var(--primary);
    display: block;
  }
  #why-choose-1635 .cs-picture {
    position: relative;
    z-index: 1;
  }
  #why-choose-1635 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #why-choose-1635 .cs-picture1 {
    width: 100%;
    height: 100%;
  }
  #why-choose-1635 .cs-picture2 {
    width: 36.346863%;
    height: 39.878543%;
    position: absolute;
    bottom: 0;
    right: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #why-choose-1635 .cs-container {
    max-width: 80rem;
  }
  #why-choose-1635 .cs-content {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  #why-choose-1635 .cs-flex {
    text-align: left;
    width: 40vw;
    max-width: 40rem;
    flex: none;
  }
  #why-choose-1635 .cs-title {
    margin: 0;
  }
  #why-choose-1635 .cs-h3,
  #why-choose-1635 .cs-item-text {
    text-align: left;
  }
  #why-choose-1635 .cs-item {
    grid-column: span 4;
  }
  #why-choose-1635 .cs-image-group {
    width: 100%;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #why-choose-1635 {
    /* set the darker background color on the main div */
    background-color: #F8F5F1;
    overflow: hidden;
  }
  #why-choose-1635 .cs-content {
    align-items: flex-start;
  }
  #why-choose-1635 .cs-flex {
    width: 50%;
  }
  #why-choose-1635 .cs-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: 2.5rem;
    position: relative;
    z-index: 1;
  }
  #why-choose-1635 .cs-wrapper:before {
    /* make the white space dependant on the height of the cs-wrapper as a pseudo element attached to the cs wrapper. This makes the white background responsive to the amount of items you have in your list. When the list grows or shrinks, the design will maintain its same spacing */
    content: '';
    width: 100vw;
    height: 100vw;
    background: #fff;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 50%;
    z-index: -1;
    transform: translateX(-50%);
  }
  #why-choose-1635 .cs-card-group {
    max-width: 39.375rem;
    /* use padding to push add the same amount of space between the content and the top of the card group as the negative margin top value on the cs-image-group. This makes sure that it counter acts the effects of the negative margin affecting the card group as well */
    padding-top: 3rem;
    align-self: flex-start;
  }
  #why-choose-1635 .cs-image-group {
    width: 33.875em;
    /* by setting height to auto, it will stretch to fill the container height. So when you add or subtract more cards and change the height of the container, the image group will shrink as well. Thats why we set the heights of the images in percentages. They will always be X% tall inside the cs-image-group. So when the image group stretches to match the container height, the pictures percentage height also grows proportionally. This ensures the design responds to changes in height from the card section on the left. */
    height: auto;
    min-height: 30.875em;
    /* makes it overlap the .cs-wrapper div */
    margin-top: -3rem;
    flex: none;
  }
  #why-choose-1635 .cs-item {
    grid-column: span 12;
    flex-direction: row;
  }
}