
.property-details-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        rgba(3,27,78,.75),
        rgba(3,27,78,.55)
    );
}

.property-details-content{
    position:relative;
    z-index:2;
    max-width:800px;
    padding:0 20px;
}

.property-details-content h1{
    font-family:'Cormorant Garamond', serif;
    font-size:72px;
    font-weight:300;
    line-height:1;
    color:#fff;
    margin:15px 0;
}

.property-details-content p{
    max-width:650px;
    margin:0 auto 20px;
    color:rgba(255,255,255,.85);
    font-size:16px;
    line-height:1.7;
}

.property-meta{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:20px;
    color:#fff;
    font-size:13px;
}

.property-price{
    font-family:'Cormorant Garamond', serif;
    font-size:48px;
    color:var(--gold);
}

.property-showcase{
    padding:80px 8%;
}

.property-grid{
    display:grid;
    grid-template-columns:1.7fr 1fr;
    gap:40px;
    align-items:start;
}

.main-slide img{
    width:100%;
    height:550px;
    object-fit:cover;
    border-radius:20px;
}

.thumbnail-slider{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
    margin-top:15px;
}

.thumbnail-slider img{
    width:100%;
    height:100px;
    object-fit:cover;
    border-radius:12px;
    cursor:pointer;
    transition:.3s;
}

.thumbnail-slider img:hover{
    transform:scale(1.05);
}

.property-spec-card{
    background:#fff;
    padding:35px;
    border-radius:24px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    border:1px solid rgba(0,0,0,.05);
}

.property-type{
    color:var(--gold);
    letter-spacing:2px;
    text-transform:uppercase;
    font-size:12px;
}

.property-spec-card h2{
    font-family:'Cormorant Garamond',serif;
    font-size:42px;
    color:var(--navy);
    margin:15px 0;
}

.property-card-price{
    font-family:'Cormorant Garamond',serif;
    font-size:46px;
    color:var(--gold);
    margin-bottom:25px;
}

.spec-list{
    margin-bottom:30px;
}

.spec-row{
    display:flex;
    justify-content:space-between;
    padding:15px 0;
    border-bottom:1px solid #eee;
}

.spec-row span{
    color:#666;
}

.spec-row strong{
    color:var(--navy);
}

.property-buttons{
    display:flex;
    gap:15px;
    margin-top:30px;
    flex-wrap:wrap;
}

.property-buttons a{
    flex:1;
    min-width:180px;
    text-align:center;
}

.btn-outline{
    color:#031B4E !important;
}

.whatsapp-btn{
    background:#25D366;
    color:#fff;
    text-decoration:none;
}

.thumbnail-slider{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
    margin-top:15px;
}

.thumb{
    width:100%;
    height:100px;
    object-fit:cover;
    border-radius:12px;
    cursor:pointer;
    border:3px solid transparent;
    transition:.3s;
}

.thumb:hover{
    transform:scale(1.05);
}

.thumb.active{
    border-color:var(--gold);
}

.property-about-section{
    padding:100px 8%;
    background:var(--navy);
    color:#fff;

    display:grid;
    grid-template-columns:1fr 1.4fr;
    gap:80px;
    align-items:start;
}

.about-left{
    position:sticky;
    top:120px;
}

.about-right p{
    font-size:15px;
    line-height:2;
    color:rgba(255,255,255,.75);
    margin-bottom:25px;
}

.about-highlights{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin-top:40px;
}

.highlight-item{
    background:#fff;
    padding:25px;
    border-radius:18px;
    border:1px solid rgba(3,27,78,.08);
    transition:.3s;
}

.highlight-item:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.highlight-item strong{
    display:block;
    color:var(--navy);
    margin-bottom:8px;
    font-size:18px;
}

.highlight-item span{
    color:rgba(255,255,255,.7);
    font-size:14px;
}

.property-about-section .section-title{
    color:#fff;
}

.highlight-item{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);

    padding:25px;
    border-radius:18px;

    backdrop-filter:blur(10px);

    transition:.3s;
}

.highlight-item strong{
    display:block;
    color:var(--gold);
    font-size:18px;
    margin-bottom:8px;
}

.about-left::after{
    content:'';
    display:block;
    width:80px;
    height:2px;
    background:var(--gold);
    margin-top:25px;
}

.property-amenities-section{
    padding:100px 8%;
    background:#f8f8f6;
}

.section-header{
    text-align:center;
    max-width:800px;
    margin:0 auto 60px;
}

.section-header p{
    color:var(--text-muted);
    line-height:1.8;
    margin-top:15px;
}

.amenities-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.amenity-card{
    background:#fff;
    padding:35px 25px;
    border-radius:20px;
    text-align:center;

    border:1px solid rgba(3,27,78,.08);

    transition:.35s;
}

.amenity-card:hover{
    transform:translateY(-8px);

    border-color:var(--gold);

    box-shadow:
    0 20px 40px rgba(0,0,0,.08);
}

.amenity-icon{
    width:70px;
    height:70px;

    margin:0 auto 20px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:rgba(201,168,106,.1);

    font-size:28px;
}

.amenity-card h3{
    color:var(--navy);
    font-size:20px;
    margin-bottom:12px;
}

.amenity-card p{
    color:var(--text-muted);
    font-size:14px;
    line-height:1.7;
}
.amenity-card:hover .amenity-icon{
    background:var(--gold);
    transform:scale(1.1);
}

.amenity-icon{
    transition:.3s;
}







/* ===========================
   TABLET
=========================== */

@media (max-width: 992px){

    .property-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .property-spec-card{
        padding:25px;
    }

    .main-slide img{
        height:450px;
    }

    .property-about-section{
        grid-template-columns:1fr;
        gap:40px;
    }

    .about-left{
        position:static;
    }

    .amenities-grid{
        grid-template-columns:repeat(2,1fr);
    }


}

/* ===========================
   MOBILE
=========================== */

@media (max-width: 768px){

    .property-showcase{
        padding:50px 15px;
    }

    .property-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .main-slide img{
        height:280px;
        border-radius:15px;
    }

    .thumbnail-slider{
        grid-template-columns:repeat(4,1fr);
        gap:8px;
    }

    .thumbnail-slider img{
        height:70px;
        border-radius:8px;
    }

    .property-spec-card{
        padding:20px;
        border-radius:15px;
    }

    .property-spec-card h2{
        font-size:28px;
        line-height:1.2;
    }

    .property-card-price{
        font-size:32px;
        margin-bottom:20px;
    }

    .spec-row{
        padding:12px 0;
    }

    .spec-row span,
    .spec-row strong{
        font-size:14px;
    }

    .property-buttons{
        display:flex;
        flex-direction:column;
        gap:12px;
    }

    .property-buttons a{
        width:100%;
        text-align:center;
    }

    .property-details-content{
        transform:translateY(94px);
    }

    .property-about-section{
        padding:70px 20px;
    }

    .about-highlights{
        grid-template-columns:1fr;
    }

     .property-amenities-section{
        padding:70px 20px;
    }

    .amenities-grid{
        grid-template-columns:1fr;
    }

    .about-highlights{
        display:grid;
        grid-template-columns:1fr;
        gap:15px;
    }

    .highlight-item{
        padding:20px;
        width:100%;
    }
}

/* ===========================
   SMALL MOBILE
=========================== */

@media (max-width: 480px){

    .main-slide img{
        height:220px;
    }

    .thumbnail-slider{
        grid-template-columns:repeat(2,1fr);
    }

    .thumbnail-slider img{
        height:80px;
    }

    .property-spec-card h2{
        font-size:24px;
    }

    .property-card-price{
        font-size:28px;
    }

}