Code of Stitch

Centered

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

<section id="hero-229">
    <div class="cs-container">
        <div class="cs-flex-group">
            <span class="cs-topper">mountain hiking society</span>
            <h1 class="cs-title">Explore the World with Exciting People</h1>
            <p class="cs-text">
                Tincidunt lobortis feugiat vivamus at augue eget arcu dictum varius. Nibh tortor id aliquet lectus proin nibh condimentum.
            </p>
            <div class="cs-button-group">
                <a href="" class="cs-button-solid cs-button">Explore More</a>
                <a href="" class="cs-button-transparent cs-button">
                    <img class="cs-img" loading="lazy" decoding="async" src="https://csimg.nyc3.digitaloceanspaces.com/Hero/play.svg" alt="play icon" width="17" height="17">
                    Learn More
                </a>
            </div>
        </div>
    </div>

    <!-- Background Image -->
    <picture class="cs-picture">
        <source media="(max-width: 600px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/Hero/Background-m.jpg">
        <source media="(min-width: 601px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/Hero/Background.jpg">
        <img loading="lazy" decoding="async" src="https://csimg.nyc3.digitaloceanspaces.com/Hero/Background.jpg" alt="mountains" width="2250" height="1500" aria-hidden="true">
    </picture>
</section>

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-229 {
    /* changes on tablet */
    padding: 0 1rem;
    position: relative;
    z-index: 1;
    /* prevents overflow from the lines extending past the screen width */
    overflow: hidden;
  }
  #hero-229 .cs-picture {
    /* Background Image */
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #hero-229 .cs-picture:before {
    /* Black Color Overlay */
    content: '';
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.6;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
    /* prevents the cursor from interacting with it */
    pointer-events: none;
  }
  #hero-229 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes image act like a background-image */
    object-fit: cover;
  }
  #hero-229 .cs-container {
    width: 100%;
    max-width: 80rem;
    /* we put the padding top and bottom on the container instead of #Hero so the pseudo element lines go to the top and bottom of the section */
    /* 144px - 280px - leaving extra space for the navigation */
    /* changes on tablet */
    padding: clamp(9rem, 25.95vw, 17.5rem) 0;
    margin: auto;
    position: relative;
  }
  #hero-229 .cs-container:before {
    /* Left Line */
    content: '';
    width: 1px;
    height: 100%;
    background: -moz-linear-gradient(top, rgba(250, 251, 252, 0.5) 0%, rgba(250, 251, 252, 0) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(250, 251, 252, 0.5) 0%, rgba(250, 251, 252, 0) 100%);
    /* Chrome10-25,Safari5.1-6 */
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
  }
  #hero-229 .cs-flex-group {
    /* 60px - 220px */
    margin-bottom: clamp(3.75rem, 15.5vw, 13.75rem);
    margin: auto;
    width: 80vw;
    /* 464px - 562px */
    max-width: clamp(29rem, 60vw, 35.125rem);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 1.25rem;
    box-sizing: border-box;
  }
  #hero-229 .cs-topper {
    /* 13px - 16px */
    font-size: clamp(0.8125rem, 1.6vw, 1rem);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.1rem;
    font-weight: 700;
    color: var(--primaryLight);
    margin-bottom: 1rem;
    display: block;
  }
  #hero-229 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
    font-weight: 900;
    line-height: 1.2em;
    text-align: center;
    width: 100%;
    /* 32px - 40px */
    margin: 0 auto clamp(2rem, 4vw, 2.5rem) 0;
    color: var(--bodyTextColorWhite);
    position: relative;
  }
  #hero-229 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.95vw, 1.25rem);
    line-height: 1.5em;
    text-align: center;
    width: 100%;
    /* 32px - 40px */
    margin: 0 auto clamp(2rem, 4vw, 2.5rem) 0;
    /* 40px - 48px */
    margin-bottom: clamp(2.5rem, 4vw, 3rem);
    color: var(--bodyTextColorWhite);
  }
  #hero-229 .cs-button-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 16px - 20px */
    gap: clamp(1rem, 2.3vw, 1.25rem);
  }
  #hero-229 .cs-button {
    min-width: 12.3125rem;
  }
  #hero-229 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-align: center;
    text-decoration: none;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 3rem;
    background-color: var(--primary);
    overflow: hidden;
    color: #fff;
    border: none;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #hero-229 .cs-button-solid:before {
    content: "";
    width: 0;
    height: 100%;
    background: #000;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #hero-229 .cs-button-solid:hover {
    color: #fff;
  }
  #hero-229 .cs-button-solid:hover:before {
    width: 100%;
  }
  #hero-229 .cs-button-transparent {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    width: 11.25rem;
    /* 46px - 56px */
    height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    margin: 0;
    color: #fff;
    padding: 0;
    background-color: transparent;
    border: 1px solid var(--bodyTextColorWhite);
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  #hero-229 .cs-button-transparent:before {
    content: '';
    position: absolute;
    display: block;
    background: #000;
    opacity: 1;
    /* so it sits on top of the border */
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    z-index: -1;
    transform-origin: left;
    /* this is what creates the grow affect on hover */
    transform: scaleX(0);
    transition: transform 0.3s;
  }
  #hero-229 .cs-button-transparent:hover:before {
    transform: scaleX(1);
  }
  #hero-229 .cs-button-transparent .cs-img {
    display: block;
    margin-right: 0.75rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-229 {
    /* 32px - 40px */
    padding: 0 clamp(2rem, 5vw, 2.5rem);
  }
  #hero-229 .cs-container:after {
    /* Right Line */
    content: '';
    width: 1px;
    height: 100%;
    background: -moz-linear-gradient(top, rgba(250, 251, 252, 0) 0%, rgba(250, 251, 252, 0.5) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(250, 251, 252, 0) 0%, rgba(250, 251, 252, 0.5) 100%);
    /* Chrome10-25,Safari5.1-6 */
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    right: 0;
  }
  #hero-229 .cs-button-group {
    flex-direction: row;
  }
}
/* Desktop Parallax Effect - 1300px */
@media only screen and (min-width: 81.25rem) {
  #hero-229 {
    background: url("https://csimg.nyc3.digitaloceanspaces.com/Hero/Background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* creates parallax effect on background image */
    background-attachment: fixed;
    /* remove img tag so we can make parallax work */
  }
  #hero-229 .cs-picture img {
    display: none;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-229 {
    /* changes on tablet */
    padding: 0 1rem;
    position: relative;
    z-index: 1;
    /* prevents overflow from the lines extending past the screen width */
    overflow: hidden;
  }
  #hero-229 .cs-picture {
    /* Background Image */
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #hero-229 .cs-picture:before {
    /* Black Color Overlay */
    content: '';
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.6;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
    /* prevents the cursor from interacting with it */
    pointer-events: none;
  }
  #hero-229 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes image act like a background-image */
    object-fit: cover;
  }
  #hero-229 .cs-container {
    width: 100%;
    max-width: 80rem;
    /* we put the padding top and bottom on the container instead of #Hero so the pseudo element lines go to the top and bottom of the section */
    /* 144px - 280px - leaving extra space for the navigation */
    /* changes on tablet */
    padding: clamp(9rem, 25.95vw, 17.5rem) 0;
    margin: auto;
    position: relative;
  }
  #hero-229 .cs-container:before {
    /* Left Line */
    content: '';
    width: 1px;
    height: 100%;
    background: -moz-linear-gradient(top, rgba(250, 251, 252, 0.5) 0%, rgba(250, 251, 252, 0) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(250, 251, 252, 0.5) 0%, rgba(250, 251, 252, 0) 100%);
    /* Chrome10-25,Safari5.1-6 */
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
  }
  #hero-229 .cs-flex-group {
    /* 60px - 220px */
    margin-bottom: clamp(3.75rem, 15.5vw, 13.75rem);
    margin: auto;
    width: 80vw;
    /* 464px - 562px */
    max-width: clamp(29rem, 60vw, 35.125rem);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 1.25rem;
    box-sizing: border-box;
  }
  #hero-229 .cs-topper {
    /* 13px - 16px */
    font-size: clamp(0.8125rem, 1.6vw, 1rem);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.1rem;
    font-weight: 700;
    color: var(--primaryLight);
    margin-bottom: 1rem;
    display: block;
  }
  #hero-229 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
    font-weight: 900;
    line-height: 1.2em;
    text-align: center;
    width: 100%;
    /* 32px - 40px */
    margin: 0 auto clamp(2rem, 4vw, 2.5rem) 0;
    color: var(--bodyTextColorWhite);
    position: relative;
  }
  #hero-229 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.95vw, 1.25rem);
    line-height: 1.5em;
    text-align: center;
    width: 100%;
    /* 32px - 40px */
    margin: 0 auto clamp(2rem, 4vw, 2.5rem) 0;
    /* 40px - 48px */
    margin-bottom: clamp(2.5rem, 4vw, 3rem);
    color: var(--bodyTextColorWhite);
  }
  #hero-229 .cs-button-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 16px - 20px */
    gap: clamp(1rem, 2.3vw, 1.25rem);
  }
  #hero-229 .cs-button {
    min-width: 12.3125rem;
  }
  #hero-229 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-align: center;
    text-decoration: none;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 3rem;
    background-color: var(--primary);
    overflow: hidden;
    color: #fff;
    border: none;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #hero-229 .cs-button-solid:before {
    content: "";
    width: 0;
    height: 100%;
    background: #000;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #hero-229 .cs-button-solid:hover {
    color: #fff;
  }
  #hero-229 .cs-button-solid:hover:before {
    width: 100%;
  }
  #hero-229 .cs-button-transparent {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    width: 11.25rem;
    /* 46px - 56px */
    height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    margin: 0;
    color: #fff;
    padding: 0;
    background-color: transparent;
    border: 1px solid var(--bodyTextColorWhite);
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  #hero-229 .cs-button-transparent:before {
    content: '';
    position: absolute;
    display: block;
    background: #000;
    opacity: 1;
    /* so it sits on top of the border */
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    z-index: -1;
    transform-origin: left;
    /* this is what creates the grow affect on hover */
    transform: scaleX(0);
    transition: transform 0.3s;
  }
  #hero-229 .cs-button-transparent:hover:before {
    transform: scaleX(1);
  }
  #hero-229 .cs-button-transparent .cs-img {
    display: block;
    margin-right: 0.75rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-229 {
    /* 32px - 40px */
    padding: 0 clamp(2rem, 5vw, 2.5rem);
  }
  #hero-229 .cs-container:after {
    /* Right Line */
    content: '';
    width: 1px;
    height: 100%;
    background: -moz-linear-gradient(top, rgba(250, 251, 252, 0) 0%, rgba(250, 251, 252, 0.5) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(250, 251, 252, 0) 0%, rgba(250, 251, 252, 0.5) 100%);
    /* Chrome10-25,Safari5.1-6 */
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    right: 0;
  }
  #hero-229 .cs-button-group {
    flex-direction: row;
  }
}
/* Desktop Parallax Effect - 1300px */
@media only screen and (min-width: 81.25rem) {
  #hero-229 {
    background: url("https://csimg.nyc3.digitaloceanspaces.com/Hero/Background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* creates parallax effect on background image */
    background-attachment: fixed;
    /* remove img tag so we can make parallax work */
  }
  #hero-229 .cs-picture img {
    display: none;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #hero-229 .cs-background:before {
    opacity: 0.8;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #hero-229 {
        /* changes on tablet */
        padding: 0 (16/16rem);
        position: relative;
        z-index: 1;
        /* prevents overflow from the lines extending past the screen width */
        overflow: hidden;

        .cs-picture {
            /* Background Image */
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -2;

            &:before {
                /* Black Color Overlay */
                content: '';
                width: 100%;
                height: 100%;
                background: #000;
                opacity: .6;
                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%;
                /* Makes image act like a background-image */
                object-fit: cover;
            }
        }

        .cs-container {
            width: 100%;
            max-width: (1280/16rem);
            /* we put the padding top and bottom on the container instead of #Hero so the pseudo element lines go to the top and bottom of the section */
            /* 144px - 280px - leaving extra space for the navigation */
            /* changes on tablet */
            padding: clamp(9rem, 25.95vw, 17.5rem) 0 ;
            margin: auto;
            position: relative;

            &:before {
                /* Left Line */
                content: '';
                width: 1px;
                height: 100%;
                background: -moz-linear-gradient(top, rgba(250,251,252,0.5) 0%, rgba(250,251,252,0) 100%); /* FF3.6-15 */
                background: -webkit-linear-gradient(top, rgba(250,251,252,0.5) 0%,rgba(250,251,252,0) 100%); /* Chrome10-25,Safari5.1-6 */
                opacity: 1;
                position: absolute;
                display: block;
                top: 0;
                left: 0;
            }
        }

        .cs-flex-group {
            /* 60px - 220px */
            margin-bottom: clamp(3.75rem, 15.5vw, 13.75rem);
            margin: auto;
            width: 80vw;
            /* 464px - 562px */
            max-width: clamp(29rem, 60vw, 35.125rem);
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-wrap: wrap;
            column-gap: (20/16rem);
            box-sizing: border-box;
        }

        .cs-topper {
            /* 13px - 16px */
            font-size: clamp(.8125rem, 1.6vw, 1rem);
            line-height: 1.2em;
            text-transform: uppercase;
            text-align: center;
            letter-spacing: .1rem;
            font-weight: 700;
            color: var(--primaryLight);
            margin-bottom: (16/16rem);
            display: block;
        }

        .cs-title {
            /* 39px - 61px */
            font-size: clamp(2.4375rem, 6.40vw, 3.8125rem);
            font-weight: 900;
            line-height: 1.2em;
            text-align: center;
            width: 100%;
            /* 32px - 40px */
            margin: 0 auto clamp(2rem, 4vw, 2.5rem) 0;
            color: var(--bodyTextColorWhite);
            position: relative;
        }

        .cs-text {
            /* 16px - 20px */
            font-size: clamp(1rem, 1.95vw, 1.25rem);
            line-height: 1.5em;
            text-align: center;
            width: 100%;
            /* 32px - 40px */
            margin: 0 auto clamp(2rem, 4vw, 2.5rem) 0;
            /* 40px - 48px */
            margin-bottom: clamp(2.5rem, 4vw, 3rem);
            color: var(--bodyTextColorWhite);
        }

        .cs-button-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /* 16px - 20px */
            gap: clamp(1rem, 2.3vw, 1.25rem);
        }

        .cs-button {
            min-width: (197/16rem);
        }

        .cs-button-solid {
            font-size: (16/16rem);
            font-weight: 700;
            /* 46px - 56px */
            line-height: clamp(2.875em, 5.5vw, 3.5em);
            text-align: center;
            text-decoration: none;
            margin: 0;
            /* prevents padding from adding to the width */
            box-sizing: border-box;
            padding: 0 (48/16rem);
            background-color: var(--primary);
            overflow: hidden;
            color: #fff;
            border: none;
            display: inline-block;
            position: relative;
            z-index: 1;
            transition: color 0.3s;

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

            &:hover {
                color: #fff;

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

        .cs-button-transparent {
            font-size: (16/16rem);
            /* 46px - 56px */
            line-height: clamp(2.875rem, 5.5vw, 3.5rem);
            width: (180/16rem);
            /* 46px - 56px */
            height: clamp(2.875rem, 5.5vw, 3.5rem);
            text-decoration: none;
	    	font-weight: 700;
            margin: 0;
            color: #fff;
            padding: 0;
            background-color: transparent;
            border: 1px solid var(--bodyTextColorWhite);
            box-sizing: border-box;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 1;

            &:before {
                content: '';
                position: absolute;
                display: block;
                background: #000;
                opacity: 1;
                /* so it sits on top of the border */
                top: -1px;
                left: -1px;
                right: -1px;
                bottom: -1px;
                z-index: -1;
                transform-origin: left;
                /* this is what creates the grow affect on hover */
                transform: scaleX(0);
                transition: transform .3s;
            }

            &:hover {
                &:before {
                    transform: scaleX(1);
                }
            }

            .cs-img {
                display: block;
                margin-right: (12/16rem);
            }
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #hero-229 {
        /* 32px - 40px */
        padding: 0 clamp(2rem, 5vw, 2.5rem);

        .cs-container {
            &:after {
                /* Right Line */
                content: '';
                width: 1px;
                height: 100%;
                background: -moz-linear-gradient(top, rgba(250,251,252,0) 0%, rgba(250,251,252,0.5) 100%); /* FF3.6-15 */
                background: -webkit-linear-gradient(top, rgba(250,251,252,0) 0%,rgba(250,251,252,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
                opacity: 1;
                position: absolute;
                display: block;
                top: 0;
                right: 0;
            }
        }

        .cs-button-group {
            flex-direction: row;
        }
    }
}

/* Desktop Parallax Effect - 1300px */
@media only screen and (min-width: 81.25rem) {
    #hero-229 {
        background: url("https://csimg.nyc3.digitaloceanspaces.com/Hero/Background.jpg");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
        /* creates parallax effect on background image */
        background-attachment: fixed;
        /* remove img tag so we can make parallax work */
        .cs-picture {
            img {
                display: none;
            }
        }
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #hero-229 {
        /* changes on tablet */
        padding: 0 (16/16rem);
        position: relative;
        z-index: 1;
        /* prevents overflow from the lines extending past the screen width */
        overflow: hidden;

        .cs-picture {
            /* Background Image */
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -2;

            &:before {
                /* Black Color Overlay */
                content: '';
                width: 100%;
                height: 100%;
                background: #000;
                opacity: .6;
                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%;
                /* Makes image act like a background-image */
                object-fit: cover;
            }
        }

        .cs-container {
            width: 100%;
            max-width: (1280/16rem);
            /* we put the padding top and bottom on the container instead of #Hero so the pseudo element lines go to the top and bottom of the section */
            /* 144px - 280px - leaving extra space for the navigation */
            /* changes on tablet */
            padding: clamp(9rem, 25.95vw, 17.5rem) 0 ;
            margin: auto;
            position: relative;

            &:before {
                /* Left Line */
                content: '';
                width: 1px;
                height: 100%;
                background: -moz-linear-gradient(top, rgba(250,251,252,0.5) 0%, rgba(250,251,252,0) 100%); /* FF3.6-15 */
                background: -webkit-linear-gradient(top, rgba(250,251,252,0.5) 0%,rgba(250,251,252,0) 100%); /* Chrome10-25,Safari5.1-6 */
                opacity: 1;
                position: absolute;
                display: block;
                top: 0;
                left: 0;
            }
        }

        .cs-flex-group {
            /* 60px - 220px */
            margin-bottom: clamp(3.75rem, 15.5vw, 13.75rem);
            margin: auto;
            width: 80vw;
            /* 464px - 562px */
            max-width: clamp(29rem, 60vw, 35.125rem);
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-wrap: wrap;
            column-gap: (20/16rem);
            box-sizing: border-box;
        }

        .cs-topper {
            /* 13px - 16px */
            font-size: clamp(.8125rem, 1.6vw, 1rem);
            line-height: 1.2em;
            text-transform: uppercase;
            text-align: center;
            letter-spacing: .1rem;
            font-weight: 700;
            color: var(--primaryLight);
            margin-bottom: (16/16rem);
            display: block;
        }

        .cs-title {
            /* 39px - 61px */
            font-size: clamp(2.4375rem, 6.40vw, 3.8125rem);
            font-weight: 900;
            line-height: 1.2em;
            text-align: center;
            width: 100%;
            /* 32px - 40px */
            margin: 0 auto clamp(2rem, 4vw, 2.5rem) 0;
            color: var(--bodyTextColorWhite);
            position: relative;
        }

        .cs-text {
            /* 16px - 20px */
            font-size: clamp(1rem, 1.95vw, 1.25rem);
            line-height: 1.5em;
            text-align: center;
            width: 100%;
            /* 32px - 40px */
            margin: 0 auto clamp(2rem, 4vw, 2.5rem) 0;
            /* 40px - 48px */
            margin-bottom: clamp(2.5rem, 4vw, 3rem);
            color: var(--bodyTextColorWhite);
        }

        .cs-button-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /* 16px - 20px */
            gap: clamp(1rem, 2.3vw, 1.25rem);
        }

        .cs-button {
            min-width: (197/16rem);
        }

        .cs-button-solid {
            font-size: (16/16rem);
            font-weight: 700;
            /* 46px - 56px */
            line-height: clamp(2.875em, 5.5vw, 3.5em);
            text-align: center;
            text-decoration: none;
            margin: 0;
            /* prevents padding from adding to the width */
            box-sizing: border-box;
            padding: 0 (48/16rem);
            background-color: var(--primary);
            overflow: hidden;
            color: #fff;
            border: none;
            display: inline-block;
            position: relative;
            z-index: 1;
            transition: color 0.3s;

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

            &:hover {
                color: #fff;

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

        .cs-button-transparent {
            font-size: (16/16rem);
            /* 46px - 56px */
            line-height: clamp(2.875rem, 5.5vw, 3.5rem);
            width: (180/16rem);
            /* 46px - 56px */
            height: clamp(2.875rem, 5.5vw, 3.5rem);
            text-decoration: none;
	    	font-weight: 700;
            margin: 0;
            color: #fff;
            padding: 0;
            background-color: transparent;
            border: 1px solid var(--bodyTextColorWhite);
            box-sizing: border-box;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 1;

            &:before {
                content: '';
                position: absolute;
                display: block;
                background: #000;
                opacity: 1;
                /* so it sits on top of the border */
                top: -1px;
                left: -1px;
                right: -1px;
                bottom: -1px;
                z-index: -1;
                transform-origin: left;
                /* this is what creates the grow affect on hover */
                transform: scaleX(0);
                transition: transform .3s;
            }

            &:hover {
                &:before {
                    transform: scaleX(1);
                }
            }

            .cs-img {
                display: block;
                margin-right: (12/16rem);
            }
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #hero-229 {
        /* 32px - 40px */
        padding: 0 clamp(2rem, 5vw, 2.5rem);

        .cs-container {
            &:after {
                /* Right Line */
                content: '';
                width: 1px;
                height: 100%;
                background: -moz-linear-gradient(top, rgba(250,251,252,0) 0%, rgba(250,251,252,0.5) 100%); /* FF3.6-15 */
                background: -webkit-linear-gradient(top, rgba(250,251,252,0) 0%,rgba(250,251,252,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
                opacity: 1;
                position: absolute;
                display: block;
                top: 0;
                right: 0;
            }
        }

        .cs-button-group {
            flex-direction: row;
        }
    }
}

/* Desktop Parallax Effect - 1300px */
@media only screen and (min-width: 81.25rem) {
    #hero-229 {
        background: url("https://csimg.nyc3.digitaloceanspaces.com/Hero/Background.jpg");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
        /* creates parallax effect on background image */
        background-attachment: fixed;
        /* remove img tag so we can make parallax work */
        .cs-picture {
            img {
                display: none;
            }
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #hero-229 {
            .cs-background {
                &:before {
                    opacity: .8;
                }
            }
        }
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #hero-229 {
        /* changes on tablet */
        padding: 0 calc(16/16 * 1rem);
        position: relative;
        z-index: 1;
        /* prevents overflow from the lines extending past the screen width */
        overflow: hidden;

        .cs-picture {
            /* Background Image */
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -2;

            &:before {
                /* Black Color Overlay */
                content: '';
                width: 100%;
                height: 100%;
                background: #000;
                opacity: .6;
                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%;
                /* Makes image act like a background-image */
                object-fit: cover;
            }
        }

        .cs-container {
            width: 100%;
            max-width: calc(1280/16 * 1rem);
            /* we put the padding top and bottom on the container instead of #Hero so the pseudo element lines go to the top and bottom of the section */
            /* 144px - 280px - leaving extra space for the navigation */
            /* changes on tablet */
            padding: clamp(9rem, 25.95vw, 17.5rem) 0 ;
            margin: auto;
            position: relative;

            &:before {
                /* Left Line */
                content: '';
                width: 1px;
                height: 100%;
                background: -moz-linear-gradient(top, rgba(250,251,252,0.5) 0%, rgba(250,251,252,0) 100%); /* FF3.6-15 */
                background: -webkit-linear-gradient(top, rgba(250,251,252,0.5) 0%,rgba(250,251,252,0) 100%); /* Chrome10-25,Safari5.1-6 */
                opacity: 1;
                position: absolute;
                display: block;
                top: 0;
                left: 0;
            }
        }

        .cs-flex-group {
            /* 60px - 220px */
            margin-bottom: clamp(3.75rem, 15.5vw, 13.75rem);
            margin: auto;
            width: 80vw;
            /* 464px - 562px */
            max-width: clamp(29rem, 60vw, 35.125rem);
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-wrap: wrap;
            column-gap: calc(20/16 * 1rem);
            box-sizing: border-box;
        }

        .cs-topper {
            /* 13px - 16px */
            font-size: clamp(.8125rem, 1.6vw, 1rem);
            line-height: 1.2em;
            text-transform: uppercase;
            text-align: center;
            letter-spacing: .1rem;
            font-weight: 700;
            color: var(--primaryLight);
            margin-bottom: calc(16/16 * 1rem);
            display: block;
        }

        .cs-title {
            /* 39px - 61px */
            font-size: clamp(2.4375rem, 6.40vw, 3.8125rem);
            font-weight: 900;
            line-height: 1.2em;
            text-align: center;
            width: 100%;
            /* 32px - 40px */
            margin: 0 auto clamp(2rem, 4vw, 2.5rem) 0;
            color: var(--bodyTextColorWhite);
            position: relative;
        }

        .cs-text {
            /* 16px - 20px */
            font-size: clamp(1rem, 1.95vw, 1.25rem);
            line-height: 1.5em;
            text-align: center;
            width: 100%;
            /* 32px - 40px */
            margin: 0 auto clamp(2rem, 4vw, 2.5rem) 0;
            /* 40px - 48px */
            margin-bottom: clamp(2.5rem, 4vw, 3rem);
            color: var(--bodyTextColorWhite);
        }

        .cs-button-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /* 16px - 20px */
            gap: clamp(1rem, 2.3vw, 1.25rem);
        }

        .cs-button {
            min-width: calc(197/16 * 1rem);
        }

        .cs-button-solid {
            font-size: calc(16/16 * 1rem);
            font-weight: 700;
            /* 46px - 56px */
            line-height: clamp(2.875em, 5.5vw, 3.5em);
            text-align: center;
            text-decoration: none;
            margin: 0;
            /* prevents padding from adding to the width */
            box-sizing: border-box;
            padding: 0 calc(48/16 * 1rem);
            background-color: var(--primary);
            overflow: hidden;
            color: #fff;
            border: none;
            display: inline-block;
            position: relative;
            z-index: 1;
            transition: color 0.3s;

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

            &:hover {
                color: #fff;

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

        .cs-button-transparent {
            font-size: calc(16/16 * 1rem);
            /* 46px - 56px */
            line-height: clamp(2.875rem, 5.5vw, 3.5rem);
            width: calc(180/16 * 1rem);
            /* 46px - 56px */
            height: clamp(2.875rem, 5.5vw, 3.5rem);
            text-decoration: none;
	    	font-weight: 700;
            margin: 0;
            color: #fff;
            padding: 0;
            background-color: transparent;
            border: 1px solid var(--bodyTextColorWhite);
            box-sizing: border-box;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 1;

            &:before {
                content: '';
                position: absolute;
                display: block;
                background: #000;
                opacity: 1;
                /* so it sits on top of the border */
                top: -1px;
                left: -1px;
                right: -1px;
                bottom: -1px;
                z-index: -1;
                transform-origin: left;
                /* this is what creates the grow affect on hover */
                transform: scaleX(0);
                transition: transform .3s;
            }

            &:hover {
                &:before {
                    transform: scaleX(1);
                }
            }

            .cs-img {
                display: block;
                margin-right: calc(12/16 * 1rem);
            }
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #hero-229 {
        /* 32px - 40px */
        padding: 0 clamp(2rem, 5vw, 2.5rem);

        .cs-container {
            &:after {
                /* Right Line */
                content: '';
                width: 1px;
                height: 100%;
                background: -moz-linear-gradient(top, rgba(250,251,252,0) 0%, rgba(250,251,252,0.5) 100%); /* FF3.6-15 */
                background: -webkit-linear-gradient(top, rgba(250,251,252,0) 0%,rgba(250,251,252,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
                opacity: 1;
                position: absolute;
                display: block;
                top: 0;
                right: 0;
            }
        }

        .cs-button-group {
            flex-direction: row;
        }
    }
}

/* Desktop Parallax Effect - 1300px */
@media only screen and (min-width: 81.25rem) {
    #hero-229 {
        background: url("https://csimg.nyc3.digitaloceanspaces.com/Hero/Background.jpg");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
        /* creates parallax effect on background image */
        background-attachment: fixed;
        /* remove img tag so we can make parallax work */
        .cs-picture {
            img {
                display: none;
            }
        }
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #hero-229 {
        /* changes on tablet */
        padding: 0 calc(16/16 * 1rem);
        position: relative;
        z-index: 1;
        /* prevents overflow from the lines extending past the screen width */
        overflow: hidden;

        .cs-picture {
            /* Background Image */
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -2;

            &:before {
                /* Black Color Overlay */
                content: '';
                width: 100%;
                height: 100%;
                background: #000;
                opacity: .6;
                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%;
                /* Makes image act like a background-image */
                object-fit: cover;
            }
        }

        .cs-container {
            width: 100%;
            max-width: calc(1280/16 * 1rem);
            /* we put the padding top and bottom on the container instead of #Hero so the pseudo element lines go to the top and bottom of the section */
            /* 144px - 280px - leaving extra space for the navigation */
            /* changes on tablet */
            padding: clamp(9rem, 25.95vw, 17.5rem) 0 ;
            margin: auto;
            position: relative;

            &:before {
                /* Left Line */
                content: '';
                width: 1px;
                height: 100%;
                background: -moz-linear-gradient(top, rgba(250,251,252,0.5) 0%, rgba(250,251,252,0) 100%); /* FF3.6-15 */
                background: -webkit-linear-gradient(top, rgba(250,251,252,0.5) 0%,rgba(250,251,252,0) 100%); /* Chrome10-25,Safari5.1-6 */
                opacity: 1;
                position: absolute;
                display: block;
                top: 0;
                left: 0;
            }
        }

        .cs-flex-group {
            /* 60px - 220px */
            margin-bottom: clamp(3.75rem, 15.5vw, 13.75rem);
            margin: auto;
            width: 80vw;
            /* 464px - 562px */
            max-width: clamp(29rem, 60vw, 35.125rem);
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-wrap: wrap;
            column-gap: calc(20/16 * 1rem);
            box-sizing: border-box;
        }

        .cs-topper {
            /* 13px - 16px */
            font-size: clamp(.8125rem, 1.6vw, 1rem);
            line-height: 1.2em;
            text-transform: uppercase;
            text-align: center;
            letter-spacing: .1rem;
            font-weight: 700;
            color: var(--primaryLight);
            margin-bottom: calc(16/16 * 1rem);
            display: block;
        }

        .cs-title {
            /* 39px - 61px */
            font-size: clamp(2.4375rem, 6.40vw, 3.8125rem);
            font-weight: 900;
            line-height: 1.2em;
            text-align: center;
            width: 100%;
            /* 32px - 40px */
            margin: 0 auto clamp(2rem, 4vw, 2.5rem) 0;
            color: var(--bodyTextColorWhite);
            position: relative;
        }

        .cs-text {
            /* 16px - 20px */
            font-size: clamp(1rem, 1.95vw, 1.25rem);
            line-height: 1.5em;
            text-align: center;
            width: 100%;
            /* 32px - 40px */
            margin: 0 auto clamp(2rem, 4vw, 2.5rem) 0;
            /* 40px - 48px */
            margin-bottom: clamp(2.5rem, 4vw, 3rem);
            color: var(--bodyTextColorWhite);
        }

        .cs-button-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /* 16px - 20px */
            gap: clamp(1rem, 2.3vw, 1.25rem);
        }

        .cs-button {
            min-width: calc(197/16 * 1rem);
        }

        .cs-button-solid {
            font-size: calc(16/16 * 1rem);
            font-weight: 700;
            /* 46px - 56px */
            line-height: clamp(2.875em, 5.5vw, 3.5em);
            text-align: center;
            text-decoration: none;
            margin: 0;
            /* prevents padding from adding to the width */
            box-sizing: border-box;
            padding: 0 calc(48/16 * 1rem);
            background-color: var(--primary);
            overflow: hidden;
            color: #fff;
            border: none;
            display: inline-block;
            position: relative;
            z-index: 1;
            transition: color 0.3s;

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

            &:hover {
                color: #fff;

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

        .cs-button-transparent {
            font-size: calc(16/16 * 1rem);
            /* 46px - 56px */
            line-height: clamp(2.875rem, 5.5vw, 3.5rem);
            width: calc(180/16 * 1rem);
            /* 46px - 56px */
            height: clamp(2.875rem, 5.5vw, 3.5rem);
            text-decoration: none;
	    	font-weight: 700;
            margin: 0;
            color: #fff;
            padding: 0;
            background-color: transparent;
            border: 1px solid var(--bodyTextColorWhite);
            box-sizing: border-box;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 1;

            &:before {
                content: '';
                position: absolute;
                display: block;
                background: #000;
                opacity: 1;
                /* so it sits on top of the border */
                top: -1px;
                left: -1px;
                right: -1px;
                bottom: -1px;
                z-index: -1;
                transform-origin: left;
                /* this is what creates the grow affect on hover */
                transform: scaleX(0);
                transition: transform .3s;
            }

            &:hover {
                &:before {
                    transform: scaleX(1);
                }
            }

            .cs-img {
                display: block;
                margin-right: calc(12/16 * 1rem);
            }
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #hero-229 {
        /* 32px - 40px */
        padding: 0 clamp(2rem, 5vw, 2.5rem);

        .cs-container {
            &:after {
                /* Right Line */
                content: '';
                width: 1px;
                height: 100%;
                background: -moz-linear-gradient(top, rgba(250,251,252,0) 0%, rgba(250,251,252,0.5) 100%); /* FF3.6-15 */
                background: -webkit-linear-gradient(top, rgba(250,251,252,0) 0%,rgba(250,251,252,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
                opacity: 1;
                position: absolute;
                display: block;
                top: 0;
                right: 0;
            }
        }

        .cs-button-group {
            flex-direction: row;
        }
    }
}

/* Desktop Parallax Effect - 1300px */
@media only screen and (min-width: 81.25rem) {
    #hero-229 {
        background: url("https://csimg.nyc3.digitaloceanspaces.com/Hero/Background.jpg");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
        /* creates parallax effect on background image */
        background-attachment: fixed;
        /* remove img tag so we can make parallax work */
        .cs-picture {
            img {
                display: none;
            }
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #hero-229 {
            .cs-background {
                &:before {
                    opacity: .8;
                }
            }
        }
    }
}

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