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

.navbar{

    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20px 10%;

    position: fixed;

    top: 0;
    left: 0;

    z-index: 1000;

    background:
    rgba(15,23,42,0.65);

    backdrop-filter: blur(14px);

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

    transition: 0.4s ease;
}

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

.logo{

    font-size: 28px;

    font-weight: 700;

    font-family: 'Poppins', sans-serif;

    color: var(--primary-color);

    letter-spacing: 1px;

    transition: 0.4s ease;
}

.logo:hover{

    text-shadow:
    0 0 15px var(--glow-color);
}

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

.nav-links{

    display: flex;

    gap: 30px;

    align-items: center;
}

/* =========================
   NAV ITEMS
========================= */

.nav-links li a{

    position: relative;

    font-size: 16px;

    font-weight: 500;

    padding: 10px 16px;

    border-radius: 10px;

    color: var(--text-secondary);

    transition: 0.35s ease;
}

/* =========================
   HOVER EFFECT
========================= */

.nav-links li a:hover{

    color: var(--primary-color);

    background:
    rgba(103,232,249,0.08);

    box-shadow:
    0 0 12px rgba(103,232,249,0.18);

    transform:
    translateY(-2px);
}

/* =========================
   ACTIVE LINK
========================= */

.nav-links li a.active{

    color: var(--primary-color);

    background:
    rgba(103,232,249,0.08);

    box-shadow:
    0 0 12px rgba(103,232,249,0.18);
}

/* =========================
   UNDERLINE EFFECT
========================= */

.nav-links li a::after{

    content: '';

    position: absolute;

    left: 50%;
    bottom: -4px;

    width: 0%;
    height: 2px;

    border-radius: 50px;

    background:
    linear-gradient(
        to right,
        var(--primary-color),
        var(--secondary-color)
    );

    transition: 0.35s ease;

    transform:
    translateX(-50%);
}

/* HOVER */

.nav-links li a:hover::after{

    width: 80%;
}

/* ACTIVE */

.nav-links li a.active::after{

    width: 80%;
}

/* =========================
   NAVBAR SCROLL EFFECT
========================= */

.navbar.scrolled{

    background:
    rgba(15,23,42,0.85);

    box-shadow:
    0 0 20px rgba(103,232,249,0.08);
}

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

@media(max-width:992px){

    .navbar{

        padding: 18px 8%;
    }

    .nav-links{

        gap: 18px;
    }

    .nav-links li a{

        font-size: 15px;

        padding: 8px 12px;
    }
}

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

@media(max-width:768px){

    .navbar{

        flex-direction: column;

        gap: 18px;

        padding: 16px 6%;
    }

    .logo{

        font-size: 24px;
    }

    .nav-links{

        flex-wrap: wrap;

        justify-content: center;

        gap: 14px;
    }

    .nav-links li a{

        font-size: 14px;

        padding: 8px 12px;
    }
}