body {
  margin:0;
  padding:0;
  
}

.hero{
  position:relative;
  height:100vh;
  width:100vw;
  display:flex;
  justify-content:center;
  align-items: center;
}

.hero::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: url(https://powerventures.access.ly/oil-field-3.jpg);
  background-repeat:no-repeat;
  background-size:cover;
  background-position: center center;
  filter:brightness(60%);
  
}

.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: 200;
   margin-top: 1rem;
}
.hero-button {
   background-color: #3291AA;
   color: white;
   border: 1px solid #5ab6ce;
   margin-top: 5rem;
   padding: 0.9375rem1.875rem;
   font-family: "Monserrat", sans-serif;
   font-size: 1.125rem;
   font-weight: 200;
   cursor: pointer;
}
.hero-button:hover {
   background-color: #5ab6ce;
   border: 1px solid #3291AA;
}