/* Falling effect for the paragraph */
@keyframes falling {
    0% {
        transform: translateY(-50px); /* Start 50px above the final position */
        opacity: 0;  /* Start with no opacity */
    }
    100% {
        transform: translateY(0); /* Move to the original position */
        opacity: 1;  /* Full opacity */
    }
}

/* Apply falling effect to paragraph */
.falling-text {
    opacity: 0; /* Initially invisible */
    animation: falling 1.5s ease-out forwards; /* 1.5 seconds falling effect with ease-out */
}

/* Optional: Delay for the entire content to load */
.h2, .falling-text {
    animation-delay: 0.5s;
}


/* Set up the container to overflow */
.serviceslider-sliderAnimation {
  width: 100%;
  overflow: hidden; /* Hide the content that's outside the slider */
}

/* Position the card container initially off the screen */
.serviceslider-card-containerAnimation {
  display: flex;
  animation: slideIn 1s ease-out forwards; /* Trigger slide-in animation */
}

/* Define the sliding effect */
@keyframes slideIn {
  0% {
    transform: translateX(100%); /* Start from 100% off the right */
  }
  100% {
    transform: translateX(0); /* End at the original position */
  }
}