.owl-carousel {
  overflow: visible;
}

.owl-stage-outer {
  overflow: visible !important;

  padding-left: 50px;
}

.owl-item > div {
  cursor: pointer;
  margin: 2.5% 3%;
  transition: transform 0.4s ease;
  transform-origin: center center;
  position: relative;
  display: flex;
  z-index: 1;
}

.owl-item > div {
  position: relative;
  overflow: hidden;
}

/* Velo nero sotto il testo */
.owl-item > div::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2); /* Velo nero */
  transition: opacity 0.3s ease;
  z-index: 1; /* Più basso del contenuto */
  pointer-events: none;
}

/* Rimuove il velo al passaggio del mouse */
.owl-item > div:hover::after {
  opacity: 0;
}

/* Il contenuto della card deve stare sopra al velo */
.card-img-overlay {
  position: relative;
  z-index: 2; /* Sopra al velo */
}



.owl-item.second-highlight {
  margin: 1% 2% !important;
}

@media (max-width: 1300px) {
  .owl-item.second-highlight {
    margin: 0% 1% !important;
  }
}

/* Ingrandisce la seconda immagine senza coprire le altre */
.owl-item.second-highlight > div {
  transform: scale(1.4);
  z-index: 3;
  
}


.owl-stage{
  display: flex;
  align-items: flex-end;
  margin-bottom: -3%;
  min-height: 350px;
  padding-left: 20px;
}  

.m-blog{
  margin-left: 22% !important;
  margin-bottom: -8%;

}


.fixed-image-container {
  width: 100%;              /* o una larghezza specifica */
  aspect-ratio: 1 / 1;      /* o 1 / 1 per quadrato, oppure 16 / 9 ecc. */
  position: relative;
  overflow: hidden;
  background-color: #f0f0f0; /* fallback se manca immagine */
}

.fixed-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* copre tutto il contenitore */
  object-position: center;
  display: block;
}


@media (max-width: 1300px) {
  .m-blog {
margin-bottom: 0;
}

.owl-stage-outer {
  overflow: visible !important;

  padding-left: 0px;
}

.owl-carousel {
margin-left: 0;
margin-right: 0;
overflow: visible;
}

.owl-stage {
justify-content: center;
margin-bottom: 0;
min-height: auto;
}

.owl-item {
margin: 0 10px;
transition: transform 0.3s ease;
display: flex;
justify-content: center;
}

.owl-item > div {
transform: scale(0.85);
transition: transform 0.4s ease;
overflow: hidden;
width: 250px; /* fissa */
}

.owl-item.center > div {
transform: scale(1);
}

.card-img-overlay * {
transform: scale(1) !important; /* evita che testi vengano scalati */
}

.owl-item.center {
  margin-inline: 50px;
}

.owl-item:not(.center) > div:hover {
opacity: 0.75;
}

/* Disattiva second-highlight */
.owl-item.second-highlight,
.owl-item.second-highlight > div {
margin-inline: 0;
margin-bottom: 0;
transform: none;
z-index: 1;
}
} 

@media (max-width: 600px) {
.owl-item {
  margin: 0 5px;
  
}

.owl-item > div {
  transform: scale(0.95);
  width: 250px !important;
}

.owl-item.center > div {
  width: 350px !important; /* Leggero ingrandimento della centrale */
}

.owl-item.center {
  margin-inline: 0; /* Nessun margine laterale su smartphone */
}

.owl-item:not(.center) > div:hover {
  opacity: 1; /* Nessun effetto hover su mobile */
}

.card-img-overlay * {
  transform: scale(1) !important;
}

/* Second-highlight disattivato anche qui */
.owl-item.second-highlight,
.owl-item.second-highlight > div {
  margin-inline: 0;
  margin-bottom: 0;
  transform: none;
  z-index: 1;
}
}