.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:var(--z-header);

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

    backdrop-filter:blur(12px);

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

    border-bottom:1px solid rgba(0,0,0,.05);

    transition:var(--transition);

}

.header__container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:90px;

    transition:var(--transition);

}

.header__logo{

    display:flex;

    flex-direction:column;

    line-height:1;

    flex-shrink:0;

}

.header__logo span{

    font-size:28px;

    font-weight:700;

    color:var(--primary);

    letter-spacing:2px;

}

.header__logo small{

    margin-top:6px;

    font-size:12px;

    color:var(--gray);

    letter-spacing:4px;

    text-transform:uppercase;

}

.header__nav{

    display:flex;

    align-items:center;

    gap:40px;

}

.header__nav a{

    position:relative;

    font-weight:500;

    color:var(--text);

    transition:var(--transition);

}

.header__nav a:hover{

    color:var(--primary);

}

.header__nav a.active{

    color:var(--primary);

    font-weight:600;

}

.header__nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:var(--transition);

}

.header__nav a:hover::after,
.header__nav a.active::after{

    width:100%;

}

.header__toggle{

    display:none;

    font-size:30px;

    color:var(--text);

}

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

.header--scrolled{

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

    box-shadow:var(--shadow-sm);

}

.header--scrolled .header__container{

    min-height:72px;

}

.header--scrolled .header__logo span{

    font-size:24px;

}

.header--scrolled .header__logo small{

    font-size:11px;

}

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

@media (max-width:992px){

    .header__toggle{

        display:block;

        cursor:pointer;

        background:none;

        border:none;

        z-index:1001;

    }

    .header__nav{

        position:fixed;

        top:90px;

        left:0;

        right:0;

        display:none;

        flex-direction:column;

        align-items:flex-start;

        gap:0;

        background:var(--white);

        box-shadow:var(--shadow-md);

    }

    .header__nav.active{

        display:flex;

    }

    .header__nav a{

        width:100%;

        padding:18px 24px;

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

    }

    .header__nav a::after{

        display:none;

    }

}