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


body{

font-family:'Montserrat',sans-serif;
color:#555;

}


h1,h2{

font-family:'Cormorant Garamond',serif;

font-weight:400;

}





/* HEADER */


header{

position:absolute;
top:0;
width:100%;
z-index:10;

}



nav{

height:80px;
display:flex;
align-items:center;
justify-content:center;
gap:50px;

}


.logo img{

width:90px;

}



nav ul{

display:flex;
gap:35px;
list-style:none;

font-size:12px;

}



nav button{

background:#777;
color:white;
border:0;
padding:8px 20px;

}





/* HERO */


.hero{

height:370px;

background:url("assets/hero.jpg");

background-size:cover;

background-position:center;

display:flex;

justify-content:center;

align-items:center;

position:relative;

}


.overlay{

position:absolute;
inset:0;

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

}



.hero-content{

position:relative;

text-align:center;

color:white;

}



.hero h1{

font-size:55px;

line-height:.9;

}



.hero p{

font-size:14px;

margin:20px;

}



.hero a{

background:white;

color:#555;

padding:15px 35px;

display:inline-block;

}







/* ABOUT */


.about{

display:flex;

padding:80px 13%;

gap:60px;

background:#f8f5ef;

}



.about img{

width:320px;

}



.about-text h2{

font-size:55px;

}



.about-text p{

font-size:13px;

line-height:2;

}


.about button{

padding:12px 30px;

background:white;

border:0;

}





/* STORIES */


.stories{

padding:70px 10%;

text-align:center;

}



.stories h2,
.reviews h2{

font-size:55px;

}



.tabs{

margin:30px;

}


.tabs button{

padding:12px 50px;

border:0;

margin:5px;

background:#eee;

}



.tabs .active{

background:#967963;

color:white;

}



.gallery{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:5px;

}



.gallery img{

width:100%;

height:260px;

object-fit:cover;

}







/* REVIEWS */


.reviews{

padding:70px 15%;

}


.review-box{

display:flex;

align-items:center;

}


.review-text{

background:#f7f3ee;

padding:50px;

width:50%;

}



.review-image img{

width:350px;

}







.banner{

height:220px;

background:url("assets/banner.jpg");

background-size:cover;

display:flex;

justify-content:center;

align-items:center;

color:white;

}



.banner h2{

font-size:55px;

}





footer{

background:#f8f5ef;

padding:50px 12%;

display:flex;

justify-content:space-between;

}



footer img{

width:120px;

}


footer input{

display:block;

margin:10px;

padding:12px;

border:0;

border-bottom:1px solid #999;

background:none;

}


footer button{

padding:12px 30px;

}






@media(max-width:768px){


nav ul{

display:none;

}


.about,
.review-box,
footer{

flex-direction:column;

}



.gallery{

grid-template-columns:1fr 1fr;

}



.hero h1{

font-size:38px;

}



}