/*=========================
HEADER
==========================*/

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:9999;
    background:#fff;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}

nav{
    height:75px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.menu-btn{

    display:none;
    font-size:34px;
    cursor:pointer;
    color:#1565ff;

}

.mobile-btn{
    display:none;
}

/*=========================
MOBILE
==========================*/

@media(max-width:768px){

.logo{

    font-size:32px;
    line-height:1.1;

}

.menu-btn{

    display:block;
    z-index:10001;

}

header .btn{

    display:none;

}

.nav-links{

    position:fixed;

    top:75px;
    left:-100%;

    width:100%;
    height:calc(100vh - 75px);

    background:#fff;

    display:flex;
    flex-direction:column;

    justify-content:flex-start;

    align-items:center;

    padding-top:50px;

    gap:30px;

    transition:.4s;

}

.nav-links.active{

    left:0;

}

.nav-links li{

    list-style:none;

}

.nav-links a{

    text-decoration:none;

    font-size:22px;

    color:#222;

    font-weight:600;

}

.mobile-btn{

    display:block;

    margin-top:30px;

}

.mobile-btn .btn{

    display:inline-block !important;

}

}