/**header---------------------------------**/




.header__nav {
    font-family: "proxima-nova","Helvetica",arial,sans-serif;
    font-weight: 400;
    color: #fff;
    --vh: 1.58px;
    box-sizing: inherit;
}

.header__nav-item {
    --vh: 1.58px;
    box-sizing: inherit;
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
    font-family: "proxima-nova-condensed","Helvetica",arial,sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4px;
    position: relative;
    transition: color 100ms;
    color: rgba(255,255,255,.4);
    transition: 0.3s;
}

.header__nav-item:hover {
    color: #fff;
}



.header__nav-item:not(:last-of-type) {
    margin-right: 40px;
}

@media (max-width: 992px) {
    .header__nav .header__nav-item {
        display: none;
    }
    .header--nav-toggle {
        display: flex;
    }
}



.header__nav-item--active {
    color: #fff;
}










/* Normale staat voor de nav-item */
.header__nav-item:after {
    content: "";
    position: absolute;
    transition: transform 400ms cubic-bezier(0.19, 1, 0.22, 1);
    top: 50%;
    left: -2px;
    transform: scaleX(0); /* Verborgen in normale toestand */
    width: 100%;
    height: 1px;
    background-color: #ff671f;
}

/* Actieve staat, voeg de after toe aan de actieve item */
.header__nav-item--active:after {
    transform: scaleX(1); /* Zorg dat het lijntje volledig zichtbaar is */
}