body {
    font-family: Arial, Helvetica, sans-serif;
   }

.custom-header {
    height: 70px;
    background-color: #000000; 
    color: rgb(255, 255, 255); 
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1030; 
    font-family: Arial, sans-serif;
  }


  .number-link {
    text-decoration: none; /* Rimuove la sottolineatura */
    color: inherit; /* Mantiene il colore del testo */
    font-size: 18px; /* Dimensione del font */
    font-weight: bold; /* Imposta il peso del font */
    cursor: pointer; /* Mostra il puntatore per indicare il link */
  }

  .logo img {
    width: 90px;
    height: 60px;
  }

  .center-text {
    font-size: 35px;
    
  }

  .side-numbers {
    display: flex;
    gap: 40px; /* Spazio tra i numeri */
    padding: 0 40px; /* Margine laterale */
    font-size: 18px;
  }

  @media (max-width: 768px) {
    .custom-header {
      height: auto; /* Altezza dinamica */
      flex-wrap: wrap; /* Permette agli elementi di andare su più righe se necessario */
      justify-content: center; /* Centra il contenuto */
    }
  
    .logo {
      margin-right: 20px; /* Spazio tra il logo e i link */
      font-size: 30px; /* Riduce la dimensione del logo */
    }
  
    .side-numbers {
      gap: 10px; /* Riduce lo spazio tra i link */
      font-size: 16px; /* Riduce leggermente la dimensione del testo */
    }
  
    .number-link {
      font-size: 14px; /* Riduce la dimensione dei numeri */
    }
  }
  

 


h1, h2, h3 {
    font-weight: bold;
}

h1 {
    font-size: 60px;
    
}

.placeholder-img {
    width: 100%;
    height: 300px;
    background-color: #ccc;
}

.blockquote {
    font-style: italic;
    margin-top: 20px;
}

  
.primo-blocco {
  min-height: 100vh;
  padding: 100px;
}

.bg-image {
    background-image: url("../img/024b41f2dc0bddf989a79555be9dbe4e.jpg"); 
    background-size: cover; /* L'immagine copre l'intero blocco */
    background-position: center; /* Centra l'immagine */
    
}



@media (max-width: 768px) {
  .primo-blocco {
      padding-left: 15px; /* Riduci il padding su schermi più piccoli */
  }
}

.sottotitolo {
    font-size: 20px;
    color: black;
    margin:10px 0px;
    font-weight: bold;
}

.secondo-blocco {
    text-align: left;
    margin: 0%;
    padding-left: 90px;
    padding-top: 20px;
    min-height: 50vh;
    font-size: 20px;
}

@media (max-width: 768px) {
  .secondo-blocco {
      padding-left: 15px; /* Riduci il padding su schermi più piccoli */
  }
}


.terzo-blocco {
    text-align: left;
    margin: 0%;
    min-height: 50vh;
  
}

.custom-img {
  max-width: 100%; /* L'immagine non può mai essere più larga del suo contenitore */
  height: auto;    /* Mantiene le proporzioni dell'immagine */
  display: block;  /* Rimuove eventuali spazi indesiderati sotto l'immagine */
}

.quarto-blocco {
  display: flex; /* Usa flexbox per un layout dinamico */
  justify-content: center; /* Centra verticalmente */
  align-items: center; /* Centra orizzontalmente */
  margin: 0;
  min-height: 70vh;
  text-align: left;
 
}

.quarto-blocco p, .quarto-blocco h1 {
  word-wrap: break-word; /* Spezza il testo */
  overflow-wrap: break-word;
  max-width: 100%; /* Evita che il contenuto superi la larghezza */
}

@media (max-width: 768px) {
  .quarto-blocco {
      padding: 10px 20px; /* Riduce il padding su schermi più piccoli */
      text-align: left; /* Centra il testo per piccoli dispositivi */
  }


}


.quinto-blocco {
    min-height: 100vh;
    text-align:left ;
    padding-left: 20px;
    padding-right: 20px;
}
.quinto-blocco img {
    max-width: 100%; /* Adatta l'immagine alla colonna */
    height: auto; /* Mantiene le proporzioni */
    margin-bottom: 15px; /* Spazio tra immagine e titolo */
    width: 440px;
    height: 310px;
    object-fit: cover;
    border-radius: 26px;
}

.img-hover {
    position: relative;
    display: inline-block;
  }

  .img-hover img.second {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0; /* Nasconde la seconda immagine di default */
  }
  .img-hover:hover img.second {
    opacity: 1; /* Mostra la seconda immagine al passaggio del mouse */
  }
  .img-hover:hover img.first {
    opacity: 0; /* Nasconde la prima immagine al passaggio del mouse */
  }

.sesto-blocco {
    min-height: 50vh;
    padding-left: 80px;
    padding-top: 50px;
   
}

.sesto-blocco img {
  width: 100%;
  height: 400px;
  max-width: 670px;
  height: auto;
  margin-left: 200px;
  object-fit: cover; /* L'immagine coprirà l'area senza deformarsi */
}

@media (max-width: 768px) {
  .sesto-blocco {
      padding-left: 20px; /* Riduci il padding su schermi più piccoli */
  }

  .sesto-blocco img {
      margin-left: 8px; /* Aggiunge più distanza tra immagine e testo su schermi piccoli */
      padding-right: 30px;
  }
}

.settimo-blocco {
    min-height: 50vh;
   padding-top: 50px;
   padding-left: 80px;
}

.settimo-blocco img {
  width: 100%; /* L'immagine occupa tutta la larghezza del contenitore */
  max-width: 670px; /* L'immagine non si allunga oltre i 677px */
  height: 400px;
  height: auto; /* Mantiene le proporzioni */
  object-fit: cover; /* Se necessario, adatta l'immagine al contenitore senza distorcerla */
}

@media (max-width: 768px) {
  .settimo-blocco {
      padding-left: 28px; /* Riduci il padding su schermi più piccoli */
      padding-right: 23px;
  }
  
  .settimo-blocco img {
      width: 100%; /* L'immagine si adatta alla larghezza del contenitore */
      max-width: 100%; /* Garantisce che l'immagine non sia troppo grande */
      margin-bottom: 20px; /* Aggiungi spazio tra l'immagine e il testo su schermi piccoli */
  }
}

.ottavo-blocco {
    min-height: 70vh;
    padding-top: 80px;
}

@media (max-width: 768px) {
  .ottavo-blocco {
    min-height: 50vh;  
  }
}

.nono-blocco {
  min-height: 100vh;
  text-align: center;
  font-size: 24px;
}

.nono-blocco img {
width: 1360px ;
height: 700px ;
object-fit: cover;
border-radius: 10px;
}

/* Contenitore principale dello swiper */
.swiper-container {
  width: 100%;
  max-width: 1354px;
  height: 700px; /* Altezza fissa per desktop */
  margin: 0 auto;
  overflow: hidden;
  border-radius: 10px;
}

/* Ogni singola slide */
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; /* Occupa tutta la larghezza del contenitore */
  height: 100%; /* Occupa tutta l'altezza del contenitore */
}

/* Stile per le immagini */
.swiper-slide img {
  width: 100%; /* Adatta l'immagine alla larghezza della slide */
  height: 100%; /* Adatta l'immagine all'altezza */
  object-fit: cover; /* Mantiene le proporzioni centrando il contenuto */
  border-radius: 30px; /* Angoli arrotondati */
}

.swiper-button-next, .swiper-button-prev {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10;
  color: rgb(0, 0, 0) !important;
  padding: 10px !important;
  font-size: 24px !important; /* Impostiamo una dimensione fissa per le frecce */
}


/* Media query per dispositivi mobili */
@media (max-width: 768px) {
  .nono-blocco {
    font-size: 18px; /* Riduce la dimensione del testo per schermi piccoli */
    min-height: 70vh;
  }

  .swiper-container {
    height: 30vh; /* Riduce l'altezza dello swiper su dispositivi mobili */
  }

  
}

.decimo-blocco {
    text-align: left;
    margin: 0%;
    padding: 20px;
    padding-top: 60px;
    min-height: 60vh;
}

.undicesimo-blocco {
  padding-left: 20px;
}

.undicesimo-blocco img{
    width: 325px;
    height: 228px;
    border-radius: 26px;
}

.photo-slider {
  position: relative;
  width: 100%;
  overflow: hidden; /* Nasconde le immagini fuori dalla vista */
}

.slider-wrapper {
  display: flex;
  width: max-content;
}

.slider-track {
  display: flex;
  width: auto;
  transition: transform 0.4s ease; /* Scorrimento fluido */
}

.slide {
  flex: 0 0 10%; /* Ogni immagine occupa il 25% della larghezza del contenitore */
  text-align: center;
  box-sizing: border-box;
  padding: 20px;
}

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
}

.slider-btn.prev {
  left: 10px;
}

.slider-btn.next {
  right: 10px;
}

.slider-btn:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.img-hover {
  position: relative;
}

.img-hover img.second {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.img-hover:hover img.second {
  opacity: 1;
}

.img-hover img:first-child {
  transition: opacity 0.3s ease;
}

.img-hover:hover img:first-child {
  opacity: 0;
}


.photo-slider {
  width: 100%;
  max-width: 1500px; /* Adatta questa dimensione in base al design */
  margin: 0 auto; /* Centra la slider */
}

.dodicesimo-blocco {
  background-color: #000000;
  color: white;
  padding-top: 80px;
  min-height: 60vh;

}

.button {
  border-radius: 20px;
  padding: 20px 40px;
  font-size: 16px;
  font-weight: bold;
}

.list {
  color: #ffffff;
  gap: 80px;
  align-items: center;
  text-decoration: none; /* Rimuove la linea sotto il testo */ 
  
}

@media (max-width: 768px) {
  .dodicesimo-blocco ul {
    flex-direction: column; /* Cambia il layout in verticale */
    align-items: flex-start; /* Centra i link */
    gap: 1rem; /* Spaziatura tra i link */
}
}