@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@700&family=Poppins:wght@500&family=Roboto+Slab:wght@300;700&family=Roboto:ital,wght@0,400;0,900;1,400&display=swap');


*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}


: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: #0000FF;
    --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;
}

/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 1023.5px) {
  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 - 768px */
@media only screen and (min-width: 768px) {
  #cs-navigation .cs-top-link:nth-of-type(2) {
    display: flex;
  }
}
/* Small Desktop - 1024px */
@media only screen and (max-width: 1023.5px) {
  #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);
  }
}
/*-- -------------------------- -->
<---     Navigation Dropdown    -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 1023.5px) {
  #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;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 1024px) {
  #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     -->
<--- -------------------------- -*/
/* Small Desktop - 1024px */
@media only screen and (min-width: 1024px) {
  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;
  }
}
                                
/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #hero-82 {
        /* Centers button */
        text-align: center;
        /* 144px - 300px - leaving extra space for the navigation */
        padding: clamp(9rem, 25.95vw, 18.75rem) 1rem 0;
        /* 130px - 200px */
        padding-bottom: clamp(8.125rem, 12.5vw, 25em);
        position: relative;
        z-index: 1;
    }
    #hero-82 .cs-background {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -2;
    }
    #hero-82 .cs-background:before {
        /* Overlay */
        content: "";
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0.7;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: 1;
        /* prevents the cursor from interacting with it */
        pointer-events: none;
    }
    #hero-82 .cs-background img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    #hero-82 .cs-container {
        width: 100%;
        max-width: 67.5rem;
        margin: auto;
    }
    #hero-82 .cs-title {
        /* 39px - 61px */
        font-size: clamp(2.4375rem, 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);
        color: #fff;
        position: relative;
    }
    #hero-82 .cs-title:after {
        /* Divider Line */
        content: "";
        width: 6.25rem;
        height: 0.5rem;
        /* 16px - 24px */
        margin: clamp(1rem, 4vw, 1.5rem) auto clamp(1rem, 4vw, 1.5rem);
        background: var(--primary);
        opacity: 1;
        position: relative;
        display: block;
    }
    #hero-82 .cs-text {
        /* 16px - 25px */
        font-size: clamp(1rem, 1.95vw, 1.5625rem);
        line-height: 1.5em;
        text-align: center;
        width: 100%;
        /* 464px - 800px */
        max-width: clamp(29rem, 60vw, 50rem);
        margin: 0 auto;
        /* 40px - 48px */
        margin-bottom: clamp(2.5rem, 4vw, 3rem);
        color: #fff;
    }
    #hero-82 .cs-button-solid {
        font-size: 1rem;
        line-height: 3.5rem;
        text-decoration: none;
        font-weight: 700;
        margin: auto;
        color: #fff;
        padding: 0 1.5rem;
        background-color: var(--primary);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
    }
    #hero-82 .cs-button-solid:before {
        content: "";
        position: absolute;
        display: block;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #hero-82 .cs-button-solid:hover:before {
        width: 100%;
    }
}
                                
/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbsr-579 {
    }
    #sbsr-579 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 7vw, 4rem);
    }
    #sbsr-579 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 32.625rem;
        /* moved section padding to the .cs-content so we can have the cs-picture be full width on mobile without the padding preventing it from doing so */
        padding: var(--sectionPadding);
        padding-top: 0;
        /* 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;
    }

    #sbsr-579 .cs-text {
        margin-bottom: 1rem;
    }
    #sbsr-579 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #sbsr-579 .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-579 .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-579 .cs-button-solid:hover:before {
        width: 100%;
    }
    #sbsr-579 .cs-picture {
        display: block;
        position: relative;
        width: 100%;
        height: 18.75rem;
    }
    #sbsr-579 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #sbsr-579 {
        padding: var(--sectionPadding);
    }
    #sbsr-579 .cs-container {
        flex-direction: row;
        justify-content: flex-end;
        /* 60px - 128px */
        gap: clamp(3.75rem, 10vw, 8rem);
    }
    #sbsr-579 .cs-content {
        width: 53%;
        /* reset the padding, add the section padding back to the section container */
        padding: 0;
    }
    #sbsr-579 .cs-picture {
        width: 47vw;
        max-width: 30.875rem;
        /* 518px - 700px */
        height: clamp(32.375rem, 63vw, 43.75rem);
        /* 16px - 28px, added margin left and bottom to cs-picture so it pushes away by the same amount the yellow box element overlaps it left and bottom. This maintains consistent spacing left and bottom */
        margin: 0 0 clamp(1rem, 2.4vw, 1.75rem) clamp(1rem, 2.4vw, 1.75rem);
        position: relative;
        /* sends it to the right in the 2nd position */
        order: 2;
    }
    
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #services-342 {
        padding: var(--sectionPadding);
    }
    #services-342 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #services-342 .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-342 .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, 1.6vw, 1.25rem);
    }
    #services-342 .cs-item {
        list-style: none;
        width: 100%;
        max-width: 31.25rem;
        border-radius: 0.5rem;
        position: relative;
        z-index: 1;
        transition:
            box-shadow 0.3s,
            transform 0.3s;
    }
    #services-342 .cs-item:hover {
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        transform: translateY(-0.4375rem);
    }
    #services-342 .cs-item:hover .cs-picture img {
        opacity: 0.3;
        transform: scale(1.1);
    }
    #services-342 .cs-item:hover .cs-h3 {
        color: var(--primary);
    }
    #services-342 .cs-item:before {
        /* border, done in pseudo so it can sit under the picture */
        content: "";
        width: 100%;
        height: 100%;
        border-radius: 0.5rem;
        border: 1px solid #e8e8e8;
        /* prevents border from affecting height and width */
        box-sizing: border-box;
        background: transparent;
        opacity: 1;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: -1;
    }
    #services-342 .cs-link {
        text-decoration: none;
        /* 16px - 24px */
        padding-bottom: clamp(1rem, 2.2vw, 1.5rem);
        display: block;
    }
    #services-342 .cs-picture {
        width: 100%;
        height: 15rem;
        /* 16px - 24px */
        margin-bottom: clamp(1rem, 2.2vw, 1.5rem);
        border-radius: 0.5rem 0.5rem 0 0;
        background-color: var(--primary);
        /* clips the img tag corners */
        overflow: hidden;
        display: block;
        position: relative;
        z-index: 10;
    }
    #services-342 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
        transition:
            transform 0.6s,
            opacity 0.3s;
    }
    #services-342 .cs-h3 {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 3vw, 1.5625rem);
        line-height: 1.2em;
        font-weight: 700;
        color: var(--headerColor);
        margin: 0 0 0.75rem 0;
        /* 16px - 24px */
        padding: 0 clamp(1rem, 2vw, 1.5rem);
        transition: color 0.3s;
    }
    #services-342 .cs-item-text {
        /* 14px - 16px  */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        color: var(--bodyTextColor);
        margin: 0;
        /* 16px - 24px */
        padding: 0 clamp(1rem, 2.2vw, 1.5rem);
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #services-342 .cs-card-group {
        flex-direction: row;
        flex-wrap: wrap;
    }
    #services-342 .cs-item {
        /* we do this so it's stackable. You can add any number of reviews you want and they will stack and center in the middle. We don't use grid because if you have an odd number of cards, they don't stay centered, they align with their grid lines. This way its more FLEX-ible*/
        width: clamp(31.85%, 30.5vw, 32.28%);
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #gallery-43 {
        padding: var(--sectionPadding);
        position: relative;
        /* Prevents overflow from the image going off screen */
        overflow: hidden;
    }
    #gallery-43 .cs-container {
        width: 100%;
        max-width: 69rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #gallery-43 .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-43 .cs-image-group {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 16px - 20px */
        gap: clamp(1rem, 1.5vw, 1.25rem);
    }
    #gallery-43 .cs-item {
        width: 100%;
        height: 100%;
        aspect-ratio: 1;
        margin: 0;
        position: relative;
        display: block;
    }
    #gallery-43 .cs-item:hover .cs-hover-box {
        opacity: 1;
    }
    #gallery-43 .cs-item:hover .cs-icon {
        /* return to original position */
        transform: rotateY(0);
    }
    #gallery-43 .cs-item:hover .cs-h3 {
        opacity: 1;
        /* Return to original position */
        transform: translateY(0);
    }
    #gallery-43 .cs-item:hover .cs-hover-box-text {
        opacity: 1;
        /* Return to original position */
        transform: translateY(0);
    }
    #gallery-43 .cs-picture {
        margin: auto;
        width: 100%;
        height: 100%;
        display: block;
        position: relative;
    }
    #gallery-43 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    #gallery-43 .cs-hover-box {
        text-align: center;
        width: 100%;
        height: 100%;
        padding: 1em;
        background-color: black;
        opacity: 0;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* Prevents padding from contributing to height & width */
        box-sizing: border-box;
        /* Sets stage for 3d transform animation */
        perspective: 700px;
        top: 0;
        left: 0;
        z-index: 10;
        /* prevents mouse from being able to interact with these elements */
        pointer-events: none;
        transition: opacity 0.3s;
    }
    #gallery-43 .cs-icon {
        /* 50px - 60px */
        width: clamp(3.125rem, 5vw, 3.75rem);
        height: clamp(3.125rem, 5vw, 3.75rem);
        /* 16px - 32px */
        margin-bottom: clamp(1rem, 5vw, 2rem);
        border-radius: 50%;
        background-color: #fff;
        outline: 0.5rem solid rgba(255, 255, 255, 0.7);
        /* Start with the icon box rotated 90deg */
        transform: rotateY(90deg);
        position: relative;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        flex: none;
        transition: transform 0.5s;
    }
    #gallery-43 .cs-icon img {
        width: 1.25rem;
        height: 1.25rem;
    }
    #gallery-43 .cs-h3 {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 2vw, 1.5625rem);
        line-height: 1.2em;
        font-weight: 700;
        margin: 0 auto;
        max-width: 16.875rem;
        color: #fff;
        /* make starting position down 10px and invisible */
        opacity: 0;
        transform: translateY(0.625rem);
        margin-bottom: 0.5rem;
        transition:
            opacity 0.3s,
            transform 0.3s ease-out;
        transition-delay: 0.1s;
    }
    #gallery-43 .cs-hover-box-text {
        /* 13px - 16px */
        font-size: clamp(0.8125rem, 1vw, 1rem);
        line-height: 1.5em;
        margin: 0 auto;
        max-width: 16.875rem;
        color: #fff;
        /* make starting position down 10px and invisible */
        opacity: 0;
        transform: translateY(0.625rem);
        transition:
            opacity 0.3s,
            transform 0.3s ease-out;
        transition-delay: 0.2s;
    }
}
/* In Between - 600px */
@media only screen and (min-width: 37.5rem) {
    #gallery-43 .cs-image-group {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: 1fr;
    }
    #gallery-43 .cs-item {
        grid-column: span 6;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #gallery-43 .cs-item {
        grid-column: span 4;
    }
}

                                
/*-- -------------------------- -->
<---          Pricing           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #pricing-1183 {
        padding: var(--sectionPadding);
    }
    #pricing-1183 .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;
    }
    #pricing-1183 .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;
    }

    #pricing-1183 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875em, 5.5vw, 3.5em);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #fff;
        min-width: 13.375rem;
        padding: 0 2rem;
        background-color: var(--primary);
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #pricing-1183 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width 0.3s;
    }
    #pricing-1183 .cs-button-solid:hover:before {
        width: 100%;
    }
    #pricing-1183 .cs-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        /* 16px - 20px */
        gap: clamp(1rem, 1.8vw, 1.25rem);
        /* prevents flexbox from squishing it */
        flex: none;
    }
    #pricing-1183 .cs-item {
        list-style: none;
        width: 100%;
        margin: 0;
        /* 24px - 40px top & Bottom */
        /* 16px - 32px left & right */
        padding: clamp(1.5rem, 3vw, 2.5rem) 1.5rem;
        background-color: #f7f7f7;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    #pricing-1183 .cs-package {
        /* 13px - 16px */
        font-size: clamp(0.8125rem, 1.4vw, 1rem);
        line-height: 1.2em;
        letter-spacing: 0.1em;
        text-align: center;
        text-transform: uppercase;
        font-weight: 700;
        margin: 0 0 0.5rem 0;
        color: #767676;
        display: block;
    }
    #pricing-1183 .cs-price {
        /* 31px - 49px */
        font-size: var(--headerFontSize);
        line-height: 1.2em;
        text-align: center;
        font-weight: 900;
        margin: 0;
        color: var(--headerColor);
    }
    #pricing-1183 .cs-ul {
        /* 20px - 25px */
        margin: clamp(1.25rem, 3vw, 1.5rem) 0 0 0;
        padding: clamp(1.25rem, 3vw, 1.5rem) 0 0 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        position: relative;
    }
    #pricing-1183 .cs-ul:before {
        /* divider Line */
        content: "";
        width: 100%;
        height: 1px;
        background: linear-gradient(
            90deg,
            rgba(232, 232, 232, 0.2) 0%,
            #e8e8e8 53.78%,
            rgba(232, 232, 232, 0.2) 100%
        );
        opacity: 1;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
    }
    #pricing-1183 .cs-li {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        list-style: none;
        line-height: 1.5em;
        width: 100%;
        margin: 0;
        padding: 0;
        color: var(--bodyTextColor);
        display: flex;
        justify-content: space-between;
        /* push everything to the top so if the li goes to two lines the icon stays at the top */
        align-items: flex-start;
        gap: 1rem;
    }
    #pricing-1183 .cs-li.cs-disabled {
        opacity: 0.5;
    }
    #pricing-1183 .cs-li.cs-disabled .cs-icon {
        filter: grayscale(1) brightness(300%);
    }
    #pricing-1183 .cs-icon {
        width: 1.125rem;
        height: auto;
        display: block;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #pricing-1183 .cs-container {
        max-width: 80rem;
    }
    #pricing-1183 .cs-card-group {
        flex-direction: row;
        justify-content: center;
        align-items: stretch;
        flex-wrap: nowrap;
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cs-contact-490 {
    padding: var(--sectionPadding);
  }
  #cs-contact-490 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 3rem;
  }
  #cs-contact-490 .cs-content {
    max-width: 32.625rem;
    text-align: left;
  }
  #cs-contact-490 .cs-text {
    /* 16px - 48px */
    margin: 0 0 clamp(1rem, 4.4vw, 3rem) 0;
  }
  #cs-contact-490 .cs-header {
    /* 13px - 16px */
    font-size: clamp(0.8125rem, 1.5vw, 1rem);
    line-height: 1.2em;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin: 0 0 1rem 0;
    color: #b4b2c7;
    display: block;
  }
  #cs-contact-490 .cs-link {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    text-decoration: none;
    line-height: 1.5em;
    font-weight: 700;
    /* 16px - 32px */
    margin: 0 0 clamp(1rem, 2.5vw, 2rem);
    color: var(--headerColor);
    display: block;
  }
  #cs-contact-490 .cs-link:hover {
    text-decoration: underline;
  }
  #cs-contact-490 .cs-link:last-of-type {
    margin-bottom: 0;
  }
  #cs-contact-490 .cs-social {
    /* 32px - 80px */
    margin-top: clamp(2rem, 6vw, 5rem);
    display: inline-flex;
    justify-content: flex-start;
    gap: 0.75em;
  }
  #cs-contact-490 .cs-social-link {
    /* 32px - 52px */
    width: clamp(2rem, 4vw, 3.25rem);
    height: clamp(2rem, 4vw, 3.25rem);
    background-color: #4e4b66;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    transition: transform 0.3s, background-color 0.3s;
  }
  #cs-contact-490 .cs-social-link:hover {
    background-color: var(--primary);
    transform: translateY(-0.1875rem);
  }
  #cs-contact-490 .cs-social-img {
    /* 14px - 24px */
    height: clamp(0.875rem, 2vw, 1.5rem);
    width: auto;
    display: block;
  }
  #cs-contact-490 #cs-form-490 {
    width: 100%;
    max-width: 40.625rem;
    /* 32px - 40px */
    margin-bottom: clamp(2rem, 5.3vw, 2.5rem);
    /* 20px - 40px */
    padding: clamp(1.25rem, 4.5vw, 2.5rem);
    /* prevents padding from affecting width and height */
    box-sizing: border-box;
    border: 1px solid #dad9e3;
    border-radius: 1rem;
  }
  #cs-contact-490 .cs-label {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.3vw, 1rem);
    line-height: 1.5em;
    font-weight: 700;
    /* 16px - 20px */
    margin-bottom: clamp(1rem, 1em, 1.25rem);
    color: var(--headerColor);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
  }
  #cs-contact-490 .cs-label-message {
    /* 32px - 40px */
    margin-bottom: clamp(2rem, 4.5vw, 2.5rem);
  }
  #cs-contact-490 .cs-input,
  #cs-contact-490 textarea {
    font-size: 1rem;
    width: 100%;
    height: 4rem;
    margin-top: 0.25rem;
    padding-left: 1.25rem;
    /* set transparent border so on hover border doesn't make it glitch */
    border: 1px solid transparent;
    border-bottom: 1px solid #b4b2c7;
    /* prevents border & padding from affecting height */
    box-sizing: border-box;
    transition: border 0.3s;
  }
  #cs-contact-490 .cs-input:hover,
  #cs-contact-490 textarea:hover {
    border: 1px solid var(--primary);
  }
  #cs-contact-490 .cs-input::placeholder,
  #cs-contact-490 textarea::placeholder {
    color: #7d799c;
  }
  #cs-contact-490 textarea {
    font-family: inherit;
    margin: 0;
    padding-top: 1.25rem;
    min-height: 7.5rem;
  }
  #cs-contact-490 .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;
    width: 100%;
    color: #fff;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border: none;
    border-radius: 0.5rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #cs-contact-490 .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.5rem;
    transition: width 0.3s;
  }
  #cs-contact-490 .cs-button-solid:hover {
    cursor: pointer;
  }
  #cs-contact-490 .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* Tablet - 700px */
@media only screen and (min-width: 43.75rem) {
  #cs-contact-490 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
  }
  #cs-contact-490 .cs-content {
    width: 40%;
    /* pushes it to the right */
    order: 2;
    flex: none;
  }
  #cs-contact-490 #cs-form-490 {
    margin: 0;
  }
}
                                

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #cs-footer-269 {
        /* 60px - 100px top and bottom */
        padding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
        background-color: #1a1a1a;
        /* Navigation Links */
        /* Contact Links */
    }
    #cs-footer-269 .cs-container {
        width: 100%;
        /* reset on tablet */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        /* 68px - 100px */
        column-gap: clamp(4.25rem, calc(10%), 6.25rem);
    }
    #cs-footer-269 .cs-logo-group {
        /* takes up all the space, lets the other ul's wrap below it */
        width: 100%;
        position: relative;
    }
    #cs-footer-269 .cs-logo {
        /* 210px - 240px */
        width: clamp(13.125rem, 8vw, 15rem);
        height: auto;
        display: block;
        /* 28px - 44px */
        margin-bottom: clamp(1.75rem, 4.17vw, 2.75rem);
    }
    #cs-footer-269 .cs-logo-img {
        width: 100%;
        height: auto;
    }
    #cs-footer-269 .cs-text {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 2.5vw, 1rem);
        line-height: 1.5em;
        margin: 0;
        margin-bottom: 2rem;
        /* changes to 305px at desktop */
        max-width: 33.75rem;
        color: var(--bodyTextColorWhite);
    }
    #cs-footer-269 .cs-nav {
        padding: 0;
        margin: 0;
    }
    #cs-footer-269 .cs-nav-li {
        list-style: none;
        line-height: 1.5em;
        margin-bottom: 0.5rem;
    }
    #cs-footer-269 .cs-nav-li:last-of-type {
        margin-bottom: 0;
    }
    #cs-footer-269 .cs-header {
        font-size: 1rem;
        line-height: 1.5em;
        font-weight: 700;
        margin-bottom: 0.875rem;
        color: var(--bodyTextColorWhite);
        position: relative;
        display: block;
    }
    #cs-footer-269 .cs-nav-link {
        font-size: 1rem;
        text-decoration: none;
        line-height: 1.5em;
        color: var(--bodyTextColorWhite);
        position: relative;
    }
    #cs-footer-269 .cs-nav-link:before {
        /* underline */
        content: "";
        width: 0%;
        height: 0.125rem;
        /* current color of the parent */
        background: currentColor;
        opacity: 1;
        position: absolute;
        display: block;
        bottom: -0.125rem;
        left: 0;
        transition: width 0.3s;
    }
    #cs-footer-269 .cs-nav-link:hover:before {
        width: 100%;
    }
    #cs-footer-269 .cs-contact {
        margin: 0;
        padding: 0;
        width: auto;
        display: flex;
        flex-direction: column;
        align-self: stretch;
    }
    #cs-footer-269 .cs-contact-li {
        list-style: none;
        margin-bottom: 0rem;
    }
    #cs-footer-269 .cs-contact-li:last-of-type {
        margin-bottom: 0;
    }
    #cs-footer-269 .cs-contact-link {
        font-size: 1rem;
        text-decoration: none;
        line-height: 1.5em;
        text-align: left;
        color: var(--bodyTextColorWhite);
        display: inline-block;
    }
    #cs-footer-269 .cs-contact-link:hover {
        text-decoration: underline;
    }
    #cs-footer-269 .cs-address {
        font-size: 1rem;
        margin-bottom: 1.25rem;
    }
    #cs-footer-269 .cs-social-group {
        /* pushes away from the other flex items */
        margin-top: auto;
        margin-left: auto;
    }
    #cs-footer-269 .cs-social {
        display: inline-flex;
        justify-content: flex-start;
        gap: 0.75rem;
    }
    #cs-footer-269 .cs-social-link {
        width: 1.5rem;
        height: 1.5rem;
        background-color: #4e4b66;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 1;
        transition:
            transform 0.3s,
            background-color 0.3s;
    }
    #cs-footer-269 .cs-social-link:hover {
        background-color: var(--primary);
        transform: translateY(-0.1875rem);
    }
    #cs-footer-269 .cs-social-img {
        height: 0.8125rem;
        width: auto;
        display: block;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #cs-footer-269 .cs-container {
        max-width: 80rem;
        row-gap: 0;
    }
    #cs-footer-269 .cs-logo-group {
        width: auto;
        /* pushes everything to the right of it as far as possible in a flexbox */
        margin-right: auto;
    }
    #cs-footer-269 .cs-text {
        width: 80%;
        max-width: 19.0625rem;
        margin: 0;
    }
    #cs-footer-269 .cs-nav,
    #cs-footer-269 .cs-contact {
        /* 8px - 12px */
        margin-top: clamp(0.5rem, 1.2vw, 0.75rem);
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #why-choose-892 {
        /* Centers Button */
        text-align: center;
        padding: var(--sectionPadding);
        /* prevents the arrow from causing an overflow */
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    #why-choose-892 .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;
    }
    #why-choose-892 .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;
    }
    #why-choose-892 .cs-topper {
        font-size: var(--topperFontSize);
        line-height: 1.2em;
        text-transform: uppercase;
        text-align: inherit;
        letter-spacing: 0.1em;
        font-weight: 700;
        color: var(--primary);
        margin-bottom: 0.25rem;
        display: block;
    }
    #why-choose-892 .cs-title {
        font-size: var(--headerFontSize);
        font-weight: 900;
        line-height: 1.2em;
        text-align: inherit;
        max-width: 43.75rem;
        margin: 0 0 1rem 0;
        color: var(--headerColor);
        position: relative;
    }
    #why-choose-892 .cs-text {
        font-size: var(--bodyFontSize);
        line-height: 1.5em;
        text-align: inherit;
        width: 100%;
        max-width: 40.625rem;
        margin: 0;
        color: var(--bodyTextColor);
    }
    #why-choose-892 .cs-text {
        max-width: 62.5rem;
    }
    #why-choose-892 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #fff;
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--primary);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #why-choose-892 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #why-choose-892 .cs-button-solid:hover:before {
        width: 100%;
    }
    #why-choose-892 .cs-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        /* 16px - 20px */
        gap: clamp(1rem, 2vw, 1.25rem);
    }
    #why-choose-892 .cs-item {
        width: 100%;
        text-align: left;
        list-style: none;
        /* 20px - 32px */
        padding: clamp(1.25rem, 2.3vw, 2rem);
        background-color: blue;
        border-radius: 1rem;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        grid-column: span 6;
        position: relative;
        z-index: 1;
    }
    #why-choose-892 .cs-icon {
        width: 3rem;
        height: auto;
        margin: 0 0 1.25rem 0;
        display: block;
    }
    #why-choose-892 .cs-h3 {
        font-size: 1.25rem;
        line-height: 1.5em;
        margin: 0 0 0.75rem 0;
        color: var(--headerColor);
        transition: color 0.3s;
    }
    #why-choose-892 .cs-item-text {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        margin: 0;
        color: white;
        transition: color 0.3s;
    }
    #why-choose-892 .cs-floater {
        width: 21.9375rem;
        height: auto;
        display: none;
        position: absolute;
        top: -13.75rem;
        right: -3.75rem;
        transform: rotate(-66deg);
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #why-choose-892 .cs-container {
        max-width: 80rem;
    }
    #why-choose-892 .cs-item {
        grid-column: span 2;
    }
    #why-choose-892 .cs-floater {
        display: block;
    }
}