.main-hero-banner {
  background-image: url(https://8132552.fs1.hubspotusercontent-na1.net/hubfs/8132552/new-web-2026-images/Hero%201-2.png?width=860&t=1782222163014);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  
}

.main-hero-banner .flex-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap:30px;
}

.main-hero-banner .flex-wrapper .right-side-wrapper {
  text-align: center;
  position: relative;
}

.main-hero-banner .flex-wrapper .left-side-wrapper,
.main-hero-banner .flex-wrapper .right-side-wrapper {
  width: 50%;
}

.main-hero-banner .flex-wrapper .right-side-wrapper .main-img {
  width: 100%;
  border-radius: 14px;
  box-shadow:
    0px 3.1px 6.7px 0px #00000004,
    0px 14.64px 26.19px 0px #00000006,
    0px 38.01px 82.22px 0px #0000000A;

}

.main-hero-banner .flex-wrapper .left-side-wrapper .content h1 {
  color:var(--white);
  margin-bottom: 30px;
  font-size:57px;
}

.main-hero-banner .flex-wrapper .left-side-wrapper .content p {
  margin-bottom: 50px;
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color:var(--white);
  max-width: 470px;
}

.main-hero-banner .flex-wrapper .left-side-wrapper .button {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

@media(max-width:1199px) {
  .main-hero-banner .flex-wrapper .left-side-wrapper .content h1 {
    font-size: 50px;

  }
  @media(max-width:1024px) {
    .main-hero-banner .flex-wrapper .left-side-wrapper .content h1 {
      font-size: 40px;

    }
    @media (max-width: 991px) {
      .main-hero-banner {
        padding: 80px 0;
      }
      .main-hero-banner .flex-wrapper .left-side-wrapper .content p {  
        max-width: 100%;
      }
      .main-hero-banner .flex-wrapper {
        flex-direction: column;
        align-items: center;
      }

      .main-hero-banner .flex-wrapper .left-side-wrapper,
      .main-hero-banner .flex-wrapper .right-side-wrapper {
        width: 100%;
      }

      .main-hero-banner .flex-wrapper .right-side-wrapper {
        margin-top: 50px;
        
      }
    }

    @media (max-width: 767px) {
     
      .main-hero-banner .flex-wrapper .left-side-wrapper .content h1 {
        font-size: 30px;
      }

      .main-hero-banner .flex-wrapper .left-side-wrapper .content p {
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 30px;
      }

      .main-hero-banner .flex-wrapper .left-side-wrapper .button {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
      }

      .main-hero-banner .flex-wrapper .right-side-wrapper {
        margin-top: 40px;
        
      }



      .main-hero-banner .flex-wrapper .right-side-wrapper .left-side {
        max-width: 150px;
        left: 28%;
        top: 45%;
      }

      .main-hero-banner .flex-wrapper .right-side-wrapper .right-side {
        max-width: 150px;
        left: 50%;
        top: 5%;
      }
    }

    @media (max-width:480px) {
      .main-hero-banner .flex-wrapper .right-side-wrapper .left-side {
        max-width: 150px;
        left: 0;
        top: 45%;
      }
    }