/* =========================================
FILE: navbar.css
========================================= */

.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:999;
    background:rgba(0,0,0,0.75);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(255,255,255,0.05);
}

.navbar{
    height:90px;

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

/* =========================================
LOGO
========================================= */

.logo img{
    height:54px;
    object-fit:contain;
}

/* =========================================
NAV LINKS
========================================= */

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

.nav-links a{
    position:relative;

    color:var(--primary-white);

    font-size:var(--fs-14);
    font-weight:var(--fw-500);

    transition:var(--transition);
}

.nav-links a::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-6px;

    width:0;
    height:2px;

    background:var(--primary-red);

    transition:var(--transition);
}

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

.nav-links a:hover::after{
    width:100%;
}

/* =========================================
RIGHT
========================================= */

.nav-right{
    display:flex;
    align-items:center;
    gap:16px;
}

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

.mobile-menu-btn{
    display:none;

    width:44px;
    height:44px;

    border-radius:12px;

    background:var(--primary-gradient);

    align-items:center;
    justify-content:center;
    flex-direction:column;

    gap:5px;

    cursor:pointer;
}

.mobile-menu-btn span{
    width:20px;
    height:2px;

    background:var(--primary-white);

    border-radius:10px;
}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:992px){

    .mobile-menu-btn{
        display:flex;
    }

    .nav-links{
        position:absolute;
        top:100%;
        left:0;

        width:100%;

        background:#000000;

        flex-direction:column;
        align-items:flex-start;

        padding:25px;

        gap:20px;

        display:none;
    }

    .nav-links.active{
        display:flex;
    }

    .nav-links a{
        width:100%;
        padding-bottom:12px;
        border-bottom:1px solid rgba(255,255,255,0.08);
    }

    .nav-right{
        display:none;
    }

}