body {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
  
  font-family: 'Roboto', sans-serif;
  font-size: 16px; /* Ukuran font dasar yang mudah dibaca */
  line-height: 1.6; /* Memberikan ruang yang cukup antara baris teks */
  color: #333; /* Warna teks yang kontras dengan latar belakang */    
}

.text-success {
    --bs-text-opacity: 1;
    color: #198754 !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700; /* Menggunakan font tebal untuk judul */
    color:  #198754 !important; /* Warna yang konsisten dengan tema */
}

.carousel
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700; /* Menggunakan font tebal untuk judul */
    color:  #ffffff !important; /* Warna putih pada carousel */
}


/* heading yang berada dalam .chatbot-message-content */
.chatbot-message-content h1,
.chatbot-message-content h2,
.chatbot-message-content h3,
.chatbot-message-content h4,
.chatbot-message-content h5,
.chatbot-message-content h6 {
  color: #0ff454 !important;
}

.btn-outline-success {
    border-color: #15d043 !important;
    border-width: 2px !important;
}

/* Opsional: Jika ingin border tetap hijau saat hover/focus/active */
.btn-outline-success:hover,
.btn-outline-success.focus,
.btn-outline-success:focus,
.btn-outline-success.active,
.btn-outline-success:active {
    border-color: #15d043 !important;
    box-shadow: 0 0 0 0.2rem rgba(21, 208, 67, 0.25) !important;
}

.galery h1, .galery h2, .galery h3, .galery h4, .galery h5, .galery h6,
.hero-section h1, .hero-section h2, .hero-section h3, .hero-section h4, .hero-section h5, .hero-section h6 {
  /* aturan Anda */
  color: #ffffff !important;
}

p {
    margin-bottom: 1em; /* Memberikan jarak antar paragraf */
}

a {
    color: #0c4b1f; /* Warna link yang konsisten dengan tema */
    text-decoration: none; /* Menghilangkan garis bawah pada link */
}

.text-gradient {
    background: linear-gradient(90deg, #00ff18, #ffd60d);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.garis-gradien {
    content: "";
    position: absolute;
    bottom: -8px;   /* sesuaikan jarak dari teks */
    left: 0;
    width: 144px;
    height: 2px;
    background: linear-gradient(90deg, #009b48, #f2c136);
}

    /* Hero Section */
.hero-section {
  position: relative;
  background-image: url('https://picsum.photos/1200/250');
  background-size: cover;
  background-position: center;
  height: 250px; /* Adjust height as needed */
}

.hero-sectionXXXX::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right top, 
    rgba(24, 212, 65, 0.904) ,     /* warna 1 */
    rgba(0, 0, 0, 0.716),     /* warna 2 */
    rgba(24, 215, 69, 0.929)      /* warna 3 */
  );
  /*opacity: 0.9; /* opasitas seragam */
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
/* background-color: rgba(17, 172, 69, 0.25); /* Adjust overlay color and opacity */
  background: linear-gradient(
    to right top, 
    rgba(24, 212, 65, 0.904) ,     /* warna 1 */
    rgba(0, 0, 0, 0.716),     /* warna 2 */
    rgba(24, 215, 69, 0.929)      /* warna 3 */
  );
  /* opacity: 0.9; /* opasitas seragam */
  /*background-image: linear-gradient(to right top, #163917, #1a511e, #1d6a25, #1e842c, #1d9f33, #139e3d, #099c46, #009b4e, #007d4f, #005f48, #0f4139, #1b2524);*/
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-text {
  color: white;
  font-size: 2rem; /* Adjust font size as needed */
  font-weight: bold;
}

.hover-anime{
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-anime:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

.disabled {
  opacity: 0.5;           /* Tampak kabur */
  pointer-events: none;   /* Nonaktifkan klik */
  cursor: not-allowed;    /* Ikon cursor "dilarang" */
  color: #6c757d;         /* Opsional: ganti warna ke abu-abu */
}

@media (max-width: 768px) {
  .hero-section {
    height: 280px;
  }
  .hero-section .container {
    padding-top: 5rem;
    padding-bottom: 4rem;
  }
}