/*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 */
}



/*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*/
 
/*fade left*/
.fade-left {
  opacity: 0;
  transform: translateX(-50px);
  animation: fadeLeft 1s ease forwards;
}

@keyframes fadeLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/*fade left*/

/*fade right*/
.fade-right {
  opacity: 0; 
  transform: translateX(50px);
  animation: fadeRight 1s ease forwards;
}

@keyframes fadeRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/*fade right*/

/* Efecto vertical + js*/
.fade-in-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s ease-in-out, transform 1.5s ease-in-out;
}

.fade-in-on-scroll.visible {
  opacity: 1; 
  transform: translateY(0);
}

/* Efecto vertical desde arriba hacia abajo */
.fade-in-on-scroll-top {
  opacity: 0;
  transform: translateY(-40px); /* Comienza más arriba */
  transition: opacity 0.9s ease-in-out, transform 1.5s ease-in-out;
}

.fade-in-on-scroll-top.visible {
  opacity: 1;
  transform: translateY(0); /* Vuelve a su lugar original */
}

@media (max-width: 425px){

}



@media (max-width: 768px){

 
}