.slider-container {
  position: relative;
  width: 80vw; /* Slider within 80% of viewport width */
  max-width: 1200px; /* Optional: Limit maximum width */
  height: auto;
  margin: 20px auto;
  padding: 55px 50px; /* Space for arrows */
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible; /* Allow hover effects to show */
}


/* Initial state for float-in animation */
.intro-animate {
  opacity: 0;
  transform: translateX(-50px); /* Starts 50px to the left */
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

/* When the element is in view */
.intro-animate.visible {
  opacity: 1;
  transform: translateX(0); /* Moves to the original position */
}

.card-slider {
  position: relative;
  width: 100%; /* Full container width */
  max-width: 1200px; /* Maximum width of the slider */
  overflow: hidden; /* Hide extra cards */
  margin: 0 auto;
  padding: 10px;
  display: flex;
  align-items: center;
}

.slider {
  display: flex;
  transition: transform 0.5s ease;
  gap: 20px; /* Space between cards */
  width: fit-content; /* Automatically adjust based on the number of cards */
}

.card {
  flex: 0 0 calc((100% - 60px) / 4); /* Calculate width dynamically for 4 cards */
  max-width: calc((100% - 60px) / 4); /* Ensure 4 cards fit in container */
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: left;
  height: 350px;
  transition: transform 0.3s ease-in-out, z-index 0.3s, opacity 0.3s;
}

.card.visible {
  opacity: 1; /* Show card */
  transform: translateX(0); /* Move to original position when visible */
}

.card:hover {
  transform: scale(1.05); /* Hover effect */
  z-index: 5; /* Bring card above others */
}

.card img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.card h3 {
  font-size: 1.2em;
  margin: 15px;
}

.card p {
  font-size: 1em;
  margin: 0 15px 15px;
  color: #666;
}

/* Button Styling */
/* Arrow Button Styling */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid rgb(254, 101, 0);
  color: rgb(254, 101, 0);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 250ms, color 250ms;
  z-index: 10;
}

.slider-btn:hover {
  background-color: rgb(254, 101, 0);
  color: #fff;
}

.prev-btn {
  left: -50px; /* Place arrow outside slider */
}

.next-btn {
  right: -50px; /* Place arrow outside slider */
}

h2 {
  margin-bottom: 2.5rem;
  text-align: center; /* Center the heading */
}

/* Ensure responsive scaling */
@media (max-width: 768px) {
  .card {
    flex: 0 0 calc(100% - 20px); /* Adjust for single-column layout */
    max-width: calc(100% - 20px);
  }

  .slider {
    padding: 0;
  }

}