.donut-div {
    width: 300px;
     position: absolute;
     animation: rotate 10s linear infinite; /* Use the "rotate" animation for continuous rotation */
     transform-origin: center center; /* Set the transform origin to rotate in place */
    }
.banner-img .img1{
      top:-20%;
      right:35%;
       width:200px;
    }
 .banner-img .img2{
      top:60%;
      right:40%;
       width:200px;
        animation: rotate 8s linear infinite
    }
 .banner-img .img3{
      top:-10%;
    }
 
    @keyframes rotate {
      0% {
        transform: rotate(0deg);
      }
      50%{
        transform: rotate(180deg);
      }
      100%{
        transform: rotate(360deg);

      }
    }
    
    .donut-div img {
      width: 100px;
    }
    
@media only screen and (max-width: 768px) {
  .banner-img .img1,.banner-img .img2,.banner-img .img3{
    width: 100px;
  }
  .banner-img .img1{
right: 40%;
  }
  .banner-img .img2{
    top: 700%;
  }
  .banner-img .img3{
top: 400%;
right: 100%;
  }
  .img1 img,.img2 img,.img3 img{
    width: 50px;
    height: 50px;
  }
}