@keyframes fadeIn {
    from {opacity: 0; transform: translateY(20px);}
    to {opacity: 1; transform: translateY(0);}
  }
  
.move-bottom-10 {
/*  width: 100%;
  height: 100%;
  object-fit: cover;*/
  transform: matrix(1, 0, 0, 1, 0, 0);
  animation: moveBottom10 6s ease-in-out infinite alternate;
}

.move-bottom-30 {
/*  width: 100%;
  height: 100%;
  object-fit: cover;*/
  transform: matrix(1, 0, 0, 1, 0, 0);
  animation: moveBottom30 6s ease-in-out infinite alternate;
}

.move-bottom-50 {
/*  width: 100%;
  height: 100%;
  object-fit: cover;*/
  transform: matrix(1, 0, 0, 1, 0, 0);
  animation: moveBottom50 6s ease-in-out infinite alternate;
}
.move-top {
/*  width: 100%;
  height: 100%;
  object-fit: cover;*/
  transform: matrix(1, 0, 0, 1, 0, 0);
  animation: moveTB 6s ease-in-out infinite alternate;
}

.move-left {
/*  width: 100%;
  height: 100%;
  object-fit: cover;*/
  transform: matrix(1, 0, 0, 1, 0, 0);
  animation: moveLeft 6s ease-in-out infinite alternate;
}

/* 🔹 Keyframes: only left & right movement up to 50px */
@keyframes moveBottom10 {
  0% {
    transform: matrix(1, 0, 0, 1, 0, 0); /* start */
  }
  100% {
    transform: matrix(1, 0, 0, 1, 0, 10); /* move right 50px */
  }
}

/* 🔹 Keyframes: only left & right movement up to 50px */
@keyframes moveBottom30 {
  0% {
    transform: matrix(1, 0, 0, 1, 0, 0); /* start */
  }
  100% {
    transform: matrix(1, 0, 0, 1, 0, 30); /* move right 50px */
  }
}
/* 🔹 Keyframes: only left & right movement up to 50px */
@keyframes moveBottom50 {
  0% {
    transform: matrix(1, 0, 0, 1, 0, 0); /* start */
  }
  100% {
    transform: matrix(1, 0, 0, 1, 0, 50); /* move right 50px */
  }
}

@keyframes moveLeft {
  0% {
    transform: matrix(1, 0, 0, 1, 0, 0); /* start */
  }
  100% {
    transform: matrix(1, 0, 0, 1, 0, 50); /* move right 50px */
  }
}

/* Start hidden */
.fadefromLeft {
  opacity: 0;
  transform: translateX(-100%);
}

/* Keyframes for fadeInRight */
@keyframes fadefromLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}



/* Start hidden */
.fadefromRight {
  opacity: 0;
  transform: translateX(100%);
}

/* Keyframes for fadefromRight */
@keyframes fadefromRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Start hidden */

.fadefromUp {
  opacity: 0;
  transform: translateY(-100%);
}

@keyframes fadefromUp {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Start hidden */
.fadefromDown {
  opacity: 0;
  transform: translateY(100%);
}

/* Keyframes for fadefromDown */
@keyframes fadefromDown {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Add this class when section is visible */
.fadefromLeft.active {
  animation: fadefromLeft 1s ease-out forwards;
}

/* Add this class when section is visible */
.fadefromRight.active {
  animation: fadefromRight 1s ease-out forwards;
}

/* Add this class when section is visible */
.fadefromDown.active {
  animation: fadefromDown 1s ease-out forwards;
}
/* Add this class when section is visible */
.fadefromUp.active {
  animation: fadefromUp 1s ease-out forwards;
}
/* Animation delay utility classes (1s–10s) */
.animate__delay-1s {
  animation-delay: 1s !important;
}
.animate__delay-2s {
  animation-delay: 2s !important;
}
.animate__delay-3s {
  animation-delay: 3s !important;
}
.animate__delay-4s {
  animation-delay: 4s !important;
}
.animate__delay-5s {
  animation-delay: 5s !important;
}
.animate__delay-6s {
  animation-delay: 6s !important;
}
.animate__delay-7s {
  animation-delay: 7s !important;
}
.animate__delay-8s {
  animation-delay: 8s !important;
}
.animate__delay-9s {
  animation-delay: 9s !important;
}
.animate__delay-10s {
  animation-delay: 10s !important;
}

.ease-in-out {
    -webkit-transition-timing-function: 
cubic-bezier(.4, 0, .2, 1);
    transition-timing-function: 
cubic-bezier(.4, 0, .2, 1);
}