.menu-item-image {
    width: 50px; /* Przykładowa szerokość obrazka */
    transition: transform 0.3s ease;
}

.custom-menu .menu-item:hover {
    transform: scale(1.1);
    z-index: 100;
}

.custom-menu .menu-container {
  display: flex; /* Ustawienie flexbox dla kontenera */
  flex-wrap: wrap; /* Umożliwia zawijanie elementów */
  gap: 20px; /* Odstęp między elementami */
  justify-content: space-between; /* Rozkład elementów na całej szerokości */
  
}

.custom-menu .menu-item {
  position: relative; /* Pozycjonowanie względne, aby obrazek mógł być absolutnie pozycjonowany */
  width: 200px; /* Szerokość każdego elementu */
  height: 100px; /* Wysokość każdego elementu */
  display: flex; /* Flexbox dla zawartości */
  align-items: center; /* Wyśrodkowanie w pionie */
  justify-content: center; /* Wyśrodkowanie w poziomie */
  color: white; /* Kolor tekstu */
  font-size: 18px; /* Wielkość tekstu */
  /*overflow: hidden;  Ukrycie przepełnienia */
  cursor: pointer; /* Wskaźnik kursora */
  transition: transform 0.3s; /* Przejście na efekt skalowania */
  border: 5px solid #003706;
  background-color: #003706; /* Tło elementu */
}

.custom-menu .menu-item:nth-child(even){
    background-color: #004b13; /* Tło elementu */
    border: 5px solid #004b13;
}


.image-overlay {
  position: absolute; /* Absolutne pozycjonowanie */
  top: -100%;
  left: 0px;
  width: 100%;
  height: 100%;
  background-size: cover; /* Dopasowanie obrazka */
  background-position: center; /* Wyśrodkowanie obrazka */
  opacity: 0; /* Domyślnie ukryty */
  transition: opacity 0.3s; /* Płynne przejście */
  z-index: 1; /* Przesunięcie na wierzch */
  transform: scale(1.05);
}

.custom-menu .menu-item:hover
{
  border-bottom: 5px solid #fff;
  border-left: 5px solid #fff;
  border-right: 5px solid #fff;
-webkit-box-shadow: 1px 3px 35px 1px rgba(66, 68, 90, 1);
-moz-box-shadow: 1px 3px 35px 1px rgba(66, 68, 90, 1);
box-shadow: 1px 3px 35px 1px rgba(66, 68, 90, 1);
}

.custom-menu .menu-item:hover .image-overlay {
  opacity: 1; /* Wyświetlenie obrazka na hover */
  border-top: 5px solid #fff;
  border-left: 5px solid #fff;
  border-right: 5px solid #fff;
}

.custom-menu .text {
  position: relative; /* Pozycjonowanie względne, aby znajdować się nad obrazkiem */
  z-index: 2; /* Wyższy z-index niż obrazek */
  border-left: 1px solid #fff;
  padding: 1px 1px 1px 10px;
}

@media (max-width:1100px) {
    .custom-menu{
        display: flex;
        flex-wrap: nowrap;
        overflow: auto;
    }
    .menu-item {
        width: unset !important;
        flex: 0 0 auto;
    }
}