/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #f1f5f4; /* Background color for the entire website, including individual sections */
  --default-color: #827f76; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #2d465e; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #283891; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
  --second-color: #c4942f;
}
/* Tombol outline sesuai warna kustom */
.btn-custom-outline {
    --bs-btn-color: var(--accent-color);
    --bs-btn-border-color: var(--accent-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--accent-color);
    --bs-btn-hover-border-color: var(--accent-color);
    --bs-btn-active-bg: var(--accent-color);
    --bs-btn-active-border-color: var(--accent-color);
    --bs-btn-disabled-color: var(--accent-color);
    --bs-btn-disabled-border-color: var(--accent-color);
}
.fw-bold{
  color: #fff !important;
}
.fw-bold-black {
  font-weight: bold;
  color: #000; /* atau gunakan warna lain yang kamu mau */
}

.table-head {
    background-color: var(--accent-color) !important;
    color: var(--contrast-color) !important; 
}

.btn-primary {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: var(--contrast-color) !important;
}

.btn-primary:hover {
  background-color: var(--second-color) !important;
  border-color: var(--second-color) !important;
  color: var(--contrast-color) !important;
}

/* Pagination */
.page-link {
  color: var(--accent-color);
  border-color: #ddd;
}

.page-link:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-color: var(--accent-color);
}

.page-item.active .page-link {
  background-color: var(--second-color);
  border-color: var(--second-color);
  color: var(--contrast-color);
}
.bg-primary
{
    background-color: var(--accent-color) !important;
      color: var(--contrast-color) !important;


}