/* Gaya dasar untuk gambar */
/* Gaya untuk gambar agar responsif */


/* Kontainer teks dan gambar */
.content-box {
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 20px;
    background-color: #BED2D9; /* Warna latar belakang untuk kontras */
    border-radius: 10px; /* Membuat sudut melengkung */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Memberikan bayangan */
}

/* Gaya untuk heading */
.content-box h2 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #353535;
}

/* Gaya untuk teks paragraf dan daftar */
.content-box p,
.content-box ul {
    font-size: 16px;
    line-height: 1.6;
}

/* Hover effect */

/* Responsivitas untuk layar kecil */
@media (max-width: 768px) {
    .img-rencana {
        max-width: 100%; /* Gambar memenuhi kontainer pada layar kecil */
    }

    .content-box {
        padding: 15px; /* Kurangi padding untuk layar kecil */
    }

    .content-box h2 {
        font-size: 20px; /* Kurangi ukuran teks heading */
    }

    .content-box p,
    .content-box ul {
        font-size: 14px; /* Kurangi ukuran teks */
    }
}

/* Responsivitas untuk layar sangat kecil (ponsel) */
@media (max-width: 576px) {
    .img-rencana {
        max-width: 100%; /* Gambar tetap memenuhi kontainer */
    }

    .content-box {
        margin: 15px; /* Kurangi margin untuk layar sangat kecil */
        padding: 10px; /* Kurangi padding lebih jauh */
    }
}
/* Tombol utama */
.btn-rencana {
    background-color: #175782; /* Warna utama tombol */
    color: #ffffff; /* Warna teks */
    padding: 10px 20px; /* Padding untuk ukuran tombol */
    font-size: 16px; /* Ukuran teks */
    font-weight: bold; /* Teks tebal */
    text-transform: uppercase; /* Huruf kapital */
    border: none; /* Hilangkan border */
    border-radius: 5px; /* Sudut tombol melengkung */
    cursor: pointer; /* Ubah kursor menjadi pointer */
    transition: all 0.3s ease; /* Animasi transisi */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Bayangan untuk estetika */
}

/* Hover efek */
.btn-rencana:hover {
    background-color: #0f3a56; /* Warna lebih gelap untuk hover */
    color: #e1f5ff; /* Teks lebih terang untuk kontras */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Tambahkan bayangan pada hover */
    transform: translateY(-3px); /* Tombol sedikit naik */
}

/* Gaya untuk teks di dalam tombol */
.btn-rencana-inner {
    font-size: 14px; /* Ukuran teks internal */
    letter-spacing: 1px; /* Jarak antar huruf */
}
