/* --- Impostazioni Globali e Variabili Colore --- */
        :root {
            --verde: #52c133;/*#52c133; /*1d8500*/
            --blu: #3399cc;/*#3399cc; /* #027ab6 */
            --testo-scuro: #333;
            --testo-chiaro: #ffffff;
            --sfondo-chiaro: #f4f7f6;
			
        }

        body {
            margin: 0px;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            line-height: 1.6;
            background-color: var(--sfondo-chiaro);
            color: var(--testo-scuro);
        
		 display: flex;
		flex-direction: column; /* Impila gli elementi verticalmente */
			
        }
		

nav {
  order: 1; /* Visualmente apparirà per x  menù desktop*/
}

header {
  order: 2; /* Visualmente apparirà per x  menù mobile*/
}


main {
  order: 3; /* Visualmente apparirà per x */
}

footer {
  order: 4; /* Visualmente apparirà per x */ 
}

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
			
        }
		
		
		
	
		   .container h2{
            font-size: 3.5rem;
            color: var(--verde);
			text-align: left;
			
        }
		
		
		.container-footer {
            max-width: 1200px;
			height: 30px;
            margin: 0 auto;
            padding: 0 auto;
			
        }
		
		  .container-footer a {
           color: #FFFFFF; 
        }

        /* --- Header e Navigazione Principale --- */
        .header-principale {
            background-color: var(--testo-chiaro);
            padding: 0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-principale .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }

        .logo {
            font-size: 1.8rem;
            font-weight: bold;
            color: var(--verde);
            text-decoration: none;
        }

        .nav-principale a {
            color: var(--verde);
            text-decoration: none;
            font-weight: 600;
            padding: 10px 15px;
            border-radius: 5px;
            transition: background-color 0.3s, color 0.3s;
        }

        .nav-principale a:hover {
            background-color: var(--blu);
            color: var(--testo-chiaro);
        }



        /* --- Navigazione Secondaria --- */
        .nav-secondaria {
            background-color: var(--testo-chiaro);
            padding: 10px 0;
            text-align: center;
        }
		
		.nav-secondaria a + a {
		margin-left: 50px; /* Aggiunge 20px di spazio a sinistra di ogni link che segue un altro link */
		}
        
        .nav-secondaria .container {
            display: flex;
            justify-content: center;
            gap: 40px;
            flex-wrap: wrap;
        }

        .tasto-secondario {
            color: var(--verde);
            text-decoration: none;
            font-weight: 600;
            padding: 10px 15px;
            border-radius: 5px;
            transition: background-color 0.3s, color 0.3s;
        }

        .tasto-secondario:hover {
            background-color: var(--blu);
            color: var(--testo-chiaro);
        }
        
        /* --- Contenuto Principale --- */
        .contenuto-principale {
            padding: 20px;
        }

        .contenuto-principale h2 {
            text-align: center;
            font-size: 1.5rem;
            color: var(--blu);
            margin-bottom: 40px;
        }
        
        .contenuto-principale .colonne {
            display: flex;
            gap: 40px;
            flex-wrap: wrap;
        }


        
        .contenuto-principale .colonna {
            flex: 1;
            min-width: 300px;
			text-align: justify;
        }
		
		 .colonna h1 {
            text-align: left;
            font-size: 1.5rem;
            color: var(--blu);
            margin-bottom: 0px; 
			/*text-shadow: 0px 2px 4px rgba(0,0,0,0.2)*/
        }
		
		 .colonna  h2 {
            text-align: left;
            font-size: 1.3rem;
            color: var(--blu);
            margin-bottom: 0px;
			
        }
		
			 .colonna h3 {
            text-align: left;
            font-size: 1.1rem;
            color: var(--blu);
            margin-bottom: 0px; 
        }

        /* --- Footer --- */
        .footer {
            background-color: var(--verde);
            color: var(--testo-chiaro);
            text-align: center;
			font-size: 0.8rem;
            padding: 10px 0;
            margin-top: 30px;
        }
	
		

        /* --- Responsive Design --- */
        @media (max-width: 768px) {
            .header-principale .container {
                flex-direction: column;
                gap: 15px;
            }
            .banner h1 {
                font-size: 2.5rem;
            }
        }
/* Seleziona tutti i link (<a>) */
a {
  color: var(--verde) /* Colore verde di base */
  transition: color 0.3s; /* Aggiunge un'animazione fluida al cambio colore */
  text-decoration: none; /* Opzionale: toglie la sottolineatura */
}

/* Stile per quando il mouse passa sopra il link */
a:hover {
  color: var(--blu); /* Colore blu al passaggio del mouse */
  text-decoration: none; /* Opzionale: aggiunge la sottolineatura al passaggio del mouse */
}
	

li::marker {
  color: var(--blu);
      }
	  
	  /* Nascondiamo di default gli elementi che hanno classi desktop-only, mobile-only */
.desktop-only,
.mobile-only {
    display: none;
}

/* Media query per dispositivi con schermi più larghi di 768px (desktop/tablet) */
@media (min-width: 768px) {
    .desktop-only {
        display: block; /* Gli elementi desktop-only diventano visibili */
    }
}
/* Media query per dispositivi con schermi più piccoli di 768px (mobile) */
@media (max-width: 767px) {
    .mobile-only {
        display: block; /* Gli elementi mobile-only diventano visibili */
    }
}



.chiusura
{
	text-align: center;
	font-size: 0.8em;
}
/* --- Stile del Box Principale --- */

     .modern-p {
		
			display: flex;	
        }
		
        .modern-box {
		
            background-color: #fff;/*#F0FFFF;*/
            border-radius: 30px; /* Angoli molto arrotondati */
            /*box-shadow: 
                8px 8px 16px rgba(163, 177, 198, 0.6), /* Ombra scura */
               /* -8px -8px 16px rgba(255, 255, 255, 0.8); /* Luce chiara */
            padding: 1rem;
            max-width: 400px;
            width: 70%;
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transizione fluida */
           
			margin:0 auto; 
			font-size: 0.8em;
			
			border: 1px solid rgba(255, 255, 255, 0.5);
			border-color: var(--verde);
			box-shadow: 0px 2px 25px rgba(0,255,0,0.2);
			
			
			
        }

        /* --- Effetto al passaggio del mouse --- */
        .modern-box:hover {
            /*transform: translateY(-100px); /* Solleva leggermente il box */
            box-shadow: 
                24px 24px 48px rgba(163, 177, 198, 0.7),
                -24px -24px 48px rgba(255, 255, 255, 0.9);
        }
        
     

        /* --- Stile del Titolo --- */
        .modern-box h2 {
            font-size: 1.8rem;
            font-weight: 600;
            color: #2c3e50;
            margin-top: 0;
            margin-bottom: 1rem;
        }

        /* --- Stile del Paragrafo --- */
        .modern-box p {
            font-size: 1rem;
            color: #000000;/*#5a6a85;*/
            line-height: 2;
            margin-bottom: 0.8rem;
        }

        /* --- Stile del Pulsante "Call to Action" --- */
        .box-button {
            display: inline-block;
            background-color:  var(--verde);
            color: #ffffff;
            padding: 10px 10px;
			margin: 7px;
            border-radius: 10px; /* Forma a pillola 50 */
            text-decoration: none;
            font-weight: 600;
            box-shadow: 4px 4px 8px rgba(0, 122, 255, 0.2);
            transition: all 0.3s ease;
        }

        .box-button:hover {
            background-color: var(--blu);
			color: #ffffff;
            /*transform: scale(1.05); /* Leggero ingrandimento */
            /*box-shadow: 6px 6px 12px rgba(0, 122, 255, 0.3);*/
        }

  /* Stile per la lista ordinata (ol) */
  .lista-foglioline {
    list-style-type: none; /* Rimuove i numeri predefiniti */
    padding-left: 0; /* Rimuove il padding predefinito */
    counter-reset: item-counter; /* Inizializza un contatore personalizzato */
  }

  /* Stile per ogni elemento della lista (li) */
  .lista-foglioline li {
    position: relative; /* Necessario per posizionare lo pseudo-elemento */
    padding-left: 30px; /* Crea spazio a sinistra per la fogliolina */
    margin-bottom: 10px; /* Aggiunge spazio tra gli elementi della lista */
    /*font-size: 1.1em; /* Dimensione del testo (opzionale) */
  }

  /* Pseudo-elemento ::before per aggiungere la fogliolina */
  .lista-foglioline li::before {
    /*content: '🍃'; /* Carattere Unicode della fogliolina. Puoi usare anche un'immagine o SVG */
    position: absolute; /* Posizionamento assoluto rispetto a <li> */
    left: 0;
    top: -2px; /* Regola la posizione verticale per un allineamento perfetto */
    color: #2E8B57; /* Colore verde della foglia (SeaGreen) */
    font-size: 1.2em; /* Dimensione della fogliolina */
    
    /* In alternativa, per usare un'immagine SVG come icona (decommenta e adatta il path): */
    
    content: '';
    background-image: url('/foglia.svg');
    background-size: 21px 21px;
    background-repeat: no-repeat;
    width: 21px;
    height: 21px;
    top: 4px;
    
  }
  
		
		  .contenitore-immagine {
            max-width: 1200px; /* Imposta una larghezza massima per il contenitore */
        
            justify-content: center;
        }

        .immagine-responsiva {
            max-width: 100%;
          
        }