.top-menu {
    flex-direction: row;
    display: flex;
    position: relative;
}

.top-menu__item {
    list-style-type: none;
    margin-right: 2.5rem;
    padding: 2rem 0;
    white-space: nowrap;
    cursor: pointer;
}

@keyframes moveUpDown {
    0% {
        top: -2.4rem;
    }

    25% {
        top: -2.3rem;
    }

    50% {
        top: -2.2rem;
        opacity: .5;
    }

    75% {
        top: -2.1rem;
        opacity: .8;
    }

    100% {
        top: -2rem;
        opacity: 1;
    }
}

.top-menu-for-after {
    position: relative;
}

.top-menu-for-after::after {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    border-top: .2rem solid transparent;
    animation: none;
    opacity: 0;
}

.top-menu__item:hover .top-menu-for-after::after {
    transition: all .1s ease .1s;
    border-top: .3rem solid var(--white-color);
    border-radius: .6rem;
    animation: moveUpDown .1s ease forwards;
    opacity: .8;
}

.top-menu__item:hover>a {
    transition: all .1s ease .1s;
    opacity: .8;
}


.top-menu_submenu-title {
    padding-left: 3.5rem;
    font-weight: 600;
    padding-top: 2rem;
    cursor: pointer;
}

.top-menu__box {
    list-style-type: none;
    max-width: 25%;
    min-width: 20%;
}

.top-menu__box--max-width-fit-content {
    max-width: fit-content;
}

.top-menu__submenu-box {
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 1rem;
    padding: 2.2rem 2.5rem 0 2.5rem;
    margin-bottom: 2rem;
}

.top-menu__submenu-subbox {
    display: grid;
    gap: .6rem;
    padding-top: 1rem;
}


.top-menu__submenu-subbox--padding-top-0 {
    padding-top: 0;
}

.top-menu__sub-item,
.top-menu__sub-sub-item {
    list-style-type: none;
    font-size: 1.5rem;
    line-height: 1.4;
}

.top-menu__sub-item a:hover,
.top-menu__sub-sub-item a:hover {
    border-bottom: .1rem solid var(--white-color);
    padding-bottom: .3rem;
    opacity: .8;
}

.a--title {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.4rem;
    /* word-wrap: break-word; */
}

.header__top-menu {
    font-size: 1.8rem;
    display: flex;
    background-color: var(--default-color);
    box-shadow: 0 6px 16px #e6ebf5cc;
}


/* крестик бургер - начало */
.close-menu-burger-wrap {
    display: none;
    position: absolute;
    height: 2.5rem;
    right: 0;
    width: 2.5rem;
    cursor: pointer;
    margin-right: 2rem;
    top: 1.5rem;
}


.close-menu-burger::before,
.close-menu-burger::after {
    display: block;
    background-color: var(--black-color);
    position: absolute;
    height: .2rem;
    width: 2rem;
    border-radius: .2rem;
}

.close-menu-burger::before {
    content: '';
    margin-top: 1.6rem;
    transform: rotate(45deg);
}

.close-menu-burger::after {
    content: '';
    margin-top: 1.6rem;
    transform: rotate(-45deg);
}

/* крестик бургер - конец */

.neader__top-menu-box-contacts {
    display: none;
}

@media (min-width: 946px) {
    .top-menu__submenu-box--border::after {
        content: "";
        display: block;
        height: calc(100% - 2rem);
        width: .1rem;
        background: var(--white-color);
        position: absolute;
        right: -.3rem;
    }

    .top-menu__submenu-box--border::after

    .top-menu__item ul {
        transition: none;
    }

    .top-menu_submenu {
        display: flex;
        position: absolute;
        background-color: var(--default-color);
        width: 100%;
        height: 0;
        left: 0;
        top: 6.0rem;
        justify-content: space-between;
        border-top: .2rem solid var(--white-color);
        z-index: 9;
        border-radius: .6rem;
        white-space: normal;
        opacity: 0;
        visibility: hidden;
        cursor: auto;
        box-shadow: 0 6px 16px #e6ebf5cc;
    }

    .top-menu_submenu--one-column {
        left: auto;
        width: auto;
    }

    .active-submenu {
        opacity: 1;
        visibility: visible;
        height: auto;
    }

}

@media (max-width: 945px) {
    .arrow {
        width: 1rem;
        height: 1rem;
        border-top: .2rem solid var(--black-color);
        border-right: .2rem solid var(--black-color);
        display: inline-block;
        position: absolute;
        right: .5rem;
        transform: rotate(45deg);
        transition: all .05s ease .05s;
        margin-top: 0.5rem;
        margin-right: 1rem;
    }

    .arrow--left {
        width: 1rem;
        height: 1rem;
        border-top: .2rem solid var(--black-color);
        border-right: .2rem solid var(--black-color);
        display: inline-block;
        position: absolute;
        left: 1.5rem;
        transform: rotate(-135deg);
        transition: all .05s ease .05s;
        margin-top: 0.5rem;
    }

    .header__top-menu {
        position: fixed;
        height: 100%;
        top: 0;
        visibility: hidden;
        left: -999rem;
        padding-top: 2rem;
        z-index: 9;
        display: flex;
        flex-direction: column;
        overflow: auto;
        background-color: var(--primary-color);
        color: var(--black-color);
    }

    .top-menu__sub-item,
    .top-menu__sub-sub-item {
        font-size: 1.4rem;
    }

    .top-menu__item a,
    .top-menu__item span {
        color: var(--black-color);
    }

    .top-menu {
        flex-direction: column;
        z-index: 2;
    }

    .top-menu__item {
        padding: 1rem 0;
        margin-right: 0;
        border-bottom: .1rem solid rgb(220, 223, 228);
    }

    .top-menu__item:hover .top-menu-for-after::after {
        transition: none !important;
        border-top: none !important;
        border-radius: 0 !important;
        animation: none !important;
        opacity: 1 !important;
    }

    .top-menu__item:hover>a {
        transition: none !important;
        opacity: 1 !important;
    }

    .top-menu__sub-item:hover a {
        border-bottom: none;
        padding-bottom: .3rem;
        opacity: 1;
    }

    .top-menu__submenu-box {
        padding: 2rem 0 1rem 1.5rem;
        margin: 0;
        border-bottom: .1rem solid rgb(220, 223, 228);
    }

    /* .a--title {
        font-weight: 500;
        text-transform: none;
    } */

    .top-menu__box {
        max-width: 100%;
    }

    .neader__top-menu-box-contacts a {
        color: var(--black-color);
    }

    .neader__top-menu-box-contacts {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding-top: 2rem;
        padding-left: 2rem;
        font-size: 1.6rem;
    }

    /* .top-menu__submenu-box--border-only-mobil::after {
        content: "";
        display: block;
        height: calc(100% - 2rem);
        width: .1rem;
        position: absolute;
        right: -.3rem;
    }

    .top-menu__submenu-box--border::after,
    .top-menu__submenu-box--border-only-mobil::after {
        background: var(--black-color)
    }

    .top-menu__submenu-box--border::before,
    .top-menu__submenu-box--border-only-mobil::before {
        content: "";
        display: block;
        height: 1.5rem;
        width: 0.1rem;
        background: var(--black-color);
        position: absolute;
        transform: rotate(45deg);
        right: -0.8rem;
        bottom: 1.7rem;
    } */

    .top-menu__sub-sub-item {
        padding-top: .5rem;
    }

    .close-menu-burger-wrap {
        display: block;
        z-index: -1;
    }

    .close-menu-burger-wrap--sub {
        display: block;
        z-index: 0;
    }

    .header__top-menu {
        transform: translateY(-100%);
    }

    /* Стили для подменю */
    .top-menu_submenu {
        /* transform: translateX(300%); */
        transform: translate3d(300%, 0, 0);
        transition: transform 0.3s ease-out;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color: var(--primary-color);
        overflow: hidden;
        cursor: auto;
        padding-top: 2rem;
        white-space: normal;
    }

    .top-menu__submenu-subbox {
        height: 0;
        opacity: 0;
        visibility: hidden;
        padding: .5rem 0 1rem 4rem;
        gap: 1rem;
    }


    .top-menu_submenu--actionMob {
        height: 100%;
        /* width: 100%; */
        display: flex;
        flex-direction: column;
        opacity: 1;
        visibility: visible;
        position: fixed;
        overflow-y: auto;
        transform: translateX(0);
        z-index: 1;
    }

    .top-menu__submenu-subbox--actionMob {
        opacity: 1;
        visibility: visible;
        /* overflow-y: auto; */
        height: 100%;
    }

    .mob-icon-pohron:after,
    .mob-icon-cemetery:after,
    .mob-icon-mysylman:after,
    .mob-icon-catolic:after,
    .mob-icon-balzam:after,
    .mob-icon-voen:after,
    .mob-icon-deti:after,
    .mob-icon-covid19:after,
    .mob-icon-peper:after,
    .mob-icon-panihida::after,
    .mob-icon-tualet::after,
    .mob-icon-pamiatnik::after,
    .mob-icon-izgorod::after,
    .mob-icon-svechi::after,
    .mob-icon-yrna::after,
    .mob-icon-car2::after,
    .mob-icon-podgotovka-tela::after,
    .mob-icon-grob::after,
    .mob-icon-krest::after,
    .mob-icon-venok::after,
    .mob-icon-car::after,
    .mob-icon-phone::after,
    .mob-icon-mesto:after,
    .mob-icon-rodovoe:after,
    .mob-icon-kopka:after,
    .mob-icon-razdelenie-praha:after,
    .mob-icon-eksgumaciya:after,
    .mob-icon-perevozka-praha:after,
    .mob-icon-columbariy:after,
    .mob-icon-orkestr:after,
    .mob-icon-trapeza:after,
    .mob-icon-dez:after,
    .mob-icon-gruz200:after,
    .mob-icon-cemetery:after,
    .mob-icon-ambulance:after,
    .mob-icon-roadmap:after,
    .mob-icon-anchor:after,
    .mob-icon-copywriting:after,
    .mob-icon-singumator:after,
    .mob-icon-camera:after,
    .mob-icon-nosilshki-groba::after {
        content: '';
        position: absolute;
        left: 2rem;
        width: 2.5rem;
        height: 2.5rem;
    }

    .mob-icon-camera:after {
        background: url(/wp-content/themes/gosritual/assets/images/camera.svg) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-singumator:after {
        background: url(/wp-content/themes/gosritual/assets/images/singumator.svg) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-copywriting:after {
        background: url(/wp-content/themes/gosritual/assets/images/copywriting.svg) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-anchor:after {
        background: url(/wp-content/themes/gosritual/assets/images/anchor.svg) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-roadmap:after {
        background: url(/wp-content/themes/gosritual/assets/images/roadmap.svg) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-ambulance:after {
        background: url(/wp-content/themes/gosritual/assets/images/ambulance.svg) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-cemetery:after {
        background: url(/wp-content/themes/gosritual/assets/images/cemetery.svg) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-gruz200::after {
        background: url(/wp-content/themes/gosritual/assets/images/gruz200.png) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-dez::after {
        background: url(/wp-content/themes/gosritual/assets/images/dez.png) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-trapeza::after {
        background: url(/wp-content/themes/gosritual/assets/images/trapeza.png) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-orkestr::after {
        background: url(/wp-content/themes/gosritual/assets/images/orkestr.png) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-columbariy::after {
        background: url(/wp-content/themes/gosritual/assets/images/columbariy.png) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-razdelenie-praha::after {
        background: url(/wp-content/themes/gosritual/assets/images/razdelenie-praha.png) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-mesto::after {
        background: url(/wp-content/themes/gosritual/assets/images/mesto.png) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-rodovoe::after {
        background: url(/wp-content/themes/gosritual/assets/images/rodovoe.png) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-kopka::after {
        background: url(/wp-content/themes/gosritual/assets/images/kopka.png) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-eksgumaciya::after {
        background: url(/wp-content/themes/gosritual/assets/images/eksgumaciya.png) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-perevozka-praha::after {
        background: url(/wp-content/themes/gosritual/assets/images/perevozka-praha.png) no-repeat top center;
        background-size: 2rem;
    }


    .mob-icon-cemetery::after {
        background: url(/wp-content/themes/gosritual/assets/images/cemetery.png) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-mysylman::after {
        background: url(/wp-content/themes/gosritual/assets/images/mysylman.png) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-catolic::after {
        background: url(/wp-content/themes/gosritual/assets/images/catolic.png) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-balzam::after {
        background: url(/wp-content/themes/gosritual/assets/images/balzam.png) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-voen::after {
        background: url(/wp-content/themes/gosritual/assets/images/voen.png) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-deti::after {
        background: url(/wp-content/themes/gosritual/assets/images/deti.png) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-covid19::after {
        background: url(/wp-content/themes/gosritual/assets/images/covid19.png) no-repeat top center;
        background-size: 2rem;
    }


    .mob-icon-phone::after {
        background: url(/wp-content/themes/gosritual/assets/images/phone.svg) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-car::after {
        background: url(/wp-content/themes/gosritual/assets/images/car.svg) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-pohron::after {
        background: url(/wp-content/themes/gosritual/assets/images/pohorony.svg) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-peper:after {
        background: url(/wp-content/themes/gosritual/assets/images/stages-peper.svg) no-repeat top center;
        background-size: 1.8rem;
    }

    .mob-icon-venok::after {
        background: url(/wp-content/themes/gosritual/assets/images/stages-venok.svg) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-podgotovka-tela::after {
        background: url(/wp-content/themes/gosritual/assets/images/podgotovka-tela.svg) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-grob::after {
        background: url(/wp-content/themes/gosritual/assets/images/stages-grob.svg) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-krest::after {
        background: url(/wp-content/themes/gosritual/assets/images/stages-krest.svg) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-tualet::after {
        background: url(/wp-content/themes/gosritual/assets/images/tualet-pokoinogo.svg) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-car2::after {
        background: url(/wp-content/themes/gosritual/assets/images/stages-car2.svg) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-panihida::after {
        background: url(/wp-content/themes/gosritual/assets/images/stages-icon.svg) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-nosilshki-groba::after {
        background: url(/wp-content/themes/gosritual/assets/images/nosilshki-groba.svg) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-yrna::after {
        background: url(/wp-content/themes/gosritual/assets/images/stages-yrna.svg) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-svechi::after {
        background: url(/wp-content/themes/gosritual/assets/images/stages-svechi.svg) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-izgorod::after {
        background: url(/wp-content/themes/gosritual/assets/images/stages-izgorod.svg) no-repeat top center;
        background-size: 2rem;
    }

    .mob-icon-pamiatnik::after {
        background: url(/wp-content/themes/gosritual/assets/images/stages-pamiatnik.svg) no-repeat top center;
        background-size: 2rem;
    }
}

.header__top-menu--action {
    visibility: visible;
    left: 0;
    box-shadow: 0 6px 16px #e6ebf5cc;
    width: 100%;
    transform: translateY(0);
    transition: transform 0.3s ease-out;
    overflow-x: hidden;
}

.header__top-menu--blackout::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    /* начальное значение */
    transition: opacity 0.5s ease;
    /* анимация */
    z-index: 1;
}

/* Когда класс активен, изменить opacity на 1 */
.header__top-menu--action.header__top-menu--blackout::after {
    opacity: 1;
}