/* ===========================
        NAVBAR
=========================== */

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

}

.navbar{

    height:76px;

    display:flex;

    justify-content:space-between;

    align-items:center;

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

    backdrop-filter:blur(14px);

    border:1px solid var(--border);

    border-radius:16px;

    margin-top:15px;

    padding:0 35px;

    box-shadow:var(--shadow-sm);

}

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

.logo{

    display:flex;

    align-items:center;

    gap:10px;

    font-family:var(--font-display);

    font-size:24px;

    font-weight:700;

    text-decoration:none;

    color:var(--ink);

    transition:.4s;

}

.logo span{

    font-size:26px;

    color:var(--primary);

}

.logo:hover{

    transform:scale(1.03);

}

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

.menu{

    display:flex;

    align-items:center;

    gap:26px;

    list-style:none;

    flex-wrap:wrap;

    justify-content:flex-end;

}

.menu li{

    position:relative;

}

.menu a{

    text-decoration:none;

    color:var(--ink-soft);

    font-size:15px;

    font-weight:500;

    transition:.4s;

}

/* ===========================
    HOVER ANIMATION
=========================== */

.menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--primary);

    border-radius:10px;

    transition:.4s;

}

.menu a:hover{

    color:var(--primary);

}

.menu a:hover::after{

    width:100%;

}