/*
Theme Name: JavaRa Living
Description: Premium furniture manufacturer theme
Version: 5.0
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@300;400;500&family=Manrope:wght@400;600&display=swap');

:root{
--cream:#f7f3ec;
--dark:#222;
--gold:#b4975a;
}

*{box-sizing:border-box}
body{
margin:0;
background:var(--cream);
color:var(--dark);
font-family:Inter,sans-serif;
}
h1,h2,h3{font-family:"Cormorant Garamond",serif;font-weight:500}
.container{width:min(1200px,88%);margin:auto}

.site-header{
position:absolute;
top:0;
left:0;
width:100%;
z-index:99;
padding:30px 0;
}

.header-inner{
display:flex;
justify-content:space-between;
align-items:center;
}

.site-header nav ul,
.site-header ul{
display:flex;
gap:35px;
list-style:none;
margin:0;
padding:0;
}

.site-header nav li{
list-style:none;
}

.site-header a{
color:#fff;
text-decoration:none;
font-family:Manrope,sans-serif;
font-size:12px;
letter-spacing:.15em;
text-transform:uppercase;
}

.hero{
height:100vh;
display:flex;
align-items:center;
background:
linear-gradient(#0008,#0008),
url("assets/images/hero.svg") center/cover;
color:white;
}

.hero h1{
font-size:clamp(45px,6vw,82px);
max-width:750px;
line-height:1;
}

.kicker{
font:12px Manrope;
letter-spacing:.3em;
}

.btn{
display:inline-block;
margin-top:25px;
padding:14px 35px;
background:var(--gold);
color:white;
}

.section{padding:110px 0}

.split{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
}

.split img,.project img{
width:100%;
}

.cards{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.card{
background:white;
padding:45px 20px;
text-align:center;
transition:.4s;
}

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

.project{
background:url("assets/images/project.svg") center/cover;
height:450px;
display:flex;
align-items:end;
padding:40px;
color:white;
}

.footer{
background:#222;
color:white;
padding:70px 0;
}

.reveal{
opacity:0;
transform:translateY(35px);
transition:1s;
}
.reveal.show{
opacity:1;
transform:none;
}

@media(max-width:800px){
.site-header nav ul{display:none}
.split,.cards{grid-template-columns:1fr}
}