/* Responsif untuk segala ukuran layar */

/* Penyesuaian lebar gambar dan konten */
@media only screen and (max-width: 768px) {
    .container1 .row {
        flex-direction: column;
    }

    .container1 .bagian1,
    .container1 .judulataskanan {
        width: 100%;
    }

    .footer-column {
        text-align: center;
    }
}

/* Penyesuaian tinggi background */
.background img {
    height: auto;
}

/* Penyesuaian lebar logo pada navbar */
.navbar-logo img {
    max-width: 200px;
    /* Ubah sesuai kebutuhan */
}


/* CSS untuk layar dengan lebar maksimum 768px */
@media only screen and (max-width: 768px) {
    .contact-info {
        display: flex;
        flex-direction: column;
        /* Mengatur tata letak kontak-info menjadi kolom */
    }

    .contact-info>div {
        width: 100%;
        /* Setiap kotak kontak mengisi lebar penuh */
        margin-bottom: 20px;
        /* Menambahkan jarak antar kotak kontak */
    }
}

/* CSS untuk layar dengan lebar maksimum 480px */
@media only screen and (max-width: 480px) {
    .contact-info>div {
        width: 100%;
        /* Setiap kotak kontak mengisi lebar penuh */
    }
}

/* RESPONSIVE FOOTER */
/* CSS untuk layar dengan lebar maksimum 768px */
@media only screen and (max-width: 768px) {
    .footer-content {
        display: flex;
        flex-direction: column;
        /* Menjadikan tata letak elemen footer menjadi kolom saat layar kecil */
        align-items: center;
        /* Meletakkan elemen footer di tengah-tengah saat layar kecil */
    }

    .footer-column {
        margin-bottom: 30px;
        /* Menambahkan jarak antar kolom footer */
    }
}