.search-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto;
    max-width: 400px; /* Lebar maksimum */
    border-radius: 25px; /* Sudut membulat */
    overflow: hidden; /* Menghindari elemen keluar dari border */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Bayangan */
    background-color: rgba(255, 255, 255, 1); /* Mengatur warna box tanpa opacity di sini */
    opacity: 0.85; /* Mengatur opacity keseluruhan menjadi 85% */

    position: absolute;
    z-index: 10;
    top: 30%;
    left: 50%; /* Mengatur posisi ke 50% dari lebar viewport */
    transform: translateX(-50%); /* Menggeser elemen ke kiri sebanyak 50% dari lebar elemen */
    width: 100%; /* Mengatur lebar box */
    height: 45px; /* Tinggi box */
}

.search-input {
    border: none; /* Menghilangkan border default */
    padding: 10px 15px; /* Padding dalam input */
    width: 100%; /* Memenuhi lebar container */
    font-size: 16px; /* Ukuran font */
    border-radius: 25px 0 0 25px; /* Sudut membulat kiri */
    outline: none; /* Menghilangkan outline */
    text-align: center; /* Mengatur teks menjadi rata tengah */
}

.search-button {
    background-color: transparent; /* Menghilangkan warna background tombol */
    border: none; /* Menghilangkan border */
    padding: 10px 15px; /* Padding dalam tombol */
    cursor: pointer; /* Kursor pointer saat hover */
    border-radius: 0 25px 25px 0; /* Sudut membulat kanan */
    transition: color 0.3s; /* Transisi warna saat hover */
}

.search-button:hover {
    color: #45a049; /* Warna saat hover */
}

.search-button svg {
    width: 24px; /* Ukuran ikon */
    height: 24px; /* Ukuran ikon */
}

/* Media Query untuk layar antara 700px hingga 1300px */
@media (min-width: 700px) and (max-width: 1300px) {
    .search-box {
        max-width: 250px; /* Mengurangi lebar box lebih kecil */
        height: 35px; /* Mengurangi tinggi box */
        top: 12%; /* Mengatur top menjadi 10% */
    }

    .search-input {
        font-size: 12px; /* Mengurangi ukuran font */
        padding: 6px 10px; /* Mengurangi padding */
    }

    .search-button {
        padding: 6px 10px; /* Mengurangi padding tombol */
    }

    .search-button svg {
        width: 20px; /* Mengurangi ukuran ikon */
        height: 20px; /* Mengurangi ukuran ikon */
    }
}

/* Media Query untuk layar lebih kecil dari 700px */
@media (max-width: 700px) {
    .search-box {
        max-width: 250px; /* Mengurangi lebar box lebih kecil */
        height: 35px; /* Mengurangi tinggi box */
        top: 17%; /* Mengatur top menjadi 17% */
    }

    .search-input {
        font-size: 12px; /* Mengurangi ukuran font */
        padding: 6px 10px; /* Mengurangi padding */
    }

    .search-button {
        padding: 6px 10px; /* Mengurangi padding tombol */
    }

    .search-button svg {
        width: 20px; /* Mengurangi ukuran ikon */
        height: 20px; /* Mengurangi ukuran ikon */
    }
}