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);
    }
    
}
.hero{
        position: relative;
        overflow: hidden;
    }
    .hero:after{
        content: '';
        position: absolute;
        z-index: 2;
        width: 100%;
        height: 100%;
        top:0;
        left:0;
        opacity: 0.62;
        background-image: linear-gradient(225deg, #1E3C56 0%, #ED2728 100%);
    }
    .hero__title{
        margin:11rem 5vw 6rem;
        position: relative;
        z-index: 3;
        color: #fff;
        font-size: 5vw;
        text-align: center;
    }
    .hero__sub-title{
        text-wrap: auto;
        font-family: var(--header-font);
        font-size: 16vw;
        opacity: 0.3;
        position: absolute;
        z-index: 2;
        bottom: 15%;
        overflow: hidden;
        display: inline-block;
        text-align: center;
        margin: 0 auto;
        width: 100%;
    }
    .hero__background{
        position: absolute;
        object-fit: cover;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 100%;
    }
    @media screen and (max-width: 700px) {
        .hero__title{
            font-size: 10vw;
        }
    }
.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;
        }
    }