.hero-list {
    padding: 13rem 0 0 0;
}
.hero-list-search {
    position: relative;
    margin-bottom: -6rem;
    z-index:1021;
}

.filter-item {
    margin-bottom: 1rem;
    background-color: var(--bs-white);
    box-shadow:0 22px 64px rgba(202,210,227,0.38);
    border-radius: 11px;
}
.filter-item-title {
    width: 100%;
    display:flex;
    align-items: center;
    padding: 1rem 1.5rem;
    font-size:14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color:var(--bs-white);
    background-color: var(--bs-body-color);
    margin-bottom: 0;
    position: relative;
    box-shadow:0 22px 64px rgba(202,210,227,0.38);
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
    
    cursor: pointer;
}
.filter-item-title:after {
    content:"";
    flex-shrink: 0;
    position: absolute;
    right: 0.75rem;
    top: 1rem;
    width: 14px;
    height: 14px;
    margin-left: auto;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3e%3cpath d='M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 14px;
    transform:rotate(180deg);
    transition: transform 0.2s ease-in-out;
}
.filter-item-title.collapsed {
    border-radius: 11px;
}
.filter-item-title.collapsed:after {
    content:"";
    transform:rotate(0deg);
}
.filter-item-body {
    position: relative;
    padding: 1rem;
    font-size:13px;
}

.filter-scrollable {
    max-height: 15rem;
    padding-right: 0.5rem;
}
.filter-item-body:before {
    content:"";

}
.filter-item-category li {
    padding:0.5rem 0;
}
.filter-item-category li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--bs-secondary);
    font-weight: 500;
    padding: 0.625rem 0;
}
.filter-item-category li a span:last-child {
    font-weight: 600;
}

.filter-item-category li a:hover {
    color:var(--bs-primary);
}

.filter-item .form-check .form-check-label {
    line-height: 1.2;
    top: 2px;
    position: relative;
    padding: 0.125rem 0;
    display:flex;
    color:#8E9099;
    align-items: center;
    justify-content: space-between;
}
.filter-item .form-check .form-check-label:hover,
.filter-item .form-check .form-check-input:checked ~ .form-check-label {
    color:var(--bs-body-color);
}


.view-mode {
    margin-left: 0.5rem;
    padding:0.5rem;
    border-radius: 3px;
}
.view-mode.active {
    color:var(--bs-white);
    background-color:var(--bs-primary);
}

.selectedFilters li {
    background-color:#F3F8FA;
    transition: all .3s ease;
}
.selectedFilters li:hover {
    background-color:var(--bs-gray-300);
}

.villaList {
    display:flex;
    flex-wrap:wrap;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}
.villaWrap {
    width:100%;
    display:flex;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

@media(max-width:1319px) {
    .hero-list {
        padding:15% 0 8% 0;
    }
    .hero-list-body {
        margin-bottom: 5%;
    }
}


@media(max-width:767px) {
    .hero-list {
        padding: 30% 0 5% 0;
    }
    .hero-list-body {
        margin-bottom: 2rem;
    }
    .hero-list-title {
        margin-bottom: 1rem;
    }

    .fixedFilters {
        position: fixed;
        bottom:37px;
        left:0;
        width:100%;
        z-index:1100;
    }
    .collapse-sorting {
        position: absolute;
        bottom: 100%;
        left: 0;
        width: 100%;
    }

    .sidebar-body {
        position: fixed;
        left:0;
        top:0;
        width:100%;
        height:100% !important;
        z-index:3000;
        transform:translateX(-120%);
        transition: all 0.3s;
        
    }
    .sidebar-body.show {
        transform:translateX(0);
    }
    .sidebar-body-wrap {
        padding:0.75rem 0.75rem 5rem 0.75rem;
        height:100vh;
        overflow-y: auto;
        background-color:#fff;
    }
}

@media (min-width:768px) {
    
}

@media (min-width: 992px) {
    .sidebar {
        max-width:350px !important;
    }
    .list-content {
        flex: 1 1 auto;
    }
    .sidebar-body, .sidebar-body.collapsing {
        display: block !important;
        height: auto;
    }
  

}

@media (min-width: 1320px) and (max-width: 1589px) {
    
}