/* Container Utama supaya konten tidak melebar ke pinggir layar */
.main-wrapper {
    max-width: 1100px; /* Atur lebar maksimal halaman */
    margin: 0 auto;    /* Ini kunci supaya RATA TENGAH */
    background-color: #fff;
    box-shadow: 0 0 20px rgba(0,0,0,0.05); /* Shadow tipis di pinggir halaman */
}

/* Banner disesuaikan agar teks dan gambar seimbang */
.contact-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 60px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
}

.banner-text {
    text-align: left; /* Teks di dalam tetap rata kiri tapi posisi di tengah halaman */
}

/* Card Info Kontak */
.contact-card {
    display: flex;
    align-items: center; /* Konten di dalam kotak rata tengah secara vertikal */
    padding: 50px;
    gap: 40px;
    background: #fff;
}

.info-details {
    flex: 1;
    text-align: left;
}

.info-map {
    flex: 1.2; /* Maps sedikit lebih lebar */
    border-radius: 10px;
    overflow: hidden;
}

/* Biar rapi di HP */
@media (max-width: 768px) {
    .contact-banner, .contact-card {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    .info-details {
        text-align: center;
    }
}