:root{
  --bg:#0b0f0c;
  --card:#111714;
  --text:#f3f4f3;
  --accent:#4CAF50;
  --radius:20px;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  font-family:Arial, Helvetica, sans-serif;
  background:#0b0f0c;
  color:var(--text);
}

.header{
  position:fixed;
  top:0;
  width:100%;
  background:rgba(0,0,0,0.8);
  padding:18px 50px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:1000;
}

.header a{
  color:white;
  text-decoration:none;
  margin-left:25px;
  font-size:14px;
}

.hero{
  height:95vh;
  background:url("images/fourneville-nature.jpg") center/cover no-repeat;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
}

.hero h1{
  font-size:56px;
  font-weight:600;
  letter-spacing:2px;
  line-height:1.3;
  background:rgba(0,0,0,0.6);
  padding:25px 50px;
  border-radius:var(--radius);
  text-transform:uppercase;
}

.hero p{
  margin-top:25px;
  font-size:20px;
  background:rgba(0,0,0,0.7);
  padding:12px 25px;
  border-radius:10px;
}

.container{
  max-width:1100px;
  margin:auto;
  padding:120px 20px 60px 20px;
}

.section{
  margin-bottom:70px;
}

.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
}

.card{
  background:var(--card);
  padding:30px;
  border-radius:var(--radius);
  box-shadow:0 15px 35px rgba(0,0,0,0.5);
  transition:0.3s;
}

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

.image-block img{
  width:100%;
  height:300px;
  object-fit:cover;
  border-radius:var(--radius);
  margin-top:20px;
}

.btn{
  display:inline-block;
  padding:14px 24px;
  margin-top:20px;
  background:var(--accent);
  color:white;
  text-decoration:none;
  border-radius:12px;
  font-weight:bold;
}

.footer{
  text-align:center;
  padding:50px 20px;
  background:#111;
}

.whatsapp{
  position:fixed;
  bottom:25px;
  right:25px;
  background:#25D366;
  color:white;
  padding:18px 22px;
  border-radius:50%;
  text-decoration:none;
  font-size:22px;
  box-shadow:0 10px 20px rgba(0,0,0,0.5);
}

@media(max-width:900px){
  .grid{grid-template-columns:1fr;}
  .hero h1{font-size:34px;}
}