Code of Stitch

Landing + Services

<!-- ============================================ -->
<!--                    Hero                      -->
<!-- ============================================ -->

<section id="hero-1618">
    <div class="cs-container">
        <div class="cs-content">
            <span class="cs-topper">
                <svg class="cs-chevron" width="49" height="15" viewBox="0 0 49 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g opacity="0.7">
                    <path d="M0.621948 7.49889L6.40262 15L10.343 15L4.56231 7.49889L10.343 -4.2492e-07L6.40262 -2.52681e-07L0.621948 7.49889Z" fill="var(--chevronColor)"/>
                    <path d="M7.62195 7.49889L13.4026 15L17.343 15L11.5623 7.49889L17.343 -4.2492e-07L13.4026 -2.52681e-07L7.62195 7.49889Z" fill="var(--chevronColor)"/>
                    <path d="M14.7789 7.49889L20.5596 15L24.5 15L18.7193 7.49889L24.5 -4.2492e-07L20.5596 -2.52681e-07L14.7789 7.49889Z" fill="var(--chevronColor)"/>
                    <path d="M22.7789 7.49889L28.5596 15L32.5 15L26.7193 7.49889L32.5 -4.2492e-07L28.5596 -2.52681e-07L22.7789 7.49889Z" fill="var(--chevronColor)"/>
                    <path d="M30.7789 7.49889L36.5596 15L40.5 15L34.7193 7.49889L40.5 -4.2492e-07L36.5596 -2.52681e-07L30.7789 7.49889Z" fill="var(--chevronColor)"/>
                    <path d="M38.7789 7.49889L44.5596 15L48.5 15L42.7193 7.49889L48.5 -4.2492e-07L44.5596 -2.52681e-07L38.7789 7.49889Z" fill="var(--chevronColor)"/>
                    </g>
                </svg>
                Plan for A secure future
                <svg class="cs-chevron" width="49" height="15" viewBox="0 0 49 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g opacity="0.7">
                    <path d="M48.3781 7.49889L42.5974 15L38.657 15L44.4377 7.49889L38.657 -4.2492e-07L42.5974 -2.52681e-07L48.3781 7.49889Z" fill="var(--chevronColor)"/>
                    <path d="M41.3781 7.49889L35.5974 15L31.657 15L37.4377 7.49889L31.657 -4.2492e-07L35.5974 -2.52681e-07L41.3781 7.49889Z" fill="var(--chevronColor)"/>
                    <path d="M34.2211 7.49889L28.4404 15L24.5 15L30.2807 7.49889L24.5 -4.2492e-07L28.4404 -2.52681e-07L34.2211 7.49889Z" fill="var(--chevronColor)"/>
                    <path d="M26.2211 7.49889L20.4404 15L16.5 15L22.2807 7.49889L16.5 -4.2492e-07L20.4404 -2.52681e-07L26.2211 7.49889Z" fill="var(--chevronColor)"/>
                    <path d="M18.2211 7.49889L12.4404 15L8.50004 15L14.2807 7.49889L8.50004 -4.2492e-07L12.4404 -2.52681e-07L18.2211 7.49889Z" fill="var(--chevronColor)"/>
                    <path d="M10.2211 7.49889L4.4404 15L0.500041 15L6.28071 7.49889L0.500042 -4.2492e-07L4.4404 -2.52681e-07L10.2211 7.49889Z" fill="var(--chevronColor)"/>
                    </g>
                </svg>
            </span>
            <h1 class="cs-title">Elevate Your Performance With Our Leading-Edge Consulting Solutions</h1>
            <a href="" class="cs-button-solid">Request Appointment</a>
        </div>
        <ul class="cs-card-group">
            <li class="cs-item">
                <img class="cs-icon" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/check-circle.svg" alt="icon" width="48" height="48">
                <h3 class="cs-h3">100% Success Rate</h3>
                <p class="cs-item-text">
                    We provide some of the finest quality, most responsive and reliable, and cost effective services and solutions.
                </p>
            </li>
            <li class="cs-item">
                <img class="cs-icon" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/speedometer.svg" alt="icon" width="48" height="48">
                <h3 class="cs-h3">Expert Legal Services</h3>
                <p class="cs-item-text">
                    We provide some of the finest quality, most responsive and reliable, and cost effective services and solutions.
                </p>
            </li>
            <li class="cs-item">
                <img class="cs-icon" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/Like.svg" alt="icon" width="48" height="48">
                <h3 class="cs-h3">Highly Recommend</h3>
                <p class="cs-item-text">
                    We provide some of the finest quality, most responsive and reliable, and cost effective services and solutions.
                </p>
            </li>
        </ul>
    </div>

    <!-- Background Image, there's a background image in the CSS for the parallax effect you'll need to change as well if you swap out our images -->
    <picture class="cs-background">
        <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/meeting7-m.jpeg">
        <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/meeting7.jpg">
        <img decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/meeting7.jpg" alt="meeting" width="2250" height="1500" aria-hidden="true">
    </picture>
</section>

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-1618 {
    padding: var(--sectionPadding);
    /* 200px - 300px - leaving extra space for the navigation */
    padding-top: clamp(12.5rem, 31.95vw, 18.75rem);
    position: relative;
    z-index: 1;
  }
  #hero-1618 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* 60px - 180px */
    gap: clamp(3.75rem, 13vw, 11.25rem);
  }
  #hero-1618 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 48.75rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #hero-1618 .cs-topper {
    /* 13px - 16px */
    font-size: clamp(0.8125rem, 1.5vw, 1rem);
    line-height: 1.2em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    color: var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    position: relative;
  }
  #hero-1618 .cs-chevron {
    --chevronColor: var(--primary);
    width: 3rem;
    height: auto;
  }
  #hero-1618 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
    font-weight: 700;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 100%;
    margin: 0 0 2.5rem 0;
    color: #fff;
    position: relative;
  }
  #hero-1618 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.95vw, 1.25rem);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    /* 464px - 622px */
    max-width: clamp(29rem, 60vw, 38.785rem);
    margin: 0 0 2.5rem 0;
    color: #fff;
  }
  #hero-1618 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    margin: 0;
    color: #fff;
    padding: 0 1.5rem;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #hero-1618 .cs-button-solid:before {
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width .3s;
  }
  #hero-1618 .cs-button-solid:hover:before {
    width: 100%;
  }
  #hero-1618 .cs-card-group {
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2.3vw, 1.25rem);
  }
  #hero-1618 .cs-item {
    width: 100%;
    text-align: left;
    list-style: none;
    margin: 0;
    /* 24px - 32px */
    padding: clamp(1.5rem, 3vw, 2rem);
    background-color: #fff;
    box-shadow: 0px 12px 80px 0px rgba(26, 26, 26, 0.08);
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    grid-column: span 12;
    grid-row: span 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    z-index: 1;
  }
  #hero-1618 .cs-icon {
    width: 3rem;
    height: auto;
    margin: 0 0 1.5rem 0;
  }
  #hero-1618 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: bold;
    text-align: inherit;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
  }
  #hero-1618 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    max-width: 28.125rem;
    margin: 0;
    padding: 0;
    color: var(--bodyTextColor);
  }
  #hero-1618 .cs-background {
    width: 100%;
    height: 55%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #hero-1618 .cs-background:before {
    /* Overlay */
    content: '';
    width: 100%;
    height: 100%;
    background: #111926;
    opacity: .8;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
    /* prevents the cursor from interacting with it */
    pointer-events: none;
  }
  #hero-1618 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    /* makes the top of the image start at the top of the parent */
    object-position: top;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-1618 {
    padding-bottom: 0;
  }
  #hero-1618 .cs-container {
    align-items: flex-start;
  }
  #hero-1618 .cs-content {
    text-align: left;
    margin-left: 0;
    align-items: flex-start;
  }
  #hero-1618 .cs-item {
    grid-column: span 4;
  }
  #hero-1618 .cs-background {
    height: 87%;
  }
  #hero-1618 .cs-background:before {
    background: linear-gradient(90deg, #111926 21.41%, rgba(17, 25, 38, 0.72) 34.98%, rgba(17, 25, 38, 0) 62.53%);
    opacity: 1;
  }
}
/* Large Desktop Parallax Effect - 100px */
@media only screen and (min-width: 100rem) {
  #hero-1618 .cs-background {
    background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/meeting7.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* creates the parallax effect */
    background-attachment: fixed;
  }
  #hero-1618 .cs-background img {
    display: none;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-1618 {
    padding: var(--sectionPadding);
    /* 200px - 300px - leaving extra space for the navigation */
    padding-top: clamp(12.5rem, 31.95vw, 18.75rem);
    position: relative;
    z-index: 1;
  }
  #hero-1618 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* 60px - 180px */
    gap: clamp(3.75rem, 13vw, 11.25rem);
  }
  #hero-1618 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 48.75rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #hero-1618 .cs-topper {
    /* 13px - 16px */
    font-size: clamp(0.8125rem, 1.5vw, 1rem);
    line-height: 1.2em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    color: var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    position: relative;
  }
  #hero-1618 .cs-chevron {
    --chevronColor: var(--primary);
    width: 3rem;
    height: auto;
  }
  #hero-1618 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
    font-weight: 700;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 100%;
    margin: 0 0 2.5rem 0;
    color: #fff;
    position: relative;
  }
  #hero-1618 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.95vw, 1.25rem);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    /* 464px - 622px */
    max-width: clamp(29rem, 60vw, 38.785rem);
    margin: 0 0 2.5rem 0;
    color: #fff;
  }
  #hero-1618 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    margin: 0;
    color: #fff;
    padding: 0 1.5rem;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #hero-1618 .cs-button-solid:before {
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width .3s;
  }
  #hero-1618 .cs-button-solid:hover:before {
    width: 100%;
  }
  #hero-1618 .cs-card-group {
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2.3vw, 1.25rem);
  }
  #hero-1618 .cs-item {
    width: 100%;
    text-align: left;
    list-style: none;
    margin: 0;
    /* 24px - 32px */
    padding: clamp(1.5rem, 3vw, 2rem);
    background-color: #fff;
    box-shadow: 0px 12px 80px 0px rgba(26, 26, 26, 0.08);
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    grid-column: span 12;
    grid-row: span 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    z-index: 1;
  }
  #hero-1618 .cs-icon {
    width: 3rem;
    height: auto;
    margin: 0 0 1.5rem 0;
  }
  #hero-1618 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: bold;
    text-align: inherit;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
  }
  #hero-1618 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    max-width: 28.125rem;
    margin: 0;
    padding: 0;
    color: var(--bodyTextColor);
  }
  #hero-1618 .cs-background {
    width: 100%;
    height: 55%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #hero-1618 .cs-background:before {
    /* Overlay */
    content: '';
    width: 100%;
    height: 100%;
    background: #111926;
    opacity: .8;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
    /* prevents the cursor from interacting with it */
    pointer-events: none;
  }
  #hero-1618 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    /* makes the top of the image start at the top of the parent */
    object-position: top;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-1618 {
    padding-bottom: 0;
  }
  #hero-1618 .cs-container {
    align-items: flex-start;
  }
  #hero-1618 .cs-content {
    text-align: left;
    margin-left: 0;
    align-items: flex-start;
  }
  #hero-1618 .cs-item {
    grid-column: span 4;
  }
  #hero-1618 .cs-background {
    height: 87%;
  }
  #hero-1618 .cs-background:before {
    background: linear-gradient(90deg, #111926 21.41%, rgba(17, 25, 38, 0.72) 34.98%, rgba(17, 25, 38, 0) 62.53%);
    opacity: 1;
  }
}
/* Large Desktop Parallax Effect - 100px */
@media only screen and (min-width: 100rem) {
  #hero-1618 .cs-background {
    background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/meeting7.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* creates the parallax effect */
    background-attachment: fixed;
  }
  #hero-1618 .cs-background img {
    display: none;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #hero-1618 .cs-item {
    background-color: var(--medium);
  }
  body.dark-mode #hero-1618 .cs-h3,
  body.dark-mode #hero-1618 .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #hero-1618 .cs-icon {
    filter: grayscale(1) brightness(1000%);
  }
  body.dark-mode #hero-1618 .cs-text {
    opacity: .8;
  }
  body.dark-mode #hero-1618 .cs-background {
    background-color: #000;
  }
  body.dark-mode #hero-1618 .cs-background img {
    opacity: .5;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #hero-1618 {
        padding: var(--sectionPadding);
	    /* 200px - 300px - leaving extra space for the navigation */
        padding-top: clamp(12.5rem, 31.95vw, 18.75rem);
        position: relative;
        z-index: 1;

        .cs-container {
            width: 100%;
            max-width: (1280/16rem);
            margin: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            /* 60px - 180px */
            gap: clamp(3.75rem, 13vw, 11.25rem);
        }

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

        .cs-topper {
            /* 13px - 16px */
            font-size: clamp(.8125rem, 1.5vw, 1rem);
            line-height: 1.2em;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-align: center;
            text-transform: uppercase;
            margin-bottom: (4/16rem);
            color: var(--primary);
            display: flex;
            justify-content: center;
            align-items: center;
            gap: (8/16rem);
            position: relative;
        }

        .cs-chevron {
            --chevronColor: var(--primary);

            width: (48/16rem);
            height: auto;
        }

        .cs-title {
            /* 39px - 61px */
            font-size: clamp(2.4375rem, 6.40vw, 3.8125rem);
            font-weight: 700;
            line-height: 1.2em;
            text-align: inherit;
            max-width: 100%;
            margin: 0 0 (40/16rem) 0;
            color: #fff;
            position: relative;
        }

        .cs-text {
            /* 16px - 20px */
            font-size: clamp( 1rem,1.95vw, 1.25rem);
            line-height: 1.5em;
            text-align: inherit;
            width: 100%;
            /* 464px - 622px */
            max-width: clamp(29rem, 60vw, 38.785rem);
            margin: 0 0 (40/16rem) 0;
            color: #fff;
        }

        .cs-button-solid {
            font-size: (16/16rem);
            /* 46px - 56px */
            line-height: clamp(2.875rem, 5.5vw, 3.5rem);
            text-decoration: none;
	    	font-weight: 700;
            margin: 0;
            color: #fff;
            padding: 0 (24/16rem);
            background-color: var(--primary);
            display: inline-block;
            position: relative;
            z-index: 1;

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

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

        .cs-card-group {
            margin: 0;
            padding: 0;
            width: 100%;
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            /* 16px - 20px */
            gap: clamp(1rem, 2.3vw, 1.25rem);
        }

        .cs-item {
            width: 100%;
            text-align: left;
            list-style: none;
            margin:0;
            /* 24px - 32px */
            padding: clamp(1.5rem, 3vw, 2rem);
            background-color: #fff;
            box-shadow: 0px 12px 80px 0px rgba(26, 26, 26, 0.08);
            /* prevents padding from affecting height and width */
            box-sizing: border-box;
            grid-column: span 12;
            grid-row: span 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            position: relative;
            z-index: 1;
        }
        .cs-icon {
            width: (48/16rem);
            height: auto;
            margin: 0 0 (24/16rem) 0;
        }

        .cs-h3 {
            /* 20px - 25px */
            font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
            line-height: 1.2em;
            font-weight: bold;
            text-align: inherit;
            margin: 0 0 (16/16rem) 0;
            color: var(--headerColor);
        }

        .cs-item-text {
            /* 14px - 16px */
            font-size: clamp(.875rem, 1.5vw, 1rem);
            line-height: 1.5em;
            max-width: (450/16rem);
            margin: 0;
            padding: 0;
            color: var(--bodyTextColor);
        }

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

            &:before {
                /* Overlay */
                content: '';
                width: 100%;
                height: 100%;
                background: #111926;
                opacity: .8;
                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;
                /* makes the top of the image start at the top of the parent */
                object-position: top;
            }
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #hero-1618 {
        padding-bottom: 0;
        .cs-container {
            align-items: flex-start;
        }

        .cs-content {
            text-align: left;
            margin-left: 0;
            align-items: flex-start;
        }

        .cs-item {
            grid-column: span 4;
        }

        .cs-background {
            height:87%;
            &:before {
                background: linear-gradient(90deg, #111926 21.41%, rgba(17, 25, 38, 0.72) 34.98%, rgba(17, 25, 38, 0.00) 62.53%);
                opacity: 1;
            }
        }
    }
}
                                
/* Large Desktop Parallax Effect - 100px */
@media only screen and (min-width: 100rem) {
    #hero-1618 {
        .cs-background {
            background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/meeting7.jpg");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            /* creates the parallax effect */
            background-attachment: fixed;
            img {
                display: none;
            }
        }
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #hero-1618 {
        padding: var(--sectionPadding);
	    /* 200px - 300px - leaving extra space for the navigation */
        padding-top: clamp(12.5rem, 31.95vw, 18.75rem);
        position: relative;
        z-index: 1;

        .cs-container {
            width: 100%;
            max-width: (1280/16rem);
            margin: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            /* 60px - 180px */
            gap: clamp(3.75rem, 13vw, 11.25rem);
        }

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

        .cs-topper {
            /* 13px - 16px */
            font-size: clamp(.8125rem, 1.5vw, 1rem);
            line-height: 1.2em;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-align: center;
            text-transform: uppercase;
            margin-bottom: (4/16rem);
            color: var(--primary);
            display: flex;
            justify-content: center;
            align-items: center;
            gap: (8/16rem);
            position: relative;
        }

        .cs-chevron {
            --chevronColor: var(--primary);

            width: (48/16rem);
            height: auto;
        }

        .cs-title {
            /* 39px - 61px */
            font-size: clamp(2.4375rem, 6.40vw, 3.8125rem);
            font-weight: 700;
            line-height: 1.2em;
            text-align: inherit;
            max-width: 100%;
            margin: 0 0 (40/16rem) 0;
            color: #fff;
            position: relative;
        }

        .cs-text {
            /* 16px - 20px */
            font-size: clamp( 1rem,1.95vw, 1.25rem);
            line-height: 1.5em;
            text-align: inherit;
            width: 100%;
            /* 464px - 622px */
            max-width: clamp(29rem, 60vw, 38.785rem);
            margin: 0 0 (40/16rem) 0;
            color: #fff;
        }

        .cs-button-solid {
            font-size: (16/16rem);
            /* 46px - 56px */
            line-height: clamp(2.875rem, 5.5vw, 3.5rem);
            text-decoration: none;
	    	font-weight: 700;
            margin: 0;
            color: #fff;
            padding: 0 (24/16rem);
            background-color: var(--primary);
            display: inline-block;
            position: relative;
            z-index: 1;

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

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

        .cs-card-group {
            margin: 0;
            padding: 0;
            width: 100%;
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            /* 16px - 20px */
            gap: clamp(1rem, 2.3vw, 1.25rem);
        }

        .cs-item {
            width: 100%;
            text-align: left;
            list-style: none;
            margin:0;
            /* 24px - 32px */
            padding: clamp(1.5rem, 3vw, 2rem);
            background-color: #fff;
            box-shadow: 0px 12px 80px 0px rgba(26, 26, 26, 0.08);
            /* prevents padding from affecting height and width */
            box-sizing: border-box;
            grid-column: span 12;
            grid-row: span 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            position: relative;
            z-index: 1;
        }
        .cs-icon {
            width: (48/16rem);
            height: auto;
            margin: 0 0 (24/16rem) 0;
        }

        .cs-h3 {
            /* 20px - 25px */
            font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
            line-height: 1.2em;
            font-weight: bold;
            text-align: inherit;
            margin: 0 0 (16/16rem) 0;
            color: var(--headerColor);
        }

        .cs-item-text {
            /* 14px - 16px */
            font-size: clamp(.875rem, 1.5vw, 1rem);
            line-height: 1.5em;
            max-width: (450/16rem);
            margin: 0;
            padding: 0;
            color: var(--bodyTextColor);
        }

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

            &:before {
                /* Overlay */
                content: '';
                width: 100%;
                height: 100%;
                background: #111926;
                opacity: .8;
                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;
                /* makes the top of the image start at the top of the parent */
                object-position: top;
            }
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #hero-1618 {
        padding-bottom: 0;
        .cs-container {
            align-items: flex-start;
        }

        .cs-content {
            text-align: left;
            margin-left: 0;
            align-items: flex-start;
        }

        .cs-item {
            grid-column: span 4;
        }

        .cs-background {
            height:87%;
            &:before {
                background: linear-gradient(90deg, #111926 21.41%, rgba(17, 25, 38, 0.72) 34.98%, rgba(17, 25, 38, 0.00) 62.53%);
                opacity: 1;
            }
        }
    }
}
                                
/* Large Desktop Parallax Effect - 100px */
@media only screen and (min-width: 100rem) {
    #hero-1618 {
        .cs-background {
            background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/meeting7.jpg");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            /* creates the parallax effect */
            background-attachment: fixed;
            img {
                display: none;
            }
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #hero-1618 {
            .cs-item {
                background-color: var(--medium);
            }

            .cs-h3, .cs-item-text {
                color: var(--bodyTextColorWhite);
            }

            .cs-icon {
                filter: grayscale(1) brightness(1000%);
            }

            .cs-text {
                opacity: .8;
            }

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

                img {
                    opacity: .5;
                }
            }
        }
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #hero-1618 {
        padding: var(--sectionPadding);
        /* 200px - 300px - leaving extra space for the navigation */
        padding-top: clamp(12.5rem, 31.95vw, 18.75rem);
        position: relative;
        z-index: 1;

        .cs-container {
            width: 100%;
            max-width: calc(1280 / 16 * 1rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            /* 60px - 180px */
            gap: clamp(3.75rem, 13vw, 11.25rem);
        }

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

        .cs-topper {
            /* 13px - 16px */
            font-size: clamp(0.8125rem, 1.5vw, 1rem);
            font-weight: 700;
            line-height: 1.2em;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: calc(4 / 16 * 1rem);
            color: var(--primary);
            display: flex;
            justify-content: center;
            align-items: center;
            gap: calc(8 / 16 * 1rem);
            position: relative;
        }

        .cs-chevron {
            --chevronColor: var(--primary);

            width: calc(48 / 16 * 1rem);
            height: auto;
        }

        .cs-title {
            /* 39px - 61px */
            font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
            font-weight: 700;
            line-height: 1.2em;
            text-align: inherit;
            max-width: 100%;
            margin: 0 0 calc(40 / 16 * 1rem) 0;
            color: #fff;
            position: relative;
        }

        .cs-text {
            /* 16px - 20px */
            font-size: clamp(1rem, 1.95vw, 1.25rem);
            line-height: 1.5em;
            text-align: inherit;
            width: 100%;
            /* 464px - 622px */
            max-width: clamp(29rem, 60vw, 38.785rem);
            margin: 0 0 calc(40 / 16 * 1rem) 0;
            color: #fff;
        }

        .cs-button-solid {
            font-size: calc(16 / 16 * 1rem);
            font-weight: 700;
            /* 46px - 56px */
            line-height: clamp(2.875rem, 5.5vw, 3.5rem);
            text-decoration: none;
            margin: 0;
            padding: 0 calc(24 / 16 * 1rem);
            color: #fff;
            background-color: var(--primary);
            display: inline-block;
            position: relative;
            z-index: 1;

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

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

        .cs-card-group {
            width: 100%;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            /* 16px - 20px */
            gap: clamp(1rem, 2.3vw, 1.25rem);
        }

        .cs-item {
            text-align: left;
            list-style: none;
            width: 100%;
            margin: 0;
            /* prevents padding from affecting height and width */
            box-sizing: border-box;
            /* 24px - 32px */
            padding: clamp(1.5rem, 3vw, 2rem);
            background-color: #fff;
            box-shadow: 0px 12px 80px 0px rgba(26, 26, 26, 0.08);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            grid-column: span 12;
            grid-row: span 1;
            position: relative;
            z-index: 1;
        }
        .cs-icon {
            width: calc(48 / 16 * 1rem);
            height: auto;
            margin: 0 0 calc(24 / 16 * 1rem) 0;
        }

        .cs-h3 {
            /* 20px - 25px */
            font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
            font-weight: bold;
            line-height: 1.2em;
            text-align: inherit;
            margin: 0 0 calc(16 / 16 * 1rem) 0;
            color: var(--headerColor);
        }

        .cs-item-text {
            /* 14px - 16px */
            font-size: clamp(0.875rem, 1.5vw, 1rem);
            line-height: 1.5em;
            max-width: calc(450 / 16 * 1rem);
            margin: 0;
            padding: 0;
            color: var(--bodyTextColor);
        }

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

            &:before {
                /* Overlay */
                content: "";
                width: 100%;
                height: 100%;
                background: #111926;
                opacity: 0.8;
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
                /* prevents the cursor from interacting with it */
                pointer-events: none;
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                /* makes the top of the image start at the top of the parent */
                object-position: top;
                position: absolute;
                top: 0;
                left: 0;
            }
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #hero-1618 {
        padding-bottom: 0;
        .cs-container {
            align-items: flex-start;
        }

        .cs-content {
            text-align: left;
            margin-left: 0;
            align-items: flex-start;
        }

        .cs-item {
            grid-column: span 4;
        }

        .cs-background {
            height: 87%;
            &:before {
                background: linear-gradient(
                    90deg,
                    #111926 21.41%,
                    rgba(17, 25, 38, 0.72) 34.98%,
                    rgba(17, 25, 38, 0) 62.53%
                );
                opacity: 1;
            }
        }
    }
}

/* Large Desktop Parallax Effect - 100px */
@media only screen and (min-width: 100rem) {
    #hero-1618 {
        .cs-background {
            background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/meeting7.jpg");
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            /* creates the parallax effect */
            background-attachment: fixed;
            img {
                display: none;
            }
        }
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #hero-1618 {
        padding: var(--sectionPadding);
        /* 200px - 300px - leaving extra space for the navigation */
        padding-top: clamp(12.5rem, 31.95vw, 18.75rem);
        position: relative;
        z-index: 1;

        .cs-container {
            width: 100%;
            max-width: calc(1280 / 16 * 1rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            /* 60px - 180px */
            gap: clamp(3.75rem, 13vw, 11.25rem);
        }

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

        .cs-topper {
            /* 13px - 16px */
            font-size: clamp(0.8125rem, 1.5vw, 1rem);
            font-weight: 700;
            line-height: 1.2em;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: calc(4 / 16 * 1rem);
            color: var(--primary);
            display: flex;
            justify-content: center;
            align-items: center;
            gap: calc(8 / 16 * 1rem);
            position: relative;
        }

        .cs-chevron {
            --chevronColor: var(--primary);

            width: calc(48 / 16 * 1rem);
            height: auto;
        }

        .cs-title {
            /* 39px - 61px */
            font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
            font-weight: 700;
            line-height: 1.2em;
            text-align: inherit;
            max-width: 100%;
            margin: 0 0 calc(40 / 16 * 1rem) 0;
            color: #fff;
            position: relative;
        }

        .cs-text {
            /* 16px - 20px */
            font-size: clamp(1rem, 1.95vw, 1.25rem);
            line-height: 1.5em;
            text-align: inherit;
            width: 100%;
            /* 464px - 622px */
            max-width: clamp(29rem, 60vw, 38.785rem);
            margin: 0 0 calc(40 / 16 * 1rem) 0;
            color: #fff;
        }

        .cs-button-solid {
            font-size: calc(16 / 16 * 1rem);
            font-weight: 700;
            /* 46px - 56px */
            line-height: clamp(2.875rem, 5.5vw, 3.5rem);
            text-decoration: none;
            margin: 0;
            padding: 0 calc(24 / 16 * 1rem);
            color: #fff;
            background-color: var(--primary);
            display: inline-block;
            position: relative;
            z-index: 1;

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

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

        .cs-card-group {
            width: 100%;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            /* 16px - 20px */
            gap: clamp(1rem, 2.3vw, 1.25rem);
        }

        .cs-item {
            text-align: left;
            list-style: none;
            width: 100%;
            margin: 0;
            /* prevents padding from affecting height and width */
            box-sizing: border-box;
            /* 24px - 32px */
            padding: clamp(1.5rem, 3vw, 2rem);
            background-color: #fff;
            box-shadow: 0px 12px 80px 0px rgba(26, 26, 26, 0.08);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            grid-column: span 12;
            grid-row: span 1;
            position: relative;
            z-index: 1;
        }
        .cs-icon {
            width: calc(48 / 16 * 1rem);
            height: auto;
            margin: 0 0 calc(24 / 16 * 1rem) 0;
        }

        .cs-h3 {
            /* 20px - 25px */
            font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
            font-weight: bold;
            line-height: 1.2em;
            text-align: inherit;
            margin: 0 0 calc(16 / 16 * 1rem) 0;
            color: var(--headerColor);
        }

        .cs-item-text {
            /* 14px - 16px */
            font-size: clamp(0.875rem, 1.5vw, 1rem);
            line-height: 1.5em;
            max-width: calc(450 / 16 * 1rem);
            margin: 0;
            padding: 0;
            color: var(--bodyTextColor);
        }

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

            &:before {
                /* Overlay */
                content: "";
                width: 100%;
                height: 100%;
                background: #111926;
                opacity: 0.8;
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
                /* prevents the cursor from interacting with it */
                pointer-events: none;
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                /* makes the top of the image start at the top of the parent */
                object-position: top;
                position: absolute;
                top: 0;
                left: 0;
            }
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #hero-1618 {
        padding-bottom: 0;
        .cs-container {
            align-items: flex-start;
        }

        .cs-content {
            text-align: left;
            margin-left: 0;
            align-items: flex-start;
        }

        .cs-item {
            grid-column: span 4;
        }

        .cs-background {
            height: 87%;
            &:before {
                background: linear-gradient(
                    90deg,
                    #111926 21.41%,
                    rgba(17, 25, 38, 0.72) 34.98%,
                    rgba(17, 25, 38, 0) 62.53%
                );
                opacity: 1;
            }
        }
    }
}

/* Large Desktop Parallax Effect - 100px */
@media only screen and (min-width: 100rem) {
    #hero-1618 {
        .cs-background {
            background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/meeting7.jpg");
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            /* creates the parallax effect */
            background-attachment: fixed;
            img {
                display: none;
            }
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #hero-1618 {
            .cs-item {
                background-color: var(--medium);
            }

            .cs-h3,
            .cs-item-text {
                color: var(--bodyTextColorWhite);
            }

            .cs-icon {
                filter: grayscale(1) brightness(1000%);
            }

            .cs-text {
                opacity: 0.8;
            }

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

                img {
                    opacity: 0.5;
                }
            }
        }
    }
}

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

body {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
}

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

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

body {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: (4/16rem);
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: (700/16rem);
    margin: 0 0 (16/16rem) 0;
    color: var(--headerColor);
    position: relative;
}

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

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

body {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: calc(4 / 16 * 1rem);
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: calc(700 / 16 * 1rem);
    margin: 0 0 calc(16 / 16 * 1rem) 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: calc(650 / 16 * 1rem);
    margin: 0;
    color: var(--bodyTextColor);
}