/* ===============================
   SMOOTH SCROLL
=============================== */

html{
scroll-behavior:smooth;
}
/* ==================================
   GLOBAL RESET
================================== */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
}

body{
background:#fff;
color:#111;
line-height:1.5;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}

section{
width:100%;
}

/* ==================================
   HEADER
================================== */
.header{
background:#111;
padding:18px 0;
}

.nav{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
flex-wrap:wrap;
}

.logo{
color:#fff;
text-decoration:none;
font-size:28px;
font-weight:700;
}

nav{
display:flex;
gap:18px;
flex-wrap:wrap;
}

nav a{
color:#fff;
text-decoration:none;
font-size:15px;
}

.nav-btn{
background:#fff;
color:#111 !important;
padding:10px 18px;
border-radius:4px;
}

/* ==================================
   HERO SECTION
================================== */
.hero{
padding:100px 0;
text-align:center;
background:#f5f5f5;
}

.hero h1{
font-size:52px;
line-height:1.2;
margin-bottom:15px;
}

.hero p{
font-size:18px;
color:#555;
max-width:750px;
margin:0 auto 25px;
}

/* ==================================
   BUTTONS
================================== */
.btn,
.main-btn{
display:inline-block;
padding:14px 28px;
background:#111;
color:#fff;
text-decoration:none;
border-radius:4px;
border:none;
cursor:pointer;
}

/* ==================================
   SEARCH BOX
================================== */
.search-box{
display:flex;
justify-content:center;
align-items:center;
gap:15px;
flex-wrap:wrap;
margin:25px 0;
}

.search-box select,
.search-box button{
padding:14px;
min-width:220px;
border:1px solid #ccc;
font-size:16px;
background:#fff;
}

.search-box button{
background:#111;
color:#fff;
cursor:pointer;
}

/* ==================================
   HERO STATS
================================== */
.stats{
display:flex;
justify-content:center;
align-items:stretch;
gap:20px;
margin-top:35px;
flex-wrap:wrap;
}

.stats div{
background:#fff;
border:1px solid #ddd;
padding:20px 28px;
min-width:180px;
text-align:center;
}

.stats h3{
font-size:28px;
margin-bottom:8px;
}

.stats p,
.stats span{
color:#555;
}

/* ==================================
   SERVICES / CARDS
================================== */
.services{
padding:70px 0;
}

.grid,
.cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

.card{
background:#fff;
border:1px solid #ddd;
padding:30px;
text-align:center;
height:100%;
}

.card img{
width:100%;
height:220px;
object-fit:cover;
border-radius:6px;
margin-bottom:15px;
}

.card h3{
font-size:22px;
margin-bottom:10px;
}

.card p{
color:#555;
margin-bottom:8px;
}

/* ==================================
   CTA SECTION
================================== */
.cta{
padding:80px 0;
background:#111;
color:#fff;
text-align:center;
}

.cta h2{
font-size:36px;
margin-bottom:10px;
}

/* ==================================
   PAGE BANNER
================================== */
.page-banner{
padding:80px 0;
background:#f2f2f2;
text-align:center;
}

.page-banner h1{
font-size:42px;
margin-bottom:10px;
}

/* ==================================
   CONTENT SECTION
================================== */
.content{
padding:60px 0;
font-size:18px;
line-height:1.8;
}

/* ==================================
   FORMS
================================== */
input,
textarea,
select{
width:100%;
padding:12px;
border:1px solid #ccc;
margin-bottom:10px;
}

button{
border:none;
cursor:pointer;
}

/* ==================================
   FLOATING ACTION BUTTONS
================================== */
.wa-btn{
position:fixed;
right:20px;
bottom:20px;
background:#25D366;
color:#fff;
padding:14px 18px;
text-decoration:none;
border-radius:50px;
font-weight:600;
z-index:9999;
box-shadow:0 8px 20px rgba(0,0,0,.18);
}

.call-btn{
display:none;
}

/* ==================================
   RESPONSIVE
================================== */
@media(max-width:768px){

.nav{
flex-direction:column;
}

nav{
justify-content:center;
}

.hero{
padding:70px 0;
}

.hero h1{
font-size:34px;
}

.hero p{
font-size:17px;
}

.grid,
.cards{
grid-template-columns:1fr;
}

.stats{
flex-direction:column;
align-items:center;
}

.stats div{
width:100%;
max-width:320px;
}

.search-box{
flex-direction:column;
}

.search-box select,
.search-box button{
width:100%;
max-width:320px;
}

/* EMAIL FLOATING BUTTON */

.email-btn{
position:fixed;
left:20px;
bottom:20px;
background:#111;
color:#fff;
padding:14px 18px;
text-decoration:none;
border-radius:50px;
font-weight:700;
z-index:9999;
display:inline-block;
box-shadow:0 8px 20px rgba(0,0,0,.18);
}

}

/* ===============================
   PREMIUM FOOTER
=============================== */

.footer{
background:#000;
color:#fff;
padding:60px 20px 25px;
margin-top:0;
}

.footer-wrap{
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:35px;
max-width:1200px;
margin:auto;
align-items:start;
}

.footer h3{
font-size:28px;
margin-bottom:14px;
}

.footer p{
color:#bbb;
line-height:1.8;
font-size:15px;
}

.footer-links{
display:flex;
flex-direction:column;
gap:12px;
}

.footer-links a{
color:#fff;
text-decoration:none;
font-size:15px;
}

.footer-links a:hover{
color:#25D366;
}

.footer-contact p{
margin-bottom:10px;
}

.copyright{
border-top:1px solid rgba(255,255,255,.12);
margin-top:35px;
padding-top:18px;
text-align:center;
}

.copyright p{
font-size:14px;
color:#888;
}

/* MOBILE */
@media(max-width:768px){

.footer-wrap{
grid-template-columns:1fr;
text-align:center;
}

.footer-links{
align-items:center;
}

}

/* ===============================
   LUXURY TYPOGRAPHY
=============================== */

body{
font-family:'Inter', Arial, sans-serif;
}

h1,h2,h3,
.logo{
font-family:'Playfair Display', serif;
letter-spacing:.2px;
}

.hero h1{
font-weight:700;
}

.testimonials h2,
.services h2,
.why-us h2,
.areas h2,
.lead-section h2,
.final-cta h2{
font-weight:700;
}

/* ===============================
   DESKTOP CONTACT BAR
=============================== */

.contact-bar{
position:fixed;
right:20px;
top:50%;
transform:translateY(-50%);
display:flex;
flex-direction:column;
gap:10px;
z-index:9998;
}

.contact-bar a{
background:#111;
color:#fff;
text-decoration:none;
padding:12px 16px;
border-radius:8px;
font-size:14px;
font-weight:600;
box-shadow:0 10px 20px rgba(0,0,0,.15);
transition:.3s;
text-align:center;
min-width:110px;
}

.contact-bar a:hover{
background:#c8a96b;
color:#111;
transform:translateX(-4px);
}

/* MOBILE HIDE */
@media(max-width:768px){
.contact-bar{
display:none;
}
}

/* ===============================
   BACK TO TOP BUTTON
=============================== */

.top-btn{
display:none;
position:fixed;
left:20px;
bottom:90px;
width:48px;
height:48px;
border:none;
border-radius:50%;
background:#111;
color:#fff;
font-size:22px;
cursor:pointer;
z-index:9998;
box-shadow:0 10px 20px rgba(0,0,0,.18);
transition:.3s;
}

.top-btn:hover{
background:#c8a96b;
color:#111;
transform:translateY(-3px);
}

/* MOBILE */
@media(max-width:768px){
.top-btn{
left:15px;
bottom:80px;
width:44px;
height:44px;
}
}

/* ===============================
   LUXURY PRELOADER
=============================== */

#preloader{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#111;
display:flex;
justify-content:center;
align-items:center;
z-index:99999;
transition:.5s ease;
}

.loader-logo{
color:#fff;
font-size:34px;
font-family:'Playfair Display', serif;
letter-spacing:1px;
animation:pulseLogo 1.2s infinite alternate;
}

@keyframes pulseLogo{
from{
opacity:.5;
transform:scale(.98);
}
to{
opacity:1;
transform:scale(1.03);
}
}

/* ===============================
   ABOUT PAGE
=============================== */

.about-page{
padding:90px 20px;
background:#fff;
}

.about-grid{
display:grid;
grid-template-columns:1.2fr .8fr;
gap:40px;
align-items:center;
max-width:1200px;
margin:auto;
}

.about-content h2{
font-size:46px;
line-height:1.2;
margin-bottom:22px;
color:#111;
}

.about-content p{
font-size:18px;
line-height:1.9;
color:#555;
margin-bottom:18px;
}

.about-box{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
}

.mini-box{
background:#111;
color:#fff;
padding:28px 20px;
border-radius:16px;
text-align:center;
}

.mini-box h3{
font-size:34px;
margin-bottom:8px;
color:#c8a96b;
}

.mini-box p{
color:#ddd;
font-size:15px;
}

/* MOBILE */
@media(max-width:768px){

.about-page{
padding:70px 15px;
}

.about-grid{
grid-template-columns:1fr;
gap:30px;
}

.about-content h2{
font-size:34px;
}

.about-content p{
font-size:16px;
}

.about-box{
grid-template-columns:1fr 1fr;
}

}

/* ===============================
   CONTACT PAGE
=============================== */

.contact-page{
padding:90px 20px;
background:#fff;
}

.contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
max-width:1200px;
margin:auto;
align-items:start;
}

.contact-info h2{
font-size:44px;
margin-bottom:18px;
color:#111;
}

.contact-info > p{
font-size:18px;
line-height:1.8;
color:#555;
margin-bottom:28px;
}

.info-box{
background:#111;
padding:24px;
border-radius:16px;
margin-bottom:16px;
}

.info-box h3{
font-size:22px;
margin-bottom:8px;
color:#c8a96b;
}

.info-box p{
color:#fff;
font-size:16px;
}

.contact-form-wrap{
background:#f8f8f8;
padding:32px;
border-radius:18px;
box-shadow:0 16px 36px rgba(0,0,0,.06);
}

.contact-form{
display:grid;
gap:16px;
}

.contact-form input,
.contact-form select,
.contact-form textarea{
padding:15px 16px;
border:1px solid #ddd;
border-radius:10px;
font-size:15px;
background:#fff;
}

.contact-form textarea{
min-height:130px;
resize:none;
}

.contact-form button{
padding:16px;
background:#111;
color:#fff;
border:none;
border-radius:10px;
font-weight:700;
cursor:pointer;
transition:.3s;
}

.contact-form button:hover{
background:#c8a96b;
color:#111;
}

/* MOBILE */
@media(max-width:768px){

.contact-page{
padding:70px 15px;
}

.contact-grid{
grid-template-columns:1fr;
gap:28px;
}

.contact-info h2{
font-size:34px;
}

.contact-info > p{
font-size:16px;
}

.contact-form-wrap{
padding:24px;
}

}

/* ===============================
   PREMIUM LISTINGS PAGE
=============================== */

.listing-top{
padding:70px 20px 40px;
background:#f8f8f8;
border-bottom:1px solid #eee;
}

.bread{
font-size:14px;
color:#777;
margin-bottom:18px;
}

.top-head{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
flex-wrap:wrap;
margin-bottom:28px;
}

.top-head h1{
font-size:48px;
line-height:1.2;
margin-bottom:8px;
color:#111;
}

.top-head p{
font-size:17px;
color:#666;
}

.location-tags{
display:flex;
gap:12px;
flex-wrap:wrap;
}

.location-tags a{
padding:10px 18px;
background:#fff;
border:1px solid #e5e5e5;
border-radius:40px;
text-decoration:none;
color:#111;
font-size:14px;
transition:.3s;
}

.location-tags a:hover{
background:#111;
color:#fff;
border-color:#111;
transform:translateY(-2px);
}

/* MOBILE */
@media(max-width:768px){

.listing-top{
padding:55px 15px 30px;
}

.top-head h1{
font-size:34px;
}

.top-head{
align-items:flex-start;
}

.location-tags a{
font-size:13px;
padding:9px 14px;
}

}

/* ===============================
   LISTING FILTER BAR
=============================== */

.listing-filter{
display:flex;
gap:14px;
flex-wrap:wrap;
margin-top:28px;
}

.listing-filter select,
.listing-filter button{
padding:14px 16px;
border:1px solid #ddd;
border-radius:10px;
font-size:15px;
background:#fff;
min-width:220px;
}

.listing-filter button{
background:#111;
color:#fff;
font-weight:700;
cursor:pointer;
transition:.3s;
border:none;
}

.listing-filter button:hover{
background:#c8a96b;
color:#111;
}

/* MOBILE */
@media(max-width:768px){

.listing-filter{
flex-direction:column;
}

.listing-filter select,
.listing-filter button{
width:100%;
min-width:100%;
}

}
.no-result{
text-align:center;
padding:80px 20px;
width:100%;
}

.no-result h2{
font-size:42px;
margin-bottom:12px;
color:#111;
}

.no-result p{
font-size:17px;
color:#666;
margin-bottom:22px;
}
/* ===============================
   ACTIVE LOCATION TAG
=============================== */

.location-tags a.active-tag{
background:#111;
color:#fff;
border-color:#111;
box-shadow:0 10px 22px rgba(0,0,0,.12);
}

/* ===================================
   PREMIUM PROPERTY DETAIL PAGE
=================================== */

.premium-property-page{
padding:50px 0 90px;
background:#f7f7f7;
}

.property-breadcrumb{
font-size:14px;
color:#777;
margin-bottom:24px;
}

.property-layout{
display:grid;
grid-template-columns:1.55fr .75fr;
gap:34px;
align-items:start;
}

/* LEFT + RIGHT COMMON BOX */
.property-left > div,
.property-right > div{
background:#fff;
border-radius:22px;
padding:28px;
box-shadow:0 18px 45px rgba(0,0,0,.06);
margin-bottom:26px;
}

/* GALLERY */
.property-gallery{
display:grid;
grid-template-columns:1.25fr .75fr;
gap:16px;
padding:18px !important;
}

.gallery-big img{
width:100%;
height:520px;
object-fit:cover;
border-radius:18px;
display:block;
}

.gallery-side{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.gallery-side div{
position:relative;
}

.gallery-side img{
width:100%;
height:252px;
object-fit:cover;
border-radius:16px;
display:block;
}

.more-photo span{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
font-weight:700;
color:#fff;
background:rgba(0,0,0,.45);
border-radius:16px;
}

/* HERO */
.hero-tags{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-bottom:18px;
}

.red-tag{
background:#111;
color:#fff;
padding:8px 14px;
border-radius:30px;
font-size:13px;
font-weight:700;
}

.light-tag{
background:#f1f1f1;
color:#111;
padding:8px 14px;
border-radius:30px;
font-size:13px;
font-weight:700;
}

.property-hero-box h1{
font-size:48px;
line-height:1.15;
margin-bottom:14px;
color:#111;
}

.hero-location{
font-size:18px;
color:#666;
margin-bottom:24px;
}

.hero-stats{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
}

.hero-stat{
background:#f8f8f8;
padding:18px;
border-radius:16px;
border:1px solid #eee;
}

.hero-stat span{
display:block;
font-size:13px;
color:#777;
margin-bottom:8px;
text-transform:uppercase;
}

.hero-stat strong{
font-size:20px;
color:#111;
}

/* DETAIL BOX */
.small-head{
font-size:12px;
font-weight:700;
letter-spacing:1px;
color:#c8a96b;
margin-bottom:10px;
text-transform:uppercase;
}

.detail-box h2{
font-size:34px;
margin-bottom:18px;
color:#111;
}

.detail-text{
font-size:17px;
line-height:1.9;
color:#555;
}

/* SPEC GRID */
.spec-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
}

.spec-item{
background:#f8f8f8;
padding:18px;
border-radius:16px;
border:1px solid #eee;
}

.spec-item span{
display:block;
font-size:13px;
color:#777;
margin-bottom:8px;
}

.spec-item strong{
font-size:18px;
color:#111;
}

/* AMENITIES */
.amenity-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
}

.amenity-grid span{
background:#f8f8f8;
padding:14px 16px;
border-radius:14px;
font-size:15px;
border:1px solid #eee;
}

/* TRAVEL */
.travel-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
margin-top:22px;
}

.travel-card{
background:#f8f8f8;
padding:18px;
border-radius:16px;
text-align:center;
border:1px solid #eee;
}

.travel-card span{
display:block;
font-size:13px;
color:#777;
margin-bottom:8px;
}

.travel-card strong{
font-size:17px;
color:#111;
}

/* RIGHT SIDEBAR */
.property-right{
position:sticky;
top:110px;
}

.advisor-box h3{
font-size:28px;
margin-bottom:10px;
color:#111;
}

.reply-fast{
color:#666;
margin-bottom:18px;
}

.advisor-actions{
display:grid;
gap:12px;
}

.advisor-actions a{
display:block;
text-align:center;
padding:15px;
border-radius:12px;
text-decoration:none;
font-weight:700;
background:#111;
color:#fff;
transition:.3s;
}

.advisor-actions a:hover{
background:#c8a96b;
color:#111;
}

.query-box h3{
font-size:28px;
margin-bottom:18px;
color:#111;
}

.query-box form{
display:grid;
gap:14px;
}

.query-box input,
.query-box textarea{
width:100%;
padding:15px 16px;
border:1px solid #ddd;
border-radius:12px;
font-size:15px;
background:#fff;
}

.query-box textarea{
min-height:130px;
resize:none;
}

.query-box button{
padding:16px;
border:none;
border-radius:12px;
background:#111;
color:#fff;
font-weight:700;
cursor:pointer;
transition:.3s;
}

.query-box button:hover{
background:#c8a96b;
color:#111;
}

/* SIMILAR CARDS INSIDE PAGE */
.premium-property-page .cards{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
}

/* MOBILE */
@media(max-width:992px){

.property-layout{
grid-template-columns:1fr;
}

.property-right{
position:static;
top:auto;
}

.hero-stats,
.spec-grid,
.travel-grid,
.amenity-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){

.premium-property-page{
padding:35px 0 70px;
}

.property-left > div,
.property-right > div{
padding:20px;
border-radius:18px;
}

.property-gallery{
grid-template-columns:1fr;
}

.gallery-big img{
height:320px;
}

.gallery-side{
grid-template-columns:1fr 1fr;
}

.gallery-side img{
height:150px;
}

.property-hero-box h1{
font-size:34px;
}

.detail-box h2{
font-size:28px;
}

.hero-stats,
.spec-grid,
.travel-grid,
.amenity-grid,
.premium-property-page .cards{
grid-template-columns:1fr;
}

.hero-location,
.detail-text{
font-size:16px;
}

}

/* HEADER FINAL FIX */

.header{
position:fixed;
top:0;
left:0;
width:100%;
height:80px;
z-index:9999;
background:#111 !important;
display:flex;
align-items:center;
box-shadow:0 10px 25px rgba(0,0,0,.18);
}

body{
padding-top:80px;
}

.header .container,
.nav{
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
}

.header .logo{
color:#fff !important;
font-size:28px;
font-weight:700;
text-decoration:none;
}

.header nav{
display:flex;
gap:28px;
align-items:center;
}

.header nav a{
color:#fff !important;
text-decoration:none;
}

/* Hide only bottom right WhatsApp bubble */
.wa-btn{
display:none !important;
}

.section-title{
text-align:center;
font-size:64px;
margin-bottom:10px;
line-height:1.1;
font-weight:700;
}

.section-title span{
color:#c8a96b;
}

.section-sub{
text-align:center;
font-size:20px;
color:#666;
margin-bottom:45px;
max-width:700px;
margin-left:auto;
margin-right:auto;
}

.featured-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:28px;
margin-top:30px;
}

.featured-card{
background:#fff;
border-radius:18px;
overflow:hidden;
box-shadow:0 18px 45px rgba(0,0,0,.08);
transition:.35s ease;
border:1px solid #eee;
}

.featured-card:hover{
transform:translateY(-8px);
box-shadow:0 28px 55px rgba(0,0,0,.14);
}

.featured-img{
position:relative;
height:220px;
overflow:hidden;
border-radius:18px 18px 0 0;
background:#f5f5f5;
}

.featured-img img{
width:100%;
height:100%;
object-fit:cover;
transition:.5s ease;
}

.featured-card:hover .featured-img img{
transform:scale(1.08);
}

.deal-badge{
position:absolute;
top:14px;
left:14px;
background:#111;
color:#fff;
font-size:12px;
padding:8px 12px;
border-radius:30px;
font-weight:700;
}

.featured-content{
padding:22px;
}

.featured-loc{
font-size:14px;
color:#777;
margin-bottom:8px;
}

.featured-content h3{
font-size:32px;
line-height:1.2;
margin-bottom:18px;
}

.featured-bottom{
display:flex;
justify-content:space-between;
align-items:center;
gap:15px;
}

.featured-price{
font-size:26px;
font-weight:700;
color:#c8a96b;
}

.featured-btn{
background:#c8a96b;
color:#111;
padding:12px 18px;
border-radius:10px;
font-weight:700;
text-decoration:none;
transition:.3s;
}

.featured-btn:hover{
background:#111;
color:#fff;
}

@media(max-width:768px){
.featured-content h3{
font-size:26px;
}

.featured-bottom{
flex-direction:column;
align-items:flex-start;
}
}