/*==================================================
COMPARE PROPERTY PAGE
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:Arial,Helvetica,sans-serif;
    background:#f5f7fb;
    color:#222;
    font-size:14px;

}

a{

    text-decoration:none;

}

img{

    max-width:100%;
    display:block;

}

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

.compare-page{

    padding:25px 0 50px;

    background:#ffffff;

}

.container-xxl{

    max-width:1500px;

    width:100%;

    margin:auto;

    padding-left:20px;

    padding-right:20px;

}

/*==================================================
BREADCRUMB
==================================================*/

.compare-breadcrumb{

    margin-bottom:20px;
    color:#666;
    font-size:13px;

}

.compare-breadcrumb a{

    color:#0d6efd;

}

.compare-breadcrumb i{

    font-size:11px;

}

/*==================================================
HEADER
==================================================*/

.compare-header{

    margin-bottom:25px;

}

.compare-header h1{

    font-size:26px;

    font-weight:700;

    color:#222;

    line-height:36px;

    margin-bottom:12px;

}

.compare-location{

    font-size:13px;

    color:#666;

}

/*==================================================
DOWNLOAD BUTTON
==================================================*/

.download-btn{

    background:#f8b400;
    color:#fff;
    border:none;
    border-radius:8px;
    padding:12px 24px;
    font-size:15px;
    font-weight:600;
    transition:.3s;

}

.download-btn:hover{

    background:#e59c00;

}

/*==================================================
COMPARE WRAPPER
==================================================*/

.compare-wrapper{

    overflow-x:auto;
    padding-bottom:10px;

}

.compare-wrapper::-webkit-scrollbar{

    height:8px;

}

.compare-wrapper::-webkit-scrollbar-thumb{

    background:#cfcfcf;
    border-radius:10px;

}

/*==================================================
CUSTOM COLUMN
==================================================*/

.col-xl-custom{

    padding:0;
    width:100%;
    max-width:100%;
    flex:1;

}

.compare-columns{

    display:grid;

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

    gap:16px;

    width:100%;

}

/*==================================================
PROPERTY CARD
==================================================*/

.property-card,
.compare-info-card,
.add-property-card{

    background:#fff;
    border-radius:14px;
    overflow:hidden;
    border:1px solid #e5e5e5;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
    height:100%;
    transition:.3s;

}

.property-card:hover,
.compare-info-card:hover,
.add-property-card:hover{

    transform:translateY(-4px);
    box-shadow:0 8px 25px rgba(0,0,0,.08);

}

/*==================================================
PROPERTY IMAGE
==================================================*/

.property-image{

    position:relative;

}

.property-image img{

    width:100%;
    height:190px;
    object-fit:cover;

}

/*==================================================
REMOVE BUTTON
==================================================*/

.remove-project{

    position:absolute;
    right:12px;
    top:12px;

    width:26px;
    height:26px;

    border:none;
    border-radius:50%;

    background:#fff;

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

    display:flex;
    justify-content:center;
    align-items:center;

}

.remove-project i{

    font-size:10px;

}

/*==================================================
PROPERTY BODY
==================================================*/

.property-body{

    padding:18px;

}

.property-title{

    font-size:12px;
    font-weight:700;
    color:#222;
    margin-bottom:4px;

}

.property-location{

    color:#666;
    font-size:12px;
    margin-bottom:18px;

}
/*==================================================
PROPERTY HEADER
==================================================*/

.property-header{

    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
    margin-bottom:16px;

}

.property-header .property-title{

    margin-bottom:4px;

}

.property-header .property-location{

    margin-bottom:0;

}

/*==================================================
RATING
==================================================*/

.rating-box{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;

    min-width:58px;
    height:28px;

    background:#eaf8ef;

    color:#0a8a3c;

    border:1px solid #cfead8;

    border-radius:6px;

    font-size:13px;

    font-weight:700;

    flex-shrink:0;

}

.rating-box i{

    color:#0a8a3c;
    font-size:12px;

}

/*==================================================
PRICE BOX
==================================================*/

.price-box{

    display:flex;
    align-items:center;

    border:1px solid #ececec;

    border-radius:10px;

    background:#fafafa;

    overflow:hidden;

    margin-bottom:18px;

    min-height:68px;

}

.price-left{

    flex:1;

    padding:10px 14px;

}

.price-left span{

    display:block;

    color:#888;

    font-size:11px;

    margin-bottom:2px;

}

.price-left strong{

    display:block;

    font-size:12px;

    font-weight:700;

    color:#222;

    line-height:15px;

}

.split-price .price-right{

    width:88px;

    text-align:center;

    padding:12px 8px;

}

.price-divider{

    width:1px;

    align-self:stretch;

    background:#e5e5e5;

}

.price-right span{

    display:block;

    color:#888;

    font-size:11px;

    margin-bottom:3px;

}

.price-right strong{

    display:block;

    font-size:14px;

    font-weight:700;

    color:#222;

}

/*==================================================
PROPERTY DETAILS
==================================================*/

.property-item{

    display:flex;

    align-items:flex-start;

    gap:6px;

    margin-bottom:6px;

}

.property-item i{

    width:32px;

    height:32px;

    border-radius:50%;

    background:#f4f6f8;

    color:#555;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:12px;

    flex-shrink:0;

}

.property-item span{

    color:#444;

    font-size:12px;

    line-height:22px;

}

/*==================================================
ENQUIRE BUTTON
==================================================*/

.enquire-btn{

    width:100%;

    height:46px;

    margin-top:8px;

    border:1px solid #022d4b;

    background:#fff;

    color:#022d4b;

    border-radius:8px;

    font-size:14px;

    font-weight:700;

    transition:.30s;

}

.enquire-btn i{

    margin-right:8px;

}

.enquire-btn:hover{

    background:#053f66;

     color:#fff;

}

/*==================================================
COMPARE INFO CARD
==================================================*/

.compare-info-card{

    padding:20px;

}

.compare-top{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:18px;

}

.compare-icon{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#fff4dc;

    color:#f8b400;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:18px;

}

.compare-heading{

    font-size:20px;

    font-weight:700;

    color:#222;

}

.compare-image{

    text-align:center;

    margin-bottom:20px;

}

.compare-image img{

    width:170px;

    margin:auto;

}

.feature-title{

    font-size:16px;

    font-weight:700;

    margin-bottom:12px;

    color:#222;

}

.feature-list{

    list-style:none;

    padding:0;

    margin:0;

}

.feature-list li{

    position:relative;

    padding-left:22px;

    margin-bottom:16px;

    color:#555;

    line-height:22px;

    font-size:14px;

}

.feature-list li::before{

    content:"✓";

    position:absolute;

    left:0;

    top:0;

    color:#1ea64b;

    font-weight:700;

}

/*==================================================
ADD PROJECT CARD
==================================================*/

.add-property-card{

    background:#fff;

    border:1px solid #e8e8e8;

    border-radius:14px;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    min-height:100%;

}

/*==========================
TOP
==========================*/

.add-property-top{

    text-align:center;

    padding:32px 20px 24px;

}

.add-project-circle{

    width:86px;

    height:86px;

    border-radius:50%;

    border:none;

    background:#053f66;

    color:#fff;

    font-size:34px;

    transition:.30s;

    box-shadow:0 10px 25px rgba(248,180,0,.30);

}

.add-project-circle:hover{

    transform:scale(1.06);

    background:#efaa00;

}

.add-property-top h3{

    margin-top:20px;

    font-size:22px;

    font-weight:700;

    color:#222;

}

.add-property-top p{

    margin-top:6px;

    font-size:14px;

    color:#777;

}

/*==========================
DIVIDER
==========================*/

.add-divider{

    height:1px;

    background:#ececec;

}

/*==========================
TITLE
==========================*/

.suggested-title{

    padding:18px 18px 12px;

    font-size:15px;

    font-weight:700;

    color:#222;

}

/*==========================
LIST
==========================*/

/* Suggested Project Scroll */

.suggested-project-list{

    height:220px;          /* Sirf 2 project visible */

    overflow-y:auto;

    overflow-x:hidden;

    padding-right:4px;

}

/* Scrollbar */

.suggested-project-list::-webkit-scrollbar{

    width:6px;

}

.suggested-project-list::-webkit-scrollbar-thumb{

    background:#bfbfbf;

    border-radius:20px;

}

/*==========================
ITEM
==========================*/

.suggested-project{

    display:flex;

    align-items:flex-start;

    gap:12px;

    padding:10px;

    border-radius:10px;

    transition:.25s;

    cursor:pointer;

    min-height:110px;

}

.suggested-project:hover{

    background:#f8f9fb;

}

.suggested-project+.suggested-project{

    margin-top:10px;

}

/*==========================
IMAGE
==========================*/

.suggested-image{

    width:40px;

    height:40px;

    border-radius:10px;

    overflow:hidden;

    flex-shrink:0;

}

.suggested-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

/*==========================
CONTENT
==========================*/

.suggested-content{

    flex:1;

}

.suggested-content h5{

    margin:0 0 2px;

    font-size:12px;

    font-weight:700;

    color:#222;

    line-height:10px;

}

.suggested-content span{

    display:block;

    font-size:12px;

    color:#777;

    margin-bottom:6px;

}

.suggested-content strong{

    display:block;

    color:#222;

    font-size:11px;

}

/*==================================================
COMPARISON TABLE
==================================================*/

.comparison-table{

    margin-top:30px;

    border:1px solid #e8e8e8;

    border-radius:14px;

    overflow:hidden;

    background:#fff;

}

/*==========================
ROW
==========================*/

.compare-row{

    display:grid;

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

    border-bottom:1px solid #ececec;

    min-height:58px;

}

.compare-row:last-child{

    border-bottom:none;

}

/*==========================
LEFT TITLE
==========================*/

.compare-title{

    padding:18px 22px;

    background:#fafafa;

    font-size:14px;

    font-weight:700;

    color:#333;

    border-right:1px solid #ececec;

    display:flex;

    align-items:center;

}

/*==========================
VALUES
==========================*/

.compare-value{

    padding:18px 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    font-size:14px;

    color:#555;

    border-right:1px solid #ececec;

}

.compare-value:last-child{

    border-right:none;

}

/*==========================
YES / NO COLORS
==========================*/

.compare-value.yes{

    color:#169b45;

    font-weight:700;

}

.compare-value.no{

    color:#d63939;

    font-weight:700;

}

/*==================================================
HOVER
==================================================*/

.compare-row:hover{

    background:#fcfcfc;

}

.compare-row:hover .compare-title{

    background:#f4f4f4;

}

@media (max-width:991px){

    .compare-wrapper{
        overflow-x:hidden;
    }

    .compare-columns{
        display:grid;
        grid-template-columns:1fr;
        gap:18px;
        width:100%;
    }

    .col-xl-custom{
        width:100%;
        max-width:100%;
        flex:none;
        margin-bottom:20px;
    }

    .property-card,
    .compare-info-card,
    .add-property-card{
        width:100%;
    }

}

@media (min-width:1400px){

    .container-xxl{

        padding-left:120px;

        padding-right:120px;

    }

}

@media(max-width:991px){

.compare-header .row{

    flex-direction:column;

    align-items:flex-start;

}

.compare-header h1{

    font-size:32px;

    line-height:42px;

}

.download-btn{

    width:100%;

    margin-top:20px;

}

}

#popupProjectList{

    max-height:300px;

    overflow-y:auto;

    overflow-x:hidden;

    padding-right:5px;

}

#popupProjectList::-webkit-scrollbar{

    width:6px;

}

#popupProjectList::-webkit-scrollbar-thumb{

    background:#bfbfbf;

    border-radius:20px;

}

.popupProjectItem{

    min-height:135px;

}

.moreAmenities{
    display:inline-block;
    margin-left:8px;
    white-space:nowrap;
    text-decoration:none;
    font-weight:600;
}

.amenityBadge{
    display:inline-flex;
    align-items:center;
    margin:4px;
    white-space:nowrap;
}