.nav__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 21px 8vw;

    .nav__links {
        display: flex;
        align-items: center;
        gap: 32px;

        .link{
            position: relative;
        }

        .link.active::after{
            content: '';
            position: absolute;
            bottom: -4px;
            width: 0;
            left: 0;
            height: 2px;
            background-color: var(--primary-color);
            width: 100%;
        }
    }

    .menu__center {
        display: none;
        width: 30px;
    }

    .menu__center:before,
    .menu__center:after,
    .menu__center div {
        background: var(--primary-color);
        content: "";
        display: block;
        height: 3px;
        border-radius: 3px;
        margin: 4px 0;
        transition: 0.5s;
    }

    .active__menu:before {
        transform: translateY(5px) rotate(135deg);
    }

    .active__menu:after {
        transform: translateY(-10px) rotate(-135deg);
    }

    .active__menu div {
        transform: scale(0);
    }
}