body {
    background-color: #fff; /* bukan putih */
}
/* Pastikan navbar selalu di atas elemen lain */
.navbar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999 !important;
}

section.container.my-5 {
    margin-top: 1.5rem !important; /* jarak atas lebih kecil */
    margin-bottom: 1.5rem !important; /* jarak bawah lebih kecil */
}
.program-section {
    margin-top: 2rem !important; /* default Bootstrap 3rem */
}
.program-section {
    margin-top: 0 !important;
}
.hero-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.hero-section {
    margin-top: -60px !important; /* sesuaikan tinggi navbar, biasanya 56–70px */
}

footer a {
  color: #fff !important;        /* putih */
  text-decoration: none !important; /* hilangkan garis bawah */
}

footer a:hover {
  color: #ddd !important; /* sedikit abu saat hover */
  text-decoration: none;
}

footer p, footer span {
  color: #fff !important; /* pastikan teks biasa juga putih */
}


/* Warna dan ukuran teks adaptif */
.responsive-heading {
  color: #006400; /* hijau gelap */
  font-size: 1.6rem;     /* ukuran default di desktop */
  line-height: 1.2;
  font-weight: 700;
  white-space: normal;   /* biar teks bisa turun baris */
}
.responsive-heading {
  display: block;
  color: #004d00; /* hijau gelap */
  font-weight: bold;
  text-align: left;
  line-height: 1.2;
  font-size: 18px; /* default ukuran di desktop */
}

/* Tablet */
@media (max-width: 992px) {
  .responsive-heading {
    font-size: 16px;
  }
}

/* HP kecil */
@media (max-width: 576px) {
  .responsive-heading {
    font-size: 14px;
  }
}


.top-line {
    width: 100%;
    height: 4px;
    background-color: green;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100; /* agar di atas header */
}

.hero-section {
    background-size: cover;
    background-position: top center; /* ✅ fokuskan bagian atas gambar */
    background-repeat: no-repeat;
    height: 80vh; /* atau ubah sesuai tampilan */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 100px;
    padding-top: 80px; /* ✅ geser konten hero sedikit ke bawah agar tidak tertutup header */
    white-space: normal;
}

.hero-section h2 br {
  display: block;
  content: "";
  margin-top: 0.5rem; /* jarak vertikal opsional */
}

.subjudul {
   text-align: center;
   color: black;
   display: flex;
   font-size: 18px;
   justify-content: center;
}

.text-maroon { color: #6A0D0D; }
.text-gold { color: #FFD700; }
.btn-dark-gray { background-color: #444; color: white; }
.btn-dark-gray:hover { background-color: #666; color: #FFD700; }
.btn-topup {
  bottom: 20px;
  right: 20px;

  color: #FFD700;
  border: none;
  border-radius: 50%;

  font-size: 18px;
  z-index: 999;
}
.btn-topup:hover { background-color: #214C3B; color: white; }
.hero-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}
.overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
}

.button-56 {
  align-items: center;
  background-color: #fee6e3;
  border: 2px solid #111;
  border-radius: 8px;
  box-sizing: border-box;
  color: #111;
  cursor: pointer;
  display: flex;
  font-family: Inter,sans-serif;
  font-size: 16px;
  height: 48px;
  justify-content: center;
  line-height: 24px;
  max-width: 100%;
  padding: 0 25px;
  position: relative;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;

}

.button-71 {
  background-color: #FFBB00;
  border: 0;
  border-radius: 56px;
  color: #111;
  cursor: pointer;
  display: inline-block;
  font-family: system-ui,-apple-system,system-ui,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif;
  font-size: 18px;
  font-weight: 600;
  outline: 0;
  padding: 16px 21px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: all .3s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-71:before {
  background-color: initial;
  background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 100%);
  border-radius: 125px;
  content: "";
  height: 50%;
  left: 4%;
  opacity: .5;
  position: absolute;
  top: 0;
  transition: all .3s;
  width: 92%;
}

.button-71:hover {
  box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px;
  transform: scale(1.05);
}
/* Submenu dropdown positioning */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

/* Agar tampil smooth dan tidak tertutup */
.dropdown-menu.show {
  display: block;
}

@media (min-width: 768px) {
  .button-71 {
    padding: 16px 48px;
  }
}
.footer a,
.footer a:link,
.footer a:visited{
  text-decoration: none;/* hilangkan garis bawah */
  color: #ffffff;}        /* ubah warna jadi putih */

.footer a:hover,
.footer a:active {
  color: #ffcc00;        /* opsional: warna saat hover */
}
/* Footer umum */
.footer {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* Tambahkan jarak antar elemen di footer */
.footer p,
.footer .social-icons,
.footer button,
.footer .btn {
  margin-bottom: 0.8rem;
}
.dropdown-submenu {
            position: relative;
        }
        .dropdown-submenu .dropdown-menu {
            top: 0;
            left: 100%;
            margin-left: 0.1rem;
            margin-right: 0.1rem;
            display: none;
            position: absolute;
        }
        .dropdown-submenu:hover > .dropdown-menu {
            display: block;
        }
.dropdown-submenu > a::after {
    content: ""; /* tanda panah kanan */
    float: right;
    margin-left: 5px;
    font-size: 0.7rem;
    transform: translateY(2px);
}
.dropdown-submenu:hover > a::after {
    content: ""; /* berubah jadi panah bawah */}
    
        @media (max-width: 991px) {
            .dropdown-submenu .dropdown-menu {
                position: static;
                margin-left: 1rem;
            }
            .dropdown-submenu > a::after {
                content: "";
            }


        }

/* Di tampilan mobile (layar ≤ 576px) beri jarak ekstra */
@media (max-width: 576px) {
  footer p {
    margin-bottom: 1.2rem; /* jarak teks ke bawah */
  }

  footer .btn,
  footer button {
    margin-bottom: 1.2rem; /* jarak tombol ke icon */
  }

  footer .social-icons {
    margin-top: 1rem;
  }
}


/* carousel */

 .bbb_viewed {
     padding-top: 51px;
     padding-bottom: 60px;
     background: #eff6fa
 }

 .bbb_main_container{
         background-color: #fff;
    padding: 11px;
 }

 .bbb_viewed_title_container {
     border-bottom: solid 1px #dadada
 }

 .bbb_viewed_title {
         margin-bottom: 16px;
    margin-top: 8px;

 }

 .bbb_viewed_nav_container {
     position: absolute;
     right: -5px;
     bottom: 14px
 }

 .bbb_viewed_nav {
     display: inline-block;
     cursor: pointer
 }

 .bbb_viewed_nav i {
     color: #dadada;
     font-size: 18px;
     padding: 5px;
     -webkit-transition: all 200ms ease;
     -moz-transition: all 200ms ease;
     -ms-transition: all 200ms ease;
     -o-transition: all 200ms ease;
     transition: all 200ms ease
 }

 .bbb_viewed_nav:hover i {
     color: #606264
 }

 .bbb_viewed_prev {
     margin-right: 15px
 }

 .bbb_viewed_slider_container {
     padding-top: 13px;
 }

 .bbb_viewed_item {
     width: 100%;
     background: #FFFFFF;
     border-radius: 2px;
     padding-top: 25px;
     padding-bottom: 25px;
     padding-left: 30px;
     padding-right: 30px
 }

 .bbb_viewed_image {
         width: 150px;
    height: 150px;
 }

 .bbb_viewed_image img {
     display: block;
     max-width: 100%
 }

 .bbb_viewed_content {
     width: 100%;
     margin-top: 25px
 }

 .bbb_viewed_price {
     font-size: 16px;
     color: #000000;
     font-weight: 500
 }

 .bbb_viewed_item.discount .bbb_viewed_price {
     color: #df3b3b
 }

 .bbb_viewed_price span {
     position: relative;
     font-size: 12px;
     font-weight: 400;
     color: rgba(0, 0, 0, 0.6);
     margin-left: 8px
 }

 .bbb_viewed_price span::after {
     display: block;
     position: absolute;
     top: 6px;
     left: -2px;
     width: calc(100% + 4px);
     height: 1px;
     background: #8d8d8d;
     content: ''
 }

 .bbb_viewed_name {
     margin-top: 3px
 }

 .bbb_viewed_name a {
     font-size: 14px;
     color: #000000;
     -webkit-transition: all 200ms ease;
     -moz-transition: all 200ms ease;
     -ms-transition: all 200ms ease;
     -o-transition: all 200ms ease;
     transition: all 200ms ease
 }

 .bbb_viewed_name a:hover {
     color: #0e8ce4
 }

 .item_marks {
     position: absolute;
     top: 18px;
     left: 18px
 }

 .item_mark {
     display: none;
     width: 36px;
     height: 36px;
     border-radius: 50%;
     color: #FFFFFF;
     font-size: 10px;
     font-weight: 500;
     line-height: 36px;
     text-align: center
 }

 .item_discount { 
     background: #df3b3b;
     margin-right: 5px
 }

 .item_new {
     background: #0e8ce4
 }

 .bbb_viewed_item.discount .item_discount {
     display: inline-block
 }

 .bbb_viewed_item.is_new .item_new {
     display: inline-block
 }