/* styles.css */
h1 {
    font-family: 'Jost', sans-serif !important;
    text-align: left !important;
}

/* Navbar */
.navbar {
    transition: background-color 0.3s ease; /* Transisi halus saat warna berubah */
}

.navbar:hover {
    background-color: #db4d10; /* Warna latar belakang baru saat hover */
}

.navbar .nav-link {
    color: #000; /* Warna teks default */
}

.navbar .nav-link:hover {
    color: #000; /* Warna teks saat hover */
}

.navbar-nav {
    position: relative; /* Atur posisi relatif untuk menghindari masalah */
}

.navbar-logo {
    height: 80px; /* Tinggi gambar logo */
    width: auto;  /* Lebar otomatis agar sesuai rasio aspek */
    margin: 0; /* Atur margin sesuai kebutuhan */
}

.sticky-top {
    z-index: 1030; /* Pastikan navbar selalu di atas elemen lainnya */
}

.navbar.shadow {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Menambahkan bayangan */
}

/* Dropdown */
.dropdown-menu {
    display: none; /* Sembunyikan dropdown secara default */
    background-color: #f8f9fa; /* Warna latar belakang dropdown */
    border: none; /* Menghilangkan border default */
    border-top: 2px solid #007bff; /* Border hanya pada bagian atas */
    border-radius: 0; /* Sudut kaku */
    transition: all 0.3s ease; /* Transisi halus */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Bayangan */
}

.nav-item:hover .dropdown-menu {
    display: block; /* Tampilkan dropdown saat mouse hover pada nav-item */
}

.dropdown-item {
    padding: 0.5rem 1rem; /* Padding untuk item */
    color: #212529; /* Warna teks item */
    transition: background-color 0.3s ease, color 0.3s ease; /* Transisi untuk efek hover */
}

.dropdown-item:hover {
    background-color: #007bff; /* Warna latar belakang saat hover */
    color: white; /* Warna teks saat hover */
}

.dropdown-item:focus {
    outline: none; /* Menghilangkan outline saat item dropdown di-focus */
    background-color: #0056b3; /* Warna latar belakang saat focus */
    color: white; /* Warna teks saat fokus */
}

/* Card */
.card {
    transition: transform 0.2s; /* Efek transisi */
    border: 1px solid #dee2e6; /* Memberikan border pada card */
    border-radius: 8px; /* Membuat sudut card lebih halus */
}

.card:hover {
    transform: scale(1.05); /* Membesarkan kartu saat hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Menambahkan bayangan saat hover */
}

.no-hover:hover {
    transform: none; /* Nonaktifkan efek transformasi */
    box-shadow: none; /* Nonaktifkan bayangan saat hover */
}

.title-hover:hover {
    color: blue; /* Ganti warna teks saat hover */
    transition: color 0.3s ease; /* Transisi halus saat warna berubah */
}

/* Container */
.custom-container {
    max-width: 75%; /* Atur lebar kontainer menjadi 75% */
    margin: auto; /* Pusatkan kontainer */
}

/* Tabel */
.table {
    border-collapse: collapse; /* Menghilangkan spasi antara sel tabel */
    width: 100%; /* Memastikan tabel mengisi lebar kontainer */
}

.table th, .table td {
    padding: 15px; /* Memberikan ruang di dalam sel tabel */
    border: none; /* Menghapus batas default untuk tampilan lebih bersih */
}

.table th {
    background-color: #f8f9fa; /* Warna latar belakang header tabel */
    color: #333; /* Warna teks header tabel */
    font-weight: bold; /* Membuat teks header lebih tebal */
}

.table tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.1); /* Warna saat hover pada baris tabel */
}

/* Alert */
.alert {
    border-radius: 8px; /* Membuat sudut alert lebih halus */
}

/* Input Group */
.input-group {
    max-width: 600px; /* Membatasi lebar input pencarian */
    margin: 0 auto; /* Menengahkan input pencarian */
}

/* Margin Utility Classes */
.mt-1 {
    margin-top: 0.25rem; /* Margin atas untuk konten berita */
}

.mb-0 {
    margin-bottom: 0; /* Menghilangkan margin bawah untuk teks konten */
}

/* Hover Effects */
.text-hover-blue {
    transition: color 0.3s ease; /* Menambahkan efek transisi */
}

.text-hover-blue:hover {
    color: blue; /* Warna saat di-hover */
}
.card-text-custom {
    font-size: inherit;
    color: inherit;
    text-align: inherit;
    font-size: 0.9rem !important;
    color: #555 !important;
    text-align: justify !important;
}
