@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
body {
    margin: 0;
    padding: 0;
    font-family: "Plus Jakarta Sans", serif;
    background-color: #f8f8f8;
    flex: 1;
}

/* Fade In */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: trannslateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.email  {
    gap: 60px;
}

.footer-column p {
    padding-bottom: 3px;
    margin-bottom: 3px;
}

.footer {
    background-color: #213555;
    color: white;
    padding: 20px 50px;
    padding-top: 50px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40%;
    flex-wrap: wrap;
    animation: fadeIn 1s ease-in-out; 
}

/* Animasi Bounce */
@keyframes bounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.footer-logo {
    max-width: 200px;
}

.footer-logo img {
    width: 100px;
    margin-bottom: 10px;
}

.footer-contact {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    text-align: center;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
    text-decoration: none;
    color: #333;
    font-size: 15px;
    transition: transform 0.5s ease-in-out, color 0.3s ease-in-out;
}

/* Efek Hover */
.footer-contact a:hover {
    transform: rotate(360deg) scale(1.2); /* Putar 360 derajat dan perbesar */
    color: #007bff; /* Ubah warna ikon saat di-hover */
    font-size: 20px;
    text-shadow: 0 0 10px #007bff; /* Efek Glow */
    animation: bounce 0.5s ease-in-out; /* Bounce */
}

.footer-contact a {
    color: white;
    text-decoration: none;
    font-size: 15px; /* Ukuran ikon */
    transition: transform 0.5s ease-in-out, color 0.3s ease-in-out; /* Efek smooth */
}

.footer-columns {
    display: flex;
    gap: 60px;
}

.footer-column {
    font-size: 12px;
}

.footer-column h4 {
    margin: 0 0 10px;
    font-size: 14px;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column ul li {
    margin-bottom: 8px;
}

.footer-column ul li a {
    color: white;
    text-decoration: none;
}

/* Efek Glow pada Link */
.footer-column ul li a:hover {
    text-shadow: 0 0 10px rgba(255, 255, 0.8); /*Efek Glow*/
}

.footer-social {
    display: flex;
    gap: 10px;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
}

.footer-social a {
    text-decoration: none;
    color: white;
    font-size: 18px;
    display: inline-block;
    width: 40px;
    height: 40px;
    background: #213555;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    margin: 5px;
}

.footer-bottom {    
    text-align: center;
    font-size: 12px;
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    background-color: #213555;
    color: #F5DAD2;
    transition: text-shadow 0.3s ease-in-out; /*Efek smooth */
}

.footer-bottom:hover {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /*Efek Glow Putih*/
}

.footer-logo h5{
    padding-left: 8px;
}

.h5 {
    text-align: center;
}

/* Default: Footer Desktop Muncul, Footer Mobile Tersembunyi */
.footer-desktop {
    display: block;
}

.footer-mobile {
    display: none;
}

/* === Footer Mobile Styling === */


body {
    margin: 0;
    padding: 0;
    font-family: "Plus Jakarta Sans", serif;
    background-color: #f8f8f8;
    flex: 1;
}

.footer-mobile {
    background-color:  #213555;; /* Samakan warna dengan desktop */
    color: white;
    text-align: left; /* Semua teks rata kiri */
    padding: 20px;
    font-family: 'Poppins', sans-serif; /* Sesuaikan font dengan desktop */
}

.footer-container {
    position: relative; /* Membuat container menjadi referensi untuk posisi absolut */
}

/* Logo Footer */
.footer-mobile-logo {
    text-align: left; /* Pastikan logo tetap rata kiri */
    margin-left: 0; /* Hilangkan margin kiri agar logo sejajar dengan teks address */
}

.footer-section.social:hover {
    transform: rotate(360deg) scale(1.2); /* Putar 360 derajat dan perbesar */
    color: #007bff; /* Ubah warna ikon saat di-hover */
    font-size: 20px;
}

.footer-mobile-logo img {
    width: 80px; /* Ukuran logo untuk mobile */
    height: auto; /* Menjaga proporsi gambar */
    margin-bottom: 10px; /* Memberi jarak antara logo dan teks address */
}

/* Address Section */

.footer-section.address {
    margin-left: 10px; /* Hilangkan margin kiri agar teks sejajar dengan logo */
}

.footer-section.address h3 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
}

.footer-section address p {
    font-size: 11px;
    margin: 2px 0;
}

.footer-section .company-name {
    font-size: 12px;
    font-weight: bold;
}

/* Grid Layout untuk Sitemap & Contact Us */
.footer-grid {
    display: flex;
    justify-content: space-between;
    text-align: left;
    margin-top: 15px;
    gap: 20px;
}


.footer-grid .footer-section {
    padding-left: 10px;
    margin-top: 10px;
}

.footer-grid h4 {
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 8px;
}

.footer-grid ul {
    list-style: none;
    padding: 0;
}

.footer-grid li {
    font-size: 15px;
    margin: 3px 0;
}

.footer-grid li i {
    margin-right: 5px;
}

.footer-grid ul li a {
    text-decoration: none;
    color: white;
}

.footer-grid ul li a:hover {
    cursor: pointer;
}

/* Follow Us Section */
.footer-section.social {
    margin-top: 10px;
    padding-left: 10px;
}

.footer-section.social h4 {
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 10px;
}

.footer-icons {
    display: flex;
    justify-content: left; /* Rata kiri */
    gap: 15px;
}

.footer-icons a {
    font-size: 14px;
    color: white;
}

/* Copyright Section */
.footer-copyright {
    text-align: center;
    font-size: 12px;
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    background-color: #213555;
    color: #F5DAD2;
}

/* === RESPONSIVE DESIGN (Untuk Mobile) === */
@media (max-width: 400px) {
    .footer-desktop {
        display: none; /* Sembunyikan footer desktop */
    }

    .footer-mobile {
        display: block; /* Tampilkan footer mobile */
    }

    .footer-mobile-logo img {
        width: 60px; /* Ukuran lebih kecil di mobile */
        max-width: 650px;
    }
    
    .footer-section.address p {
        font-size: small;
    }
}

/* === RESPONSIVE DESIGN (Untuk Mobile) === */
@media (min-width: 400px) and (max-width: 767px) {
    .footer-desktop {
        display: none; /* Sembunyikan footer desktop */
    }

    .footer-mobile {
        display: block; /* Tampilkan footer mobile */
    }

    .footer-mobile-logo img {
        width: 100px; /* Ukuran lebih kecil di mobile */
        max-width: 100%;
        padding-right: 30px;
    }
}


/* Media Queries untuk Layar Mobile Lebih Kecil (375px) */
@media (max-width: 390px) {
    .footer {
        padding: 10px 10px; /* Padding lebih kecil lagi */
        gap: 10%; /* Mengurangi jarak antar elemen lebih lanjut */
    }

    .follow {
        font-size: 12px;
    }
    .footer-logo img {
        width: 40px; /* Ukuran logo lebih kecil lagi */
    }

    .footer-columns {
        gap: 10px; /* Jarak antar kolom lebih kecil lagi */
    }

    .footer-column {
        font-size: 8px; /* Ukuran font lebih kecil lagi */
    }

    .footer-column h4 {
        font-size: 10px; /* Ukuran judul kolom lebih kecil lagi */
    }

    .footer-column ul li {
        margin-bottom: 3px; /* Jarak antar item lebih kecil lagi */
    }

    .footer-column ul li a {
        font-size: 8px; /* Ukuran teks link lebih kecil lagi */
    }

    .footer-contact {
        gap: 2px; /* Jarak antar kontak lebih kecil lagi */
    }

    .footer-contact a {
        font-size: 8px; /* Ukuran teks kontak lebih kecil lagi */
    }

    .footer-social {
        gap: 3px; /* Jarak antar ikon lebih kecil lagi */
    }

    .footer-social a {
        font-size: 12px; /* Ukuran ikon lebih kecil lagi */
        width: 25px;
        height: 25px;
        line-height: 25px;
    }

    .footer-bottom {
        font-size: 5px; /* Ukuran font lebih kecil lagi */
        padding: 3px 0;
    }

    .footer-column p {
        font-size: 7px;
    }
}

/* Media Queries untuk Layar iPad (768px - 1024px) */
@media (min-width: 767px) and (max-width: 1024px) {
    .footer {
        padding: 15px 30px; /* Padding lebih kecil dibanding desktop */
        gap: 30%; /* Jarak antar elemen lebih kecil */
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    .footer-logo img {
        width: 100px; /* Ukuran logo sedikit lebih kecil */
        margin-bottom: 8px;
        padding-left: 5px;
    }

    .footer-logo h5 {
        text-align: center;
    }

    .footer-columns {
        gap: 40px; /* Jarak antar kolom lebih kecil */
    }

    .footer-column {
        font-size: 11px; /* Ukuran font lebih kecil */
    }

    .footer-column h4 {
        font-size: 13px; /* Ukuran judul kolom lebih kecil */
    }

    
    .footer-column ul li {
        padding-bottom: 1px;
        margin-bottom: 1px;
        padding-right: 5px;
        display: flex; /* Pastikan elemen <li> fleksibel */
    }
    
    .footer-column ul li {
        display: flex; /* Mengatur elemen menjadi fleksibel */
        align-items: center; /* Menyelaraskan ikon dan teks secara vertikal */
        gap: 5px; /* Memberi jarak kecil antara ikon dan teks */
        font-size: 15px; /* Ukuran teks sesuai dengan desain mobile */
        text-decoration: none; /* Menghilangkan garis bawah pada link */
        color: inherit; /* Memastikan warna teks sesuai dengan desain */
        margin-bottom: 5px;
        padding-bottom: 5px;
    }

    .footer-contact {
        gap: 8px; /* Jarak antar kontak lebih kecil */
    }

    .footer-column p {
        margin-bottom: 15px;
        font-size: small;
    }

    .footer-contact a {
        font-size: 11px; /* Ukuran teks kontak lebih kecil */
    }

    .footer-social {
        gap: 8px; /* Jarak antar ikon lebih kecil */
    }

    .footer-social a {
        font-size: 16px; /* Ukuran ikon lebih kecil */
        width: 35px;
        height: 35px;
        line-height: 35px;
    }

    .footer-bottom {
        font-size: small; /* Ukuran font lebih kecil */
        padding: 8px 0;
    }
}

@media only screen and (max-width: 1400px) {
    .footer {
        gap: 10%;
    }
}

/* Media Queries untuk Layar Sangat Kecil (≤ 280px) */
@media (max-width: 300px) {
    .footer {
        padding: 10px; /* Padding lebih kecil */
        gap: 5%; /* Mengurangi jarak antar elemen */
        flex-direction: column; /* Ubah menjadi vertikal untuk memastikan semua elemen terlihat */
        align-items: center; /* Pusatkan elemen secara horizontal */
    }
    .footer-logo img {
        width: 40px; /* Ukuran logo lebih kecil */
        margin-bottom: 5px;
        padding-left: 16px;
        text-align: center;
        align-items: center;
    }
    .footer-columns {
        gap: 10px; /* Jarak antar kolom lebih kecil */
        flex-direction: column; /* Ubah kolom menjadi vertikal */
        align-items: center; /* Pusatkan kolom */
        width: 100%; /* Pastikan kolom mengisi lebar penuh */
    }
    .footer-column {
        font-size: 8px; /* Ukuran font lebih kecil */
        text-align: center; /* Pusatkan teks */
    }
    .footer-column h4 {
        font-size: 10px; /* Ukuran judul kolom lebih kecil */
    }
    .footer-column ul li {
        margin-bottom: 3px; /* Jarak antar item lebih kecil */
    }
    .footer-column ul li {
        font-size: 8px; /* Ukuran teks link lebih kecil */
    }
    .footer-contact {
        gap: 5px; /* Jarak antar kontak lebih kecil */
        flex-direction: column; /* Ubah kontak menjadi vertikal */
        align-items: center; /* Pusatkan kontak */
        padding-bottom: 10px;
    }
    .footer-contact a {
        font-size: 8px; /* Ukuran teks kontak lebih kecil */
    }
    .footer-social {
        gap: 5px; /* Jarak antar ikon lebih kecil */
        justify-content: center; /* Pusatkan ikon */
    }
    .footer-social a {
        font-size: 12px; /* Ukuran ikon lebih kecil */
        width: 25px;
        height: 25px;
        line-height: 25px;
    }
    .footer-bottom {
        font-size: 6px; /* Ukuran font lebih kecil */
        padding: 5px 0;
        text-align: center; /* Pusatkan teks */
    }
    
}