/* =================================
   BELGRAVE GLASS NAVBAR
================================= */

.navbar {

    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);

    width: min(1200px, 92%);

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

    padding: 16px 24px;

    background:
    rgba(255,255,255,0.08);

    backdrop-filter:
    blur(18px);

    -webkit-backdrop-filter:
    blur(18px);

    border:
    1px solid rgba(255,255,255,0.18);

    border-radius: 18px;

    z-index:1000;

}


/* LOGO AREA */

.logo-container {

    display:flex;
    align-items:center;
    gap:14px;

}


.logo {

    width:48px;
    height:48px;

    object-fit:contain;

}


.brand {

    line-height:1;

}


.brand h2 {

    font-family:
    "Playfair Display",
    serif;

    font-size:20px;

    color:white;

    margin:0;

}


.brand span {

    font-size:11px;

    letter-spacing:2px;

    text-transform:uppercase;

    color:
    rgba(255,255,255,.65);

}



/* NAV LINKS */

.navbar nav {

    display:flex;

    gap:34px;

}


.navbar nav a {

    text-decoration:none;

    color:
    rgba(255,255,255,.85);

    font-size:14px;

    transition:.3s;

}


.navbar nav a:hover {

    color:white;

}



/* BUTTON AREA */

.nav-actions {

    display:flex;

    align-items:center;

    gap:12px;

}


.nav-login {

    color:white;

    text-decoration:none;

    padding:10px 18px;

    border-radius:12px;

    border:
    1px solid rgba(255,255,255,.25);

}



.nav-open {

    text-decoration:none;

    color:#111;

    background:white;

    padding:11px 20px;

    border-radius:12px;

    font-weight:600;

}
/* =================================
   TABLET / MOBILE NAVBAR
================================= */

@media(max-width:900px){

    .navbar{

        top:12px;

        width:calc(100% - 24px);

        padding:12px 16px;

        border-radius:16px;

    }


    .logo-container{

        gap:10px;

    }


    .logo{

        width:40px;

        height:40px;

    }


    .brand h2{

        font-size:17px;

    }


    .brand span{

        font-size:9px;

        letter-spacing:1.5px;

    }


    .navbar nav{

        display:none;

    }


    .nav-actions{

        gap:8px;

    }


    .nav-login{

        padding:8px 12px;

        font-size:13px;

    }


    .nav-open{

        padding:9px 12px;

        font-size:12px;

    }


}



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

.menu-toggle{

    display:none;

    background:none;

    border:none;

    color:white;

    font-size:26px;

    cursor:pointer;

}



/* Hidden by default */

.mobile-menu{

    display:none;

}



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

@media(max-width:900px){


    .navbar{

        top:12px;

        width:calc(100% - 24px);

        padding:12px 16px;

        border-radius:16px;

    }


    .navbar nav{

        display:none;

    }


    .nav-actions{

        display:none;

    }


    .menu-toggle{

        display:block;

        order:3;

    }


    .mobile-menu{

        position:fixed;

        top:80px;

        left:50%;

        transform:translateX(-50%);

        width:calc(100% - 24px);

        padding:25px;

        background:
        rgba(10,20,35,.95);

        backdrop-filter:blur(20px);

        border-radius:18px;

        border:1px solid rgba(255,255,255,.15);

        display:none;

        flex-direction:column;

        gap:20px;

        z-index:999;

    }


    .mobile-menu.active{

        display:flex;

    }


    .mobile-menu a{

        color:white;

        text-decoration:none;

        font-size:16px;

    }


    .mobile-menu-actions{

        display:flex;

        flex-direction:column;

        gap:12px;

        margin-top:10px;

    }


    .mobile-menu-actions a:last-child{

        background:white;

        color:#111;

        padding:12px;

        text-align:center;

        border-radius:12px;

    }


}



/* =================================
   SMALL PHONES
================================= */

@media(max-width:480px){


    .navbar{

        width:calc(100% - 20px);

        padding:10px 12px;

    }


    .logo{

        width:36px;

        height:36px;

    }


    .brand h2{

        font-size:15px;

    }


    .brand span{

        display:none;

    }


}