.site-nav{

    position:fixed;

    top:20px;
    left:0;

    width:100%;

    z-index:1000;

}


/* BODY COLOR */

body{
    margin:0;
    background:#e8e8e8;
    font-family:Helvetica, Arial, sans-serif;
}


/* HEADER */

.site-header{

    background:transparent; 

    padding:20px 0;

}


/* NAV BAR STRIP */

.nav-wrapper{

    position:relative;
    width:100%;
    box-sizing:border-box;

    background:#5f5f5f;

    height:90px;

    border-top-left-radius:40px;
    border-bottom-left-radius:40px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 50px;

}


/* LOGO AREA */

.logo-area{

    display:flex;
    align-items:center;

}

.logo-area img{

    height:48px;

    filter:drop-shadow(0 4px 8px rgba(0,0,0,0.35));

}


/* CENTER MENU */

.menu-center{

position:absolute;

left:50%;
transform:translateX(-50%);

display:flex;
justify-content:center;

}

.menu-center ul{

    display:flex;
    gap:44px;

    list-style:none;
    margin:0;
    padding:0;

}

.menu-center a{

    font-family:"Greycliff", sans-serif;
    font-weight:400;

    color:#e9e9e9;
    text-decoration:none;

    font-size:13px;
    letter-spacing:2px;

    position:relative;
    padding-bottom:6px;
}


/* underline animation */

.menu-center a::after{

    content:"";
    position:absolute;

    left:0;
    bottom:0;

    width:0%;
    height:2px;

    background:white;

    transition:.35s;

}

.menu-center a:hover::after{

    width:100%;

}


/* RIGHT */

.menu-right a{

    font-family:"Greycliff", sans-serif;
    font-weight:400;

    color:#e9e9e9;
    text-decoration:none;

    font-size:13px;
    letter-spacing:2px;

    position:relative;
    padding-bottom:6px;

}

.menu-right a::after{

    content:"";

    position:absolute;
    left:0;
    bottom:0;

    width:0%;
    height:2px;

    background:white;

    transition:.35s;

}

.menu-right a:hover::after{

    width:100%;

}

/* HAMBURGER */

.hamburger{
    display:none;
    flex-direction:column;
    cursor:pointer;
    gap:5px;
}

.hamburger span{
    width:25px;
    height:2px;
    background:#fff;
    display:block;
}


/* ======================
TABLET
====================== */

@media (max-width:1024px){

.nav-wrapper{
    padding:0 30px;
}

.menu-center ul{
    gap:28px;
}

}



/* MOBILE */

@media (max-width:768px){

.nav-wrapper{
    height:70px;
    padding:0 20px;
}

.logo-area img{
    height:36px;
}

.menu-center{
    position:absolute;
    top:70px;
    left:0;
    width:100%;
    background:#000;
    display:none;
}

.menu-center ul{
    flex-direction:column;
    gap:0;
}

.menu-center ul li{
    padding:15px 0;
}

.menu-center.active{
    display:block;
}

.hamburger{
    display:flex;
}

.menu-right{
    display:none;
}

}