/*==================================
HEADER
==================================*/

.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:1000;

    background:

    rgba(
        5,
        8,
        22,
        .8
    );

    backdrop-filter:

    blur(
        20px
    );

    border-bottom:

    1px solid
    var(--border);

}

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

.logo{

    display:flex;

    align-items:center;

    gap:15px;

}

.logo img{

    width:60px;

}

.logo h3{

    color:
    white;

}

.logo span{

    display:block;

    font-size:
    .7rem;

    color:
    var(--muted);

    max-width:
    220px;

}

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

.nav-links{

    display:flex;

    align-items:center;

    gap:35px;

}

.nav-links a{

    position:relative;

    color:
    var(--white);

    transition:
    .3s ease;

}

.nav-links a:hover{

    color:
    var(--cyan);

}

.nav-links a::after{

    content:"";

    position:absolute;

    bottom:-8px;

    left:0;

    width:0;

    height:2px;

    background:
    var(--cyan);

    transition:
    .3s ease;

}

.nav-links a:hover::after{

    width:100%;

}

/*==================================
ACTIONS
==================================*/

.nav-actions{

    display:flex;

    align-items:center;

    gap:20px;

}

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

.mobile-toggle{

    display:none;

    background:none;

    color:white;

    font-size:
    2rem;

    cursor:pointer;

}

/*==================================
SCROLLED
==================================*/

.header.scrolled{

    background:

    rgba(
        5,
        8,
        22,
        .95
    );

    box-shadow:

    0 10px 30px

    rgba(
        0,
        0,
        0,
        .3
    );

}

@media(
max-width:1100px
){

    .nav-links{

        display:none;

    }

    .mobile-toggle{

        display:block;

    }

    .logo span{

        display:none;

    }

}