body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background: #f5f7fa;
}

/* HEADER */
.hero {
  background: linear-gradient(145deg, #2a2558, #0ca0db);
  color: white;
  text-align: center;
  padding: 40px 20px;

  /* Header statis */
  position: static; /* pastikan tidak sticky/fixed */
  /*width: 1200px;*/
  top: 0;
}
.hero h1 {
  margin-bottom: 10px;
}

/* SECTION */
section {
  padding: 40px 20px;
  text-align: center;
   background: linear-gradient(135deg, #d4d8db, #85aaf0);
}

/* UNGGULAN */
.cards {

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  
}
.card {
   background: linear-gradient(135deg, #c0dfdc, #ffffff);
  /*background: white;*/
  border-radius: 15px;
  padding: 10px;
  width: 300px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);

}
.card h3 { color: #007bff; }

/* GALERI */
.galeri .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  /*background: linear-gradient(135deg, #e3f2fd, #b11010);*/
}

/* Tampilkan 1 kolom penuh di HP */
@media (max-width: 600px) {
  .galeri .grid {
    grid-template-columns: 1fr;
  }
}
.galeri img {
  width: 100%;
  border-radius: 10px;
}

/* INFO */
.info-item {
  background: linear-gradient(135deg, #f8e3e3, #ffffff);
  margin: 10px auto;
  padding: 20px;
  width: 90%;
  max-width: 600px;
  border-left: 5px solid #e09b1b;
  border-radius: 8px;
}

/* FOOTER */
/* footer {
  background: #007bff;
  color: white;
  text-align: center;
  padding: 15px;
  font-size: 14px;
} */

footer {
  background: #010c18;
  color: white;
  text-align: center;
  padding: 15px;
  font-size: 14px;
}

/* RESPONSIVE */
@media (max-width: 780px) {
  .card {
    width: 100%;
  }
}