/* ==== HEADER ==== */
#header {
  position: relative;
  background: url('path/to/your/background.jpg') no-repeat center center;
  background-size: cover;
  height: 180px;
}

#header .navbar {
  background: rgba(255, 255, 255, 0.3); /* transparan agar gambar terlihat */
  box-shadow: none;
  border: none;
}

#header .navbar a {
  color: #004b50; /* warna teks menu */
  font-weight: 600;
}

#header .navbar a:hover {
  color: #008080;
}

/* Logo di pojok kiri */
#header img.logo {
  position: absolute;
  top: 25px;
  left: 30px;
  width: 100px;
}

/* ==== BODY ==== */
body {
  background-color: #ffffff;
  font-family: "Open Sans", sans-serif;
  color: #333;
}

/* ==== FOOTER ==== */
#footer {
  background-color: #ffffff; /* full putih */
  border-top: 2px solid #e0e0e0;
  color: #444;
  padding: 20px 0;
  text-align: center;
}

#footer a {
  color: #007c7c;
  text-decoration: none;
}

#footer a:hover {
  text-decoration: underline;
}

/* ==== RESPONSIVE ==== */
@media (max-width: 768px) {
  #header {
    height: 120px;
  }
  #header img.logo {
    width: 80px;
    top: 15px;
    left: 20px;
  }
}