body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            margin: 20px;
            background: url('../images/pattern-bg.webp?ver=2') repeat center top fixed;
            display: flex;
            justify-content: center;
        }

        .container {
            display: flex;
            flex-direction: column; /* Atur elemen di dalam container secara vertikal */
            width: 950px !important; /* Atau lebar yang Anda inginkan */
            padding: 20px;
            /* Menghapus background dan box-shadow dari container */
        }

        .logo-container {
            display: flex;
            justify-content: flex-start; /* Posisikan logo di kiri */
            align-items: center; /* Vertikal tengahkan logo dan bendera */
            margin-bottom: 20px;
        }

        .logo {
            width: 250px; /* Atau lebar logo yang diinginkan */
        }

        .logo h1 a {
            text-decoration: none;
            color: #333;
        }

        .main-content {
            display: flex; /* Untuk mengatur left-column dan right-column bersebelahan */
            width: 100%;
        }

        .left-column {
			width: 250px; /* Lebar tetap yang Anda inginkan */
			flex-shrink: 0; /* Jangan biarkan left-column menyusut */
			padding-right: 20px;
		}

        .menu-toggle {
            display: none; /* Sembunyikan secara default */
            flex-direction: column;
            cursor: pointer;
            padding: 10px;
            border: none;
            background: transparent;
            margin-bottom: 15px;
            align-self: flex-start; /* Rata kiri di kolom menu */
        }

        .bar {
            width: 25px;
            height: 3px;
            background-color: #333;
            margin: 3px 0;
            transition: 0.4s;
        }

        .change .bar:nth-child(1) {
            transform: translateY(8px) rotate(-45deg);
        }

        .change .bar:nth-child(2) {
            opacity: 0;
        }

        .change .bar:nth-child(3) {
            transform: translateY(-8px) rotate(45deg);
        }

        .menu-vertical {
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%;
        }

        .menu-vertical li {
            margin-bottom: 10px; /* Menambah margin bottom untuk jarak */
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Tambahkan box shadow ke li */
            border-radius: 5px; /* Agar shadow mengikuti border radius link */
        }

        .menu-vertical li:last-child {
            margin-bottom: 0; /* Menghilangkan margin bottom pada item terakhir agar tidak ada jarak ekstra setelah item terakhir */
        }

        .menu-vertical li a {
            display: block;
            padding: 10px 15px;
            text-decoration: none;
            color: #463419;
            background-color: #eee;
            border-radius: 5px;
        }

        .menu-vertical li a:hover {
            background-color: #ddd;
        }

        .menu-vertical li a.active {
            background-color: #ddd;
        }

        .menu-vertical li a img {
            vertical-align: middle;
            margin-right: 5px;
        }

        .menu-vertical li a span {
            /* Style untuk span teks menu jika diperlukan */
        }

        .right-column {
            flex-grow: 1; /* Mengisi sisa lebar */
            padding-left: 20px;
            display: flex;
            flex-direction: column; /* Agar peta dan info kontak tersusun vertikal */
        }

		.page-content > :first-child {
			margin-top: 0px;
		}

        .page-body {
			line-height:25px;
		}

        .contact-map {
            margin-bottom: 20px;
        }

        .contact-info {
            font-size: 0.9em;
            color: #555;
        }

        .contact-info p {
            margin-bottom: 10px;
        }

        .contact-info span {
            margin-right: 5px;
        }

        footer {
            font-size: 0.9em;
            color: #777;
            text-align: left;
            padding: 10px 0;
            border-top: 1px solid #eee;
            margin-top: 20px; /* Beri jarak dengan info kontak */
        }

        /* Mode Mobile */
        @media (max-width: 768px) {
            .container {
                width: 90%;
            }

            .logo-container {
                justify-content: center; /* Tengah logo di mobile */
                align-items: center; /* Tengah logo dan bendera di mobile */
                flex-direction: column; /* Susun logo dan bendera ke bawah */
                margin-bottom: 15px;
            }

            .language-selection {
                margin-left: 0;
                margin-top: 10px; /* Beri jarak antara logo dan bendera di mobile */
            }

            .main-content {
                flex-direction: column; /* Tumpuk kolom di mobile */
            }

			.page-content > :first-child {
				margin-top: 20px;
			}

            .left-column {
                width: 100%;
                padding-right: 0;
                align-items: center; /* Tengah menu toggle */
            }

            .menu-toggle {
                display: flex; /* Tampilkan toggle */
                margin-bottom: 15px;
                align-self: center; /* Tengah toggle */
            }

            .menu-vertical {
                display: none; /* Sembunyikan menu default */
                width: 100%;
                text-align: center;
                margin-top: 10px;
            }

            .menu-vertical.responsive {
                display: block; /* Tampilkan menu saat toggle aktif */
            }

            .menu-vertical.responsive li {
                margin-bottom: 10px; /* Tambahkan margin di mobile juga */
                box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Tambahkan box shadow di mobile juga */
            }

            .menu-vertical.responsive li:last-child {
                margin-bottom: 0;
            }

            .right-column {
				flex-grow: 1; /* Biarkan right-column mengambil sisa ruang */
				/* Anda bisa menambahkan max-width jika perlu */
            padding-left: 0px;
			}

            .contact-map {
                width: 100%;
                height: auto; /* Biarkan tinggi menyesuaikan */
                margin-bottom: 15px;
            }

            .contact-info {
                text-align: center;
            }

            .contact-info p {
                margin-bottom: 8px;
            }

            .contact-map {
                position: relative; /* Membuat container menjadi acuan posisi untuk iframe */
                padding-bottom: 75%; /* Menentukan rasio aspek (tinggi = 75% dari lebar, sesuaikan jika perlu) */
                height: 0;
                overflow: hidden;
                margin-bottom: 20px;
            }

            .contact-map iframe {
                position: absolute;
                top: 0;
                left: 0;
                width: 100% !important; /* Penting untuk mengambil seluruh lebar container */
                height: 100% !important; /* Penting untuk mengambil seluruh tinggi container */
            }

            /* Mode Mobile (pastikan properti ini tidak menimpa responsivitas) */
            @media (max-width: 768px) {
                .contact-map {
                    padding-bottom: 100%; /* Contoh penyesuaian rasio aspek untuk mobile jika perlu */
                    margin-bottom: 15px;
                }
            }

            footer {
                text-align: center;
                border-top: 1px solid #eee;
                padding-top: 10px;
                margin-top: 15px; /* Beri jarak di mobile */
            }
        }


        .language-selection {
            display: flex;
            justify-content:center;
            margin-left: 0px; /* Beri jarak antara logo dan bendera */
        }

        .language-selection a {
            font-size: 2em; /* Sesuaikan ukuran emoji */
            text-decoration: none; /* Hilangkan garis bawah link */
            opacity: 0.3; /* Efek buram awal */
			margin-right: 25px;
            transition: opacity 0.3s ease; /* Animasi transisi untuk efek hover */
        }

        .language-selection a:last-child {
            margin-right: 0;
        }

        .language-selection a:hover {
            opacity: 1; /* Efek terang saat hover */
        }

        .language-selection a.active {
            opacity: 1; /* Efek terang saat aktif */
            /* Anda bisa menambahkan style lain untuk indikator aktif, misalnya border */
            /* border-bottom: 2px solid #007bff; */
        }
		
		.updated {
			font-size: 0.8em;
			color: #777;
			margin-top: 10px;
			padding: 5px;
			border-top: 1px solid #eee;
			text-align: center;
		}
		


.w-full.flex > div.p-2.w-1\/2.md\:w-1\/4.lg\:w-1\/6:nth-child(n+2) {
    margin-left: 3rem; /* Margin untuk mode desktop dan lebih besar */
}

/* Reset margin-left untuk mode mobile (layar di bawah 768px) */
@media (max-width: 767px) {
    .w-full.flex > div.p-2.w-1\/2.md\:w-1\/4.lg\:w-1\/6:nth-child(n+2) {
        margin-left: 0; /* Atau nilai margin yang lebih kecil untuk mobile */
    }
}

@media (min-width: 768px) { /* md */
    .w-full.flex > div.p-2.w-1\/2.md\:w-1\/4.lg\:w-1\/6:nth-child(n+2) {
        margin-left: 3rem; /* Pastikan ini tetap ada untuk layar md ke atas */
    }
}

@media (min-width: 1024px) { /* lg */
    .w-full.flex > div.p-2.w-1\/2.md\:w-1\/4.lg\:w-1\/6:nth-child(n+2) {
        margin-left: 3rem; /* Pastikan ini tetap ada untuk layar lg ke atas */
    }
}

.flex {
    display: flex;
}

.md\:justify-center {
    /* Pada layar medium dan lebih besar */
}

@media (min-width: 768px) { /* md */
    .md\:justify-center {
        justify-content: center;
    }
}

.flex-wrap {
    flex-wrap: wrap;
}

.-mx-2 {
    margin-left: -0.5rem; /* -2 * 0.25rem */
    margin-right: -0.5rem;
}

.p-2 {
    padding: 0.5rem !important; /* 2 * 0.25rem */
}

.w-1\/2 {
    width: 50%;
}

.md\:w-1\/4 {
    /* Pada layar medium dan lebih besar */
}

@media (min-width: 768px) { /* md */
    .md\:w-1\/4 {
        width: 25%;
    }
}

.lg\:w-1\/6 {
    /* Pada layar large dan lebih besar */
}

@media (min-width: 1024px) { /* lg */
    .lg\:w-1\/6 {
        width: 16.666667%; /* 1/6 */
    }
}

.inline-flex {
    display: inline-flex;
}

.items-center {
    align-items: center;
}

.px-4 {
    padding-left: 1rem; /* 4 * 0.25rem */
    padding-right: 1rem;
}

.py-2 {
    padding-top: 0.5rem; /* 2 * 0.25rem */
    padding-bottom: 0.5rem;
}

.rounded-md {
    border-radius: 0.375rem; /* 6px */
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Anda perlu mendefinisikan warna shadow sesuai keinginan Anda */
.shadow-gray-800\/10 {
    box-shadow: 0 10px 15px -3px rgba(60, 60, 60, 0.1), 0 4px 6px -2px rgba(60, 60, 60, 0.05); /* Contoh warna gray-800 dengan opasitas 10% */
}

.bg-white {
    background-color: #fff;
}

.w-12 {
    width: 3rem; /* 48px */
}

.h-12 {
    height: 3rem; /* 48px */
}

.object-contain {
    object-fit: contain;
}

.mr-2 {
    margin-right: 0.5rem; /* 2 * 0.25rem */
}

.md\:mr-4 {
    /* Pada layar medium dan lebih besar */
}

@media (min-width: 768px) { /* md */
    .md\:mr-4 {
        margin-right: 1rem; /* 4 * 0.25rem */
    }
}

.flex-1 {
    flex: 1 1 0%;
}

.font-medium {
    font-weight: 500;
}

.text-gray-700 {
    color: #4a5568; /* Contoh warna gray-700 */
}

.text-sm {
    font-size: 0.875rem; /* 14px */
}