body {
  background-image: url("/img/photo/black-bg.jpg");
  margin: 0px;
}

.custom-css{
  z-index: 2000;
}

.custom-slider{
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  overflow: hidden;
}

.overlay {
  position: absolute;
  height: 100vh;
  width: 100%;
  padding: 0px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), #363636bd);
  z-index: 10;
}

.slider-container-one {
  display: flex;
  justify-content: center;
  width: 500%;
  height: 100vh; /* Adjust height as needed */
}
.slider-container-two {
  display: flex;
  justify-content: center;
  width: 500%;
  height: 100vh;/* Adjust height as needed */
}

.slider {
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 30%;
  margin: 0px 10px;
}

.slider .slide-track {
  display: flex;
  flex-direction: column;
  height: 200%; /* Twice the height of the container for infinite effect */
  width: 100%;
}

.slider1 .slide-track {
  animation: scroll-up 20s linear infinite;
}

.slider2 .slide-track {
  animation: scroll-down 20s linear infinite;
}

.slider .slide {
   /* Adjust height as needed */
  width: 100%;
  background-color: white;
  border: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 10px 0px;
  border-radius: 20px;
}

.slider .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image covers the entire slide area */
}

@keyframes scroll-up {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%); /* Move up by half the height of the slide-track */
  }
}

@keyframes scroll-down {
  0% {
    transform: translateY(-50%); /* Start from where the scroll-up animation ends */
  }
  100% {
    transform: translateY(0); /* Move down by half the height of the slide-track */
  }
}


@keyframes rotateAnimation {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(-360deg);
  }
}
.container{
  z-index: 20;
}
@keyframes rotateClockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes rotateCounterclockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

.rotate1 {
  position: absolute;
  top: 300px;
  right: 42%;
  width: 200px;
  animation: rotateClockwise 7s linear infinite; /* Slow clockwise rotation */
}

.rotate2 {
  position: absolute;
  top: 300px;
  right: 42%;
  width: 200px;
  animation: rotateCounterclockwise 7s linear infinite; /* Slow counterclockwise rotation */
}

@media (max-width: 767px) {
  .rotate1 {
  position: absolute;
  top: 250px;
  right: 30%;
  width: 150px;
  animation: rotateClockwise 7s linear infinite; /* Slow clockwise rotation */
}

.rotate2 {
  position: absolute;
  top: 250px;
  right: 30%;
  width: 150px;
  animation: rotateCounterclockwise 7s linear infinite; /* Slow counterclockwise rotation */
}
}