body {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
            background-color: #f9f9f9;
            /* Mengatur body untuk menengahkan konten */
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
.container {
            /* Kontainer utama yang akan menampung gambar dan tombol */
            position: relative; /* Penting agar elemen di dalamnya bisa diposisikan relatif terhadapnya */
            width: 100%;
            max-width: 900px; /* Sesuaikan dengan lebar maksimum gambar */
            overflow: hidden; /* Mencegah konten meluap */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
.container::before {
            content: '';
            display: block;
            padding-top: 56.25%; /* Rasio aspek 16:9, sesuaikan jika gambar memiliki rasio berbeda */
        }
 .background-image {
            /* Gambar latar belakang */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; /* Memastikan gambar menutupi seluruh kontainer tanpa distorsi */
            z-index: 1; /* Posisikan di bawah tombol */
        }
.kotak-lebar-terbatas {
            position: absolute; /* Position it over the image */
            top: 40%; /* Center vertically (adjust as needed) */
            left: 45%; /* Center horizontally */
            transform: translate(-50%, -50%); /* Fine-tuning the centering */
            z-index: 2; /* Make sure it's above the background image */
            width: 80%; /* Control the width of the text block */
            background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background for readability */
            padding: 20px;
            border-radius: 10px;
            color: white; /* Ensure text is readable against a dark background */
            text-align: justify; /* Optional: Align text nicely */
			max-width: 600px;
			margin: 10px;
        }      
		
.content-overlay {
            /* Wadah untuk tombol yang akan diletakkan di atas gambar */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex; /* Menggunakan Flexbox untuk menengahkan tombol */
            flex-direction: column;
            justify-content: center; /* Menengahkan secara vertikal */
            align-items: center; /* Menengahkan secara horizontal */
            z-index: 2; /* Posisikan di atas gambar */
        }

.menu-container {
    display: flex;
    align-items: center;
    gap: 30px;
}

.menu-items {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

 .menu-button {
            display: inline-block;
            padding: 15px 30px;
            font-size: 16px;
            font-weight: bold;
            color: black;
            text-decoration: none;
            border-radius: 5px;
            margin: 5px;
            transition: transform 0.2s, box-shadow 0.2s;
        }

/* Warna tombol */
.yellow {
    background-color: #ffc107; /* Kuning */
}

.blue {
    background-color: #007bff; /* Biru */
}

/* Efek animasi saat kursor diarahkan (hover) */
.menu-button:hover {
    transform: translateY(-5px); /* Bergerak sedikit ke atas */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Bayangan menjadi lebih jelas */
}

/* Efek saat tombol diklik */
.menu-button:active {
    transform: translateY(0); /* Kembali ke posisi semula */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Bayangan kembali normal */
}

.main-button .menu-button {
    padding: 60px 80px;
    font-size: 1.5rem;
}

.kotak-lebar-terbatas2 {
  max-width: 500px;
  border: 0px ;
  margin: 10px;
}
.back-button {
	 position: absolute;
	 top: 30px; /* Jarak dari atas */
            right: 20px; /* Jarak dari kiri */
            z-index: 3; /* Pastikan di atas semua elemen lain */
    display: inline-block; /* Agar properti padding dan margin bekerja */
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-family: sans-serif;
    margin-top: 20px;

    /* Animasi */
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.back-button:hover {
    background-color: #0056b3;
    transform: scale(1.05); /* Efek skala saat kursor diarahkan */
}

.back-button:active {
    background-color: #004085;
    transform: scale(0.95); /* Efek menekan tombol */
}
.joomla-wrapper iframe {
    width: 100% !important;
    height: 100vh !important; /* Menggunakan tinggi viewport penuh */
    overflow: auto !important; /* Memastikan scrollbar muncul jika konten meluap */
}