.slider {
  position: relative;
  width: 100%;
  margin: auto;
  height: 70vh;
  overflow: hidden;
}

.slide {
  display: none;
  width: 100%;
  height: 100%; /* Ensure slides cover the full height of the slider */

}

.slide img {
  width: 100%; /* ensures the image covers the full width of the slider */
  height: 100%; /* ensures the image covers the full height of the slider */
  object-fit: cover; /* ensures the image covers the space without distorting aspect ratio */
  display: block; /* removes bottom margin/gap */

}

.slide.active {
  display: block;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* Centers the buttons vertically */
  width: auto;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0px;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(32, 32, 32,0.8);
  text-decoration: none;
  color: #f82249 !important;
}

.dots-container {
  position: absolute;
  bottom: 0; /* Adjusted to zero to align closely with the bottom of the slider */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 5px; /* Reduced padding if necessary */
  background:rgba(255, 255, 255, 0.9); /* semi-transparent background */
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #757474;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dot:hover {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #f82249 !important;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dot.active {
  background-color: #181818; /* white dot for active slide */
}
/* @media screen  and (max-width: 991px) {
  .slider {
    height: 20vh ; 
  }
}  */

/* @media screen and (min-width: 769px) and  (max-width: 991px) {
  .slider {
    height: 40vh; 
  }
} */


/* @media screen and (max-width: 420px) {
  .slider {
    height: 100px;

  } 
} */
@media screen and (min-width: 991px) and (max-width: 1280px) {
  .slider {
    height: 50vh;
  }
}
/* Media query for screens between 769px and 991px */
@media screen and (min-width: 769px) and (max-width: 991px) {
  .slider {
    height: 40vh;
  }
}

@media screen and (min-width: 505px) and (max-width: 768px) {
  .slider {
    height: 30vh;
  }
}
/* Media query for screens between 421px and 768px */
@media screen and (min-width: 421px) and (max-width: 505px) {
  .slider {
    height: 20vh;
  }

  .dot {
    cursor: pointer;
    height: 10px;
    width: 10px;
    margin: 0 2px;
    background-color: #757474;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }
  .dot:hover {
    cursor: pointer;
    height: 10px;
    width: 10px;
    margin: 0 2px;
    background-color: #f82249 !important;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }
  
}

/* Media query for screens smaller than 421px */
@media screen and (max-width: 420px) {
  .slider {
    height: 20vh;
  }
  .dot {
    cursor: pointer;
    height: 5px;
    width: 5px;
    margin: 0 2px;
    background-color: #757474;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }
  .dot:hover {
    cursor: pointer;
    height: 5px;
    width: 5px;
    margin: 0 2px;
    background-color: #f82249 !important;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }
  
}