body {
    background-color: #f5f7fa;
    font-family: 'Segoe UI', sans-serif;
}

.navbar {
    box-shadow: 0 4px 10px rgba(0,0,0,.1);
}

.hero {
    background: linear-gradient(
        rgba(0,100,60,.75),
        rgba(0,100,60,.75)
    ), url('assets/img/masjid.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 80px 20px;
}

.hero {
  background: linear-gradient(135deg, #198754, #157347);
  color: white;
  padding: 100px 0;
}

.banner {
  position: relative;
  height: 85vh;
  background: url('../img/masjid.jpg') center center / cover no-repeat;
  display: flex;
  align-items: center;
}

.banner .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.banner .content {
  position: relative;
  z-index: 2;
  color: #fff;
}

.banner {
  background-attachment: fixed;
}

.banner {
  height: 70vh;
}

.banner .overlay {
  background: linear-gradient(
    rgba(0,0,0,.6),
    rgba(0,0,0,.4)
  );
}

.section-title {
    font-weight: 600;
    border-left: 5px solid #198754;
    padding-left: 10px;
    margin-bottom: 15px;
}

.card {
    border: none;
    border-radius: 12px;
}

.card-header {
    border-radius: 12px 12px 0 0;
}

.shadow-soft {
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

.list-group-item {
    border: none;
    border-bottom: 1px solid #eee;
}

footer {
    background: #1e1e1e;
}