/* ====== HERO ====== */
.Thero {
  position: relative;
  display: flex;
  justify-content: flex-start; /* spinge tutto a sinistra */
  align-items: center;         /* centra verticalmente */
  min-height: 80vh;
  overflow: hidden;
  width: 100%;
}

.Thero-img {
    width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 0; /* dietro */
}

.Thero-content {
  position: absolute;
  top: 10;
  left: 20;  
  z-index: 1; /* sopra l'immagine */
  max-width: 500px;
  color: black;
  text-align: center;
  background-color: transparent;
}


.Thero-content h1{color:black;margin-bottom:10px;font-size:2.5rem}.Thero-content p{color:black;margin:0 auto 1rem auto;font-size:1.2rem}
.traslochi-carousel{padding:4rem 2rem;text-align:center}
.carousel{display:flex;overflow-x:auto;gap:1rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.slide{flex:0 0 auto;width:300px;height:500px;border-radius:12px;overflow:hidden;scroll-snap-align:center;box-shadow:0 4px 10px rgba(0,0,0,0.1)}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.description{text-align:center;padding:3rem 2rem}
.description h2{color:#0D3B66;margin-bottom:1rem;font-size:2rem}
.description p{color:#555;margin-bottom:2rem;font-size:1.1rem}
.btn{background:#FFA500;color:#000;padding:.8rem 1.5rem;border-radius:8px;text-decoration:none;font-weight:600;transition:.3s}
.btn:hover{background:#ff8c00}
@media (max-width: 768px) {
.Thero {
  display: flex;
  flex-direction: column; /* impila elementi */
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 60vh;           /* altezza fissa della hero */
  overflow: hidden;       /* taglia eventuali eccessi dell'immagine */
  padding: 0;
  background: none;
}

.Thero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* adatta l'immagine al container */
  display: none;
  z-index: 0;
  position: relative;
}
  .Thero-content {
    position: relative;
    max-width: 90%;
    margin-top: 0;
    padding: 0 1rem 2rem;
    background-color: transparent;
    z-index: 1;
  }
  .Thero-content h1{font-size:2rem;color:#0D3B66;margin-bottom:1rem}
.Thero-content p{font-size:1.1rem;color:#555;margin-bottom:1.5rem}
.description{padding-bottom:0}.btn{background:#FFA500;color:#000}
.traslochi-carousel{justify-content:start;padding-top:0}
.slide{width:100%;height:450px}}