/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) 
{
  body.cs-open 
  {
    overflow: hidden;
  }
  #cs-navigation 
  {
    width: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: fixed;
    z-index: 10000;
  }
  #cs-navigation:before 
  {
    content: "";
    width: 100%;
    height: 0vh;
    background: rgba(0, 0, 0, 0.6);
    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-container 
  {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  #cs-navigation .cs-logo 
  {
    width: 40%;
    max-width: 9.125rem;
    height: 100%;
    margin: 0 auto 0 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
  }
  #cs-navigation .cs-logo img 
  {
    width: 100%;
    height: 100%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
  }
  #cs-navigation .cs-toggle 
  {
    /* 44px - 48px */
    width: clamp(2.75rem, 6vw, 3rem);
    height: clamp(2.75rem, 6vw, 3rem);
    margin: 0 0 0 auto;
    background-color: transparent;
    border: none;
    border-radius: 0.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #cs-navigation .cs-active .cs-line1 
  {
    top: 50%;
    transform: translate(-50%, -50%) rotate(225deg);
  }
  #cs-navigation .cs-active .cs-line2 
  {
    top: 50%;
    transform: 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);
    /* 14px - 16px */
    height: clamp(0.875rem, 1.5vw, 1rem);
    position: relative;
  }
  #cs-navigation .cs-line 
  {
    width: 100%;
    height: 2px;
    background-color: #1a1a1a;
    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-ul-wrapper 
  {
    width: 100%;
    height: auto;
    padding-bottom: 2.4em;
    background-color: #fff;
    box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: -1;
    overflow: hidden;
    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;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1.25rem;
    overflow: auto;
  }
  #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;
    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:before 
  {
    display: block;
  }
  #cs-navigation .cs-button-solid 
  {
    display: none;
  }
}
/*-- -------------------------- -->
<---     Navigation Dropdown    -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) 
{
  #cs-navigation .cs-li 
  {
    text-align: center;
    width: 100%;
    display: block;
  }
  #cs-navigation .cs-dropdown 
  {
    color: var(--bodyTextColorWhite);
    position: relative;
  }
  #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);
    opacity: 0;
    display: flex;
    visibility: hidden;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    overflow: hidden;
    transition: padding 0.3s, margin 0.3s, height 0.3s, opacity 0.3s, visibility 0.3s;
  }
  #cs-navigation .cs-drop-li 
  {
    list-style: none;
  }
  #cs-navigation .cs-li-link.cs-drop-link 
  {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 2vw, 1.25rem);
    color: #fff;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) 
{
  #cs-navigation .cs-dropdown 
  {
    position: relative;
  }
  #cs-navigation .cs-dropdown:hover, #cs-navigation .cs-dropdown:focus-within 
  {
    cursor: pointer;
  }
  #cs-navigation .cs-dropdown:hover .cs-drop-ul, #cs-navigation .cs-dropdown:focus-within .cs-drop-ul 
  {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1);
  }
  #cs-navigation .cs-dropdown:hover .cs-drop-li, #cs-navigation .cs-dropdown:focus-within .cs-drop-li 
  {
    opacity: 1;
    transform: translateY(0);
  }
  #cs-navigation .cs-drop-icon 
  {
    width: 0.9375rem;
    height: auto;
    display: inline-block;
  }
  #cs-navigation .cs-drop-ul 
  {
    min-width: 12.5rem;
    margin: 0;
    padding: 0;
    background-color: #fff;
    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: 100%;
    z-index: -100;
    overflow: hidden;
    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;
    color: var(--bodyTextColor);
    opacity: 0;
    display: block;
    transform: translateY(-0.625rem);
    transition: opacity 0.6s, transform 0.6s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(1) 
  {
    transition-delay: 0.05s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(2) 
  {
    transition-delay: 0.1s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(3) 
  {
    transition-delay: 0.15s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(4) 
  {
    transition-delay: 0.2s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(5) 
  {
    transition-delay: 0.25s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(6) 
  {
    transition-delay: 0.3s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(7) 
  {
    transition-delay: 0.35s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(8) 
  {
    transition-delay: 0.4s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(9) 
  {
    transition-delay: 0.45s;
  }
  #cs-navigation .cs-li-link.cs-drop-link 
  {
    font-size: 1rem;
    line-height: 1.5em;
    text-decoration: none;
    white-space: nowrap;
    width: 100%;
    /* prevents padding and border 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, #cs-navigation .cs-li-link.cs-drop-link:focus 
  {
    background-color: #f7f7f7;
    outline: none;
  }
  #cs-navigation .cs-li-link.cs-drop-link:before 
  {
    display: none;
  }
}
/*-- -------------------------- -->
<---     Desktop Navigation     -->
<--- -------------------------- -*/
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) 
{
  #cs-navigation 
  {
    width: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0 1rem;
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: fixed;
    z-index: 10000;
  }
  #cs-navigation .cs-container 
  {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
  }
  #cs-navigation .cs-toggle 
  {
    display: none;
  }
  #cs-navigation .cs-logo 
  {
    width: 18.4%;
    max-width: 21.875rem;
    height: 6.25rem;
    /* margin-right auto pushes everything away from it to the right */
    margin: 0 auto 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
  }
  #cs-navigation .cs-logo img 
  {
    width: 100%;
    height: 100%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
  }
  #cs-navigation .cs-ul 
  {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* 20px - 36px */
    gap: clamp(1.25rem, 2.6vw, 2.25rem);
  }
  #cs-navigation .cs-li 
  {
    list-style: none;
    padding: 2rem 0;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #cs-navigation .cs-li-link 
  {
    /* 14px - 16px */
    font-size: clamp(1rem, 1.25vw, 1.2rem);
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
    position: relative;
  }
  #cs-navigation .cs-li-link:hover:before 
  {
    width: 100%;
  }
  #cs-navigation .cs-li-link.cs-active:before 
  {
    width: 100%;
  }
  #cs-navigation .cs-li-link:before 
  {
    /* active state underline */
    content: "";
    width: 0%;
    height: 3px;
    background: var(--primary);
    opacity: 1;
    display: block;
    position: absolute;
    bottom: 0rem;
    left: 0;
    transition: width 0.3s;
  }
  #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;
    min-width: 11rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    color: #fff;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #cs-navigation .cs-button-solid:before 
  {
    content: "";
    width: 0%;
    height: 100%;
    background: #000;
    opacity: 1;
    border-radius: 0.25rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #cs-navigation .cs-button-solid:hover:before 
  {
    width: 100%;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) 
{
    #hero-143 
    {
        /* Centers button */
        text-align: center;
        /* 144px - 300px - leaving extra space for the navigation */
        padding: clamp(9rem, 25.95vw, 18.75rem) calc(16 / 16 * 1rem) 0;
        /* 130px - 450px */
        padding-bottom: clamp(12.125rem, 30.95vw, 28.125rem);
        position: relative;
        z-index: 1;
        /* Prevents white rectangle pseudos from overlapping the sections below */
        overflow: hidden;

        &:before 
        {
            /* Left side of the triangle */
            content: "";
            width: calc(500 / 16 * 1rem);
            /* make really long so it covers the whole screen all the way to desktop */
            height: calc(4000 / 16 * 1rem);
            background: #fff;
            opacity: 1;
            transform: rotate(-67deg);
            transform-origin: center;
            position: absolute;
            display: block;
            bottom: calc(-2235 / 16 * 1rem);
            /* this makes the right edge sit at the 50% line at all times */
            right: 50%;
            z-index: 0;
        }

        &:after 
        {
            /* Right side of the triangle */
            content: "";
            width: calc(500 / 16 * 1rem);
            height: calc(4000 / 16 * 1rem);
            background: #fff;
            opacity: 1;
            transform: rotate(67deg);
            transform-origin: center;
            position: absolute;
            display: block;
            bottom: calc(-2235 / 16 * 1rem);
            /* this makes the left edge sit at the 50% line at all times */
            left: 50%;
            z-index: 0;
        }

        .cs-background 
        {
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -2;

            &: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;
            }

            img 
            {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                object-fit: cover;
            }
        }

        .cs-container 
        {
            width: 100%;
            max-width: calc(1280 / 16 * 1rem);
            margin: auto;
        }

        .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: calc(829 / 16 * 1rem);
            /* 16px - 24px */
            margin: 0 auto clamp(1rem, 4vw, 1.5rem);
            color: #fff;
            position: relative;

            &:after 
            {
                /* Divider Line */
                content: "";
                /* 60px - 100px */
                width: clamp(3.75rem, 9.5vw, 6.25rem);
                /* 4px - 8px */
                height: clamp(0.25rem, 0.8vw, 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;
            }
        }

        .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;
        }
    }
}

/* Desktop - 1300px (To make image background parallax) */
@media only screen and (min-width: 81.25rem) 
{
    #hero-143 
    {
        background: url("assets/kitchen.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        /* makes the parallax effect */
        background-attachment: fixed;

        .cs-background 
        {
            img 
            {
                display: none;
            }
        }
    }
}

/* Dark Mode */
/*
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #hero-143 {
            &:before,
            &:after {
                background: var(--dark);
            }

            .cs-background {
                &:before {
                    opacity: 0.85;
                }
            }
        }
    }
}
*/

/* Components + Utilities */
@media only screen and (min-width: 0rem) 
{
    /* Hidden screen reader skip nav button */
    .skip 
    {
        z-index: -1111111;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
    }

    /* Buttons - can be replaced using CodeStitch's "Button" Stitches. Make sure to clear the default .cs-button-solid/outline styles from any new stitches you place. */
    .cs-button-solid 
    {
        z-index: 1;
        position: relative;
        display: inline-block;
        background-color: var(--primary);
        width: auto;
        padding: calc(16 / 16 * 1rem) calc(32 / 16 * 1rem);
        text-decoration: none;
        text-transform: uppercase;
        font-size: calc(16 / 16 * 1rem);
        line-height: calc(16 / 16 * 1em);
        font-weight: bold;
        border-radius: calc(4 / 16 * 1rem);
        overflow: hidden;

        /* Transition Properties */
        color: var(--bodyTextColorWhite);
        transition: color 0.3s;
        transition-delay: 0.1s;
        text-align: center;

        &:hover 
        {
            color: #fff;

            &:before 
            {
                width: 100%;
            }
        }

        &:before 
        {
            z-index: -1;
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            opacity: 1;
            display: block;
            background-color: #000;
            height: 100%;

            /* Transition properties */
            width: 0;
            transition: width 0.3s;
        }
    }

    .cs-button-outline 
    {
        z-index: 1;
        position: relative;
        display: inline-block;
        width: auto;
        padding: calc(16 / 16 * 1rem) calc(32 / 16 * 1rem);
        text-decoration: none;
        text-transform: uppercase;
        font-size: calc(16 / 16 * 1rem);
        line-height: calc(16 / 16 * 1em);
        font-weight: bold;
        border: 2px solid #000;

        /* Transition Properties */
        color: #000;
        transition: color 0.3s;
        transition-delay: 0.1s;
        text-align: center;

        &:hover 
        {
            color: #fff;

            &:before 
            {
                width: 100%;
            }
        }

        &:before 
        {
            z-index: -1;
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            opacity: 1;
            display: block;
            background-color: #000;
            height: 100%;

            /* Transition properties */
            width: 0;
            transition: width 0.3s;
        }
    }

    /* Utilities - small classes useful in various common situations */
    .cs-color 
    {
        color: var(--primary);
    }

    .cs-bold 
    {
        font-weight: 700;
    }

    .cs-hide-on-mobile 
    {
        display: none !important;
    }

    .cs-dark, .dark 
    {
        display: none !important;
    }

    body.dark-mode 
    {
        .cs-light,
        .light 
        {
            display: none !important;
        }

        .cs-dark, .dark 
        {
            display: block !important;
        }

        .cs-button-outline 
        {
            border-color: #fff;
            color: #fff;
        }
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) 
{
    #h-services-143 
    {
        /* 40px - 100px */
        padding: 0 calc(16 / 16 * 1em) clamp(2.5rem, 7.9vw, 6.25rem) calc(16 / 16 * 1rem);
        position: relative;
        /* give a higher z index than the hero so it can sit on top */
        z-index: 10;

        .cs-card-group 
        {
            width: 100%;
            max-width: calc(465 / 16 * 1rem);
            margin: 0 auto 0;
            /* negative margin pulls it up on top of the hero section */
            /* -46px to -76px - we're calculating whatever clamp is and multiplying by -1
            to make the value negative since clamp doesn't work with negative values */
            margin-top: calc(clamp(5rem, 13vw, 4.75rem) * -1);
            /* 40px - 60px top and bottom, 16px - 44px left & right */
            padding: clamp(2.5rem, 4.7vw, 3.75rem) clamp(1rem, 5.3vw, 2.75rem);
            box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.05);
            border-radius: calc(5 / 16 * 1rem);
            border-top: 8px solid var(--primary);
            background-color: #fff;
            /* prevents padding and border from affecting height and width */
            box-sizing: border-box;
        }

        .cs-item 
        {
            list-style: none;
            margin: 0 auto calc(32 / 16 * 1rem);
            width: 100%;
            max-width: calc(360 / 16 * 1rem);

            &:last-of-type 
            {
                margin-bottom: 0;
            }
        }

        .cs-icon 
        {
            /* 68px - 88px */
            width: clamp(4.25rem, 8.8vw, 5.5rem);
            /* 68px - 88px */
            height: clamp(4.25rem, 8.8vw, 5.5rem);
            margin: auto;
            /* 20px - 24px */
            margin-bottom: clamp(1.25rem, 5vw, 1.5rem);
            background: var(--primary);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;

            img 
            {
                /* 44px - 52px */
                width: clamp(2.75rem, 5.8vw, 3.25rem);
                height: auto;
            }
        }

        .cs-title 
        {
            font-size: calc(20 / 16 * 1rem);
            line-height: 1.2em;
            text-transform: uppercase;
            text-align: center;
            margin: 0 auto calc(8 / 16 * 1rem);
            color: var(--headerColor);
        }

        .cs-text 
        {
            font-size: calc(16 / 16 * 1rem);
            text-align: center;
            line-height: 1.5em;
            max-width: calc(360 / 16 * 1rem);
            margin: 0 auto;
            color: var(--bodyTextColor);
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) 
{
    #h-services-143 
    {
        .cs-card-group 
        {
            max-width: calc(784 / 16 * 1rem);
            /* -76px to -320px - we're calculating whatever clamp is and multiplying by -1
               to make the value negative since clamp doesn't work with negative values */
            margin-top: calc(clamp(4.75rem, 20vw, 20rem) * -1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            column-gap: calc(40 / 16 * 1rem);
        }

        .cs-item 
        {
            width: 45%;
            max-width: calc(314 / 16 * 1rem);
            &:last-of-type 
            {
                margin-bottom: calc(32 / 16 * 1rem);
            }
        }
    }
}

/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) 
{
    #h-services-143 
    {
        .cs-card-group 
        {
            max-width: calc(1280 / 16 * 1rem);
            flex-wrap: nowrap;
        }

        .cs-item 
        {
            margin: 0;
            &:last-of-type 
            {
                margin-bottom: 0;
            }
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) 
{
    body.dark-mode 
    {
        #h-services-143 
        {
            .cs-card-group 
            {
                background: var(--medium);
            }

            .cs-icon 
            {
                background: var(--darkTint);
            }

            .cs-title 
            {
                color: #fff;
            }

            .cs-text 
            {
                color: #fff;
            }
        }
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) 
{
    #RPsbs-313, #RPsbsr-313 
    {
        padding: var(--sectionPadding);

        .cs-container 
        {
            width: 100%;
            max-width: calc(1280 / 16 * 1rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 48px - 64px */
            gap: clamp(3rem, 6vw, 4rem);
        }

        .cs-content 
        {
            /* set text align to left if content needs to be left aligned */
            text-align: left;
            width: 100%;
            max-width: calc(542 / 16 * 1rem);
            display: flex;
            flex-direction: column;
            /* centers content horizontally, set to flex-start to left align */
            align-items: flex-start;
        }

        .cs-text 
        {
            margin-bottom: calc(16 / 16 * 1rem);
            &:last-of-type 
            {
                margin-bottom: calc(32 / 16 * 1rem);
            }
        }

        .cs-quote 
        {
            margin: 0 0 calc(32 / 16 * 1rem) 0;
            /* 16px - 32px */
            padding: clamp(1rem, 3vw, 2rem);
            background-color: #f7f7f7;
            border-radius: calc(16 / 16 * 1rem);
            position: relative;
        }

        .cs-quote-text 
        {
            /* 14px - 16px */
            font-size: clamp(0.875rem, 1.5vw, 1rem);
            line-height: 1.5em;
            margin: 0 0 calc(16 / 16 * 1rem);
            color: #767676;
            display: block;
        }

        .cs-name 
        {
            font-size: calc(16 / 16 * 1rem);
            line-height: 1.2em;
            text-transform: uppercase;
            font-weight: bold;
            margin: 0 0 calc(4 / 16 * 1rem);
            color: var(--headerColor);
            display: block;
        }

        .cs-job 
        {
            font-size: calc(14 / 16 * 1rem);
            line-height: 1.5em;
            color: #767676;
            display: block;
        }

        .cs-quote-icon 
        {
            /* 60px - 136px */
            width: clamp(3.75rem, 10vw, 8.5rem);
            height: auto;
            position: absolute;
            bottom: calc(0 / 16 * 1rem);
            /* 16px - 32px */
            right: clamp(1rem, 4vw, 2rem);
        }

        .cs-image-group 
        {
            /* scaling the font size with the view width */
            font-size: min(2.31vw, 0.7em);
            /* using ems so we can use font size to scale the whole section */
            width: calc(631 / 16 * 1em);
            height: calc(636 / 16 * 1em);
            position: relative;
        }

        .cs-picture 
        {
            border-radius: calc(24 / 16 * 1em);
            /* clips img tag corners */
            overflow: hidden;
            position: absolute;
            display: block;

            img 
            {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                /* makes image act like a background image */
                object-fit: cover;
            }
        }

        .cs-picture1 
        {
            width: calc(522 / 16 * 1em);
            height: calc(581 / 16 * 1em);
            left: 0;
            top: 0;
        }

        .cs-picture2 
        {
            width: calc(414 / 16 * 1em);
            height: calc(400 / 16 * 1em);
            background-color: #fff;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 40px;
            /* 6px - 12px */
            border: clamp(0.375em, 1.5vw, 0.75em) solid #fff;
            right: 0;
            bottom: 0;
        }
    }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) 
{
    #RPsbs-313, #RPsbsr-313 
    {
        .cs-container 
        {
            flex-flow: row;
            justify-content: space-between;
            gap: calc(52 / 16 * 1rem);
        }

        .cs-image-group 
        {
            font-size: min(1.2vw, 1em);
            flex: none;
        }

        .cs-content 
        {
            margin: 0;
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) 
{
    body.dark-mode 
    {
        #RPsbs-313, #RPsbsr-313 
        {
            .cs-image-group 
            {
                &:before, &:after 
                {
                    background: var(--accent);
                }
            }

            .cs-picture2 
            {
                background-color: var(--dark);
                /* 6px - 12px */
                border: clamp(0.375em, 1.5vw, 0.75em) solid var(--dark);
            }

            .cs-topper 
            {
                color: var(--primaryLight);
            }

            .cs-title, .cs-text, .cs-h3, .cs-quote-text, .cs-name 
            {
                color: var(--bodyTextColorWhite);
            }

            .cs-quote 
            {
                background-color: var(--accent);
            }

            .cs-job 
            {
                color: var(--bodyTextColorWhite);
                opacity: 0.8;
            }

            .cs-quote-icon 
            {
                opacity: 0.2;
            }
        }
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) 
{
    #RPsbsr-313 
    {
        background-color: #f7f7f7;
        .cs-picture1 
        {
            left: auto;
            right: 0;
        }

        .cs-picture2 
        {
            right: auto;
            left: 0;
        }

        .cs-quote 
        {
            background-color: rgba(0, 0, 0, 0.05);
        }
    }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) 
{
    #RPsbsr-313 
    {
        .cs-image-group 
        {
            /* sends it to the right in the 2nd position */
            order: 2;
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) 
{
    body.dark-mode 
    {
        #RPsbsr-313 
        {
            background-color: rgba(0, 0, 0, 0.2);
        }
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) 
{
    #gallery-48 
    {
        padding: var(--sectionPadding);
        position: relative;

        .cs-container 
        {
            width: 100%;
            max-width: calc(1280 / 16 * 1rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 48px - 64px */
            gap: clamp(3rem, 6vw, 4rem);
        }

        .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;
        }

        .cs-title 
        {
            margin: 0;
            max-width: 20ch;
        }

        .cs-image-group 
        {
            /* used rem so it doesn't scale with the font size of on parent */
            font-size: min(1.1vw, 1em);
            width: 100%;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            /* 8px - 20px */
            gap: clamp(0.5rem, 2vw, 1.25rem);
        }

        .cs-row 
        {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            /* 8px - 20px */
            gap: clamp(0.5rem, 2vw, 1.25rem);
        }

        .cs-picture 
        {
            width: 100%;
            position: relative;
            display: block;
            border-radius: calc(8 / 16 * 1rem);
            overflow: hidden;

            img 
            {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                object-fit: cover;
            }
        }

        .cs-row-1 
        {
            .cs-picture-1 
            {
                height: calc(567 / 16 * 1em);
            }

            .cs-picture-2 
            {
                height: calc(629 / 16 * 1em);
            }

            .cs-picture-3 
            {
                height: calc(512 / 16 * 1em);
            }
        }

        .cs-row-2 
        {
            .cs-picture-1 
            {
                height: calc(492 / 16 * 1em);
            }

            .cs-picture-2 
            {
                height: calc(517 / 16 * 1em);
            }

            .cs-picture-3 
            {
                height: calc(629 / 16 * 1em);
            }
        }

        .cs-row-3 
        {
            .cs-picture-1 
            {
                height: calc(625 / 16 * 1em);
            }

            .cs-picture-2 
            {
                height: calc(452 / 16 * 1em);
            }

            .cs-picture-3 
            {
                height: calc(629 / 16 * 1em);
            }
        }
    }
}

/* Dark mode */
@media only screen and (min-width: 0rem) 
{
    body.dark-mode 
    {
        #gallery-48 
        {
            .cs-title 
            {
                color: var(--bodyTextColorWhite);
            }
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) 
{
    #reviews-67 
    {
        .cs-card-group 
        {
            flex-direction: row;
            justify-content: space-between;
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) 
{
    body.dark-mode 
    {
        #reviews-67 
        {
            .cs-title, .cs-text, .cs-item-text, .cs-name 
            {
                color: var(--bodyTextColorWhite);
            }

            .cs-item 
            {
                background: rgba(0, 0, 0, 0.2);
            }

            .cs-desc 
            {
                color: var(--primaryLight);
            }
        }
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) 
{
    #cta-51 
    {
        padding: var(--sectionPadding);
        position: relative;

        .cs-container 
        {
            width: 100%;
            max-width: calc(1280 / 16 * 1rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 48px - 64px */
            gap: clamp(3rem, 6vw, 4rem);
        }

        .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;
        }

        .cs-title 
        {
            color: var(--bodyTextColorWhite);
        }

        .cs-text 
        {
            margin-bottom: calc(16 / 16 * 1rem);
            color: var(--bodyTextColorWhite);
            opacity: 0.8;
            &:last-of-type 
            {
                margin-bottom: calc(32 / 16 * 1rem);
            }
        }

        .cs-picture 
        {
            height: 100%;
            width: 100%;
            display: block;
            position: absolute;
            z-index: -1;
            top: 0;
            left: 0;
            z-index: -1;

            &:before 
            {
                /* black color overlay */
                content: "";
                position: absolute;
                display: block;
                height: 100%;
                width: 100%;
                background: #000;
                opacity: 0.8;
                top: 0;
                left: 0;
                z-index: 1;
            }

            img 
            {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                object-fit: cover;
            }
        }
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) 
{
    #cs-footer-275 
    {
        padding: var(--sectionPadding);
        background-color: #1a1a1a;

        .cs-container 
        {
            width: 100%;
            /* reset on tablet */
            max-width: calc(550 / 16 * 1rem);
            margin: auto;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            flex-wrap: wrap;
            column-gap: calc(88 / 16 * 1rem);
            row-gap: calc(32 / 16 * 1rem);
        }

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

        .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-logo-img 
        {
            width: 100%;
            height: auto;

            &.dark 
            {
                display: none;
            }
        }

        .cs-text 
        {
            color: var(--bodyTextColorWhite);
            margin-bottom: calc(16 / 16 * 1rem);
        }

        .cs-social 
        {
            display: inline-flex;
            flex-direction: column;
            justify-content: flex-start;
            gap: calc(12 / 16 * 1rem);
            position: absolute;
            top: 0;
            right: 0;
        }

        .cs-social-link 
        {
            width: calc(24 / 16 * 1rem);
            height: calc(24 / 16 * 1rem);
            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;

            &:hover 
            {
                background-color: #1a1a1a;
                transform: translateY(-0.1875rem);
            }
        }

        .cs-social-img 
        {
            height: calc(13 / 16 * 1rem);
            width: auto;
            display: block;
        }

        /* Navigation Links */
        .cs-nav 
        {
            padding: 0;
            margin: 0;
        }

        .cs-nav-li 
        {
            list-style: none;
            margin-bottom: calc(16 / 16 * 1rem);
            &:last-of-type 
            {
                margin-bottom: 0;
            }
        }

        .cs-header 
        {
            font-size: calc(16 / 16 * 1rem);
            line-height: 1.5em;
            font-weight: 700;
            color: var(--bodyTextColorWhite);
            position: relative;

            &:after 
            {
                content: "";
                width: calc(32 / 16 * 1rem);
                height: calc(4 / 16 * 1rem);
                margin: calc(16 / 16 * 1rem) auto calc(24 / 16 * 1rem) 0;
                background: var(--primary);
                opacity: 1;
                position: relative;
                display: block;
            }
        }

        .cs-department-header 
        {
            font-size: calc(16 / 16 * 1rem);
            line-height: 0em;
            font-weight: 700;
            color: var(--bodyTextColorWhite);
            position: relative;
        }

        .cs-nav-link 
        {
            font-size: calc(16 / 16 * 1rem);
            text-decoration: none;
            line-height: 1.5em;
            color: var(--bodyTextColorWhite);
            position: relative;

            &:before 
            {
                /* underline */
                content: "";
                width: 0%;
                height: calc(2 / 16 * 1rem);
                background: var(--bodyTextColorWhite);
                opacity: 1;
                position: absolute;
                display: block;
                bottom: calc(-2 / 16 * 1rem);
                left: 0;
                transition: width 0.3s;
            }

            &:hover 
            {
                &:before 
                {
                    width: 100%;
                }
            }
        }

        /* Contact Links */
        .cs-contact 
        {
            margin: 0;
            padding: 0;
            width: 35%;
        }

        .cs-contact-li 
        {
            list-style: none;
            margin-bottom: calc(0 / 16 * 1rem);
            &:last-of-type {
                margin-bottom: 0;
            }
        }

        .cs-contact-link {
            font-size: calc(16 / 16 * 1rem);
            text-decoration: none;
            line-height: 1.5em;
            text-align: left;
            color: var(--bodyTextColorWhite);
            display: inline-block;

            &:hover {
                text-decoration: underline;
            }
        }

        .cs-department-contact-link 
        {
            font-size: calc(16 / 16 * 1rem);
            text-decoration: none;
            line-height: 1.5em;
            text-align: left;
            color: var(--bodyTextColorWhite);
            display: inline-block;

            &:hover 
            {
                text-decoration: underline;
            }

            &:after 
            {
                content: "";
                width: calc(32 / 16 * 1rem);
                height: calc(4 / 16 * 1rem);
                margin: calc(16 / 16 * 1rem) auto calc(24 / 16 * 1rem) 0;
                background: var(--primary);
                opacity: 1;
                position: relative;
                display: block;
            }
        }

        .cs-address {
            font-size: calc(16 / 16 * 1rem);
            margin-bottom: calc(20 / 16 * 1rem);
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #cs-footer-275 {
        .cs-container {
            max-width: calc(1280 / 16 * 1rem);
            row-gap: 0;
        }

        .cs-contact {
            flex-direction: row;
            justify-content: space-between;
            border-top: none;
        }

        .cs-contact-li {
            margin: 0;
        }
    }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #cs-footer-275 {
        .cs-container {
            /* pushes all flex children to the top */
            align-items: flex-start;
            justify-content: flex-end;
        }

        .cs-logo-group {
            /* pushes everything to the right of it as far as possible in a flexbox */
            margin-right: auto;
            width: auto;
            max-width: calc(305 / 16 * 1rem);
        }

        .cs-text {
            width: 100%;
        }

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

        .cs-contact {
            width: auto;
        }
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #banner-310 {
        /* 144px - 252px */
        padding-top: clamp(9rem, 25vw, 15.75rem);
        /* 80px - 140px */
        padding-bottom: clamp(5rem, 13vw, 8.75rem);
        position: relative;
        z-index: 1;

        .cs-container {
            width: 100%;
            max-width: calc(1280 / 16 * 1rem);
            margin: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .cs-int-title {
            /* 39px - 49px */
            font-size: clamp(2.4375rem, 4.5vw, 3.0625rem);
            font-weight: 900;
            line-height: 1.2em;
            text-align: center;
            max-width: calc(700 / 16 * 1rem);
            margin: 0 auto calc(12 / 16 * 1rem);
            color: var(--bodyTextColorWhite);
            position: relative;
        }

        .cs-breadcrumbs {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .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;

            &:last-of-type {
                /* remove the chevron on the last list item */
                &::after {
                    display: none;
                }
            }

            &:after {
                /* chevron - added as pseudo to make adding and removing them easier */
                content: "";
                width: calc(7 / 16 * 1rem);
                height: calc(12 / 16 * 1rem);
                margin-left: calc(12 / 16 * 1rem);
                margin-right: calc(12 / 16 * 1rem);
                background: url("assets/chevron.svg");
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;
            }

            &.cs-active {
                color: var(--primaryLight);
            }
        }

        .cs-background {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            z-index: -1;

            &: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;
            }

            img {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                object-fit: cover;
            }
        }
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #reviews-67 {
        padding: var(--sectionPadding);

        .cs-container {
            width: 100%;
            max-width: calc(1280 / 16 * 1rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 48px - 64px */
            gap: clamp(3rem, 6vw, 4rem);
        }

        .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;
        }

        .cs-card-group {
            padding: 0;
            margin: 0;
            display: grid;
            column-gap: calc(20 / 16 * 1rem);
            row-gap: calc(64 / 16 * 1rem);
            width: 100%;
            grid-template-columns: repeat(12, 1fr);
        }

        .cs-item {
            grid-column: span 12;
            text-align: left;
            list-style: none;
            width: 100%;
            /* pushes up the same amount the cs-item-img overlaps the card */
            margin: calc(40 / 16 * 1rem) 0 0 0;
            /* Padding L & R - 16px - 32px */
            padding: calc(60 / 16 * 1rem) clamp(1rem, 3.2vw, 2rem) 0;
            /* 32px - 40px */
            padding-bottom: clamp(2rem, 5.4vw, 2.5rem);
            box-shadow: 0px 20px 39px 0px rgba(0, 0, 0, 0.05);
            border-radius: calc(4 / 16 * 1rem);
            background: #fff;
            position: relative;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            align-items: center;
            /* Prevents padding from affecting height & width */
            box-sizing: border-box;

            &:last-of-type {
                margin-bottom: 0;
            }
        }

        .cs-item-img {
            width: calc(80 / 16 * 1rem);
            height: calc(80 / 16 * 1rem);
            position: absolute;
            top: calc(-40 / 16 * 1rem);
        }

        .cs-item-text {
            font-size: calc(16 / 16 * 1rem);
            line-height: 1.5em;
            margin: 0 0 calc(20 / 16 * 1rem);
            padding-bottom: calc(20 / 16 * 1rem);
            color: var(--bodyTextColor);
            border-bottom: 1px solid #e8e9ec;
        }

        .cs-info {
            width: 100%;
            /* margin-top auto pushes up against the rest of the card, that way when one card has more text than the other, the reviewer info is always pushed to the bottom and lined up with the rest of them.  This ensures better responsiveness for changing content */
            margin: auto 0 0 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .cs-flex-group {
            width: 100%;
            margin: 0;
        }

        .cs-name {
            font-size: calc(16 / 16 * 1rem);
            line-height: 1.5em;
            font-weight: 700;
            width: 40%;
            margin: 0;
            display: block;
            color: var(--headerColor);
        }

        .cs-desc {
            font-size: calc(14 / 16 * 1rem);
            font-weight: 400;
            color: #7d799c;
            display: block;
        }

        .cs-item-stars {
            width: calc(96 / 16 * 1rem);
            height: calc(16 / 16 * 1rem);
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #reviews-67 {
        .cs-item {
            grid-column: span 6;
        }
    }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #reviews-67 {
        .cs-item {
            grid-column: span 4;
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #reviews-67 {
            .cs-title,
            .cs-text,
            .cs-item-text,
            .cs-name {
                color: var(--bodyTextColorWhite);
            }

            .cs-item {
                background: rgba(0, 0, 0, 0.2);
            }

            .cs-desc {
                color: var(--primaryLight);
            }
        }
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #cs-contact-265 {
        padding: var(--sectionPadding);

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

        .cs-content {
            /* set text align to left if content needs to be left aligned */
            text-align: left;
            width: 100%;
            margin: 0 0 calc(32 / 16 * 1rem) 0;
            display: flex;
            flex-direction: column;
            /* centers content horizontally, set to flex-start to left align */
            align-items: flex-start;
        }

        #cs-form-265 {
            label {
                font-size: calc(16 / 16 * 1rem);
                line-height: 1.5em;
                font-weight: 700;
                /* 12px - 20px */
                margin-bottom: clamp(0.75rem, 1.3em, 1.25rem);
                color: var(--headerColor);
                display: flex;
                justify-content: center;
                align-items: flex-start;
                flex-direction: column;
            }

            .cs-label-message {
                /* 32px - 48px */
                margin-bottom: clamp(2rem, 6.3vw, 3rem);
            }

            input,
            textarea,
            select {
                font-size: calc(16 / 16 * 1rem);
                width: 100%;
                height: calc(64 / 16 * 1rem);
                margin-top: calc(4 / 16 * 1rem);
                padding-left: calc(20 / 16 * 1rem);
                border: 1px solid #b4b2c7;
                border-radius: calc(4 / 16 * 1rem);
                /* prevents border & padding from affecting height */
                box-sizing: border-box;
                transition: border 0.3s;

                &:hover {
                    border: 1px solid var(--primary);
                }
            }

            textarea {
                font-family: inherit;
                padding-top: calc(20 / 16 * 1rem);
                min-height: calc(120 / 16 * 1rem);
            }

            .cs-button-solid {
                width: 100%;
            }
        }

        .cs-button-solid {
            font-size: calc(16 / 16 * 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: calc(150 / 16 * 1rem);
            padding: 0 calc(24 / 16 * 1rem);
            background-color: var(--primary);
            border-radius: calc(4 / 16 * 1rem);
            display: inline-block;
            position: relative;
            z-index: 1;
            /* prevents padding from adding to the width */
            box-sizing: border-box;

            &:before {
                content: "";
                position: absolute;
                height: 100%;
                width: 0%;
                background: #000;
                opacity: 1;
                top: 0;
                left: 0;
                z-index: -1;
                border-radius: calc(4 / 16 * 1rem);
                transition: width 0.3s;
            }

            &:hover {
                &:before {
                    width: 100%;
                }
            }
        }

        .cs-submit {
            width: 100%;
            border: none;
            &:hover {
                cursor: pointer;
            }
        }

        .cs-right-section {
            width: 100%;
            height: calc(320 / 16 * 1rem);
            /* 24px - 40px top & bottom */
            /* 20px - 40px left & right */
            padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem);
            /* prevents padding and border from affecting height and width */
            box-sizing: border-box;
            border-radius: calc(4 / 16 * 1rem);
            /* cuts off corners on img tag */
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-end;
            position: relative;
        }

        .cs-header {
            /* 16px - 20px */
            font-size: clamp(1rem, 3vw, 1.25rem);
            line-height: 1.2em;
            font-weight: 700;
            margin-bottom: calc(8 / 16 * 1rem);
            color: var(--bodyTextColorWhite);
            display: block;
        }

        .cs-link {
            /* 16px - 20px */
            font-size: clamp(1rem, 3vw, 1.25rem);
            line-height: 1.2em;
            text-decoration: none;
            margin-bottom: calc(20 / 16 * 1rem);
            color: var(--bodyTextColorWhite);
            display: block;
            position: relative;

            &:before {
                /* Animated underline */
                content: "";
                width: 0%;
                height: 2px;
                /* current color of the parent */
                background: currentColor;
                opacity: 1;
                position: absolute;
                display: block;
                bottom: calc(-2 / 16 * 1rem);
                left: 0;
                transition: width 0.3s;
            }

            &:hover {
                &:before {
                    width: 100%;
                }
            }

            &:last-of-type {
                margin-bottom: 0;
            }
        }

        .cs-block {
            /* sends second address line to the bottom on its own line */
            display: block;
        }

        .cs-bg-picture {
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            transition: transform 0.6s;

            &:before {
                /* background color overlay */
                content: "";
                position: absolute;
                display: block;
                height: 100%;
                width: 100%;
                background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
                top: 0;
                left: 0;
                z-index: 1;
            }

            img {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                /* Makes img tag act as a background image */
                object-fit: cover;
            }
        }

        .cc-select
        {
            background-color: transparent;
            color: var(--bodyTextColor);

            &::placeholder {
                /* lighten up the color of the text by 40%*/
                filter: brightness(1.4);
            }
        }
    }
    #cs-contact-265 #cc-cabinet-form 
    {
        display: grid;
        grid-template-columns: 1fr;   /* one column */
        gap: clamp(1rem, 2vw, 1.5rem);
    }

    /* force each label to take a full row */
    #cs-contact-265 #cc-cabinet-form label 
    {
        width: 100%;
    }

    
    input,
    textarea,
    select {
        font-size: calc(16 / 16 * 1rem);
        width: 100%;
        height: calc(64 / 16 * 1rem);
        margin-top: calc(4 / 16 * 1rem);
        padding-left: calc(20 / 16 * 1rem);
        border: 1px solid #b4b2c7;
        border-radius: calc(4 / 16 * 1rem);
        /* prevents border & padding from affecting height */
        box-sizing: border-box;
        transition: border 0.3s;
                
        &:hover {
            border: 1px solid var(--primary);
        }
    }

    #cc-cabinet-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

#cc-rooms {
  display: grid;
  gap: 1.25rem;
}

.cc-room {
  border: 1px solid #b4b2c7;
  border-radius: 0.25rem;
  padding: 1rem;
}

.cc-room-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: end;
  margin-bottom: 0.75rem;
}

.cc-remove-room {
  line-height: 2.5rem; /* match your button feel */
}

}

/* Tablet - 700px */
@media only screen and (min-width: 43.75rem) {
    #cs-contact-265 {
        .cs-container {
            max-width: calc(1280 / 16 * 1rem);
        }

        #cs-form-265 {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;

            label {
                width: 48%;
            }

            .cs-label-message {
                width: 100%;
            }
        }
    }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #cs-contact-265 {
        .cs-container {
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
            gap: calc(80 / 16 * 1rem);
        }

        .cs-left-section {
            max-width: calc(630 / 16 * 1rem);
        }

        #cs-form-265 {
            label {
                width: 100%;
            }
        }

        .cs-right-section {
            /* changes to 578px at 1300px wide */
            height: calc(686 / 16 * 1rem);
            width: 40vw;
            max-width: calc(542 / 16 * 1rem);
            /* prevents flexbox from squishing it */
            flex: none;

            &:hover {
                .cs-bg-picture {
                    transform: scale(1.1);
                }
            }
        }

        .cs-block {
            /* goes back to inline so it stays "in line" with the rest of the text */
            display: inline-block;
        }
    }
}

/* Small Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
    #cs-contact-265 {
        #cs-form-265 {
            column-gap: calc(0 / 16 * 1rem);
            label {
                width: 48%;
                max-width: calc(305 / 16 * 1rem);
            }

            .cs-label-message {
                max-width: 100%;
            }
        }

        .cs-right-section {
            height: calc(578 / 16 * 1rem);
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #cs-contact-265 {
            .cs-text,
            .cs-title {
                color: var(--bodyTextColorWhite);
            }

            #cs-form-265 {
                label,
                input,
                textarea {
                    background-color: transparent;
                    color: var(--bodyTextColorWhite);

                    &::placeholder {
                        /* lighten up the color of the text by 40%*/
                        filter: brightness(1.4);
                    }
                }
            }

            .cs-bg-picture {
                background-color: #000;

                img {
                    /* lets parent background-color bleed through and darken it */
                    opacity: 0.5;
                }
            }
        }
    }
}