/* Ganti warna latar belakang dan warna teks default */
body {
  background-color: #f2f2f2;
  color: #333;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* Atur Header Image */
header img {
  max-width: 200px;

}

/* Atur lebar maksimum konten dan pusatkan secara horizontal */
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
  
}

/* Atur tampilan header */
header {
  background-color: #333;
  padding: 20px;
  color: #fff;
  text-align: center; /* Menyatukan elemen tengah */
}

header img {
  display: block; /* Mengubah logo menjadi elemen blok */
  margin: 0 auto; /* Pusatkan logo secara horizontal */
}

/* Atur tampilan tautan navigasi */
nav {
  text-align: center; /* Pusatkan tautan navigasi secara horizontal */
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline-block; /* Mengatur tautan navigasi menjadi inline-block */
}

nav ul li {
  display: inline;
  margin-right: 10px;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
}
nav ul li a:hover {
  color: red; /* Mengubah warna menjadi merah saat dihover */
}

/* Atur tampilan layanan */
section#services ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

section#services li {
  display: inline-block;
  text-align: center;
  width: 30%;
  border: 1px solid black;
  padding: 10px;
  margin: 5px;
}

section#services li img {
  width: 100%; /* Mengatur lebar gambar menjadi 100% */
  height: auto; /* Mengatur tinggi gambar menjadi otomatis */
}
/* Responsif ketika lebar jendela atau halaman lebih kecil */
@media (max-width: 600px) {
  section#services ul {
    flex-direction: column; /* Mengubah tata letak menjadi tumpukan secara vertikal */
  }

  section#services li {
    width: 100%;
    margin-bottom: 5px;
    display: block;
  }
}
.btn {
	display: inline-block;
  background-color: #70a1ff;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 3px;
}
.btn:hover {
	background-color: #4d89ff;
}

/* Atur tampilan setiap bagian */
section {
  padding: 20px;
  margin-bottom: 20px;
  background-color: #fff;
}

/* Atur tampilan judul setiap bagian */
section h2 {
  margin-top: 0;
  text-align: center;
}

/* Atur tampilan proyek */
.project {
  margin-bottom: 10px;
}

/* Atur tampilan footer */
footer {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}