/* =========================
   Navbar
========================= */


.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:80px;

    z-index:1000;

    background:

    rgba(15,23,42,.75);

    backdrop-filter:blur(15px);

    border-bottom:

    1px solid rgba(255,255,255,.08);

}




.nav-container{

    max-width:1200px;

    height:80px;

    margin:auto;

    padding:0 20px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}





/* Logo */


.brand{

    display:flex;

    align-items:center;

    text-decoration:none;

}



.brand img{

    width:120px;

    max-height:50px;

    object-fit:contain;

    display:block;

}





/* Desktop Menu */


.nav-links{

    display:flex;

    align-items:center;

    gap:25px;

}



.nav-links a{

    color:#cbd5e1;

    text-decoration:none;

    font-size:15px;

    transition:.3s;

}



.nav-links a:hover{

    color:white;

}




.logout-link{

    background:none;

    border:0;

    color:#cbd5e1;

    cursor:pointer;

    font-family:inherit;

    font-size:15px;

}



.logout-link:hover{

    color:#ef4444;

}





/* Hide mobile button on desktop */


.menu-toggle{

    display:none;

}





/* =========================
   Tablet
========================= */


@media(max-width:992px){


.nav-links{

    gap:15px;

}



.brand img{

    width:110px;

}


}





/* =========================
   Mobile
========================= */


@media(max-width:768px){



.navbar{

    height:70px;

}



.nav-container{

    height:70px;

}



.brand img{

    width:90px;

    max-height:40px;

}




/* Hamburger */


.menu-toggle{

    display:block;

    background:none;

    border:0;

    color:white;

    font-size:28px;

    cursor:pointer;

}





/* Mobile Menu */


.nav-links{

    position:absolute;

    top:70px;

    right:15px;

    width:

    calc(100% - 30px);


    display:none;


    flex-direction:column;

    align-items:stretch;


    padding:25px;


    gap:15px;


    background:#0f172a;


    border-radius:20px;


    border:

    1px solid rgba(255,255,255,.1);


    box-shadow:

    0 20px 50px rgba(0,0,0,.4);

}





.nav-links.active{

    display:flex;

}




.nav-links a{

    text-align:center;

    padding:10px;

}





.nav-links .button{

    width:100%;

}





}