/*
Theme Name: Mauritius Clone
Author: Your Name
Version: 1.0
*/

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
}

body{
background:#f5f5f5;
overflow-x:hidden;
}

/* HEADER */

.top-header{
position:sticky;
top:0;
z-index:999;
background:#fff;
box-shadow:0 2px 8px rgba(0,0,0,0.08);
width:100%;
}

/* CONTAINER */

.header-container,
.nav-container{
max-width:1150px;
width:100%;
margin:auto;
padding-left:20px;
padding-right:20px;
}

/* TOP */

.header-container{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 0;
}

/* LOGO */

.logo-section{
display:flex;
align-items:center;
gap:20px;
}

.logo-section img{
width:75px;
}

.logo-section h2{
font-size:18px;
font-weight:500;
color:#333;
}

/* RIGHT */

.top-actions{
display:flex;
align-items:center;
gap:20px;
}

.search-box{
position:relative;
}

.search-box input{
width:260px;
height:40px;
padding:0 40px 0 15px;
border:1px solid #ccc;
outline:none;
}

.search-box i{
position:absolute;
right:15px;
top:50%;
transform:translateY(-50%);
color:#777;
}

.top-actions a{
text-decoration:none;
color:#4c7ca5;
font-size:14px;
font-weight:500;
}

/* NAVBAR */

.navbar{
border-top:1px solid #eee;
border-bottom:1px solid #eee;
background:#fff;
height:72px;
display:flex;
align-items:center;
justify-content:center;
}

/* MENU */

.desktop-menu{
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
margin:0;
padding:0;
list-style:none;
}

.desktop-menu li{
flex:1;
list-style:none;
position:relative;
}

.desktop-menu li a{
display:flex;
justify-content:center;
align-items:center;
height:72px;
text-decoration:none;
color:#4c7ca5;
font-size:16px;
font-weight:500;
}

.desktop-menu li.current-menu-item::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:4px;
background:#3c79aa;
}

/* MOBILE */

.mobile-header{
display:none;
}

.overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,0.4);
opacity:0;
visibility:hidden;
transition:0.3s;
z-index:999;
}

.overlay.show{
opacity:1;
visibility:visible;
}

.mobile-sidebar{
position:fixed;
top:0;
left:-100%;
width:85%;
max-width:380px;
height:100vh;
background:#fff;
z-index:1001;
transition:0.4s;
overflow-y:auto;
}

.mobile-sidebar.show{
left:0;
}

.sidebar-top{
position:relative;
display:flex;
justify-content:center;
align-items:center;
padding:18px;
border-bottom:1px solid #ddd;
}

.sidebar-top img{
width:85px;
}

.close-btn{
position:absolute;
left:15px;
width:55px;
height:55px;
border:2px solid #d4a517;
background:#fff;
font-size:28px;
color:#4c7ca5;
cursor:pointer;
}

.mobile-links{
margin:0;
padding:0 15px 20px;
list-style:none;
}

.mobile-links li{
list-style:none;
border-bottom:1px solid #6991b1;
}

.mobile-links li.current-menu-item{
border-bottom:5px solid #3c79aa;
}

.mobile-links li a{
display:flex;
justify-content:space-between;
align-items:center;
padding:22px 10px;
text-decoration:none;
color:#4c7ca5;
font-size:18px;
}

/* RESPONSIVE */

@media(max-width:768px){

.top-header{
display:none;
}

.mobile-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 15px;
background:#fff;
box-shadow:0 2px 10px rgba(0,0,0,0.08);
position:sticky;
top:0;
z-index:999;
}

.mobile-header img{
width:75px;
}

.menu-btn,
.search-btn{
background:none;
border:none;
font-size:28px;
color:#4c7ca5;
cursor:pointer;
}

}