* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
}

/* Background utama */
body {
  background: url(../img/main-bg.jpg) no-repeat center center fixed;
  background-size: cover;
  position: relative;
}

/* Overlay gelap */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 0; /* tetap di belakang semua konten */
}

/* Wrapper seluruh halaman */
.page-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* Bagian konten utama */
#introduction {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1; /* Pastikan teks di atas background hitam */
  min-height: 100vh;
}

/* Styling teks utama */
.header-intro {
  font-size: 25px;
  color: honeydew;
  font-weight: lighter;
  font-family: Georgia, "Times New Roman", Times, serif;
  max-width: 90%;
  padding: 20px;
}

/* Responsive untuk layar kecil (mobile) */
@media only screen and (max-width: 450px) {
  #introduction {
    min-height: calc(100vh - 50px); /* Supaya tetap penuh walau ada footer */
  }

  .header-intro {
    font-size: 20px;
    width: 100%;
  }

}