section.hero {
  position: relative;
  width: 100%;
  min-height: clamp(500px, 60vw, 70vh);
}
section.hero div.text {
  position: relative;
  z-index: 500;
  padding-top: clamp(33px, 8vw, 100px);
  padding-bottom: 120px;
  padding-left: clamp(30px, 8vw, 80px);
  max-width: clamp(350px, 40%, 40%);
}
section.hero div.text h1 {
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  color: black;
  margin: 0;
  font-size: clamp(45px, 11vw, 60px);
}
section.hero div.text h2 {
  font-family: "Montserrat", sans-serif;
  color: var(--gray1);
  margin: 0;
  font-size: clamp(27px, 7vw, 35px);
}
section.hero div.text hr {
  border: none;
  border-top: 5px solid var(--blue1);
  width: 150px;
  margin: 20px 0;
}
section.hero div.text h3 {
  color: var(--gray1);
  margin: 0;
  font-size: clamp(17px, 4vw, 20px);
}
@media only screen and (max-width: 600px) {
  section.hero div.text {
    max-width: 80%;
    padding-bottom: 250px;
  }
}
section.hero div.gradient {
  position: absolute;
  z-index: 400;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, white, white, white, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.63), transparent, transparent);
}
@media only screen and (max-width: 600px) {
  section.hero div.gradient {
    background-image: linear-gradient(to bottom, white, white, white, white, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.63), transparent, transparent);
  }
}
section.hero div.img {
  position: absolute;
  z-index: 300;
  right: 0;
  top: 0;
  height: 100%;
  width: 70%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}
@media only screen and (max-width: 600px) {
  section.hero div.img {
    width: 100%;
    bottom: 0;
  }
}

/*# sourceMappingURL=home.css.map */