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


.sliderdiv {display: flex; align-items: center; justify-content: center;
  margin bottom: 50px,}
.sliderdiv ul {margin-left: 20px;}
.sliderdiv img {max-height: 420px;}
.slideimg5 {max-height: 350px;}

.img-slider{position: relative; width: 800px; height: 420px;
  margin: 10px; background: white;}
.img-slider .slide{z-index: 1; position: absolute; width: 100%;
  clip-path: circle(0% at 0 50%);}
.img-slider .slide.active{clip-path: circle(150% at 0 50%); transition: 2s;
  transition-property: clip-path;}
.img-slider .slide img{z-index: 1; width: auto; border-radius: 5px;}
.img-slider .slide .info{position: absolute; top: 0; padding: 15px 30px;}
.img-slider .slide .info h2{color: #fff; font-size: 45px; text-transform: uppercase;
  font-weight: 800; letter-spacing: 2px;}
.img-slider .slide .info p{  color: #fff; background: rgba(0, 0, 0, 0.0);
  font-size: 16px; width: 60%; padding: 10px; border-radius: 4px;}
.img-slider .navigation{z-index: 2; position: absolute; display: flex;
  bottom: 30px; left: 50%; transform: translateX(-50%);}
.img-slider .navigation .btn{background: rgba(255, 255, 255, 0.5);
  width: 12px; height: 12px; margin: 10px; border-radius: 50%; cursor: pointer;}
.img-slider .navigation .btn.active{background: #2696E9;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);}

@media (max-width: 1124px){
  .sliderdiv img {max-height: 420px;}

  .img-slider{position: relative; width: 800px; height: 420px;
    margin: 10px; background: white;}




  .img-slider .slide .info{padding: 10px 25px;}
  .img-slider .slide .info h2{font-size: 35px;}
  .img-slider .slide .info p{width: 70%;font-size: 15px;}
  .slide img{width: 70%;}
  .img-slider .navigation{bottom: 25px;}
  .img-slider .navigation .btn{width: 10px;height: 10px;margin: 8px;}
}

@media (max-width: 1000px){

  .img-slider .slide .info{padding: 10px 20px;}
  .img-slider .slide .info h2{font-size: 30px;}
  .img-slider .slide .info p{width: 80%;font-size: 13px;}
  .img-slider .navigation{bottom: 15px;}
  .img-slider .navigation .btn{width: 8px;height: 8px; margin: 6px;}
}

@media (max-width: 950px){
  .img-slider{width: 400px;height: 230px;}
  .sliderdiv {width: 100%; }
  .sliderdiv img {max-height: 200px;}

  .img-slider {width: 100%; }

  .img-slider .slide .info{padding: 5px 10px;}
  .img-slider .slide .info h2{font-size: 25px;}
  .img-slider .slide .info p{width: 90%; font-size: 11px;}
  .img-slider .navigation{bottom: 60px;}
}