.navbar{
    width:90%;
    max-width:1300px;
    margin:25px auto;
    padding:18px 35px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.1);
    border-radius:20px;
    box-shadow:0 20px 40px rgba(0,0,0,.25);
    position:relative;
    z-index:10;
}
.logo{
    font-size:28px;
    font-weight:700;
    color:white;
    letter-spacing:.5px;
    text-decoration:none;
}
.nav-links{
    display:flex;
    align-items:center;
    gap:25px;
    list-style:none;
    margin:0;
    padding:0;
}
.nav-links a{
    color:#cbd5e1;
    text-decoration:none;
    font-size:.95rem;
    font-weight:500;
    transition:.3s;
}
.nav-links a:hover{
    color:white;
}
/* ========================= */
/* LIGHT HEADER */
/* ========================= */

header.light .navbar{
    border:1px solid rgba(0,0,0,.08);
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

header.light .logo{
    color:#0f172a;
}

header.light .nav-links a{
    color:#475569;
}

header.light .nav-links a:hover{
    color:#000000;
    font-size: 1rem;
}

header.light .login-btn{
    background:linear-gradient(135deg,#2d2d2d31,#77777835);
    color:rgb(41, 8, 255)!important;
    box-shadow:0 10px 25px rgba(37,99,235,.35);;
}

header.light .login-btn:hover{
    color:aqua !important;
}

header.light .menu-toggle{
    color:#0f172a;
}
/* ------------------------------------------------------ */

.login-btn,
.signup-btn{
    padding:10px 20px;
    border-radius:12px;
}
.login-btn{
    border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.05);
}
.login-btn:hover{
    background:rgba(255,255,255,.12);
}
.signup-btn{
    background:linear-gradient(135deg,#2563eb,#3b82f6);
    color:white!important;
    box-shadow:0 10px 25px rgba(37,99,235,.35);
}
.signup-btn:hover{
    transform:translateY(-2px);
}
.menu-toggle{
    display:none;
    background:none;
    border:none;
    color:white;
    font-size:30px;
    cursor:pointer;
}
@media(max-width:900px){
    header.light .logo,
    header.light .nav-links a{
    color:#faf8f8;
    }
    /* body{
        padding-top:90px;
    } */
    .navbar{
        width:92%;
        margin:15px auto;
        padding:15px 20px;
        position:fixed;
        top:10px;
        left:50%;
        transform:translateX(-50%);
        z-index:1000;
    }
    .nav-links{
        position:absolute;
        top:75px;
        left:0;
        width:100%;
        display:flex;
        flex-direction:column;
        gap:18px;
        padding:30px 25px;
        background:rgba(15,23,42,.96);
        backdrop-filter:blur(20px);
        -webkit-backdrop-filter:blur(20px);
        border-radius:20px;
        border:1px solid rgba(255,255,255,.1);
        box-shadow:0 25px 50px rgba(0,0,0,.35);
        opacity:0;
        visibility:hidden;
        transform:translateY(-15px);
        transition:.35s ease;
    }
    .nav-links.active{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }
    .logo{
        font-size:24px;
    }
    .menu-toggle{
        display:flex;
        align-items:center;
        justify-content:center;
        width:45px;
        height:45px;
        border-radius:12px;
        background:rgba(255,255,255,.08);
        border:1px solid rgba(255,255,255,.15);
        color:white;
        font-size:26px;
    }
    .nav-links li{
        width:100%;
        text-align:center;
    }
    .nav-links a{
        display:block;
        width:100%;
        padding:12px;
        font-size:1rem;
    }
    .login-btn,
    .signup-btn{
        width:100%;
        padding:12px;
    }
    header.light .login-btn{
        background:linear-gradient(135deg,#2d2d2d31,#77777835);
        color:rgb(245, 245, 248)!important;
    }
}
@media(max-width:480px){
    .navbar{
        width:94%;
        padding:14px 16px;
    }
    .logo{
        font-size:22px;
    }
    .menu-toggle{
        width:40px;
        height:40px;
        font-size:23px;
    }
    .nav-links{
        padding:25px 20px;
    }
}