body {
   margin: 0;
   padding: 0;
}
.hero {
   position: relative;
   width: 100vw;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
}
.hero::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: url(images/pv.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
   filter: brightness(80%);
}
.hero-content {
   position: relative;
   font-family: "Monserrat", sans-serif;
   color: white;
   text-align: center;
   margin: 0.625rem;
}
.hero-title {
   font-size: 3rem;
   font-weight: 600;
   margin-bottom: 0;
}
.hero-subtitle {
   font-size: 2rem;
   font-weight: 400;
   margin-top: 1rem;
}

.hero-button {
  align-items: center;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: transparent 0 0 0 3px,rgba(18, 18, 18, .1) 0 6px 20px;
  box-sizing: border-box;
  color: #121212;
  cursor: pointer;
  display: inline-flex;
  flex: 1 1 auto;
  font-family: Inter,sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  justify-content: center;
  line-height: 1;
  margin: 0;
  outline: none;
  padding: 1rem 1.2rem;
  text-align: center;
  text-decoration: none;
  transition: box-shadow .2s,-webkit-box-shadow .2s;
  white-space: nowrap;
  border: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.hero-button:hover {
  box-shadow: #121212 0 0 0 3px, transparent 0 0 0 0;
}