.site-header {

    position: relative;

    z-index: 1;

}


.site-header ul .active {
    font-weight: 700;
}




.site-header .bar {

    box-sizing: border-box;

    display: flex;

    height: 172px;

    justify-content: space-between;

    padding-top: 36px;

}





.site-header .languages {

    align-items: center;

    display: inherit;

    display: none;

    height: 70px;

}



.site-header .language {

    align-items: center;

    background-color: transparent;

    border: none;

    border-radius: 50%;

    display: flex;

    height: 30px;

    justify-content: center;

    overflow: hidden;

    padding: 0;

    width: 30px;

}



.site-header .language.ro path:first-child {

    fill: var(--color--ro-flag-blue);

}



.site-header .language.ro path:nth-child(2) {

    fill: var(--color--ro-flag-yellow);

}



.site-header .language.ro path:last-child {

    fill: var(--color--ro-flag-red);

}



.site-header .language.en path:first-child {

    fill: var(--color--uk-flag-blue);

}



.site-header .language.en path:nth-child(2) {

    fill: var(--color--white);

}



.site-header .language.en path:nth-child(3) {

    fill: var(--color--ro-flag-red);

}



.site-header .language.en path:nth-child(4) {

    fill: var(--color--white);

}



.site-header .language.en path:last-child {

    fill: var(--color--ro-flag-red);

}



.site-header .language.inactive {

    opacity: 0.5;

}



.site-header .language:first-child {

    margin-right: 20px;

}



.site-header svg {

    flex-shrink: 0;

}





.site-header .menu {

    display: none;

}





.site-header ul {

    border-top: 2px solid var(--color--white-transparent-72);

    color: var(--color--white);

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    font-size: 20px;

    text-transform: uppercase;

}



.site-header li {

    align-items: center;

    display: flex;

    position: relative;

}



.site-header li:not(:last-child)::after {

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

    content: "";

    display: block;

    height: 48px;

    width: 1px;

}



.site-header ul a {

    display: block;

    padding: 24px 32px;

    text-align: center;

    width: 100%;

}



.site-header ul .active::after {

    background-color: var(--color--dodger-blue);

    content: "";

    height: 6px;

    left: 0;

    position: absolute;

    width: 100%;

    top: -4px;

}