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

.header{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:9999;
    transition:var(--transition);

}

.header.scrolled{

    background:rgba(10,15,25,.45);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:0 10px 35px rgba(0,0,0,.12);

}

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

.navbar{

    display:flex;
    align-items:center;
    justify-content:space-between;
    height:var(--navbar-height);
    gap:40px;

}

.navbar-brand{

    display:flex;
    align-items:center;
    z-index:1002;

}

.navbar-brand img{

    height:58px;
    transition:var(--transition);

}

.header.scrolled .navbar-brand img{

    transform:scale(.96);

}

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

.navbar-menu{

    display:flex;
    align-items:center;
    gap:36px;
    list-style:none;
    margin:0;
    padding:0;

}

.navbar-menu a{

    position:relative;
    color:var(--white);
    text-decoration:none;
    font-size:var(--fs-sm);
    font-weight:var(--fw-semibold);
    text-transform:uppercase;
    letter-spacing:.5px;
    transition:var(--transition);

}

.navbar-menu a::after{

    content:"";
    position:absolute;
    left:0;
    bottom:-10px;
    width:0;
    height:2px;
    background:var(--primary);
    transition:var(--transition);

}

.navbar-menu a:hover,
.navbar-menu a.active{

    color:var(--primary);
    text-shadow:0 0 12px rgba(244,180,0,.25);

}

.navbar-menu a:hover::after,
.navbar-menu a.active::after{

    width:100%;

}

/*==================================
    RIGHT
==================================*/

.navbar-right{

    display:flex;
    align-items:center;
    gap:24px;

}

.navbar-phone{

    display:flex;
    align-items:center;
    gap:10px;
    color:var(--white);
    text-decoration:none;
    font-size:var(--fs-md);
    transition:var(--transition);

}

.navbar-phone:hover{

    color:var(--primary);

}

.navbar-btn{

    background:var(--primary);
    color:var(--title);

}

.navbar-btn:hover{

    background:var(--primary-dark);
    color:var(--white);

}

/*==================================
    TOGGLE
==================================*/

.navbar-toggle{

    display:none;
    width:46px;
    height:46px;
    padding:0;
    border:none;
    background:none;
    cursor:pointer;
    position:relative;
    z-index:1002;

}

.navbar-toggle span{

    display:block;
    width:28px;
    height:2px;
    margin:6px auto;
    background:var(--white);
    transition:.35s ease;

}

.navbar-toggle.active span:nth-child(1){

    transform:translateY(8px) rotate(45deg);

}

.navbar-toggle.active span:nth-child(2){

    opacity:0;

}

.navbar-toggle.active span:nth-child(3){

    transform:translateY(-8px) rotate(-45deg);

}

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

@media(max-width:992px){

    .navbar{

        gap:20px;

    }

    .navbar-right{

        display:none;

    }

    .navbar-toggle{

        display:block;

    }

    .navbar-menu{

        position:fixed;
        top:0;
        right:-100%;
        width:320px;
        max-width:85%;
        height:100vh;
        padding:120px 35px 50px;
        background:#0F172A;
        display:flex;
        flex-direction:column;
        justify-content:flex-start;
        align-items:flex-start;
        gap:28px;
        transition:right .35s ease;
        z-index:1000;
        box-shadow:-15px 0 40px rgba(0,0,0,.25);

    }

    .navbar-menu.active{

        right:0;

    }

    .navbar-menu a{

        font-size:16px;
        width:100%;

    }

    .navbar-menu a::after{

        bottom:-6px;

    }

}

@media(max-width:576px){

    .navbar{

        height:80px;

    }

    .navbar-brand img{

        height:48px;

    }

    .navbar-menu{

        width:100%;
        max-width:100%;
        padding:110px 30px 40px;

    }

}