/* Animasi untuk card dalam Pelayanan Kami */
.card.animatable {
    opacity: 0; /* Tersembunyi sebelum animasi */
    transform: translateY(50px); /* Posisikan sedikit ke bawah */
    transition: opacity 1s ease, transform 1s ease;
}

.card.animatable.show {
    opacity: 1; /* Tampilkan elemen */
    transform: translateY(0); /* Posisikan ke lokasi asli */
}

/* Style card lainnya */
.card {
    position: relative;
    overflow: hidden; /* Mengatasi gambar keluar dari area card */
    margin-bottom: 30px;
    box-shadow: 0 4px 80px rgba(0, 0, 0, 0.1); /* Tambahan bayangan */
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: 0 8px 36px rgba(0, 0, 0, 0.2); /* Tambahan efek hover */
}
/* Style untuk gambar di dalam card */
.card img {
    transition: transform 0.5s ease; /* Tambahkan transisi untuk animasi */
    width: 100%; /* Pastikan gambar memenuhi card */
}

/* Efek zoom saat hover pada gambar di dalam card */
.card:hover img {
    transform: scale(1.1); /* Zoom in gambar saat di-hover */
}

/* Style untuk Layanan dan Tentang Kami */
.layanan-item, .tentang-kami, .pengumuman-kami, .visi-kami {
    opacity: 0; /* Tersembunyi sebelum animasi */
    transform: translateY(50px); /* Posisikan elemen sedikit ke bawah sebelum animasi */
    transition: opacity 1s ease, transform 1s ease;
}
.layanan-kami {
    background-color: #1068aa; /* Warna biru */
    color: rgb(26, 26, 26);              /* Teks berwarna putih */
    padding: 50px 0;           /* Padding untuk jarak dalam section */
}
.layanan-kami h2 {
    color: white;              /* Warna putih untuk judul */
}
.animatable.show {
    opacity: 1; /* Tampilkan elemen */
    transform: translateY(0); /* Kembalikan elemen ke posisinya */
}

/* Styling untuk carousel */
.my-carousel {
    margin: 50px 300x;  /* Margin atas, bawah 20px; kiri, kanan 50px */
    /*background-color: ;  /* Background warna biru */
    border-radius: 10px; /* Membuat sudut carousel sedikit membulat */
}
.carousel-item img {
    height: 680px;  /* Mengurangi tinggi carousel */
    object-fit: cover;
    pointer-events: none;
}

.card-img-top {
    height: 230px;
    object-fit: cover;
}

.card {
    margin-bottom: 30px;
}

/* Styling untuk Tentang Kami section */
.tentang-kami {
    background-color: #1068aa; /* Warna biru */
    color: white;              /* Teks berwarna putih */
    padding: 50px 0;           /* Padding untuk jarak dalam section */
}

.tentang-kami h2 {
    color: white;              /* Warna putih untuk judul */
}

.tentang-kami p {
    color: white;              /* Warna putih untuk teks biasa */
}
/*styling maps */
.maps-container {
    background-color: white;   /* Warna background kotak map */
    border-radius: 10px;       /* Membuat sudut kotak map melengkung */
    padding: 10px;             /* Memberikan padding di dalam kotak map */
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); /* Memberikan efek bayangan */
}
/* Styling untuk logo kecil */
.logo-kecil {
    width: 50px;   /* Atur ukuran logo */
    height: auto;
    margin-right: 15px;  /* Jarak antara logo dan teks */
}
/* Styling untuk link Instagram */
.instagram-link {
    color: white;                /* Teks tetap berwarna putih */
    text-decoration: none;        /* Hilangkan garis bawah pada link */
    /*font-weight: bold;            /* Berikan penekanan dengan teks tebal */
}
.instagram-link:hover {
    color: lightgray;             /* Warna berubah saat di-hover */
    text-decoration: underline;   /* Garis bawah muncul saat di-hover */
}
/*pengumuman*/
.pengumuman {
    background-color: #ffffff; /* Warna biru */
    color: rgb(0, 0, 0);              /* Teks berwarna putih */
    padding: 50px 0;           /* Padding untuk jarak dalam section */
}
/*visi*/
.visi-kami {
    background-color: white; /* Warna biru */
    color: rgb(0, 0, 0);              /* Teks berwarna putih */
    padding: 50px 0;           /* Padding untuk jarak dalam section */
}
#visi-misi {
    background-color: #f8f9fa; /* Background warna terang */
    padding: 40px 0; /* Padding atas bawah */
}

#visi-misi h2 {
    color: #0f0f0f; /* Warna biru untuk judul */
    margin-bottom: 20px;
}

#visi-misi p, #visi-misi ul {
    font-size: 1.2rem; /* Ukuran font */
    color: #333; /* Warna teks */
}

#visi-misi ul li{
    list-style-type: none; /* Hapus bullet points */
    padding: 0;
    background-color: #ffffff;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#visi-misi ul li {
    background-color: #ffffff; /* Background item misi */
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 8px; /* Sudut melengkung */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Bayangan */
    text-align: left; /* Rata kiri */
}

#visi-misi ul li:hover {
    background-color: #00457a; /* Ubah background saat hover */
    color: #fff; /* Teks putih saat hover */
}

@media (max-width: 768px) {
    #visi-misi h2, #visi-misi p, #visi-misi ul {
        font-size: 1rem; /* Ukuran font lebih kecil untuk layar mobile */
    }
.dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
}
}