#about {
  padding: 136px 0 155px 0;
  position: relative;
  overflow: hidden;
}

#about::after {
  position: absolute;
  content: "";
  background: url(./assets/about-bg.png);
  bottom: -49%;
  right: -4%;
  width: 40%;
  z-index: -1;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
}

#about .wrapper {
  width: 85%;
  gap: 40px 15%;
}

#about .wrapper .left {
  position: relative;
  width: 40%;
}

#about .wrapper .left img._1 {
  max-width: 100%;
}

#about .wrapper .left img._2 {
  max-width: 340px;
  position: absolute;
  bottom: 7%;
  right: -18%;
}

#about .wrapper .right {
  max-width: 570px;
}

#about .wrapper .right h2 {
  /* max-width: 365px; */

  width: 100%;
  margin-bottom: 38px;
}

#about .wrapper .right p {
  margin-bottom: 57px;
  max-width: 530px;
}

#homeBanner {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  transition: background-image 0.8s ease-in-out;

  @media screen and (max-width: 600px) {
    /* background-position: center;
    background-size: 350% 100%; */
    background-position: 60% 0%;
    background-size: 230% 100%;
  }
}

@media (min-width: 500px) and (max-width: 1199px) {
  #about::after {
    position: absolute;
    content: "";
    background: url(./assets/about-bg.png);
    bottom: -125%;
    right: 0;
    width: 50%;
    z-index: -1;
    scale: 0.6;
  }
}

@media (max-width: 1200px) {
  #about {
    padding-top: 105px;
    padding-bottom: 109px;
  }

  #about .right h2 {
    font-size: 48px;
    line-height: 60px;
    letter-spacing: 2.4px !important;
  }

  #about .button {
    padding: 14px 0 !important;
    max-width: 199px;
  }
}

@media (max-width: 450px) {
  #about .right p {
    max-width: 307px !important;
    margin-bottom: 36px !important;
    line-height: 26px;
  }

  #about::after {
    bottom: -119% !important;
    left: -51% !important;
    scale: 0.5 !important;
  }
}