/* ================ Animation for the Slideshow Images ================= */
@-webkit-keyframes imageAnimation {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: ease-in;
  }

  8% {
    opacity: 1;
    -webkit-animation-timing-function: ease-out;
  }

  17% {
    opacity: 1;
  }

  25% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@-moz-keyframes imageAnimation {
  0% {
    opacity: 0;
    -moz-animation-timing-function: ease-in;
  }

  8% {
    opacity: 1;
    -moz-animation-timing-function: ease-out;
  }

  17% {
    opacity: 1;
  }

  25% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@-o-keyframes imageAnimation {
  0% {
    opacity: 0;
    -o-animation-timing-function: ease-in;
  }

  8% {
    opacity: 1;
    -o-animation-timing-function: ease-out;
  }

  17% {
    opacity: 1;
  }

  25% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@-ms-keyframes imageAnimation {
  0% {
    opacity: 0;
    -ms-animation-timing-function: ease-in;
  }

  8% {
    opacity: 1;
    -ms-animation-timing-function: ease-out;
  }

  17% {
    opacity: 1;
  }

  25% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes imageAnimation {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }

  8% {
    opacity: 1;
    animation-timing-function: ease-out;
  }

  17% {
    opacity: 1;
  }

  25% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/* =============== Animation for the Titles ========================= */
@-webkit-keyframes titleAnimation {
  0% {
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  17% {
    opacity: 1;
  }

  19% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@-moz-keyframes titleAnimation {
  0% {
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  17% {
    opacity: 1;
  }

  19% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@-o-keyframes titleAnimation {
  0% {
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  17% {
    opacity: 1;
  }

  19% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@-ms-keyframes titleAnimation {
  0% {
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  17% {
    opacity: 1;
  }

  19% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes titleAnimation {
  0% {
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  17% {
    opacity: 1;
  }

  19% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/* Show at least something when animations not supported
.no-cssanimations .cb-slideshow li span {
    opacity: 1;
}

@media screen and (max-width: 1140px) {
    .cb-slideshow li div h3 {
        font-size: 140px
    }
}

@media screen and (max-width: 600px) {
    .cb-slideshow li div h3 {
        font-size: 80px
    }
} */

/* ================= Animation For Gallery Slides ==================== */
@keyframes SlideIn {
  from {
    transform: translateY(0px);
    opacity: 0;
    visibility: hidden;
  }

  to {
    transform: translateY(-100px);
    opacity: 1;
    visibility: visible;
  }
}

@keyframes FadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes FadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* Define the slide-in animation */
@keyframes slideInFromBelow {
  0% {
    transform: translateY(50px); /* Start 50px below the original position */
    opacity: 0; /* Start as invisible */
  }
  100% {
    transform: translateY(0); /* End at the original position */
    opacity: 1; /* End fully visible */
  }
}

/* Initially hide the cards */
.first-card,
.second-card,
.third-card {
  opacity: 0;
  transform: translateY(50px); /* Start off-screen */
}

/* Apply animation to the cards once they are in view */
.first-card.visible {
  animation: slideInFromBelow 0.5s ease-out forwards;
  animation-delay: 0.2s; /* Slight delay for the first card */
}

.second-card.visible {
  animation: slideInFromBelow 0.5s ease-out forwards;
  animation-delay: 0.4s; /* Slightly more delay for the second card */
}

.third-card.visible {
  animation: slideInFromBelow 0.5s ease-out forwards;
  animation-delay: 0.6s; /* Slightly more delay for the third card */
}

/* Optional: Styling for the section to display the cards in a row */
.section-decoration {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}