/* Navbar */
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1c0344; /* Warna latar belakang */
    color: rgb(255, 255, 255);
    padding: 10px 20px;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Bayangan */
    font-family: 'Trebuchet MS', Arial, sans-serif;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 10px; /* Jarak antara logo dan teks */
}

.nav-logo {
    height: 50px; /* Ukuran logo */
}

.nav-text {
    display: flex;
    flex-direction: column; /* Menyusun teks secara vertikal */
    justify-content: center;
    text-align: left; /* Rata kiri */
}

.nav-text .official {
    font-size: 14px; /* Ukuran teks "Official Website" */
    font-weight: normal;
    margin: 0;
    color: rgb(255, 255, 255)
}

.nav-text .bem-uniga {
    font-size: 18px; /* Ukuran teks "BEM UNIGA" */
    font-weight: bold;
    margin: 0;
    color: #ffcc80;
}

.nav-right {
    display: flex;
    gap: 20px; /* Jarak antar menu */
    margin-right: 50px; /* Jarak dari tepi kanan */
}

.nav-right a {
    color: rgb(255, 249, 249);
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    transition: color 0.3s ease;
}

.nav-right a:hover {
    color: #00bfff; /* Warna biru terang saat hover */
}

/* Section Awal */
.hero-section {
    position: relative;
    height: 100vh; /* Tinggi penuh layar */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding-top: 40px;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Menjaga proporsi gambar */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Overlay transparan */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    padding: 20px;
}

.hero-overlay h1 {
    font-size: 46px;
    font-weight: bold;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Bayangan teks */
    font-family: 'Trebuchet MS', Arial, sans-serif;
    animation: glow 2s infinite; /* Animasi efek glow */
}

/* Efek animasi glow */
@keyframes glow {
    0% {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 
                     0 0 10px rgba(255, 255, 255, 0.6), 
                     0 0 20px rgba(255, 255, 255, 0.4);
    }
    50% {
        text-shadow: 0 0 10px rgba(255, 255, 255, 1), 
                     0 0 20px rgba(255, 255, 255, 0.8), 
                     0 0 30px rgba(255, 255, 255, 0.6);
    }
    100% {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 
                     0 0 10px rgba(255, 255, 255, 0.6), 
                     0 0 20px rgba(255, 255, 255, 0.4);
    }
}

/* Section Visi dan Misi */
.visi-misi {
    background-color: #ffffff; /* Warna latar belakang */
    padding: 50px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.visi-misi-container {
    display: flex;
    gap: 30px; /* Jarak antar kotak */
    max-width: 1200px;
    width: 100%;
}

.box {
    background-color: #ffffff; /* Warna kotak */
    border-radius: 10px; /* Sudut membulat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Bayangan */
    padding: 20px;
    flex: 1; /* Membagi ruang secara merata */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease; /* Animasi */
    border: 2px solid transparent; /* Border awal transparan */
}

.box h2 {
    font-size: 34px;
    color: #00bfff; /* Warna teks judul */
    margin-bottom: 15px;
    text-align: center;
    color: rgb(0, 0, 0);
    font-family: 'GREAT VIBES', cursive; /* Font judul */
}

.box p, .box ul {
    font-size: 16px;
    color: #ffffff; /* Warna teks isi */
    line-height: 1.6;
    color: rgb(0, 0, 0); /* Warna teks isi */
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.box ul {
    padding-left: 20px; /* Jarak untuk daftar */
}

.box ul li {
    margin-bottom: 10px;
}

/* Efek Hover */
.box:hover {
    transform: scale(1.05); /* Efek zoom */
    box-shadow: 0 8px 16px #ffd700; /* Bayangan lebih besar */
    border: 2px solid gray; /* Border berubah warna */
}
@media (max-width: 768px) {
    /* Section Visi dan Misi */
    .visi-misi-container {
        flex-direction: column; /* Susun elemen secara vertikal */
        gap: 20px; /* Tambahkan jarak antar elemen */
        align-items: center; /* Rata tengah elemen */
    }

    .visi {
        order: 1; /* Pastikan Visi berada di atas */
        width: 100%; /* Elemen memenuhi lebar layar */
        max-width: 90%; /* Batas maksimal lebar */
        padding: 15px; /* Kurangi padding */
    }

    .misi {
        order: 2; /* Pastikan Misi berada di bawah */
        width: 100%; /* Elemen memenuhi lebar layar */
        max-width: 90%; /* Batas maksimal lebar */
        padding: 15px; /* Kurangi padding */
    }

    .box h2 {
        font-size: 20px; /* Perkecil ukuran teks judul */
        margin-bottom: 10px;
    }

    .box p, .box ul {
        font-size: 14px; /* Perkecil ukuran teks isi */
        line-height: 1.4; /* Kurangi jarak antar baris */
    }

    .box ul {
        padding-left: 15px; /* Kurangi jarak untuk daftar */
    }

    .box ul li {
        margin-bottom: 8px; /* Kurangi jarak antar item daftar */
    }
}
/* Section Struktural */
.struktural {
    background-color: #565656; /* Warna latar belakang sama dengan section sebelumnya */
    padding: 50px 20px;
    text-align: center;
}

.struktural-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px; /* Jarak antara judul dan gambar */
}

.struktural h2 {
    font-size: 38px;
    color: #ffffff; /* Warna teks */
    margin-bottom: 20px;
    text-transform: none;
    font-weight: bold;
    letter-spacing: 1px;
    font-family: 'GREAT VIBES', cursive; /* Font judul */
}

/* Section Struktural */
.struktural-image {
    position: relative;
    width: 100%;
    max-width: 700px;
    overflow: hidden;
    border-radius: 0; /* Hilangkan sudut membulat */
    box-shadow: none; /* Hilangkan bayangan */
    transition: none; /* Hilangkan transisi */
    margin: 0; /* Hilangkan margin */
}

.struktural-image img {
    width: 100%;
    height: auto;
    display: block;
    transform: none; /* Hilangkan transformasi */
    transition: none; /* Hilangkan transisi */
}
/* Section Kabinet */
.kabinet {
    background: linear-gradient(135deg, #002041, #0a0a0a); /* Gradien biru */
    color: white; /* Warna teks putih */
    padding: 50px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.kabinet-container {
    display: flex;
    gap: 30px; /* Jarak antara logo dan deskripsi */
    max-width: 1200px;
    width: 100%;
    align-items: center;
}

.kabinet-logo {
    flex: 1; /* Logo menempati 1 bagian */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: none; /* Warna latar belakang bingkai logo */
    border-radius: 50%; /* Membuat bingkai berbentuk lingkaran */
    padding: 10px; /* Jarak antara logo dan bingkai */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Bayangan lembut */
}

.kabinet-logo img {
    width: 180px; /* Ukuran logo */
    height: auto;
    border-radius: 50%; /* Membuat logo berbentuk lingkaran */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efek transisi */
}

/* Efek bersinar pada logo */
.kabinet-logo img:hover {
    transform: scale(1.1); /* Zoom saat hover */
    box-shadow: 0 0 20px 10px #ffd700; /* Efek bersinar */
}
.kabinet-description h2 {
    font-size: 32px; /* Ukuran font untuk judul */
    margin-bottom: 15px;
    text-transform: uppercase;
    font-weight: bold;
    color: #f6f6dc; /* Warna teks judul */
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.kabinet-description p {
    font-size: 18px; /* Ukuran font untuk deskripsi */
    line-height: 1.8; /* Jarak antar baris */
    color: #e0e0e0; /* Warna teks deskripsi */
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
@media (max-width: 768px) {
    /* Section Kabinet */
    .kabinet-container {
        flex-direction: column; /* Susun elemen secara vertikal */
        align-items: center; /* Rata tengah elemen */
        gap: 20px; /* Tambahkan jarak antar elemen */
    }

    .kabinet-logo {
        order: 1; /* Pastikan logo berada di atas */
        margin-bottom: 10px; /* Tambahkan jarak bawah */
    }

    .kabinet-description {
        order: 2; /* Pastikan deskripsi berada di bawah */
        text-align: center; /* Teks rata tengah */
        width: 100%; /* Elemen memenuhi lebar layar */
        max-width: 90%; /* Batas maksimal lebar */
    }

    .kabinet-description h2 {
        font-size: 20px; /* Perkecil ukuran teks judul */
        margin-bottom: 10px;
    }

    .kabinet-description p {
        font-size: 14px; /* Perkecil ukuran teks isi */
        line-height: 1.6; /* Kurangi jarak antar baris */
    }

    .kabinet-logo img {
        width: 100px; /* Perkecil ukuran logo */
        height: 100px;
    }
}
/* Section Kajian Isu */
.kajian-isu {
    background: linear-gradient(135deg, #8B0000, #0a0a09); /* Gradien biru tua elegan */
    color: white; /* Warna teks putih */
    padding: 50px 20px;
    text-align: center;
}

.kajian-isu-container {
    max-width: 1200px;
    margin: 0 auto;
}

.kajian-isu h2 {
    font-size: 38px;
    margin-bottom: 30px;
    text-transform: none;
    font-weight: bold;
    color: #f6f6dc; /* Warna teks judul */
    font-family: 'GREAT VIBES', cursive; /* Font judul */
}

.kajian-isu-grid {
    display: flex;
    gap: 60px; /* Jarak antar foto */
    justify-content: center;
    flex-wrap: wrap; /* Membuat grid responsif */
}

.kajian-item {
    flex: 1;
    max-width: 300px;
    text-align: center;
    text-decoration: none; /* Hilangkan garis bawah pada link */
    color: white; /* Warna teks */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efek transisi */
}

.kajian-item img {
    width: 100%;
    height: auto;
    border-radius: 15px; /* Membuat sudut membulat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Bayangan lembut */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efek transisi */
}

.kajian-item:hover img {
    transform: scale(1.1); /* Zoom saat hover */
    box-shadow: 0 8px 16px rgba(255, 255, 255, 0.3); /* Bayangan lebih besar saat hover */
}

.kajian-item p {
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #f6f6dc; /* Warna teks deskripsi */
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
/* Garis Pembatas */
.section-divider {
    border: none; /* Hilangkan border default */
    height: 4px; /* Tinggi garis */
    background: linear-gradient(90deg, #004080, #00bfff); /* Gradien biru */
    margin: 40px 0; /* Jarak atas dan bawah garis */
    border-radius: 2px; /* Membuat garis sedikit membulat */
}
.section-divider-with-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px 0;
    position: relative;
}

.section-divider-with-icon::before,
.section-divider-with-icon::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, #004080, #00bfff);
    margin: 0 10px;
}

.section-divider-with-icon span {
    font-size: 20px;
    color: #004080;
    font-weight: bold;
}
.section-divider-glow {
    border: none;
    height: 4px;
    background: linear-gradient(90deg, #004080, #00bfff);
    margin: 40px 0;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.5), 0 0 20px rgba(0, 191, 255, 0.3);
}
/* Section Dokumentasi */
.dokumentasi {
    background: linear-gradient(135deg, #333333, #1a1a1a); /* Gradien hitam elegan */
    color: white; /* Warna teks putih */
    padding: 50px 20px;
    text-align: center;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.dokumentasi-container {
    max-width: 1200px;
    margin: 0 auto;
}

.dokumentasi h2 {
    font-size: 28px;
    margin-bottom: 30px;
    text-transform: uppercase;
    font-weight: bold;
    color: #f6f6dc; /* Warna teks judul */
}

.dokumentasi-slider {
    display: flex;
    gap: 20px; /* Jarak antar foto */
    overflow-x: auto; /* Slider horizontal */
    padding: 20px 0;
    scroll-behavior: smooth; /* Scroll halus */
}

.dokumentasi-item {
    flex: 0 0 auto; /* Membuat item tidak menyusut */
    width: 300px; /* Lebar bingkai foto */
    aspect-ratio: 16 / 9; /* Membuat bingkai berbentuk landscape */
    background-color: #1a1a1a; /* Warna bingkai hitam elegan */
    border-radius: 10px; /* Membuat sudut bingkai membulat */
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Bayangan lembut */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efek transisi */
}

.dokumentasi-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Memastikan foto memenuhi bingkai */
    display: block;
    transition: transform 0.3s ease; /* Efek transisi */
}

.dokumentasi-item:hover {
    transform: scale(1.05); /* Zoom pada bingkai saat hover */
    box-shadow: 0 8px 16px rgba(255, 255, 255, 0.3); /* Bayangan lebih besar saat hover */
}

.dokumentasi-item:hover img {
    transform: scale(1.1); /* Zoom tambahan pada gambar */
}

/* Scrollbar Styling */
.dokumentasi-slider::-webkit-scrollbar {
    height: 8px; /* Tinggi scrollbar */
}

.dokumentasi-slider::-webkit-scrollbar-thumb {
    background: #00bfff; /* Warna scrollbar */
    border-radius: 10px; /* Membuat scrollbar membulat */
}
/* Animasi teks */
.hero-overlay h1 span {
    display: inline-block;
    opacity: 0; /* Awalnya tidak terlihat */
    transform: translateX(-20px); /* Geser ke kiri */
    animation: fadeIn 0.5s ease forwards; /* Animasi muncul */
}

@keyframes fadeIn {
    to {
        opacity: 1; /* Muncul */
        transform: translateX(0); /* Kembali ke posisi semula */
    }
}
/* Section Contact Us */
.contact-us {
    padding: 50px 20px;
    background-color: #000000; /* Warna latar belakang */
    text-align: center;
}

.contact-us h2 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #ffffff; /* Warna teks */
    font-family: 'GREAT VIBES', cursive; /* Font judul */
}

.contact-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.contact-info {
    display: flex;
    flex-wrap: wrap; /* Responsif: elemen akan membungkus jika tidak muat */
    justify-content: center;
    gap: 20px;
}

.contact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    width: 120px; /* Ukuran tetap untuk setiap item */
}

.contact-item img {
    width: 50px; /* Ukuran ikon */
    height: 50px;
    object-fit: contain;
    border-radius: 50%; /* Membuat ikon berbentuk lingkaran */
    background-color: #000000; /* Latar belakang putih */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Bayangan lembut */
    padding: 10px;
}

.contact-item p {
    font-size: 14px;
    color: #ffffff; /* Warna teks */
    margin: 0;
}

.contact-item a {
    text-decoration: none;
    color: #ffffff; /* Warna link */
    font-weight: bold;
}

.contact-item a:hover {
    color: #00bfff; /* Warna link saat hover */
}
/* Pembatas */
.section-divider {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, #0d0d0d, #0e0e0e); /* Gradien biru */
    margin: 0px 0; /* Jarak atas dan bawah pembatas */
}

/* Footer Section */
.footer {
    background-color: #000; /* Latar belakang hitam */
    color: #ffffff; /* Warna teks putih kekuningan */
    text-align: center; /* Teks rata tengah */
    padding: 10px 20px; /* Padding kecil untuk section */
    font-size: 14px; /* Ukuran font kecil */
    font-family: 'Arial', sans-serif; /* Font modern */
}
/* Section Presiden dan Wakil Presiden dengan Background Foto */
.presiden-wakil {
    padding: 50px 20px;
    background: url('src/background\ p.png') no-repeat center center; /* Gambar background */
    background-size: cover; /* Memastikan gambar memenuhi seluruh area */
    color: white;
    text-align: center;
    position: relative; /* Untuk elemen overlay */
}

.presiden-wakil::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Overlay hitam transparan */
    z-index: 1; /* Letakkan di atas background */
}

.presiden-wakil-container {
    position: relative;
    z-index: 2; /* Letakkan konten di atas overlay */
    max-width: 1200px;
    margin: 0 auto;
}

.presiden-wakil h2 {
    font-size: 28px;
    color: #f6f6dc; /* Warna teks putih kekuningan */
    margin-bottom: 30px;
    text-transform: uppercase;
    font-family: 'Trebuchet MS', Arial, sans-serif;
}

.presiden-wakil-content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 50px; /* Jarak antar elemen */
    flex-wrap: wrap; /* Responsif */
}

.presiden-item {
    text-align: center;
    width: 250px; /* Lebar setiap item */
}

.presiden-item img {
    width: 100%;
    height: auto;
    border-radius: 15px; /* Membuat sudut foto membulat */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Bayangan lembut */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efek transisi */
}

.presiden-item img:hover {
    transform: scale(1.05); /* Zoom saat hover */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5); /* Bayangan lebih besar saat hover */
}

.presiden-description {
    background: rgba(255, 255, 255, 0.1); /* Latar belakang transparan */
    padding: 15px;
    margin-top: 15px;
    border-radius: 10px; /* Membuat sudut membulat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Bayangan lembut */
    color: #f6f6dc; /* Warna teks putih kekuningan */
    font-family: 'Trebuchet MS', Arial, sans-serif;
}

.presiden-description p:first-child {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
}

.presiden-description p:last-child {
    font-size: 14px;
    margin: 5px 0 0;
    color: #ffcc80; /* Warna teks oranye terang */
}
/* Section Sekretaris dan Bendahara */
.sekretaris-bendahara {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 50px 20px;
    background-color: #000; /* Latar belakang hitam */
    color: white; /* Warna teks putih */
    gap: 30px; /* Jarak antar kolom */
}

.sekretaris, .bendahara {
    flex: 1;
    text-align: center;
}

.sekretaris-header, .bendahara-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Jarak antara logo dan judul */
    margin-bottom: 20px;
}

/* Logo Sekretaris dan Bendahara */
.sekretaris-header img, .bendahara-header img {
    width: 60px; /* Ukuran logo */
    height: 60px; /* Ukuran logo */
    background-color: none; /* Warna latar belakang (dapat diubah) */
    border-radius: 50%; /* Membuat logo berbentuk lingkaran */
    padding: 10px; /* Jarak antara logo dan border */
    border: 2px solid none; /* Border biru (dapat diubah) */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Bayangan lembut */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efek transisi */
}

.sekretaris-header img:hover, .bendahara-header img:hover {
    transform: scale(1.1); /* Zoom saat hover */
    box-shadow: 0 0 15px rgba(0, 191, 255, 0.8); /* Efek bersinar saat hover */
}

.sekretaris-header h2, .bendahara-header h2 {
    font-size: 24px;
    color: #ffffff; /* Warna biru untuk judul */
    text-transform: uppercase;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    margin-right: 50px;
}

.sekretaris-content, .bendahara-content {
    display: flex;
    justify-content: center;
    gap: 20px; /* Jarak antar foto */
    flex-wrap: wrap; /* Membuat foto responsif */
}

.sekretaris-item, .bendahara-item {
    text-align: center;
    width: 150px; /* Lebar setiap item */
}

.sekretaris-item img, .bendahara-item img {
    width: 100%;
    height: auto;
    border-radius: 10px; /* Membuat sudut foto membulat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Bayangan lembut */
}

.sekretaris-item p, .bendahara-item p {
    margin-top: 10px;
    font-size: 14px;
    color: #f6f6dc; /* Warna teks putih kekuningan */
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

/* Warna Judul Sekretaris */
.sekretaris-header h2 {
    color: #ff5722; /* Warna biru untuk Sekretaris */
}

/* Warna Judul Bendahara */
.bendahara-header h2 {
    color: #7fbd0b; /* Warna oranye untuk Bendahara */
}
/* Section Kementrian Luar Negeri */
.kementrian-luar-negeri {
    padding: 50px 20px; /* Padding tetap */
    background-color: #740050; /* Latar belakang putih */
    color: rgb(0, 0, 0); /* Warna teks hitam */
    text-align: center;
}

.kementrian-luar-negeri .kementrian-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Jarak antara logo dan judul */
    margin-bottom: 30px;
}

.kementrian-luar-negeri .kementrian-header img {
    width: 50px; /* Ukuran logo sama dengan Sekretaris dan Bendahara */
    height: 50px;
    background-color: #740050;
    border-radius: 50%; /* Membuat logo berbentuk lingkaran */
    padding: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Bayangan lembut */
}

.kementrian-luar-negeri .kementrian-header h2 {
    font-size: 24px; /* Ukuran teks lebih besar */
    color: #ffffff; /* Warna teks hitam */
    text-transform: uppercase;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.kementrian-luar-negeri .kementrian-content {
    display: flex;
    justify-content: center;
    gap: 50px; /* Jarak antar foto */
    flex-wrap: wrap; /* Membuat foto responsif */
}

.kementrian-luar-negeri .kementrian-item {
    text-align: center;
    width: 150px; /* Lebar foto sama dengan Sekretaris dan Bendahara */
}

.kementrian-luar-negeri .kementrian-item img {
    width: 100%;
    height: auto;
    border-radius: 10px; /* Membuat sudut foto membulat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Bayangan lembut */
}

.kementrian-luar-negeri .kementrian-item p {
    margin-top: 10px; /* Jarak lebih besar */
    font-size: 14px; /* Ukuran teks sama dengan Sekretaris dan Bendahara */
    color: #ffffff; /* Warna teks putih kekuningan */
    font-weight: bold;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.kementrian-luar-negeri .kementrian-deskripsi {
    max-width: 600px; /* Batas lebar deskripsi lebih kecil */
    margin: 30px auto 0; /* Tengah secara horizontal dengan jarak atas */
    align-items: center; /* Rata tengah secara horizontal */
}

.kementrian-luar-negeri .deskripsi-box {
    background: linear-gradient(135deg, #740050, #000000); /* Gradien ungu ke oranye */
    color: white; /* Warna teks putih */
    padding: 20px; /* Padding lebih kecil */
    border-radius: 10px; /* Membuat sudut membulat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Bayangan lembut */
    text-align: justify;
    align-items: center; /* Rata tengah secara horizontal */
}

.kementrian-luar-negeri .deskripsi-box h3 {
    font-size: 18px; /* Ukuran teks lebih kecil */
    margin-bottom: 10px;
    text-transform: uppercase;
    font-weight: bold;
    color: #f6f6dc; /* Warna teks judul */
}

.kementrian-luar-negeri .deskripsi-box p {
    font-size: 14px; /* Ukuran teks lebih kecil */
    line-height: 1.5; /* Jarak antar baris lebih kecil */
    color: #f0f0f0; /* Warna teks isi */
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

/* Efek Hover pada Kotak */
.kementrian-luar-negeri .deskripsi-box:hover {
    transform: scale(1.03); /* Efek zoom lebih kecil */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Bayangan lebih besar */
}
/* Section Kementrian Dalam Negeri */
.kementrian-dalam-negeri {
    padding: 50px 20px;
    background-color: #661b72; /* Latar belakang hitam */
    color: white; /* Warna teks putih */
    text-align: center;
}

.kementrian-dalam-negeri .kementrian-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Jarak antara logo dan judul */
    margin-bottom: 30px;
}

.kementrian-dalam-negeri .kementrian-header img {
    width: 50px; /* Ukuran logo */
    height: 50px;
    background-color: #661b72;
    border-radius: 50%; /* Membuat logo berbentuk lingkaran */
    padding: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Bayangan lembut */
}

.kementrian-dalam-negeri .kementrian-header h2 {
    font-size: 20px; /* Ukuran teks lebih kecil */
    color: white; /* Warna teks putih */
    text-transform: uppercase;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.kementrian-dalam-negeri .kementrian-content {
    display: flex;
    justify-content: center;
    gap: 50px; /* Jarak antar foto */
    flex-wrap: wrap; /* Membuat foto responsif */
}

.kementrian-dalam-negeri .kementrian-item {
    text-align: center;
    width: 150px; /* Lebar foto sama dengan Kementrian Luar Negeri */
}

.kementrian-dalam-negeri .kementrian-item img {
    width: 100%;
    height: auto;
    border-radius: 10px; /* Membuat sudut foto membulat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Bayangan lembut */
}

.kementrian-dalam-negeri .kementrian-item p {
    margin-top: 10px; /* Jarak lebih besar */
    font-size: 14px; /* Ukuran teks sama dengan Kementrian Luar Negeri */
    color: #f6f6dc; /* Warna teks putih kekuningan */
    font-weight: bold;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

}

.kementrian-dalam-negeri .kementrian-deskripsi {
    max-width: 600px; /* Batas lebar deskripsi */
    margin: 0 auto; /* Tengah secara horizontal */
}

.kementrian-dalam-negeri .deskripsi-box {
    background: linear-gradient(135deg, #661b72, #000000); /* Gradien hijau */
    color: white; /* Warna teks putih */
    padding: 15px; /* Padding lebih kecil */
    border-radius: 10px; /* Membuat sudut membulat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Bayangan lembut */
    text-align: center;
}

.kementrian-dalam-negeri .deskripsi-box h3 {
    font-size: 16px; /* Ukuran teks lebih kecil */
    margin-bottom: 10px;
    text-transform: uppercase;
    font-weight: bold;
    color: #f6f6dc; /* Warna teks judul */
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.kementrian-dalam-negeri .deskripsi-box p {
    font-size: 14px; /* Ukuran teks lebih kecil */
    line-height: 1.5; /* Jarak antar baris lebih kecil */
    color: #f0f0f0; /* Warna teks isi */
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

/* Efek Hover pada Kotak */
.kementrian-dalam-negeri .deskripsi-box:hover {
    transform: scale(1.03); /* Efek zoom lebih kecil */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Bayangan lebih besar */
}
/* Section Kementrian Baru */
.kementrian-baru {
    padding: 50px 20px;
    background-color: #455f4d; /* Latar belakang hitam */
    color: white; /* Warna teks putih */
    text-align: center;
}

.kementrian-baru .kementrian-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Jarak antara logo dan judul */
    margin-bottom: 30px;
}

.kementrian-baru .kementrian-header img {
    width: 50px; /* Ukuran logo */
    height: 50px;
    background-color: #455f4d;
    border-radius: 50%; /* Membuat logo berbentuk lingkaran */
    padding: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Bayangan lembut */
}

.kementrian-baru .kementrian-header h2 {
    font-size: 20px; /* Ukuran teks lebih kecil */
    color: #ffffff; /* Warna teks putih */
    text-transform: uppercase;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.kementrian-baru .kementrian-content {
    display: flex;
    justify-content: center;
    gap: 50px; /* Jarak antar foto */
    flex-wrap: wrap; /* Membuat foto responsif */
}

.kementrian-baru .kementrian-item {
    text-align: center;
    width: 100px; /* Lebar setiap item lebih kecil */
}

.kementrian-baru .kementrian-item img {
    width: 100%;
    height: auto;
    border-radius: 10px; /* Membuat sudut foto membulat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Bayangan lembut */
}

.kementrian-baru .kementrian-item p {
    margin-top: 5px; /* Jarak lebih kecil */
    font-size: 12px; /* Ukuran teks lebih kecil */
    color: #ffffff; /* Warna teks putih */
    font-weight: bold;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.kementrian-baru .kementrian-deskripsi {
    max-width: 600px; /* Batas lebar deskripsi */
    margin: 0 auto; /* Tengah secara horizontal */
}

.kementrian-baru .deskripsi-box {
    background: linear-gradient(135deg, #455f4d, #000000); /* Gradien ungu */
    color: white; /* Warna teks putih */
    padding: 15px; /* Padding lebih kecil */
    border-radius: 10px; /* Membuat sudut membulat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Bayangan lembut */
    text-align: center;
}

.kementrian-baru .deskripsi-box h3 {
    font-size: 16px; /* Ukuran teks lebih kecil */
    margin-bottom: 10px;
    text-transform: uppercase;
    font-weight: bold;
    color: #f6f6dc; /* Warna teks judul */
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.kementrian-baru .deskripsi-box p {
    font-size: 14px; /* Ukuran teks lebih kecil */
    line-height: 1.5; /* Jarak antar baris lebih kecil */
    color: #f0f0f0; /* Warna teks isi */
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

/* Efek Hover pada Kotak */
.kementrian-baru .deskripsi-box:hover {
    transform: scale(1.03); /* Efek zoom lebih kecil */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Bayangan lebih besar */
}
/* Efek Zoom pada Semua Foto */
img:hover {
    transform: scale(2.1); /* Zoom saat hover */
    transition: transform 0.3s ease; /* Animasi transisi */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Bayangan lebih besar saat hover */
}
/* Section Kementrian Komunikasi dan Informasi */
.kementrian-kominfo {
    padding: 50px 20px;
    background-color: #023a56; /* Latar belakang hitam */
    color: white; /* Warna teks putih */
    text-align: center;
    
}

.kementrian-kominfo .kementrian-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Jarak antara logo dan judul */
    margin-bottom: 30px;
}

.kementrian-kominfo .kementrian-header img {
    width: 50px; /* Ukuran logo */
    height: 50px;
    background-color: #023a56; /* Latar belakang putih */
    border-radius: 50%; /* Membuat logo berbentuk lingkaran */
    padding: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Bayangan lembut */
}

.kementrian-kominfo .kementrian-header h2 {
    font-size: 20px; /* Ukuran teks lebih kecil */
    color: #fff; /* Warna teks putih */
    text-transform: uppercase;
}

.kementrian-kominfo .kementrian-content {
    display: flex;
    justify-content: center;
    gap: 20px; /* Jarak antar foto */
    flex-wrap: wrap; /* Membuat foto responsif */
}

.kementrian-kominfo .kementrian-item {
    text-align: center;
    width: 150px; /* Lebar setiap item */
}

.kementrian-kominfo .kementrian-item img {
    width: 100%;
    height: auto;
    border-radius: 10px; /* Membuat sudut foto membulat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Bayangan lembut */
}

.kementrian-kominfo .kementrian-item p {
    margin-top: 10px; /* Jarak lebih besar */
    font-size: 14px; /* Ukuran teks */
    color: #f6f6dc; /* Warna teks putih kekuningan */
    font-weight: bold;
}

.kementrian-kominfo .kementrian-deskripsi {
    max-width: 600px; /* Batas lebar deskripsi */
    margin: 30px auto 0; /* Tengah secara horizontal dengan jarak atas */
}

.kementrian-kominfo .deskripsi-box {
    background: linear-gradient(135deg, #023a56, #000000); /* Gradien hijau */
    color: white; /* Warna teks putih */
    padding: 20px; /* Padding lebih kecil */
    border-radius: 10px; /* Membuat sudut membulat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Bayangan lembut */
    text-align: center;
}

.kementrian-kominfo .deskripsi-box h3 {
    font-size: 18px; /* Ukuran teks lebih kecil */
    margin-bottom: 10px;
    text-transform: uppercase;
    font-weight: bold;
    color: #f6f6dc; /* Warna teks judul */
}

.kementrian-kominfo .deskripsi-box p {
    font-size: 14px; /* Ukuran teks lebih kecil */
    line-height: 1.5; /* Jarak antar baris lebih kecil */
    color: #f0f0f0; /* Warna teks isi */
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

/* Efek Hover pada Kotak */
.kementrian-kominfo .deskripsi-box:hover {
    transform: scale(1.03); /* Efek zoom lebih kecil */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Bayangan lebih besar */
}
/* Section Kementrian Minat dan Bakat */
.kementrian-minat-bakat {
    padding: 50px 20px;
    background-color: #330049; /* Latar belakang biru gelap */
    color: white; /* Warna teks putih */
    text-align: center;
}

.kementrian-minat-bakat .kementrian-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Jarak antara logo dan judul */
    margin-bottom: 30px;
}

.kementrian-minat-bakat .kementrian-header img {
    width: 50px; /* Ukuran logo */
    height: 50px;
    background-color: #330049; /* Latar belakang putih */
    border-radius: 50%; /* Membuat logo berbentuk lingkaran */
    padding: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Bayangan lembut */
}

.kementrian-minat-bakat .kementrian-header h2 {
    font-size: 20px; /* Ukuran teks lebih kecil */
    color: #fff; /* Warna teks putih */
    text-transform: uppercase;
}

.kementrian-minat-bakat .kementrian-content {
    display: flex;
    justify-content: center;
    gap: 20px; /* Jarak antar foto */
    flex-wrap: wrap; /* Membuat foto responsif */
}

.kementrian-minat-bakat .kementrian-item {
    text-align: center;
    width: 150px; /* Lebar setiap item */
}

.kementrian-minat-bakat .kementrian-item img {
    width: 100%;
    height: auto;
    border-radius: 10px; /* Membuat sudut foto membulat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Bayangan lembut */
}

.kementrian-minat-bakat .kementrian-item p {
    margin-top: 10px; /* Jarak lebih besar */
    font-size: 14px; /* Ukuran teks */
    color: #f6f6dc; /* Warna teks putih kekuningan */
    font-weight: bold;
}

.kementrian-minat-bakat .kementrian-deskripsi {
    max-width: 600px; /* Batas lebar deskripsi */
    margin: 30px auto 0; /* Tengah secara horizontal dengan jarak atas */
}

.kementrian-minat-bakat .deskripsi-box {
    background: linear-gradient(135deg, #330049, #000000); /* Gradien biru */
    color: white; /* Warna teks putih */
    padding: 20px; /* Padding lebih kecil */
    border-radius: 10px; /* Membuat sudut membulat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Bayangan lembut */
    text-align: center;
}

.kementrian-minat-bakat .deskripsi-box h3 {
    font-size: 18px; /* Ukuran teks lebih kecil */
    margin-bottom: 10px;
    text-transform: uppercase;
    font-weight: bold;
    color: #f6f6dc; /* Warna teks judul */
}

.kementrian-minat-bakat .deskripsi-box p {
    font-size: 14px; /* Ukuran teks lebih kecil */
    line-height: 1.5; /* Jarak antar baris lebih kecil */
    color: #f0f0f0; /* Warna teks isi */
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

/* Efek Hover pada Kotak */
.kementrian-minat-bakat .deskripsi-box:hover {
    transform: scale(1.03); /* Efek zoom lebih kecil */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Bayangan lebih besar */
}
/* Section Kementrian Sosial dan Politik */
.kementrian-sospol {
    padding: 50px 20px;
    background-color: #5d0000; /* Latar belakang merah gelap */
    color: white; /* Warna teks putih */
    text-align: center;
}

.kementrian-sospol .kementrian-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Jarak antara logo dan judul */
    margin-bottom: 30px;
}

.kementrian-sospol .kementrian-header img {
    width: 50px; /* Ukuran logo */
    height: 50px;
    background-color: #5d0000; /* Latar belakang putih */
    border-radius: 50%; /* Membuat logo berbentuk lingkaran */
    padding: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Bayangan lembut */
}

.kementrian-sospol .kementrian-header h2 {
    font-size: 20px; /* Ukuran teks lebih kecil */
    color: #fff; /* Warna teks putih */
    text-transform: uppercase;
}

.kementrian-sospol .kementrian-content {
    display: flex;
    justify-content: center;
    gap: 20px; /* Jarak antar foto */
    flex-wrap: wrap; /* Membuat foto responsif */
}

.kementrian-sospol .kementrian-item {
    text-align: center;
    width: 150px; /* Lebar setiap item */
}

.kementrian-sospol .kementrian-item img {
    width: 100%;
    height: auto;
    border-radius: 10px; /* Membuat sudut foto membulat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Bayangan lembut */
}

.kementrian-sospol .kementrian-item p {
    margin-top: 10px; /* Jarak lebih besar */
    font-size: 14px; /* Ukuran teks */
    color: #f6f6dc; /* Warna teks putih kekuningan */
    font-weight: bold;
}

.kementrian-sospol .kementrian-deskripsi {
    max-width: 600px; /* Batas lebar deskripsi */
    margin: 30px auto 0; /* Tengah secara horizontal dengan jarak atas */
}

.kementrian-sospol .deskripsi-box {
    background: linear-gradient(135deg, #5d0000, #000000); /* Gradien merah */
    color: white; /* Warna teks putih */
    padding: 20px; /* Padding lebih kecil */
    border-radius: 10px; /* Membuat sudut membulat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Bayangan lembut */
    text-align: center;
}

.kementrian-sospol .deskripsi-box h3 {
    font-size: 18px; /* Ukuran teks lebih kecil */
    margin-bottom: 10px;
    text-transform: uppercase;
    font-weight: bold;
    color: #f6f6dc; /* Warna teks judul */
}

.kementrian-sospol .deskripsi-box p {
    font-size: 14px; /* Ukuran teks lebih kecil */
    line-height: 1.5; /* Jarak antar baris lebih kecil */
    color: #f0f0f0; /* Warna teks isi */
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

/* Efek Hover pada Kotak */
.kementrian-sospol .deskripsi-box:hover {
    transform: scale(1.03); /* Efek zoom lebih kecil */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Bayangan lebih besar */
}
/* Aturan Global untuk Font */
body {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; /* Jenis font yang sama */
}
/* Efek Zoom pada Foto di Section Presiden dan Wakil Presiden */
.presiden-wakil .presiden-item img:hover {
    transform: scale(1.55); /* Zoom lebih kecil */
    transition: transform 0.3s ease; /* Animasi transisi */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Bayangan lebih kecil */
}
/* Efek Muncul (Fade-In) */
.fade-in {
    opacity: 0; /* Awalnya tidak terlihat */
    transform: translateY(20px); /* Geser sedikit ke bawah */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Transisi animasi */
}

.fade-in.show {
    opacity: 1; /* Muncul */
    transform: translateY(0); /* Kembali ke posisi semula */
}
/* Hilangkan Efek Hover pada Logo dan Foto Struktural */
.nav-logo:hover,
.struktural-image img:hover {
    transform: none; /* Hilangkan efek zoom */
    box-shadow: none; /* Hilangkan bayangan */
    transition: none; /* Hilangkan transisi */
}
/* Section Tentang Saya */
.tentang-saya {
    padding: 50px 20px;
    background: linear-gradient(135deg, #004d40, #00796b); /* Gradien hijau gelap */
    color: white;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tentang-saya-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    width: 100%;
    gap: 50px; /* Jarak antara tanda tangan dan foto */
    flex-wrap: wrap; /* Responsif */
}

.tanda-tangan {
    flex: 1;
    text-align: center;
}

.tanda-tangan img {
    width: 80%; /* Ukuran tanda tangan */
    max-width: 300px;
    height: auto;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)); /* Bayangan lembut */
}

.foto-dan-nama {
    flex: 1;
    text-align: center;
}

.foto-dan-nama img {
    width: 100%; /* Foto memenuhi area */
    max-width: 400px; /* Batas maksimal ukuran foto */
    height: auto;
    border-radius: 15px; /* Membuat sudut foto membulat */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Bayangan lembut */
}

.foto-dan-nama .nama {
    background: rgba(255, 255, 255, 0.1); /* Latar belakang transparan */
    padding: 10px 20px; /* Padding lebih kecil */
    margin-top: 15px;
    border-radius: 10px; /* Membuat sudut membulat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Bayangan lembut */
    color: #f6f6dc; /* Warna teks putih kekuningan */
    font-family: 'Trebuchet MS', Arial, sans-serif;
    max-width: 300px; /* Batas lebar deskripsi */
    margin: 15px auto 0; /* Tengah secara horizontal */
}

.foto-dan-nama .nama p:first-child {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
}

.foto-dan-nama .nama p:last-child {
    font-size: 14px;
    margin: 5px 0 0;
    color: #ffcc80; /* Warna teks oranye terang */
}
/* Foto di Section Tentang Saya Tanpa Efek Zoom */
.tentang-saya .foto-dan-nama img {
    width: 100%; /* Foto memenuhi area */
    max-width: 400px; /* Batas maksimal ukuran foto */
    height: auto;
    border-radius: 15px; /* Membuat sudut foto membulat */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Bayangan lembut */
    transition: none; /* Hilangkan transisi */
    transform: none; /* Hilangkan transformasi */
}
/* Section Program Kerja */
/* Section Program Kerja */
.program-kerja {
    padding: 50px 20px;
    background: linear-gradient(135deg, #5d0000, #000000); /* Gradien merah gelap */
    color: white;
    text-align: center;
}

.program-kerja-container {
    max-width: 1200px;
    margin: 0 auto;
}

.program-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px; /* Jarak antara logo dan teks */
    margin-bottom: 30px;
    margin-top: 30px;
}

.program-logo {
    width: 80px; /* Ukuran logo */
    height: 80px;
    border-radius: 50%; /* Membuat logo berbentuk lingkaran */
    background-color: #5d0000;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Bayangan lembut */
}

.program-title h2 {
    font-size: 24px;
    color: #f6f6dc; /* Warna teks putih kekuningan */
    margin: 0;
    text-transform: uppercase;
}

.program-title p {
    font-size: 26px;
    color: #ffcc80; /* Warna teks oranye terang */
    margin: 5px 0 0;
    font-family: 'GREAT Vibes', cursive; /* Font yang lebih elegan */
}

.program-content {
    display: flex;
    gap: 30px; /* Jarak antara dokumentasi dan deskripsi */
    flex-wrap: wrap; /* Responsif */
    justify-content: center;
}

.program-dokumentasi {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Dua kolom */
    gap: 10px; /* Jarak antar foto */
}

.program-dokumentasi img {
    width: 100%;
    height: 150px;
    object-fit: cover; /* Memastikan foto tidak terdistorsi */
    border-radius: 10px; /* Membuat sudut foto membulat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Bayangan lembut */
}

.program-deskripsi {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.deskripsi-box {
    background: rgba(255, 255, 255, 0.1); /* Latar belakang transparan */
    padding: 20px;
    border-radius: 10px; /* Membuat sudut membulat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Bayangan lembut */
    color: #f6f6dc; /* Warna teks putih kekuningan */
    max-width: 400px; /* Batas lebar deskripsi */
    text-align: left;
}

.deskripsi-box h3 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #ffcc80; /* Warna teks oranye terang */
}

.deskripsi-box p {
    font-size: 14px;
    line-height: 1.6;
    color: #ffffff; /* Warna teks putih */
}
/* Section Program Kerja: Safari Fakultas */
.program-kerja:nth-of-type(2) {
    background: linear-gradient(135deg, #661b72, #000000); /* Gradien hijau gelap untuk background section */
    color: white;
    padding: 50px 20px;
}

.program-kerja:nth-of-type(2) .program-logo {
    background-color: #661b72; /* Warna background logo oranye terang */
    width: 80px;
    height: 80px;
    border-radius: 50%; /* Membuat logo berbentuk lingkaran */
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Bayangan lembut */
}
/* Section Program Kerja: Anggota Muda */
.program-kerja:nth-of-type(3) {
    background: linear-gradient(135deg, #455f4d, #000000); /* Gradien coklat gelap */
    color: white;
    padding: 50px 20px;
}

.program-kerja:nth-of-type(3) .program-logo {
    background-color: #455f4d; /* Warna background logo oranye terang */
    width: 80px;
    height: 80px;
    border-radius: 50%; /* Membuat logo berbentuk lingkaran */
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Bayangan lembut */
}
/* Section Program Kerja: RUMBEL, Suara Tepi Jalan, GARASI */
.program-kerja:nth-of-type(4) {
    background: linear-gradient(135deg, #5d0000, #000000); /* Gradien merah gelap */
    color: white;
    padding: 50px 20px;
}

.program-kerja:nth-of-type(4) .program-logo {
    background-color: #5d0000; /* Warna background logo oranye terang */
    width: 80px;
    height: 80px;
    border-radius: 50%; /* Membuat logo berbentuk lingkaran */
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Bayangan lembut */
}
/* Section Ruang Aspirasi */
.ruang-aspirasi {
    padding: 50px 20px;
    background: linear-gradient(135deg, #1a237e, #3949ab); /* Gradien biru gelap */
    color: white;
    text-align: center;
}

.ruang-aspirasi-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.ruang-aspirasi h2 {
    font-size: 28px;
    margin-bottom: 20px;
    color: #ffcc80; /* Warna teks oranye terang */
}

.ruang-aspirasi p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 30px;
}

.aspirasi-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.aspirasi-form label {
    font-size: 14px;
    font-weight: bold;
    color: #f6f6dc; /* Warna teks putih kekuningan */
}

.aspirasi-form input,
.aspirasi-form textarea {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    font-size: 14px;
}

.aspirasi-form button {
    padding: 10px 20px;
    background: #ffcc80; /* Warna tombol oranye terang */
    color: #1a237e; /* Warna teks biru gelap */
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease;
}

.aspirasi-form button:hover {
    background: #ffa726; /* Warna tombol saat hover */
}
/* Atur Deskripsi Box di Halaman About Us */
.about-us .deskripsi-box,
.kementrian-deskripsi .deskripsi-box {
    margin: 0 auto; /* Tengah secara horizontal */
    text-align: center; /* Rata tengah teks */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Tengah secara vertikal */
    align-items: center; /* Tengah secara horizontal */
    height: 100%; /* Pastikan deskripsi box memenuhi tinggi section */
}

.kementrian-deskripsi {
    display: flex;
    justify-content: center; /* Tengah secara horizontal */
    align-items: center; /* Tengah secara vertikal */
    height: 100%; /* Pastikan deskripsi berada di tengah section */
}
/* Section Sejarah BEM UNIGA */
.sejarah-bem {
    padding: 50px 20px;
    background: linear-gradient(135deg, #1a237e, #3949ab); /* Gradien biru gelap */
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden; /* Untuk memastikan gambar tidak keluar dari area section */
}

.sejarah-bem-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2; /* Pastikan konten berada di atas gambar */
}

.sejarah-bem h2 {
    font-size: 28px;
    margin-bottom: 20px;
    color: #ffcc80; /* Warna teks oranye terang */
    text-transform: none;
}

.sejarah-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.sejarah-list {
    list-style-type: decimal; /* Gunakan angka untuk daftar */
    padding-left: 20px; /* Jarak dari tepi */
    text-align: left; /* Rata kiri untuk daftar */
    font-size: 16px;
    line-height: 1.8;
    color: #f6f6dc; /* Warna teks putih kekuningan */
    flex: 1;
}

.sejarah-list li {
    margin-bottom: 10px; /* Jarak antar item */
}

.sejarah-images {
    display: flex;
    gap: 10px; /* Jarak antar gambar */
    flex: 1;
    justify-content: center;
}

.sejarah-images img {
    width: 100%;
    max-width: 300px; /* Batas maksimal ukuran gambar */
    height: auto;
    filter: grayscale(100%); /* Saturasi 0 untuk membuat gambar hitam putih */
    border-radius: 10px; /* Membuat sudut gambar membulat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Bayangan lembut */
    transition: transform 0.3s ease, filter 0.3s ease; /* Efek transisi */
}

.sejarah-images img:hover {
    filter: grayscale(0%); /* Kembalikan warna saat hover */
    transform: scale(1.05); /* Zoom saat hover */
}
/* Sub Judul Latar Belakang */
.sejarah-bem h3 {
    font-size: 22px;
    margin-bottom: 20px;
    color: #f6f6dc; /* Warna teks putih kekuningan */
    text-transform: none;
    font-weight: bold;
    font-family: 'GREAT Vibes', cursive; /* Font yang lebih artistik */
}
/* Timeline Content */
.timeline-content {
    display: flex;
    gap: 20px; /* Jarak antara timeline dan foto */
    align-items: flex-start; /* Sejajarkan ke atas */
}

/* Timeline List */
.timeline-list {
    flex: 2; /* Timeline lebih lebar */
    position: relative;
    padding-left: 40px; /* Jarak dari garis vertikal */
    border-left: 4px solid #ffcc80; /* Garis vertikal timeline */
}

.timeline-item {
    position: relative;
    margin-bottom: 20px; /* Jarak antar item */
}

.timeline-item:last-child {
    margin-bottom: 0; /* Hilangkan jarak untuk item terakhir */
}

.timeline-line {
    position: absolute;
    left: -28px; /* Posisi garis di sebelah kiri teks */
    top: 0;
    width: 12px;
    height: 12px;
    background-color: #ffcc80; /* Warna lingkaran */
    border-radius: 50%; /* Membuat lingkaran */
    box-shadow: 0 0 8px rgba(255, 204, 128, 0.8); /* Efek glow */
}

.timeline-item p {
    margin: 0;
    font-size: 16px;
    color: #190057; /* Warna teks putih kekuningan */
    line-height: 1.8;
}

/* Foto Timeline */
.timeline-images {
    flex: 1; /* Foto lebih kecil */
    display: flex;
    flex-direction: column; /* Foto sejajar ke bawah */
    gap: 20px; /* Jarak antar foto */
}

.timeline-image-item {
    width: 100%;
    border-radius: 10px; /* Membuat sudut foto membulat */
    overflow: hidden; /* Memastikan foto tidak keluar dari bingkai */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Bayangan lembut */
    background-color: #ffffff; /* Latar belakang putih */
}

.timeline-image-item img {
    width: 100%; /* Foto memenuhi bingkai */
    height: auto; /* Menjaga proporsi foto */
    display: block; /* Menghilangkan jarak bawaan */
}

.timeline-images img:hover {
    filter: grayscale(0%); /* Kembalikan warna saat hover */
    transform: scale(1.05); /* Zoom saat hover */
}
/* Sub Judul Timeline Terbentuknya BEM UNIGA */
.timeline-bem h3 {
    font-family: 'GREAT Vibes', cursive; /* Font yang lebih artistik */
    font-size: 22px;
    margin-bottom: 20px;
    color: #000000; /* Warna teks putih kekuningan */
    text-transform: none;
    font-weight: bold;
}
/* Section Dokumentasi Pelantikan Pengurus BEM UNIGA */
.dokumentasi-pelantikan {
    padding: 50px 20px;
    background: linear-gradient(135deg, #1a237e, #3949ab); /* Gradien biru gelap */
    color: white;
    text-align: center;
}

.dokumentasi-container {
    max-width: 1200px;
    margin: 0 auto;
}

.dokumentasi-pelantikan h2 {
    font-size: 28px;
    margin-bottom: 10px;
    color: #ffcc80; /* Warna teks oranye terang */
    text-transform: uppercase;
}

.dokumentasi-pelantikan h3 {
    font-size: 20px;
    margin-bottom: 30px;
    color: #f6f6dc; /* Warna teks putih kekuningan */
    font-style: italic;
}

.dokumentasi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsif */
    gap: 20px; /* Jarak antar foto */
    justify-items: center; /* Foto rata tengah */
}

.dokumentasi-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px; /* Membuat sudut foto membulat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Bayangan lembut */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #ffffff; /* Latar belakang putih */
}

.dokumentasi-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease; /* Efek transisi */
}

.dokumentasi-item:hover {
    transform: scale(1.05); /* Zoom saat hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); /* Bayangan lebih besar saat hover */
}

.dokumentasi-item:hover img {
    transform: scale(1.1); /* Zoom gambar saat hover */
}
/* Section Program Kerja: Pesta Rakyat Uniga */
.program-kerja.pesta-rakyat {
    background: linear-gradient(135deg, #330049, #000000); /* Gradien hijau */
    color: white;
    padding: 50px 20px;
}

.program-kerja.pesta-rakyat .program-logo {
    background-color: #330049; /* Latar belakang logo putih */
    width: 80px;
    height: 80px;
    border-radius: 50%; /* Membuat logo berbentuk lingkaran */
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Bayangan lembut */
}

.program-kerja.pesta-rakyat .program-dokumentasi img {
    border-radius: 10px; /* Membuat sudut foto membulat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Bayangan lembut */
    transition: transform 0.3s ease; /* Efek transisi */
}

.program-kerja.pesta-rakyat .program-dokumentasi img:hover {
    transform: scale(1.05); /* Zoom saat hover */
}

.program-kerja.pesta-rakyat .deskripsi-box {
    background-color: rgba(255, 255, 255, 0.1); /* Latar belakang semi-transparan */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Bayangan lembut */
}
/* Media Query untuk layar dengan lebar maksimum 768px (tablet dan mobile) */
@media (max-width: 768px) {
    /* Navbar */
    .nav-left {
        flex-direction: column;
        align-items: center;
    }

    .nav-logo {
        height: 40px; /* Perkecil ukuran logo */
    }

    /* Hero Section */
    .hero-section {
        text-align: center;
        padding: 20px;
    }

    .hero-overlay h1 {
        font-size: 24px; /* Perkecil ukuran teks */
    }

    /* Visi Misi */
    .visi-misi-container {
        flex-direction: column;
        gap: 20px;
    }

    .visi, .misi {
        width: 100%;
    }

    /* Kajian Isu */
    .kajian-isu-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Dokumentasi */
    .dokumentasi-slider {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .dokumentasi-item img {
        width: 100%;
        height: auto;
    }

    /* Program Kerja */
    .program-content {
        flex-direction: column;
        gap: 20px;
    }

    .program-dokumentasi {
        grid-template-columns: 1fr;
    }

    .program-dokumentasi img {
        height: auto;
    }

    /* Kontak */
    .contact-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .contact-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .contact-item img {
        margin-bottom: 10px;
    }
}
/* Navbar */
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1c0344; /* Warna latar belakang */
    color: white;
    padding: 10px 20px;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Bayangan */
    font-family: 'Trebuchet MS', Arial, sans-serif;
}

/* Hamburger Button */
.hamburger {
    display: none; /* Sembunyikan di desktop */
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1100;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background: white;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Menu */
.menu {
    display: flex;
    gap: 20px;
}

.menu a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    transition: color 0.3s ease;
}

.menu a:hover {
    color: #00bfff; /* Warna biru terang saat hover */
}

/* Mobile Styles */
@media (max-width: 768px) {
    .hamburger {
        display: flex; /* Tampilkan hamburger di mobile */
    }

    .menu {
        display: none; /* Sembunyikan menu secara default */
        position: absolute;
        top: 60px;
        right: 20px;
        flex-direction: column;
        gap: 10px;
        background: #1c0344; /* Warna latar belakang menu */
        padding: 15px;
        border-radius: 5px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Bayangan */
    }

    .menu.active {
        display: flex; /* Tampilkan menu saat aktif */
    }

    .nav-right {
        position: relative;
    }
}
@media (max-width: 768px) {
    /* Tambahkan jarak antara judul dan navbar */
    h2, h3 {
        margin-top: 80px; /* Tambahkan jarak atas */
    }
}
@media (max-width: 768px) {
    /* Susun foto di section Sejarah BEM UNIGA secara vertikal */
    .sejarah-images {
        flex-direction: column; /* Susun gambar secara vertikal */
        align-items: center; /* Rata tengah gambar */
        gap: 20px; /* Tambahkan jarak antar gambar */
    }

    .sejarah-images img {
        width: 100%; /* Gambar memenuhi lebar layar */
        max-width: 300px; /* Batas maksimal ukuran gambar */
        height: auto;
    }
}
@media (max-width: 768px) {
    /* Section About Us */
    .sejarah-content {
        flex-direction: column; /* Susun elemen secara vertikal */
        gap: 20px; /* Tambahkan jarak antar elemen */
    }

    /* Section Program Kerja */
    .program-content {
        flex-direction: column; /* Susun elemen secara vertikal */
        gap: 20px; /* Tambahkan jarak antar elemen */
    }

    .program-dokumentasi {
        grid-template-columns: 1fr; /* Satu kolom untuk setiap foto */
        gap: 20px; /* Tambahkan jarak antar foto */
    }

    .program-dokumentasi img {
        width: 100%; /* Gambar memenuhi lebar layar */
        height: auto;
    }

   /* Section Ruang Aspirasi */
.ruang-aspirasi {
    padding: 50px 20px;
    background-color: #f9f9f9;
    text-align: center;
}

.ruang-aspirasi-container {
    max-width: 800px;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.ruang-aspirasi h2 {
    font-size: 32px;
    color: #1c0344;
    margin-bottom: 20px;
    font-family: 'Great Vibes', cursive;
}

.ruang-aspirasi p {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 20px;
}

.aspirasi-link {
    margin-bottom: 30px;
}

.aspirasi-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #1c0344;
    color: #000000;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.aspirasi-button:hover {
    background-color: #000000;
}

.qr-code {
    margin-top: 20px;
}

.qr-code p {
    font-size: 16px;
    margin-bottom: 10px;
}

section.ruang-aspirasi .qr-image {
    width: 100px;
    height: 100px;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: none;
}

section.ruang-aspirasi .qr-image:hover,
section.ruang-aspirasi .qr-image:active {
    transform: none !important;
}
@media (max-width: 768px) {
    /* Section Sekretaris dan Bendahara */
    .sekretaris-bendahara {
        flex-direction: column; /* Susun elemen secara vertikal */
        gap: 20px; /* Tambahkan jarak antar elemen */
        align-items: center; /* Rata tengah elemen */
        text-align: center; /* Teks rata tengah */
    }

    .sekretaris, .bendahara {
        width: 100%; /* Elemen memenuhi lebar layar */
    }

    .sekretaris-header, .bendahara-header {
        display: flex;
        flex-direction: row; /* Tetap susun logo dan judul secara horizontal */
        align-items: center; /* Rata tengah secara vertikal */
        justify-content: center; /* Rata tengah secara horizontal */
        gap: 10px; /* Tambahkan jarak antara logo dan judul */
    }

    .sekretaris-header img, .bendahara-header img {
        width: 50px; /* Perkecil ukuran logo */
        height: 50px;
    }

    .sekretaris-header h2, .bendahara-header h2 {
        font-size: 18px; /* Perkecil ukuran teks judul */
        margin: 0; /* Hilangkan margin default */
    }

    .sekretaris-content, .bendahara-content {
        justify-content: center; /* Rata tengah elemen */
        gap: 15px; /* Tambahkan jarak antar foto */
        flex-wrap: wrap; /* Responsif */
    }

    .sekretaris-item, .bendahara-item {
        width: 100%; /* Foto memenuhi lebar layar */
        max-width: 200px; /* Batas maksimal ukuran foto */
    }

    .sekretaris-item img, .bendahara-item img {
        width: 100%; /* Gambar memenuhi lebar elemen */
        height: auto;
        border-radius: 10px; /* Membuat sudut foto membulat */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Bayangan lembut */
    }

    .sekretaris-item p, .bendahara-item p {
        font-size: 14px; /* Perkecil ukuran teks */
        margin-top: 10px; /* Tambahkan jarak atas */
    }
}
@media (max-width: 768px) {
    /* Section Kementrian */
    .kementrian-header {
        display: flex;
        flex-direction: row; /* Tetap susun logo dan nama secara horizontal */
        align-items: center; /* Rata tengah secara vertikal */
        justify-content: center; /* Rata tengah secara horizontal */
        gap: 10px; /* Tambahkan jarak antara logo dan nama */
    }

    .kementrian-header img {
        width: 50px; /* Perkecil ukuran logo */
        height: 50px;
    }

    .kementrian-header h2 {
        font-size: 18px; /* Perkecil ukuran teks nama kementrian */
        margin: 0; /* Hilangkan margin default */
    }

    /* Konten Kementrian */
    .kementrian-content {
        justify-content: center; /* Rata tengah elemen */
        gap: 15px; /* Tambahkan jarak antar elemen */
        flex-wrap: wrap; /* Responsif */
    }

    .kementrian-item {
        width: 100%; /* Foto memenuhi lebar layar */
        max-width: 200px; /* Batas maksimal ukuran foto */
    }

    .kementrian-item img {
        width: 100%; /* Gambar memenuhi lebar elemen */
        height: auto;
        border-radius: 10px; /* Membuat sudut foto membulat */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Bayangan lembut */
    }

    .kementrian-item p {
        font-size: 14px; /* Perkecil ukuran teks */
        margin-top: 10px; /* Tambahkan jarak atas */
    }
}
.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none; /* Sembunyikan secara default */
    background-color: #1c0344;
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

.scroll-to-top:hover {
    background-color: #00bfff;
}
@media (max-width: 768px) {
    .contact-us {
        padding: 30px 15px;
    }

    .contact-us h2 {
        font-size: 20px; /* Perkecil ukuran teks judul */
    }

    .contact-info {
        flex-direction: column; /* Susun elemen secara vertikal */
        gap: 15px; /* Tambahkan jarak antar elemen */
    }

    .contact-item {
        width: 100%; /* Elemen memenuhi lebar layar */
        max-width: 300px; /* Batas maksimal lebar */
    }

    .contact-item img {
        width: 40px; /* Perkecil ukuran ikon */
        height: 40px;
    }

    .contact-item p {
        font-size: 12px; /* Perkecil ukuran teks */
    }
}
@media (max-width: 768px) {
    .visi-misi-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Dua kolom */
        gap: 20px; /* Jarak antar box */
        justify-content: center; /* Rata tengah */
    }

    .visi, .misi {
        max-width: 100%; /* Box memenuhi lebar kolom */
    }
}
/* Splash Screen */
.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1c0344; /* Warna latar belakang */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 1;
    transition: opacity 1s ease; /* Efek transisi */
}

.splash-screen h1 {
    font-size: 36px;
    font-family: 'Great Vibes', cursive;
    animation: fadeIn 2s ease; /* Efek fade-in pada teks */
}

/* Animasi Fade-In */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Sembunyikan Splash Screen */
.splash-screen.hidden {
    opacity: 0;
    pointer-events: none; /* Nonaktifkan interaksi */
}
/* Section Berita */
.berita {
    padding: 40px 20px;
    background-color: #f9f9f9; /* Warna latar belakang */
    text-align: center;
}

.berita h2 {
    font-size: 72px;
    margin-bottom: 30px;
    color: #1c0344; /* Warna teks */
    font-family: 'GREAT Vibes', cursive; /* Font yang lebih artistik */
    
}

.berita-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsif */
    gap: 20px;
}

.berita-item {
    background-color: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Bayangan lembut */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.berita-item:hover {
    transform: translateY(-10px); /* Efek melayang */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Bayangan lebih besar */
}

.berita-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 2px solid #1c0344; /* Garis pemisah */
}

.berita-content {
    padding: 20px;
    text-align: left;
}

.berita-content h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #1c0344;
}

.berita-content p {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}
.berita-item img {
    transition: transform 0.3s ease; /* Efek transisi */
}

.berita-item:hover img {
    transform: scale(1.1); /* Zoom saat hover */
}
/* Berita Detail Section */
.berita-detail {
    padding: 50px 20px;
    background-color: #f9f9f9;
    text-align: left;
}

.berita-container {
    max-width: 800px;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.berita-container h1 {
    font-size: 28px;
    color: #1c0344;
    margin-bottom: 20px;
    text-align: center;
}

.berita-image {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 20px;
}

.berita-keterangan {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 20px;
    color: #333;
}

.berita-container ul {
    list-style: disc;
    margin-left: 20px;
    margin-bottom: 20px;
}

.berita-container ul li {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.6;
}

blockquote {
    font-style: italic;
    color: #555;
    border-left: 4px solid #1c0344;
    padding-left: 10px;
    margin: 20px 0;
}

footer {
    text-align: center;
    padding: 20px;
    background-color: #1c0344;
    color: white;
    font-size: 14px;
}

}
/* Berita Detail Section */
.berita-detail {
    padding: 50px 20px;
    background-color: #f9f9f9;
    text-align: left;
}

.berita-container {
    max-width: 800px;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.berita-container h1 {
    font-size: 28px;
    color: #1c0344;
    margin-bottom: 20px;
    text-align: center;
}

.berita-container h2 {
    font-size: 22px;
    color: #1c0344;
    margin-top: 20px;
    margin-bottom: 10px;
}

.berita-container p {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 15px;
}

.berita-container ul {
    list-style: disc;
    margin-left: 20px;
    margin-bottom: 20px;
}

.berita-container ul li {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.6;
}

.berita-image {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 20px 0;
}

footer {
    text-align: center;
    padding: 20px;
    background-color: #1c0344;
    color: white;
    font-size: 14px;

}
/* Section Berita */
.berita {
    padding: 50px 20px;
    background-color: #f9f9f9; /* Warna latar belakang */
    text-align: center;
}

.berita-container {
    max-width: 1200px;
    margin: 0 auto;
}

.berita h2 {
    font-size: 32px;
    margin-bottom: 20px;
    color: #1c0344; /* Warna teks */
    font-family: 'Great Vibes', cursive;
}

.berita-description {
    font-size: 16px;
    color: #555;
    margin-bottom: 30px;
}

.berita-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsif */
    gap: 20px;
}

.berita-item {
    background-color: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Bayangan lembut */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.berita-item:hover {
    transform: translateY(-10px); /* Efek melayang */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Bayangan lebih besar */
}

.berita-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 2px solid #1c0344; /* Garis pemisah */
}

.berita-content {
    padding: 20px;
    text-align: left;
}

.berita-content h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #1c0344;
}

.berita-content p {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}