@media only screen and (min-width: 2300px) {
        .hero-foreground {
          top: 41.5% !important;
        }
      }
      .hero-banner>.fusion-column-wrapper>.fusion-builder-row {
        position: unset !important;
      }
      .hero-banner>.fusion-column-wrapper {
        position: relative;
        width: 100%;
        max-width: 100%;
        /* or the width of your background image */
        margin: 0 auto;
      }
      .hero-background {
        width: 100%;
        height: auto;
        display: block;
      }
      .hero-foreground {
        position: absolute;
        left: 50%;
        top: 40%;
        transform: translate(-50%, -50%);
        width: 25%;
        max-width: 560px;
      }
      .content_wrapper {
        position: absolute;
        left: 50%;
        top: 75%;
        transform: translate(-50%, -50%);
        width: 100%;
        max-width: 100%;
      }
      @media only screen and (max-width: 1024px) {
        .hero-banner h1,
        .hero-banner h2 {
          font-size: 0.8em !important;
        }
      }
      @media only screen and (max-width: 700px) {
        .hero-banner h1,
        .hero-banner h2 {
          font-size: 0.7em !important;
        }
      }
      /* .hero_wrapper{ z-index:999999; }
.hero_wrapper h2{ font-size:1em!important; }
.hero_wrapper{ display: flex
;
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    left: 0;
    right: 0; }
.hero_wrapper .fusion-image-element{     width: 24.042% !important;
    left: 38.881% !important;
    top: 24% !important;
    margin-top: 0px !important;
    margin-left: 0px !important;
    position: absolute !important; z-index:-1!important; }
@media only screen and (max-width: 1024px) {
.hero_wrapper .fusion-image-element {
        width: 33.021% !important;
        left: 34.76% !important;
        top: 19.019% !important;
}
@media only screen and (max-width: 700px) {
.hero_wrapper{ 
    position: relative;}
.hero_wrapper .fusion-image-element{ 
    position: relative;}
} */