.main-header-content {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}

.header-menu {
    display: flex;
}

.header-menu > .menu {
    height: 100%;
}

.menu-desktop {
    display: flex;
}

.menu-link {
    display: flex;
    height: 100%;
    align-items: center;
    color: #000;
    padding: 0 20px;
    cursor: pointer;
    font-size: .9rem;
}

.menu-link.icon-arrow-down:after {
    content: '';
    display: block;
    padding: 4px;
    background-image: url('/assets/img/arrow-down.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    margin-left: 7px;
}

.submenu {
    position: absolute;
    background-color: #fff;
    box-shadow: 0 2px 3px rgba(0,0,0,0.2);
    opacity: 0;
    visibility: hidden;
}

.submenu .menu-item {
    height: 48px;
}

.menu-item:hover > .menu-link {
    color: var(--theme-color);
}

.menu-item:hover .submenu {
    opacity: 1;
    visibility: visible;
}

.menu-item:hover .menu-link.icon-arrow-down:after { 
    background-image: url('/assets/img/arrow-down-theme.svg');
}

.header-menu-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 20px 15px;
}

.header-menu-mobile-toggle:hover {
    background-color: #f5f5f5;
}

.menu-mobile {
    display: none;
}

@media (max-width: 767px) {
    .menu-mobile {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        transition: ease-in-out .3s all;
        width: 100%;
        height: 100%;
        max-width: 300px;
        background: #fff;
        z-index: 20;
        box-shadow: -1px 0 10px rgba(0,0,0,0.2);
        transform: translatex(-130%);
    }

    body.opened-mobile-menu .menu-mobile {
        transform: translateX(0);
    }

    .menu-mobile .menu-link {
        padding: 0 15px;
        height: 48px;
    }

    .menu-mobile .menu-item {
        border-top: 1px solid #e8e8e8;
    }

    .menu-mobile-header {
        display: flex;
        height: var(--header-height);
        align-items: center;
        padding: 0 15px;
        justify-content: space-between;
    }

    .menu-mobile-title {
        font-size: 1.3rem;
        font-weight: bold;
    }

    .menu-mobile-close {
        display: inline-block;
        width: 30px;
        height: 30px;
        padding: 5px;
        cursor: pointer;
    }

    .menu-mobile-close:hover {
        background: #f5f5f5;
    }
}