.main_banner{
  position:relative;
  width:90.36%;
  height:calc(100vh - 200px);
  margin:100px auto 40px;
  overflow:hidden;
  border-radius:32px;

  background:
  radial-gradient(circle at 70% 40%, rgba(36,87,255,.28), transparent 30%),
  linear-gradient(135deg,#04070f,#050c1f);

 
}

.hero-text{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:1;
  text-align:center;
  pointer-events:none;
}
.hero-text small{
    text-shadow: 0 6px 20px rgba(0, 0, 0, .35), 0 0 40px rgba(23, 127, 206, .25);
  color:#fff;
  line-height:.88;
  font-weight:400;
  font-size:2vw;
  letter-spacing:-0em;
}
.hero-text h1{
 text-shadow: 0 6px 20px rgba(0, 0, 0, .35), 0 0 40px rgba(23, 127, 206, .25);
  margin-top:35px;
  color:#fff;
  line-height:.88;
  font-weight:800;
  font-size:7vw;
  letter-spacing:-0em;
  
}
.hero-text p{font-size:1.3vw;color: #fff;margin-top: 65px;}
#webgl{
  position:absolute;
  inset:0;
  z-index:4;
}
@media(min-width: 300px) and (max-width: 1100px){
.main_banner{margin: 85px auto 30px !important}
  .hero-text small{font-size: 1.35em !important}
  .hero-text h1{font-size: 3.4em !important;margin-top: 25px !important}
  .hero-text p{font-size: 1em !important;margin-top: 40px !important;line-height: 1.5}
}