/* --- 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: 1150px;
			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: 250px;
			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(--blu);
            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: 768px) {
    .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-color: var(--blu);
			border: 1px solid rgba(51, 153, 204, 0.5); 
		    box-shadow: 0px 2px 25px rgba(51,153,204, 5.5);
			
			/*border: 1px solid rgba(255, 255, 255, 0.5);
			border-color: var(--verde);
			box-shadow: 0px 2px 25px rgba(0,255,0,0.2); VERDE*/
			
			
			
        }

        /* --- 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('/images/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%;
 }
 .imasx img {
 width: 270px; 
 float:left;
 margin: 10px;
 padding-right:20px;
}
/* Contenitore principale della CTA */
.cta-banner {
    background-color: #f8f9fa; /* Grigio molto chiaro per stacco visivo */
    border-left: 0px solid #0056b3; /* Linea colorata laterale per risalto */
    padding: 30px;
    margin: 40px auto; /* Spazio sopra e sotto */
    max-width: 900px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between; /* Testo a sx, bottoni a dx */
    align-items: flex-end; /*center; /* Centra verticalmente */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Leggera ombra */
    flex-wrap: wrap; /* Per il mobile: va a capo se stretto */
}

/* Parte testuale */
.cta-content {
    flex: 1; /* Prende lo spazio disponibile */
    min-width: 300px; /* Non diventa troppo stretto */
    padding-right: 20px;
}

.cta-content h3 {
    margin-top: 0;
    color: #333;
    font-size: 1.5em;
    margin-bottom: 10px;
}

.cta-content p {
    margin: 0;
    color: #666;
    font-size: 1em;
}

/* Parte Bottoni */
.cta-buttons {
    display: flex;
    gap: 15px; /* Spazio tra i bottoni */
    margin-top: 15px; /* Margine solo su mobile */
}

/* Stile base bottone */
.btn {
    text-decoration: none;
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    text-align: center;
    white-space: nowrap; /* Evita che il testo vada a capo nel bottone */
}

/* Bottone Telefono (Secondario o Urgente) */
.btn-phone {
    background-color: white;
    color: #333;
    border: 2px solid #333;
}

.btn-phone:hover {
    background-color: #52C133; /*#333;*/
    color: white;
}

/* Bottone Preventivo (Primario - Colore Brand) */
.btn-quote {
    background-color: #3399cc; /* Blu scuro professionale */
    color: white;
    border: 2px solid #0056b3;
}

.btn-quote:hover {
    background-color: #004494; /* Blu un po' più scuro all'hover */
    border-color: #004494;
}

/* VERSIONE MOBILE (BLINDATA) */
@media (max-width: 768px) {
    .cta-banner {
        /* 1. Gestione larghezza e posizione */
        display: flex;
        flex-direction: column; /* Impila verticale */
        width: auto; /* MAI usare 100% fisso se hai margini */
        max-width: 100%; /* Non superare mai lo schermo */
        margin: 20px 15px; /* 20px sopra/sotto, 15px a destra/sinistra per staccare dai bordi */
        padding: 5px;
        
        /* 2. Allineamento */
        text-align: center; /* Centra il testo */
        align-items: center; /* Centra gli elementi flex (bottoni) */
        
        /* 3. Reset altezza */
        height: auto;
    }
    
    .cta-content {
        width: 100%;
        padding-right: 0;
        margin-bottom: 20px;
        
        /* 4. Forza il testo a stare dentro */
        word-wrap: break-word; /* Spezza le parole se troppo lunghe */
        overflow-wrap: break-word;
    }

    .cta-content h3 {
        font-size: 1.3em; /* Riduciamo leggermente il titolo su mobile */
        line-height: 1.3;
    }
    
    .cta-buttons {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 0;
    }
    
    .btn {
        width: 100%; /* Bottoni a tutta larghezza */
        display: block;
        box-sizing: border-box; /* Include il padding nel calcolo larghezza */
        margin: 0;
        white-space: normal; /* Permette al testo del bottone di andare a capo se serve */
    }
}
/* Forza il testo ad andare a capo in ogni circostanza */
.cta-content h3, 
.cta-content p {
    white-space: normal !important; /* Obbliga il ritorno a capo */
    overflow-wrap: break-word !important; /* Spezza le parole se necessario */
    word-wrap: break-word !important; /* Supporto vecchi browser */
    max-width: 100% !important; /* Non superare mai il genitore */
}

/* IL TRUCCO FLEXBOX: Se non metti questo, Flexbox impedisce al testo di restringersi */
.cta-content {
    min-width: 0 !important; /* FONDAMENTALE: permette al contenitore di rimpicciolirsi oltre la lunghezza del testo */
    width: 100% !important;
}
.testo-rosso {
    color: red;
}
.testo-centrato {
    text-align: center !important;
}
/* 1. Questa regola è già specifica (si applica solo dentro .lista), quindi è OK */
.lista a {
    font-weight: bold;
}

/* 2. Questa era troppo generica! Creiamo una classe apposta "lista-larga" */
.lista-larga li {
    line-height: 2;   
}