/* ========================
   TABLET HEADER
======================== */
@media(max-width:1200px){

    .header-container{
        padding: 0 25px;
    }
    .brand-wordmark{
        width: 115px;
    }

    .main-nav{
        gap:22px;
    }

    .main-nav a{
        font-size: .72rem;
    }

    .social-links{
        display: none;
    }
}

/* ========================
   MOBILE HEADER
======================== */
@media(max-width:768px){
    .site-header{
        height: 70px;
    }

    .header-container{
        padding: 0 30px;
    }

    .brand{
        width: auto;
    }

    .brand-wordmark{
        display: none;
    }

    .main-nav{
        display: none;
    }

    .social-links{
        display: none;
    }

    .mobile-menu{
        display: block;
        background: none;
        border: none;
        color: #3ddaff;
        font-size: 28px;
        cursor: pointer;
    }
}