*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Cairo',sans-serif;
}

body{
    background:#f5f6fa;
    direction:rtl;
}

/*Container */

.container{
    width:90%;
    margin:40px auto;
}

/*Title */

.section-title{
    text-align:center;
    font-size:38px;
    color:#2563eb;
    margin-bottom:40px;
    font-weight:700;
}

/*Grid */

.housing-grid{

    display:grid;

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

    gap:25px;

}

/*Card */

.housing-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 8px 20px rgba(0,0,0,.12);

    transition:.4s;

}

.housing-card:hover{

    transform:translateY(-10px);

    box-shadow:0 15px 30px rgba(0,0,0,.2);

}

/*Image */

.image-container{

    position:relative;

    overflow:hidden;

}

.housing-image{

    width:100%;

    height:220px;

    object-fit:cover;

    transition:.5s;

}

.housing-card:hover .housing-image{

    transform:scale(1.08);

}

/*Price */

.price-badge{

    position:absolute;

    top:15px;

    right:15px;

    background:#2563eb;

    color:white;

    padding:7px 14px;

    border-radius:8px;

    font-size:14px;

    font-weight:bold;

}

/* Status */

.status-badge{

    position:absolute;

    bottom:15px;

    right:15px;

    color:#fff;

    padding:6px 14px;

    border-radius:8px;

    font-size:14px;

    font-weight:600;

}

.status-available{

    background:#22c55e;

}

.status-warning{

    background:red;

}

/*Content */

.card-content{

    padding:18px;

}

.housing-name{

    font-size:24px;

    color:#222;

    margin-bottom:12px;

}

.housing-details{

    color:#666;

    line-height:1.8;

    font-size:15px;

    min-height:85px;

    margin-bottom:18px;

}

/* Button*/

.btn-primary{
    width:100%;
    display:block;
    text-align:center;
    text-decoration:none;

    border:none;
    background:#2563eb;
    color:#fff;
    padding:12px;
    border-radius:8px;
    font-size:18px;
    cursor:pointer;
    transition:.3s;
}

.btn-primary:hover{

    background:#2563eb;

}

/* Responsive */

@media(max-width:1400px){

    .housing-grid{

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

    }

}

@media(max-width:1100px){

    .housing-grid{

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

    }

}

@media(max-width:768px){

    .housing-grid{

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

    }

}

@media(max-width:500px){

    .housing-grid{

        grid-template-columns:1fr;

    }

    .section-title{

        font-size:28px;

    }
}