@media (max-width: 767px) {
.slider-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0 auto;

}
  .slider {
    display: flex;
    width: 85%; 
    transition: transform 0.5s ease-in-out;
    align-content: center;
    margin-bottom: 16%;

  
  }
    .slide {
      flex: 0 0 100%;
      box-sizing: border-box;
      justify-content: space-around;

    }
      img {
        width: 100%;
        height: auto;
      }
 
  .pagination {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
  }
    .dot {
      width: 20px;
      height: 20px;
      background-color: #4b4b50;
      border-radius: 50%;
      margin: 0 5px;
      cursor: pointer;
    }
    .dot.active{
      background: radial-gradient(circle, rgba(0,0,0,1) 30%, rgba(75,75,80,1) 14%);
    }
  }