body {
    font-family: 'Arial', sans-serif;
    background-color: #f8f9fa;
}


.judul-halaman {
        color:darkgreen !important;
    }

.tombol-tambah {
        background-color:darkgreen !important;
        color:white !important;
    } 

.btn.tombol-edit {
    background-color: #bc9c22 !important;
    color: darkgreen !important;
}

.btn.tombol-edit:hover {
    background-color: darkgreen !important;
    color: white !important;
}


.table-head {
    background-color: darkgreen !important;
    color:white !important;
}

.table-head th{
    text-align: center !important;
    vertical-align: middle !important;
}

.bg-navbar {
    background-color: darkgreen;
}

.navbar-nav .nav-link {
    color: white;
}

.judul-utama {
    color: #bc9c22;
    font-weight: bold;
}

.tombol-toggle {
    color: #bc9c22;
}


.hero-section {
    background-image: url('../img/mekkah-lands7.jpg');
    background-size: cover; /* Mengisi seluruh elemen */
    background-position: center; /* Memusatkan gambar */
    height: 100vh; /* Memastikan elemen memenuhi seluruh tinggi viewport */
    width: 100%; /* Memastikan elemen memenuhi seluruh lebar */
    display: flex; /* Untuk menempatkan konten di tengah */
    align-items: center; /* Vertikal tengah */
    justify-content: center; /* Horizontal tengah */
    text-align: center;
}

.hero-section .container{
  background-color: rgba(0, 100, 0, 0.3); /* Dark green dengan transparansi */
  padding:20px;
  position: absolute;
  margin-top:300px;

}

.hero-section .carousel-item {
    color: #bc9c22; /* Mengubah warna teks untuk kontras */
    text-align: center; /* Menempatkan teks di tengah */
}


.hero-section h1 {
    font-size: 35px;
    font-weight: bold;
    color: #bc9c22;
    text-shadow: 2px 2px 1px rgba(225, 225, 225,1);
   
}

.hero-section p {
    font-size: 15px;
    margin: 20px 0;
    color: white; /* Tambahkan warna untuk paragraf */
    line-height: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0,1);
    
}

.hero-section a {
    background-color: #bc9c22; /* mengubah bg-tombol jelajah */
    color: ghostwhite;
    font-weight: bold;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
}

.hero-section a:hover {
    background-color: #a5891b; /*   Warna saat hover */
    color: darkgreen;
    text-decoration: none;
}

.services-section {
    padding: 50px 0;
}

.service-box {
    text-align: center;
    padding: 20px;
    transition: 0.3s;
    border: 1px solid #ddd;
    border-radius: 10px;
}

.service-box:hover {
    background-color: #007bff;
    color: white;
}

.service-box i {
    font-size: 40px;
    margin-bottom: 15px;
}

.service-item {
    border: 1px solid #ddd; /* Add a border */
    padding: 20px; /* Add padding */
    margin: 10px; /* Add margin */
    border-radius: 8px; /* Round the corners */
    transition: transform 0.2s; /* Animation for hover effect */
}

.service-item:hover {
    transform: scale(1.05); /* Slightly scale up on hover */
}



/* Optional: Media query for small screens */
@media (max-width: 768px) {

   .judul-halaman {
        color:darkgreen !important;
    }
    
    /* Pengaturan gaya tampilan di layar kecil */
    
   .d-flex-custom {
        flex-direction: column !important;
    }

    .d-flex-custom form {
        margin-top: 10px; /* Jarak antara elemen */
    }
    
   
    
    .tombol-tambah {
        background-color:darkgreen !important;
        color:white !important;
    }

    .table-head {
        background-color: darkgreen !important;
        color:white !important;
    }

    .table-head th{
        horizontal-align: center !important;
        vertical-align: middle !important;
       
    }

     .service-item {
          border: 1px solid #bc9c22; /* Add a border */
          padding: 10px; /* Add padding */
          margin: 10px; /* Add margin */
          border-radius: 8px; /* Round the corners */
          transition: transform 0.2s; /* Animation for hover effect */
      }

      .service-item i {
            font-size: 25px;
            color: darkgreen;
      }

     .service-item:hover {
          transform: scale(1.05); /* Slightly scale up on hover */
      }

     .table td, .table th {
        padding: 0.5rem; /* Mengatur padding untuk tablet dan mobile */
        vertical-align: middle;
    }

}


.footer {
    background-color: darkgreen;
    color: white;
    padding: 20px 0;
}

.footer a {
    color: white;
    text-decoration: none;
}

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