/* Responsive for Mobile */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        padding: 15px;
        height: 60px;
        width: 500px;
    }

    .logo-container {
        display: flex;
        gap: 25px;
        justify-items: center;
        width: 100%; /* Agar logo tidak melampaui lebar layar */
    }

    .logo-container img {
        height: 50px; /* Ukuran logo yang lebih kecil */
    }

    .menu {
        flex-direction: column;
        gap: 15px;
        margin-top: 20px;
        position: static; /* Tidak perlu absolute pada layar kecil */
        left: 0;
        transform: none;
    }

    .menu li {
        display: none;
    }

    .menu a {
        color: #1256b4;
        font-size: 1.2rem; /* Ukuran font menu yang lebih besar */
    }

    /* Hero section image adjustment for mobile */
    .hero-section {
        height: 50vh; /* Kurangi tinggi hero section pada mobile */
    }

    .hero-image {
        height: 100%;
        object-fit: cover;
    }

    .sponsor-section{
        width: 100%;
    }

    /* Other sections */
    .acara-section h1, .sponsor-section h1, .section-title {
        font-size: 1rem; /* Kurangi ukuran judul */
    }

    .acara-section p, .undangan-description, .contact-section p {
        font-size: 1rem; /* Sesuaikan ukuran teks */
    }

    .sponsor-logo {
        height: 60px; 
    }

    .content-overlay {
        width: 90%;
        margin-left: 10px; /* Kurangi margin kiri */
    }

    /* Contact icons responsive */
    .contact-icons {
        flex-direction: column;
        align-items: center;
    }

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

    /* Footer adjustments */
    footer p {
        font-size: 12px;
    }

    .icon-top-left, .icon-top-right, .icon-bottom-left, .icon-bottom-right{
        width: 90px;
        height: 90px;
    }

    .carousel-control-next, .carousel-control-prev{
        width: 20px;
        height: 20px;
        top: 30px;
    }
    .carousel-control-next{
        right: -50px;
    }
    .carousel-control-prev{
        left: -50px;
    }
}