/* 
======================================================================== 
                             4. NAVIGATION (HEADER)
======================================================================== 
*/

/* 
*******************************
4.1 TYPOGRAPHY (NAV)
*******************************
*/

header {
    font-size: clamp(2rem, 2.75vw, 3rem);
    font-family: 'Bebas Neue', cursive;

}
/* 
*******************************
4.2 LAYOUT (NAV)
*******************************
*/
header {
    background-color: black;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
}

.header-text-strapline {
    padding: 1rem 1rem 1rem 2rem;
    color: whitesmoke;
}


.wrapper .heading {
    opacity: 0;
    animation: fadeInAnimation ease 5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}

.header-primary-nav {
    display: flex;
    align-items: center;
}

.header-primary-nav .menu {
    display: flex;
    align-items: center;
    padding-inline-end: 2rem;
    gap: 2rem;
}

.header-primary-nav .menu li a {
    text-decoration: none;
    display: flex;
    gap: 2rem;
    list-style: none;
    color: whitesmoke;
    font-size: clamp(2rem, 2.75vw, 3rem);
}

.header-primary-nav .menu li a:hover{
color:red;
}

.header-primary-nav .menu li a:active,
.header-primary-nav .menu li a:focus {
   color: red;
   outline: none;
   text-decoration: none;
}

 


.header-primary-nav .menu li{
list-style-type: none;  
}

/* 
*******************************
4.3 SIDEBAR
*******************************
*/
/* 
*******************************
4.4 MEDIA QUERIES
*******************************
*/


.sidebar {
    display: none;
}

@media only screen and (max-width : 980px) {


    .toggle {
        position: fixed;
        top: 20px;
        right: 20px;
        width: 35px;
        height: 35px;
        border: 1px solid white;
        background: black url(/assets/menu.png);
        background-size: 20px;
        background-position: center;
        background-repeat: no-repeat;
        cursor: pointer;
        z-index: 1000;
        border-radius: 5px;
    }

    .toggle.active {
        background: black url(/assets/close.png);
        background-size: 25px;
        background-position: center;
        background-repeat: no-repeat;
    }

    .sidebar {
        top: 0;
        width: 100%;
        height: 100%;
        position: fixed;
        background: black;
        backdrop-filter: blur(10rem);
        opacity: 0.955;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.5s;
        padding: 40px;
        z-index: 100;
        right: -100%;
    }

    .sidebar.active {
        right: 0;
    }

    .sidebar.active .menu {
        margin: 0;
        padding: 0;
    }

    .sidebar ul {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .sidebar ul li {
        list-style: none;
        margin: 30px;
        text-align: center;
    }

    .sidebar ul li a {
        color: whitesmoke;
        text-decoration: none;
        font-size: 1.75rem;
        margin: 10px 0;
        font-weight: 300;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    .sidebar ul li a:hover {
        color: red;
    }

    .header-primary-nav{
        display:none;
    }
}




@media only screen and (max-width : 375px) {


    .header-text-strapline {

        font-size: 1.5rem;
    }

}