:root {
  --gemala-blue: #2185ec;
  --gemala-blue-hover: #1a6ac2;
  --gemala-green: #129f3b;
  --gemala-green-hover: #0d7a2c;
}

/* Override Bootstrap Primary (Blue) */
.text-primary {
  color: var(--gemala-blue) !important;
}
.bg-primary {
  background-color: var(--gemala-blue) !important;
}
.border-primary {
  border-color: var(--gemala-blue) !important;
}
.btn-primary {
  background-color: var(--gemala-blue);
  border-color: var(--gemala-blue);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--gemala-blue-hover) !important;
  border-color: var(--gemala-blue-hover) !important;
  color: #fff !important;
}
.btn-outline-primary {
  color: var(--gemala-blue);
  border-color: var(--gemala-blue);
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
  background-color: var(--gemala-blue) !important;
  border-color: var(--gemala-blue) !important;
  color: #fff !important;
}

/* Custom Green Utilities */
.text-gemala-green {
    color: var(--gemala-green) !important;
}
.bg-gemala-green {
    background-color: var(--gemala-green) !important;
}
.btn-gemala-green {
  background-color: var(--gemala-green);
  border-color: var(--gemala-green);
  color: #fff;
}
.btn-gemala-green:hover, .btn-gemala-green:focus, .btn-gemala-green:active {
  background-color: var(--gemala-green-hover) !important;
  border-color: var(--gemala-green-hover) !important;
  color: #fff !important;
}
.btn-outline-gemala-green {
  color: var(--gemala-green);
  border-color: var(--gemala-green);
}
.btn-outline-gemala-green:hover, .btn-outline-gemala-green:focus, .btn-outline-gemala-green:active {
  background-color: var(--gemala-green) !important;
  border-color: var(--gemala-green) !important;
  color: #fff !important;
}

/* Accordion overriding for Bootstrap */
.accordion-button:not(.collapsed) {
    color: var(--gemala-blue);
    background-color: rgba(33, 133, 236, 0.1);
}
.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(33, 133, 236, 0.25);
}

/* Layanan card hover effect */
.layanan-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
}