body {
  margin: 0;
  padding: 0;
}
.hero {
  position: relative;
  width: 100vw;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://img-c.udemycdn.com/notices/web_banner/image_udlite/dc2bc81a-a342-474d-9d09-0ba3c2bfa687.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  filter: brightness(100%);
}
.hero-content {
  position: relative;
  float: left;
  font-family: "Monserrat", sans-serif;
  color: white;
  text-align: left;
  margin: 0.625rem;
  background-color: rgb(255, 255, 255);
  padding: 20px;
  margin-right: 60%;
  width: 36%;
  height: 65%;
  box-shadow: 4px 4px 4px 4px rgba(177, 177, 177, 0.726);
}

.hero-content > h1 {
  font-size: 3rem;
  font-family: SuisseWorks, Georgia, Times, times new roman, serif,
    apple color emoji, segoe ui emoji, segoe ui symbol;
  font-weight: 700;
  letter-spacing: -0.15rem;
  color: black;
}

.hero-content > p {
  font-size: 1.4rem;
  font-family: sf pro text, -apple-system, BlinkMacSystemFont, Roboto, segoe ui,
    Helvetica, Arial, sans-serif, apple color emoji, segoe ui emoji,
    segoe ui symbol;
  font-weight: 400;
  line-height: 1.4;
  color: black;
}

.hero-content > input {
  width: 98%;
  height: 50px;
  font-size: 15px;
  border: 1px solid rgb(0, 0, 0);
  color: black;
}