/*
*** Menubar Icons for Mobile (from 768px)
*** Left Side Menu
*** Logo
*** Main Menu
*** .Lsub-menu class for sub menu
*/

/* @media all and (max-width: 992px){ */
@media all and (max-width: 992px){
/* Menubar Icons for Mobile (from 768px) STARTS */
.Lmenu-bars {
    width: 50px;
    height: 50px;
    position: fixed;
    /* top: 40px; */
	top: 30px;
    left: 40px;
    overflow: hidden;
    z-index: 9999; /* Keep it above everything else */
    cursor: pointer;
}
.Lmenu-bars span {
	width: 50px;
	height: 3px;
	background-color: #000000;
	display: block;
	position: absolute;
	z-index: 999;
	left: 0;
	-webkit-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
}
.Lmenu-bars span:first-child {
    top: 0;
}
.Lmenu-bars span:nth-child(2) {
    top: 10px;
}
.Lmenu-bars span:last-child {
    top: 20px;
}
.Lmenu-bars .first-bar {
    top: 19px !important;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
}
.Lmenu-bars .second-bar {
    left: 50px;
}
.Lmenu-bars .thired-bar {
    top: 19px !important;
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
	
/* Menubar Icons for Mobile (from 768px) ENDS */
	
}	
/* @media all and (max-width: 992px){  ENDS */	

/* Left Side Menu STARTS */
.left-side-menu {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: -100%;
	z-index: 1000; /* Ensure it is above other elements */
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    overflow-y: auto; /* always allow scrolling once content (e.g. expanded submenus) exceeds viewport height */
    -webkit-overflow-scrolling: touch; /* smooth momentum scrolling on iOS */
}
@media all and (max-width: 767px) {
    .left-side-menu {
        width: 100%;
    }
}
.left-0 {
    left: 0 !important;
}

/* Logo STARTS */
.left-side-menu .logo {
    text-align: center;
    border-bottom: 1px solid #3d4247;
    padding: 0px 0; /* Added padding to give space around the logo */
}
.left-side-menu .logo a {
    display: flex;
    align-items: center; /* Center the logo vertically */
    justify-content: center; /* Center the logo horizontally */
    font-size: 35px;
    color: #fff;
    text-transform: capitalize;
    text-decoration: none;
    padding: 15px;
    /* Removed justify-content: end; */
}
.logo a img {
	width: auto;
	height: 60px;
    margin-right: 10px; /* Space between logo and 'HOME' text */
	margin-bottom: 0px; /* Space between logo and 'HOME' text */
}
/* Logo ENDS */

/* Main Menu STARTS */
.Lmain-menu {
    width: 100%;
    overflow-x: hidden;
}
.Lmain-menu > ul {
    padding-top: 0px;
    padding-bottom: 50px;
    list-style: none;
}
.Lmain-menu > ul > li,
.Lsub-menu ul > li {
	width: 100%;
	border-bottom: 1px solid #926e6a;
	color: #000000;
}
.Lmain-menu ul li.caret {
    position: relative;
}
.Lmain-menu ul li.caret:before {
    content: " ";
    position: absolute;
    top: 20px;
    right: 18px;
    width: 8px;
    height: 8px;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    z-index: 2;
}
.Lmain-menu > ul > li > ul,
.Lsub-menu > li > .Lsub-menu {
    width: 100%;
    list-style: none;
    display: none;
}
.Lmain-menu > ul > li > a,
.Lsub-menu > li a {
    display: block;
    padding: 15px;
    text-decoration: none;
    color: #000000; /* Change to black */
    text-transform: uppercase;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}
.Lsub-menu > li > a {
    padding-left: 35px;
}
.Lsub-menu li a:before {
    content: "- ";
}
.Lmain-menu > ul > li > a > i {
    margin-right: 10px;
}
.Lmain-menu > ul > li > a:hover,
.Lsub-menu > li a:hover,
.Lmain-menu > ul > li > a.active,
.Lsub-menu > li a.active {
	background-color: #e74c3c;
	color: #FFFFFF; /* Change to black */
	position: relative;
	-webkit-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
}
.Lmain-menu > ul > li > a.active:before {
    content: " ";
    position: absolute;
    top: -30.5px;
    right: -10px;
    width: 20px;
    height: 20px;
    background: transparent;
    border: 11px solid #e74c3c;
    border-radius: 100%;
    border-top-color: transparent;
    border-left-color: transparent;
    border-bottom-color: transparent;
    -webkit-transform: rotate(33deg);
        -ms-transform: rotate(33deg);
            transform: rotate(33deg);
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}
.Lmain-menu > ul > li > a.active:after {
    content: " ";
    position: absolute;
    bottom: -30.5px;
    right: -10px;
    width: 20px;
    height: 20px;
    background: transparent;
    border: 11px solid #e74c3c;
    border-radius: 100%;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    -webkit-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
            transform: rotate(120deg);
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}
/* ===== Distinguish menu levels (depth-based) STARTS =====
   L1 = .Lmain-menu > ul > li             (shopsitemenu)
   L2 = L1 > .Lsub-menu > li              (shopproductlinemenu)
   L3 = L2 > .Lsub-menu > li              (shopproductmenu)
   L4 = L3 > .Lsub-menu > li              (shopsubproductmenu)
   Each level: its own indent, tint, left accent bar, divider and prefix.
   Tints are on the <li>, so the red hover/active on <a> still shows on top. */

/* reset the nested lists so levels stack cleanly */
.Lmain-menu > ul > li .Lsub-menu {
    margin: 0;
    padding: 0;
}

/* Level 1: bold, white, strong divider */
.Lmain-menu > ul > li {
    background: #ffffff;
    border-bottom: 2px solid #926e6a;
}
.Lmain-menu > ul > li > a {
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Level 2: light tint, thin accent bar, normal weight, "–" prefix */
.Lmain-menu > ul > li > .Lsub-menu > li {
    background: #fbf5f4;
    border-top: 1px solid #e3cfcc;
    border-bottom: 0;
}
.Lmain-menu > ul > li > .Lsub-menu > li > a {
    padding-left: 28px;
    font-weight: 600;
}
.Lmain-menu > ul > li > .Lsub-menu > li > a:before {
    content: "-\00a0";
}

/* Level 3: darker tint, deeper indent, smaller text, "›" prefix */
.Lmain-menu > ul > li > .Lsub-menu > li > .Lsub-menu > li {
    background: #f1e3e1;
    border-top: 1px solid #dcc3bf;
    border-bottom: 0;
}
.Lmain-menu > ul > li > .Lsub-menu > li > .Lsub-menu > li > a {
    padding-left: 44px;
    font-weight: 400;
    font-size: 0.95em;
}
.Lmain-menu > ul > li > .Lsub-menu > li > .Lsub-menu > li > a:before {
    content: "*\00a0";
}

/* Level 4: darkest tint, deepest indent, smallest text, "·" prefix */
.Lmain-menu > ul > li > .Lsub-menu > li > .Lsub-menu > li > .Lsub-menu > li {
    background: #e6d0cd;
    border-top: 1px solid #d2b4b0;
    border-bottom: 0;
}
.Lmain-menu > ul > li > .Lsub-menu > li > .Lsub-menu > li > .Lsub-menu > li > a {
    padding-left: 60px;
    font-weight: 400;
    font-size: 0.9em;
}
.Lmain-menu > ul > li > .Lsub-menu > li > .Lsub-menu > li > .Lsub-menu > li > a:before {
    content: "#\00a0";
}

/* Thick closing line under the last item of an opened group, so the next
   higher-level item is clearly separated from the expanded block */
.Lmain-menu > ul > li > .Lsub-menu {
    border-bottom: 1px solid #926e6a;
}
/* ===== Distinguish menu levels ENDS ===== */
/* Main Menu ENDS */
/* Left Side Menu ENDS */