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

body{
    font-family:Arial,Helvetica,sans-serif;
}

/* NAVBAR */
.navbar{
    height:70px;
    background:#111;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 30px;
    position:sticky;
    top:0;
    z-index:1000;
}

.logo{
    width:70px;
    border-radius:50%;
}

.nav-left{
    display:flex;
    align-items:center;
    gap:20px;
}

.menu-btn{
    background:none;
    border:none;
    color:white;
    font-size:28px;
    cursor:pointer;
}

.search-container{
    width:50%;
    display:flex;
}

.search-container input{
    width:100%;
    padding:12px;
    border:none;
    outline:none;
    border-radius:6px 0 0 6px;
}

.search-container button{
    width:60px;
    border:none;
    background:orange;
    cursor:pointer;
    border-radius:0 6px 6px 0;
}

.nav-right{
    display:flex;
    gap:20px;
}

.nav-icon{
    color:white;
    font-size:24px;
    cursor:pointer;
    position:relative;
}

.cart span{
    position:absolute;
    top:-8px;
    right:-10px;
    background:red;
    color:white;
    width:20px;
    height:20px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:12px;
}

/* SECOND BAR */
.links{
    height:45px;
    background:#222;
    display:flex;
    align-items:center;
    gap:30px;
    padding-left:25px;
    overflow-x:auto;
    white-space:nowrap;
}

.links a{
    color:white;
    text-decoration:none;
}

/* OVERLAY */
.overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.65);
    display:none;
    z-index:1001;
}

/* SIDE MENU */
.side-menu{
    position:fixed;
    left:-340px;
    top:0;
    width:340px;
    height:100%;
    background:white;
    transition:.35s;
    z-index:1002;
    overflow:auto;
}

.side-menu.active{
    left:0;
}

.menu-header{
    background:#111;
    color:white;
    padding:20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.menu-header button{
    background:none;
    border:none;
    color:white;
    font-size:22px;
    cursor:pointer;
}

.side-menu h3{
    padding:20px;
}

.side-menu a{
    display:block;
    padding:18px 20px;
    color:#333;
    text-decoration:none;
    border-bottom:1px solid #eee;
}

.side-menu a:hover{
    background:#f5f5f5;
}