body {
    transition: background-color 0.3s, color 0.3s;
  }
  nav{
    z-index: 1000; /* Memastikan navbar berada di atas konten */

  }


  

.clock {
  font-size: 2rem;
  font-weight: bold;
  font-family: Arial, sans-serif;
  text-align: center;
}
.info {
  font-size: 1.2rem;
  color: #555;
  font-weight: bold;
  font-family: Arial, sans-serif;
  text-align: center;
}

  .dark-mode {
    background-color: #121212;
    color: white;
  }
  .navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.75);
  }
  .navbar-dark .navbar-nav .nav-link:hover {
    color: white;
  }
  .card {
    background-color: #1f1f1f;
    border: 1px solid #333;
  }
  .card-title, .card-text {
    color: white;
  }
  footer {
    background-color: #181818;
    color: white;
  }

  /* Custom styles for the logo section */
  .logo-section {
    padding: 50px 0;
    background-color: #f8f9fa;
    overflow: hidden;
  }

  .logo-container {
    display: flex;
    animation: marquee 20s linear infinite;
    justify-content: center;
    flex-wrap: nowrap;
    width: 100%;
  }
  .logo-container img {
          width: 100%;
          max-width: 200px;
          height: auto;
          object-fit: contain;
          margin: 50px;
      }

  .logo {
    max-width: 200px;
    margin: 15px;
    transition: transform 0.3s ease;
  }

  .logo:hover {
    transform: scale(1.1);
  }

  @keyframes marquee {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }


  }

table.dataTable tbody td {
  white-space: normal;
  word-wrap: break-word;
}

.nav-item.dropdown:hover .dropdown-menu {
  display: block;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}


  .custom-sport-btn {
    background-color: hsl(34, 100%, 59%);
    color: white;
    border: none;
  }
  .custom-sport-btn:hover {
    background-color: hsl(34, 100%, 49%);
    color: white;
  }
  .custom-sport-btn {
    background-color: hsl(34, 100%, 59%);
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    margin: 5px;
  }

  .custom-sport-btn:hover {
    background-color: hsl(34, 100%, 49%);
  }

  /* Optional: make buttons a little bit larger on mobile */
  @media (max-width: 576px) {
    .custom-sport-btn {
      background-color: hsl(34, 100%, 59%);
      font-size: 14px;
      padding: 8px 16px;
    }
  }
/* Atur ukuran carousel untuk tampilan desktop */
#promoCarousel {
width: 100%; /* Secara default, carousel mengambil lebar penuh */
}

/* Menyesuaikan carousel di desktop (50% dari ukuran penuh) */
@media (min-width: 992px) {
#promoCarousel {
  width: 70%;  /* Atur carousel agar hanya 50% dari lebar layar di desktop */
  margin: 0 auto; /* Tengah-kan carousel di layar */
}
}

/* Pastikan tampilan di mobile tetap penuh */
@media (max-width: 991px) {
#promoCarousel {
  width: 100%; /* Pada mobile, carousel tetap mengambil lebar penuh */
}
}

  .carousel-inner .carousel-item img {
    max-height: 600px;
    object-fit: cover;
    width: 100%;
  }

  /* Adjust table for small devices */
  @media (max-width: 768px) {
    .table {
      font-size: 12px;
    }
  }
  /* Atur kontainer logo untuk gulir horizontal */
.logo-container {
display: flex;
gap: 10px; /* Jarak antar logo */
flex-wrap: nowrap;
}
.table {
  width: 100%;
  table-layout: auto; /* Membiarkan tabel menyesuaikan dengan lebar kontainer */
}


/* Logo untuk disusun dalam baris horizontal */
.logo {
flex-shrink: 0; /* Pastikan logo tidak menyusut */
width: 150px; /* Ukuran tetap logo */
height: auto; /* Menjaga rasio aspek logo */
}

/* Styling untuk responsif di mobile */
@media (max-width: 768px) {
.logo-container {
  display: flex;
  flex-wrap: nowrap; /* Pastikan logo tetap dalam satu baris */
}

.logo {
  width: 100vw; /* Setiap logo akan mengambil lebar layar penuh (1 per 1) */
  max-width: 150px; /* Ukuran maksimum logo */
}
}
table th[colspan="5"] {
background-color: #343a40;
color: hsl(34, 100%, 59%);
font-size: 18px;
text-transform: uppercase;
}


table thead tr {
border-top: 2px solid #ddd;
}

table tbody tr:nth-child(even) {
background-color: #222;
}

table tbody tr:hover {
background-color: #444;
}

/* Gaya untuk Dark Mode */
body.dark-mode {
background-color: #121212; /* Warna latar belakang gelap */
color: white;              /* Warna teks terang */
}