@media (max-width: 768px) { /* Apply only on mobile screens */
    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        overflow-x: hidden; /* Prevents horizontal scrolling */
    }

    #loader img {
        width: 100%; /* Menjadikan gambar 70% dari lebar layar */
        max-width: 300px; /* Opsional: Batasi ukuran maksimum agar tidak terlalu besar di layar besar */
        height: auto; /* Menjaga rasio aspek */
    }

    .banner {
        height: 100vh;
    }

    .banner .logodancing {
        position: relative;
        z-index: 1;
        justify-content: center;
        align-items: center;
        display: flex;
        margin-top: 0px;
        }

    .link-landing ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        gap: 15px;
    }

    .link-landing li {
        display: inline;
    }

    .link-landing a {
        text-decoration: none;
        color: black; /* Adjust color */
        font-size: 16px;
    }
    .link-landing {
        position: fixed; /* Keep it at the bottom */
        bottom: 200px; /* 20px from the bottom */
        left: 50%;
        transform: translateX(-50%); /* Center it */
        width: auto; /* Ensure it doesn't stretch too much */
        text-align: center;
        z-index: 99; /* Keep it above other content */
    }

    /* About */
    .about {
        flex-direction: column; /* Stack left and right sections */
        height: auto; /* Adjust height for small screens */
    }

    .about .left-section {
        height: 60vh; /* Mengatur tinggi menjadi 60% dari viewport height */
        overflow: hidden; /* Mencegah konten meluap jika terlalu besar */
    }

    .about .swiper-slide img {
        width: 100%;         /* Full width of the slide */
        height: 80vh;      /* Set a fixed height */
        object-fit: cover;  /* Maintain aspect ratio and cover the space */
    }
    

    .left-section, .right-section {
        width: 100%;
        flex: none; /* Remove equal height distribution */
    }

    .left-section {
        order: 1; /* Show the image section first */
    }

    .right-section {
        order: 2; /* Show the text section below */
        text-align: justify;
        padding: 10px;
        justify-content: center;
        align-items: center;
    }

    .about .logo-nav {
        background: #EBE7CA;
        position: fixed;
        top: 0;
        left: 0;
        margin-top: 0px;
        width: 100%;
        padding: 10px 20px; /* Sesuaikan padding */
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 99; /* Pastikan elemen selalu di atas */
    }

    .nav {
        flex-direction: row; /* Keep menu items in a row */
        gap: 0px; /* Adjust spacing for smaller screens */
        margin-left: 20px;
    }

    .nav li {
        display: inline-block;
    }

    .nav li a {
        text-decoration: none;
        color: #40503D; /* Adjust color */
        font-size: 14px;
        font-weight: 500;
        padding: 8px 12px; /* Add some padding for spacing */
    }

    .nav li a:hover {
        text-decoration: underline;
    }

    footer {
        margin-top: 30px;
        margin-right: 50px;
    }

    .right-section .content {
        display: flex;
        flex-direction: column;
        justify-content: center; /* Menengahkan secara vertikal */
        align-items: center; /* Menengahkan secara horizontal */
    }


    .right-section .content img{
        width: 70%;
    }

    /* Main Content - Work */

    .main-content li {
        position: absolute;
        left: 0; /* Start from the left */
        transform: translateX(calc(var(--i) * 0px)) translateY(calc(var(--i) * 30px));
        /* Adjust 20px and 30px to change diagonal spacing */
        left: -80px;
    }

    .main-content li:nth-child(1) {
    --i: 1;
    }

    .main-content li:nth-child(2) {
        --i: 2;
    }

    .main-content li:nth-child(3) {
        --i: 3;
    }

    .main-content li:nth-child(4) {
        --i: 4;
    }

    .main-content li:nth-child(5) {
        --i: 5;
    }

    .main-content li:nth-child(6) {
        --i: 6;
    }

    .work .footer {
        width: 100%;
    }

    /* Shop */
    .shop header p {
        padding: 30px 20px;
        text-align: justify;
    }

    .shop img.header {
        max-width: 80%; /* Make the image responsive */
    }

    .style-section .left-side, .floral-section .right-side{
        padding-left: 20px;
        padding-right: 20px;
    }

    .style-section .right-side{
        order: 1;
    }

    .style-section .left-side {
        order: 2;
        margin-top: 50px;
    }

    .style-section img.header {
        width: 70%;
        margin-bottom: 50px;
    }

    .shop .footer {
        width: 100%;
    }

    .shop .logo-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: -50px;
        margin-bottom: 50px;
    }
    .contact-section {
        padding: 0px 0px;
    }
}