.header,
.header * {
  box-sizing: border-box;
}

/* Header della homepage */
.header {
  height: 142px; /* Altezza uguale all'inizio del dropdown menu */
  background: var(--rosso-terna); /* Usa il colore definito nella variabile */
  display: flex;
  align-items: center;
  justify-content: space-between; /* Logo a sinistra, menu a destra */
  padding: 0 20px; /* Spaziatura interna */
  box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.25); /* Ombra più leggera */
  box-sizing: border-box; /* Include padding nel calcolo della larghezza */
  position: relative;
  z-index: 1000;
}

/* Logo */
.logo {
  height: 50%; /* Adatta l'altezza del logo */
  object-fit: contain; /* Mantieni le proporzioni */
  position: relative; /* Posizionato rispetto al contenitore */
  left: 0; /* Allinea il logo a sinistra */
}

.menu-icon {
  height: 25px; /* Altezza dell'icona */
  width: 22px; /* Larghezza dell'icona */
  margin-top: 10px; /* Spazio sopra l'icona */
  right: 10px; /* Adjust spacing to accommodate menu */
  top: 50%; /* Center vertically */
  transform: translateY(-50%); /* Adjust for centering */
  overflow: visible;
  transition: transform 0.3s ease; /* Aggiunge una transizione fluida */
  transform: rotate(0deg);
}

.menu-icon.rotate-90 {
  transform: rotate(-180deg); /* Ruota di 90° in senso antiorario */
}

.menu-icon.rotate-0 {
  transform: rotate(0deg); /* Torna alla posizione originale */
}

/* Menu */
.menu {
  display: flex;
  align-items: center;
  gap: 10px; /* Spaziatura tra il testo e l'icona */
  color: white; /* Colore del testo */
  font-family: var(--font-regular); /* Font del menu */
  font-size: 18px; /* Dimensione del testo */
  cursor: pointer; /* Cambia il cursore su hover */
  /* Posizionato rispetto al contenitore */
  right: 0; /* Allinea il menu a destra */
  margin-right: 30px;
}

.menu p {
  margin: 0; /* Rimuovi margini */
  padding-right: 10px;
}

/* Dropdown menu */
.dropdown-menu {
  position: absolute; /* Position relative to the .homepage */
  top: 142px; /* Positioned immediately below the header */
  left: 0;
  width: 100%; /* Fill the width of the .homepage */
  max-height: 0; /* Initial height is 0 */
  overflow: hidden; /* Hide content when closed */
  background-color: var(--rosso-terna); /* Red background */
  transition: max-height 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease; /* Smooth animation */
  z-index: 999; /* Ensure it is above other elements */
  opacity: 0; /* Initially invisible */
  pointer-events: none; /* Disable interactions when closed */
  box-shadow: none; /* No shadow when closed */
  border-bottom-right-radius: 40px; /* Rounded corners */
}

.dropdown-menu.open {
  max-height: 500px; /* Allow the menu to expand */
  opacity: 1; /* Make the menu visible */
  pointer-events: auto; /* Enable interactions */
  box-shadow: 0px 10px 12px 0px rgba(0, 0, 0, 0.25); /* Add dynamic shadow */
  border-bottom-right-radius: 40px; /* Rounded corners */
}

.dropdown-menu ul {
  margin: 0;
  padding: 10px; /* Add padding for content */
  list-style: none; /* Remove bullet points */
  color: white; /* Text color */
  font-family: var(--font-regular);
  font-size: 1.2rem; /* Enlarge text */
}

.dropdown-menu ul li {
  padding: 10px 0; /* Increase spacing between items */
  font-size: 1.5rem; /* Further enlarge text */
}

.dropdown-menu ul li a {
  color: white;
  text-decoration: none;
  transition: color 0.3s ease;
}

.dropdown-menu ul li a:hover {
  color: #cccccc;
}

body, .homepage {
  background-color: var(--rosso-terna);
  font-family: var(--font-regular);
  margin: 0;
  padding: 0;
}

@media (max-width: 576px) {
    .menu {
        font-size: 18px; /* Smaller font size for mobile */
        -webkit-tap-highlight-color: transparent;
    }
}