@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    height: 100%;
    overflow-y: hidden; /* Disabilita lo scorrimento verticale per schermi grandi */
}


body {
    display: flex;
    flex-direction: column;
}

header {
    background: linear-gradient(135deg, rgba(0, 100, 0, 0.9), rgba(0, 200, 0, 0.8) 30%, rgba(144, 238, 144, 0.9) 50%, rgba(0, 153, 0, 0.8) 70%, rgba(0, 100, 0, 0.9));
    height: 15vh;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    padding: 0 20px;
}

.navbar .logo img {
    width: 80%; /* Dimensione di default */
    max-width: 550px;
    height: auto;
}


nav ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    height: 100%;
}

nav ul li {
    margin: 10px 20px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    padding-bottom: 10px;
    font-size: 18px;
}

nav ul li:first-child {
    margin-left: 0;
}

nav ul li:last-child {
    margin-right: 0;
}

main {
    height: 77vh;
    position: relative;
    overflow: hidden; /* Corretto: overflow hidden */
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.holiday-banner {
    background: linear-gradient(135deg, rgba(0, 100, 0, 0.9), rgba(0, 200, 0, 0.8) 30%, rgba(144, 238, 144, 0.9) 50%, rgba(0, 153, 0, 0.8) 70%, rgba(0, 100, 0, 0.9));
    color: white;
    text-align: center;
    padding: 20px 0;  /* Aumenta il padding per rendere il banner più alto */
    font-size: 30px;  /* Aumenta la dimensione del testo */
    font-weight: bold;
    position: relative;
    z-index: 1000;
}

.holiday-banner p {
    margin: 0;
}

.carousel {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.slides {
    height: 100%;
    position: relative;
}

.carousel .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.carousel .slide.active {
    opacity: 1;
}

.carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-text {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Inter', sans-serif;
    font-weight: bold;
    font-size: 90px;
    color: white;
    white-space: nowrap;
    text-align: center;
}

.carousel-nav {
    display: none; /* Nasconde le frecce di navigazione inizialmente */
}

.blur {
    filter: blur(5px);
    transition: filter 0.5s ease;
}

.seal-solution {
    font-size: 30px;
    display: block;
    margin-bottom: 5px;
    color: white;
}

.carousel-text.bottom-center-text {
    text-align: center;
    white-space: normal;
    transform: translateX(-50%);
}

footer {
    background: linear-gradient(135deg, rgba(0, 100, 0, 0.9), rgba(0, 200, 0, 0.8) 30%, rgba(144, 238, 144, 0.9) 50%, rgba(0, 153, 0, 0.8) 70%, rgba(0, 100, 0, 0.9));
    height: 8vh;
    color: white;
    padding: 10px 0;
    text-align: center;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Inter', sans-serif;
    flex-shrink: 0;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 20px;
    flex-wrap: wrap;
}

.footer-left {
    flex: 1;
    text-align: left;
}

.footer-center {
    flex: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: -18px;
}

.footer-right {
    flex: 1;
    text-align: right;
}

.footer-links {
    display: flex;
    justify-content: flex-end;
}

.footer-links a {
    color: white;
    text-decoration: none;
    margin: 0 10px;
    display: inline-block;
    font-size: 12px;
}

.azienda-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, rgba(0, 100, 0, 0.9), rgba(0, 200, 0, 0.8) 30%, rgba(144, 238, 144, 0.9) 50%, rgba(0, 153, 0, 0.8) 70%, rgba(0, 100, 0, 0.9));
    padding: 20px;
    border-radius: 15px;
    color: white;
    width: 85%;
    max-width: 1200px;
    max-height: 85%;
    overflow-y: auto;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    display: flex; /* Cambiato da 'none' a 'flex' */
    flex-direction: row; /* Aggiunto per disporre il contenuto orizzontalmente */
    justify-content: space-between;
    align-items: flex-start;
}

.azienda-content.show {
    /* Aggiungi: display: flex; */ /* Inizia a flex per consentire l'animazione */
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.azienda-content img {
    max-width: 25%;
    height: auto;
    margin-left: 10px;
    border-radius: 15px;
    object-fit: cover;
    transform: translateY(30px); /* Sposta l'immagine di 10px verso il basso */
}

.azienda-text {
    max-width: 70%;
    font-size: 1em;
    line-height: 1.4em;
}

/* Stile per il contenuto della sezione Contatti */
.contatti-content {
    position: absolute;
    top: 50%; /* Posiziona al centro verticale */
    left: 50%; /* Posiziona al centro orizzontale */
    transform: translate(-50%, -50%); /* Centra la sezione contatti */
    background: linear-gradient(135deg, rgba(0, 100, 0, 0.9), rgba(0, 200, 0, 0.8) 30%, rgba(144, 238, 144, 0.9) 50%, rgba(0, 153, 0, 0.8) 70%, rgba(0, 100, 0, 0.9));
    padding: 30px;
    border-radius: 15px;
    color: white;
    width: 80%; /* Limita la larghezza all'80% dell'area del carosello */
    max-width: 900px; /* Limita la larghezza massima */
    max-height: 70%; /* Limita l'altezza massima all'interno del carosello */
    overflow-y: auto; /* Aggiungi lo scorrimento verticale se necessario */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.contatti-content.show {
    opacity: 1;
}

.contatti-content.hide {
    pointer-events: none;
}

.contatti-content.show {
    pointer-events: auto;
}

.contact-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 10px;
    flex: 1;
}

.contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.contact-item img {
    max-width: 40px;
    margin-right: 10px;
}

.email-link {
    color: white;
}

.map-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

#map {
    width: 100%;
    height: 280px;
    border-radius: 15px;
    margin-top: 10px;
}


.map-description {
    color: white;
    text-align: center;
    margin-top: 10px;
}

.map-description a {
    color: white;
    text-decoration: underline;
}

.map-description a:hover {
    color: lightgray;
}

.form-content {
    position: absolute;
    top: 50%; /* Posiziona al centro verticale */
    left: 50%; /* Posiziona al centro orizzontale */
    transform: translate(-50%, -50%); /* Centra il form all'interno dell'area */
    background: linear-gradient(135deg, rgba(0, 100, 0, 0.9), rgba(0, 200, 0, 0.8) 30%, rgba(144, 238, 144, 0.9) 50%, rgba(0, 153, 0, 0.8) 70%, rgba(0, 100, 0, 0.9)); 
    padding: 20px;
    border-radius: 15px;
    color: white;
    width: 85%; /* Limita la larghezza all'80% dell'area del carosello */
    max-width: 1000px; /* Limita la larghezza massima */
    max-height: 90%; /* Limita l'altezza massima all'interno del carosello */
    overflow-y: auto; /* Aggiunge lo scorrimento verticale se necessario */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    display: none;
    flex-direction: column;
}

.form-content.show {
    display: flex;
    opacity: 1;
}
.form-content h2 {
    margin-top: 0;
}

.form-content label {
    display: block;
    margin: 10px 0 5px;
}

.form-content input, .form-content textarea {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    margin-bottom: 10px;
}

.form-content button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #009900;
    color: white;
    cursor: pointer;
    font-size: 16px;
}

.form-content button:hover {
    background-color: #007700;
}
.form-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.form-logo {
    margin-right: 20px;
    max-width: 50px;
    height: auto;
}

.short-input {
    width: 50%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    margin-bottom: 10px;
}

.large-textarea {
    width: 100%;
    max-width: 97%; /* Imposta una larghezza massima per il box del messaggio */
    height: 150px; /* Aumenta l'altezza del box del messaggio */
    padding: 10px;
    border: none;
    border-radius: 5px;
    margin-bottom: 10px;
}}

.form-content h2 {
    margin-top: 0;
}

.form-content label {
    display: block;
    margin: 10px 0 5px;
}

.form-content input, .form-content textarea {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    margin-bottom: 10px;
}

.form-content button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #009900;
    color: white;
    cursor: pointer;
    font-size: 16px;
}

.form-content button:hover {
    background-color: #007700;
}
//.form-content {
    //position: absolute;
    //top: 50%;
    //left: 50%;
    //transform: translate(-50%, -50%);
    //background: rgba(0, 153, 0, 0.8); 
    //padding: 20px;
    //border-radius: 15px;
    //color: white;
    //width: 70%;
    //max-width: 800px;
    //max-height: 90vh; /* Riduci l'altezza massima del form */
    //overflow-y: auto; /* Aggiungi lo scorrimento verticale */
    //opacity: 0;
    //transition: opacity 0.5s ease-in-out;
    //display: none;
    //flex-direction: column;
//}

.form-content.hide {
    pointer-events: none;
}

.form-content.show {
    pointer-events: auto;
}

.form-content.show {
    display: flex;
    opacity: 1;
}

.form-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.form-logo {
    margin-right: 10px;
    max-width: 50px;
    height: auto;
}

.form-content h2 {
    margin: 0;
}

.form-content p {
    margin-bottom: 20px;
}

.form-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.form-group {
    flex: 1;
    margin-right: 10px;
}

.form-group:last-child {
    margin-right: 0;
}

label {
    display: block;
    margin-bottom: 5px;
}

input, textarea {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    margin-bottom: 10px;
}

input[type="text"], input[type="email"], input[type="tel"] {
    width: calc(100% - 20px); /* Riduci la larghezza dei campi input */
}

.large-textarea {
    height: 150px; /* Aumenta l'altezza del box del messaggio */
}

button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #009900;
    color: white;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background-color: #007700;
}

.form-content.show {
    display: flex;
    opacity: 1;
}

/* Stile per il testo sopra il toggle switch */
.terms-text {
    font-size: 1.2rem;
    color: white;
    margin-bottom: 10px;
    display: block;
    text-align: left;
}

/* Stile per il toggle switch */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    margin-right: 10px; /* Spazio tra il toggle e il testo */
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #009900; /* Colore verde del bottone "Invia" */
}

input:checked + .slider:before {
    transform: translateX(26px);
}

/* Stile aggiuntivo per slider arrotondato */
.slider.round {
    border-radius: 24px;
}

.slider.round:before {
    border-radius: 50%;
}

.vcard-link:hover {
    color: lightgray; /* Cambia il colore del testo al passaggio del mouse */
}
.vcard-content {
    position: absolute;
    top: 50%; /* Posiziona al centro verticale */
    left: 50%; /* Posiziona al centro orizzontale */
    transform: translate(-50%, -50%); /* Centra la sezione v-card */
    background: linear-gradient(135deg, rgba(0, 100, 0, 0.9), rgba(0, 200, 0, 0.8) 30%, rgba(144, 238, 144, 0.9) 50%, rgba(0, 153, 0, 0.8) 70%, rgba(0, 100, 0, 0.9));
    padding: 20px;
    border-radius: 15px;
    color: white;
    width: 80%; /* Limita la larghezza all'80% dell'area del carosello */
    max-width: 900px; /* Limita la larghezza massima */
    max-height: 80%; /* Limita l'altezza massima all'interno del carosello */
    overflow-y: auto; /* Aggiungi lo scorrimento verticale se necessario */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    display: none; /* Nascondi quando non in uso */
    text-align: center; /* Centra il contenuto testo */
}

.vcard-content.show {
    display: block;
    opacity: 1; /* Rendi visibile la sezione v-card con l'animazione */
}
.vcard-content h2 {
    margin-bottom: 20px;
}

.vcard-qr {
    max-width: 300px;
    width: 50%;
    height: auto;
    margin-top: 20px;
}
    

/* Contenitore dei prodotti */

.prodotti-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 153, 0, 0); /* Sfondo trasparente */
    padding: 20px;
    border-radius: 15px;
    color: white;
    width: 85%;
    max-width: 1200px;
    max-height: 85%;
    overflow-y: auto;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    display: grid; /* Layout a griglia */
    grid-template-columns: repeat(3, 1fr); /* Tre colonne di uguale larghezza */
    gap: 20px; /* Spazio tra le colonne */
    justify-items: center; /* Centra gli elementi orizzontalmente */
    align-items: center; /* Centra gli elementi verticalmente */
}

.prodotti-content.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Schede prodotto */
.product-card {
    background: linear-gradient(135deg, rgba(0, 100, 0, 0.9), rgba(0, 200, 0, 0.8) 30%, rgba(144, 238, 144, 0.9) 50%, rgba(0, 153, 0, 0.8) 70%, rgba(0, 100, 0, 0.9));
    border-radius: 10px;
    padding: 8px; /* Riduci leggermente il padding */
    text-align: center;
    opacity: 1;
    width: 85%; /* Riduci leggermente la larghezza */
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribuisce lo spazio tra immagine e testo */
}
    
.product-card img {
    max-width: 120px; /* Riduci leggermente la dimensione delle immagini */
    height: auto;
    margin-bottom: 8px; /* Riduci lo spazio sotto l'immagine */
    align-self: center; /* Mantiene l'immagine centrata */
}

.product-card h3 {
    font-size: 13px; /* Riduci leggermente la dimensione del testo */
    color: white;
    margin-top: auto; /* Spinge il testo verso il basso */
    padding-bottom: 8px; /* Spazio uniforme tra il testo e il bordo inferiore */
}

/* Stile per i link all'interno delle schede prodotto */
.product-card h3 a {
    color: white; /* Imposta il colore dei link a bianco */
    text-decoration: none; /* Rimuove la sottolineatura dei link */
    font-weight: bold; /* Rende il testo in grassetto per una maggiore visibilità */
}

.btn-green {
    align-self: flex-end; /* Posiziona il bottone alla fine della colonna di testo */
    margin-top: 20px; /* Spazio sopra il bottone */
    background-color: #009900;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    text-align: center;
}

.btn-green:hover {
    background-color: #1b5e20; /* Verde ancora più scuro al passaggio del mouse */
}

/* Scheda prodotto */
.oring-details {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95); /* Inizia leggermente più piccola */
    background: linear-gradient(135deg, rgba(0, 100, 0, 0.9), rgba(0, 200, 0, 0.8) 30%, rgba(144, 238, 144, 0.9) 50%, rgba(0, 153, 0, 0.8) 70%, rgba(0, 100, 0, 0.9));
    padding: 20px;
    border-radius: 15px;
    color: white;
    width: 70%;
    max-width: 1200px;
    max-height: 85%;
    overflow-y: auto;
    opacity: 0; /* Inizia nascosta */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    display: flex; /* Mantieni l'elemento nel flusso */
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.oring-details.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.oring-details img {
    align-self: center;
    margin-left: 10px;
    border-radius: 15px;
    object-fit: cover;
    max-width: 30%;
    height: auto;
}

.oring-detail-text {
    max-width: 70%;
    font-size: 1em;
    line-height: 1.4em;
}
.blur {
    filter: blur(5px); /* Effetto sfocato sul carosello */
}

/* Impedisce che la scheda diventi sfocata */
.oring-details.blur {
    filter: none;
}
/* Per rendere il link bianco */
a {
    color: white;
    text-decoration: none; /* Rimuove la sottolineatura se non necessaria */
}

/* Per rendere il link bianco anche quando viene visitato */
a:visited {
    color: white;
}
/* Scheda prodotto */
.oleodinamica-details {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95); /* Inizia leggermente più piccola */
    background: linear-gradient(135deg, rgba(0, 100, 0, 0.9), rgba(0, 200, 0, 0.8) 30%, rgba(144, 238, 144, 0.9) 50%, rgba(0, 153, 0, 0.8) 70%, rgba(0, 100, 0, 0.9));
    padding: 20px;
    border-radius: 15px;
    color: white;
    width: 90%;
    max-width: 1600px;
    max-height: 85%;
    overflow-y: auto;
    opacity: 0; /* Inizia nascosta */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    display: flex; /* Mantieni l'elemento nel flusso */
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.oleodinamica-details.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.oleodinamica-details img {
    align-self: center; /* Centra l'immagine verticalmente */
    margin-left: 10px;
    border-radius: 15px;
    object-fit: cover;
    max-width: 30%; /* Puoi regolare questa larghezza come preferisci */
    height: auto;
}

.oleodinamica-details-text {
    max-width: 95%;
    font-size: 1em;
    line-height: 1.4em;
}


.blur {
    filter: blur(5px); /* Effetto sfocato sul carosello */
}

/* Impedisce che la scheda diventi sfocata */
.oleodinamica-details.blur {
    filter: none;
}
/* Per rendere il link bianco */
a {
    color: white;
    text-decoration: none; /* Rimuove la sottolineatura se non necessaria */
}

/* Per rendere il link bianco anche quando viene visitato */
a:visited {
    color: white;
}

/* Scheda prodotto */
.pneumatica-details {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95); /* Inizia leggermente più piccola */
    background: linear-gradient(135deg, rgba(0, 100, 0, 0.9), rgba(0, 200, 0, 0.8) 30%, rgba(144, 238, 144, 0.9) 50%, rgba(0, 153, 0, 0.8) 70%, rgba(0, 100, 0, 0.9));
    padding: 20px;
    border-radius: 15px;
    color: white;
    width: 70%;
    max-width: 1200px;
    max-height: 85%;
    overflow-y: auto;
    opacity: 0; /* Inizia nascosta */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    display: flex; /* Mantieni l'elemento nel flusso */
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.pneumatica-details.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.pneumatica-details img {
   align-self: center; /* Centra l'immagine verticalmente */
    margin-left: 10px;
    border-radius: 15px;
    object-fit: cover;
    max-width: 30%; /* Puoi regolare questa larghezza come preferisci */
    height: auto;
}

.pneumatica-details-text {
    max-width: 70%;
    font-size: 1em;
    line-height: 1.4em;
}


.blur {
    filter: blur(5px); /* Effetto sfocato sul carosello */
}

/* Impedisce che la scheda diventi sfocata */
.pneumatica-details.blur {
    filter: none;
}

/* Stili per Raschiatori */
.raschiatori-details {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95); /* Inizia leggermente più piccola */
    background: linear-gradient(135deg, rgba(0, 100, 0, 0.9), rgba(0, 200, 0, 0.8) 30%, rgba(144, 238, 144, 0.9) 50%, rgba(0, 153, 0, 0.8) 70%, rgba(0, 100, 0, 0.9));
    padding: 20px;
    border-radius: 15px;
    color: white;
    width: 70%;
    max-width: 1200px;
    max-height: 85%;
    overflow-y: auto;
    opacity: 0; /* Inizia nascosta */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    display: flex; /* Mantieni l'elemento nel flusso */
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.raschiatori-details.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.raschiatori-details img {
    align-self: center;
    margin-left: 10px;
    border-radius: 15px;
    object-fit: cover;
    max-width: 30%;
    height: auto;
}

.raschiatori-details-text {
    max-width: 70%;
    font-size: 1em;
    line-height: 1.4em;
}
.raschiatori-details img {
    align-self: center; /* Centra l'immagine verticalmente */
    margin-left: 10px;
    border-radius: 15px;
    object-fit: cover;
    max-width: 30%; /* Puoi regolare questa larghezza come preferisci */
    height: auto;
}

.raschiatori-details-text {
    max-width: 70%;
    font-size: 1em;
    line-height: 1.4em;
}

/* Stile per paraoli */
.paraoli-details {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95); /* Inizia leggermente più piccola */
    background: linear-gradient(135deg, rgba(0, 100, 0, 0.9), rgba(0, 200, 0, 0.8) 30%, rgba(144, 238, 144, 0.9) 50%, rgba(0, 153, 0, 0.8) 70%, rgba(0, 100, 0, 0.9));
    padding: 20px;
    border-radius: 15px;
    color: white;
    width: 90%;
    max-width: 1600px;
    max-height: 85%;
    overflow-y: auto;
    opacity: 0; /* Inizia nascosta */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    display: flex; /* Mantieni l'elemento nel flusso */
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.paraoli-details.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.paraoli-details img {
    align-self: center; /* Centra l'immagine verticalmente */
    margin-left: 10px;
    border-radius: 15px;
    object-fit: cover;
    max-width: 50%; /* Puoi regolare questa larghezza come preferisci */
    height: auto;
}

.paraoli-details-text {
    max-width: 70%;
    font-size: 1em;
    line-height: 1.4em;
}


/* Stile per guarnizioni piane */
.guarnizioni-piane-details {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95); /* Inizia leggermente più piccola */
    background: linear-gradient(135deg, rgba(0, 100, 0, 0.9), rgba(0, 200, 0, 0.8) 30%, rgba(144, 238, 144, 0.9) 50%, rgba(0, 153, 0, 0.8) 70%, rgba(0, 100, 0, 0.9));
    padding: 20px;
    border-radius: 15px;
    color: white;
    width: 90%;
    max-width: 1600px;
    max-height: 85%;
    overflow-y: auto;
    opacity: 0; /* Inizia nascosta */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    display: flex; /* Mantieni l'elemento nel flusso */
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.guarnizioni-piane-details.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.guarnizioni-piane-details img {
    align-self: center; /* Centra l'immagine verticalmente */
    margin-left: 10px;
    border-radius: 15px;
    object-fit: cover;
    max-width: 30%; /* Puoi regolare questa larghezza come preferisci */
    height: auto;
}

.guarnizioni-piane-details-text {
    max-width: 70%;
    font-size: 1em;
    line-height: 1.4em;
}


/* Stile per lastre e rotoli */
.lastre-rotoli-details {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95); /* Inizia leggermente più piccola */
    background: linear-gradient(135deg, rgba(0, 100, 0, 0.9), rgba(0, 200, 0, 0.8) 30%, rgba(144, 238, 144, 0.9) 50%, rgba(0, 153, 0, 0.8) 70%, rgba(0, 100, 0, 0.9));
    padding: 20px;
    border-radius: 15px;
    color: white;
    width: 70%;
    max-width: 1200px;
    max-height: 85%;
    overflow-y: auto;
    opacity: 0; /* Inizia nascosta */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    display: flex; /* Mantieni l'elemento nel flusso */
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.lastre-rotoli-details.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.lastre-rotoli-details img {
    align-self: center; /* Centra l'immagine verticalmente */
    margin-left: 10px;
    border-radius: 15px;
    object-fit: cover;
    max-width: 30%; /* Puoi regolare questa larghezza come preferisci */
    height: auto;
}

.lastre-rotoli-details-text {
    max-width: 70%;
    font-size: 1em;
    line-height: 1.4em;
}


/* Stile per dischi OSB */
.dischi-osb-details {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95); /* Inizia leggermente più piccola */
    background: linear-gradient(135deg, rgba(0, 100, 0, 0.9), rgba(0, 200, 0, 0.8) 30%, rgba(144, 238, 144, 0.9) 50%, rgba(0, 153, 0, 0.8) 70%, rgba(0, 100, 0, 0.9));
    padding: 20px;
    border-radius: 15px;
    color: white;
    width: 80%;
    max-width: 1250px;
    max-height: 85%;
    overflow-y: auto;
    opacity: 0; /* Inizia nascosta */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    display: flex; /* Mantieni l'elemento nel flusso */
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.dischi-osb-details.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.dischi-osb-details img {
    align-self: center; /* Centra l'immagine verticalmente */
    margin-left: 10px;
    border-radius: 15px;
    object-fit: cover;
    max-width: 30%; /* Puoi regolare questa larghezza come preferisci */
    height: auto;
}

.dischi-osb-details-text {
    max-width: 70%;
    font-size: 1em;
    line-height: 1.4em;
}


/* Stile per guarnizioni adesive */
.guarnizioni-adesive-details {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95); /* Inizia leggermente più piccola */
    background: linear-gradient(135deg, rgba(0, 100, 0, 0.9), rgba(0, 200, 0, 0.8) 30%, rgba(144, 238, 144, 0.9) 50%, rgba(0, 153, 0, 0.8) 70%, rgba(0, 100, 0, 0.9));
    padding: 20px;
    border-radius: 15px;
    color: white;
    width: 70%;
    max-width: 1200px;
    max-height: 85%;
    overflow-y: auto;
    opacity: 0; /* Inizia nascosta */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    display: flex; /* Mantieni l'elemento nel flusso */
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.guarnizioni-adesive-details.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.guarnizioni-adesive-details img {
    align-self: center; /* Centra l'immagine verticalmente */
    margin-left: 10px;
    border-radius: 15px;
    object-fit: cover;
    max-width: 30%; /* Puoi regolare questa larghezza come preferisci */
    height: auto;
}

/* Contenitore dei download */
.download-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 153, 0, 0); /* Sfondo trasparente */
    padding: 20px;
    border-radius: 15px;
    color: white;
    width: 85%;
    max-width: 1200px;
    max-height: 85%;
    overflow-y: auto;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    display: grid; /* Layout a griglia */
    grid-template-columns: repeat(3, 1fr); /* Tre colonne di uguale larghezza */
    gap: 20px; /* Spazio tra le colonne */
    justify-items: center; /* Centra gli elementi orizzontalmente */
    align-items: center; /* Centra gli elementi verticalmente */
}

.download-content.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Schede download */
.download-card {
    background: linear-gradient(135deg, rgba(0, 100, 0, 0.9), rgba(0, 200, 0, 0.8) 30%, rgba(144, 238, 144, 0.9) 50%, rgba(0, 153, 0, 0.8) 70%, rgba(0, 100, 0, 0.9));
    border-radius: 10px;
    padding: 8px; /* Riduci leggermente il padding */
    text-align: center;
    opacity: 1;
    width: 85%; /* Riduci leggermente la larghezza */
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribuisce lo spazio tra immagine e testo */
}

.download-card img {
    max-width: 100px; /* Riduci leggermente la dimensione delle immagini */
    height: auto;
    margin-bottom: 8px; /* Riduci lo spazio sotto l'immagine */
    align-self: center; /* Mantiene l'immagine centrata */
}

.download-card h3 {
    font-size: 13px; /* Riduci leggermente la dimensione del testo */
    color: white;
    margin-top: auto; /* Spinge il testo verso il basso */
    padding-bottom: 8px; /* Spazio uniforme tra il testo e il bordo inferiore */
}

.guarnizioni-adesive-details-text {
    max-width: 70%;
    font-size: 1em;
    line-height: 1.4em;
}

@media (max-width: 1200px) {

	body {
        	overflow-y: auto; /* Permette lo scrolling verticale */
    }
    
     nav ul li a {
        font-size: 14px; /* Dimensione del testo ridotta per le voci del menu */
        padding: 4px 0; /* Aggiunge un po' di padding sopra e sotto */
        display: inline-block; /* Assicura che il testo sia in linea */
        white-space: nowrap; /* Impedisce il wrapping del testo su più righe */
    }

}

@media (max-width: 950px) {

	body {
        	overflow-y: auto; /* Permette lo scrolling verticale */
    }
    
     nav ul li a {
        font-size: 14px; /* Dimensione del testo ridotta per le voci del menu */
        padding: 0px 0; /* Aggiunge un po' di padding sopra e sotto */
        display: inline-block; /* Assicura che il testo sia in linea */
        white-space: nowrap; /* Impedisce il wrapping del testo su più righe */
    }
    footer {
        height: auto;
        flex-direction: column;
        text-align: center; /* Centra il testo */
        padding: 2px 0; /* Riduci il padding interno al footer */
    }

    .footer-content {
        display: flex;
        flex-direction: column; /* Dispone il contenuto in colonna */
        text-align: center; /* Centra il testo */
        align-items: center; /* Centra gli elementi */
    }

    .footer-left,
    .footer-center,
    .footer-right {
         margin: 0px 0; /* Riduci il margine tra gli elementi */
         width: 100%;
         display: block;
         text-align: center; /* Centra il testo */
    }

    .footer-links {
        justify-content: center; /* Centra i link */
        margin-top: 5px; /* Riduci il margine superiore dei link */
    }

    .footer-links a {
        margin: 0 25x; /* Mantieni lo spazio minimo tra i link */
    }

    .footer-left {
        order: 3; /* Porta la scritta "DEVELOPED BY..." sotto il resto */
    }

    .footer-center {
        order: 1; /* Posiziona l'indirizzo e il numero di telefono in alto */
    }

    .footer-right {
        order: 2; /* Posiziona i link subito sotto il centro */
    }
    


}


/* Media query per dispositivi con larghezza massima di 576px */

@media (max-width: 576px) {

	body {
        	overflow-y: auto; /* Permette lo scrolling verticale */
    }
    
    .carousel-text {
        font-size: 55px; /* Dimensione ridotta per il testo principale */
    }
    
    .seal-solution {
        font-size: 25px; /* Dimensione ridotta per "SEAL SOLUTIONS FOR" */
    }


    .navbar {
        display: flex;
        flex-direction: column; /* Dispone il contenuto della navbar in colonna */
        align-items: center; /* Centra gli elementi orizzontalmente */
    }

    .navbar .logo {
        text-align: center; /* Centra il logo */
        margin-bottom: 10px; /* Spazio sotto il logo */
    }

    .navbar .logo img {
        max-width: 280px; /* Ridimensiona il logo a 100px */
        height: auto; /* Mantiene le proporzioni del logo */
    }

    nav ul {
        width: 100%; /* Utilizza l'intera larghezza per il menu */
        display: flex; /* Dispone le voci del menu orizzontalmente */
        justify-content: space-between; /* Spazia le voci del menu in modo uniforme */
        padding: 0;
        margin: 0;
    }

    nav ul li {
        flex: 1; /* Assegna la stessa quantità di spazio a ogni voce di menu */
        text-align: center; /* Centra il testo di ogni voce di menu */
        margin: 0 10px; /* Aggiunge un margine orizzontale per aumentare la distanza */
    }

    nav ul li a {
        font-size: 10px; /* Dimensione del testo ridotta per le voci del menu */
        padding: 10px 0; /* Aggiunge un po' di padding sopra e sotto */
        display: inline-block; /* Assicura che il testo sia in linea */
        white-space: nowrap; /* Impedisce il wrapping del testo su più righe */
    }
    
    footer {
        height: auto;
        flex-direction: column;
        text-align: center; /* Centra il testo */
        padding: 2px 0; /* Riduci il padding interno al footer */
    }

    .footer-content {
        display: flex;
        flex-direction: column; /* Dispone il contenuto in colonna */
        text-align: center; /* Centra il testo */
        align-items: center; /* Centra gli elementi */
    }

    .footer-left,
    .footer-center,
    .footer-right {
         margin: 0px 0; /* Riduci il margine tra gli elementi */
         width: 100%;
         display: block;
         text-align: center; /* Centra il testo */
    }

    .footer-links {
        justify-content: center; /* Centra i link */
        margin-top: 5px; /* Riduci il margine superiore dei link */
    }

    .footer-links a {
        margin: 0 25x; /* Mantieni lo spazio minimo tra i link */
    }

    .footer-left {
        order: 3; /* Porta la scritta "DEVELOPED BY..." sotto il resto */
    }

    .footer-center {
        order: 1; /* Posiziona l'indirizzo e il numero di telefono in alto */
    }

    .footer-right {
        order: 2; /* Posiziona i link subito sotto il centro */
    }
    
    /* Stile per la sezione azienda per schermi piccoli */
    .azienda-content {
        flex-direction: column; /* Cambia il layout da riga a colonna */
        align-items: center; /* Centra il contenuto orizzontalmente */
        text-align: center; /* Allinea il testo al centro */
        padding: 15px; /* Aggiungi un po' di padding */
    }

    .azienda-content img {
        max-width: 80%; /* Ridimensiona l'immagine per adattarla allo schermo */
        height: auto; /* Mantieni le proporzioni dell'immagine */
        margin-top: 20px; /* Aggiungi spazio sopra l'immagine */
    }

    .azienda-text {
        max-width: 100%; /* Assicura che il testo occupi la larghezza completa */
        font-size: 0.9em; /* Riduci leggermente la dimensione del font per schermi piccoli */
        line-height: 1.5em; /* Aumenta l'interlinea per una migliore leggibilità */
    }
    
     /* Stile per la sezione prodotti-content per schermi piccoli */
    .prodotti-content {
        grid-template-columns: 1fr; /* Passa a una sola colonna */
        gap: 10px; /* Riduce lo spazio tra le schede */
        padding: 10px; /* Riduci il padding per adattarsi meglio agli schermi piccoli */
    }

    .product-card {
        width: 100%; /* Imposta la larghezza della scheda al 100% */
        max-width: none; /* Rimuovi la larghezza massima */
        margin: 0 auto; /* Centra la scheda */
    }
    
    /* Stile per le sezioni di dettaglio dei prodotti su schermi piccoli */
    .oring-details,
    .oleodinamica-details,
    .pneumatica-details,
    .raschiatori-details,
    .paraoli-details,
    .guarnizioni-piane-details,
    .lastre-rotoli-details,
    .guarnizioni-adesive-details,
    .dischi-osb-details {
        flex-direction: column; /* Dispone il contenuto verticalmente */
        align-items: center; /* Centra gli elementi orizzontalmente */
        text-align: center; /* Allinea il testo al centro */
        padding: 15px; /* Aumenta leggermente il padding per migliorare lo spazio interno */
        max-width: 100%; /* Aumenta la larghezza massima per un migliore utilizzo dello spazio */
        max-height: 85%; /* Aumenta leggermente l'altezza massima per un migliore utilizzo dello spazio */
    }

    .oring-details img,
    .oleodinamica-details img,
    .pneumatica-details img,
    .raschiatori-details img,
    .paraoli-details img,
    .guarnizioni-piane-details img,
    .lastre-rotoli-details img,
    .guarnizioni-adesive-details img,
    .dischi-osb-details img {
        max-width: 70%; /* Ridimensiona l'immagine per adattarla allo schermo */
        height: auto; /* Mantieni le proporzioni dell'immagine */
        margin-top: 20px; /* Aggiungi spazio sopra l'immagine */
        margin-bottom: 15px; /* Aggiungi spazio sotto l'immagine per il bottone */
    }

    .oring-details-text,
    .oleodinamica-details-text,
    .pneumatica-details-text,
    .raschiatori-details-text,
    .paraoli-details-text,
    .guarnizioni-piane-details-text,
    .lastre-rotoli-details-text,
    .guarnizioni-adesive-details-text,
    .dischi-osb-details-text {
        max-width: 100%; /* Assicura che il testo occupi la larghezza completa */
        font-size: 0.9em; /* Riduci leggermente la dimensione del font per schermi piccoli */
        line-height: 1.5em; /* Aumenta l'interlinea per una migliore leggibilità */
        margin-bottom: 10px; /* Aggiungi un margine inferiore per separare il testo dall'immagine */
    }

    .btn-back {
        display: block; /* Assicura che il bottone occupi tutta la larghezza disponibile */
        margin-top: 15px; /* Aggiungi spazio sopra il bottone */
        width: 100%; /* Imposta una larghezza completa per il bottone */
        text-align: center; /* Centra il testo nel bottone */
        padding: 10px; /* Aggiungi un padding per migliorare la cliccabilità */
        background-color: #009900; /* Colore di sfondo del bottone */
        color: white; /* Colore del testo del bottone */
        border: none; /* Rimuovi i bordi */
        border-radius: 5px; /* Aggiungi bordi arrotondati */
        cursor: pointer; /* Cambia il cursore in una mano per indicare che è cliccabile */
    }

    .btn-back:hover {
        background-color: #007700; /* Cambia il colore di sfondo al passaggio del mouse */
    }
    
    /* Stile per la sezione contatti su schermi piccoli */
    .contatti-content {
        display: flex;
        flex-direction: column; /* Dispone gli elementi verticalmente */
        align-items: center; /* Centra gli elementi orizzontalmente */
        text-align: center; /* Allinea il testo al centro */
        padding: 15px; /* Riduci il padding per adattarsi meglio agli schermi piccoli */
        width: 90%; /* Limita la larghezza per evitare di occupare tutto lo schermo */
        max-height: 85%; /* Aumenta leggermente l'altezza massima per un migliore utilizzo dello spazio */
    }

    .contact-info {
        display: flex;
        flex-direction: column; /* Dispone gli elementi di contatto verticalmente */
        align-items: center; /* Centra gli elementi orizzontalmente */
        width: 100%; /* Utilizza l'intera larghezza disponibile */
        margin-bottom: 5px; /* Aggiungi spazio sotto le informazioni di contatto */
        order: 1; /* Ordine per visualizzare le informazioni di contatto prima della mappa */
    }

    .contact-item {
        display: block; /* Rende ogni elemento un blocco per occupare l'intera larghezza */
        margin-bottom: 5px; /* Aggiungi spazio tra gli elementi di contatto */
        text-align: center; /* Allinea il testo al centro */
    }

    .vcard-content {
        width: 100%; /* Adatta la larghezza della v-card */
        margin-top: 5x; /* Aggiungi spazio sopra la v-card */
        order: 2; /* Ordine per visualizzare la v-card dopo le informazioni di contatto */
    }

    .map-container {
        width: 100%; /* Adatta la mappa alla larghezza disponibile */
        margin-top: 20px; /* Aggiungi spazio sopra la mappa */
        order: 3; /* Ordine per visualizzare la mappa sotto le altre sezioni */
    }

    #map {
        width: 100%; /* Assicura che la mappa utilizzi tutta la larghezza disponibile */
        height: 200px; /* Ridimensiona l'altezza della mappa per schermi piccoli */
        border-radius: 10px; /* Arrotonda leggermente gli angoli */
    }

    .map-description {
        margin-top: 10px; /* Aggiungi spazio sopra il testo della mappa */
        order: 4; /* Ordine per visualizzare il testo della mappa sotto la mappa */
    }

    .vcard-link {
        display: inline-block; /* Assicura che il link della v-card sia in linea e centrato */
        margin-top: 5px; /* Aggiungi spazio sopra il link della v-card */
        font-weight: bold; /* Aggiungi enfasi al testo del link */
        color: white; /* Mantieni il colore bianco per il link */
    }
    
        /* Stile per la sezione prodotti-content per schermi piccoli */
    .download-content {
        grid-template-columns: 1fr; /* Passa a una sola colonna */
        gap: 10px; /* Riduce lo spazio tra le schede */
        padding: 10px; /* Riduci il padding per adattarsi meglio agli schermi piccoli */
    }

    .download-card {
        width: 100%; /* Imposta la larghezza della scheda al 100% */
        max-width: none; /* Rimuovi la larghezza massima */
        margin: 0 auto; /* Centra la scheda */
    }

}
/* Esempio per cambiare il colore di sfondo e il colore del testo del banner */
#iubenda-cs-banner {
    background-color: rgba(0, 128, 0, 0.8) !important; /* Colore di sfondo semi-trasparente verde */
    color: #fff !important; /* Colore del testo bianco */
    font-family: 'Arial', sans-serif !important; /* Font personalizzato */
    border-radius: 5px !important; /* Angoli arrotondati */
}

/* Esempio per cambiare la posizione del banner */
#iubenda-cs-banner {
    bottom: 20px !important; /* Sposta il banner più in alto dal bordo inferiore */
    right: 20px !important; /* Sposta il banner a destra */
    left: auto !important; /* Resetta il valore left per evitare conflitti */
}

/* Esempio per personalizzare i pulsanti del banner */
#iubenda-cs-banner .iubenda-cs-btn {
    background-color: #4CAF50 !important; /* Cambia il colore di sfondo dei pulsanti */
    color: #fff !important; /* Cambia il colore del testo dei pulsanti */
    border: none !important; /* Rimuove il bordo */
    padding: 10px 20px !important; /* Modifica il padding */
    border-radius: 5px !important; /* Aggiunge angoli arrotondati */
    cursor: pointer !important; /* Cambia il cursore su hover */
}

/* Esempio per modificare l'aspetto del link 'Le tue preferenze relative alla privacy' */
#iubenda-cs-banner .iubenda-cs-btn-primary {
    background-color: #f1c40f !important; /* Colore di sfondo giallo */
    color: #000 !important; /* Colore del testo nero */
    border: 1px solid #e1b40f !important; /* Bordo giallo scuro */
}

/* Esempio per aggiungere un'animazione al banner */
#iubenda-cs-banner {
    transition: all 0.5s ease-in-out !important; /* Aggiunge un'animazione di transizione */
}