/* =========================
   HEADER STYLING
========================= */

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

body{
font-family:'Montserrat',sans-serif;
background:#fffdfd;
}

/* TOP BAR */

.topbar{
width:100%;
background:#f7ecef;
padding:12px 7%;
display:flex;
justify-content:space-between;
align-items:center;
border-bottom:1px solid #eee;
}

.top-left span{
font-size:13px;
letter-spacing:1px;
color:#8c6b73;
font-weight:500;
}

.top-right a{
text-decoration:none;
margin-left:20px;
font-size:13px;
color:#8c6b73;
transition:0.3s;
}

.top-right a:hover{
color:#d97d93;
}

/* MAIN NAVBAR */

.main-header{
width:100%;
background:#ffffff;
box-shadow:0 4px 20px rgba(0,0,0,0.05);
position:sticky;
top:0;
z-index:999;
}

.navbar{
padding:22px 7%;
display:flex;
justify-content:space-between;
align-items:center;
}

/* LOGO */

.logo{
font-family:'Cormorant Garamond',serif;
font-size:42px;
font-weight:700;
color:#1d1d1d;
letter-spacing:1px;
}

.logo span{
color:#d97d93;
font-style:italic;
}

.tagline{
font-size:12px;
letter-spacing:2px;
color:#888;
margin-top:3px;
text-transform:uppercase;
}

/* NAVIGATION */

.nav-menu{
display:flex;
align-items:center;
gap:35px;
}

.nav-menu a{
text-decoration:none;
font-size:13px;
font-weight:600;
letter-spacing:1px;
color:#222;
position:relative;
transition:0.3s;
}

.nav-menu a::after{
content:'';
position:absolute;
left:0;
bottom:-6px;
width:0%;
height:2px;
background:#d97d93;
transition:0.3s;
}

.nav-menu a:hover::after{
width:100%;
}

.nav-menu a:hover{
color:#d97d93;
}

/* BUTTON */

.nav-btn a{
text-decoration:none;
padding:13px 28px;
background:#d97d93;
color:#fff;
font-size:12px;
letter-spacing:1px;
font-weight:600;
border-radius:40px;
transition:0.3s;
}

.nav-btn a:hover{
background:#be647b;
}

/* RESPONSIVE */

@media(max-width:992px){

.navbar{
flex-direction:column;
gap:25px;
}

.nav-menu{
flex-wrap:wrap;
justify-content:center;
gap:18px;
}

}

@media(max-width:600px){

.topbar{
display:none;
}

.logo{
font-size:34px;
text-align:center;
}

.tagline{
text-align:center;
}

.nav-menu{
gap:14px;
}

.nav-menu a{
font-size:11px;
}

.nav-btn a{
padding:11px 22px;
}

}