.web-framework-banner {
     padding: 160px 0 80px;
     background-image: -o-linear-gradient(150deg, #7052fb 0%, #8a60fd 100%);
     background-image: linear-gradient(-1000deg, #7052fb 0%, #8a60fd 100%);
     position: relative;
     min-height: 100vh;
     display: flex;
     align-items: center;
 }

 .banner-right-shape {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }

 .banner-right-shape img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }

 .left-circle-shape {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 52%;
     left: 0;
 }

 .left-circle-shape .circle-fill {
     height: 700px;
     max-width: 700px;
     width: 100%;
     background: #faf9ff;
     display: block;
     border-radius: 50%;
     position: absolute;
     left: -18%;
     -webkit-animation: wave 10s linear infinite;
     animation: wave 10s linear infinite;
 }

 .left-circle-shape .circle-border {
     height: 400px;
     width: 400px;
     display: block;
     border: 2px dashed #feebee;
     z-index: 22;
     position: absolute;
     border-radius: 50%;
     left: 7%;
     top: 9%;
     -webkit-animation: waveRote 5s linear infinite;
     animation: waveRote 5s linear infinite;
 }

 @keyframes waveRote {
     0% {
         -webkit-transform: rotateZ(0deg) rotate(0deg) translate3d(0, 1%, 0) rotateZ(0deg);
         transform: rotateZ(0deg) rotate(0deg) translate3d(0, 1%, 0) rotateZ(0deg);
     }

     100% {
         -webkit-transform: rotateZ(360deg) rotate(45deg) translate3d(0, 1%, 0) rotateZ(-360deg);
         transform: rotateZ(360deg) rotate(45deg) translate3d(0, 1%, 0) rotateZ(-360deg);
     }
 }

 @media (max-width: 991.98px) {
     .web-framework-banner {
         height: auto;
     }

     .banner-right-shape {
         display: none;
     }

     .left-circle-shape .circle-fill {
         display: none;
     }

     .web-framework-banner .hero-content-wrap h2,
     .web-framework-banner .hero-content-wrap p {
         color: #fff;
     }

     .left-circle-shape .circle-border {
         top: 0;
     }

     .web-framework-banner {
         padding: 130px 0 80px;
     }

     .left-circle-shape .circle-fill {
         height: 500px;
         max-width: 500px;
     }
 }

 @media only screen and (max-width:767px) {
     .left-circle-shape .circle-border {
         height: 400px;
         width: 400px;
     }
 }

 @media only screen and (max-width:575px) {
     .left-circle-shape .circle-border {
         height: 300px;
         width: 300px;
     }
 }

 @media only screen and (max-width:375px) {
     .left-circle-shape .circle-border {
         height: 200px;
         width: 200px;
         top: 110px;
     }
 }