@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&display=swap');

*{
box-sizing:border-box;
}

body{

margin:0;
background:#f5f2ea;
color:#012B28;
font-family:system-ui;

}

/* HEADER */

header{

background:#012B28;
padding:15px 40px;
display:flex;
justify-content:space-between;
align-items:center;
position:sticky;
top:0;
z-index:1000;

}

.logo{

height:65px;

}

nav a{

color:#EBB42C;
text-decoration:none;
margin-left:30px;
font-family:Cinzel;
font-size:18px;

}

/* HERO */

.hero{

display:flex;
height:90vh;
position:relative;

}

.hero-left,
.hero-right{

flex:1;
background-size:cover;
background-position:center;

}

.hero-left{
background-image:url(images/hero-property.jpg);
}

.hero-right{
background-image:url(images/hero-watch.jpg);
}

.overlay{

position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(1,43,40,0.65);

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

}

.overlay h1{

color:#EBB42C;
font-family:Cinzel;
font-size:52px;
margin:0;

}

.overlay p{

color:white;
font-size:22px;

}

/* BUTTON */

.button{

border:2px solid #EBB42C;
color:#EBB42C;
padding:14px 28px;
margin:10px;
text-decoration:none;
font-family:Cinzel;

}

.button:hover{

background:#EBB42C;
color:#012B28;

}

/* SECTION */

.section{

padding:80px 10%;
text-align:center;

}

.section h2{

font-family:Cinzel;
font-size:36px;

}

/* PORTFOLIO */

.portfolio{

display:grid;
grid-template-columns:1fr 1fr;
gap:40px;

}

.project img{

width:100%;

}

/* FORM */

form{

max-width:600px;
margin:auto;

}

input,textarea{

width:100%;
padding:15px;
margin-bottom:15px;

}

/* FOOTER */

footer{

background:#012B28;
color:#EBB42C;
padding:30px;
text-align:center;

}

/* MOBILE */

@media(max-width:900px){

.hero{

flex-direction:column;

}

nav{

display:none;

}

}