:root {
  --font-heading: "Goldman", system-ui, -apple-system, "Segoe UI", Roboto, Arial,
    sans-serif;
  --font-body: "Libertinus Sans", system-ui, -apple-system, "Segoe UI", Roboto,
    Arial, sans-serif;
}

html,
body {
  font-family: var(--font-body);
}

body {
  margin: 0;
  font-family: "Goldman", sans-serif;
  font-size: small;
  background-color: white;
}
/*Elementi standard*/
.blocco {
  width: 100%;
  box-sizing: border-box;
}

.divisore {
  width: 100%;
  text-align: center;
  padding: 10px;
  font-weight: 300;
  font-size: 1.8em;
  color: #007cba;
}
/*INTESTAZIONE*/
.header {
  text-align: left;
  padding: 20px 5%;
}

.header h1 {
  font-size: 2em;
  letter-spacing: 0.25em;
  font-weight: 300;
  padding-left: 5%;
}

.header h2 {
  letter-spacing: 0.15em;
  font-weight: 300;
}

/*IMMAGINE*/
.blocco2 img {
  width: 100%;
  height: auto;
  display: block;
}

.image-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

.overlay-text {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
  font-size: 1.1em;
  font-family: "Goldman", sans-serif;
  font-weight: 200;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  z-index: 1;
}
/*FRASE*/
.blocco3,
.blocco5 {
  padding: 0px 16.6%;
  text-align: center;
  letter-spacing: 0.08em;
  font-size: 2em;
  font-family: "Goldman", sans-serif;
  font-weight: 200;
}
.social-links {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 30px;
}

.social-links a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #333;
  font-weight: 500;
  gap: 8px; /* spazio tra icona e testo */
  font-size: 0.5em;
  transition: color 0.3s ease;
}

.social-links a:hover {
  color: #007bff;
}

.social-links i {
  font-size: 1em;
}

/* IMMAGINI SLIDESHOW*/
.blocco4-tabs {
  padding: 10px 0;
}

.tab-selector {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  gap: 20px;
}

.tab-selector button {
  padding: 10px 20px;
  font-family: "Goldman", sans-serif;
  font-size: 1em;
  cursor: pointer;
  background-color: transparent;
  border: none;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.tab-selector button.active {
  background-color: #007cba;
  color: white;
}

.tab-content {
  display: none;
  overflow: hidden;
}

.slideshow-container {
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 0 30px;
}

.slide-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
}

.slide {
  display: flex;
  min-width: 100%;
  box-sizing: border-box;
  gap: 20px;
  align-items: center;
  padding: 0 50px;
}

.slide-text {
  flex: 1;
  font-size: 1.5em;
  padding: 20px;
}

.slide img {
  width: 50%;
  max-width: 500px;
  height: auto;
}

.slide video {
  pointer-events: none;
  width: 50%;
  max-width: 500px;
  height: auto;
}

.arrow {
  font-size: 2em;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #007cba;
  padding: 10px;
}

.arrow.left {
  left: 10px;
}

.arrow.right {
  right: 10px;
}

/*FINE SLIDESHOW*/

/*Immagine family e lista*/
.blocco6 {
  margin-top: 50px;
  display: flex;
  gap: 30px;
  align-items: stretch;
}

.col1 {
  flex: 1;
  display: flex;
  align-items: center;
}

.col2 {
  flex: 1;
  position: relative;
  align-items: center;
}

.dettagli {
  list-style: none;
  padding: 0;
  margin: auto;
}

.dettagli li {
  margin-bottom: 20%;
  margin-left: 10%;
}

.voce {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
  color: #222;
  font-size: 2em;
  font-weight: 600;
}

.dettagli p {
  margin: 0;
  font-size: 0.95em;
  color: #555;
}

/* Immagine con box sovrapposto */
.image-container {
  position: relative;
}

.image-container img {
  width: auto;
  height: auto;
  display: block;
}

.overlay-box {
  position: absolute;
  height: 17%;
  width: 65%;
  bottom: -1px;
  left: -1px;
  background-color: white;
  /*display: flex;
  flex-direction: row;*/
  gap: 10px;
  padding: 25px;
}

.box-item {
  padding: 25px;
  font-size: 1.2em;
  font-weight: 300;
  color: #333;
  flex: 1;
}

/*COMMENTI*/

.blocco7 {
  padding: 20px 5%;
  display: flex;
  gap: 30px;
  justify-content: space-between;
}

.testimonial {
  flex: 1;
  padding: 20px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100px;
}

.commento {
  font-style: italic;
  font-size: 1.25em;
  color: #333;
}

.cliente {
  text-align: right;
  font-weight: bold;
}
/*FOOTER*/
.blocco8 {
  display: flex;
  gap: 50px;
  justify-content: space-between;
  background-color: #160e0e;
  color: white;
  padding: 40px 12%;
  flex-wrap: wrap;
}

.blocco8 .col {
  flex: 1;
  min-width: 220px;
}

.blocco8 h2 {
  margin-bottom: 20px;
  letter-spacing: 0.15em;
  font-weight: 300;
  font-size: 1.2em;
  color: white;
}

.blocco8 h3 {
  letter-spacing: 0.1em;
  margin-bottom: 20px;
  font-size: 1em;
  font-weight: 200;
  color: #666666;
}

.blocco8 p {
  margin: 6px 0;
  font-size: 0.95em;
  color: white;
}

.blocco8 a {
  color: white;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

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

.blocco8 i {
  font-size: 1.1em;
  font-weight: 200;
  color: white;
}
@media (max-width: 768px) {
  /*stile mobile per lo slideshow*/
  /* Stile mobile migliorato per slideshow */
  html,
  body {
    margin: 0;
    padding: 0;
  }

  .slideshow-container {
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    padding: 0;
    position: relative;
  }

  .slide-track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    display: flex;
    width: 100%;
    height: 100%;
  }

  .slide {
    scroll-snap-align: start;
    flex: 0 0 100vw;
    width: 100vw;
    height: 100vh;
    padding: 0px;
  }

  .slide img,
  .slide video {
    width: 100vw;
    max-height: 85vh;
    object-fit: contain;
    display: block;
    background: black;
  }

  .slide-text {
    width: 100%;
    text-align: center;
    padding: 10px 20px;
    font-size: 1em;
    color: black;
    background: white;
    box-sizing: border-box;
  }

  .blocco6 {
    flex-direction: column;
  }
  .image-container img {
    width: 100%;
    height: auto;
    display: block;
  }

  .info-box {
    flex-direction: column;
    bottom: 10px;
    left: 10px;
    right: 10px;
  }

  .blocco7 {
    flex-direction: column;
  }

  .blocco8 {
    flex-direction: column;
  }

  .blocco8 .col {
    margin-bottom: 20px;
  }

  .blocco4-tabs .slide {
    display: flex;
    flex-direction: column;
  }

  .blocco4-tabs .slide > img,
  .blocco4-tabs .slide > video {
    order: 1;
    width: 100vw; /* già così nel tuo CSS mobile */
    /* opzionale: lascia più spazio al testo sotto */
    /* max-height: 75vh; */ /* scommenta se il testo scende fuori dallo schermo */
  }

  .blocco4-tabs .slide > .slide-text {
    order: 2;
    width: 100%;
    text-align: center;
    padding: 12px 16px; /* leggermente più compatto su mobile */
    background: #fff;
    box-sizing: border-box;
  }
  .arrow {
    font-size: 3em;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #007cba;
    padding: 10px;
  }

  html,
  body {
    overflow-x: hidden;
  }

  /* il wrapper del blocco immagini non deve aggiungere padding laterale
     se dentro usi elementi a tutta larghezza */
  .blocco4-tabs {
    padding-left: 0;
    padding-right: 0;
  }

  /* usa 100% invece di 100vw per evitare di uscire dal wrapper */
  .slideshow-container {
    width: 100%;
  }
  .slide {
    flex: 0 0 100%;
    width: 100%;
  }
  .slide img,
  .slide video {
    width: 100%;
  }
  .blocco3 {
    font-size: 1.7em;
  }

  .tab-selector button {
    margin: 2%;
  }
}