html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  background-color: #000;
}

  #heros{width: 100%; height:100vh; background-color:#000; position: relative;}
  .video{ object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity:0.7;
    z-index: 1;
  }

  .titles {position: absolute; top:300px; width: 100%; text-align: center; z-index: 10}
  #h1{font-size: 2.4em; color: #fff; transition: opacity 1s; opacity:0; }
  #h2{font-size: 3.4em; color: #fff; transition: opacity 1s; opacity:0; }
  #h3{transition: opacity 1s; opacity:0;}
  #h3 svg{fill: #fff; width: 80px; height:auto;}

.section2{width: 100%;  display: flex;}
.item50{width: 50%}

.visor-title{font-size: 1.6em;}
.visor-container{height: 100dvh;  background: linear-gradient(358deg, rgba(0, 0, 0, 0.9), rgba(0,0,0, 0.5)), url('../imgs/cover2.jpg'); background-position: center center; background-size: cover; background-repeat: no-repeat; font-size: 1.2em; color:#fff;
display:flex; align-items:center; justify-content:center; }

.grid-6-piena {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 100%;
  height: 100%;
  
}

.grid-6-piena a.goprod,
.grid-6-piena a.goprod:link,
.grid-6-piena a.goprod:visited,
.grid-6-piena a.goprod:hover,
.grid-6-piena a.goprod:focus,
.grid-6-piena a.goprod:active {
  display: block;
  text-decoration: none !important;
  color: #fff;
  outline: 0;
}

/* opzionale: anche la label, per scrupolo */
.grid-6-piena .casella-label {
  text-decoration: none !important;
  color: inherit;
}

.casella {
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
 /* aspect-ratio: 1 / 1; */ /* fa sì che siano quadrati, se preferisci */
  
  height: 100%;
}

 .goprod {display: block;              /* il link diventa un blocco */
  text-decoration: none !important;
  text-decoration-line:none !important;
  color: #fff;
  }

.casella-label{display: flex;   align-items: center;  justify-content: center; background-color: rgba(0, 0, 0, 0.8); color: #999;  text-transform: uppercase; width: 100%; height: 100%; font-size: 1.6em;  text-decoration:none !important;
 -webkit-transition: all 0.6s ease-in-out;
      -moz-transition: all 0.6s ease-in-out;
      -o-transition: all 0.6s ease-in-out;
      -ms-transition: all 0.6s ease-in-out;
      transition: all 0.6s ease-in-out;}
.casella-label:hover {background-color: rgba(0, 0, 0, 0.4);  color: #fff; text-decoration:none !important;
 -webkit-transition: all 0.6s ease-in-out;
      -moz-transition: all 0.6s ease-in-out;
      -o-transition: all 0.6s ease-in-out;
      -ms-transition: all 0.6s ease-in-out;
      transition: all 0.6s ease-in-out;}

.we-are{background-color: #000; color: #fff; display: flex; align-items: center; justify-content: center;}
.we-are div{max-width: 70%; font-size: 1.2em}

.hero-blur{
  height: 100dvh;
}


.item50.hero-blur{
  /* usa la variabile come immagine */
  background-image: var(--bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  /* assicurati che si veda (altezza) */
  min-height: 100vh;

  /* effetto blur di default */
  filter: blur(8px);
  opacity: .85;
  transition: filter .4s ease, opacity .4s ease;
}
.item50.hero-blur.is-inview{
  filter: blur(0);
  opacity: 1;
}

.reviews-section{height:100vh; background: linear-gradient(358deg, rgba(0, 0, 0, 1), rgba(0,0,0, 0.4)), url('../imgs/home-bg-footer.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; display: flex; align-items: center; justify-content: center}

.review-card { color:#fff; border-radius:16px; padding:24px; max-width: 600px}
.review-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.review-avatar { width:56px; height:56px; border-radius:50%; object-fit:cover; }
.review-name { font-weight:600; }
.review-stars { line-height:1; }
.review-stars .star { color:#f9b805; font-size:1.1rem; }
.review-text { margin:8px 0 0; }
.text-secondary{color:#fff !important}
.review-text.clamp { display:-webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow:hidden; }
.carousel .carousel-item { padding: 10px; }
.btn-recensione{
  -webkit-transition: all 0.6s ease-in-out;
      -moz-transition: all 0.6s ease-in-out;
      -o-transition: all 0.6s ease-in-out;
      -ms-transition: all 0.6s ease-in-out;
      transition: all 0.6s ease-in-out;
    }
.btn-recensione:hover{
  -webkit-transition: all 0.6s ease-in-out;
      -moz-transition: all 0.6s ease-in-out;
      -o-transition: all 0.6s ease-in-out;
      -ms-transition: all 0.6s ease-in-out;
      transition: all 0.6s ease-in-out;
    }

.carousel-control-prev {
  left: -80px;   /* spostalo più a sinistra */
}
.carousel-control-next {
  right: -80px;  /* spostalo più a destra */
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-image: none; /* tolgo l’SVG nero di default */
  width: 2rem;
  height: 2rem;
  background-size: 100% 100%;
  filter: none;
}

/* Creo frecce bianche via CSS */
.carousel-control-prev-icon::after,
.carousel-control-next-icon::after {
  content: '';
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
}

.carousel-control-prev-icon::after {
  transform: rotate(-135deg);
}

.carousel-control-next-icon::after {
  transform: rotate(45deg);
}

.container-servizi{width: 100%; background-color: #fff; padding-top: 60px; padding-bottom: 60px}
.title-servizi{font-size: 2em}
.title-servizi hr{max-width: 60%; margin-left: auto; margin-right: auto}
.cell-servizi{padding-top: 40px}
.cell-servizi .title{font-size: 1.1em; text-transform: uppercase; font-weight: 600}
.cell-servizi svg{width: 200px; height: 200px; fill: #333; 
  -webkit-transition: all 0.6s ease-in-out;
      -moz-transition: all 0.6s ease-in-out;
      -o-transition: all 0.6s ease-in-out;
      -ms-transition: all 0.6s ease-in-out;
      transition: all 0.6s ease-in-out;}
.cell-servizi .descrip{font-size: 1em; text-align: left; max-width: 280px; margin:0 auto 60px auto}

.cell-servizi a:hover svg{fill:#ed1e27;
-webkit-transition: all 0.6s ease-in-out;
      -moz-transition: all 0.6s ease-in-out;
      -o-transition: all 0.6s ease-in-out;
      -ms-transition: all 0.6s ease-in-out;
      transition: all 0.6s ease-in-out;
    }

@media (max-width: 1200px) {
  
  .we-are{padding-top: 40px; padding-bottom: 40px}
  .we-are div{max-width: 96%; font-size: 1.1em;}
  .casella {min-height: 240px;}
}

@media (max-width: 992px) {
  .section2{flex-direction: column;}
  .item50{min-width:100%}
  .we-are div{max-width: 80%; }
  .review-card { padding:16px; max-width: 500px}
  .review-text { min-height:300px }

  .carousel-control-prev {
  left: -40px;   /* spostalo più a sinistra */
  }
  .carousel-control-next {
    right: -40px;  /* spostalo più a destra */
  }
}

  
  

@media (max-width: 576px) {

  .review-card { padding:8px; max-width: 300px}
  .review-text { min-height:380px }
  .carousel-indicators {
    bottom: -30px; /* aumenta questo valore per abbassarli */
  }
  .carousel-control-prev {
  left: -20px;   /* spostalo più a sinistra */
  }
  .carousel-control-next {
    right: -20px;  /* spostalo più a destra */
  }

   .visor-container{
    height: auto;          /* toglie il vincolo */
    /* min-height: 100dvh; */    /* resta almeno a schermo pieno */
    padding: 24px 0;       /* un po' di respiro sopra/sotto */
    align-items: flex-start; /* evita il “taglio” dovuto alla centratura verticale */
    /* overflow-y: auto;      se ancora non basta, scroll interno */
  }
  .visor-container div {margin-top: 20px; margin-bottom: 20px;}
  
}