@media (min-width: 1024px) {
    .menu {
        background-color: #6d6d71;
        width: 100%;
        position: relative;
        z-index: 1000;
    }

    .fixed-menu {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background-color: #6d6d71;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        background-color: #f8d000;
    }

    .menu > ul > li {
        display: inline-block;
        position: relative;
		line-height: 20px;
    }

    /* Перший пункт "Продукція" з існуючою шириною */
    .menu > ul > li:first-child a {
        min-width: 250px; /* або можна задати конкретну ширину, якщо треба */
    }

    /* Наступні пункти з мінімальною шириною 160px */
    .menu > ul > li:not(:first-child) a {
        min-width: 125px;
    }

    .menu a {
        display: block;
        padding: 8px 10px;
        text-decoration: none;
        color: #333;
        background-color: #f8d000;
        font-family: 'Didact Gothic', Arial, sans-serif;
    }

    .menu a:hover {
        background-color: #e0be00;
        color: #fff;
    }
	
	.banner-content{
		left: 300px !important;
		bottom: 20px !important;
	}

    /* Плавний перехід для всіх підпунктів */
.menu ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    min-width: 200px;
    background-color: #f8d000;
    transition: max-height 0.4s ease, opacity 0.4s ease;
    z-index: 1500;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.menu ul ul ul {
    top: 0;
    left: 100%;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    min-width: 200px;
    background-color: #f8d000;
    transition: max-height 0.4s ease, opacity 0.4s ease;
    z-index: 2000;
}

.menu ul li:hover > ul {
    max-height: 800px;
    opacity: 1;
    overflow: visible;
}

.menu ul ul li:hover > ul {
    max-height: 800px;
    opacity: 1;
    overflow: visible;
}

.menu > ul > li {
    display: inline-block;
    position: relative;
    margin-right: 10px; /* Відступ між основними пунктами меню */
}
.menu > ul > li.active > a {
    background-color: #e0be00;
    color: #fff;
}
.menu > ul > li.active > a,
.menu ul ul li.active > a {
    background-color: #e0be00;
    color: #fff;
}


.menu, .menu ul {
    overflow: visible; /* Дозволяє вкладеним елементам бути видимими за межами батьківського контейнера */
}


    .menu a {
        display: flex;
        align-items: center;
        border-bottom: solid 1px #ab8f00;
		box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
    }

    .menu a img {
        margin-right: 10px;
        height: 16px;
    }

    .menu-hidden {
        display: none !important;
    }

    .fixed-menu .menu-hidden {
        display: none !important;
    }

    .submenu-toggle {
        display: none;
    }

.menu.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: #6d6d71;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
}

@media (min-width: 1024px) {
    #menu-icon {
        display: none;
    }

    .menu {
        display: flex;
    }
}

@media (min-width: 1024px) and (max-width: 1416px) {
    .menu.shifted > ul > li {
        margin-top: 0px;
    }

    .menu.shifted > ul > li:nth-child(4) { /* Відступ тільки для першого пункту другого рядка */
        margin-left: 270px;
    }
}

.menu-item.inactive {
    pointer-events: none;
    opacity: 0.5;
    color: #999;
    text-decoration: line-through;
    background-color: #d3d3d3;

    min-width: 250px;
}

.menu-item.inactive:hover {
    background-color: #d3d3d3; /* Залишається сірий фон при наведенні */
    color: #999; /* Сірий текст */
    text-decoration: line-through; /* Перекреслений текст */
}

.menu-item.inactive a {
    color: #999; /* Сірий колір тексту посилання */
    text-decoration: line-through; /* Перекреслення тексту */
}

.menu-item.inactive a:hover {
    color: #999; /* Не змінюється колір при наведенні */
    text-decoration: line-through; /* Перекреслення тексту */
    background-color: #d3d3d3; /* Сірий фон при наведенні */
}