/*** Start Slider Header ***/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
}

/* Default image height for large screens */
.home {
  height: 600px; /* Height for large screens */
  object-fit: cover; /* Ensure the image covers the area */
}

/* Medium screens (tablets) */
@media (max-width: 991.98px) {
  .home {
    height: 450px; /* Height for medium screens */
  }
}

/* Small screens (mobiles) */
@media (max-width: 767.98px) {
  .home {
    height: 280px; /* Height for small screens */
  }
  .caption h1 {
    font-size: ;
  }
}
.home {
  overflow: hidden;
  position: relative;
  background-color: #9c9c9c;
  color: #27c5de;

  .slide {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    z-index: 1;
    display: none;
    animation: slide 2s ease-in-out;

    .container {
      max-width: 1170px;
      margin: auto;
      flex-grow: 1;
      .caption {
        width: 50%;

        h1 {
          font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
            Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
            sans-serif;
          font-size: 55px;
          color: #0dd649;
          margin: 0;
          background-color: #ffffff49;
          padding: 3px;
        }
        p {
          font-size: 25px;
          color: #ffffff;
          margin: 2rem 0;
        }
        a {
          display: inline-block;
          padding: 10px 30px;
          background-color: #ffffff;
          text-decoration: none;
          color: #ffffff;
        }
      }
    }
  }
  .controls {
    .prev,
    .next {
      position: absolute;
      z-index: 2;
      top: 50%;
      display: flex;
      height: 50px;
      width: 50px;
      margin-top: -20px;
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.5);
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    .prev {
      left: 0;
    }
    .next {
      right: 0;
    }
  }
  .indicator {
    position: absolute;
    left: 45%;
    bottom: 5px;
    z-index: 2;
    > div {
      display: inline-block;
      text-align: center;
      width: 25px;
      line-height: 25px;
      margin: 0 2px;
      height: 25px;
      color: #ffffff;
      background-color: sandybrown;
      border-radius: 50%;
      cursor: pointer;
    }
  }
}
.home .slide.active {
  display: flex;
}

.home .slide.active .caption h1 {
  opacity: 0;
  animation: captionText 0.5s ease forwards;
  animation-delay: 1s;
}

.home .slide.active .caption p {
  opacity: 0;
  animation: captionText 0.5s ease forwards;
  animation-delay: 1.2s;
}

.home .slide.active .caption a {
  opacity: 0;
  animation: captionText 0.5s ease forwards;
  animation-delay: 1.4s;
}

.home .indicator div.active {
  background-color: #000;
}

@keyframes captionText {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/*** End Slider Header ***/