@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600&display=swap');

body {
  background-color: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 15px;
}

.header {
  background-color:  #0ca2f8 ;
  color: #fff;
  text-align: center;
  padding: 20px;
}

.navbar {
  background-color:  #966919;
  border-bottom: 1px solid #ddd;
}

/* Navbar brand (logo & title) */
.navbar-brand {
  font-size: 1.5rem;
  font-weight: bold;
  color: white !important;
}

/* Navbar links */
.navbar-nav .nav-link {
  color: white !important;
  margin-right: 10px;
  font-weight: bold;
}

/* Change link color on hover */
.navbar-nav .nav-link:hover {
  color: #f8f9fa !important;
}

/* Active link styling */
.navbar-nav .nav-item.active .nav-link {
  color: #ffc107 !important;
}

/* Dropdown styling */
.navbar-nav .dropdown-menu {
  background-color: #000000; /* Black background */
  border: none;
}

.navbar-nav .dropdown-item {
  color: white !important;
}

.navbar-nav .dropdown-item:hover {
  background-color: #222222; /* Slightly lighter black */
  color: #f8f9fa !important;
}

/* Ensure dropdown is visible on hover (for desktop view) */
@media (min-width: 992px) {
  .navbar-nav .dropdown:hover .dropdown-menu {
    display: block;
  }
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  flex: 1;
}

.search-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 80px;
}

.search-input {
  width: 100%;
}

footer {
  background-color: #966919;
  color: #fff;
  text-align: center;
  padding: 10px;
  height: 50px; /* Atur ketinggian sesuai keinginan Anda */
}

/* _text.scss:11 */
.text-justify  { text-align: justify !important; }
.text-nowrap   { white-space: nowrap !important; }
.text-truncate { @include text-truncate; }

// Responsive alignment

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

.btn-primary {
    background-color: #C19A6B; /* Warna coklat keemasan */
    border: 1px solid #966919; /* Border coklat keemasan */
    color: #fff; /* Warna teks putih */
    padding: 8px 15px;
    border-radius: 4px;
    transition: background-color 0.3s ease; /* Transisi halus untuk efek hover */
}

.btn-primary:hover {
    background-color: #966919; /* Warna coklat keemasan yang lebih gelap */
}

/* Efek Overlay Loading */
#loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    z-index: 9999;
    display: none; /* Sembunyi secara default */
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(2px);
}

.spinner-kandaga {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #2563eb; /* Warna biru Kandaga */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}