body {
  margin:0;
  background:#111;
  color:#eee;
  font-family:sans-serif;
}
.hero {
  position:relative;
  height:400px;
  overflow:hidden;
}
.hero-img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-overlay {
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.5);
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  text-align:center;
}
.btn-primary {
  background:#e33;
  color:#fff;
  padding:14px 28px;
  border-radius:4px;
  text-decoration:none;
}
.main-nav ul {
  list-style:none;
  display:flex;
  justify-content:center;
  background:#222;
  margin:0; padding:10px 0;
}
.main-nav li { margin:0 15px; }
.main-nav a {
  color:#aaa;
  text-decoration:none;
  font-weight:bold;
}
.main-nav a:hover,
.main-nav .active a { color:#fff; border-bottom:2px solid #e33; }
footer {
  background:#000;
  text-align:center;
  padding:20px;
  color:#777;
}
footer ul {
  list-style:none;
  padding:0;
  margin-bottom:10px;
}
footer li {
  display:inline;
  margin:0 10px;
}
footer a {
  color:#aaa;
  text-decoration:none;
}
footer a:hover { color:#fff; }