@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");



.img-slider {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  /* width: 800px;
  height: 532px; */
  width:auto;
  height:300px;
  top: 50px;
  background: white;
}



.img-slider .myslide {
  z-index: 1;
  position: absolute;
  /* width: auto;
  height:100%;  */
  clip-path: circle(0% at 0% 50%);
/*   margin:auto;
 */}

.img-slider .myslide.active {
  clip-path: circle(150% at 0% 50%);
  /* transition: 2s; */
  transition-property: clip-path;
}

.img-slider .myslide img {
  z-index: 1;
  /* width: auto;
  height:100%; */
  border-radius: 5px;
}


.img-slider .mynavigation {
  z-index: 2;
  position: absolute;
  display: flex;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
}

.img-slider .mynavigation .mybtn {
  background: rgba(255, 255, 255, 0.5);
  width: 8px;
  height: 8px;
  margin: 10px;
  border-radius: 50%;
  border: 1px solid #2696e9;

  cursor: pointer;
}

.img-slider .mynavigation .mybtn.active {
  background: #2696e9;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  
}

@media (min-width: 766px) and (max-width: 1200px) {
   .img-slider {
    top: 0px;
    height: 375px;
  } 


  .img-slider .mynavigation {
    bottom: 25px;
  }

  .img-slider .navigation .mybtn {
    width: 10px;
    height: 10px;
    margin: 8px;
  }
}

@media screen and (min-width: 400px) and (max-width: 765px) {
   .img-slider {
    height: 250px;
    top:0;
  } 

  

  .img-slider .mynavigation {
    bottom: -25px;
  }

  .img-slider .mynavigation .mybtn {
    width: 8px;
    height: 8px;
    margin: 6px;
  }
}

@media screen and (min-width: 200px) and (max-width: 400px){
   .img-slider {
    height: 200px;
    top:0;
  } 

  
  .img-slider .mynavigation {
    bottom: -40px;
  }
}