/*=========================================
        TABLET (≤ 991px)
=========================================*/

@media (max-width:991px){

    .listing-wrapper{

        grid-template-columns:1fr;

    }

    .filter-sidebar{

        position:fixed;

        top:0;

        left:-100%;

        width:330px;

        height:100vh;

        max-height:100vh;

        overflow-y:auto;

        border-radius:0;

        z-index:9999;

        transition:.35s;

        padding:25px;

    }

    .filter-sidebar.active{

        left:0;

    }

    .property-list{

        width:100%;

    }

}

/*=========================================
        MOBILE FILTER BUTTON
=========================================*/

.mobile-filter-btn{

    display:none;

    width:100%;

    height:50px;

    border:none;

    background:#6c2bd9;

    color:#fff;

    border-radius:10px;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    margin-bottom:20px;

}

@media(max-width:991px){

    .mobile-filter-btn{

        display:flex;

        align-items:center;

        justify-content:center;

        gap:10px;

    }

}

/*=========================================
        FILTER OVERLAY
=========================================*/

.filter-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:9998;

}

.filter-overlay.active{

    opacity:1;

    visibility:visible;

}

/*=========================================
        MOBILE CLOSE BUTTON
=========================================*/

.filter-close{

    display:none;

    width:40px;

    height:40px;

    border:none;

    border-radius:50%;

    background:#f2f2f2;

    cursor:pointer;

    font-size:18px;

}

@media(max-width:991px){

    .filter-header{

        align-items:center;

    }

    .filter-close{

        display:flex;

        align-items:center;

        justify-content:center;

    }

}

/*=========================================
        MOBILE (≤768px)
=========================================*/

@media(max-width:768px){

    .listing-section{

        padding:35px 0;

    }

    .filter-sidebar{

        width:300px;

        padding:20px;

    }

    .filter-header h3{

        font-size:22px;

    }

    .filter-box{

        margin-bottom:22px;

    }

    .budget-inputs{

        grid-template-columns:1fr;

    }

    .bhk-buttons{

        gap:8px;

    }

    .bhk-buttons button{

        padding:8px 14px;

        font-size:13px;

    }

}

/*=========================================
        SMALL MOBILE (≤576px)
=========================================*/

@media(max-width:576px){

    .filter-sidebar{

        width:100%;

    }

    .filter-header{

        margin-bottom:20px;

    }

    .filter-header h3{

        font-size:20px;

    }

    .apply-filter{

        height:48px;

        font-size:15px;

    }

    .filter-box h4{

        font-size:16px;

    }

}
@media(max-width:991px){

.property-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.property-toolbar{

flex-direction:column;
align-items:flex-start;
gap:15px;

}

.toolbar-right{

width:100%;

}

.sort-select{

flex:1;

}

}

@media(max-width:576px){

.property-footer{

flex-direction:column;

}

.listing-image img{

height:220px;

}

}
@media(max-width:991px){

.search-grid{

grid-template-columns:1fr 1fr;

}

.hero-search-btn{

height:56px;

}

}

@media(max-width:768px){

.listing-hero{

padding:70px 0;

}

.hero-content h1{

font-size:38px;

}

.hero-content p{

font-size:16px;

}

.search-grid{

grid-template-columns:1fr;

}

.quick-filters{

justify-content:center;

}

}

@media(max-width:576px){

.hero-content h1{

font-size:30px;

}

.hero-search{

padding:15px;

}

.quick-filters button{

font-size:13px;

padding:8px 15px;

}

}