.menu-section .menu-item {
    background-color: #fff;
    text-align: center;
    cursor: pointer;
    color: #151515;
    align-items: center;
    position: relative;
    overflow: hidden;
    transition: background-color 0.1s ease, color 0.1s ease;
}

.menu-section .menu-item .menu-item-content {
    display: flex;
    align-items: center;
    z-index: 2;
    height: 100%;
    background-repeat: no-repeat;
    background-position: right;
    width: 100%;
    transition: filter 0.1s ease;
}

.menu-section .menu-item:hover .menu-item-content,
.menu-section .menu-item.active .menu-item-content {
    filter: brightness(0) invert(1);
}

.menu-section .menu-item:hover,
.menu-section .menu-item.menu-item.active {
    background-color: #154279;
    color: #fff;
    z-index: 99999;
}

.menu-section .menu-item h3 {
    text-align: left;
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.menu-section .menu-item .multiline {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    max-height: 82px;
    text-transform: uppercase;
}
.menu-section .menu-item h3.multiline  span{
    margin: 0;
    padding: 0;
}
.menu-section .menu-item h3.multiline span{
    font-size: 11px;
    letter-spacing: 0.03em;
    font-style: italic;
    text-align: right;
    margin: 0;
    padding: 0;
    line-height: 100%;
    display: block;
}
.submenu-class #menu-unions li,
.submenu-class ul.menu li {
    height: auto;
    border: 1px solid #f4f4ff;
    background-color: #f7f7f7;
}

.submenu-class #menu-unions li:hover,
.submenu-class ul.menu li:hover {
    height: auto;
    border: 1px solid #F6bf41;
    background-color: #F6bf41;
    transition: background-color 0.1s ease, border 0.1s ease;
}

/* Дополнительно стиль для пунктов подменю */
.submenu-class ul.menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.submenu-class ul.menu li {
    padding: 10px 6px;

}

.submenu-class ul.menu li a {
    color: #333;
    text-decoration: none;
    display: block;
    text-align: center;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
}

/* Чтобы при открытии подменю не сдвинуть стрелку по флекс */
.menu-section .menu-item .menu-item-content .fas {
    position: relative;
    z-index: 3;
}

.menu-section {
    padding: 65px 0;
}

.menu-section .container {
    padding: 0;
}

.menu-section h2 {
    text-align: center;
    margin-bottom: 30px;
    color: #1a2a6c;
}

.menu-section .menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* border-right: 1px solid #707070; */
    border-bottom: 1px solid #707070;
}

.menu-section .menu-item {
    position: relative;
    display: flex;
    align-items: center;
    overflow: visible;
    color: #151515;
    cursor: pointer;
     border-top: 1px solid #707070;
    border-left: 1px solid #707070; 
    height: 130px;
}
.menu-section .menu-item:nth-child(2n) {
    /* border-top: 1px solid #707070; */
    border-right: 1px solid #707070;
}
.menu-section .menu-item:nth-child(odd):last-child {
  grid-column: span 2; /* растягиваем на 2 колонки */
    border-right: 1px solid #707070;
}
.menu-section .menu-grid .menu-item-content {
    background: no-repeat right 25px center;
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    background-position: right;
    z-index: 2;
    margin-right: 30px;
    color: black;
}

.menu-section .menu-grid .mobile {
    display: none;
}
.menu-section .menu-item a {
    color: #000 !important;
}
.menu-section .menu-item .menu-item-content .fas {
    font-size: 24px;
    background-image: url('../images/right-grey.svg');
    min-width: 26px;
    height: 25px;
    background-repeat: no-repeat;
    margin-left: 20px;
}

.menu-section .menu-item .menu-item-content:hover .fas {
    background-image: url('../images/right.svg');
}

.menu-section .menu-item.active .menu-item-content .fas {
    background-image: url('../images/double-down.svg');
}

.menu-section .menu-item .icon {
    display: table-cell;
}

.menu-section .menu-item .icon img {
    font-size: 28px;
    padding-right: 20px;
}

.menu-section .menu-item h3 {
    font-weight: 700;
    font-size: 16px;
    line-height: 170%;
    letter-spacing: 0.15em;
    transform: scaleY(1.05);
    padding-right: 80px;
    max-width: calc(100% - 100px);
}

.menu-section .menu-item .multiline {
    max-height: 82px;
    margin-left: 20px;
}

.submenu-class {
    display: none;
    position: absolute;
    top: 100%;
    left: -1px;
    width: calc(100% + 2px);
    background: #f7f7f7;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    text-align: center;
    z-index: 10;
    padding: 20px;
    box-sizing: border-box;
}

.menu-item.active .submenu-class {
    display: block;
    border: 1px solid #747474;
}

.submenu-class #menu-unions,
.submenu-class ul.menu {
    padding: 0px 20px;
    background-color: #f7f7f7;
}

.submenu-class #menu-unions .menu-item,
.submenu-class ul.menu .menu-item {
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 1000px) {
    .menu-section .menu-item h3 {
        font-size: 14px;
    }
}

@media (max-width: 768px) {

    /*menu-section*/
    .menu-section .menu-item h3 {
        max-width: calc(100% - 150px);
        font-size: 12px;
        line-height: 1.5;
    }

    .menu-section {
        padding: 30px 15px;
    }

    .menu-section .container {
        padding: 0;
    }

    .menu-section h3 {
        text-align: center;
        margin-bottom: 30px;
        /* color: #1a2a6c; */
    }

    .menu-section .menu-grid {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }

    .menu-section .menu-item {
        display: block;
        min-height: 61px;
        height: auto;
    }

    .menu-section .menu-item.active {
        border-top: 1px solid #154279;
        background: linear-gradient(to bottom, #154279 61px, #91b1d8 5%) !important;
    }

    .submenu-class #menu-unions li,
    .submenu-class ul.menu li {
        border: none;
        padding: 0 9px;
    }

    .menu-section .menu-item .submenu-class {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        padding-left: 15px;
        background-color: #f7f7f7;
    }

    .menu-section .menu-item.active .submenu-class {
        max-height: 500px;
    }

    .menu-section .menu-item .menu-item-content {
        background: no-repeat right 12px center;
        background-size: 38px;
        height: 61px;
        display: flex;
        align-items: center;
        position: relative;
    }

    .menu-section .menu-item .menu-item-content .fas {
        font-size: 24px;
    }

    .menu-section .menu-item .menu-item-content img {
        margin: auto;
        padding-bottom: 5px;
        bottom: 0;
        position: absolute;
        left: 48%;
    }

    .menu-section .menu-item .menu-item-content .multiline {
        width: 85%;
        padding: 5px 12px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        white-space: normal;
        -webkit-box-orient: vertical;
        font-weight: 800;
        letter-spacing: 0;
        margin-bottom: 0;
        font-size: 11px;
    }

    .menu-section .mobile {
        display: block;
    }

    .menu-section .no-mobile {
        display: none;
    }

    #menu-unions,
    ul.menu {

        background: white;
    }

    #menu-unions li,
    ul.menu li {
        height: 36px !important;
        min-height: 36px;
        padding: 0;
    }

    #menu-unions li.container,
    ul.menu li.container {
        position: relative;
        list-style: none;
        /* отключаем стандартные маркеры */
    }

    #menu-union li:hover {
        border: 1px solid #f6bf41;
    }

    #menu-unions li a,
    ul.menu li a {
        font-size: 10px;
        font-weight: 400;
        color: #707070;
        height: auto;
        line-height: 1;
        vertical-align: middle;
        display: inline-block;
        padding-left: 15px;
    }

    #menu-unions li:hover a,
    ul.menu li:hover a{
        font-size: 11px;
        color: #151515;
    }
}