/* ==========================================
   AI Future Hub - Global
   Premium Navigation
========================================== */

header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    display: flex;
    justify-content: center;

    z-index: 9999;

    padding: 25px 0;

    transition: .4s;

}

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

.navbar {

    width: min(1400px, 92%);

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 18px 35px;

    border-radius: 22px;

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

    backdrop-filter: blur(25px);

    -webkit-backdrop-filter: blur(25px);

    border:

        1px solid rgba(255, 255, 255, .12);

    box-shadow:

        0 0 40px rgba(0, 0, 0, .35),

        inset 0 0 0 1px rgba(255, 255, 255, .05);

}

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

.logo {

    font-size: 30px;

    font-weight: 800;

    letter-spacing: 1px;

    color: white;

    cursor: pointer;

    user-select: none;

}

.logo span {

    background:
        linear-gradient(90deg,
            #00E5FF,
            #7B61FF,
            #FF4DFF,
            #00E5FF);

    background-size: 300%;

    background-clip: text;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    color: transparent;

    animation:

        logoRGB 8s linear infinite;

}

@keyframes logoRGB {

    from {

        background-position: 0%;

    }

    to {

        background-position: 300%;

    }

}

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

.nav-links {

    display: flex;

    gap: 35px;

    list-style: none;

}

.nav-links li {

    position: relative;

}

.nav-links a {

    color: white;

    text-decoration: none;

    font-size: 15px;

    font-weight: 500;

    transition: .35s;

    letter-spacing: .5px;

}

/* Hover */

.nav-links a:hover {

    color: #00E5FF;

}

/* Animated Underline */

.nav-links li::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 0;

    height: 2px;

    background:

        linear-gradient(90deg,
            #00E5FF,
            #7B61FF);

    border-radius: 50px;

    transition: .35s;

}

.nav-links li:hover::after {

    width: 100%;

}

/* ==========================
   Launch Button
========================== */

.nav-btn {

    text-decoration: none;

    color: white;

    padding: 14px 32px;

    border-radius: 50px;

    font-weight: 600;

    background:

        linear-gradient(135deg,
            #00E5FF,
            #7B61FF);

    box-shadow:

        0 0 25px rgba(0, 229, 255, .35);

    transition: .35s;

}

.nav-btn:hover {

    transform:

        translateY(-4px);

    box-shadow:

        0 0 45px rgba(0, 229, 255, .6);

}

/* ==========================
   Scroll Effect
========================== */

header.scrolled {

    padding: 15px 0;

}

header.scrolled .navbar {

    background:

        rgba(6, 10, 25, .78);

    border:

        1px solid rgba(0, 229, 255, .18);

}

/* ==========================
   Floating Animation
========================== */

.navbar {

    animation:

        floatNav 8s ease-in-out infinite;

}

@keyframes floatNav {

    0% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(-3px);

    }

    100% {

        transform: translateY(0px);

    }

}

/* ==========================
   Responsive
========================== */

@media(max-width:1000px) {

    .nav-links {

        display: none;

    }

    .nav-btn {

        display: none;

    }

    .logo {

        font-size: 26px;

    }

    .navbar {

        padding: 18px 25px;

    }

}