/*CSS EXCLUSIVO PARA COLOCAR ANIMACIONES Y GALERÍAS*/

 /*efectos galeria*/
 .img-border{
  border-radius: 40px;
}

.zoom-container {
  overflow: hidden;
  position: relative;
  border-radius: 40px;
}

.zoom-container img {
  width: 100%;
  height: 100%; 
  transition: transform 0.5s ease;
  object-fit: cover; /* Para que la imagen se ajuste sin distorsionarse */
  object-position: center; /* Asegura que el zoom se mantenga centrado */
}

.zoom-container:hover img {
  transform: scale(1.3); /* Ajusta el valor de scale para más o menos zoom */
}

/*horizontal scroll*/
.horizontal-scroll {
  display: flex;
  overflow-x: auto; /* Activa el scroll horizontal */
  scroll-snap-type: x mandatory; /* Suaviza el desplazamiento */
  white-space: nowrap; /* Evita que los elementos se vayan hacia abajo */
  gap: 15px; /* Espacio entre elementos */
  padding-bottom: 10px; /* Para evitar que el scroll quede pegado */
}

.scroll-item {
  min-width: 300px; /* Ancho mínimo de cada item */
  height: 200px; /* Altura de cada item */
  background: #ff5733;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border-radius: 10px;
  flex-shrink: 0; /* Evita que los elementos se reduzcan */
  scroll-snap-align: start; /* Hace que el scroll se detenga en cada elemento */
}


/*horizontal scroll 2*/
.horizontal-scroll-2 {
  display: flex;
  overflow-x: auto; /* Activa el scroll horizontal */
  scroll-snap-type: x mandatory; /* Suaviza el desplazamiento */
  white-space: nowrap; /* Evita que los elementos se vayan hacia abajo */
  gap: 15px; /* Espacio entre elementos */
  padding-bottom: 10px; /* Para evitar que el scroll quede pegado */
}

.scroll-item-2 {
  min-width: 100%; /* Ancho mínimo de cada item */
  height: 100%; /* Altura de cada item */
  background: gray;
  color: white;
  display: flex; 
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border-radius: 0px;
  flex-shrink: 0; /* Evita que los elementos se reduzcan */
  scroll-snap-align: start; /* Hace que el scroll se detenga en cada elemento */
}


/*flecha de botón*/
.moving-arrow {
  display: inline-block;
  animation: move-right 1.5s infinite linear;
}

@keyframes move-right {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(6px); /* Ajusta la distancia de movimiento */
  }
  100% {
    transform: translateX(0);
  }
}
/*moving arrow*/


@media (max-width: 425px){

}



@media (max-width: 768px){

 
}