body{
    background-color: #eaeaea;
}

#wrapper{
    width: 100%;
    height: fit-content;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
}



#wrapper #filter_area {
    width: 300px;
    height: fit-content;
    background-color: #292929;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
#wrapper #filter_area  #display_method{
    width: fit-content;
    height: fit-content;
    display: flex;
    flex-direction: row;
    column-gap: 5px;
}
#wrapper #filter_area  #display_method button{
    width: fit-content;
    height: fit-content;
    padding: 10px;
    border: none;
    outline: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #39393900;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    cursor: pointer;
    
}

#wrapper #filter_area  #display_method button.active{
    background-color: #464646;

}

#wrapper #filter_area  #sort_by{
    width: fit-content;
    height: fit-content;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 15px;
}

#wrapper #filter_area  #sort_by > span{
    color:#EAEAEA;
    font-size: 14px;
}

#wrapper #filter_area #sort_bar #sort_by .dropdown{
    border: none;
    outline: none;
    background: #393939;
    padding: 10px;

    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 20px;
    color: #EAEAEA;
    cursor: pointer;
}


#wrapper #filter_area #filter{
    width: 100%;
    height: fit-content;
    background-color: #292929;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    padding: 0;
    display: flex;
    flex-direction: column;

}


#wrapper #filter_area #filter #property_type{
    display: flex;
    flex-direction: row;
    column-gap: 15px;
}
#wrapper #filter_area #filter #property_type button{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border:none; outline:none;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    background-color: #ffffff00;
    color: #EAEAEA;
    cursor: pointer;
}
#wrapper #filter_area #filter #property_type button.active{
    background-color: rgb(47, 132, 23);
}

#wrapper #filter_area #filter .dropdown_wrapper{
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    margin-top: 20px;
}

#wrapper #filter_area #filter .dropdown_wrapper > span{
    color:#c0c0c0;
    font-size: 14px;
}

#wrapper #filter_area #filter .dropdown_wrapper .dropdown{
    border: none;
    outline: none;
    background: #393939;
    padding: 10px;
    width: 100%;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    column-gap: 20px;
    color: #EAEAEA;
    cursor: pointer;
}


#wrapper #filter_area #filter .dropdown_wrapper .dropdown:hover{

    background-color: #4b4b4b;
    
}



#wrapper #filter_area #filter #filter_btn{
    width: fit-content;
    height: fit-content;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
    background-color: rgb(4, 151, 4);
    outline:none;
    border:none;
    padding: 10px 25px;
    color:#f2f2f2;
    margin-top: 30px;
    cursor: pointer;
    font-size: 17px;
}
#wrapper #filter_area #filter #filter_btn:hover{
    background-color: rgb(3, 119, 3);

}

#wrapper #properties{
    width: calc(100% - 300px);
    background-color: #ffffff00;
    height: fit-content;
    padding: 30px;
    padding-top: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding-bottom: 60px;
}

#wrapper #properties.list_view{
    grid-template-columns: 1fr;
}
#wrapper #properties.list_view .card_wrapper{
    flex-direction: row;

}  

#wrapper #properties.list_view .card_wrapper h3{
    margin-top: 15px;
    color:black;
    
}

#wrapper #properties .card_wrapper{
    width: auto;
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    padding: 15px;
    background-color: #d0d0d000;
    text-decoration: none;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}
#wrapper #properties .card_wrapper:hover{
    background-color: #01010115;


}
#wrapper #properties .card_wrapper .card_img{
    width: 100%;
    max-width: 300px;
    height: auto;
    aspect-ratio: 16/9;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    object-fit: cover;
}
#wrapper #properties .card_wrapper h3{
    font-size: 16px;
    color: black;;
}
#wrapper #properties .card_wrapper span{
    font-size: 13px;
    color: rgb(27, 27, 27);
}
@media (min-width:1920px){
    #wrapper #properties{
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}
@media (max-width:1200px){
    #wrapper #properties{
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 800px){
    #wrapper{
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        row-gap: 45px;
        padding: 0px;
    }
    #wrapper #filter_area{
        padding: 30px;
        width: 100%;
        border-radius: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -o-border-radius: 0;
}
    #wrapper #filter_area #sort_bar{
        flex-direction: column;

        align-items: flex-start;
        justify-content: flex-start;
        row-gap: 15px;
    }
    #wrapper #properties{
        width: 100%;
        padding: 20px;
        padding-bottom: 60px;

        grid-template-columns: 1fr 1fr;
        row-gap: 30px;
    }
    #wrapper #properties .card_wrapper{
        padding: 8px;
    }

}
@media (max-width: 600px){
    #wrapper #properties{
        width: 100%;
        grid-template-columns: 1fr;
        gap: 45px;
    }
    #wrapper #properties .card_wrapper{
        width: 100%;
    }
    #wrapper #properties .card_wrapper .card_img{
        width: 100%;
        max-width: 100%;
        
    }
    #wrapper #properties .card_wrapper h3{
        width: 100%;
        font-size: 14px;
    }
    
    #wrapper #properties.list_view{
        width: 100%;
        grid-template-columns: 1fr;
    }
    #wrapper #properties.list_view .card_wrapper{
        flex-direction: column;
        
    }
    #wrapper #properties.list_view .card_wrapper .card_img{
        height: auto;
    }
}