.navbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    padding:25px 40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    z-index:1000;
    backdrop-filter:blur(14px);
    background:rgba(0,0,0,0.25);
    border-bottom:1px solid rgba(255,255,255,0.06);
}

.logo{
    font-size:28px;
    font-weight:900;
    letter-spacing:2px;
    color:white;
}

.logo span{
    background:linear-gradient(90deg,#00ffae,#00bfff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.menu-toggle{
    width:72px;
    height:72px;
    border-radius:22px;
    border:none;
    cursor:pointer;
    background:rgba(255,255,255,0.06);
    backdrop-filter:blur(20px);
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    gap:10px;
    transition:0.4s;
    position:relative;
    z-index:2000;
}

.menu-toggle:hover{
    transform:scale(1.08);
    background:rgba(255,255,255,0.12);
}

.menu-toggle span{
    width:32px;
    height:3px;
    border-radius:999px;
    background:white;
    transition:0.4s;
}

.menu-toggle.active span:nth-child(1){
    transform:rotate(45deg) translateY(9px);
}

.menu-toggle.active span:nth-child(2){
    transform:rotate(-45deg) translateY(-9px);
}

.fullscreen-menu{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.94);
    backdrop-filter:blur(30px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:30px;
    z-index:1500;

    opacity:0;
    visibility:hidden;
    transform:scale(1.08);

    transition:
    opacity 0.5s ease,
    transform 0.5s ease,
    visibility 0.5s;
}

.fullscreen-menu.active{
    opacity:1;
    visibility:visible;
    transform:scale(1);
    z-index:2;
}

.fullscreen-menu::before{
    content:'';
    position:absolute;
    width:700px;
    height:700px;
    background:#00ffae;
    filter:blur(180px);
    opacity:0.12;
    border-radius:50%;
    z-index:-1;
}

.fullscreen-menu a{
    color:white;
    text-decoration:none;
    font-size:clamp(42px,6vw,90px);
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:4px;
    position:relative;
    transition:0.35s;
}

.fullscreen-menu a:hover{
    transform:translateX(12px);
    color:#00ffae;
}

.fullscreen-menu a::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-8px;
    width:0%;
    height:4px;
    background:linear-gradient(90deg,#00ffae,#00bfff);
    transition:0.4s;
    border-radius:999px;
}

.fullscreen-menu a:hover::after{
    width:100%;
}

.menu-footer{
    position:absolute;
    bottom:40px;
    color:#777;
    font-size:14px;
    letter-spacing:3px;
}

@media(max-width:768px){

.navbar{
    padding:20px;
}

.menu-toggle{
    width:62px;
    height:62px;
}

.fullscreen-menu{
    gap:20px;
}

}
@media(min-width:768px){
    .fullscreen-menu a{
        font-size:30px;
    }
}