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

.navbar {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: 90px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 3.2%;

    background:
        rgba(
            3,
            4,
            6,
            0.94
        );

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

    backdrop-filter:
        blur(14px);

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

    z-index: 1000;

}


/* =====================================================
   BRAND
===================================================== */

.brand {

    color:
        #f1eee8;

    font-family: "Bodoni MT", Didot, Georgia, serif;

    font-size: 21px;

    font-weight: 700;

    letter-spacing: 3px;

    white-space: nowrap;

    text-shadow: 0 1px 16px rgba(255, 255, 255, 0.12);

}


.brand span {

    color:
        #f0c45e;

    display: inline-block;

    font-family: "Bodoni MT", Didot, Georgia, serif;

    font-size: 1.32em;

    font-weight: 800;

    font-style: italic;

    letter-spacing: -0.04em;

    vertical-align: -1px;

    text-shadow: 0 0 12px rgba(240, 196, 94, 0.34);

}


/* =====================================================
   NAVIGATION
===================================================== */

.nav-links {

    display: flex;

    align-items: center;

    gap: 36px;

    height: 100%;

}


.nav-links a {

    position: relative;

    display: flex;

    align-items: center;

    height: 100%;

    color:
        rgba(
            255,
            255,
            255,
            0.55
        );

    font-size: 10px;

    font-weight: 500;

    letter-spacing: 1.7px;

    transition:
        color 0.3s ease;

}


.nav-links a:hover {

    color:
        #ffffff;

}


.nav-links a.active {

    color:
        var(--gold);

}


.nav-links a.active::after {

    content: "";

    position: absolute;

    bottom: 22px;

    left: 50%;

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background:
        var(--gold);

    transform:
        translateX(-50%);

}


/* =====================================================
   PARTNER BUTTON
===================================================== */

.nav-partner {

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 168px;

    height: 58px;

    padding:
        0 20px;

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

    border-radius: 10px;

    color:
        var(--gold);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1.5px;

    transition:
        background 0.3s ease,
        color 0.3s ease;

}


.nav-partner:hover {

    background:
        var(--gold);

    color:
        var(--black);

}