.menu-content {
  max-width: 1200px;
  margin: 40px auto;
  background-color: #ffffff; /* Colore di fondo del div principale */
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}

.menu-title {
  font-size: 36px;
  font-weight: bold;
  color: #222;
  margin-top: 0;
  margin-bottom: 20px;
}

/* Div del menu in rilievo accentuato */
.menu-item {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  margin-bottom: 18px;
  background-color: transparent; /* Rimane trasparente / stesso sfondo del content */
  border: none;
  border-radius: 10px;
  cursor: pointer;
  
  /* Doppia ombra marcata per un effetto 3D deciso */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 
              0 10px 20px rgba(0, 0, 0, 0.12); 
  
  /* Transizione fluida sia per l'ombra che per il movimento */
  transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), 
              box-shadow 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Effetto Passaggio Mouse: il pulsante si solleva e l'ombra si allarga */
.menu-item:hover {
  transform: translateY(-4px); /* Si solleva leggermente di più */
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15), 
              0 15px 30px rgba(0, 0, 0, 0.18); /* Ombra decisamente più scura e ampia */
}

/* Effetto Click: il pulsante si schiaccia visivamente */
.menu-item:active {
  transform: translateY(-1px); /* Torna quasi al livello del piano */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 
              0 4px 8px rgba(0, 0, 0, 0.1); /* L'ombra si rimpicciolisce */
}

.menu-icon {
  width: 48px;
  height: 48px;
  margin-right: 15px;
  object-fit: contain;
}

.menu-text {
  font-size: 20px;
  font-weight: 500;
  color: #333;
  margin-right: auto;
}

.menu-arrow {
  font-size: 27px;
  color: #999;
}