/* Save as style.css in the same folder as your HTML files */
body {
  font-family: Arial, sans-serif;
  margin:0;
  padding:0;
  background:#f5f5f5;
  color:#333333;
}
header {
  background:linear-gradient(135deg,#003366,#0055a5);
  color:white;
  padding:20px 15px;
  text-align:center;
}
header img {
  height:60px;
  display:block;
  margin:0 auto 10px auto;
}
nav {
  background:#0055a5;
  padding:10px;
  text-align:center;
}
nav a {
  color:white;
  margin:0 12px;
  text-decoration:none;
  font-weight:bold;
  font-size:14px;
}
nav a:hover {
  text-decoration:underline;
}
.hero {
  background:url('hero-awning.jpg') center/cover no-repeat;
  color:white;
  text-align:center;
  padding:80px 20px;
}
.hero-overlay {
  background:rgba(0,0,0,0.55);
  padding:40px 20px;
  max-width:800px;
  margin:0 auto;
}
.hero h1 {
  font-size:32px;
  margin-bottom:10px;
}
.hero p {
  font-size:18px;
}
.section {
  padding:40px 20px;
  max-width:1000px;
  margin:0 auto;
  background:white;
  margin-top:20px;
}
.section h2 {
  color:#003366;
  margin-bottom:10px;
}
.section h3 {
  color:#0055a5;
}
.button-primary {
  padding:12px 24px;
  background:#ff6600;
  color:white;
  border:none;
  cursor:pointer;
  font-size:16px;
  border-radius:4px;
}
.button-primary:hover {
  background:#e05500;
}
footer {
  background:#003366;
  color:white;
  text-align:center;
  padding:20px 10px;
  margin-top:40px;
  font-size:14px;
}
footer a {
  color:#ffcc66;
  text-decoration:none;
  margin:0 10px;
}
footer a:hover {
  text-decoration:underline;
}
ul.clean {
  list-style:none;
  padding-left:0;
}
ul.clean li {
  margin:6px 0;
}
@media (max-width:768px) {
  nav a {
    display:block;
    margin:8px 0;
  }
  .hero {
    padding:60px 15px;
  }
  .hero h1 {
    font-size:24px;
  }
  .hero p {
    font-size:16px;
  }
  .section {
    padding:25px 15px;
  }
  .button-primary {
    width:100%;
    max-width:320px;
  }
}