: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: #1F861D;
    --primaryLightGreen: #44D543;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Roboto", sans-serif;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--primary);
    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 - 360px */
@media only screen and (min-width: 0rem) {
/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/
#hero-446 {
    /* Centers tag */
    text-align: center;
    /* 144px - 300px - leaving extra space for the navigation */
    padding: clamp(14rem, 25.95vw, 23.75rem) 1rem clamp(5rem, 15.95vw, 15.75rem);
    /* padding-bottom: 0; */
    position: relative;
    z-index: 1;
}
#hero-446 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
}
#hero-446 .cs-background:before {
    /* Overlay */
    content: "";
    width: 100%;
    height: 100%;
    /* background: #1a1a1a; */
    mix-blend-mode: multiply;
    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-446 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}
#hero-446 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    /* 80px - 120px */
    gap: clamp(5rem, 10vw, 7.5rem);
}
#hero-446 .cs-content {
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#hero-446 .cs-tag {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    /* 30px - 44px */
    line-height: clamp(1.875rem, 4vw, 2.75rem);
    text-align: center;
    text-transform: uppercase;
    /* 12px - 20px */
    padding: 0 clamp(0.75rem, 1.6vw, 1.25rem);
    /* 12px - 20px */
    margin-bottom: clamp(0.75rem, 2vw, 1.25rem);
    color: var(--bodyTextColorWhite);
    border: 1px solid var(--bodyTextColorWhite);
    background: rgba(250, 251, 252, 0.2);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 1.875rem;
    /* prevents border from affecting height and width */
    box-sizing: border-box;
    display: inline-block;
}
#hero-446 .cs-title {
    /* 31px - 61px */
    font-size: clamp(1.9375rem, 6.4vw, 3.8125rem);
    font-weight: 700;
    line-height: 1.2em;
    text-align: center;
    max-width: 51.8125rem;
    /* 16px - 24px */
    margin: 0 auto clamp(1rem, 4vw, 1.5rem) 0;
    color: var(--bodyTextColorWhite);
    position: relative;
}
#hero-446 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.95vw, 1.25rem);
    line-height: 1.5em;
    text-align: center;
    width: 100%;
    /* 464px - 622px */
    max-width: clamp(29rem, 60vw, 38.785rem);
    margin: 0;
    color: var(--bodyTextColorWhite);
}
#hero-446 .cs-card-group {
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: #fff;
    filter: drop-shadow(0px 24px 54px rgba(87, 107, 147, 0.12));
    /* 12px - 24px */
    border-radius: clamp(0.75rem, 2vw, 1.5rem) clamp(0.75rem, 2vw, 1.5rem) 0
        0;
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
}
#hero-446 .cs-item {
    list-style: none;
    width: 50%;
    margin: 0;
    /* 16px - 48px top and bottom */
    /* 12px - 110px top and bottom */
    padding: clamp(1rem, 3.7vw, 3rem) clamp(0.75rem, 3vw, 6.875rem);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    border-right: 1px solid #dcdcdd;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
#hero-446 .cs-item:nth-of-type(2) {
    border: none;
}
#hero-446 .cs-item:last-of-type {
    width: 100%;
    border-top: 1px solid #dcdcdd;
    border-right: none;
}
#hero-446 .cs-number {
    /* 31px - 61px */
    font-size: clamp(1.9375rem, 4vw, 3.8125rem);
    line-height: 1.2em;
    font-weight: 700;
    text-align: center;
    color: var(--primary);
    margin: 0 0 0.25rem 0;
    display: block;
}
#hero-446 .cs-desc {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.2em;
    font-weight: 400;
    text-align: center;
    max-width: 12.5rem;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
}

/*-- -------------------------- -->
<---  WWD Side By Side Reverse  -->
<--- -------------------------- -*/
#sbsr-87 {
        padding: var(--sectionPadding);
        /* clips the black background from overflowing the section */
        overflow: hidden;
    }
    #sbsr-87 .cs-container {
        width: 100%;
        /* changes to 1280px at tablet */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #sbsr-87 .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;
    }

    #sbsr-87 .cs-topper {
        color: var(--primary);
    }
    #sbsr-87 .cs-title {
        max-width: 20ch;
        color: var(--bodyTextColorWhite);
    }
    #sbsr-87 .cs-text {
        margin-bottom: 1rem;
        color: var(--bodyTextColorWhite);
        opacity: 0.8;
    }
    #sbsr-87 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #sbsr-87 .cs-card-group {
        width: 100%;
        max-width: 25rem;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        column-gap: 0.75rem;
    }
    #sbsr-87 .cs-item {
        list-style: none;
        width: 32%;
        max-width: 9.375rem;
        /* making flex so we can align a heading with 1 line to the bottom */
        display: flex;
        flex-direction: column;
        align-self: stretch;
        align-content: space-between;
    }
    #sbsr-87 .cs-number {
        /* 39px - 49px */
        font-size: clamp(2.4375rem, 5vw, 3.0625rem);
        line-height: 1.2em;
        font-weight: 700;
        text-align: left;
        color: var(--primary);
        display: block;
        /* 8px - 16px */
        margin: 0 0 clamp(0.5rem, 1vw, 1rem);
    }
    #sbsr-87 .cs-h3 {
        /* 16px - 20px */
        font-size: clamp(1rem, 2vw, 1.25rem);
        line-height: 1.2em;
        text-align: left;
        /* auto margin top will push text to bottom if there's only one line */
        margin: auto 0 0;
        color: var(--bodyTextColorWhite);
    }
    #sbsr-87 .cs-image-group {
        width: 100%;
        max-width: 33.875rem;
        /* pushes down by the same amount the images overlap the image group */
        margin: 0 0 2.5rem;
        display: flex;
        /* separate children to opposite sides of the room */
        justify-content: center;
        align-content: space-between;
        flex-wrap: wrap;
        gap: clamp(0.5rem, 2vw, 1.25rem);
        position: relative;
    }
    #sbsr-87 .cs-image-group:before {
        /* Black background */
        content: "";
        width: 100vw;
        height: 200vw;
        background: #202036;
        opacity: 1;
        position: absolute;
        display: block;
        top: 80%;
        left: 50%;
        z-index: -1;
        transform: translateX(-50%);
    }
    #sbsr-87 .cs-picture {
        width: 48%;
        /* 218px - 264px */
        min-height: clamp(13.625rem, 25vw, 16.5rem);
        aspect-ratio: 0.73394495;
        position: relative;
        display: block;
    }
    #sbsr-87 .cs-picture:nth-of-type(2) {
        /* move slightly down */
        transform: translateY(2.5rem);
    }
    #sbsr-87 .cs-picture:nth-of-type(4) {
        /* move slightly up */
        transform: translateY(2.5rem);
    }
    #sbsr-87 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* Makes image act as a background image to the picture element */
        object-fit: cover;
    }

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

#services-447 {
    padding: var(--sectionPadding);
}
#services-447 .cs-container {
    width: 100%;
    /* changes to 1440px at tablet */
    max-width: 34.375em;
    margin: auto;
}
#services-447 .cs-container {
    width: 100%;
    /* changes to 1440px at tablet */
    max-width: 34.375em;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
}
#services-447 .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-447 .cs-card-group {
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}
#services-447 .cs-item {
    list-style: none;
    width: 100%;
    /* changes at desktop */
    padding-top: 9rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#services-447 .cs-item:hover .cs-picture img {
    transform: scale(1.2);
    opacity: 0.4;
}
#services-447 .cs-item:hover .cs-box:before {
    opacity: 1;
}
#services-447 .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-447 .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 0.9s,
        opacity 0.5s;
}
#services-447 .cs-box {
    text-align: center;
    width: 88%;
    padding: 0 1.5rem 1.5rem 1.5rem;
    /* prevents padding and border 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-447 .cs-box: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 0.5s;
}
#services-447 .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-box 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) * -0.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-447 .cs-icon {
    /* 48px - 64px */
    width: clamp(3rem, 4.3vw, 4rem);
    height: auto;
    display: block;
}
#services-447 .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-447 .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-447 .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-447 .cs-link:hover:before {
    width: 100%;
}
#services-447 .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 0.3s;
}


/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/
#cta-461 {
    /* padding-top changes at 768px */
    padding: var(--sectionPadding);
    position: relative;
    /* clips the background shape */
    overflow: hidden;
    z-index: 1;
  }
  #cta-461 .cs-container {
    width: 100%;
    /* changes to 1280px at 768px */
    max-width: 31.25rem;
    margin: auto;
  }
  #cta-461 .cs-swoosh {
    display: none;
  }
  #cta-461 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 31.25rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #cta-461 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 36.3125rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #cta-461 .cs-title,
  #cta-461 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  #cta-461 .cs-text {
    opacity: .8;
  }
  #cta-461 .cs-decoration {
    display: none;
  }
  #cta-461 .cs-cta {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1.25rem);
    text-decoration: none;
    /* 16px - 20px */
    text-align: center;
    /* 141px - 224px */
    width: clamp(8.8125rem, 17vw, 14rem);
    height: clamp(8.8125rem, 17vw, 14rem);
    margin: 0 2.25rem 1rem auto;
    background-color: var(--primary);
    color: var(--bodyTextColorWhite);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    align-self: flex-end;
    position: relative;
    transition: background-color 0.3s;
  }
  #cta-461 .cs-cta:hover {
    background-color: #14142b;
  }
  #cta-461 .cs-cta:hover .cs-arrow {
    transform: translateX(3.75rem);
    opacity: 0;
  }
  #cta-461 .cs-cta:hover .cs-cta-text {
    transform: translateY(-0.9375rem);
  }
  #cta-461 .cs-cta:before {
    /* backgorund shape on mobile, removed at 768px. We attach it to the cta button so its position is relative to the position of the button and they move together when the button moves as the screen gets bigger */
    content: "";
    width: 93.75rem;
    height: 62.5rem;
    background: #14142b;
    border-radius: 0 0 6.25rem 0;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: -4.75rem;
    right: 2rem;
    transform: rotate(30deg);
    transform-origin: bottom right;
    z-index: -1;
  }
  #cta-461 .cs-arrow {
    width: 2.5rem;
    height: auto;
    transition: transform 0.3s,
                opacity 0.3s;
  }
  #cta-461 .cs-cta-text {
    transition: transform 0.3s;
  }

/*-- -------------------------- -->
<---    Home Why Choose Us      -->
<--- -------------------------- -*/
#why-choose-1630 {
    padding: var(--sectionPadding);
}
#why-choose-1630 .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, 7vw, 4rem);
}
#why-choose-1630 .cs-flex {
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 7vw, 4rem);
}
#why-choose-1630 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 38rem;
    /* prevents padding from affecting width and height */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
}
#why-choose-1630 .cs-text {
    margin-bottom: 1rem;
}
#why-choose-1630 .cs-text:last-of-type {
margin-bottom: 0rem;
}
#why-choose-1630 .cs-picture {
    display: block;
    position: relative;
    width: 100%;
    max-width: 39.375rem;
    /* chnages to auto at tablet */
    height: 50vw;
    /* removed at tablet */
    max-height: 25rem;
    /* clips img tag corners */
    overflow: hidden;
    /* sends it to the 2nd posiiton in the bottom */
    order: 2;
}
#why-choose-1630 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}
#why-choose-1630 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: stretch;
    /* 16px - 20px */
    column-gap: clamp(1rem, 2.5vw, 2rem);
    row-gap: 1.75rem;
}
#why-choose-1630 .cs-item {
    list-style: none;
    display: flex;
    grid-column: span 12;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}
#why-choose-1630 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 3vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    transition: color 0.3s;
}
#why-choose-1630 .cs-wrapper {
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
}
#why-choose-1630 .cs-h3-icon {
    width: 1.5rem;
    height: auto;
    margin-top: 2px;
    display: block;
}
#why-choose-1630 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    transition: color 0.3s,
                opacity 0.3s;
}


/*-- -------------------------- -->
<---       Home Gallery         -->
<--- -------------------------- -*/
#gallery-434 {
    padding: var(--sectionPadding);
}
#gallery-434 .cs-container {
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
}
#gallery-434 .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-434 .cs-grid {
    display: grid;
    /* 12 so we can have rows of 3 and rows with 2 50/50 images */
    grid-template-columns: repeat(12, 1fr);
    /* 12px - 30px */
    grid-gap: clamp(0.75rem, 1.5vw, 1.875rem);
    grid-template-rows: repeat(6, 0.34fr);
}
#gallery-434 .cs-picture {
    border-radius: 0.5rem;
    /* clips corners of img tags */
    overflow: hidden;
    position: relative;
    display: block;
}
#gallery-434 .cs-picture img {
    width: 100%;
    height: 100%;
    /* makes image behave like a background image */
    object-fit: cover;
}
#gallery-434 .cs-picture1 {
    display: none;
}
#gallery-434 .cs-picture2 {
    grid-column: 1 / 9;
    grid-row: 1 / 3;
}
#gallery-434 .cs-picture3 {
    grid-column: 9 / 13;
    grid-row: 1 / 1;
}
#gallery-434 .cs-picture4 {
    grid-column: 1 / 7;
    grid-row: 4 / 5;
}
#gallery-434 .cs-picture5 {
    grid-column: 7 / 13;
    grid-row: 4 / 6;
}
#gallery-434 .cs-picture6 {
    display: none;
}
#gallery-434 .cs-picture7 {
    grid-column: 1 / 5;
    grid-row: 3 / 4;
}
#gallery-434 .cs-picture8 {
    grid-column: 5 / 9;
    grid-row: 3 / 4;
}
#gallery-434 .cs-picture9 {
    grid-column: 9 / 13;
    grid-row: 2 / 4;
}
#gallery-434 .cs-picture10 {
    grid-column: 1 / 7;
    grid-row: 5 / 7;
}
#gallery-434 .cs-picture11 {
    grid-column: 7 / 13;
    grid-row: 6 / 7;
}


/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/
#faq-443 {
    background: #14142b;
}
#faq-443 .cs-container {
    width: 100%;
    /* changes to 1312px at tablet (1280px + 32px padding) */
    max-width: 34.375em;
    margin: auto;
    padding: var(--sectionPadding);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 40px - 48px */
    gap: clamp(2.5rem, 5vw, 3rem);
}
#faq-443 .cs-picture {
    display: none;
}
#faq-443 .cs-content {
    text-align: left;
    max-width: 52.5rem;
}

#faq-443 .cs-title {
    /* 40px - 60px */
    margin: 0 0 clamp(2.5rem, 1vw, 3.75rem) 0;
    color: var(--bodyTextColorWhite);
}
#faq-443 .cs-faq-group {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
}
#faq-443 .cs-faq-item {
    list-style: none;
    width: 100%;
    border-radius: 0.5rem;
    background-color: rgba(250, 251, 252, 0.1);
    border-bottom: 0px solid var(--primary);
    transition: border 0.1s;
}
#faq-443 .cs-faq-item.active {
    border-bottom: 4px solid var(--primary);
}
#faq-443 .cs-faq-item.active .cs-button:before {
    transform: translateY(-50%) rotate(180deg);
    opacity: 0;
}
#faq-443 .cs-faq-item.active .cs-button:after {
    transform: translateY(-50%) rotate(360deg);
}
#faq-443 .cs-faq-item.active .cs-item-p {
    height: auto;
    /* 20px - 24px bottom */
    /* 16px - 24px left & right */
    padding: 0 clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 1.3vw, 1.5rem);
    opacity: 1;
}
#faq-443 .cs-button {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.2em;
    text-align: left;
    font-weight: bold;
    /* 12px - 24px top & bottom */
    /* 16px - 24px top & bottom */
    padding: clamp(0.75rem, 1.9vw, 1.5rem) clamp(1rem, 1.9vw, 1.5rem);
    border: none;
    background: transparent;
    color: var(--bodyTextColorWhite);
    display: block;
    width: 100%;
    position: relative;
    transition:
        background-color 0.3s,
        color 0.3s;
}
#faq-443 .cs-button:hover {
    cursor: pointer;
}
#faq-443 .cs-button:before {
    /* horizontal line */
    content: "";
    width: 0.75rem;
    height: 0.1875rem;
    background-color: #fff;
    opacity: 1;
    border-radius: 3px;
    position: absolute;
    display: block;
    top: 50%;
    right: 1.5rem;
    transform: translateY(-50%);
    transition:
        transform 0.5s,
        opacity 0.3s;
}
#faq-443 .cs-button:after {
    /* vertical line */
    content: "";
    width: 0.75rem;
    height: 0.1875rem;
    background-color: #fff;
    opacity: 1;
    border-radius: 3px;
    position: absolute;
    display: block;
    top: 50%;
    right: 1.5rem;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: center;
    transition: transform 0.5s;
}
#faq-443 .cs-button-text {
    width: 90%;
    display: block;
}
#faq-443 .cs-item-p {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    width: 85%;
    max-width: 37.5rem;
    height: 0;
    margin: 0;
    /* 16px - 24px */
    padding: 0 clamp(1rem, 2vw, 1.5rem);
    opacity: 0;
    color: #b4b2c7;
    /* clips the text so it doesn't show up */
    overflow: hidden;
    transition:
        opacity 0.3s,
        padding-bottom 0.3s;
}
#faq-443 .cs-floating-box {
    display: none;
}

/*-- -------------------------- -->
<---          CTA Two           -->
<--- -------------------------- -*/
#cta-443 {
    /* 40px 0 100px top & bottom, moves to .cs-container at tablet */
    padding: clamp(2.5rem, 6vw, 6.25rem) 1rem;
    border-radius: 0 0 6.25rem 0;
    background-color: #333142;
}
#cta-443 .cs-container {
    /* changes to 1312px at tablet (1280px + 32px padding) */
    max-width: 34.375em;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 40px - 60px */
    gap: clamp(2.5rem, 7vw, 3.75rem);
}
#cta-443 .cs-content {
    text-align: left;
    max-width: 39.375rem;
    position: relative;
    /* place it higher on the z index to be on top of the glowing ball effects */
    z-index: 10;
}
#cta-443 .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--primaryLight);
    margin-bottom: 0.25rem;
    display: block;
}
#cta-443 .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;
}

#cta-443 .cs-title {
    color: var(--bodyTextColorWhite);
}
#cta-443 .cs-text {
    color: var(--bodyTextColorWhite);
}
#cta-443 .cs-cta {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1.25rem);
    text-decoration: none;
    text-align: center;
    /* 141px - 200px */
    width: clamp(8.8125rem, 17vw, 12.25rem);
    height: clamp(8.8125rem, 17vw, 12.25rem);
    /* 44px - 108px */
    margin-right: clamp(2.75rem, 5vw, 6.75rem);
    background-color: var(--primary);
    color: var(--bodyTextColorWhite);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    align-self: flex-end;
    position: relative;
    /* place it higher on the z index to be on top of the glowing ball effects */
    z-index: 10;
    transition: background-color 0.3s;
}
#cta-443 .cs-cta:hover {
    background-color: #14142b;
}
#cta-443 .cs-cta:hover .cs-arrow {
    transform: translateX(3.75rem);
    opacity: 0;
}
#cta-443 .cs-cta:hover .cs-cta-text {
    transform: translateY(-0.9375rem);
}
#cta-443 .cs-arrow {
    width: 2.5rem;
    height: auto;
    transition:
        transform 0.3s,
        opacity 0.3s;
}
#cta-443 .cs-cta-text {
    transition: transform 0.3s;
}

/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/
#reviews-510 {
    /* centers the button */
    text-align: center;
    padding: var(--sectionPadding);
    /* clips the orbs from causing overflow issues */
    overflow: hidden;
    position: relative;
    z-index: 1;
}
#reviews-510 .cs-container {
    width: 100%;
    /* changes to 1440px at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
}
#reviews-510 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 77.25rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
}

#reviews-510 .cs-text {
    opacity: 0.8;
}
#reviews-510 .cs-card-group {
    width: 100%;
    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-510 .cs-item {
    list-style: none;
    text-align: left;
    max-width: 44.375rem;
    /* 16px - 40px top & bottom */
    /* 16px - 60px left & right */
    padding: clamp(1rem, 3.15vw, 2.5rem) clamp(1rem, 5vw, 3.75rem);
    /* 24px - 48px */
    padding-bottom: clamp(1.5rem, 6vw, 3rem);
    background-color: #f7f7f7;
    /* 12px - 24px */
    border-radius: clamp(0.75rem, 1.5vw, 1.25rem);
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
    /* clips the pseudo box from overflowing */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    position: relative;
}
#reviews-510 .cs-item:before {
    content: "";
    width: 100%;
    height: 0.75rem;
    background: var(--primary);
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
}
#reviews-510 .cs-quote {
    width: 2.5rem;
    height: auto;
    /* 16px - 32px */
    margin-bottom: clamp(1rem, 2vw, 2rem);
    display: block;
}
#reviews-510 .cs-item-text {
    /* 14px - 25px */
    font-size: clamp(0.875rem, 1.6vw, 1.5625rem);
    line-height: 1.5em;
    margin: 0;
    /* 24px - 44px */
    margin-bottom: clamp(1.5rem, 3vw, 2.75rem);
    color: var(--bodyTextColor);
}
#reviews-510 .cs-flex-group {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* 12px - 24px */
    gap: clamp(0.75rem, 3vw, 1.5rem);
}
#reviews-510 .cs-profile {
    /* 36px - 72px */
    width: clamp(2.25rem, 7vw, 4.5rem);
    height: clamp(2.25rem, 7vw, 4.5rem);
    margin: 0;
    border-radius: 50%;
    /* clips image corners to make circle */
    overflow: hidden;
    position: relative;
    display: block;
}
#reviews-510 .cs-profile img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes the image behave like a background image */
    object-fit: cover;
}
#reviews-510 .cs-name {
    /* 16px - 31px */
    font-size: clamp(1rem, 2.5vw, 1.9375rem);
    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-510 .cs-job {
    /* 14px - 20px */
    font-size: clamp(0.875rem, 1.5vw, 1.25rem);
    line-height: 1.5em;
    font-weight: 400;
    margin: 0;
    color: #746f95;
    display: block;
}
#reviews-510 .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: auto;
    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;
}
#reviews-510 .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;
}
#reviews-510 .cs-button-solid:hover:before {
    width: 100%;
}

/*-- -------------------------- -->
<---           Footer           -->
<--- -------------------------- -*/
#cs-footer-487 {
    /* 48px - 64px */
    padding: clamp(3rem, 6vw, 4rem) 1rem;
    background-color: #14142b;
}
#cs-footer-487 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 50rem;
    margin: auto;
}
#cs-footer-487 .cs-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    column-gap: 2.25rem;
    /* 40px - 48px */
    row-gap: clamp(2.5rem, 5vw, 3rem);
}
#cs-footer-487 .cs-logo-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#cs-footer-487 .cs-logo-img {
    width: 9.875rem;
    height: auto;
    /* 24px - 32px */
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
#cs-footer-487 .cs-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-align: center;
    max-width: 20.5rem;
    margin: 0;
    color: var(--bodyTextColorWhite);
}
#cs-footer-487 .cs-ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.25rem;
}
#cs-footer-487 .cs-sitemap {
    gap: 0.75rem;
}
#cs-footer-487 .cs-li {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.75rem;
}
#cs-footer-487 .cs-link {
    text-decoration: none;
    color: var(--bodyTextColorWhite);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    transition: color 0.3s;
}
#cs-footer-487 .cs-link:hover {
    color: var(--primary);
}
#cs-footer-487 .cs-header {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 3vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    color: var(--bodyTextColorWhite);
    display: block;
}
#cs-footer-487 .cs-icon {
    width: 1.125rem;
    height: auto;
}
#cs-footer-487 .cs-arrow {
    width: 0.4375rem;
    height: auto;
    display: block;
}
#cs-footer-487 .cs-subscribe-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
}
#cs-footer-487 .cs-subscribe-p {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-align: center;
    max-width: 18.75rem;
    margin: 0;
    color: var(--bodyTextColorWhite);
}
#cs-footer-487 .cs-form {
    width: 100%;
    max-width: 20.625rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
#cs-footer-487 .cs-input {
    width: 100%;
    height: 3rem;
    margin-right: 1px;
    padding-left: 1.25rem;
    border-radius: 0;
    border: none;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
}
#cs-footer-487 #cs-submit-487 {
    /* 13px - 16px */
    font-size: clamp(0.8125rem, 1.5vw, 1rem);
    line-height: 3rem;
    font-weight: 700;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    height: 3rem;
    padding: 0 1rem;
    background-color: var(--primary);
    border: none;
    color: #ffffff;
    transition: opacity 0.3s;
}
#cs-footer-487 #cs-submit-487:hover {
    cursor: pointer;
    opacity: 0.8;
}
#cs-footer-487 .cs-bottom {
    width: 100%;
    /* 48px - 60px */
    margin-top: clamp(3rem, 6vw, 3.75rem);
    /* 48px - 60px */
    padding-top: clamp(3rem, 6vw, 3.75rem);
    border-top: 1px solid #b4b2c7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.25rem;
}
#cs-footer-487 .cs-copyright {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    color: var(--bodyTextColorWhite);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#cs-footer-487 .cs-copyright-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-decoration: none;
    color: var(--bodyTextColorWhite);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: color 0.3s;
}
#cs-footer-487 .cs-copyright-link:hover {
    color: var(--primary);
}
#cs-footer-487 .cs-social {
    display: inline-flex;
    justify-content: flex-start;
    gap: 0.75rem;
}
#cs-footer-487 .cs-social-link {
    /* 32px - 40px */
    width: clamp(2rem, 4vw, 2.5rem);
    height: clamp(2rem, 4vw, 2.5rem);
    background-color: var(--primary);
    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-487 .cs-social-link:hover {
    background-color: rgba(250, 251, 252, 0.1);
    transform: translateY(-0.1875rem);
}
#cs-footer-487 .cs-social-img {
    /* 14px - 18px */
    height: clamp(0.875rem, 5vw, 1.125rem);
    width: auto;
    display: block;
}


/*-- -------------------------- -->
<---          Banner            -->
<--- -------------------------- -*/
#banner-310 {
    /* 144px - 252px */
    padding-top: clamp(14rem, 25vw, 15.75rem);
    /* 80px - 140px */
    padding-bottom: clamp(5rem, 13vw, 8.75rem);
    position: relative;
    z-index: 1;
}
#banner-310 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#banner-310 .cs-int-title {
    /* 39px - 49px */
    font-size: clamp(2.4375rem, 4.5vw, 3.0625rem);
    font-weight: 700;
    line-height: 1.2em;
    text-align: center;
    max-width: 43.75rem;
    margin: 0 auto 0.75rem;
    color: var(--bodyTextColorWhite);
    position: relative;
}
#banner-310 .cs-breadcrumbs {
    display: flex;
    justify-content: center;
    align-items: center;
}
#banner-310 .cs-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.2em;
    text-decoration: none;
    color: var(--bodyTextColorWhite);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
#banner-310 .cs-link:last-of-type {
    /* remove the chevron on the last list item */
}
#banner-310 .cs-link:last-of-type::after {
    display: none;
}
#banner-310 .cs-link:after {
    /* chevron - added as pseudo to make adding and removing them easier */
    content: "";
    width: 0.4375rem;
    height: 0.75rem;
    margin-left: 0.75rem;
    margin-right: 0.75rem;
    background: url("https://csimg.nyc3.digitaloceanspaces.com/Banners/chevron-right.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
#banner-310 .cs-link.cs-active {
    color: var(--primaryLight);
}
#banner-310 .cs-background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    z-index: -1;
}
#banner-310 .cs-background:before {
    /* black overlay box */
    content: "";
    width: 100%;
    height: 100%;
    /* background: #000; */
    opacity: 0.72;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
}
#banner-310 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/*-- -------------------------- -->
<--- About Side By Side Reverse -->
<--- -------------------------- -*/
#sbsr-291 {
    padding: var(--sectionPadding);
}
#sbsr-291 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
}
#sbsr-291 .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;
}

#sbsr-291 .cs-text {
    margin-bottom: 1rem;
}
#sbsr-291 .cs-text:last-of-type {
    margin-bottom: 2rem;
}
#sbsr-291 .cs-ul {
    width: 100%;
    margin: 0 0 2rem 0;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}
#sbsr-291 .cs-li {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    list-style: none;
    text-align: left;
    width: 100%;
    max-width: 28.125rem;
    margin: 0;
    color: var(--bodyTextColor);
    position: relative;
}
#sbsr-291 .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;
}
#sbsr-291 .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;
}
#sbsr-291 .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;
}
#sbsr-291 .cs-button-solid:hover:before {
    width: 100%;
}
#sbsr-291 .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(1.978vw, 0.791em);
    width: 46.0625em;
    height: 45.9375em;
    position: relative;
    /* flips it horizontally */
    transform: scaleX(-1);
}
#sbsr-291 .cs-picture {
    border-radius: 1em;
    /* clips the img tag corners */
    overflow: hidden;
    position: absolute;
    display: block;
}
#sbsr-291 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    /* reverse the flip on the parent so the images appear in the same orientation as the source image */
    transform: scaleX(-1);
}
#sbsr-291 .cs-picture1 {
    width: 24.875em;
    height: 24.5625em;
    top: 0;
    left: 0;
}
#sbsr-291 .cs-picture2 {
    width: 20em;
    height: 19.875em;
    top: 4.6875em;
    right: 0;
}
#sbsr-291 .cs-picture3 {
    width: 20.3125em;
    height: 20.125em;
    bottom: 0;
    left: 4.4375em;
}
#sbsr-291 .cs-picture4 {
    width: 16.5em;
    height: 16.375em;
    bottom: 3.75em;
    right: 3.5625em;
}
#sbsr-291 .cs-play-link {
    width: 6.3125em;
    height: 6.3125em;
    border-radius: 50%;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid #fff;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-15%, -15%) scaleX(-1);
    transition:
        background-color 0.3s,
        filter 0.3s,
        box-shadow 0.3s,
        transform 0.3s;
}
#sbsr-291 .cs-play-link:hover {
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.4) 0px 8px 24px;
    transform: translate(-15%, -15%) scale(1.1);
}
#sbsr-291 .cs-play-link:hover img {
    transform: rotate(120deg) translate(15%, 5%);
}
#sbsr-291 .cs-play-link img {
    width: 2em;
    height: auto;
    margin-left: 0.3125em;
    display: block;
    transition: transform 0.3s;
}


/*-- -------------------------- -->
<---       Meet The Team        -->
<--- -------------------------- -*/
#meet-team-454 {
    padding: var(--sectionPadding);
    overflow: hidden;
}
#meet-team-454 .cs-container {
    width: 100%;
    /* changes to 1440px at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
}
#meet-team-454 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 21.0625rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
}
#meet-team-454 .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
}
#meet-team-454 .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;
}
#meet-team-454 .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
}
#meet-team-454 .cs-text {
    margin-bottom: 2rem;
}
#meet-team-454 .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;
}
#meet-team-454 .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;
}
#meet-team-454 .cs-button-solid:hover:before {
    width: 100%;
}
#meet-team-454 .cs-card-group {
    width: 100%;
    max-width: 62.1875rem;
    /* pushes up by the same amount as the 2nd & 4th cs-item translates up */
    margin: clamp(2rem, 9vw, 3rem) 0 0 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    /* 14px - 40px */
    row-gap: clamp(0.875rem, 3vw, 2.5rem);
    position: relative;
    z-index: 1;
}
#meet-team-454 .cs-item {
    list-style: none;
    /* changes at desktop */
    width: 47.5%;
    margin: 0;
    padding: 0 0 1.5rem 0;
    border: 1px solid #b4b2c7;
    background-color: #fff;
    /* 12px - 16px */
    border-radius: clamp(0.875rem, 1.5vw, 1rem);
    /* clips img tag corners */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    z-index: 1;
}
#meet-team-454 .cs-item:before,
#meet-team-454 .cs-item:after {
    /* green boxes */
    content: "";
    width: 0;
    height: 100%;
    background: var(--primary);
    opacity: 0.9;
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    z-index: -1;
    transform-origin: left bottom;
    transition: width 0.5s;
}
#meet-team-454 .cs-item:after {
    bottom: 0rem;
    left: auto;
    right: 0rem;
    z-index: -1;
}
#meet-team-454 .cs-item:hover:before,
#meet-team-454 .cs-item:hover:after {
    width: 100%;
}
#meet-team-454 .cs-item:hover .cs-picture img {
    transform: scale(1.1);
    filter: brightness(50%);
}
#meet-team-454 .cs-item:hover .cs-h3,
#meet-team-454 .cs-item:hover .cs-desc {
    color: var(--bodyTextColorWhite);
}
#meet-team-454 .cs-item:nth-of-type(2),
#meet-team-454 .cs-item:nth-of-type(4) {
    /* 32px - 48px */
    /* wrapped in a calc function to make clamp value negative */
    transform: translateY(calc(clamp(2rem, 9vw, 3rem) * -1));
}
#meet-team-454 .cs-picture {
    width: 100%;
    height: auto;
    margin-bottom: 1.5rem;
    /* prevents img from overflowing container on hover */
    overflow: hidden;
    border-bottom: 1px solid #b4b2c7;
    aspect-ratio: 1.18518519;
    display: block;
    position: relative;
}
#meet-team-454 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes it act like a background image */
    object-fit: cover;
    transition:
        transform 0.6s,
        filter 0.3s;
}
#meet-team-454 .cs-ripple {
    list-style: none;
    /* changes at desktop */
    width: 120vw;
    height: auto;
    /* prevents mouse from interacting with it */
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    transform: translate(-50%, -50%);
}
#meet-team-454 .cs-ripple img {
    width: 100%;
    height: auto;
}
#meet-team-454 .cs-h3 {
    /* 16px - 25px */
    font-size: clamp(1rem, 1.5vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    color: var(--headerColor);
    display: block;
}
#meet-team-454 .cs-desc {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-align: center;
    margin: 0;
    color: var(--primary);
    display: block;
}

/*-- -------------------------- -->
<---  Service Page Side By Side -->
<--- -------------------------- -*/
#RPsbs-252,
#RPsbsr-252 {
    /* set padding top to 0 if the section above it is another white background section, same for padding bottom. We added the padding here in case this section gets placed above or below sections with full background colors.  Without this padding, the top of this sections color portion will be touching the neighboring section edge and it looks bad */
    padding: var(--sectionPadding);
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    position: relative;
    z-index: 1;
}
#RPsbs-252 .cs-container,
#RPsbsr-252 .cs-container {
    width: 100%;
    /* changes to 1280px on tablet */
    max-width: 34.375rem;
    padding: var(--sectionPadding);
    margin: auto;
    background: linear-gradient(
        90deg,
        rgba(241, 241, 244, 0) 0%,
        #f1f1f4 100%
    );
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
}
#RPsbs-252 .cs-container:before,
#RPsbsr-252 .cs-container:before {
    /* Bottom Line */
    content: "";
    width: 100%;
    height: 1px;
    background: #b4b2c7;
    background: linear-gradient(
        270deg,
        #b4b2c7 0%,
        rgba(250, 251, 252, 0.005) 0%,
        #b4b2c7 100%
    );
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0;
    right: 0;
    /* flips it horizontally */
    transform: scaleX(-1);
}
#RPsbs-252 .cs-container:after,
#RPsbsr-252 .cs-container:after {
    /* Right Line */
    content: "";
    width: 1px;
    height: 100%;
    background: #b4b2c7;
    background: linear-gradient(
        180deg,
        #b4b2c7 0%,
        rgba(250, 251, 252, 0.005) 0%,
        #b4b2c7 100%
    );
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0;
    right: 0;
}
#RPsbs-252 .cs-content,
#RPsbsr-252 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 27.125rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
}

#RPsbs-252 .cs-text,
#RPsbsr-252 .cs-text {
    margin-bottom: 1rem;
}
#RPsbs-252 .cs-text:last-of-type,
#RPsbsr-252 .cs-text:last-of-type {
    margin-bottom: 2rem;
}
#RPsbs-252 .cs-button-solid,
#RPsbsr-252 .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;
}
#RPsbs-252 .cs-button-solid:before,
#RPsbsr-252 .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;
}
#RPsbs-252 .cs-button-solid:hover:before,
#RPsbsr-252 .cs-button-solid:hover:before {
    width: 100%;
}
#RPsbs-252 .cs-picture,
#RPsbsr-252 .cs-picture {
    width: 100%;
    max-width: 32.625rem;
    margin: 0;
    border: 1px solid var(--primary);
    position: relative;
    display: block;
    /* width divided by height */
    aspect-ratio: 1;
    /* prevents border from adding to height and width */
    box-sizing: border-box;
}
#RPsbs-252 .cs-picture img,
#RPsbsr-252 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/*-- ------------------------------------>
<--- Service Page Side By Side Reverse -->
<--- -----------------------------------*/
#RPsbsr-252 {
    padding: var(--sectionPadding);
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}
#RPsbsr-252 .cs-container {
    background: linear-gradient(
        90deg,
        #f1f1f4 0%,
        rgba(241, 241, 244, 0) 100%
    );
}
#RPsbsr-252 .cs-container:before {
    background: #b4b2c7;
    background: linear-gradient(
        270deg,
        #b4b2c7 0%,
        rgba(250, 251, 252, 0.005) 0%,
        #b4b2c7 100%
    );
    transform: scaleX(1);
}
#RPsbsr-252 .cs-container:after {
    left: 0;
}


/*-- -------------------------- -->
<---   Projects page Gallery    -->
<--- -------------------------- -*/
#gallery-453 {
    /* centers the inline-block button */
    text-align: center;
    padding: var(--sectionPadding);
}
#gallery-453 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
}
#gallery-453 .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;
}
#gallery-453 .cs-button-group {
    width: 100%;
    max-width: 37.5rem;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 0.5rem;
    column-gap: 1.5rem;
}
#gallery-453 .cs-button {
    font-size: 1rem;
    line-height: 1.5em;
    padding: 0 0 0 1rem;
    color: var(--bodyTextColor);
    background-color: transparent;
    border: none;
    position: relative;
    transition: color 0.3s;
}
#gallery-453 .cs-button:before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--primary);
    /* starting value, this will animate to 1 when the button is hovered, and when the active class is on it */
    opacity: 0;
    /* prevents mouse from interacting with it */
    pointer-events: none;
    position: absolute;
    display: block;
    top: 50%;
    /* start -20px left of the button */
    left: -1.25rem;
    transform: translateY(-50%);
    /* transition to and from the active class styles on hover*/
    transition: opacity 0.3s,
                    left 0.3s;
}
#gallery-453 .cs-button:hover {
    color: var(--primary);
    cursor: pointer;
}
#gallery-453 .cs-button:hover:before {
    left: 0;
    opacity: 1;
}
#gallery-453 .cs-button.cs-active {
    /* when the button is active, add these styles to the button and its pseudo */
    font-weight: 700;
    color: var(--primary);
}
#gallery-453 .cs-button.cs-active:before {
    /* animate to these values when the cs-active class is added to the button and on hover */
    left: 0;
    opacity: 1;
}
#gallery-453 .cs-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
#gallery-453 .cs-gallery {
    width: 100%;
    padding: 0;
    margin: 0;
    /* 48px - 64px */
    margin-bottom: clamp(3rem, 3vw, 4rem);
    opacity: 1;
    visibility: visible;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    left: 0;
    /* 16px - 20px */
    gap: clamp(1rem, 1vw, 1.25rem);
    transition: transform 0.7s,
                opacity 0.3s,
                visibility 0.5s,
                top 0.3s,
                left 0.3s;
    /* makes the transform scaling origin the top left corner, dictates the direction by which the scale transforms animate towards */
    transform-origin: left top;
}
#gallery-453 .cs-gallery.cs-hidden {
    /* by using visibility:hidden instead of display:none, we can see the animations from the opacity and transforms, display:none won't render animations. */
    visibility: hidden;
    /* prevents the mouse from interacting with it */
    pointer-events: none;
    /* hidden galleries have a 0 opacity, and we animate the opacity to 1 when they become active */
    opacity: 0;
    /* this top and left value help control the animation, by setting it to position absolute and left 0, the gallery won't fly off screen to the left, it will stop its position to be at the left edge of the .cs-container (left: 0). Same for the bottom:0 value, the gallery won't go past that posiiton when it animates */
    bottom: 0;
    left: 0;
    position: absolute;
    /* prevents the hidden galleries from overflowing the section, and makes a nice animations to transition to and from */
    transform: scaleY(0) scaleX(0);
}
#gallery-453 .cs-gallery.cs-hidden .cs-image {
    /* when gallery is hidden, add these styles to the cs-image to animate from when cs-hidden is removed from the .cs-gallery */
    transform: translateY(2.1875rem);
    opacity: 0;
}
#gallery-453 .cs-image {
    border-radius: 0.25rem;
    width: clamp(47%, 42.5vw, 48.5%);
    /* changes at tablet */
    aspect-ratio: 0.72985782;
    /* clips the image corners */
    overflow: hidden;
    display: block;
    position: relative;
    /* when .cs-hidden is removed from the .cs-gallery, reset these values and animate from their hidden styles */
    transform: translateY(0rem);
    opacity: 1;
    transition: opacity 0.6s,
                transform 0.6s;
}
#gallery-453 .cs-image:nth-of-type(1) {
    /* these delays stagger the reveal of each image so they all go one after the other and not all at once */
    transition-delay: 0.15s;
}
#gallery-453 .cs-image:nth-of-type(2) {
    transition-delay: 0.3s;
}
#gallery-453 .cs-image:nth-of-type(3) {
    transition-delay: 0.45s;
}
#gallery-453 .cs-image:nth-of-type(4) {
    transition-delay: 0.6s;
}
#gallery-453 .cs-image:nth-of-type(5) {
    transition-delay: 0.75s;
}
#gallery-453 .cs-image:nth-of-type(6) {
    transition-delay: 0.9s;
}
#gallery-453 .cs-image:nth-of-type(7) {
    transition-delay: 1.05s;
}
#gallery-453 .cs-image:nth-of-type(8) {
    transition-delay: 1.2s;
}
#gallery-453 .cs-image img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes it act like a background image */
    object-fit: cover;
}


/*-- -------------------------- -->
<---       Contact Form         -->
<--- -------------------------- -*/
#cs-contact-486 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
}
#cs-contact-486 .cs-container {
    width: 100%;
    /* changes to 1440px at tablet */
    max-width: 34.375em;
    margin: auto;
    /* 20px - 80px */
    padding: clamp(1.25rem, 5.5vw, 5rem);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    background-color: #14142b;
    /* 12px - 24px */
    border-radius: clamp(0.75rem, 3vw, 1.5rem);
    /* clips the glowing orb */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    position: relative;
    z-index: 1;
}
#cs-contact-486 .cs-container:before {
    /* glowing orb */
    content: "";
    width: 77.5rem;
    height: 7.625rem;
    background: #f1f1f4;
    opacity: 0.21;
    -webkit-filter: blur(152px);
    filter: blur(152px);
    transform: translateX(-50%) rotate(-38.5deg);
    position: absolute;
    display: block;
    top: 30%;
    left: 50%;
    z-index: -1;
}
#cs-contact-486 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 36.75rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
}
#cs-contact-486 .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-contact-486 .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
}
#cs-contact-486 .cs-title {
    max-width: 16ch;
    color: var(--bodyTextColorWhite);
}
#cs-contact-486 .cs-color {
    color: var(--primaryLightGreen);
}
#cs-contact-486 .cs-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    /* 24px - 36px, matches the padding-bottom */
    margin: 0 0 clamp(1.5rem, 4vw, 2.25rem) 0;
    /* 24px - 36px */
    padding-bottom: clamp(1.5rem, 4vw, 2.25rem);
    color: #b4b2c7;
    position: relative;
}
#cs-contact-486 .cs-text:before {
    /* dashed border effect, by using this method we can control the width of the dashed lines */
    content: "";
    width: 100%;
    height: 1px;
    background-image: linear-gradient(
        90deg,
        #b3bac5,
        #b3bac5 50%,
        transparent 50%,
        transparent 0%
    );
    /* change the first left rem value to change the length of the dashes */
    background-size: 0.6rem 1px;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
}
#cs-contact-486 .cs-heading {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.5em;
    font-weight: 700;
    text-align: left;
    color: var(--bodyTextColorWhite);
    display: block;
}
#cs-contact-486 .cs-heading:last-of-type {
    /* make the last one have the margin bottom to create the space between the contact info */
    margin-bottom: 0.75rem;
}
#cs-contact-486 .cs-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    font-weight: 400;
    text-align: left;
    text-decoration: none;
    margin: 0;
    color: #b4b2c7;
    display: block;
}
#cs-contact-486 #cs-form-486 {
    width: 100%;
    max-width: 38.625rem;
    padding: 2rem 1.5rem;
    background-color: #fff;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    border-radius: 0.75rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 1.25rem;
}
#cs-contact-486 .cs-h3 {
    /* 20px - 31px */
    font-size: clamp(1.25rem, 4vw, 1.9375rem);
    line-height: 1.2em;
    font-weight: 700;
    text-align: left;
    width: 100%;
    /* 4px + the 20px gap on the #cs-form */
    margin: 0 0 0.25rem 0;
    color: #14142b;
}
#cs-contact-486 .cs-label {
    font-size: 1rem;
    line-height: 1.5em;
    width: 100%;
    margin: 0 0 0.375rem 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: #14142b;
}
#cs-contact-486 .cs-input,
#cs-contact-486 .cs-textarea,
#cs-contact-486 #cs-select-486 {
    font-size: 1rem;
    font-family: inherit;
    width: 100%;
    height: 3rem;
    margin: 0;
    padding: 0 1.25rem;
    /* prevents padding from affecting width and height */
    box-sizing: border-box;
    border-radius: 0.5rem;
    border: 1px solid #b4b2c7;
    background-color: transparent;
}
#cs-contact-486 .cs-input::placeholder,
#cs-contact-486 .cs-textarea::placeholder,
#cs-contact-486 #cs-select-486::placeholder {
    color: #7d799c;
    font-size: 1rem;
}
#cs-contact-486 .cs-textarea {
    min-height: 9.375rem;
    padding-top: 0.625rem;
}
#cs-contact-486 .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-contact-486 .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-contact-486 .cs-button-solid:hover:before {
    width: 100%;
}
#cs-contact-486 .cs-button-solid {
    /* button override */
    width: 100%;
    border: none;
}



}



/* In between - 500px */
@media only screen and (min-width: 31.25rem) {
/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/
#cta-461 {
    /* clips the .swoosh so it doesn't cause overflow */
    overflow: hidden;
    /* pushes down proportional to the viewwidth size, so as the swoosh img grows wider it's growing height doesn't make it creep closer and closer to the cta button, resets to 0 at 768px */
    padding-bottom: 12vw;
}
#cta-461 .cs-container {
    align-items: flex-start;
}
#cta-461 .cs-cta:before {
    border-radius: 9.375rem;
    bottom: -6.25rem;
    right: 1.25rem;
}



}



/* In-between - 600px */
@media only screen and (min-width: 37.5rem) {



}


/* In-Between - 650px */
@media only screen and (min-width: 40.625rem) {
/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/
#hero-446 .cs-card-group {
    flex-wrap: nowrap;
}
#hero-446 .cs-item {
    width: 33.33%;
}
#hero-446 .cs-item:nth-of-type(2) {
    border-right: 1px solid #dcdcdd;
}
#hero-446 .cs-item:last-of-type {
    width: 33.33%;
    border: none;
}


}



/* Tablet - 768px */
@media only screen and (min-width: 550px) {



}


/* Tablet - 600px */
@media only screen and (min-width: 600px) {




}


/* Tablet - 700px */
@media only screen and (min-width: 43.75rem) {



}



/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
/*-- -------------------------- -->
<---  WWD Side By Side Reverse  -->
<--- -------------------------- -*/
#sbsr-87 {
    /* we use margin here instead of padding because we want to create the space OUTSIDE the section.  The overflow on the section clips the boxes we made to make the slanted designs, so we need to push from the outside of the section with margin to create space between it and the next section.  If the section above this Stitch has a white background, add margin-top: 0. If it has a white section below it, add margin-bottom: 0. This will allow more proper spacing and not have too much empty space.  If both sections above and below this Stitch have white backgrounds, you can just remove this margin all together */
    margin: var(--sectionPadding);
    margin-left: 0;
    margin-right: 0;
}
#sbsr-87 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* 44px - 108px */
    column-gap: clamp(2.75rem, calc(7.85vw), 6.75rem);
}
#sbsr-87 .cs-card-group {
    max-width: 100%;
}
#sbsr-87 .cs-image-group {
    /* 318px - 542px */
    width: clamp(19.875rem, 46.9vw, 33.875rem);
    /* prevents flexbox from squishing it */
    flex: none;
    /* sends it to the right in the 2nd position */
    order: 2;
}
#sbsr-87 .cs-image-group:before {
    /* Black background, moved to the image-group at tablet */
    content: "";
    width: 80vw;
    height: 300%;
    top: 50%;
    left: auto;
    right: 80%;
    transform: translateY(-50%);
}
#sbsr-87 .cs-picture {
    width: 47.8%;
    aspect-ratio: initial;
}

/*-- -------------------------- -->
<---       Home Services        -->
<--- -------------------------- -*/
#services-447 .cs-container {
    max-width: 90rem;
}
#services-447 .cs-card-group {
    flex-wrap: wrap;
    flex-direction: row;
    /* 16px - 20px */
    column-gap: clamp(1rem, 1.5vw, 1.25rem);
    row-gap: 3.75rem;
}
#services-447 .cs-item {
    width: 47%;
}

/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/
#cta-461 {
    margin-bottom: 3.75rem;
    padding-bottom: 0;
    background-color: #14142b;
    position: relative;
  }
  #cta-461:before {
    content: "";
    /* changes to 824px at large desktop */
    width: 37.75rem;
    height: 37.75rem;
    border-radius: 50%;
    background: #333142;
    opacity: 1;
    position: absolute;
    display: block;
    /* changes at 1300px */
    top: -6.25rem;
    /* changes at 1300px */
    right: -18.75rem;
    z-index: -2;
  }
  #cta-461 .cs-container {
    max-width: 80rem;
    position: relative;
  }
  #cta-461 .cs-container:before {
    /* left white slant */
    content: "";
    width: 375rem;
    height: 62.5rem;
    margin-right: -93.75rem;
    background: #fff;
    /* prevents the mouse from interacting with it */
    pointer-events: none;
    opacity: 1;
    position: absolute;
    display: block;
    top: 50%;
    right: 50%;
    transform: rotate(5deg);
  }
  #cta-461 .cs-container:after {
    /* right white slant */
    content: "";
    width: 375rem;
    height: 187.5rem;
    margin-right: -218.75rem;
    background: #fff;
    /* prevents the mouse from interacting with it */
    pointer-events: none;
    opacity: 1;
    position: absolute;
    display: block;
    top: 100%;
    right: 50%;
    transform: rotate(-25deg);
    z-index: -1;
  }
  #cta-461 .cs-text {
    width: 55%;
  }
  #cta-461 .cs-cta {
    /* prevents border from affecting height and width */
    box-sizing: border-box;
    border: 12px solid #fff;
    /* 100px - 100px */
    margin-right: clamp(6.25rem, 15vw, 6.25rem);
  }
  #cta-461 .cs-cta:before {
    display: none;
  }


/*-- -------------------------- -->
<---    Home Why Choose Us      -->
<--- -------------------------- -*/
#why-choose-1630 .cs-container {
    max-width: 80rem;
}
#why-choose-1630 .cs-flex {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
}
#why-choose-1630 .cs-content {
    width: 50%;
    /* 32px - 56px top and bottom */
    padding: clamp(2rem, 4vw, 3.5rem) 0;
    /* sends it to the left in the 1st position */
    order: -1;
    align-self: center;
    flex: none;
}
#why-choose-1630 .cs-picture {
    width: 47vw;
    min-height: 25rem;
    max-height: 100%;
    height: auto;
    position: relative;
}
#why-choose-1630 .cs-item {
    grid-column: span 4;
}


/*-- -------------------------- -->
<---       Home Gallery         -->
<--- -------------------------- -*/
#gallery-434 {
    padding-left: 0;
    padding-right: 0;
}
#gallery-434 .cs-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 0.45fr);
}
#gallery-434 .cs-picture1 {
    border-radius: 0 0.5rem 0.5rem 0;
    display: block;
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}
#gallery-434 .cs-picture2 {
    grid-column: 3 / 5;
    grid-row: 1 / 3;
}
#gallery-434 .cs-picture3 {
    grid-column: 5 / 6;
    grid-row: 1 / 1;
}
#gallery-434 .cs-picture4 {
    border-radius: 0.5rem 0 0 0.5rem;
    grid-column: 6 / 7;
    grid-row: 1 / 1;
}
#gallery-434 .cs-picture5 {
    display: none;
}
#gallery-434 .cs-picture6 {
    border-radius: 0 0.5rem 0.5rem 0;
    display: block;
    grid-column: 1 / 3;
    grid-row: 2 / 4;
}
#gallery-434 .cs-picture7 {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
}
#gallery-434 .cs-picture8 {
    grid-column: 4 / 5;
    grid-row: 3 / 4;
}
#gallery-434 .cs-picture9 {
    grid-column: 5 / 6;
    grid-row: 2 / 4;
}
#gallery-434 .cs-picture10 {
    border-radius: 0.5rem 0 0 0.5rem;
    grid-column: 6 / 7;
    grid-row: 2 / 4;
}
#gallery-434 .cs-picture11 {
    display: none;
}


/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/
#faq-443 {
    position: relative;
    /* clips the image and grey box so it doesn't cause overflow issues */
    overflow: hidden;
}
#faq-443 .cs-container {
    max-width: 82rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    position: relative;
}
#faq-443 .cs-content {
    /* changes at desktop */
    width: 60vw;
}
#faq-443 .cs-picture {
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    /* makes sure image is always set to the bottom of the picture element */
    align-items: flex-end;
    position: absolute;
    bottom: 0;
    /* -64px - -164px, wrapped in calc function to multiply clamp value by -1 */
    right: calc(clamp(4rem, 7vw, 10.25rem) * -1);
    /* places it in a 100 layers above the grey box, for good measure */
    z-index: 100;
}
#faq-443 .cs-picture img {
    /* 313px - 735px */
    width: clamp(19.5625rem, 40vw, 45.9375rem);
    height: auto;
}
#faq-443 .cs-floating-box {
    /* the only way to make this work the way we need it to, is to make this div that matches the width of the .cs-container in the #cta, so we can place the :before on the outside of the box on the right and look like it's checkered with the .cs-container below in the #cta. */
    width: 67vw;
    max-width: 80rem;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
}
#faq-443 .cs-floating-box:before {
    /* grey box behind plant picture */
    content: "";
    width: 100%;
    /* 165px - 388px */
    height: clamp(10.3125rem, 30vw, 24.25rem);
    border-radius: 6.25rem 0 0 0;
    background-color: #333142;
    opacity: 1;
    position: absolute;
    display: block;
    /* wrapped in a calc function to make clamp value negative, and made the top value match the exact same value as the height */
    top: calc(clamp(10.3125rem, 30vw, 24.25rem) * -1);
    /* pushes the left edge 100% of the width of the parent to the left, which makes the left edge of the box sit flush on the right edge of the container */
    left: 100%;
}


/*-- -------------------------- -->
<---          CTA Two           -->
<--- -------------------------- -*/
#cta-443 {
    margin: auto;
    padding: 0;
    border-radius: 0;
    /* clips glowing ball effects from overflowing */
    overflow: hidden;
    background-color: transparent;
    position: relative;
}
#cta-443:before {
    /* Extended grey background to the left */
    content: "";
    width: 50%;
    height: 100%;
    background-color: #333142;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
}
#cta-443:after {
    /* faded glowing ball effect (left) */
    content: "";
    width: 28.3125rem;
    height: 28.3125rem;
    /* pushes 508px left of the center line */
    margin-right: 31.75rem;
    background: #f1f1f4;
    opacity: 0.24;
    -webkit-filter: blur(182px);
    filter: blur(182px);
    position: absolute;
    display: block;
    top: 10.0625rem;
    /* pushes right edge to the center line of the container */
    right: 50%;
}
#cta-443 .cs-wrapper {
    max-width: 82rem;
    margin: auto;
}
#cta-443 .cs-container {
    width: 67vw;
    max-width: 80rem;
    margin-left: 0;
    /* 40px 0 100px top & bottom */
    padding: clamp(2.5rem, 6vw, 6.25rem) 1rem;
    border-radius: 0 0 6.25rem 0;
    overflow: hidden;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    background-color: #333142;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
}
#cta-443 .cs-container:after {
    /* faded glowing ball effect (right) */
    content: "";
    width: 28.3125rem;
    height: 28.3125rem;
    background: #f1f1f4;
    opacity: 0.24;
    -webkit-filter: blur(182px);
    filter: blur(182px);
    position: absolute;
    display: block;
    top: -13.25rem;
    right: -7.375rem;
}
#cta-443 .cs-cta {
    /* prevents flexbox from squishing it */
    flex: none;
    position: relative;
}


/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/
#reviews-510 .cs-container {
    max-width: 90rem;
}
#reviews-510 .cs-content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
#reviews-510 .cs-title {
    margin: 0;
}
#reviews-510 .cs-text {
    width: 50%;
    margin: 0;
}
#reviews-510 .cs-card-group {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
}


/*-- -------------------------- -->
<---           Footer           -->
<--- -------------------------- -*/
#cs-footer-487 .cs-logo-group {
    align-items: flex-start;
}
#cs-footer-487 .cs-text {
    text-align: left;
}
#cs-footer-487 .cs-top {
    justify-content: space-between;
}
#cs-footer-487 .cs-subscribe-group {
    width: auto;
    align-items: flex-start;
}
#cs-footer-487 .cs-subscribe-p {
    text-align: left;
}
#cs-footer-487 .cs-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
#cs-footer-487 .cs-copyright {
    align-items: flex-start;
}


/*-- -------------------------- -->
<---       Meet The Team        -->
<--- -------------------------- -*/
#meet-team-454 .cs-container {
    max-width: 90rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
#meet-team-454 .cs-card-group {
    width: calc(73%);
}
#meet-team-454 .cs-ripple {
    width: 120%;
}


/*-- -------------------------- -->
<---  Service Page Side By Side -->
<--- -------------------------- -*/
#RPsbs-252 .cs-container,
#RPsbsr-252 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
#RPsbs-252 .cs-picture,
#RPsbsr-252 .cs-picture {
    /* 415px - 522px */
    height: clamp(25.9375rem, 40.5vw, 32.625rem);
    width: 50%;
    flex: none;
}
#RPsbs-252 .cs-content,
#RPsbsr-252 .cs-content {
    max-width: 33rem;
    margin: 0;
    width: 45%;
}

/*-- ------------------------------------>
<--- Service Page Side By Side Reverse -->
<--- -----------------------------------*/
#RPsbsr-252 .cs-picture {
    margin: 0;
    /* sends it to the right in the 2nd position */
    order: 2;
}


/*-- -------------------------- -->
<---   Projects page Gallery    -->
<--- -------------------------- -*/
#gallery-453 .cs-container {
    max-width: 80rem;
}
#gallery-453 .cs-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}
#gallery-453 .cs-flex {
    width: 50%;
}
#gallery-453 .cs-title {
    margin: 0;
}
#gallery-453 .cs-button-group {
    width: auto;
}
#gallery-453 .cs-gallery {
    justify-content: space-between;
}
#gallery-453 .cs-image {
    /* 171px - 305px */
    width: clamp(10.6875rem, 23.3%, 19.0625rem);
    aspect-ratio: 0.71529412;
}

/*-- -------------------------- -->
<---       Contact Form         -->
<--- -------------------------- -*/
#cs-contact-486 .cs-container {
    max-width: 90rem;
    flex-direction: row;
    justify-content: space-between;
}
#cs-contact-486 .cs-label:nth-of-type(1),
#cs-contact-486 .cs-label:nth-of-type(2) {
    width: clamp(45%, 17vw, 48.5%);
}



}


/* Tablet - 768px */
@media only screen and (min-width: 768px) {
/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/
#cs-navigation .cs-top-link:nth-of-type(2) {
    display: flex;
}



}


/* Mobile - 1023.5px */
@media only screen and (max-width: 1023.5px) {
/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/
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 0.3s;
  }
  #cs-navigation:before {
    content: "";
    width: 100%;
    height: 0vh;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: -1100;
    transition: height 0.5s, opacity 0.5s;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  #cs-navigation.cs-active:before {
    height: 150vh;
    opacity: 1;
  }
  #cs-navigation.cs-active .cs-ul-wrapper {
    opacity: 1;
    transform: scaleY(1);
    transition-delay: 0.15s;
  }
  #cs-navigation.cs-active .cs-li {
    opacity: 1;
    transform: translateY(0);
  }
  #cs-navigation .cs-top-bar {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #cs-navigation .cs-top-container {
    width: 100%;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 1rem 1.5rem;
    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 {
    opacity: 1;
    display: flex;
    visibility: visible;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.3s, visibility 0.3s, height 0.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%;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 1.25rem 1rem;
    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;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0;
    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 0.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: translate(-50%, -50%) translateY(0) rotate(-225deg);
    transform-origin: center;
  }
  #cs-navigation .cs-active .cs-line3 {
    opacity: 0;
    bottom: 100%;
  }
  #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;
    background-color: #fafbfc;
    border-radius: 2px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  #cs-navigation .cs-line1 {
    top: 0;
    transition: transform 0.5s, top 0.3s, left 0.3s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
    transform-origin: center;
  }
  #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-direction: normal;
    animation-fill-mode: forwards;
  }
  #cs-navigation .cs-line3 {
    bottom: 0;
    transition: bottom 0.3s, opacity 0.3s;
  }
  #cs-navigation .cs-button-solid {
    display: none;
  }


}


/* Tablet - 650px - 1024px */
@media only screen and (min-width: 40.625rem) and (max-width: 1023.5px) {



}


/* Mobile - 1023.5px */
@media only screen and (max-width: 1023.5px) {
/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/
/*-- -------------------------- -->
<---     Navigation Dropdown    -->
<--- -------------------------- -*/
#cs-navigation .cs-dropdown {
    color: var(--bodyTextColorWhite);
    position: relative;
  }
  #cs-navigation .cs-dropdown .cs-dropdown-toggle {
    text-align: inherit;
    /* Reset default button styles */
    background: none;
    cursor: pointer;
    border: none;
    /* Remove any default focus styles */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  #cs-navigation .cs-dropdown.cs-active .cs-drop-ul {
    height: auto;
    margin: 0.75rem 0 0 0;
    padding: 0.75rem 0;
    opacity: 1;
    visibility: visible;
  }
  #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;
    display: flex;
    visibility: hidden;
    flex-direction: column;
    justify-content: flex-start;
    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;
  }


}


/* Small Desktop - 1024px */
@media only screen and (max-width: 1023.5px) {
/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/
#cs-navigation .cs-ul-wrapper {
    width: 100%;
    height: auto;
    padding-bottom: 3rem;
    background-color: #fff;
    overflow: hidden;
    box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: -1;
    transform: scaleY(0);
    transition: transform 0.4s, opacity 0.3s;
    transform-origin: top;
  }
  #cs-navigation .cs-ul {
    width: 100%;
    height: auto;
    max-height: 65vh;
    margin: 0;
    padding: 3rem 0 0 0;
    overflow: scroll;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1.25rem;
  }
  #cs-navigation .cs-li {
    text-align: center;
    list-style: none;
    width: 100%;
    margin-right: 0;
    opacity: 0;
    /* transition from these values */
    transform: translateY(-4.375rem);
    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;
    padding: 0.25rem;
    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;
    display: none;
    position: absolute;
    bottom: -0.125rem;
    left: 0;
  }
  #cs-navigation .cs-li-link.cs-active {
    color: var(--primary);
  }
  #cs-navigation .cs-li-link.cs-active:before {
    display: block;
  }
  #cs-navigation .cs-li-link:hover {
    color: var(--primary);
  }




}


/* Desktop - 1024px */
@media only screen and (min-width: 1024px) {
/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/
/*-- -------------------------- -->
<---     Navigation Dropdown    -->
<--- -------------------------- -*/
#cs-navigation .cs-dropdown {
    position: relative;
  }
  #cs-navigation .cs-dropdown .cs-dropdown-toggle {
    text-align: inherit;
    /* Reset default button styles */
    background: none;
    cursor: pointer;
    border: none;
    /* Remove any default focus styles */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  #cs-navigation .cs-dropdown:hover,
  #cs-navigation .cs-dropdown.cs-active {
    cursor: pointer;
  }
  #cs-navigation .cs-dropdown:hover .cs-drop-ul,
  #cs-navigation .cs-dropdown.cs-active .cs-drop-ul {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1);
  }
  #cs-navigation .cs-dropdown:hover .cs-drop-li,
  #cs-navigation .cs-dropdown.cs-active .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;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 10px 16px;
    opacity: 0;
    border-bottom: 5px solid var(--primary);
    visibility: hidden;
    /* 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: calc(100% - 2px);
    z-index: 100;
    transform: scaleY(0);
    transition: transform 0.3s, visibility 0.3s, opacity 0.3s;
    transform-origin: top;
  }
  #cs-navigation .cs-drop-li {
    font-size: 1rem;
    text-decoration: none;
    list-style: none;
    width: 100%;
    height: auto;
    opacity: 0;
    display: block;
    transform: translateY(-10/16rem);
    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-drop-li:nth-of-type(10) {
    transition-delay: 0.5s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(11) {
    transition-delay: 0.55s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(12) {
    transition-delay: 0.6s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(13) {
    transition-delay: 0.65s;
  }
  #cs-navigation .cs-li-link.cs-drop-link {
    font-size: 1rem;
    line-height: 1.5em;
    text-decoration: none;
    white-space: nowrap;
    width: 100%;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0.75rem;
    color: var(--bodyTextColor);
    display: block;
    transition: color 0.3s, background-color 0.3s;
  }
  #cs-navigation .cs-li-link.cs-drop-link:hover {
    background-color: #f7f7f7;
    color: var(--primary);
  }
  #cs-navigation .cs-li-link.cs-drop-link:focus-visible {
    outline-offset: -2px;
  }
  #cs-navigation .cs-li-link.cs-drop-link:before {
    display: none;
  }


/*-- -------------------------- -->
<---     Desktop Navigation     -->
<--- -------------------------- -*/
body.scroll #cs-navigation {
    /* 53px, the ssme 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;
    padding: 0;
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: fixed;
    z-index: 10000;
    transition: transform 0.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;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 1rem;
    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;
    display: block;
    position: absolute;
    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 0.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;
    /* prevents padding from affectin gheight */
    box-sizing: border-box;
    padding: 0 1rem;
    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 0.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;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-align: center;
    text-decoration: none;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 2rem;
    background-color: var(--primary);
    overflow: hidden;
    color: #fff;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #cs-navigation .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #1a1a1a;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #cs-navigation .cs-button-solid:hover:before {
    width: 100%;
  }
  #cs-navigation .cs-nav-button {
    line-height: 2.875rem;
    margin-left: 1.5rem;
  }


}


/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
/*-- -------------------------- -->
<---       Home Services        -->
<--- -------------------------- -*/
#services-447 .cs-card-group {
    flex-wrap: nowrap;
}
#services-447 .cs-item {
    width: 100%;
    /* 144px - 274px */
    padding-top: clamp(9rem, 17.5vw, 17.125rem);
}
#services-447 .cs-picture {
    /* 224px - 428px */
    height: clamp(14rem, 28vw, 26.75rem);
}

/*-- -------------------------- -->
<---           Footer           -->
<--- -------------------------- -*/
#cs-footer-487 .cs-container {
    max-width: 80rem;
}
#cs-footer-487 .cs-top {
    flex-wrap: nowrap;
}
#cs-footer-487 .cs-logo-group {
    width: 24%;
    max-width: 19.0625rem;
}


/*-- -------------------------- -->
<--- About Side By Side Reverse -->
<--- -------------------------- -*/
#sbsr-291 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    align-items: center;
}
#sbsr-291 .cs-image-group {
    /* reset the scale */
    font-size: min(1.1vw, 1em);
    /* prevent flexbox from squishing it */
    flex: none;
    /* sends it to the right in the 2nd position */
    order: 2;
}




}


/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {



}



/* Large Desktop - 1600px */
@media only screen and (min-width: 1600px) {



}


/* Desktop - 1300px */
@media only screen and (min-width: 75rem) {
/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/
#cta-461 {
    padding-top: 10rem;
}
#cta-461:before {
    width: 51.5rem;
    height: 51.5rem;
    margin-left: 23.75rem;
    right: auto;
    left: 50%;
    top: -3.125rem;
    transform: none;
}
#cta-461:after {
    /* floating white blurry orb */
    content: "";
    width: 39.3125rem;
    height: 28.6875rem;
    margin-right: 21.125rem;
    background: #f1f1f4;
    opacity: 0.16;
    -webkit-filter: blur(182px);
    filter: blur(182px);
    position: absolute;
    display: block;
    top: -16.4375rem;
    right: 50%;
}
#cta-461 .cs-text {
    margin-bottom: 12.5rem;
}
#cta-461 .cs-decoration {
    height: 50.1875rem;
    width: auto;
    margin-left: 8.75rem;
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: -2;
}

/*-- -------------------------- -->
<---       Meet The Team        -->
<--- -------------------------- -*/
#meet-team-454 .cs-content {
    /* 24px - 80px */
    margin-left: clamp(1.5rem, 5.5vw, 5rem);
}
#meet-team-454 .cs-card-group {
    justify-content: center;
    margin: 0;
    /* 20px - 40px */
    column-gap: clamp(1.5rem, 2.5vw, 2.5rem);
}
#meet-team-454 .cs-card-group:hover .cs-ripple {
    transform: translate(-50%, -50%) scale(1.1);
}
#meet-team-454 .cs-item {
    width: calc(30%);
    max-width: 19.0625rem;
}
#meet-team-454 .cs-item:nth-of-type(2),
#meet-team-454 .cs-item:nth-of-type(4) {
    transform: none;
}
#meet-team-454 .cs-item:nth-of-type(1) {
    transform: translateY(19.4375rem);
}
#meet-team-454 .cs-item:nth-of-type(3) {
    transform: translateY(13.3125rem);
}
#meet-team-454 .cs-picture {
    height: 15.125rem;
    aspect-ratio: 1.26033058;
}
#meet-team-454 .cs-ripple {
    width: 90%;
    transition: transform 0.3s;
}



}


/* Desktop - 1600px */
@media only screen and (min-width: 100rem) { 
/*-- -------------------------- -->
<---       Home Gallery         -->
<--- -------------------------- -*/
#gallery-434 .cs-grid {
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(3, 0.4fr);
}
#gallery-434 .cs-picture4 {
    border-radius: 0.5rem;
}
#gallery-434 .cs-picture5 {
    border-radius: 0.5rem 0 0 0.5rem;
    display: block;
    grid-column: 7 / 8;
    grid-row: 1 / 3;
}
#gallery-434 .cs-picture10 {
    border-radius: 0.5rem;
}
#gallery-434 .cs-picture11 {
    border-radius: 0.5rem 0 0 0.5rem;
    display: block;
    grid-column: 7 / 8;
    grid-row: 3 / 4;
}



}


/* Tablet - 550px */
@media only screen and (min-width: 34.375rem) {


}

/* Large Desktop - 2000px */
@media only screen and (min-width: 125rem) {
/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/
#faq-443 .cs-picture {
    /* reset right value */
    right: auto;
    /* places the left edge of the element to the center line of the parent container */
    left: 50%;
    /* push it 400px to the right of the center line, this maintains it's position in the container no matter how wide it gets */
    margin-left: 25rem;
}


}