/*==================================================
NEXMARKLY HEADER
==================================================*/

/* Reset */

.topbar,
.site-header{
font-family:'Montserrat',sans-serif;
}

/*==========================
TOP BAR
==========================*/

.topbar{
background:#f6efe8;
border-bottom:1px solid #ece3db;
font-size:13px;
}

.topbar-inner{
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 0;
gap:20px;
}

.topbar-text{
color:#555;
display:flex;
align-items:center;
gap:10px;
}

.topbar-text i{
color:#c98f72;
}

.topbar-btn{
background:#c98f72;
color:#fff;
padding:8px 18px;
border-radius:5px;
font-size:12px;
font-weight:600;
text-decoration:none;
text-transform:uppercase;
letter-spacing:.5px;
transition:.3s;
}

.topbar-btn:hover{
background:#b77b5f;
color:#fff;
}

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

.site-header{
background:#fff;
position:sticky;
top:0;
z-index:999;
box-shadow:0 2px 15px rgba(0,0,0,.05);
}

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

/*==========================
LOGO
==========================*/

.site-logo a{
font-family:'Cormorant Garamond',serif;
font-size:42px;
font-weight:700;
text-decoration:none;
color:#222;
}

/*==========================
MENU
==========================*/

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

.desktop-menu>a,
.menu-dropdown>a{
color:#333;
font-size:14px;
font-weight:500;
text-decoration:none;
display:flex;
align-items:center;
gap:6px;
position:relative;
transition:.3s;
}

.desktop-menu>a:hover,
.menu-dropdown>a:hover{
color:#c98f72;
}

/* underline */

.desktop-menu>a::after,
.menu-dropdown>a::after{

content:'';
position:absolute;
left:0;
bottom:-6px;
width:0;
height:2px;
background:#c98f72;
transition:.3s;

}

.desktop-menu>a:hover::after,
.menu-dropdown>a:hover::after{

width:100%;

}

/*==========================
RIGHT
==========================*/

.header-right{
display:flex;
align-items:center;
gap:15px;
}

.search-btn{
width:44px;
height:44px;
border:1px solid #ddd;
background:#fff;
border-radius:50%;
cursor:pointer;
transition:.3s;
}

.search-btn:hover{
background:#c98f72;
border-color:#c98f72;
color:#fff;
}

.subscribe-btn{
background:#222;
color:#fff;
padding:12px 24px;
border-radius:6px;
text-decoration:none;
font-size:13px;
font-weight:600;
transition:.3s;
}

.subscribe-btn:hover{
background:#c98f72;
color:#fff;
}

/*==========================
DROPDOWN
==========================*/

.menu-dropdown{
position:relative;
}

.dropdown-menu-custom{
position:absolute;
top:120%;
left:0;
background:#fff;
width:260px;
padding:15px 0;
border-radius:10px;
box-shadow:0 15px 45px rgba(0,0,0,.12);
opacity:0;
visibility:hidden;
transform:translateY(10px);
transition:.35s;
}

.menu-dropdown:hover .dropdown-menu-custom{
opacity:1;
visibility:visible;
transform:translateY(0);
}

.dropdown-menu-custom a{
display:block;
padding:12px 20px;
text-decoration:none;
color:#333;
font-size:14px;
transition:.3s;
}

.dropdown-menu-custom a:hover{
padding-left:30px;
background:#faf6f2;
color:#c98f72;
}

/*==========================
MOBILE
==========================*/

.mobile-toggle{
display:none;
width:45px;
height:45px;
border:none;
background:#c98f72;
color:#fff;
border-radius:6px;
font-size:18px;
cursor:pointer;
}

.mobile-menu{
position:fixed;
top:0;
right:-320px;
width:300px;
height:100%;
background:#fff;
z-index:99999;
transition:.35s;
padding:30px;
overflow-y:auto;
box-shadow:-10px 0 30px rgba(0,0,0,.1);
}

.mobile-menu.active{
right:0;
}

.mobile-menu-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:25px;
}

.mobile-menu-header span{
font-size:22px;
font-weight:700;
}

.close-mobile{
background:none;
border:none;
font-size:24px;
cursor:pointer;
}

.mobile-menu nav a{
display:block;
padding:12px 0;
text-decoration:none;
color:#333;
border-bottom:1px solid #eee;
}

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

.mobile-title{
margin-top:20px;
margin-bottom:10px;
font-weight:700;
color:#222;
}

.mobile-overlay{
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,.45);
opacity:0;
visibility:hidden;
transition:.3s;
z-index:9990;
}

.mobile-overlay.active{
opacity:1;
visibility:visible;
}

/*==========================
RESPONSIVE
==========================*/

@media(max-width:991px){

.desktop-menu{
display:none;
}

.subscribe-btn{
display:none;
}

.mobile-toggle{
display:block;
}

.site-logo a{
font-size:34px;
}

.header-inner{
height:72px;
}

}

@media(max-width:767px){

.topbar-inner{
flex-direction:column;
text-align:center;
padding:12px 0;
}

.topbar-btn{
margin-top:8px;
}

.site-logo a{
font-size:30px;
}

.header-right{
gap:10px;
}

.search-btn{
width:40px;
height:40px;
}

.mobile-toggle{
width:40px;
height:40px;
}

}
/*==============================
MOBILE HEADER
==============================*/

@media (max-width:991px){

.topbar{
display:none;
}

.header-inner{
height:70px;
}

.desktop-menu{
display:none !important;
}

.subscribe-btn{
display:none;
}

.mobile-toggle{
display:flex !important;
align-items:center;
justify-content:center;
}

.site-logo a{
font-size:32px;
}

.header-right{
gap:10px;
}

.search-btn{
width:42px;
height:42px;
}

.mobile-menu{
width:300px;
max-width:85%;
}

}

@media (max-width:576px){

.site-logo a{
font-size:26px;
}

.header-inner{
height:64px;
}

.search-btn,
.mobile-toggle{
width:38px;
height:38px;
font-size:15px;
}

.mobile-menu{
width:280px;
}

.mobile-menu nav a{
font-size:15px;
padding:14px 0;
}

}
.mobile-logo{
margin-bottom:25px;
}

.mobile-logo a{
font-family:'Cormorant Garamond',serif;
font-size:34px;
font-weight:700;
text-decoration:none;
color:#222;
}