/* Break Point Ukuran Android */
@media (max-width: 320px) {
  .footer-bottom {
    font-size: 8px;
  }

  .jumbotron.landing-page h1 {
    font-size: 16px;
  }

  .jumbotron.landing-page h3 {
    font-size: 14px;
  }
}

/* Break Point Ukuran Smartphones */
@media (max-width: 670px) {
  .flex-brands>div {
    width: 100px;
    margin: 10px;
    text-align: center;
  }

  p.pKiri.pTampil,
  p.pKanan.pTampil,
  h5.pKiri.pb-2.text-light.col.pTampil,
  h5.pKanan.pb-2.text-light.col.pTampil,
  footer,
  button.navbar-toggler,
  .footer-bottom,
  .card-text,
  .descproduk,
  .jumbotron.contact img,
  .about-profile h2 {
    font-size: 12px;
  }

  /* Landing Page index */
  .jumbotron.landing-page h1 {
    font-size: 18px;
  }

  .jumbotron.landing-page h3 {
    font-size: 14px;
  }

  .jumbotron.landing-page p {
    font-size: 12px;
  }


  .video {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
  }

  .video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* Break Point Ukuran Tablet */
@media (max-width: 992px) {
  .navbar-collapse {
    background-color: #FFC107;
  }
}

/* Break Point Ukuran Deskstop */
@media (min-width: 992px) {
  .nav-link:hover::after {
    content: "";
    display: block;
    border-bottom: 4px solid white;
    width: 50%;
    margin: auto;
    padding-bottom: 5px;
    margin-bottom: -9px;
  }

  .about-profile {
    padding-top: 18rem;
    height: 100%;
    width: 100%;
  }

  .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}

/* RESPONSIVE BAGIAN KELEBIHAN */
/* CSS untuk ukuran layar lebih kecil dari 576px (seperti smartphone) */
@media (max-width: 575.98px) {

  /* Atur lebar gambar pada jumbotron */
  .jumbotron img {
    max-width: 100%;
    height: auto;
  }

  /* Atur lebar navbar brand */
  .navbar-brand img {
    width: 30px;
    /* Ubah sesuai kebutuhan */
    height: auto;
  }

  /* Atur ukuran teks pada navbar */
  .navbar-nav .nav-link {
    font-size: 14px;
    /* Ubah sesuai kebutuhan */
  }

  /* Atur padding pada bagian footer */
  footer .container-fluid {
    padding: 20px;
  }
}

/* CSS untuk ukuran layar antara 576px dan 767.98px (seperti tablet dalam orientasi potrait) */
@media (min-width: 576px) and (max-width: 767.98px) {
  /* Tambahkan aturan CSS tambahan di sini sesuai kebutuhan */
}

/* CSS untuk ukuran layar antara 768px dan 991.98px (seperti tablet dalam orientasi landscape) */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Tambahkan aturan CSS tambahan di sini sesuai kebutuhan */
}

/* CSS untuk ukuran layar lebih besar dari 992px (seperti desktop) */
@media (min-width: 992px) {
  /* Tambahkan aturan CSS tambahan di sini sesuai kebutuhan */
}

/* BAGIAN BRAND RESPONSIVE */

@media screen and (max-width: 1200px) {
  .flex-brands div {
    flex: 1 1 32%;
    /* Untuk layar dengan lebar maksimum 1200px, mengatur flex-basis menjadi sekitar 32% agar terdapat 3 item per baris */
  }
}