.mobile-navbar {
    display: none;
}
.navigator {
    display: none;
}
@media(max-width:1120px) {
    .mobile-navbar {
        padding-bottom: 80px;
        display: none;
        height: calc(100vh);
        z-index: 4;
        width: 100%;
        background-color: #fff;
        left: 0;
        top: 0;
        position: fixed;
        padding-top: 62px;
        border-top: 1px solid #E5E5E5;
        overflow: scroll;
    }
    .mobile-navbar::-webkit-scrollbar {
        display: none;
    }
    .mobile-navbar .wrapper {
        padding: 14px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        border-bottom:1px solid #E5E5E5;
        box-shadow: 0px 4px 40px #00000012;
    }

    .mobile-navbar ul{
        padding:0px 16px;
        display: flex;
        flex-direction: column;
        list-style: none;
    }
    /* новое меню */
    .header-navigation {
        margin-top: 24px;
    }
    .mobile-navbar.active .mobile-menu-header {
        align-items: center;
        background-color: #f6f6f6;
        display: grid;
        grid-auto-flow: column;
        height: 56px;
        justify-content: space-between;
        padding: 0 var(--offset);
        margin-top: 6px;
    }
    
    .mobile-navbar.active .mobile-menu-header>.btn {
        padding: 12px
    }
    .mobile-navbar.active {
        display: block;
        /*height: 100%;*/
        width: 100%
    }
    
    .mobile-navbar.active:not(.navigated) .mobile-navbar.active-header {
        /*display: none*/
    }
    
    .mobile-navbar.active .scroller>ul {
        /*overflow-x: hidden;
        overflow-y: auto;
        transform: translate(0)*/
    }
    
    .mobile-navbar.active .menu-item-has-children>.menu-link:after {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2720%27 height=%2720%27 fill=%27none%27%3E%3Cpath fill=%27%23333%27 fill-rule=%27evenodd%27 d=%27M7.223 4.223a.762.762 0 0 1 1.078 0l5.238 5.238a.762.762 0 0 1 0 1.078L8.3 15.777a.762.762 0 1 1-1.078-1.078l4.7-4.699-4.7-4.7a.762.762 0 0 1 0-1.077Z%27 clip-rule=%27evenodd%27/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: cover;
        content: "";
        display: flex;
        height: 16px;
        width: 16px
    }
    
    .mobile-navbar.active .btn--popup-back {
        display:flex;
        flex-direction: row;
        align-items: center;
        gap: 4px;
        font-size: 16px;
        line-height: 16px;
        border:none;
        background: transparent;
        height: 100%;
        width: 140px;
    }
    
    .mobile-navbar.active .btn--popup-back span {
        margin-top: 1px
    }
    
    .mobile-navbar.active .btn--popup-back:before {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2720%27 height=%2720%27 fill=%27none%27%3E%3Cpath fill=%27%23333%27 fill-rule=%27evenodd%27 d=%27M7.223 4.223a.762.762 0 0 1 1.078 0l5.238 5.238a.762.762 0 0 1 0 1.078L8.3 15.777a.762.762 0 1 1-1.078-1.078l4.7-4.699-4.7-4.7a.762.762 0 0 1 0-1.077Z%27 clip-rule=%27evenodd%27/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: cover;
        content: "";
        display: flex;
        height: 20px;
        transform: rotate(180deg);
        width: 20px
    }
    
    .mobile-navbar.active li {
        list-style: none;
    }
    .mobile-navbar.active li a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        color: var(--wp--preset--color--dark);
        font-size: 18px;
        text-decoration: none;
        padding: 12px 0px;
    }
    
    .mobile-navbar.active:not(.navigated) .btn--popup-back {
        /*display: none*/
    }
    .mobile-navbar.active .mobile-navigation .menu-link {
        align-items: center;
        display: flex;
        justify-content: space-between;
        padding: 0px 0;
        font-size: 16px;
        line-height: 21.86px;
    }
    .mobile-navbar.active .mobile-navigation .sub-menu {
        flex-direction: column;
        gap: 16px;
    }
    
    .mobile-navbar.active .mobile-navigation .header-menu-list {
        height: 100%;
        left: 0;
        margin: 0;
        padding: 0;
        /*position: absolute;
        top: 0;
        transform: translateX(100vw);*/
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    
    .mobile-navbar.active .mobile-navigation ul.children {
        /*height: calc(var(--window-inner-height) - 104px)*/
    }
    
    .mobile-navbar.active .mobile-navigation li {
        background: var(--bg-color);
        display: block;
        width: 100%
    }
    
    .mobile-navbar.active .mobile-navigation .menu-item--selected>ul {
        background-color: var(--menu--screen-background,#fff);
        /*transform: translateX(0)*/
    }
    .mobile-navbar.active .sub-menu .menu-link {
        display: none;
    }
    .mobile-navbar.active .menu.opened .menu-link {
      display: none;
    }
    .mobile-navbar.active .sub-menu.opened {
      display: flex;
      padding: 0px;
    }
    .mobile-navbar.active .sub-menu.opened > .menu-item > .menu-link {
      display: flex;
    }
    .mobile-navbar .mobile-menu-header:not(.show) {
        display: none;
    }
    .navigator {
        padding: 12px 0px;
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #ffff;
        justify-content: space-between;
        z-index: 10;
        box-shadow:0px 0px 50px #00000012;
    }
    .navigator .navigator-item {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 25%;
        font-weight: 500;
        font-size: 10px;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        color: var(--wp--preset--color--dark);
        text-align: center;

    }
    .navigator .navigator-item::before {
        content: "";
        display: block;
        width: 24px;
        height: 24px;
        background-color: var(--wp--preset--color--dark);
        mask-size: cover;
        mask-repeat: no-repeat;
    }
    .navigator .navigator-item.home::before {
        mask-image: url('../vectors/home.svg');
    }
    .navigator .navigator-item.service::before {
        mask-image: url('../vectors/service.svg');
    }
    .navigator .navigator-item.project::before {
        mask-image: url('../vectors/projects.svg');
    }
    .navigator .navigator-item.contact::before {
        mask-image: url('../vectors/contact.svg');
    }
    .navigator .navigator-item.active {
        color: var(--wp--preset--color--second);
    }
    .navigator .navigator-item.active::before {
        background-color: var(--wp--preset--color--second);
    }
    .mobile-header-bot {
        margin-top: 12px;
        padding: 12px;
    }
    .mobile-header-bot .custom-button {
        width: 100%;
        font-size: 16px;
        background-color: var(--wp--preset--color--second);
        height: 52px;
    }
    .mobile-header-bot .divider {
        margin-top: 32px;
        width: 100%;
        height: 1px;
        background-color: #E5E5E5;
    }
    .mobile-header-bot .mobile-header-bot_wrapper {
        margin-top: 24px;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    .mobile-header-bot_wrapper .contact-block {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .contact-block .label {
        font-weight: 400;
        font-size: 14px;
        line-height: 1em;
        letter-spacing: 0em;
        color: #737373;
    }
    .contact-block .phone {
        margin-top: 6px;
        color: var(--wp--preset--color--dark);
        font-size: 18px;
        font-weight: 700;
        text-decoration: none;
    }
    .contact-block .contact-block__content {
        color: var(--wp--preset--color--dark);
        font-size: 16px;
        font-weight: 500;
        text-decoration: none;
    }
    .mobile-header-bot_wrapper .social-wrap {
        display: flex;
        justify-content: space-between;
    }
    .mobile-header-bot_wrapper .social-wrap .social-item {
        position: relative;
        display: block; 
        width: 50px;
        height: 50px;
        overflow: hidden;
        border-radius: 50%;
    }
    .mobile-header-bot_wrapper .social-wrap .social-item svg {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
    }
}