header{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        background: var(--dark);
        padding:1rem;
        position: fixed;
        z-index: 99;
        width: calc(100vw - 3rem);
    }
    .header__branding{
        display: flex;
        align-items: center;
        gap: 2rem;
    }
    /* logo */
    .logo{
        display: flex;
        align-items: center;

        img{
            height: 6rem;
            width: auto;
            margin-bottom: -3rem;
            position: relative;
            z-index: 90;
        }
    }
    .logo__description{
        font-family: var(--header-font);
        color:#fff;
        font-size: 1.5em;
    }
    /* main nav */
    #navigationWrapper{
        display: flex;
        align-items: center;
        gap: 4rem;
    }
    nav{
        display: flex;
        flex-wrap: wrap;
        gap: .5rem 2rem;
    }
    .navigationSocial{
        gap: 1rem;
    }
    nav .btn{
        margin:0;
    }
    .navigationMain__item, .navigationSecondary__item{
        color: var(--light);
        text-transform: uppercase;
        font-weight: 600;
    }
    /* nav secondary */
    .navigationSecondary{
        gap: .5rem 1rem;
    }
    .navigationSecondary__item{
        padding:.5rem 1rem;
        border-radius: 5px;
        color:#fff;
    }
    /* social nav */

    .navigationSocial__item{
        text-indent: -99999px;
        width: 40px;
        height:40px;
        background-repeat: no-repeat;
        background-size: auto 40px;
        background-image: url("/images/social.png");
    }

    .fb{
        background-position: left top;
    }
    .ig{
        background-position: right top;
    }
    #hamburger-wrapper{
        display: none;
        width: 2rem;
    }
    .hamburger__patty{
        height: 2px;
        width: 100%;
        background: var(--light);
        margin: 4px 0;
    }
    @media screen and (max-width: 500px) {
        .logo__description{
            display: none;
        }
    }
    @media screen and (max-width: 800px) {
        #navigationWrapper{
            padding:2rem;
            display: none;
            position: absolute;
            top: 5.3rem;
            left: 0;
            right: 0;
            background:  var(--medium);
            flex-direction: column;
            text-align: center;
            gap:2rem;
            .navigationMain,
            .navigationSecondary{
                flex-direction: column;
            }
        }
        #hamburger-wrapper{
            display: block;
        }

    header {
        width: calc(100vw - 2rem);
    }
    
}
.heroHomepage{
        width: 100%;
        height: 100vh;
        position: relative;
        overflow: hidden;

        &:after{
            content: '';
            position: absolute;
            top:0;
            left:0;
            width: 100%;
            height: 100%;
            z-index: 0;
            opacity: 0.55;
            background-image: linear-gradient(64deg, #ED2728 0%, #54A7C3 100%);
        }
    }

    .heroHomepage__cta {
        position: absolute;
        left: 5rem;
        bottom: 4rem;
        width: 43rem;
        z-index: 10;
    }
    .heroHomepage__title {
        font-size: 9em;
        line-height: 1em;
        margin: 0;
        color: #fff;
    }
    .heroHomepage__btn{
        /* background-color: var(--red);
        border: 1px solid var(--dark-red); */
    }
    .heroHomepage__image{
        position: absolute;
        left:0;
        right:0;
        top:0;
        z-index: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

@media screen and (max-width:740px) {
    .heroHomepage__cta {
        left: 1rem;
        width: unset;
    }
    .heroHomepage__title {
        font-size: 4em;
    }
}
.cta__twoCol{
        display: flex;
        text-align: center;
    }
    .cta__col{
        width: 100%;
        padding: 14vw 8vw 5vw 8vw;
        position: relative;
        z-index: 1;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }
    .cta__col:before{
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top:0;
        left:0;
        z-index: -1;
    }
    .cta__colOne:before{
        opacity: 0.62;
        background-image: linear-gradient(225deg, #1E3C56 0%, #ED2728 100%);
    }
    .cta__colTwo:before{
        opacity: 0.62;
        background-image: linear-gradient(-44deg, #ED2728 0%, #1E3C56 100%);
    }
    .cta__colOne{
        background-image: url("/images/coach.jpg");
    }
    .cta__colTwo{
        background-image: url("/images/vipers-team.jpg");
    }
    .cta__description{
        font-size: 1.3em;
        color: #fff;
        font-weight: 300;
    }

    .cta__title{
        font-size: 5em;
        margin-bottom: 1rem;
        color: #fff;
    }
    @media screen and (max-width: 800px) {
        .cta__twoCol {
            flex-direction: column;
        }
        .cta__col{
            width: unset;
        }
    }
.newsletter{
        background-color: var(--red);
        padding:3vw;
        display: flex;
        gap: 2rem;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .newsletter__form{
        position: relative;
        display: flex;
        align-items: center;
    }
    .newsletter__title{
        color: #fff;
        font-size: 2em;
        margin:0;
    }
    .newsletter__form-inputText{
        border:none;
        padding:1rem 2rem 1rem 1rem;
        color: var(--dark);
        width: 30vw;
    }
    .newsletter__form-label{
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }
    .newsletter__form-inputSubmit{
        position: absolute;
        right:0;
        border: none;
        background: var(--dark);
        color: #fff;
        padding:.35rem .5rem;
        font-size: 2em;
        cursor: pointer;
    }
    @media screen and (max-width: 685px) {
        .newsletter{
            text-align: center;
            flex-direction: column;
            padding:2rem;
        }
    }