.hero-banner{
  width: 100%;
  height: 700px;
  max-height: 700px;
  position: relative;
  overflow: hidden;
  padding: 0 20px;
}
.hero-banner-dark-circle{
  position: absolute;
  display:block;
  width:700px;
  height:700px;
  background-color:#0D005B;
  right:-14%;
  top:-3%;
  border-radius:100%;
  z-index:1;
}
.hero-banner .banner-wrapper{
  width: 1040px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
.hero-banner .content{
  width: 48%;
  padding-top: 200px;
  z-index: 50;
  position:relative;
}
.hero-banner .content :is(h1, h2, h3, h4, h5, h6){
  margin-bottom: 24px;
}
.hero-banner .content p{
  margin-bottom: 18px;
}
.hero-banner .content p:last-child{
  margin-bottom: 0;
}
.hero-banner .left-side-color-container{
  position: absolute;
  top: -30%;
  left: 0;
  width: 55%;
  height: 1196px;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  background: var(--WGA-Gradient-1, linear-gradient(46deg, #16EFC5 8.41%, #7655FF 90.55%));
}
.hero-banner .left-side-color-container .image-body{
  position: absolute;
  left: 15%;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.hero-banner .left-side-color-container .image-body .image{
  width: 100%;
  height: 705px;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 210px;
}
.right-side-image-container{
  position: absolute;
  width: 52%;
  height: 700px;
  right: 0;
  z-index: -1;
}
.mobile-view-banner-image{
  text-align:right;
}

.mobile-view-banner-image .image{
  right:-7%;
  border-radius:50%;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.25);
}

@media screen and (max-width: 1100px){
  .hero-banner{
    height: auto;
    max-height: 100%;
    padding: 0;
    background-image:none !important;
    background: var(--WGA-Gradient-1, linear-gradient(46deg, #16EFC5 8.41%, #7655FF 90.55%)) !important;
  }
  .hero-banner .banner-wrapper{
    display: block;
    width: 100%;
    padding-bottom: 0px;
  }
  .hero-banner .content{
    width: 100%;
    padding: 160px 30px 70px 30px;
  }
  .hero-banner .left-side-color-container{
    background-position: right top;
    width: 420px;
    height: 420px;
    top: unset;
    right: -60px;
    bottom: -90px;
  }
  .hero-banner .left-side-color-container .image-body{
    left: 25px;
    top: 15%;
  }
  .hero-banner .left-side-color-container .image-body .image{
    height: 100%;
    margin-top: 0;
  }
  .hero-banner-dark-circle{
    display:none !important;
  }
  .hero-banner .left-side-color-container{
    display:none !important;
  }
  .mobile-view-banner-image{
    display:block !important;
  }
}

@media screen and (max-width: 900px){

  .hero-banner .content{
    width: 100%;
    padding: 110px 30px 50px 30px;
  }