:root{

--blue:#0D4C63;
--light:#F7FBFC;
--sand:#F6E7C1;
--green:#4D8C57;
--accent:#FFB703;

--radius:18px;
--shadow:0 12px 35px rgba(0,0,0,.12);

}

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

html{
scroll-behavior:smooth;
}

body{

font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
background:var(--light);
color:#222;
line-height:1.6;

}

img{

display:block;
width:100%;
height:auto;
border-radius:var(--radius);

}

.hero{

min-height:100vh;
display:grid;
place-items:center;
padding:2rem;
text-align:center;
background:
linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.25)),
url(images/hero.jpg) center/cover;

color:white;

}

.nav{

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

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

padding:1rem 8%;

}


h1{
    font-family:"Rye", serif;
    letter-spacing:3px;
}

h2{
    font-family:"Yesteryear", cursive;
}

body{
    font-family:Georgia, serif;
}
.logo{

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

}

.nav-links{

display:flex;
gap:2rem;
list-style:none;

}

.nav-links a{

color:white;
text-decoration:none;

}

.button{

display:inline-block;
margin-top:2rem;

background:var(--accent);
color:#222;
padding:.9rem 1.8rem;
border-radius:999px;
font-weight:700;
text-decoration:none;

transition:.25s;

}

.button:hover{

transform:translateY(-2px);

}

main{

max-width:1200px;
margin:auto;
padding:4rem 2rem;

}

.split{

display:grid;
grid-template-columns:1fr 1fr;
gap:4rem;
align-items:center;
margin-bottom:5rem;

}

.reverse{

direction:rtl;

}

.reverse>*{

direction:ltr;

}

.cards{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:2rem;

margin:5rem 0;

}

.card{

padding:2rem;
background:white;
border-radius:var(--radius);
box-shadow:var(--shadow);

transition:.25s;

}

.card:hover{

transform:translateY(-6px);

}

.mountain{

text-align:center;

}

.mountain img{

margin-top:2rem;

box-shadow:var(--shadow);

}

.quote{

padding:6rem 2rem;
text-align:center;
font-size:1.5rem;
font-style:italic;
color:var(--blue);

}

footer{

background:var(--blue);
color:white;
text-align:center;
padding:2rem;

}

.menu-btn{

display:none;
background:none;
border:none;
font-size:2rem;
color:white;

}

@media(max-width:800px){

.split{

grid-template-columns:1fr;

}

.nav-links{

display:none;
position:absolute;
top:70px;
right:20px;

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

padding:1rem;
border-radius:10px;

flex-direction:column;

}

.nav-links.show{

display:flex;

}

.menu-btn{

display:block;

}

}