body {

    background-image: url('../images/sfondo.jpg'); /* Percorso dell'immagine */

    background-size: cover; /* L'immagine coprirà l'intero schermo */

    background-position: center; /* Centra l'immagine */

    background-repeat: no-repeat; /* Evita che l'immagine si ripeta */

    background-attachment: fixed; /* Fissa l'immagine mentre si scorre la pagina */

    color: #333;

}



/* Opzionale: Aggiungere un effetto di trasparenza sui contenuti per rendere visibile lo sfondo */

.container {

    background-color: rgba(255, 255, 255, 0.8); /* Bianco con trasparenza */

    padding: 20px;

    border-radius: 8px;

}



/* Sezione Consegna Gratuita */

.consegna-gratuita {

  background-color: #f0f8ff; /* Colore di sfondo chiaro */

  color: #2c3e50; /* Colore del testo scuro */

  text-align: center; /* Allineamento centrale */

  padding: 1vw; /* Padding interno */

  font-size: 1.5vw; /* Dimensione del font */

  border: 0px solid #2980b9; /* Bordo di colore blu */

  margin: auto; /* Margine sotto il div */

  border-radius: 5px; /* Angoli arrotondati */

}

/* grassetto consegna gratuita */

#Grassetto{

  background-color: #f0f8ff; /* Colore di sfondo chiaro */

  color: #2c3e50; /* Colore del testo scuro */

  text-align: center; /* Allineamento centrale */

  padding: 10px; /* Padding interno */

  font-size: 16px; /* Dimensione del font */

  font-weight: bold; /* Grassetto */

  border: 0px solid #2980b9; /* Bordo di colore blu */

  margin: auto; /* Margine sotto il div */

  border-radius: 5px; /* Angoli arrotondati */

}

.icon-furgoncino {

    width: 2vw; /* Larghezza dell'icona */

    height: auto; /* Altezza automatica per mantenere le proporzioni */

    vertical-align: middle; /* Allinea verticalmente l'immagine con il testo */

    margin-right: 1vw; /* Margine a destra per separare l'immagine dal testo */

}

/* header marchio ricerca e lingua */

.header {

    display: flex; /* Usa Flexbox per allineare gli elementi sulla stessa riga */

    align-items: center; /* Allinea verticalmente al centro */

    justify-content: space-between; /* Spaziatura uniforme tra gli elementi */

    padding: 1vw; /* Padding interno */



}



.logo {

    display: flex; /* Usa Flexbox per allineare logo e testo */

    align-items: center; /* Allinea logo e testo verticalmente */



}



.logo img {

    width: 5vw; /* Imposta la larghezza del logo */

    height: auto; /* Mantieni le proporzioni del logo */

    margin-right: 1vw; /* Margine a destra per separare il logo dal testo */

}

/* noe ditta */

/* Contenitore per il testo (nome ditta + slogan) */

.logo-text {

    display: flex;

    flex-direction: column; /* Dispone il nome e lo slogan in colonna */

    align-items: flex-start; /* Allinea il testo a sinistra (o usa center per centrare) */

}



/* Nome della ditta */

.nome-ditta {

    color: black;

    font-family: 'Montserrat', sans-serif;

    font-size: 2vw;

    font-weight: bold;

    margin: 0; /* Rimuove i margini predefiniti */

}



/* Slogan */

.slogan {

    color: gray;

    font-family: 'Montserrat', sans-serif;

    font-size: 1vw;

    font-weight: normal;

    margin-top: 0.2em; /* Distanza tra il nome e lo slogan */

}

.search-container {

    display: flex;

    align-items: center; /* Allinea verticalmente gli elementi al centro */

    justify-content: center; /* Centra la barra di ricerca orizzontalmente */

    margin: 0 auto; /* Centra la barra rispetto al contenitore */

    width: 60vw; /* Rende la barra più lunga */

    gap: 1vw; /* Spaziatura uniforme tra gli elementi */

}



.search-container input {

    padding: 1vw; /* Spaziatura interna */

    border: 1px solid #2980b9;

    border-radius: 5px;

    width: 100%; /* Occupa tutto lo spazio disponibile nel contenitore */

    font-size: 1vw;

}



/* Bandiera e testo "Made in Italy" */

.made-in-italy {

    margin-left: 0.5vw; /* Riduci il margine per avvicinarlo alla bandiera */

    font-style: italic;

    font-weight: 300;

    font-size: 1.3vw; /* Rendi il testo più piccolo */

    color: #000;

    display: flex; /* Allinea il contenuto in linea con la bandiera */

    align-items: center; /* Centra verticalmente il testo con la bandiera */

    white-space: nowrap; /* Impedisce che il testo vada su più righe */

    margin-right: 13vw;

}



.bandiera-italiana {

    width: 2vw;

    height: auto;

    margin-right: 0.5vw;

    vertical-align: middle;

}



/* Selettore Lingua */

.lingua {

    margin-left: 1vw; /* Margine per distanziare dal testo "Made in Italy" */

    padding: 0.5vw;

    font-size: 1vw;

    border: 1px solid #ccc;

    border-radius: 5px;

    background-color: #fff;

    color: #333;

    cursor: pointer;

}

/* Media Query per schermi più piccoli (mobile) */

@media (max-width: 768px) {

    /* Consegna gratuita */

    .consegna-gratuita {

        font-size: 4vw; /* Aumenta la dimensione del font per mobile */

        padding: 2vw; /* Aumenta il padding */

    }



    #Grassetto {

        font-size: 4vw; /* Aumenta la dimensione del font */

        padding: 2vw; /* Aumenta il padding */

    }



    .icon-furgoncino {

        width: 5vw; /* Aumenta la dimensione dell'icona */

        height: auto;

        margin-bottom: 1vw; /* Spazio sopra il logo */

    }



    /* Header */

    .header {

        display: flex;

        justify-content: space-between; /* Distribuisce gli spazi tra i contenuti */

        align-items: center;

        width: 100%; /* Occupa tutta la larghezza disponibile */

        gap: 2vw; /* Spaziatura tra gli elementi */

    }



    /* Logo e Nome ditta */

    .logo {

        display: flex;

        align-items: center;

        justify-content: flex-start; /* Allinea a sinistra */

        width: 50%; /* 50% per il logo e nome */

    }



    .logo img {

        width: 14vw; /* Aumenta la larghezza del logo */

        height: auto;

    }



    .logo-text {

        text-align: left; /* Allinea il testo a sinistra */

        margin-left: 1vw; /* Aggiungi margine a sinistra */

    }



    .nome-ditta {

        font-size: 8vw; /* Aumenta la dimensione del nome per mobile */

        margin: 0;

    }



    .slogan {

        font-size: 2.5vw; /* Aumenta la dimensione dello slogan */

        margin-top: 1vw;

    }



    /* Bandiera e testo "Made in Italy" */

    .made-in-italy {

        font-size: 2.2vw; /* Aumenta la dimensione del testo */

        margin-top: 1vw; /* Aggiunge spazio sopra */

        text-align: left;; /* Allinea a destra */

        transform: translateX(-2vw); /* Sposta leggermente a sinistra */



    }



    .bandiera-italiana {

        width: 8vw; /* Aumenta la larghezza della bandiera */

        height: auto;

        margin-left: 1vw; /* Spazio a sinistra della bandiera */

    }



    /* Home Decor */

    .home-decor {

        font-size: 1.5vw; /* Ridimensiona "Home Decor" */

        margin-bottom: 1vw; /* Aggiunge margine sotto */

    }



    /* Barra di ricerca */

    .search-container {

        width: 100%; /* Barra di ricerca occupa tutta la larghezza */

        display: flex;

        justify-content: space-between; /* Spaziatura tra la barra di ricerca e il selettore lingua */

        align-items: center;

        margin-top: 2vw; /* Spazio sopra la barra di ricerca */

    }



    .search-container input {

        font-size: 4vw; /* Aumenta la dimensione del testo nella barra di ricerca */

        padding: 2vw; /* Aumenta il padding */

        width: 85%; /* La barra occupa la maggior parte dello spazio disponibile */

    }



    .lingua {

        font-size: 4vw; /* Aumenta la dimensione del testo */

        padding: 2vw;

        width: 12%; /* Riduce la larghezza del selettore lingua */

        text-align: center; /* Allinea il testo */

    }

}









/* Formattazione NAV */

nav {

    display: flex; /* Imposta il contenitore come flexbox */

    justify-content: center; /* Centra i link orizzontalmente */

    gap: 3vw; /* Spazio tra i link */

    background-color: #f1f1f1; /* Colore di sfondo (opzionale) */

    padding: 1vw; /* Aggiunge un po' di spazio interno (opzionale) */

    align-items: center; /* Allinea gli elementi verticalmente al centro */

}



.dropdown {

    position: relative; /* Posizione relativa per il contenitore del dropdown */

    display: inline-block; /* Visualizza come inline-block */

}



.dropbtn {

    background-color: inherit; /* Colore di sfondo trasparente */

    color: #6f6f6f; /* Colore iniziale del testo */

    padding: 10px 20px; /* Padding */

    font-size: 2vw; /* Dimensione del font */

    border: none; /* Nessun bordo */

    cursor: pointer; /* Cambia il cursore */

    text-decoration: none; /* Nessuna decorazione */

    white-space: nowrap; /* Evita la rottura del testo */

    transition: color 0.3s, background-color 0.3s; /* Transizioni morbide */

    outline: none; /* Rimuove il bordo di focus */

    font-family: 'Roboto', sans-serif; /* Usa il font Roboto per il testo */

    font-weight: 700; /* Imposta il font in grassetto */

  }



.dropbtn:hover {

    color: red; /* Il testo diventa rosso al passaggio del mouse */

    background-color: inherit; /* Mantiene il colore di sfondo trasparente */

}



/* Stile per il contenuto del dropdown */

/* Stile per il contenuto del dropdown */

.dropdown-content {

    display: none; /* Nascondi la lista di default */

    position: absolute; /* Posizionamento assoluto */

    background-color: #f9f9f9; /* Colore di sfondo */

    min-width: 600px; /* Ridotta la larghezza minima */

    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); /* Ombra */

    z-index: 1; /* Sovrapposizione sopra altri elementi */

    display: flex; /* Layout flex per il posizionamento orizzontale */

    justify-content: flex-start; /* Riduce lo spazio tra colonne */

    gap: 10px; /* Ridotto lo spazio tra colonne */

    padding: 10px; /* Ridotto il padding interno */

}



/* Colonne del menu */

.column {

    flex: 1; /* Le colonne occupano lo stesso spazio */

    padding: 5px; /* Ridotto il padding interno */

    text-align: left; /* Allinea il testo a sinistra */

    font-size: 16px; /* Più grande del category-button */

}



/* Testo delle categorie */

.category-button {

    background: none; /* Nessuno sfondo */

    border: none; /* Nessun bordo */

    color: black; /* Colore del testo nero */

    font-weight: bold; /* Testo in grassetto */

    font-size: 17px; /* Dimensione del testo */

    text-align: left; /* Allineamento a sinistra */

    cursor: pointer; /* Cambia il cursore al passaggio del mouse */

    padding: 5px 8px; /* Aggiunge spazio intorno al testo */

    text-decoration: none; /* Rimuove la sottolineatura (se presente) */

    outline: none; /* Rimuove l'evidenziazione blu */

    display: block; /* Assicura che occupi tutta la larghezza della colonna */

    margin-bottom: 15px; /* Aumenta lo spazio sotto */

}



.category-button:hover {

    color: red; /* Cambia il colore del testo in rosso al passaggio del mouse */

    text-decoration: none; /* Assicura che non venga aggiunta la sottolineatura al passaggio del mouse */

}





/* Link del menu */

.dropdown-content a {

    color: black; /* Colore del testo */

    padding: 5px 8px; /* Ridotto il padding tra i link */

    text-decoration: none; /* Nessuna decorazione */

    display: block; /* Ogni link come blocco */

    font-family: "Times New Roman", Times, serif;

    font-size: 1.2rem; /* Ridotta la dimensione del testo */

    white-space: nowrap; /* Evita la rottura del testo */

    font-weight: normal; /* Rimuove il grassetto */

}



/* Hover sui link */

.dropdown-content a:hover {

    background-color: #f1f1f1; /* Sfondo al passaggio del mouse */

}









/* carrello */

.cart-icon {

  position: relative;

  display: inline-block;

  font-size: 24px; /* Dimensione dell'icona del carrello */

}



#cart-counter {

    position: absolute;

    top: -5px;

    right: -5px;

    background-color: red;

    color: white;

    font-size: 12px;

    width: 18px;

    height: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    font-weight: bold;

}





/* Modale - Sfondo scuro */

/* Modale - Sfondo scuro */

.cart-modal {

  display: none;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.5);

  justify-content: center;

  align-items: center;

  opacity: 0; /* Inizialmente trasparente */

  transition: opacity 0.5s ease-in-out; /* Animazione dissolvenza */

  z-index: 9999; /* Assicura che il modale sia sopra tutti gli altri elementi */

}



/* Mostra il modale con fade-in */

.cart-modal.show {

  display: flex;

  opacity: 1; /* Opacità piena */

}





/* Contenitore del Modale */

.cart-modal-content {

  background: white;

  width: 60%; /* Finestra più grande */

  max-width: 500px; /* Aumentata la dimensione */

  padding: 25px;

  border-radius: 10px;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

  text-align: center;

  position: relative;

}



/* Header del Modale */

.cart-modal-header {

  font-size: 22px; /* Testo più grande */

  font-weight: bold;

  margin-bottom: 15px;

}



/* Corpo del Modale */

.cart-modal-body {

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: center;

}



/* Immagine del prodotto */

#cartModalImage {

  width: 120px;

  height: 120px;

  border-radius: 5px;

  margin-right: 15px;

}



/* Testo prodotto */

.cart-modal-info {

  font-size: 20px; /* Testo più grande */

  font-weight: bold;

}



/* Footer - Bottoni */

.cart-modal-footer {

  display: flex;

  justify-content: space-between;

  margin-top: 15px;

}



/* Stile Pulsanti */

.cart-modal-footer button {

  padding: 8px 15px; /* Un po' più grandi per facilità d'uso */

  font-size: 16px;

  border: none;

  border-radius: 5px;

  cursor: pointer;

  transition: background 0.3s;

  background: #28a745; /* Entrambi verdi */

  color: white;

}



.cart-modal-footer button:hover {

  background: #218838;

}



/* Pulsante di chiusura */

.close-modal {

  position: absolute;

  top: 10px;

  right: 15px;

  font-size: 24px;

  cursor: pointer;

}









@media screen and (max-width: 600px) {

  .cart-modal-content {

    width: 85%; /* Più grande ma ancora adattato */

    max-width: 350px; /* Leggermente ingrandito */

    padding: 20px;

  }



  .cart-modal-header {

    font-size: 20px;

  }



  .cart-modal-body {

    flex-direction: column;

    align-items: center;

  }



  #cartModalImage {

    width: 100px;

    height: 100px;

    margin-bottom: 10px;

  }



  .cart-modal-info {

    font-size: 18px;

  }



  .cart-modal-footer {

    flex-direction: column;

  }



  .cart-modal-footer button {

    width: 100%;

    padding: 10px;

    margin-top: 5px;

  }



  .close-modal {

    font-size: 22px;

    right: 10px;

    top: 5px;

  }

}













nav a {

    text-decoration: none;

    color: #6f6f6f;

    font-size: 2vw;

    font-family: 'Roboto', sans-serif; /* Usa il font Roboto per il testo */

    font-weight: 700;

    transition: color 0.3s; /* Aggiunge una transizione morbida quando cambia il colore */

    white-space: nowrap;

}



/* Cambia colore quando il link è selezionato, cliccato o attivo */

nav a:focus,

nav a:active {

    color: red;

}



/* Cambia colore quando l'utente passa il mouse sopra il link */

nav a:hover {

    color: red;

}

/* Sezione Prodotti */

section {

  padding: 2vw;

}

h2 {

  font-size: 2vw;

}

h3 {

  font-size: 1.8vw;

}

p {

  font-size: 1.2vw;

}





@media (max-width: 768px) {

    /* MENU A TENDINA */

    .dropdown-content {

        display: none; /* Nasconde il menu di default */

        flex-direction: column; /* Menu impilato verticalmente */

        min-width: 100%; /* Larghezza adattiva */

        position: absolute;

        background: white;

        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);

        z-index: 10;

    }



    .dropdown-content a {

        padding: 10px;

        text-align: left;

        display: block;

    }



    /* NAVBAR: allineamento e dimensioni */

    nav {

        display: flex;

        justify-content: space-between; /* Allinea i pulsanti sullo stesso rigo */

        align-items: left;

        gap: 2vw; /* Mantiene lo spazio tra i tasti */

        flex-wrap: nowrap; /* Evita che vadano a capo */

    }



    nav a, .dropbtn {

        font-size: 3vw; /* Dimensione uniforme per i pulsanti */

        padding: 5px; /* Adatta lo spazio interno */

    }



    /* BARRA DI RICERCA */

    .search-container {

        width: 80vw; /* Occupa più spazio */

    }



    /* TESTI */

    .consegna-gratuita, .nome-ditta, h2, h3 {

        font-size: 3vw;

    }



    p {

        font-size: 2vw;

    }

}





/* Stili del carosello */

.carousel {

  position: relative;

  width: 80%; /* Mantiene il carosello ad una larghezza moderata, non si espande per tutta la pagina */

  margin: auto; /* Centra il carosello orizzontalmente */

  overflow: hidden; /* Nasconde qualsiasi parte che fuoriesce */

  height: auto; /* Altezza automatica in base alle immagini */

}



.slides {

  display: none; /* Nasconde tutte le slide inizialmente */

}



.carousel img {

  width: 100%; /* Ridimensiona l'immagine per adattarsi alla larghezza del carosello */

  max-height: 400px; /* Limita l'altezza massima delle immagini */

  object-fit: contain; /* Mantiene le proporzioni senza tagliare */

}



/* Effetto dissolvenza per le immagini */

.fade {

  animation: fadeEffect 1.5s; /* Effetto dissolvenza su 1.5 secondi */

}



@keyframes fadeEffect {

  from {opacity: .4}

  to {opacity: 1}

}



/* Stili per i pallini sotto */

.dots-container {

  text-align: center;

  margin-top: 10px;

}



.dot {

  height: 15px;

  width: 15px;

  margin: 0 5px;

  background-color: #bbb;

  border-radius: 50%;

  display: inline-block;

  transition: background-color 0.6s ease;

}



.active, .dot:hover {

  background-color: #717171; /* Colore per il pallino attivo */

}

/* Contenitore per il carosello e il blocco testo */

.carousel-container {

  display: flex; /* Disposizione orizzontale */

  justify-content: flex-start; /* Posiziona il blocco testo accanto al carosello */

  align-items: stretch; /* Allinea verticalmente il blocco con il carosello */

  max-width: 100%; /* Imposta la larghezza massima del contenitore */

  margin: auto; /* Centra il contenitore nella pagina */

  gap: 1vw; /* Spazio ridotto tra il carosello e il blocco di testo */

}



/* Blocca il testo accanto al carosello */

.carousel-text-block {

  background-color: #f1f1f1; /* Colore di sfondo simile al carosello */

  padding: 2vw; /* Spazio interno */

  width: 25%; /* Imposta la larghezza del blocco di testo */

  display: flex; /* Usa flexbox per il layout del contenuto */

  flex-direction: column; /* Imposta i contenuti in verticale */

  justify-content: center; /* Centra verticalmente il contenuto */

  text-align: center; /* Testo centrato */

  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Leggera ombra */

  height: auto; /* L'altezza si adatta all'immagine */

}

.img-offerta {

    width: 300px; /* Larghezza della piccola foto */

    height: auto; /* Altezza automatica per mantenere le proporzioni */

    display: block; /* Visualizza come blocco per occupare una nuova riga */

    margin: 0 auto 10px; /* Centra l'immagine e aggiunge margine inferiore */

}



/* Stile per il pulsante Acquista */

.acquista-button {

  background-color: #2980b9; /* Colore del pulsante */

  color: white; /* Colore del testo */

  border: none; /* Rimuovi i bordi */

  padding: 1vw 2vw; /* Padding interno */

  font-size: 1.2vw; /* Dimensione del testo */

  border-radius: 5px; /* Angoli arrotondati */

  cursor: pointer; /* Mostra il cursore pointer */

  transition: background-color 0.3s ease; /* Transizione per il background */

}



.acquista-button:hover {

  background-color: #1f6691; /* Colore hover */

}



/* Mantieni le immagini con dimensioni corrette */

.carousel {

  width: 70%; /* Imposta il carosello per occupare il 70% dello spazio */

  position: relative; /* Necessario per il posizionamento assoluto dei puntini */

}



.carousel img {

  width: 100%; /* L'immagine occupa tutta la larghezza del carosello */

  max-height: 500px; /* Altezza massima delle immagini */

  object-fit: contain; /* Mantiene le proporzioni delle immagini */

}



/* Stili per i pallini sotto */

.dots-container {

  position: absolute; /* Posiziona i pallini sopra le immagini */

  bottom: 20px; /* Posiziona i pallini in basso all'interno dell'immagine */

  width: 100%; /* I pallini si centrano rispetto all'immagine */

  text-align: center; /* Centrato orizzontalmente */

}



.dot {

  height: 15px;

  width: 15px;

  margin: 0 5px;

  background-color: #bbb;

  border-radius: 50%;

  display: inline-block;

  transition: background-color 0.6s ease;

}



.active, .dot:hover {

  background-color: #717171; /* Colore per il pallino attivo */

}



/* Effetto dissolvenza per le immagini */

.fade {

  animation: fadeEffect 1.5s; /* Effetto dissolvenza su 1.5 secondi */

}



@keyframes fadeEffect {

  from {opacity: .4}

  to {opacity: 1}

}



/* Media query per schermi piccoli */

@media (max-width: 768px) {

  .carousel-container {

    flex-direction: column; /* Impila il carosello e il blocco di testo verticalmente */

  }



  .carousel {

    width: 100%; /* Il carosello occupa tutta la larghezza */

  }



  .carousel-text-block {

    width: 100%; /* Il blocco di testo occupa tutta la larghezza su schermi piccoli */

    height: auto; /* Altezza automatica su schermi piccoli */

  }

}













.story {

    background-color: #fff;

    padding: 20px;

    margin-bottom: 30px;

    border-radius: 8px;

    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);

}



.story h2 {

    font-size: 1.8rem;

    margin-bottom: 10px;

}



.story p {

    font-size: 1.1rem;

    line-height: 1.6;

    margin-bottom: 15px;

}



.contact-info {

    background-color: #fff;

    padding: 20px;

    margin-bottom: 30px;

    border-radius: 8px;

    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);

}



.contact-info h2 {

    font-size: 1.8rem;

    margin-bottom: 15px;

}



.contact-info ul {

    list-style: none;

    font-size: 1.1rem;

}



.contact-info ul li {

    margin-bottom: 10px;

}



.contact-info a {

    color: #007bff;

    text-decoration: none;

}



.contact-info a:hover {

    text-decoration: underline;

}



.social-media {

    text-align: center;

    margin-bottom: 30px;

}



.social-media h2 {

    font-size: 1.8rem;

    margin-bottom: 20px;

}



.social-icon {

    font-size: 1.5rem;

    margin: 0 10px;

    color: #333;

    text-decoration: none;

    padding: 10px 20px;

    border: 2px solid #333;

    border-radius: 5px;

    display: inline-block;

    transition: background-color 0.3s, color 0.3s;

}



.social-icon i {

    margin-right: 8px;

}



.social-icon:hover {

    background-color: #333;

    color: #fff;

}

.contact-info {

    margin-top: 40px; /* Aumenta il margine superiore per separare dai contenuti precedenti */

    background-color: #fff;

    padding: 20px;

    margin-bottom: 30px;

    border-radius: 8px;

    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);

}



.contact-info h2 {

    font-size: 1.8rem;

    margin-bottom: 15px;

}



.contact-info ul {

    list-style: none;

    font-size: 1.1rem;

    padding-left: 0;

}



.contact-info ul li {

    margin-bottom: 30px; /* Aumenta lo spazio tra le righe dei contatti */

    display: flex; /* Usa flexbox per allineare icona e testo */

    align-items: center; /* Centra verticalmente l'icona e il testo */

}



.contact-info ul li i {

    font-size: 1.5rem; /* Dimensione delle icone */

    margin-right: 15px; /* Distanza tra l'icona e il testo */

    color: #2980b9; /* Colore delle icone */

}



.contact-info a {

    color: #007bff;

    text-decoration: none;

}



.contact-info a:hover {

    text-decoration: underline;

}



/* Personalizzazione per icone (Font Awesome o simili) */

.contact-info .icon {

    font-size: 1.5rem; /* Dimensione delle icone */

    margin-right: 10px; /* Distanza tra icona e testo */

}



/* Adatta per schermi più piccoli */

@media (max-width: 768px) {

    .contact-info ul li {

        font-size: 1rem; /* Riduce la dimensione del testo sui dispositivi mobili */

    }



    .contact-info ul li i {

        font-size: 1.2rem; /* Riduce la dimensione delle icone sui dispositivi mobili */

    }

}







.form-group {

    margin-bottom: 15px; /* Margine inferiore per gli spazi tra i campi */

}



label {

    display: block; /* Ogni etichetta su una nuova riga */

    margin-bottom: 5px; /* Spazio sotto l'etichetta */

    font-weight: bold; /* Grassetto per le etichette */

    margin-right: 10px; /* Aggiunge spazio a destra dell'etichetta (puoi regolare questo valore) */

}



input[type="text"], input[type="email"], textarea {

    width: 80%; /* Aumenta la larghezza al 80% della pagina */

    padding: 10px; /* Padding interno */

    border: 1px solid #ccc; /* Bordo grigio chiaro */

    border-radius: 4px; /* Bordo arrotondato */

    box-sizing: border-box; /* Include padding e bordo nella larghezza totale */

}







button {

    background-color: red; /* Colore di sfondo rosso per il pulsante */

    color: white; /* Testo bianco */

    border: none; /* Nessun bordo */

    padding: 10px 15px; /* Padding interno */

    border-radius: 4px; /* Bordo arrotondato */

    cursor: pointer; /* Cambia il cursore al passaggio */

    font-size: 1rem; /* Dimensione del font */

}



button:hover {

    background-color: darkred; /* Colore scuro al passaggio del mouse */

}

.contact-wrapper {

    display: flex; /* Usa flexbox per affiancare il modulo e l'immagine */

    margin-top: 20px; /* Margine superiore per separare dalla sezione precedente */

}



form {

    flex: 1; /* Permette al modulo di occupare la maggior parte dello spazio */

    margin-right: 20px; /* Spazio tra il modulo e l'immagine */

}



.contact-image {

    flex: 1; /* Permette all'immagine di occupare lo spazio rimanente */

}



.contact-image img {

    width: 100%; /* Larghezza del 100% per adattarsi al contenitore */

    height: auto; /* Mantiene le proporzioni dell'immagine */

    border-radius: 4px; /* Bordo arrotondato per l'immagine */

}



/* Stili per la barra di navigazione */

nav {

  display: flex;

  justify-content: space-between;

  background-color: #f2f2f2;

  padding: 10px;

  font-family: 'Roboto', sans-serif; /* Applica il font Roboto */

  font-size: 16px; /* Dimensione del font */

  font-weight: 400; /* Peso normale (puoi usare 700 per il grassetto) */

  color: #333; /* Colore del testo */

}







.factory-section {

    flex: 1; /* Occupare lo spazio rimanente */

    text-align: center; /* Centrare il contenuto, se necessario */

    position: relative; /* Imposta la posizione relativa */

    top: -200px; /* Sposta il video verso l'alto (puoi modificare il valore per regolare la posizione) */

}



.factory-section video {

    max-width: 100%; /* Il video si adatta alla larghezza del contenitore */

    height: auto; /* Mantieni le proporzioni del video */

    border-radius: 10px; /* Aggiunge angoli arrotondati al video */

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Aggiungi un'ombra per dare profondità */

}



.video-title {

    font-size: 2rem; /* Dimensione del font */

    font-weight: bold; /* Grassetto */

    color: #333; /* Colore del testo */

    margin-bottom: 20px; /* Distanza dal video */

    text-transform: uppercase; /* Rende il testo tutto maiuscolo */

    letter-spacing: 2px; /* Spaziatura tra le lettere */

    top: -80px;

}



/* Flessibilità per schermi più piccoli (dispositivi mobili) */

@media (max-width: 768px) {

    .factory-section {

        top: 0; /* Annulla l'effetto top per non distorcere la posizione */

        margin-bottom: 20px; /* Aggiungi un margine inferiore per distanziare meglio */

    }



    .video-title {

        font-size: 1.5rem; /* Riduce la dimensione del titolo sui dispositivi mobili */

        margin-bottom: 10px; /* Riduce il margine sotto il titolo */

    }



    .factory-section video {

        max-width: 90%; /* Riduce la larghezza del video sui dispositivi mobili */

        margin: 0 auto; /* Centra il video */

    }



    .contact-wrapper {

        flex-direction: column; /* Disporre in verticale su schermi più piccoli */

        margin-top: 20px; /* Aggiungi margine tra video e il modulo di contatto */

    }



    .contact-info {

        margin-top: 10px; /* Distanza tra la casella dei messaggi e il video */

    }

}



/* Per schermi più piccoli di 480px */

@media (max-width: 480px) {

    .video-title {

        font-size: 1.2rem; /* Ancora più piccolo su schermi molto piccoli */

        letter-spacing: 1px; /* Riduce la spaziatura tra le lettere */

    }



    .factory-section video {

        max-width: 100%; /* Utilizza tutta la larghezza disponibile */

    }



    .contact-wrapper {

        margin-top: 20px; /* Margine tra il video e la sezione del modulo */

    }

}











/*pie di pagina*/



body {

            margin: 0;

            font-family: Arial, sans-serif;

        }



        footer {

            background-color: #f0f0f0;

            padding: 20px;

            border-top: 1px solid #ccc;

        }



        .footer-container {

            display: flex;

            justify-content: space-between;

            align-items: center;

            max-width: 1200px;

            margin: 0 auto;

        }



        .footer-box {

            flex: 1;

            padding: 10px;

            text-align: center;

        }



        .footer-box:not(:last-child) {

            border-right: 1px solid #ccc;

        }



        .footer-box h3 {

            margin: 0;

            font-size: 1.1rem;

            color: #333;

            display: flex;

            align-items: center;

            justify-content: center;

        }



        .footer-box h3 img {

            margin-right: 10px;

            width: 24px;

            height: 24px;

        }



        .footer-box p {

            margin: 5px 0 0;

            font-size: 0.9rem;

            color: #555;

        }



        .footer-lower {

            background-color: #e0e0e0;

            padding: 20px;

            border-top: 1px solid #bbb;

        }



        .footer-lower-container {

            display: flex;

            justify-content: space-between;

            max-width: 1200px;

            margin: 0 auto;

        }



        .footer-left, .footer-right {

            flex: 1;

            padding: 10px;

        }



        .footer-left {

            display: flex;

            flex-direction: column;

            align-items: flex-start;

        }



        .footer-left p {

            margin: 0 0 10px;

            font-size: 1rem;

            color: #333;

        }



        .footer-left p span {

            font-weight: bold;

            color: #007BFF;

            cursor: pointer;

        }



        .footer-left p span:hover {

            text-decoration: underline;

        }



        .footer-left .social-icons {

    display: flex;

    gap: 20px; /* Distanza tra le icone */

    margin-top: 20px; /* Spostate le icone ancora più in basso */

}



        .footer-left .social-icons a {

            text-decoration: none;

        }



        .footer-left .social-icons img {

            width: 32px;

            height: 32px;

        }



        .footer-right {

            display: flex;

            justify-content: space-between;

        }



        .footer-right ul {

            list-style: none;

            padding: 0;

        }



        .footer-right ul li {

            margin-bottom: 10px;

            font-size: 1rem;

            font-weight: bold;

            color: #333;

        }



        .footer-right ul li + li {

            margin-top: 10px;

        }





        .footer-button {

            display: inline-block;

            padding: 10px 15px;

            font-family: 'Roboto', sans-serif;

            font-size: 16px;

            font-weight: bold;

            color: white;

            background-color: #333;

            text-decoration: none;

            border-radius: 5px;

            transition: background-color 0.3s, color 0.3s;

        }



        .footer-button:hover {

            background-color: #ff4500;

            color: white;

        }





/*media queri per cell*/

/* Media Query per Smartphone (max-width: 600px) */

@media (max-width: 600px) {

    .footer-container, .footer-lower-container {

        flex-direction: column; /* Disporre le sezioni in colonna */

        align-items: center; /* Centrare il contenuto */

        text-align: center;

    }



    .footer-box {

        border-right: none; /* Rimuovi il bordo di separazione */

        margin-bottom: 10px; /* Spazio tra i box */

    }



    .footer-left {

        align-items: center; /* Centrare i contenuti */

    }



    .footer-left p {

        text-align: center;

    }



    .footer-left .social-icons {

        justify-content: center; /* Centrare le icone */

        gap: 15px; /* Ridurre la distanza tra le icone */

    }



    .footer-right {

        flex-direction: column; /* Disporre i contenuti in colonna */

        align-items: center;

        gap: 10px; /* Spazio tra le sezioni */

    }



    .footer-right ul {

        text-align: center;

    }

}



/* Media Query per Tablet (min-width: 601px e max-width: 1024px) */

@media (min-width: 601px) and (max-width: 1024px) {

    .footer-container, .footer-lower-container {

        flex-wrap: wrap; /* Permetti ai contenuti di andare a capo */

        gap: 20px; /* Spazio tra le sezioni */

    }



    .footer-box {

        flex: 1 1 50%; /* Due colonne su tablet */

        margin-bottom: 10px;

    }



    .footer-left {

        align-items: flex-start; /* Allinea a sinistra */

        text-align: left;

    }



    .footer-left p {

        text-align: left;

    }



    .footer-left .social-icons {

        justify-content: flex-start; /* Allinea a sinistra */

        gap: 20px; /* Mantieni lo spazio tra le icone */

    }



    .footer-right {

        justify-content: space-evenly; /* Distribuisci uniformemente */

    }



    .footer-right ul {

        text-align: left;

    }

}