/* =========================
   SECTION
========================= */

.properties_section{
    width: 100%;

    padding-left: 3%;
    padding-right: 3%;

    margin-top: -45px;

    position: relative;
    z-index: 10;
}

/* =========================
   CONTAINER
========================= */

.properties_top_filters{
    width: 100%;

    background: #0b0b0b;

    border: 1px solid #1f1f1f;

    border-radius: 24px;

    padding: 22px;

    display: flex;
    align-items: center;

    gap: 18px;

    flex-wrap: wrap;

    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* =========================
   SEARCH
========================= */

.properties_filter_search{
    flex: 1.8;

    min-width: 320px;

    height: 68px;

    background: #111;

    border: 1px solid #232323;

    border-radius: 18px;

    display: flex;
    align-items: center;

    padding: 0 22px;

    transition: 0.3s;
}

.properties_filter_search:hover{
    border-color: #3a3a3a;
}

.properties_filter_search:focus-within{
    border-color: #d4a64f;
}

/* ICON */

.properties_filter_search_icon{
    color: #7d7d7d;

    font-size: 16px;

    margin-right: 14px;
}

/* INPUT */

.properties_filter_input{
    width: 100%;

    background: transparent;

    border: none;
    outline: none;

    color: white;

    font-size: 15px;

    font-family: 'Poppins', sans-serif;
}

.properties_filter_input::placeholder{
    color: #666;
}

/* =========================
   FILTER BOX
========================= */

.properties_filter_box{
    flex: 1;

    min-width: 210px;
}

/* =========================
   SELECT
========================= */

.properties_filter_select{
    width: 100%;

    height: 68px;

    background: #111;

    border: 1px solid #232323;

    border-radius: 18px;

    padding: 0 20px;

    color: white;

    font-size: 15px;
    font-weight: 500;

    font-family: 'Poppins', sans-serif;

    outline: none;

    cursor: pointer;

    transition: 0.3s;
}

.properties_filter_select:hover{
    border-color: #3a3a3a;
}

.properties_filter_select:focus{
    border-color: #d4a64f;
}

.properties_filter_select option{
    background: #111;
}

/* =========================
   BUTTON MORE FILTERS
========================= */

.properties_more_filters{
    height: 68px;

    padding: 0 24px;

    background: #111;

    border: 1px solid #232323;

    border-radius: 18px;

    color: white;

    display: flex;
    align-items: center;

    gap: 10px;

    font-size: 15px;
    font-weight: 500;

    font-family: 'Poppins', sans-serif;

    cursor: pointer;

    transition: 0.3s;
}

.properties_more_filters:hover{
    border-color: #d4a64f;

    color: #d4a64f;
}

/* =========================
   CLEAR BUTTON
========================= */

.properties_clear_filters{
    background: transparent;

    border: none;

    color: #d4a64f;

    font-size: 15px;
    font-weight: 500;

    font-family: 'Poppins', sans-serif;

    cursor: pointer;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .properties_top_filters{
        display: grid;

        grid-template-columns: repeat(2, 1fr);
    }

    .properties_filter_search{
        grid-column: span 2;
    }

}

@media(max-width:768px){

    .properties_section{
        padding-left: 5%;
        padding-right: 5%;
    }

    .properties_top_filters{
        grid-template-columns: 1fr;
    }

    .properties_filter_search{
        grid-column: span 1;

        min-width: 100%;
    }

}