/* ==========================================================
   JOSWEBTECH Premium Navbar v1.0
========================================================== */

.navbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:var(--navbar-height);
    z-index:var(--z-navbar);

    background:rgba(3,7,18,.65);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.08);

    transition:all .35s ease;
}

.navbar.scrolled{
    background:rgba(3,7,18,.92);
    box-shadow:0 10px 35px rgba(0,0,0,.45);
}

.nav-container{
    width:min(92%,1280px);
    height:100%;
    margin:auto;

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

/* ==========================
   Logo
========================== */

.logo{
    display:flex;
    align-items:center;
    gap:12px;

    color:var(--white);

    font-family:'Poppins',sans-serif;
    font-size:1.5rem;
    font-weight:700;
}

.logo img{
    width:48px;
    height:48px;
    object-fit:cover;
    border-radius:12px;
}

.logo span{
    color:var(--accent);
}

/* ==========================
   Navigation Links
========================== */

.nav-links{
    display:flex;
    align-items:center;
    gap:35px;

    list-style:none;
}

.nav-links a{

    position:relative;

    color:var(--text);

    font-weight:500;

    transition:.3s;
}

.nav-links a:hover{
    color:var(--white);
}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--gradient-primary);

    transition:.35s;
}

.nav-links a:hover::after,
.nav-links a.active::after{

    width:100%;

}

/* ==========================
   CTA Button
========================== */

.nav-btn{

    padding:12px 22px;

    border-radius:50px;

    background:var(--gradient-primary);

    color:#fff;

    font-weight:600;

    transition:.3s;

    box-shadow:var(--glow);

}

.nav-btn:hover{

    transform:translateY(-3px);

}

/* ==========================
   Hamburger
========================== */

.menu-toggle{

    display:none;

    flex-direction:column;

    gap:6px;

    cursor:pointer;

}

.menu-toggle span{

    width:28px;

    height:3px;

    border-radius:5px;

    background:#fff;

    transition:.35s;

}

.menu-toggle.active span:nth-child(1){

    transform:rotate(45deg) translateY(12px);

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

}

.menu-toggle.active span:nth-child(3){

    transform:rotate(-45deg) translateY(-12px);

}

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

@media(max-width:992px){

.nav-links{

position:fixed;

top:80px;

right:-100%;

width:300px;

height:calc(100vh - 80px);

background:rgba(17,24,39,.95);

backdrop-filter:blur(20px);

flex-direction:column;

justify-content:flex-start;

padding:50px 30px;

gap:30px;

transition:.4s;

border-left:1px solid rgba(255,255,255,.08);

}

.nav-links.active{

right:0;

}

.menu-toggle{

display:flex;

}

.nav-btn{

display:none;

}

}

@media(max-width:600px){

.logo{

font-size:1.2rem;

}

.logo img{

width:42px;

height:42px;

}

.nav-links{

width:100%;

}

}