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

body{

font-family:'Inter', sans-serif;
background:#f5f5f0;
color:#2f3a34;
line-height:1.6;

}


/* NAVBAR */

.navbar{

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

padding:18px 8%;

position:sticky;
top:0;

background:rgba(245,245,240,0.95);
backdrop-filter:blur(8px);

border-bottom:1px solid rgba(0,0,0,0.05);

z-index:1000;

}


/* LOGO */

.logo img{

height:142px;
width:auto;

}

.menu-toggle{

display:none;
font-size:28px;
cursor:pointer;
color:#365c49;

}
/* NAV LINKS */

nav{

display:flex;
gap:32px;

}

nav a{

text-decoration:none;
font-size:15px;

color:#44524b;

letter-spacing:0.4px;

position:relative;

transition:0.25s;

}

nav a::after{

content:"";
position:absolute;
left:0;
bottom:-6px;

width:0%;
height:1px;

background:#365c49;

transition:0.3s;

}

nav a:hover{

color:#365c49;

}

nav a:hover::after{

width:100%;

}


/* HERO */

.hero{

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

align-items:center;

gap:80px;

padding:140px 8% 120px 8%;

min-height:80vh;

}

.hero-text h1{

font-family:'Playfair Display', serif;

font-size:68px;

line-height:1.1;

color:#3b5d4f;

margin-bottom:24px;

}

.hero-text p{

max-width:460px;

font-size:17px;

color:#4b5751;

margin-bottom:38px;

}

.hero-image img{

width:100%;
border-radius:14px;

box-shadow:0 20px 50px rgba(0,0,0,0.08);

}



/* BUTTON */

.primary-btn{

padding:15px 34px;

border:none;

background:#365c49;

color:white;

border-radius:40px;

font-size:15px;

cursor:pointer;

transition:0.25s;

}

.primary-btn:hover{

transform:translateY(-2px);

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

}



/* CTA */

.cta{

padding:120px 20%;

text-align:center;

background:#e4e7df;

}

.cta h2{

font-family:'Playfair Display', serif;

font-size:42px;

color:#3b5d4f;

margin-bottom:20px;

}

.cta p{

max-width:500px;

margin:auto;

margin-bottom:30px;

}

.cta-btn{

padding:16px 34px;

border:none;

background:#365c49;

color:white;

border-radius:30px;

cursor:pointer;

transition:0.3s;

}

.cta-btn:hover{

transform:translateY(-3px);

box-shadow:0 10px 20px rgba(0,0,0,0.1);

}



/* FOOTER */

.site-footer{

background:#2f3a34;

color:#e6ebe7;

}

.footer-container{

display:grid;

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

gap:60px;

padding:80px 8%;

}

.footer-brand img{

height:142px;

margin-bottom:15px;

}

.footer-brand p{

max-width:300px;

color:#cdd4cf;

}

.footer-links h4,
.footer-contact h4{

margin-bottom:15px;

}

.footer-links a{

display:block;

text-decoration:none;

color:#cdd4cf;

margin-bottom:10px;

transition:0.3s;

}

.footer-links a:hover{

color:white;

transform:translateX(4px);

}

.footer-contact p{

color:#cdd4cf;

margin-bottom:10px;

}

.footer-bottom{

border-top:1px solid rgba(255,255,255,0.1);

text-align:center;

padding:25px;

font-size:13px;

color:#aab3ad;

}



/* MOBILE */



@media(max-width:900px){

.menu-toggle{
display:block;
}

nav{

position:absolute;
top:100%;
left:0;

width:100%;

background:#f5f5f0;

flex-direction:column;

align-items:center;

gap:20px;

padding:30px 0;

display:none;

border-bottom:1px solid rgba(0,0,0,0.05);

}

nav.active{
display:flex;
}    

.hero{

grid-template-columns:1fr;

text-align:center;

gap:40px;

}

.hero-text p{

margin:auto;

}

.footer-container{

grid-template-columns:1fr;

gap:40px;

}

}