@media screen and (max-width : 922px) {
     /* Search Section  */
     #search {
        background-image: linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(../assets/img/searchbg.png);
        /* height: 100hv; supaya background memenuhi layar */
        background-repeat: no-repeat;
        background-size: cover;
        padding-bottom: 2%;
        border-radius: 10px;
    }

    #search h1 {
        padding-left: 10%;
        padding-right: 10%;

        font-style: normal;
        font-weight: 600;
        font-size: 24px;
        /* line-height: 72px; */
        /* identical to box height */
        text-align: center;
        color: #FFFFFF;
    }

    #search p{
        font-size: 16px;
    }

    .input-cari .button-secondary {
        font-size: 12px;
        font-weight: 500;
        width: 70%;
        height: 50%;
        /* border-radius: 0 0 0 0; */
    }

    .input-cari .button-search{
        width: 100px;
        height: 50%;
        background-color: var(--primary-color);
        color: white;
        border: none;
        font-size: 18px;
        font-weight: 500;
        /* border-radius: 0 0 0 0; */
        font-size: 12px;
    }

    .input-cari .form-control{
        width:auto;
        height: 50%;
        font-size: 12px;

    }
    .nav-tabs .nav-link{
        font-size: 12px;
    }

    .input-cari .dropdown-toggle{
        font-size: 12px;
        width: 100px;
    }
    
}


@media screen and (max-width : 576px){
    /* Search Section  */
    #search {
        background-image: linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(../assets/img/searchbg.png);
        /* height: 100hv; supaya background memenuhi layar */
        background-repeat: no-repeat;
        background-size: cover;
        padding-bottom: 2%;
        border-radius: 10px;
    }

    #search h1 {
        padding-left: 10%;
        padding-right: 10%;

        font-style: normal;
        font-weight: 600;
        font-size: 12px;
        /* line-height: 72px; */
        /* identical to box height */
        text-align: center;
        color: #FFFFFF;
        
    }

    #search p{
        font-size: 12px;
    }

    .input-cari .button-secondary {
        font-size: 12px;
        font-weight: 500;
        width: 50%;
        height: 24px;
        border-radius: 0 0 0 0;;
    }

    .input-cari .button-search{
        width: 10%;
        height: 50%;
        background-color: var(--primary-color);
        color: white;
        border: none;
        font-size: 18px;
        font-weight: 500;
        border-radius: 0 0 0 0;
        font-size: 12px;
    }

    .input-cari .form-control{
        width: 50%;
        height: 50%;
        font-size: 12px;

    }
    .nav-tabs .nav-link{
        font-size: 12px;
    }

    .input-cari .dropdown-toggle{
        font-size: 12px;
    }


    #list_search p{
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 36px;
        text-align: center;
    
        color: #FFFFFF;
        /* padding: 2%; */
        padding-top: 2%;
    }

    /* //rekomwndasi */
    #rekomendasi h2{
        font-size: 16px;
        padding-left: 8px;
    }
    #rekomendasi .btn-outline-secondary{
        /* background-color: grey; Green */
        border: none;
        color: grey;
        padding: 4px 4px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
    }

    /* berdasarkan lokasi */
    #berdasarkanlokasi h2{
        font-size: 16px;
        padding-left: 8px;
    }
    #berdasarkanlokasi .btn-outline-secondary{
        /* background-color: grey; Green */
        border: none;
        color: grey;
        padding: 4px 4px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
    }    

    /* dekat lokasi */
    #dekatlokasi h2{
        font-size: 16px;
        padding-left: 8px;
    }
    #dekatlokasi .btn-outline-secondary{
        /* background-color: grey; Green */
        border: none;
        color: rgb(128, 128, 128);
        padding: 4px 4px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
    }    

    #berdasarkanlokasi .btn-kategori-horizontal{
        /* background-color: #0d6efd; */
        /* border-color: #07299b; */
        border: 1px solid gray;
        color: black;
        padding: 4px 4px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
        white-space: nowrap;
    }


    
}

/* phone */

@media screen and (max-width : 350px){
        /* Search Section  */
    #search {
        background-image: linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(../assets/img/searchbg.png);
        /* height: 100hv; supaya background memenuhi layar */
        background-repeat: no-repeat;
        background-size: cover;
        padding-bottom: 2%;
        border-radius: 10px;
    }

    #search h1 {
        padding-left: 10%;
        padding-right: 10%;

        font-style: normal;
        font-weight: 600;
        font-size: 18px;
        /* line-height: 72px; */
        /* identical to box height */
        text-align: center;
        color: #FFFFFF;
    }

    #search p{
        font-size: 12px;
    }

    .input-cari .button-secondary {
        font-size: 12px;
        font-weight: 500;
        width: 50%;
        height: 50%;
        border-radius: 0 0 0 0;;
    }

    .input-cari .button-search{
        width: 50%;
        height: 50%;
        background-color: var(--primary-color);
        color: white;
        border: none;
        font-size: 18px;
        font-weight: 500;
        border-radius: 0 0 0 0;
        font-size: 12px;
    }

    .input-cari .form-control{
        width: 50%;
        height: 50%;
        font-size: 12px;

    }
    .nav-tabs .nav-link{
        font-size: 12px;
    }

    .input-cari .dropdown-toggle{
        font-size: 12px;
    }

    #search{
        display: none;
    }

    #list_search p{
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 36px;
        text-align: center;
    
        color: #FFFFFF;
        /* padding: 2%; */
        padding-top: 2%;
    }

    .card img{
        
    }
}