body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Assicura che il body occupi almeno tutta l'altezza dello schermo */
    margin: 0; /* Elimina i margini predefiniti del body */
    /*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;
}
main {
    flex: 1; /* Permette al contenuto principale di espandersi per riempire lo spazio disponibile */
}
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 */
 }

.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 .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;
    margin-top: 50px;
}

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;       
    }
 footer .info-azienda {
        left: -16px !important;
           }
#imgmitsu{
    width: 70% !important;
}
}


.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) {
   
     .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 */
    }
}

.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 */
}

.chi-siamo-content {
    width: 80%;
    max-width: 900px;
    margin: 50px auto; /* Centra il contenuto */
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.chi-siamo-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto;
}
.close-button {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 20px;
    cursor: pointer;
}
#chi-siamo-container {
    position: absolute; /* Or fixed, depending on your layout needs */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center both horizontally and vertically */
    background-color: rgba(255, 255, 255, 0.2); /* White with some transparency */
    backdrop-filter: blur(10px); /* Apply blur effect */
    padding: 20px;
    border-radius: 10px; /* Rounded corners */
    color: white;
    opacity: 1; /* Initially hidden */
    text-align: center; /* Center the text within the container */
    margin: 20px auto; /* Aggiunto per centrare orizzontalmente */
    max-width: 80%; /* Previene l'overflow su schermi piccoli */
    box-sizing: border-box; /* Include padding in width calculation */
}

#chi-siamo-container p { /* Style the paragraph within the container */
    font-size: 1.2em; /* Adjust font size as needed */
    line-height: 1.5; /* Improve readability */
    margin: 0; /* Remove default paragraph margins */
}

/* Animation using GSAP */
.chi-siamo-visible {
    opacity: 1;
    transition: opacity 0.5s ease-in-out; /* Smooth fade-in */
}
#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;
    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 */
}
@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 */
    }


    #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 */
     }

}

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

    #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 */
     }
    
}
/* 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;
}
}