/* =========================
   GOOGLE FONTS
========================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');

/* =========================
   ROOT
========================= */

:root{

--purple:#4B1D7A;
--gold:#D4AF37;
--gold-light:#F3D98A;

--black:#111111;
--white:#ffffff;
--cream:#F8F5EF;

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

}

/* =========================
   RESET
========================= */

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;
background:var(--cream);
color:var(--black);
overflow-x:hidden;

}

img{
width:100%;
display:block;
}

a{
text-decoration:none;
}

/* =========================
   NAVBAR
========================= */

.navbar{

position:fixed;
top:0;
left:0;
width:100%;

padding:20px 7%;

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

z-index:1000;

background:rgba(17,17,17,.6);
backdrop-filter:blur(12px);

}

.logo{

font-size:2rem;
font-weight:700;

font-family:'Cormorant Garamond',serif;

color:var(--gold);

}

nav{

display:flex;
gap:30px;

}

nav a{

color:white;
font-size:.95rem;
transition:.3s;

}

nav a:hover{

color:var(--gold);

}

.btn{

padding:12px 28px;

background:var(--gold);
color:black;

font-weight:600;

border-radius:40px;

transition:.3s;

}

.btn:hover{

transform:translateY(-3px);

}

.nav-right{

display:flex;
flex-direction:row;

align-items:center;

gap:25px;

}

.call-btn{

order:1;

}

.btn{

order:2;

}

/* =========================
   HERO
========================= */

.hero{

position:relative;

height:100vh;
overflow:hidden;

}

.hero video{

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

object-fit:cover;

}

.overlay{

position:absolute;
inset:0;

background:
linear-gradient(
to right,
rgba(0,0,0,.65),
rgba(75,29,122,.4)
);

}

.hero-content{

position:relative;
z-index:5;

height:100%;

display:flex;
flex-direction:column;

justify-content:center;

padding:0 10%;

max-width:900px;

}

.tagline{

color:var(--gold);

letter-spacing:3px;
text-transform:uppercase;

margin-bottom:15px;

}

.hero h1{

font-family:'Cormorant Garamond',serif;

font-size:5rem;

line-height:1;

color:white;

margin-bottom:20px;

}

.hero p{

font-size:1.2rem;

color:white;

margin-bottom:40px;

}

.hero-buttons{

display:flex;
gap:20px;
flex-wrap:wrap;

}

.gold-btn{

padding:15px 35px;

background:var(--gold);
color:black;

font-weight:600;

border-radius:50px;

}

.outline-btn{

padding:15px 35px;

border:2px solid white;

color:white;

border-radius:50px;

}

/* =========================
   STATS
========================= */

.stats{

padding:80px 8%;

display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

gap:30px;

background:white;

}

.stats div{

text-align:center;

}

.stats h2{

font-size:3rem;
color:var(--purple);

font-family:'Cormorant Garamond',serif;

}

.stats p{

color:#666;

}

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

.section-title{

text-align:center;

padding:80px 20px 50px;

}

.section-title h2{

font-size:4rem;

font-family:'Cormorant Garamond',serif;

color:var(--purple);

margin-bottom:10px;

}

.section-title p{

color:#777;

max-width:700px;
margin:auto;

}

/* =========================
   PROPERTY CARDS
========================= */

.properties{

padding:0 0 100px;

}

.property-card{

display:grid;
grid-template-columns:1fr 1fr;

align-items:center;

margin-bottom:80px;

background:white;

}

.property-card.reverse{

direction:rtl;

}

.property-card.reverse .property-content{

direction:ltr;

}

.property-card img{

height:650px;
object-fit:cover;

}

.property-content{

padding:70px;

}

.property-content span{

color:var(--gold);

font-weight:600;

}

.property-content h3{

font-size:3rem;

margin:15px 0;

font-family:'Cormorant Garamond',serif;

color:var(--purple);

}

.property-content p{

line-height:1.8;

color:#666;

margin-bottom:25px;

}

.price{

font-size:2rem;

font-weight:700;

color:var(--gold);

margin-bottom:25px;

}

.property-content a{

display:inline-block;

padding:14px 30px;

background:var(--purple);

color:white;

border-radius:50px;

}

/* =========================
   AMENITIES
========================= */

.amenities{

padding:100px 8%;

background:white;

}

.amenity-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:25px;

}

.amenity{

background:

linear-gradient(
135deg,
var(--purple),
#6D2AB5
);

color:white;

padding:35px;

border-radius:20px;

text-align:center;

font-weight:600;

box-shadow:var(--shadow);

transition:.4s;

}

.amenity:hover{

transform:translateY(-8px);

}

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

.nature{

height:700px;

background:
url("images/nature.jpg")
center/cover;

position:relative;

}

.nature-overlay{

position:absolute;
inset:0;

background:
rgba(0,0,0,.55);

display:flex;
flex-direction:column;

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

text-align:center;

padding:20px;

}

.nature-overlay h2{

font-size:4rem;

font-family:'Cormorant Garamond',serif;

color:var(--gold);

margin-bottom:20px;

}

.nature-overlay p{

color:white;
max-width:700px;

font-size:1.2rem;

}

/* =========================
   ECOSYSTEM
========================= */

.ecosystem{

padding:100px 8%;

}

.eco-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:25px;

}

.eco-grid div{

background:white;

padding:35px;

border-left:5px solid var(--gold);

font-weight:600;

box-shadow:var(--shadow);

}

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

.smart{

padding:100px 8%;

background:white;

}

.smart-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:25px;

}

.smart-grid div{

padding:35px;

border-radius:20px;

background:

linear-gradient(
135deg,
var(--gold),
var(--gold-light)
);

font-weight:700;

text-align:center;

}

/* =========================
   VISIT FORM
========================= */

.visit{

padding:100px 8%;

background:

linear-gradient(
135deg,
var(--purple),
#2A1045
);

}

.visit-box{

max-width:700px;

margin:auto;

background:white;

padding:50px;

border-radius:25px;

}

.visit-box h2{

text-align:center;

margin-bottom:30px;

font-size:3rem;

font-family:'Cormorant Garamond',serif;

color:var(--purple);

}

form{

display:flex;
flex-direction:column;

gap:20px;

}

input,
select,
textarea{

padding:16px;

border:1px solid #ddd;

border-radius:10px;

font-size:1rem;

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

}

textarea{

height:140px;
resize:none;

}

button{

padding:16px;

background:var(--gold);

border:none;

font-weight:700;

cursor:pointer;

border-radius:10px;

}

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

footer{

background:#111;

color:white;

text-align:center;

padding:60px 20px;

}

footer h3{

font-size:2.5rem;

color:var(--gold);

font-family:'Cormorant Garamond',serif;

margin-bottom:10px;

}

footer p{

margin:10px 0;

}

/* =========================
   WHATSAPP
========================= */

.whatsapp{

position:fixed;

right:25px;
bottom:25px;

width:65px;
height:65px;

border-radius:50%;

background:#25D366;

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

font-size:2rem;

color:white;

z-index:1000;

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

}

/* =========================
   MOBILE
========================= */

@media(max-width:991px){

.hero h1{

font-size:3.2rem;

}

.property-card{

grid-template-columns:1fr;

}

.property-card img{

height:350px;

}

.property-content{

padding:35px;

}

.section-title h2{

font-size:2.7rem;

}

nav{

display:none;

}

}

@media(max-width:600px){

.hero-content{

padding:0 25px;

}

.hero h1{

font-size:2.5rem;

}

.hero p{

font-size:1rem;

}

.hero-buttons{

flex-direction:column;

}

.gold-btn,
.outline-btn{

text-align:center;

}

.visit-box{

padding:30px 20px;

}

}

/* =========================
   MOBILE
========================= */

@media(max-width:600px){

.hero-content{
padding:0 25px;
}

.hero h1{
font-size:2.5rem;
}

}

/* ==================================
   JS ANIMATION SUPPORT CSS
================================== */

.hidden{
opacity:0;
transform:translateY(60px);
transition:.8s;
}

.show{
opacity:1;
transform:translateY(0);
}

.scroll-top{

position:fixed;
bottom:110px;
right:30px;

width:50px;
height:50px;

border:none;
border-radius:50%;

background:#D4AF37;
color:#111;

font-size:1.2rem;
font-weight:bold;

cursor:pointer;

opacity:0;
visibility:hidden;

transition:.4s;

z-index:999;

}

.scroll-top.show{
opacity:1;
visibility:visible;
}

nav a.active{
color:#D4AF37;
}

.property-card img{
transition:.8s;
}

@keyframes float{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-10px);
}

100%{
transform:translateY(0);
}

}

/* =========================
   TESTIMONIALS
========================= */

.testimonials{

padding:120px 8%;

text-align:center;

}

.testimonial-grid{

display:flex;

justify-content:center;
align-items:stretch;

gap:30px;

flex-wrap:wrap;

margin-top:50px;

}

.testimonial-card{

background:#111;

color:#D4AF37;

width:350px;

padding:40px 30px;

border-radius:20px;

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

transition:.4s;

}

.testimonial-card:hover{

transform:translateY(-10px);

}

.testimonial-card p{

font-size:1rem;

line-height:1.8;

margin-bottom:20px;

}

.testimonial-card h4{

color:white;

font-size:1.1rem;

}

/* =========================
   MASTER PLAN
========================= */

.commercial{

padding:120px 8%;

text-align:center;

}

.commercial-content{

max-width:900px;

margin:auto;

}

.commercial-content span{

display:block;

margin-bottom:20px;

color:#D4AF37;

font-weight:600;

letter-spacing:2px;

}

.commercial-content h2{

font-size:4rem;

color:#4B1D7A;

margin-bottom:30px;

font-family:'Cormorant Garamond',serif;

}

.commercial-content p{

font-size:1.1rem;

line-height:1.8;

max-width:700px;

margin:0 auto 40px;

}

.commercial .gold-btn{

display:inline-block;

margin-top:20px;

}

/* =========================
   FAQ
========================= */

.faq{

padding:120px 8%;

}

.faq-container{

max-width:1000px;

margin:auto;

margin-top:50px;

}

.faq-item{

background:white;

padding:30px;

margin-bottom:20px;

border-left:5px solid #D4AF37;

border-radius:12px;

box-shadow:
0 10px 25px rgba(0,0,0,.08);

}

.faq-item h3{

margin-bottom:15px;

color:#111;

}

.faq-item p{

color:#555;

line-height:1.7;

}

.call-btn{

display:flex;
align-items:center;
gap:10px;

font-size:1.15rem;
font-weight:700;

background:
linear-gradient(
90deg,
#D4AF37,
#FFD700,
#F5D76E
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

text-decoration:none;

filter:drop-shadow(
0 0 8px rgba(212,175,55,.8)
);

transition:.3s;

}

.call-btn i{

color:#FFD700;

filter:drop-shadow(
0 0 8px rgba(255,215,0,.9)
);

}

.call-btn:hover{

transform:translateY(-2px);

filter:drop-shadow(
0 0 15px rgba(255,215,0,1)
);

}