body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    /*background-color: #1e272e; /* Sfondo scuro come nell'immagine */
    /*color: #e0e0e0; /* Testo chiaro per contrasto */
    background-image: url("/img/sfondo.png"); /* Sostituisci con il percorso della tua immagine */
    background-size: cover; /* Assicura che l'immagine copra tutto lo sfondo */
    background-repeat: no-repeat; /* Evita la ripetizione dell'immagine */
    filter: blur(0px); /* Imposta il livello di sfocatura (valore in pixel) */
    overflow-x: hidden;

   
}

header {
   /* background-color: #28313c; /* Header leggermente più chiaro dello sfondo */
    color: white;
   position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    padding: 10px 0; /* Ridotto il padding dell'header */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* Aggiunta ombra all'header */
    transition: background-color 0.3s ease; 
}

header.scrolled  { /* Stile per l'header quando è fisso */
    background-image: url("/img/sfondo.png"); /* Sostituisci con il percorso della tua immagine */
    background-size: cover; /* Assicura che l'immagine copra tutto lo sfondo */
    background-repeat: no-repeat; /* Evita la ripetizione dell'immagine */
}

#servizi {
    /*display: grid; /* Utilizzo di grid per un layout più flessibile */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Colonne responsive */
    gap: 20px;
    padding: 20px;
    margin-top: 40px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
}
#nuovo {
   /* background-image: none; /* Rimossa l'immagine di sfondo precedente */
   /* background-color: #1e272e; /* Mantiene lo sfondo scuro */
   /* padding-top: 100px; /* Aggiunto padding per evitare sovrapposizione con l'header */
}
.servizio {
    background-color: #28313c; /* Sfondo card più chiaro */
    border-radius: 10px; /* Bordi arrotondati */
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); /* Ombra più marcata */
    border: 1px solid #3d4852; /* Bordo sottile */
    flex: 1;
}

.servizio:hover {
    transform: scale(1.05);
    background-color: #333d4b; /* Sfondo hover leggermente più scuro */
    border-color: #4a5562; /* Bordo hover più scuro */
}

.servizio img {
    width: 80px;
    height: 80px;
    margin-bottom: 10px;
    filter: invert(48%) sepia(79%) saturate(2000%) hue-rotate(335deg) brightness(102%) contrast(95%); /* Icone bianche */
}

.servizio h2 {
    color: white; /* Titoli bianchi */
    margin-bottom: 10px;
}

.servizio p {
    color: #a0aec0; /* Paragrafi grigio chiaro */
}

#banner {
    background-color: #333; /* Banner più scuro */
    color: white;
    padding: 5px 0; /* Ridotto il padding del banner */
    text-align: center;
}

.container {
    max-width: 1400px; /* Aumentata la larghezza massima del container */
    margin: 0 auto;
    display: flex;
    align-items: center; /* Allineamento verticale nel container */
    padding: 0 20px; /* Aggiunto padding laterale al container */
    height: 140px;
}


.contatti {
    display: flex;
    margin-left: auto; /* Spinge i contatti a destra */
    align-items: inherit;
   
}

.Telefono {
    color: white;
    text-decoration: none;
    margin: 0 10px;
    display: flex;
    align-items: center;
}
.img_banner {
    width: 20px;
    height: 15px;
    margin-right: 5px;
}

header .container {
    /*max-width: 960px;*/
    /*margin: 0 auto;
   /* display: flex;*/
   /* align-items: center; /* Allinea verticalmente gli elementi */
}

header .logo {
    margin-right: 20px;
  /*  margin-top: 10px; /* Spazio tra logo e titolo */
}

header .logo img {
    max-height: 220px; /* Ridotta l'altezza del logo */
}

header .titolo h1 {
    font-size: 1.8em; /* Dimensione titolo più grande */
    margin: 0; /* Rimossi margini predefiniti */
    font-weight: 600; /* Grassetto leggero */
}


footer {
    /*background-color: #f0f0f0;*/
    padding: 30px; /* Aumenta il padding per ingrandire il footer */
    font-size: 1.2em; /* Aumenta la dimensione del testo */
    text-align: center;
    color:white;
}

footer .container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
   /* flex-wrap: wrap; /* Permette di impilare gli elementi su schermi piccoli */
}


footer .form-container {
    width: 50%; /* Larghezza form ridotta */
    padding-right: 20px;
}


footer .nome-email {
    display: flex; /* Permette di affiancare gli input */
    gap: 20px; /* Aumenta lo spazio tra gli input */
    margin-bottom: 20px; /* Spazio sotto il gruppo nome-email */
}

footer .nome-email input[type="text"],
footer .nome-email input[type="email"] {
    width: 50%; /* Larghezza degli input nome ed email */
    padding: 15px; /* Aumenta il padding degli input */
    font-size: 1.1em; 
    border: 1px solid #ccc;
    box-sizing: border-box;
}

footer .form-container textarea {
    width: 100%;
    padding: 15px; /* Aumenta il padding del textarea */
    font-size: 1.1em;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

footer .form-container input[type="submit"] {
    background-color: #007bff;
    color: white;
    padding: 15px 30px; /* Aumenta il padding del bottone */
    font-size: 1.1em;
    border: none;
    cursor: pointer;
}

footer .info-azienda {
    /* width: 50%; Larghezza info azienda ridotta 
    padding-left: 20px; */
    width: 50%;
  padding-left: 214px;
  position: absolute;
}

footer .info-azienda ul {
    list-style: none;
    padding: 0;
}

footer .info-azienda li {
    margin-bottom: 10px;
}

footer a {
    color: #63b3ed; /* Colore link blu */
    text-decoration: none;
}


footer a:hover {
    text-decoration: underline;
}

footer button[type="submit"] {
    background-color: #63b3ed; /* Bottone blu */
    color: white;
    padding: 15px 30px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

footer button[type="submit"]:hover {
    background-color: #5299c2; /* Bottone blu più scuro al hover */
}

/* Media query per schermi piccoli */
@media (max-width: 768px) {
    footer .form-container,
    footer .info-azienda {
        width: 100%;
        padding: 15px;
        position: absolute;
    left: -16px;
    }
    
}

#approfondimento {
    padding: 20px;
   /* background-color: #f0f0f0;
   /* transform: translateY(-100%); /* Inizialmente nascosta sopra */
   transition: width 2s;
}

#pressione {
    padding: 20px;
    background-color: #f0f0f0;
    width: 20px;
    height: 20px;
   /* transform: translateY(-100%); /* Inizialmente nascosta sopra */
   transition: width 2s;
}

#pressione.show {
    /*transform: translateY(0); /* Visibile quando la classe "show" è presente */
    opacity: 1; /* Opacità a 1 per renderla completamente visibile */
 }


.contenuto-approfondimento {
    display: flex; /* Abilita Flexbox */
    flex-direction: column; /* Dispone gli elementi verticalmente */
    align-items: center; /* Allinea gli elementi orizzontalmente al centro */
}

.contenuto-approfondimento img {
    max-width: 200px;
    height: auto;
}

#approfondimento.show {
   /*transform: translateY(0); /* Visibile quando la classe "show" è presente */
   opacity: 1; /* Opacità a 1 per renderla completamente visibile */
}

#grafico-torta {
    width: 300px !important;
    height: 300px !important;
    max-width: 300px;
}

#grafico-barre {
    width: 300px !important;
    height: 300px !important;
    max-width: 300px;
}

.contenuto-approfondimento p {
    font-family: 'Arial', sans-serif;
    font-size: 18px;
    color: white;
    margin-bottom: 15px;
    text-align: center;
    font-weight: bold; /* Rendi il testo in grassetto */
    text-transform: uppercase; /* Trasforma il testo in maiuscolo */
    letter-spacing: 1px; /* Aumenta un po' lo spazio tra le lettere */
    text-shadow: 1px 1px 2px #ccc; /* Aggiungi un'ombra leggera al testo */
    /*background: white;
}

.contenuto-approfondimento canvas {
    /* Eventuali stili per i canvas, se necessario */
    margin-bottom: 10px; /* Spazio tra i grafici */
}

.grafici-container { /* Nuovo contenitore per i grafici */
    display: flex; /* Abilita Flexbox per i grafici */
    flex-direction: row; /* Dispone i grafici in riga */
    justify-content: center; /* Allinea i grafici orizzontalmente al centro */
    gap: 10px; /* Spazio tra i grafici */
    width: 80%; /* Larghezza dell'80% rispetto al contenitore genitore */
    height: 400px; /* Altezza fissa di 400 pixel */
}

.error {
    border-color: red;
  }


  .immagine-footer {
    text-align: center; /* Allinea l'immagine al centro */
    margin-top: 150px; /* Aggiungi un po' di spazio sopra l'immagine */
  }
  
  .immagine-footer img {
    max-width: 100%; /* Assicura che l'immagine non superi la larghezza del contenitore */
    height: auto; /* Mantiene le proporzioni dell'immagine */
  }

  @media (max-width: 768px) {
    #servizi {
        grid-template-columns: 1fr; /* Una sola colonna su schermi piccoli */
        flex-direction: column; /* Impila i servizi verticalmente */
    }

    .servizio {
        margin-bottom: 20px; /* Aggiungi spazio tra i servizi */
    }

    footer .form-container,
    footer .info-azienda {
        width: 100%;
        padding: 15px;
    }

    .grafici-container {
        flex-direction: row; /* Impila i grafici verticalmente */
        align-items: center; /* Allinea i grafici al centro */
        width: 100%; /* Larghezza dell'80% rispetto al contenitore genitore */
        height: 200px; /* Altezza fissa di 400 pixel */
    }

    #grafico-torta,
    #grafico-barre {
        width: 90% !important; /* Larghezza massima del 90% */
        height: auto !important; /* Altezza automatica */
        max-width: 400px;
    }
    #nuovo {
        /* background-image: none; /* Rimossa l'immagine di sfondo precedente */
        /* background-color: #1e272e; /* Mantiene lo sfondo scuro */
         /*padding-top: 120px; /* Aggiunto padding per evitare sovrapposizione con l'header */
     }
     .contatti {
        flex-direction: column; /* Dispone gli elementi in colonna */
        align-items: flex-start; /* Allinea gli elementi a sinistra */
        margin-left: 0; /* Resetta il margine sinistro */
    }

    .Telefono {
        margin: 10px 0; /* Aggiungi spazio tra gli elementi */
    }
}

/* Media query per schermi medi */
@media (min-width: 769) and (max-width: 1500px) {
    #servizi {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Due colonne su schermi medi */
    }

    .grafici-container {
        flex-direction: row; /* Grafici in riga */
        justify-content: center; /* Allinea i grafici al centro */
    }

    #grafico-torta,
    #grafico-barre {
        width: 45% !important; /* Larghezza massima del 45% */
        height: auto !important; /* Altezza automatica */
        max-width: 500px;
    }
    #nuovo {
        /* background-image: none; /* Rimossa l'immagine di sfondo precedente */
        /* background-color: #1e272e; /* Mantiene lo sfondo scuro */
         padding-top: 120px; /* Aggiunto padding per evitare sovrapposizione con l'header */
     }
    
}
.chi-siamo-button {
    background-color: #DAA520; /* Giallo ocra */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 20px; /* Spazio dal titolo */
    font-size: 16px; /* Dimensione del testo */
}

.chi-siamo-button:hover {
    background-color: #CD853F; /* Marrone chiaro (variazione al hover) */
}

/* Stile per il contenitore della pagina "Chi siamo" */
#chi-siamo-page {
    display: none; /* Inizialmente nascosta */
    position: fixed; /* Per sovrapporsi al contenuto esistente */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9); /* Sfondo semi-trasparente */
    z-index: 1000; /* Assicura che sia sopra gli altri elementi */
    overflow-y: auto; /* Abilita lo scorrimento se il contenuto è troppo lungo */
}

      /* Stili per il banner cookie */
      #cookie-banner {
        position: sticky; /* Resta incollato al fondo */
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 20px;
        text-align: center;
        z-index: 1000; /* Assicura che sia sopra gli altri elementi */
    }

    #cookie-banner a {
        color: yellow;
        text-decoration: underline;
    }

    #cookie-banner button {
        background-color: #4CAF50; /* Verde */
        border: none;
        color: white;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 5px; /* Bordi arrotondati */
    }
    #cookie-banner button#reject-cookies{
        background-color: #f44336; /* rosso */
    }
    
.grecaptcha-badge {
   /*  bottom: 0px !important; Sposta il badge a 20 pixel dal basso */
    /* right: 0px !important; /* Sposta il badge a 20 pixel da destra */
}
@media (max-width: 768px) {
body, html {
    overflow-x: hidden;
}
#imgmitsu{
    width: 70% !important;
}
}