:root {
  --bg_color: #e8e8e8;
  --white_utama: #ffffff;
  --black_utama: #000000;
  --grey_font: #6d6b6b;
  --bg_form_input: #fafafa;
  --grey_line: #dcdcdc;
  --fwbold: 700;
  --fwextrabold: 800;
  --fwsemibold: 600;
  --fwmedium: 500;
  --fwregular: 400;
  --fwlight: 300;
}

.body {
  font-family: "Poppins", sans-serif;
  background-color: var(--bg_color);
}

.nama-logo {
  font-weight: var(--fwextrabold);
  color: var(--grey_font);
  font-size: 20px;
  margin: 0;
}

.sub-judul {
  font-weight: var(--fwbold);
  color: var(--grey_font);
  font-size: 28px;
  margin: 0;
}

.paragraph-font {
  font-weight: var(--fwregular);
  color: var(--grey_font);
  font-size: 16px;
  margin: 0;
}

.btn-satu {
  padding: 6px 12px 6px 12px;
  background: var(--bg_color);
  color: var(--black_utama);
  font-size: 16px;
  font-weight: var(--fwregular);
  border-radius: 5px;
}

.btn-dua {
  padding: 16px 198px 16px 198px;
  width: 712px;
  background: var(--black_utama);
  color: var(--white_utama);
  font-size: 16px;
  font-weight: var(--fwbold);
  border-radius: 5px;
}

.btn-primary {
  --bs-btn-bg: var(--black_utama);
  --bs-btn-hover-bg: maroon;
  font-weight: var(--fwregular);
  font-size: 16px;
  height: 50px;
}

/* navbar */

.warna-navbar {
  background: var(--white_utama);
}

/* hover menu navbar  */
.navbar-nav .nav-item a:hover {
  color: var(--grey_font);
  transition: all 0.3s ease;
  font-weight: var(--fwbold);
}

.navbar-nav .nav-item a {
  color: var(--grey_font);
  transition: all 0.3s ease;
}
/* hover menu navbar */

.navbar-nav .nav-item .active {
  font-weight: var(--fwbold);
  color: var(--grey_font);
}

/* navbar */

.footer {
  margin-top: 30px;
}

.copyright {
  opacity: 60%;
}

/* page home */
.hero {
  padding-bottom: 30px;
}
/* page home */

/* about */

.about-box .box img {
  width: 600px;
}

.about-box .box p {
  width: 580px;
}

/* ================================= */
@media (max-width: 1398px) {
  .about-box .box img {
    width: 480px;
  }

  .about-box .box p {
    width: 520px;
  }
}

/* ================================= */
@media (max-width: 1199px) {
  .about-box .box img {
    width: 420px;
  }

  .about-box .box p {
    width: 400px;
  }

  .about-box .box span {
    font-size: 25px;
  }
}

/* ================================= */
@media (max-width: 991px) {
  .about-box .box img {
    width: 450px;
  }

  .about-box .box p {
    width: 400px;
  }

  .about-box .box span {
    font-size: 20px;
  }
}

/* ================================= */
@media (max-width: 834px) {
  .about-box .box img {
    width: 350px;
  }

  .about-box .box p {
    width: 340px;
    font-size: 14px;
  }

  .about-box .box span {
    font-size: 18px;
  }
}

/* ================================= */
@media (max-width: 820px) {
  .about-box .box img {
    width: 350px;
  }

  .about-box .box p {
    width: 325px;
    font-size: 14px;
  }

  .about-box .box span {
    font-size: 18px;
  }
}

/* ================================= */
@media (max-width: 768px) {
  .about-box .box img {
    width: 300px;
  }

  .about-box .box p {
    width: 330px;
    font-size: 14px;
  }

  .about-box .box span {
    font-size: 18px;
  }
}

/* ================================= */
@media (max-width: 475px) {
  .about-box .box img {
    width: 360px;
  }

  .about-box .box p {
    width: 380px;
    font-size: 14px;
  }

  .about-box .box span {
    font-size: 18px;
  }
}

/* ==============cek ulang=================== */
@media (max-width: 428px) {
  .about-box .box img {
    width: 308px;
  }

  .about-box .box p {
    width: 320px;
    font-size: 14px;
  }

  .about-box .box span {
    font-size: 18px;
  }
}

/* ================================= */
@media (max-width: 390px) {
  .about-box .box img {
    width: 280px;
  }

  .about-box .box p {
    width: 280px;
    font-size: 14px;
    text-align: center;
  }

  .about-box .box span {
    font-size: 18px;
  }
}
/* about */

/* contact - form */

.warna-form {
  background-color: var(--white_utama);
}

.custom-input {
  background-color: var(--bg_form_input) !important;
}

/* Placeholder default (pudar) */
.custom-input::placeholder {
  color: var(--grey_font); /* abu-abu Bootstrap */
  opacity: 0.4; /* bikin pudar */
}

/* Saat focus, placeholder makin samar */
.custom-input:focus::placeholder {
  opacity: 0.2;
}

/* Teks yang diketik tetap 100% jelas */
.custom-input {
  color: var(--grey_font);
}

.form-text {
  font-weight: var(--fwlight);
  font-size: 12px;
}

/* contact - form */