/* COLORS */
/* TYPOGRAPHY */
/* ---- MEDIA QUERIES ----- */
.rtl .hero .hero-content {
  margin: 0 9.4rem 0 0;
}

.hero {
  position: relative;
}
.hero.has-form .hero-content {
  max-width: 100%;
  display: grid;
  gap: 2.4rem;
  align-items: center;
  grid-template-columns: 1fr 34.1rem;
  padding-right: 9.6rem;
}
.hero.has-form .hero-text {
  max-width: 49.5rem;
}
.hero.has-form .hero-form {
  background-color: #fff;
  border-radius: 3.2rem;
  box-shadow: 0 113px 32px 0 rgba(97, 97, 97, 0), 0 72px 29px 0 rgba(97, 97, 97, 0.01), 0 41px 24px 0 rgba(97, 97, 97, 0.05), 0 18px 18px 0 rgba(97, 97, 97, 0.09), 0 5px 10px 0 rgba(97, 97, 97, 0.1);
  max-width: 34.1rem;
  height: 100%;
  padding: 4rem;
  color: #3C3C3C;
}
.hero .hero-content {
  color: #fff;
  margin: 0 0 0 9.4rem;
  max-width: 45.6rem;
  padding: 11.5rem 0 11.1rem;
  position: relative;
  z-index: 99;
  min-height: 49.5rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.hero .hero-content .heading {
  margin: 0 0 1.6rem;
  color: #fff;
}
.hero .hero-content .button-container {
  margin: 3.2rem 0 0;
}
.hero .background-image {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0rem 1.6rem 1.6rem 1.6rem;
}
.hero .background-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero .shape {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 98;
}
.hero .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
  border-radius: 0rem 1.6rem 1.6rem 1.6rem;
}

@media (max-width: 768px) {
  .hero.has-form {
    margin-bottom: 11.9rem;
  }
  .hero.has-form .hero-content {
    max-width: 100%;
    display: grid;
    gap: 2.4rem;
    align-items: center;
    grid-template-columns: 1fr;
    padding-right: 2rem;
  }
  .hero.has-form .hero-text {
    max-width: 49.5rem;
  }
  .hero.has-form .hero-form {
    position: absolute;
    top: calc(100% - 11.9rem);
    left: 0;
    right: 0;
    box-shadow: 0 113px 32px 0 rgba(97, 97, 97, 0), 0 72px 29px 0 rgba(97, 97, 97, 0.01), 0 41px 24px 0 rgba(97, 97, 97, 0.05), 0 18px 18px 0 rgba(97, 97, 97, 0.09), 0 5px 10px 0 rgba(97, 97, 97, 0.1);
    max-width: 100%;
    height: fit-content;
    padding: 1.6rem;
    min-height: 23.8rem;
  }
  .hero .hero-content {
    margin: 0;
    max-width: 100%;
    padding: 11.3rem 2.4rem 13.1rem;
  }
  .hero .hero-content .heading {
    margin: 0 0 0.8rem;
  }
  .hero .hero-content .button-container {
    margin: 4rem 0 0;
  }
  .hero .shape svg {
    width: 20rem;
    height: 5.36rem;
  }
}