/* --- Stili Generali dell'Accordion Container --- */
       .accordion {
       border: 2px solid #D8C40A; /* Cornice di 2px color oro */
       border-radius: 8px; /* Arrotonda gli angoli del contenitore generale */
       overflow: hidden; /* Fondamentale per far sì che i bordi arrotondati dei figli non "sconfinino" */
       margin-bottom: 20px; /* Spazio sotto l'intero accordion se necessario */
       box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* Ombra per l'intero blocco accordion */
       }
       /* --- Stili per la Singola Expandable Card --- */
       .expandable-card {
       margin-bottom: 0px; /* Importante per farle attaccare */
       overflow: hidden; /* Essenziale per contenere il contenuto arrotondato */
       background: #2a2a2a;
       border-left: 4px solid #E0CD00; /* Mantiene il bordo sinistro colorato */
       border-top: 1px solid rgba(224, 205, 0, 0.5); /* Bordo sottile tra le card */
       border-right: 1px solid rgba(224, 205, 0, 0.5); /* Bordo sottile a destra */
       border-bottom: 1px solid rgba(224, 205, 0, 0.5); /* Bordo sottile tra le card */
       }
       /* Stile per la card attiva (selezionata) */
       .expandable-card.active {
       border-left-color: #F35D0C; /* Cambia colore del bordo sinistro quando la card è attiva */
       }
       /* --- Gestione Bordi e Radius per la prima e ultima card --- */
       .accordion .expandable-card:first-child {
       border-top-left-radius: 4px;
       border-top-right-radius: 4px;
       border-top: none; /* Rimuove il bordo superiore duplicato con la cornice genitore */
       }
       .accordion .expandable-card:last-child {
       border-bottom-left-radius: 4px;
       border-bottom-right-radius: 4px;
       border-bottom: none; /* Rimuove il bordo inferiore duplicato con la cornice genitore */
       }
       /* --- Stili del Card Header (la barra cliccabile) --- */
       .card-header {
       display: flex; /* Mantiene Flexbox per il contenitore principale */
       align-items: center;
       justify-content: space-between; /* Spinge il gruppo di sinistra e il toggle a destra */
       padding: 15px 20px;
       cursor: pointer;
       transition: background-image 0.3s ease, transform 0.6s ease; /* Aggiunto transform alla transizione principale se l'header si muove */
       background-image: linear-gradient(to left, #001900 0%, #003333 95%, #E0CD00 100%);
       border: none;
       border-radius: 0;
       position: relative;
       }
       
       /*Per lo scrolling dopo la selezione*/
       /* Stile base per tutti i .card-header */
      /* Questo è il valore predefinito, spesso per la risoluzione più piccola (mobile first) */
      .card-header {
         /* Esempio: se il tuo header fisso su mobile è alto 80px e vuoi 20px di padding, imposta a 100px */
         scroll-margin-top: 400px; 
      }
       
       /* Stato quando il Card Header è ATTIVO (non collapsed) */
       .card-header:not(.collapsed) {
       /* Background quando la card è attiva/aperta */
       background-image: linear-gradient(to left, #001900 0%, #00A333 95%, #E0CD00 100%);
       /*
       * Modifica chiave: Invece di justify-content: center, useremo transform.
       * Calcolo: (larghezza freccia + margin-left della freccia) / 2
       * Per esempio, se la freccia è 24px + 20px di margine = 44px. Metà è 22px.
       * Dovremo spostare l'header-left-group a sinistra di questa quantità
       * per bilanciare lo spazio che la freccia toglie a destra.
       */
       }
       /* Sovrascrivi il border-radius del card-header per la prima card */
       .accordion .expandable-card:first-child .card-header {
       border-top-left-radius: 4px;
       border-top-right-radius: 4px;
       }
       /* Sovrascrivi il border-radius del card-header per l'ultima card (se necessario, in genere non lo è) */
       .accordion .expandable-card:last-child .card-header {
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
       }
       /* --- Stato HOVER del Card Header --- */
       .card-header:hover {
       /* Background all'hover */
       background-image: linear-gradient(to left, #001900 0%, #00A333 95%, #E0CD00 100%);
       }
       /* --- Stili per il GRUPPO Sinistro (Icona + H4) all'interno del Card Header --- */
       .header-left-group {
       display: flex;
       align-items: center;
       padding-left: 30px;
       flex-grow: 1; /* Permette al gruppo di occupare più spazio, utile per il centraggio */
       justify-content: flex-start; /* Il contenuto del gruppo è allineato a sinistra di default */
       /* Aggiungo una transizione per il transform, così il testo si sposta fluidamente */
       transition: transform 1.5s ease;
       }
       
	   /* Quando la card è attiva, spostiamo il gruppo con transform */
       .card-header:not(.collapsed) .header-left-group {
       /* Rimuovi justify-content: center; QUI */
       /* Calcola questo valore per centrare visivamente il gruppo nell'header.
       Potrebbe richiedere un po' di tuning. */
       transform: translateX(calc(30% - 22px - 15px)); /* Esempio di calcolo più complesso */
       /* 50% = centro del contenitore; -22px = compensazione per icona; -15px = metà del padding-left? */
       /* Il valore esatto di translateX dipende dalla larghezza effettiva del tuo contenuto H4 + Icona */
       }
	   
       /* --- Stili dell'ICONA principale (.card-header .header-left-group i) --- */
       .card-header .header-left-group i {
       margin-right: 10px;
       font-size: 1.2rem;
       color: #D8C40A; /* Colore dell'icona principale (default) */
       transition: color 0.3s; /* Aggiungi transizione per il cambio colore */
       }
       
	   /* Colore ICONA all'HOVER del card-header */
       .card-header:hover .header-left-group i {
       color: #E0CD00 !important; /* Icona diventa giallo/oro all'hover */
       }
       /* Colore ICONA quando la card è ATTIVA (espansa) */
       .expandable-card.active .card-header .header-left-group i,
       .card-header:not(.collapsed) .header-left-group i { /* Usa entrambi per massima compatibilità */
       color: #E0CD00 !important; /* Icona diventa giallo/oro quando la card è attiva */
       }
       /* --- Stili del TITOLO H4 (.card-header .header-left-group h4) --- */
       .card-header .header-left-group h4 {
       margin: 0;
       /* flex-grow: 1; - Rimosso da qui e messo sul header-left-group per migliore gestione */
       font-size: 1rem;
       color: #fff; /* Colore del testo del titolo (default: bianco) */
       white-space: nowrap;
       transition: color 0.3s; /* Aggiungi transizione per il cambio colore */
       }
       /* Colore TITOLO H4 all'HOVER del card-header */
       .card-header:hover h4 {
       color: #E0CD00 !important; /* Il testo h4 diventa giallo/oro all'hover */
       }
       /* Colore TITOLO H4 quando la card è ATTIVA (espansa) */
       .expandable-card.active .card-header h4,
       .card-header:not(.collapsed) h4 { /* Usa entrambi per massima compatibilità */
       color: #E0CD00 !important; /* Il testo h4 diventa giallo/oro quando la card è attiva */
       }
       /* --- Stili dell'Icona Toggle (Freccia) --- */
       .toggle-icon {
       margin-left: 20px;
       /* Correggi il typo: ttransition -> transition */
       transition: transform 0.3s ease, color 0.3s ease, opacity 0.3s ease, right 0.3s ease, margin-left 0.3s ease;
       color: #e0cd00; /* Colore dell'icona freccia (default giallo/oro) */
       position: absolute;
       right: 20px;
       top: 50%;
       transform: translateY(-50%) rotate(0deg); /* Rotazione iniziale: 0 gradi (freccia "giù") */
       }
       /* Quando l'header è CHIUSO (.collapsed) */
       .card-header.collapsed .toggle-icon {
       transform: translateY(-50%) rotate(0deg); /* La freccia rimane a 0 gradi */
       opacity: 1; /* Completamente visibile */
       right: 20px; /* Posizione a destra */
       }
       /* Quando l'header è APERTO (non .collapsed) */
       .card-header:not(.collapsed) .toggle-icon {
       /* Manteniamo l'opacità a 0 se vuoi che sparisca dopo la rotazione.
       Se invece vuoi che rimanga visibile ma ruotata, rimuovi questa riga. */
       opacity: 1;
       overflow: hidden;
       /* La rotazione in senso antiorario di 90 gradi */
       transform: translateY(-50%) rotate(-90deg);
       }
       /* --- Stili del Contenuto della Card (Corpo) --- */
       #about .card-content {
       background: #003333 !important; /* Mantieni il tuo background */
       /* APPLICA QUI IL PADDING DESIDERATO */
       padding: 0 30px 25px 30px !important; /* top, right, bottom, left */
       box-sizing: border-box; /* Cruciale per il calcolo corretto delle dimensioni */
       text-align: justify; /* Giustifica il testo all'interno di .card-content */
       }
       /* Altezza fissa del corpo dell'accordion */
       .accordion-body-fixed-height {
       height: 400px; /* Imposta l'altezza desiderata per tutti i corpi dell'accordion */
       overflow-y: auto; /* Aggiunge una scrollbar verticale se il contenuto supera l'altezza */
	   padding-right: 35px; 
    
		/* Se la tua classe .accordion-body-fixed-height è stata definita senza padding 
		laterali, assicurati di introdurre anche il padding-left */
		padding-left: 20px;
       }
       /* Stili per tutti gli h5 all'interno di un .card-content */
       #about .card-content h5 {
       color: #E0CD00; /* Imposta il colore oro */
       text-align: center; /* Centra orizzontalmente il testo */
       margin-top: 10px; /* Aggiungi un po' di spazio sopra se necessario */
       margin-bottom: 10px; /* Aggiungi un po' di spazio sotto se necessario */
       }
       /* --- Stili delle Slide Interne (se gestite da JS) --- */
       .card-slide {
       display: none; /* Inizialmente nascoste, tranne quella con .active */
       padding-top: 15px;
       padding-bottom: 15px;
       }
       .card-slide.active {
       display: block; /* La slide attiva è sempre visibile */
       }
	   
	   #about .card-content strong{
		  color: #E0CD00; /* Colore giallo oro per il testo in grassetto */ 
	   }
	   
       /* Stili per le liste puntate all'interno del .card-content */
       #about .card-content ul {
       list-style-type: disc; /* Puoi scegliere il tipo di pallino che preferisci */
       padding-left: 20px; /* Indentazione per la lista */
       margin-bottom: 10px; /* Spazio sotto la lista */
       }
       #about .card-content ul li {
       color: #FFFFFF; /* Colore bianco per il testo normale della lista */
       margin-bottom: 5px; /* Spazio tra gli elementi della lista */
       }
       /* Stile per il testo in grassetto all'interno degli elementi della lista */
       #about .card-content ul li strong,
       #about .card-content ul li b {
       color: #E0CD00; /* Colore giallo oro per il testo in grassetto */
       }
	   
	   
       /* Se hai paragrafi o altri elementi di testo diretto in .card-content */
       #about .card-content p { /* Aumentato specificità */
       text-align: justify; /* Assicurati che i paragrafi siano giustificati */
       margin-bottom: 1em; /* Aggiungi un po' di spazio tra i paragrafi */
       }
       /* --- Stili per la Navigazione Interna alle Slide (Prev/Next) --- */
       .card-nav {
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 15px 0;
       margin-top: 10px;
       background: rgba(0,0,0,0.1);
       border-top: 1px solid rgba(255,255,255,0.1);
       }
       .card-nav button {
       background: none;
       border: none;
       color: #E0CD00 !important; /* Colore dei bottoni di navigazione */
       font-size: 1.5rem;
       cursor: pointer;
       padding: 5px 10px;
       }
       .card-nav button:hover {
       color: #6D83FF; /* Colore dei bottoni di navigazione all'hover */
       }
       .card-indicator {
       color: #fff;
       font-size: 0.9rem;
       margin: 0 10px;
       }
	   
	   /* Stile per il contenitore per centrare l'immagine */
		.image-container {
		  /* Assicura che l'immagine all'interno possa essere centrata */
		  text-align: center;
		  /* Aggiungi un po' di spazio sopra e sotto se necessario */
		  margin: 15px 0; 
		}

		/* Stile per l'immagine */
		.slide-image {

		  border: 2px solid #D8C40A; /* Bordo di 2px color #D8C40A */
		  border-radius: 12px; /* Raggio di 8px */
			
		  /* Larghezza relativa: l'immagine scala con la finestra del browser */
		  width: 20vw;            
		  
		  /* Limite minimo: l'immagine non sarà mai più piccola di 70 pixel */
		  /* Scegli un valore (es. 70px) che sia leggibile sul dispositivo più piccolo. */
		  min-width: 70px;       
		  
		  /* Opzionale: Limite massimo per evitare che diventi gigante su schermi 4K */
		  max-width: 300px;      
		  
		  height: auto; 
		  display: inline-block;
		  
		  /* Assicura che l'immagine non si deformi se le proporzioni originali non sono quadrate */
		  object-fit: cover; 
		}