.header__nav {
    margin: 60px 0
}

.header__nav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-column-gap: 60px;
    -moz-column-gap: 60px;
    column-gap: 60px;
    row-gap: 20px
}

.header__nav ul li {
    font-size: 16px;
    position: relative;
    white-space: nowrap
}

.header__nav ul li::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #ff7a00;
    bottom: -5px;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transition: -webkit-transform .4s;
    transition: -webkit-transform .4s;
    transition: transform .4s;
    transition: transform .4s, -webkit-transform .4s;
    border-radius: 20px
}

.header__nav ul li:hover::before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
}

@media screen and (max-width: 768px) {
    .header {
        display: none
    }
}