/*product card slifer*/

.offer-slider{
  position:relative;
  width:100%;
  overflow:hidden;

  user-select:none;
  -webkit-user-select:none;
}

.offer-track{
   margin:0;
  padding:20px;
  display:flex;
  gap:20px;

  transition:transform 0.5s ease;
}

.offer-card{
  position:relative;

  width: 400px;
  aspect-ratio:7/6;

  border-radius:30px;
  overflow:hidden;

  flex-shrink:0;

}

.offer-card :hover{
  cursor: grab;
}

.offer-card img{
  width:100%;
  aspect-ratio:7/6;

  object-fit:cover;
  display:block;
}

.offer-overlay{
  position:absolute;
  inset:0;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;

  padding:25px;

}

.offer-overlay button{
  height:60px;

  border:none;
  border-radius:18px;

  background:white;
  color:black;

  font-size:18px;
  cursor:pointer;
}

.dots-wrapper {
  position: relative;
  width: 110px; 
  overflow: hidden;
  margin: 20px auto 0;
}

.slider-dots {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  width: max-content; 
  transition: transform 0.3s ease;
}

.slider-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #666;
  transition: 0.3s;
  flex-shrink: 0; 
}

.slider-dots .active {
  width: 28px;
  border-radius: 999px;
  background: #000000;
}


@media(max-width: 600px) {
  .offer-card {
    width: 80vw;
  }
}