/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

.style-a-footer:hover{
  text-decoration: underline !important;
}

/* Styling untuk tombol toggler */
.navbar-toggler {
    border-color: #353434 !important; /* Border berwarna merah */
}

.bg-navbar-up{
  background-color: red !important;
}

/* Styling untuk ikon hamburger di dalamnya */
.navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2853, 52, 52, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    /* Ubah warna garis menjadi merah (#dc3545) */
}

/* Efek hover untuk tombol toggler */
.navbar-toggler:hover {
    background-color: rgba(220, 53, 69, 0.1) !important; /* Latar belakang merah transparan saat hover */
}

/* CSS untuk efek tombol pada nav-link */
.navbar-nav .nav-item .nav-link {
    /* Styling default untuk text-danger */
    color: red; /* Warna merah Bootstrap */
    padding: 0.5rem 1rem; /* Padding standar nav-link Bootstrap */
    border-radius: 0.25rem; /* Border radius standar tombol Bootstrap */
    transition: all 0.3s ease; /* Transisi untuk efek halus */
    /* Pastikan border tidak terlihat secara default jika tidak diinginkan */
    border: 1px solid transparent; /* Border transparan default */
    margin: 0 0.25rem; /* Sedikit margin antar item */
    display: inline-block; /* Penting untuk agar padding dan border bekerja dengan baik */
}

/* Efek HOVER */
.navbar-nav .nav-item .nav-link:hover {
    background-color: red; /* Latar belakang merah */
    color: white !important; /* Teks putih */
    border-color: #dc3545; /* Border merah */
}

/* Efek untuk Halaman Aktif (active page) */
.navbar-nav .nav-item .nav-link.active {
    background-color: red; /* Latar belakang merah */
    color: white !important; /* Teks putih */
    border-color: #dc3545; /* Border merah */
}

/* Styling untuk dropdown-item agar tetap hitam */
.dropdown-menu .dropdown-item {
    color: #f8fcff !important; /* Warna teks gelap */
    transition: all 0.3s ease;
}

/* Tambahan: pastikan dropdown toggle juga punya efek hover merah */
.navbar-nav .nav-item.dropdown .nav-link.dropdown-toggle {
    color: #dc3545 !important; /* Default merah */
}

.navbar-nav .nav-item.dropdown .nav-link.dropdown-toggle:hover {
    background-color: red; /* Latar belakang merah saat hover */
    color: white !important; /* Teks putih saat hover */
    border-color: #dc3545; /* Border merah */
}

/* Override default Bootstrap active state untuk nav-link */
.navbar-light .navbar-nav .nav-link.active {
    color: white !important; /* Pastikan teks active berwarna putih */
}

/* Override default Bootstrap hover state untuk nav-link */
.navbar-light .navbar-nav .nav-link:hover {
    color: white !important; /* Pastikan teks hover berwarna putih */
}

.style-a-profil:hover {
    text-decoration: underline !important;
    color: #0149b6 !important;
}



/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}

.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

.carousel-item {
  height: auto; /* Biarkan tinggi menyesuaikan konten */
  min-height: 20rem; /* Berikan tinggi minimum */
  max-height:500px;
}

.carousel-item img {
  display: block;
  width: 100%;
  
}

/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}
/* rtl:end:ignore */


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
/* rtl:begin:remove */
.featurette-heading {
  letter-spacing: -.05rem;
}

/* rtl:end:remove */

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}