/* CSS per i pannelli */
.panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out; /* Aggiungi una transizione per un effetto più fluido */
}

.panel.active {
  max-height: 500px; /* Modifica il valore in base all'altezza desiderata quando il pannello è espanso */
}

/* CSS per gli elementi "accordion" */
.accordion {
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  background-color: #000;
  font-size: 16px;
  transition: background-color 0.2s ease-out; /* Aggiungi una transizione per un effetto più fluido */
}

.accordion.active {
  background-color: #ddd; /* Modifica il colore di sfondo quando l'elemento è attivo (espanso) */
  color:#000 !important;
}

/* CSS per nascondere il titolo del pannello quando non è attivo */
.panel-title {
  display: none;
}

/* CSS per mostrare il titolo del pannello quando è attivo */
.panel.active .panel-title {
  display: block;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}