/* Set the slider height and make it full width */
.slider {
  height: 400px;
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-top: 80px;
}

/* Set the background image and adjust its properties */
.slider-background {
  background-size: cover;
  background-position: center;
  height: 100%;
  width: 100%;
  animation: slide 10s infinite;
}

/* Add transition effect for smooth slide transition */
.slider-background {
  transition: opacity 0.5s ease-in-out;
}

/* Styling for the slider heading */
.slider-heading {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  z-index: 2;
}

/* Animation for the slideshow */
@keyframes slide {
  0% {
    background-position: 0% 0%;
  }
  20% {
    background-position: 0% 0%;
  }
  25% {
    background-position: 100% 0%;
  }
  45% {
    background-position: 100% 0%;
  }
  50% {
    background-position: 0% 0%;
  }
  70% {
    background-position: 0% 0%;
  }
  75% {
    background-position: 100% 0%;
  }
  95% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 0% 0%;
  }
}