.cl-responsive-menu-wrapper {
    display: none; /* Hidden by default */
}

.menu-toggle {
    position: sticky;
    top: 10px;
    right: 10px;
    z-index: 2000;
   
    color: #fff;
    border: none;
    padding: 10px 20px 10px 0px;
    font-size: 18px;
    cursor: pointer;
}

#cl-responsive-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Full height for overlay */
    background: #fff; /* Black background with slight transparency */
    color: #fff;
    z-index: 1000; /* Below the toggle button */
 display: none; 
    flex-direction: column;
    justify-content: flex-start; /* Align items at the top */
    align-items: center;
    overflow-y: auto; /* Allow scrolling if content overflows */
    padding-top: 60px; /* Space for the hamburger button */
   
}



body.menu-open {
    overflow: hidden; /* Prevent scrolling of the main page */
}



/* Responsive Menu Items */
.responsive-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%; /* Full width */
}

.responsive-menu-list li {
    border-bottom: 1px solid #444;
    text-align: center;
    width: 100%; /* Stretch items to full width */
}

.responsive-menu-list li a {
    color: #0a0a0a;
    text-decoration: none;
    display: block;
    padding: 15px;
    font-size: 18px;
    width: 100%; /* Stretch link to full width */
    text-align: left;
}

.menu-icon-close {
    font-size: 24px;
    display: none;
    cursor: pointer;
}

/* When Menu is Open */
#menu-toggle.menu-open .menu-icon {
    display: none; /* Hide hamburger */
}

#menu-toggle.menu-open .menu-icon-close {
    display: inline-block; /* Show close icon */
}

/* Submenu Styling */
.cl-responsive-menu .menu-item-has-children > .sub-menu {
    display: none;
    background: #444; /* Optional: Submenu background */
    width: 100%; /* Full width submenu */
    text-align: center;
}

.cl-responsive-menu .menu-item-has-children.submenu-open > .sub-menu {
    display: block;
}

.cl-responsive-menu .mega-menu-item-has-children.submenu-open > .mega-sub-menu li {
    padding: 10px 15px; /* Optional: Submenu item padding */
}

@media (max-width: 1024px) {
    .cl-responsive-menu-wrapper {
        display: block; /* Visible only on mobile */
    }
}