:root{--primary:#007bff;--success:#28a745;}
*{box-sizing:border-box}

/* Page base */
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:#fff;
  text-align:center;
  background:#f4f4f9;
}

/* Hero – shows even if no image is present */
.hero{
  position:relative;
  min-height:68vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:100px 20px 80px;
  background:linear-gradient(135deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
  /* If/when you add an image at /images/hero-delivery.jpg, replace the line above with: 
  background:
    linear-gradient(135deg, rgba(0,0,0,.55), rgba(0,0,0,.35)),
    url("/images/hero-delivery.jpg") center/cover no-repeat;
  */
}
.hero h1{font-size:48px;line-height:1.1;margin:0 0 15px}
.hero p{font-size:18px;max-width:700px;margin:0 auto;line-height:1.6}

/* Buttons */
.btn{
  display:inline-block;
  padding:12px 25px;
  margin:10px;
  font-weight:700;
  text-decoration:none;
  border-radius:8px;
  border:2px solid #fff;
  transition:.25s;
}
.btn-primary{background:#2e7d32;color:#fff}
.btn-primary:hover{background:#fff;color:#2e7d32}
.btn-secondary{background:#fff;color:#2e7d32}
.btn-secondary:hover{background:#c8e6c9;color:#2e7d32}

/* Footer */
footer{
  background:linear-gradient(135deg, var(--primary), var(--success));
  padding:22px;
  margin-top:0;
  font-size:14px;
  color:#fff;
}
footer a{color:#fff;text-decoration:underline}
footer a:hover{opacity:.85}