body {
    padding-top: 116px; /* Sesuaikan agar konten tidak tertutup navbar */
  }
  
  .navbar-nav .nav-link {
      font-weight: bold;
      opacity:0.8;

      position: relative;
      color: white;
      transition: color 0.3s ease-in-out;
  }

  .navbar-nav .nav-item {
      margin-right: 25px; /* Sesuaikan jarak antar menu */
  }

  .navbar-nav .nav-link:hover {
    opacity:1;
  }

  .navbar-nav .nav-link::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 0;
      height: 3px;
      background-color: #fff; /* Warna border */
      transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
  }

  .navbar-nav .nav-link:hover::after {
      width: 50%; /* Sesuaikan panjang garis */
      left: 25%;
  }

  @media only screen and (max-width: 991px) {
    .navbar-nav .nav-link::after {
      left: 0;
    }

    .navbar-nav .nav-link:hover::after {
      width: 50%; /* Sesuaikan panjang garis */
      left: 0;
    }
  }

  .navbar-toggler {
      border-color: white; /* Ubah warna border */
  }

  .navbar-toggler-icon {
      filter: invert(100%); /* Mengubah warna ikon menjadi putih */
  }


  .navbar-brand img {
    height: 90px; /* Sesuaikan tinggi logo */
  }

  .custom-navbar {
      /*background-color: #5e0c12 !important; */ /* Warna custom */
      background-color: #977415 !important; /* Warna custom */
  }

  footer {
      background-color: #333333 !important; 
  }

  .text-tone-logo {
    color: #977415;
  }

  .bg-tone-logo {
    background-color: #977415;
  }

  .cursor-pointer {
    cursor:pointer;
  }

  .custom-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .custom-list li {
    padding:4px 0;
  }

  .custom-list li a {
    color: #fff; /* Warna default */
    opacity:0.7;
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    transition: 0.5s ease;
  }

  .custom-list li a:hover {
    opacity:1;
  }

  .custom-ratio-16-9 {
      aspect-ratio: 16 / 9;
  }

  .custom-ratio-3-1 {
      aspect-ratio: 3 / 1;
  }

  .custom-ratio-3-4 {
      aspect-ratio: 3 / 4;
  }

  .custom-ratio {
    width: 100%;
    height: auto;
    overflow: hidden; /* Mencegah elemen anak keluar dari div */
    background-color: #ddd; /* Opsional: memberi warna latar jika ada ruang kosong */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .img-contain {
    max-width: 100%;  
    max-height: 100%;
    object-fit: contain; /* Menyesuaikan gambar agar tetap utuh */
  }

  .carousel-indicators button {
    background-color: #333333 !important; /* Warna indikator (contoh: merah) */
  }
  
  .carousel-indicators .active {
      background-color: #977415 !important; /* Warna indikator aktif (contoh: biru) */
  }