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

body{
font-family:'Segoe UI',Arial,sans-serif;
color:#333;
background:#fff;
line-height:1.6;
}

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

header{
position:fixed;
top:0;
left:0;
width:100%;
padding:15px 8%;
display:flex;
justify-content:space-between;
align-items:center;
background:#ffffff;
box-shadow:0 2px 15px rgba(0,0,0,.08);
z-index:999;
}

.logo{
display:flex;
align-items:center;
}

.logo img{
height:70px;
width:auto;
display:block;
}

nav a{
color:#2f8f55;
text-decoration:none;
margin-left:25px;
font-size:16px;
font-weight:600;
transition:.3s;
}

nav a:hover{
color:#0f6db2;
}

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

.hero{

height:100vh;

background:
linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),
url("../images/hero.jpg");

background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
padding-top:90px;

}

.hero-content h1{
font-size:60px;
margin-bottom:20px;
}

.hero-content p{
font-size:22px;
max-width:700px;
margin:auto;
margin-bottom:40px;
}

/*================ BOTONES ================*/

.btn{
padding:15px 35px;
border-radius:40px;
text-decoration:none;
display:inline-block;
margin:10px;
font-weight:bold;
transition:.3s;
}

.btn:hover{
transform:translateY(-3px);
}

.green{
background:#2f8f55;
color:white;
}

.white{
background:white;
color:#333;
}

/*================ SECCIONES ================*/

section{
padding:90px 8%;
text-align:center;
background:white;
}

h2{
font-size:40px;
margin-bottom:20px;
color:#2f8f55;
}

.subtitle{
font-size:20px;
}

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

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

.card{
padding:40px;
background:white;
border-radius:20px;
box-shadow:0 8px 25px rgba(0,0,0,.08);
transition:.3s;
}

.card:hover{
transform:translateY(-8px);
}

.icon{
font-size:50px;
}

/*================ VILLAS ================*/

.villas{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
}

.villa{
background:white;
border-radius:20px;
overflow:hidden;
padding-bottom:30px;
box-shadow:0 8px 25px rgba(0,0,0,.10);
transition:.3s;
}

.villa:hover{
transform:translateY(-8px);
}

.villa img{
width:100%;
height:250px;
object-fit:cover;
}

.villa h3{
margin:20px 0 10px;
}

.villa p{
margin-bottom:20px;
}

.villa a{
color:#2f8f55;
font-weight:bold;
text-decoration:none;
}

/*================ SERVICIOS ================*/

.service-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:30px;
font-size:20px;
}

/*================ MAPA ================*/

#map{
box-shadow:0 8px 25px rgba(0,0,0,.10);
border-radius:20px;
overflow:hidden;
}

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

.whatsapp{
position:fixed;
right:30px;
bottom:30px;
background:#25D366;
color:white;
font-size:35px;
width:65px;
height:65px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
box-shadow:0 8px 20px rgba(0,0,0,.20);
}

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

footer{
background:#2f8f55;
color:white;
padding:30px;
text-align:center;
}

/*================ PAGINAS VILLAS ================*/

.villa-hero{
height:70vh;
background:
linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),
url("../images/villa1/principal.jpg");
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
}

.description{
max-width:800px;
margin:auto;
font-size:20px;
line-height:1.8;
}

.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}

.gallery img{
width:100%;
height:250px;
object-fit:cover;
border-radius:20px;
transition:.3s;
}

.gallery img:hover{
transform:scale(1.03);
}

.details{
font-size:20px;
line-height:2;
}

/*================ RESPONSIVE ================*/

@media(max-width:700px){

header{

position:fixed;

top:0;
left:0;

width:100%;

height:90px;

padding:0 8%;

display:flex;

justify-content:space-between;

align-items:center;

background:#ffffff url("logo.jpeg") no-repeat left 25px center;

background-size:180px auto;

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

z-index:999;

}
.hero-content p{
font-size:18px;
}

nav{
display:none;
}

}