body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

* {
  box-sizing: border-box;
  outline: none;
}

section {
  height: 100vh;
}


img, h1, h2, p {
  max-width: 100%;
  height: auto;
}

header {
  font-family: 'Cookie';
  background-color: #fef2ac;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  height: auto;
}

nav {
  text-align: center;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

nav ul li {
  display: inline-block;
}
nav ul li a {
  transition: color 0.3s ease, background-color 0.3s ease; 
}
nav ul li a {
  display: block;
  color: black;
  text-align: center;
  padding: 17px 20px;
  text-decoration: none;
  font-size: 2em;
}

nav ul li a:hover {
    color: #3a2715;
    background-color: #FAE588;
    border-radius: 1em; /* Cambiato da pixel a em */
}

nav ul li a.current {
    font-weight: bold;
}

.Home1 {
    position: relative;
    text-align: center; /* Per centrare il contenuto orizzontalmente */
    align-content: center;
    align-items: center;
    background-image: url("3.jpg");
    background-repeat: no-repeat; /* Evita la ripetizione dell'immagine di sfondo */
    background-size: cover;
    height: 95vh;
}
.logo {
    width: 40%; /* Larghezza del logo in percentuale rispetto alla larghezza della sezione */
    max-width: 100%; /* Larghezza massima del logo */
    height: auto; /* Altezza automaticamente proporzionale alla larghezza */
    display: block;
    margin: 0 auto; /* Per centrare il logo */
}

.Home1 img {
margin-top: 3%;
}

.Home1-content h1 {
    font-size: 2.5em; /* Dimensione del titolo */
    color: white; /* Colore del testo */
    margin-top: -2.5%;
    font-family: Lora;
    text-shadow: 
        -1px -1px 0 #000,  
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000; /* Creazione del contorno del testo */
}

.Home2 {
  background-size: cover;
  background-position: center center;
  background-color: #FDF8E1;
  text-align: center;
  padding: 5%;
  margin-top: -2%;
  height: 40vh;
}

.Home2-content h2 {
  font-family: 'Lora', serif;
  font-size: 2.4vw; /* Impostato in vw (viewport width) */
  font-style: italic;
}

.Home2-content h3 {
  font-family: 'Cookie', serif;
  font-size: 1.7vw; /* Impostato in vw (viewport width) */
  margin-top: -2%;
}

.typingEffect {
  text-align: center;
  transition: opacity ease-in-out 1s;
}

.secondaryText {
  opacity: 0;
  transition: opacity 1.5s;
}

.Home3 {
  position: relative;
  overflow: hidden;
  height: 90%;
}
.slider {
  display: flex;
  transition: transform 0.8s ease;
  margin: 0 auto;
  height: 60hv;
}

.slide {
  flex: 0 0 100%;
}

.slide img {
  width: 100%;
  height: 40%;
  height: auto;
  transition: transform 0.8s ease;
}
.prev,
.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2vw; /* Impostato in vw (viewport width) */
  cursor: pointer;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 2%;
  border-radius: 0.8em; /* Cambiato da pixel a em */
}

.prev {
  left: 2%;
}

.next {
  right: 2%;
}

.Home4 {
  background-color: #FDF8E1;
  height: auto;
}

.Home4-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 2.5% 0;
}

.column1,
.column2,
.column3 {
  width: calc(33.33% - 2.5%);
  margin: 1%;
  padding: 2%;
  background-color: #fdfcf8;
  text-align: center;
  border-radius: 2em; /* Cambiato da pixel a em */
  box-shadow: 0 0 2em rgba(0, 0, 0, 0.1); /* Cambiato da pixel a em */
}

.Home4-content h2 {
  font-family: 'Lora', sans-serif;
  font-size: 2.2vw; /* Impostato in vw (viewport width) */
}

.Home4-content p {
  font-family: 'Lora', sans-serif;
  font-size: 1.7vw; /* Impostato in vw (viewport width) */
}

.Home5 {
  background-image: url('texture3 (2).jpg');
  background-size: cover;
  background-position: center;
  height: 50vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Home5-content {
  text-align: center;
}

.Home5-content h3 {
  color: #f6f6f6;
  font-family: 'Lora';
  font-size: 2.2vw; /* Impostato in vw (viewport width) */
}

.Home6 {
  background-color: #FDF8E1;
  padding: 3%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Home6-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-align: center;
}

.Home6-content h2 {
  font-family: 'Lora';
  font-size: 2.3vw; /* Impostato in vw (viewport width) */
}

.Home6-content h3 {
  font-family: 'Lora';
  font-size: 2vw; /* Impostato in vw (viewport width) */
}

.Home6-content p {
  font-family: 'Lora';
  font-size: 2vw; /* Impostato in vw (viewport width) */
  line-height: 1.7;
}

.left-content {
  width: calc(40% - 2%);
  margin-right: 1.25%;
  background-color: #fdfcf8;
  text-align: center;
  border-radius: 2em; /* Cambiato da pixel a em */
  box-shadow: 0 0 2em rgba(0, 0, 0, 0.1); /* Cambiato da pixel a em */
  flex: 1;
  padding-right: 1.25%;
}

.right-content {
  flex: 1;
  margin-left: 1.25%;
}



/* Stile del contenitore delle colonne */
.column-container {
    justify-content: space-between; /* Distribuisce uniformemente lo spazio tra le colonne */
    flex-wrap: wrap; 
    background-color: #fdfcf8;
}

/* Stile delle singole colonne */
.google-column, .tripadvisor-column {
    width: calc(50% - 20px); /* Calcola la larghezza delle colonne in base alla dimensione del contenitore */
    margin: 1%; /* Spazio tra le colonne */
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    font-family: Lora, sans-serif;
    background-color: #fdfcf8;
}

.google-column {
    float: left; /* Posiziona la colonna di Google a sinistra */
}

.tripadvisor-column .review .rating {
    color: green; /* Imposta il colore delle stelle a verde */
}

.tripadvisor-column {
    margin-top: 3%;
    margin-left: auto; /* Posiziona la colonna di TripAdvisor a destra */
}

/* Stili comuni per le recensioni */
.review {
    padding: 1%;
    border-bottom: 1px solid #ccc;
    height: 150px;
    background-color: #fdfcf8;
    position: relative;
}

.review p {
    margin: 0;
    padding: 0;
    overflow-wrap: break-word; /* Gestisce il wrapping del testo lungo */
}

.review .author {
    font-weight: bold;
}

.review .rating {
    color: #f0ad4e;
}

.url {
    display: inline-block;
}

.url a:hover {
    text-decoration: underline;
}

#prevBtn,
#nextBtn
{
    margin: 1%;
    margin-top: 3%;
    padding: 5px 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 3%;
    cursor: pointer;
    float: right;
}
#prevBtn2,
#nextBtn2 {
    margin: 1%;
    margin-top: 3%;
    padding: 5px 10px;
    background-color: green;
    color: #fff;
    border: none;
    border-radius: 3%;
    cursor: pointer;
    float: right;
}

#prevBtn:hover,
#nextBtn:hover {
    background-color: #0056b3;
}

#prevBtn2:hover,
#nextBtn2:hover {
    background-color: #00b372;
}
.recensioni {
    background-color: #FDF8E1;
    height: 90%;
    margin: 0 auto;
    margin-top: 1%;
}
.recensioni h2{
    font-family: Lora;
    text-align: center;
    font-size: 2em;
    margin-top: -1%;
    margin-bottom: 2%;
}
/* Imposta la larghezza massima per le immagini dei loghi */
.column-container img,
 {
  position: center;
  justify-content: center;
  align-items: center;
  align-content: center;
  margin: 0 auto;
}

.footer {
  background-color: #fef2ac;
  padding: 2%;
  display: flex;
  justify-content: center;
  font-family: Lora;
}

.footer-left,
.footer-middle,
.footer-right {
  flex: 1;
}

.footer-left,
.footer-middle,
.footer-right {
  text-align: center;
}

.footer a {
  text-decoration: none;
  color: black;
}
.footer img {
      width: 3%;
      height: auto;
    }

.column1,
.column2,
.column3 {
  opacity: 0;
  transform: translateY(2%);
  transition: opacity 1.5s ease, transform 1.5s ease;
}

.column-appear {
  opacity: 1;
  transform: translateY(0);
}

.right-content iframe 
{
  width: 600px;
  height: 400px;
  border: 0;
}

/************************************* VERSIONE MOBILE *************************/
@media screen and (max-width: 768px) {
  /* Riduci il padding dell'header */
  header {
    padding: 1%;
  }

  /* Riduci la dimensione del testo per le voci di navigazione */
  nav ul li a {
    font-size: 1em;
    padding: 7px 15px;
  }

  /* Riduci le dimensioni dell'immagine nella sezione Home1 */
  .Home1-content img {
    max-width: 100%;
  }
  .Home1 img {
margin-top: 10px;
}
  
    .logo {
       margin-top: 50px;
    width: 100%;
  }

.Home1-content h1 {
    margin: 0 auto;
    font-size: 1.8em;
  }

  /* Rimuovi lo sfondo dell'immagine nella sezione Home2 */
  .Home2 {
    background-image: none;
    max-width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
  }

  /* Riduci le dimensioni del testo per la sezione Home2 */
  .Home2-content h2 {
    font-size: 4.5vw;
  }

  .Home2-content h3 {
    font-size: 4vw;
  }

.Home3 {
    position: relative;
    overflow: hidden;
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider {
    width: 100%; /* Assicura che la slider abbia la larghezza della sezione */
    height: 100%; /* Assicura che la slider abbia l'altezza della sezione */
}

.slide img {
    width: 100%; /* Assicura che l'immagine abbia la larghezza della slide */
    height: 100%; /* Assicura che l'immagine abbia l'altezza della slide */
    object-fit: cover; /* Fa sì che l'immagine copra l'intera area mantenendo le proporzioni */
    object-position: center; /* Centra l'immagine all'interno della slide */
}

.prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3vw;
    padding: 4%;
    margin-left: 5%;
}
.next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3vw;
    padding: 4%;
    margin-right: 5%;
}
.Home4-content {
    display: flex;
    flex-direction: column;
  }
  .column1,
  .column2,
  .column3 {
    width: 80%; /* Imposta la larghezza al 100% per occupare l'intera larghezza della colonna */
    margin: 5%; /* Rimuovi il margine per evitare spazi vuoti */
    margin-bottom: 2%; /* Aggiungi uno spazio tra le colonne */
  }

  /* Riduci le dimensioni del testo e del padding per la sezione Home4 */
  .Home4-content h2 {
    font-size: 6vw;
  }

  .Home4-content p {
    font-size: 5vw;
    padding: 1%;
  }

  /* Riduci le dimensioni del testo per la sezione Home5 */
  .Home5-content h3 {
    font-size: 3vw;
  }

.Home6  { background-color: #FDF8E1;
  padding: 3%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  }
  /* Riduci le dimensioni del testo e del padding per la sezione Home6 */
  .Home6-content h2 {
    font-size: 7vw;
  }

  .Home6-content h3,
  .Home6-content p {
    font-size: 6vw;
    padding: 1%;
  }
  .Home6-content {
    flex-direction: column; /* Imposta la direzione della flessione a verticale */
    align-items: center; /* Centra gli elementi lungo l'asse trasversale */
  }

  .left-content {
    width: 90%; /* Imposta la larghezza al 100% per occupare l'intera larghezza del contenitore */
    margin-right: none;
    }
    .right-content {
    width: 100%; /* Imposta la larghezza al 100% per occupare l'intera larghezza del contenitore */
    margin-left: none;
    margin-right: 2%;
    margin-top: 3%;
    }

     .right-content iframe {
    border: 0;
    width: 190%; /* Imposta la larghezza al 90% del contenitore genitore */
    height: 55vh; /* Imposta l'altezza al 50% dell'altezza dello schermo */
    max-width: 100%; /* Imposta una larghezza massima per l'iframe */
    margin: 0 auto; /* Centra l'iframe orizzontalmente */
     }
    /* Imposta la larghezza del footer al 100% */
    .footer {
      padding: 2%;
      width: 100%;
    }

     .footer p {
     font-size: 0.3em;
    }
     .footer h3 {
      font-size: 0.4em;
    }
    .footer img {
      width: 4%;
      height: auto;
    }
   .google-column {
        width: 100%; /* Imposta la larghezza delle colonne al 100% per schermi piccoli */
        margin: 0 0 20px 0; /* Margine inferiore per separare le colonne */
    }
    .tripadvisor-column {
        width: 100%; /* Imposta la larghezza delle colonne al 100% per schermi piccoli */
        margin: none
    }

    .google-column {
        float: none; /* Rimuove il float */
    }

    .tripadvisor-column {
        margin-left: 0; /* Rimuove il margine sinistro */
        margin-top: 0; /* Rimuove il margine superiore */
    }

    #prevBtn,
    #nextBtn,
    #prevBtn2,
    #nextBtn2 {
        font-size: 0.7em;
        float: none; /* Rimuove il float */
        width: 100%; /* Imposta la larghezza al 100% */
        margin: 1% 0; /* Margine superiore e inferiore */
        text-align: center;
        align-items: center;
        align-content: center;
        display: inline-block;
    }
.review {
    padding: none;
    border-bottom: 1px solid #ccc;
    height: 10%;
    background-color: #fdfcf8;
}
.recensioni {
    height: auto;
    margin: 0 auto;
    margin-bottom: none;
}
.recensioni h2 {
    font-size: 1.5em;
    padding: 2%;
}
.recensioni p {
    font-size: 0.8em;
}
.recensioni img {
    width: 50%;
}
}