/*------------------------------------------------ 
        this file is using only for slider
------------------------------------------------- */

/*--------------------------------------
        Coder Info:
        Name: Md. Nafis iqbal
        email: nafisiqbal.net2002@gmail.com
        what's app: +8801709912722
-------------------------------------*/

.sliderContainer {
  height: 400px;
  width: 90%;
  margin: 50px auto;
  padding: 20px 20px 10px 20px;
  border: 4px solid sandybrown;
  position: relative;
  overflow: hidden;
}

.parentOfSlides {
  display: flex;
  transition: transform 0.6s ease;
  width: 300%;
}

.sliderContainer input {
  display: none;
}

.slide {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline: 30px;
  width: 100%;
  gap: 20px;
}

.slideImageContainer {
  flex: 1;
  height: 350px;
  overflow: hidden;
  position: relative;
  border: 1px solid #ccc;
  border-radius: 10px;
}

.slide img {
  width: 100%;
  height: auto;
  transition: transform 5s linear;
  display: block;
}

.slideImageContainer:hover img {
  transform: translateY(calc(-100% + 350px));
}

.slideDetails {
  display: flex;
  flex: 1;
  /* width: 50%; */
  margin-left: 50px;
  flex-direction: column;
}

.NavigatorContainer {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100%;
  bottom: 10px;
  gap: 10px;
}

.navBtn {
  background: rgb(224, 113, 15);
  color: white;
  padding: 3px 10px;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.navBtn:hover {
  background-color: rgb(177, 87, 8);
}

/* Highlight active dot */
#slide1:checked ~ .NavigatorContainer label[for="slide1"],
#slide2:checked ~ .NavigatorContainer label[for="slide2"],
#slide3:checked ~ .NavigatorContainer label[for="slide3"] {
  background-color: #c90909;
}

/* Slide movement using transform */
#slide1:checked ~ .parentOfSlides {
  transform: translateX(0%);
}
#slide2:checked ~ .parentOfSlides {
  transform: translateX(-33.333333%);
}
#slide3:checked ~ .parentOfSlides {
  transform: translateX(-66.666666%);
}