body{
  margin:0;
  font-family:Arial,sans-serif;
  background:#faf8f5;
  color:#222;
}

.hero{
  min-height:100vh;

  display:flex;
  justify-content:center;
  align-items:center;

  text-align:center;
  padding:40px;

  background:
    linear-gradient(
      rgba(0,0,0,.45),
      rgba(0,0,0,.45)
    ),
    url("../hero photo.JPG");

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  color:white;
}

.hero-box{
  max-width:850px;
}

.hero h1{
  font-size:58px;
  margin-bottom:20px;
}

.hero p{
  font-size:22px;
  margin-bottom:20px;
}

.btn{
  display:inline-block;
  background:#8a613d;
  color:#fff;
  padding:14px 26px;
  border-radius:8px;
  text-decoration:none;
  font-weight:bold;
}

.btn:hover{
  background:#6f4d30;
}

@media(max-width:768px){

  .hero h1{
    font-size:38px;
  }

  .hero p{
    font-size:18px;
  }

}
```