.mean-container .mean-bar {
  /* background: #fff; */
  float: left;
  min-height: 60px;
  padding: 4px 0 0;
  position: relative;
  width: 100%;
  z-index: 1;
  top: 49px;
  /* top: -24px; */
}
.mean-container a.meanmenu-reveal {
  width: 22px;
  height: 22px;
  padding: 18px;
  top: 0;
  right: 0;
  cursor: pointer;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  text-indent: -9999em;
  line-height: 22px;
  font-size: 1px;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  float: right;
}
.mean-container a.meanmenu-reveal span {
  display: block;
  background: #222;
  height: 3px;
  margin-top: 3px;
}
.mean-container .mean-nav {
  float: left;
  width: 100%;
  background: #0c1923;
}
.mean-container .mean-nav ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
}
.mean-container .mean-nav ul li {
  background: #f8f8f8;
  float: left;
  position: relative;
  width: 100%;
  border-top: 1px solid #ddd;
}
.mean-container .mean-nav ul li a {
  background: #f8f8f8;
  color: #232323;
  display: block;
  float: left;
  font-size: 14px;
  margin: 0;
  padding: 1em 5%;
  text-align: left;
  text-decoration: none;
  text-transform: capitalize;
  width: 90%;
}
.mobile-menu-area {
  background: #262626;
}
.mean-container .mean-nav ul li li a {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  color: #232323;
  font-size: 14px;
  font-weight: 500;
  opacity: 0.75;
  padding: 1em 10%;
  text-shadow: none !important;
  text-transform: capitalize;
  visibility: visible;
  width: 80%;
}
.mean-container .mean-nav ul li.mean-last a {
  border-bottom: 0;
  margin-bottom: 0;
}
.mean-container .mean-nav ul li li li a {
  width: 70%;
  padding: 1em 15%;
}
.mean-container .mean-nav ul li li li li a {
  width: 60%;
  padding: 1em 20%;
}
.mean-container .mean-nav ul li li li li li a {
  width: 50%;
  padding: 1em 25%;
}
.mean-container .mean-nav ul li a:hover {
  background: #f8f8f8 none repeat scroll 0 0;
}
.mean-container .mean-nav ul li a.mean-expand {
  height: 15px;
  margin-top: 1px;
  padding: 12px !important;
  text-align: right;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  font-weight: 700;
  border: 0 !important;
  background: #f8f8f8;
}
.mean-container .mean-nav ul li a.mean-expand:hover {
  background: #f8f8f8;
}
.mean-container .mean-push {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0;
  clear: both;
}
.mean-nav .wrapper {
  width: 100%;
  padding: 0;
  margin: 0;
}
.mean-container .mean-bar,
.mean-container .mean-bar * {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  /* margin-top: -56px; */
  position: relative;
  /* top: -20px; */
}
.mean-remove {
  display: none !important;
}
.mean-container .mean-bar::after {
  color: #ffffff;
  content: "MENU";
  font-size: 21px;
  left: 5%;
  position: absolute;
  top: 12px;
}

/* -------------------------------
39. Mobile menu
----------------------------------*/
.mean-container .mean-bar::after {
  display: none;
}
.mean-container .mean-nav ul li a:hover {
  border-radius: 0;
}
.mean-container a.meanmenu-reveal span {
  background: #ffffff;
}
.mobile-menu-area {
  background: #fff none repeat scroll 0 0;
}
.mean-container .mean-nav ul li a.mean-expand {
  background: none;
  top: -4px;
}
.mean-container .mean-nav ul li a.mean-expand:hover {
  background: none;
}
.mean-container .mean-nav ul li {
  background: #444;
}
.mean-container a.meanmenu-reveal {
  color: #ffffff;
  background-color: #4f0c0c;
  position: relative;
  top: -117px;
}
.meanmenu-reveal.meanclose:hover {
  color: #fff !important;
}
.mean-container a.meanmenu-reveal:hover span {
  background: #222;
}
.mean-container .mean-bar::before {
  color: #fff;
  /* content: url('../images/logo.png'); */
  font-size: 28px;
  font-weight: 600;
  left: 10px;
  position: absolute;
  top: 18px;
}

   check this toggle code if i click this modal popup there in the website that is working

/* ==========================================
   MeanMenu Mobile Toggle Fix
   Prevents the menu toggle from opening
   inside a modal popup and keeps it working
   correctly on the website.
========================================== */

/* Main mobile menu container */
.mean-container .mean-bar {
    float: left;
    width: 100%;
    min-height: 60px;
    padding: 4px 0 0;
    position: relative;
    z-index: 9999;
    top: 49px;
    background: transparent;
}

/* Toggle button */
.mean-container a.meanmenu-reveal {
    width: 22px;
    height: 22px;
    padding: 18px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    color: #ffffff;
    background-color: #4f0c0c;
    text-decoration: none;
    text-indent: -9999em;
    line-height: 22px;
    font-size: 1px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    display: block;
    z-index: 10000;
    border-radius: 6px;
}

/* Hamburger lines */
.mean-container a.meanmenu-reveal span {
    display: block;
    height: 3px;
    margin-top: 3px;
    background: #ffffff;
    border-radius: 2px;
}

/* Hover effect */
.mean-container a.meanmenu-reveal:hover span {
    background: #222;
}

/* Navigation container */
.mean-container .mean-nav {
    float: left;
    width: 100%;
    background: #0c1923;
    position: relative;
    z-index: 9998;
}

/* Menu list */
.mean-container .mean-nav ul {
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
}

/* Menu items */
.mean-container .mean-nav ul li {
    float: left;
    width: 100%;
    position: relative;
    background: #444;
    border-top: 1px solid #ddd;
}

/* Links */
.mean-container .mean-nav ul li a {
    display: block;
    width: 90%;
    padding: 1em 5%;
    margin: 0;
    color: #232323;
    background: #f8f8f8;
    text-decoration: none;
    text-transform: capitalize;
    font-size: 14px;
    text-align: left;
}

/* Hover state */
.mean-container .mean-nav ul li a:hover {
    background: #f8f8f8;
    border-radius: 0;
}

/* Submenu links */
.mean-container .mean-nav ul li li a {
    width: 80%;
    padding: 1em 10%;
    font-size: 14px;
    font-weight: 500;
    color: #232323;
    opacity: 0.75;
    border-top: 1px solid rgba(255,255,255,0.25);
}

/* Nested submenu levels */
.mean-container .mean-nav ul li li li a {
    width: 70%;
    padding: 1em 15%;
}

.mean-container .mean-nav ul li li li li a {
    width: 60%;
    padding: 1em 20%;
}

.mean-container .mean-nav ul li li li li li a {
    width: 50%;
    padding: 1em 25%;
}

/* Expand icon */
.mean-container .mean-nav ul li a.mean-expand {
    position: absolute;
    top: -4px;
    right: 0;
    z-index: 2;
    padding: 12px !important;
    height: 15px;
    text-align: right;
    font-weight: 700;
    background: none !important;
    border: 0 !important;
}

.mean-container .mean-nav ul li a.mean-expand:hover {
    background: none !important;
}

/* Push wrapper */
.mean-container .mean-push,
.mean-nav .wrapper {
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
    clear: both;
}

/* Remove unused */
.mean-remove {
    display: none !important;
}

/* Hide MENU text */
.mean-container .mean-bar::after {
    display: none;
}

/* Optional logo */
.mean-container .mean-bar::before {
    position: absolute;
    top: 18px;
    left: 10px;
    font-size: 28px;
    font-weight: 600;
    color: #fff;
    /* content: url('../images/logo.png'); */
}

/* Mobile menu area */
.mobile-menu-area {
    background: #ffffff;
    position: relative;
    z-index: 9999;
}

/* Close button hover */
.meanmenu-reveal.meanclose:hover {
    color: #ffffff !important;
}

/* ==========================================
   IMPORTANT FIX:
   Prevent menu from opening inside modal popup
========================================== */
.modal,
.modal-backdrop,
.popup,
.popup-overlay,
.mfp-wrap,
.mfp-bg {
    z-index: 1050 !important;
}

/* Keep menu above normal content but below modal */
.mean-container,
.mean-container .mean-bar,
.mean-container .mean-nav {
    z-index: 999 !important;
}

/* If menu appears inside popup, hide it */
.modal .mean-container,
.popup .mean-container,
.mfp-wrap .mean-container {
    display: none !important;
}

/* Responsive positioning */
@media (max-width: 767px) {
    .mean-container a.meanmenu-reveal {
        top: -117px;
        right: 15px;
    }
}


Pasted code.css
File
check this code toggle related classes merged ...?

Yes, your CSS contains several duplicate and mergeable classes. Consolidating them will make the stylesheet cleaner, smaller, and easier to maintain. I reviewed the uploaded CSS 


✅ Duplicate Classes Found
1. .cn-location-bar:hover (Defined Twice)
First definition:
.cn-location-bar:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(220, 38, 38, 0.10);
}
Second definition:
.cn-location-bar:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(220, 38, 38, 0.10);
}
✅ Keep only one.

2. .cn-location-bar__left (Defined Twice)
First definition:
.cn-location-bar__left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
Second definition:
.cn-location-bar__left {
  display: flex;
  align-items: center;
  gap: 10px;
}
Final merged version:
.cn-location-bar__left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
3. Icon Colors
Current:
.cn-location-bar__left i {
  color: #dc2626;
  font-size: 14px;
}

.cn-location-bar__right i {
  color: #dc2626;
  font-size: 13px;
}

.cn-location-bar__left i,
.cn-location-bar__right i {
  color: var(--cn-primary);
}
Final merged:
.cn-location-bar__left i,
.cn-location-bar__right i {
  color: var(--cn-primary);
}

.cn-location-bar__left i {
  font-size: 14px;
}

.cn-location-bar__right i {
  font-size: 13px;
}
⚠️ Bug Found
.cn-premium-card.selected::after
Current code:

content: '/ff00c';
This is incorrect.

Correct:
content: '\f00c';
This displays the Font Awesome check icon.

✅ Optimized Combined CSS Block
.cn-location-bar:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(220, 38, 38, 0.10);
}

.cn-location-bar__left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.cn-location-bar__left i,
.cn-location-bar__right i {
  color: var(--cn-primary);
}

.cn-location-bar__left i {
  font-size: 14px;
}

.cn-location-bar__right i {
  font-size: 13px;
}
📌 Summary of Fixes
Issue	Action
.cn-location-bar:hover duplicated	Remove one
.cn-location-bar__left duplicated	Merge definitions
Icon color repeated	Combine selectors
content: '/ff00c'	Change to content: '\f00c'
⭐ Recommendation
Your CSS is already very well structured. After these small cleanups, it will be more efficient and easier to maintain.

If you'd like, I can also provide:

✅ Fully cleaned and optimized CSS file

✅ Minified CSS

✅ Dark mode version

✅ Performance-optimized production CSS



Pasted code(2).css
File
chnage in this update me final code 

/* ==========================================
   FINAL CLEANED MEANMENU MOBILE TOGGLE CSS
   Optimized and duplicate-free version
========================================== */

/* Mobile Menu Area */
.mobile-menu-area {
    background: #ffffff;
    position: relative;
    z-index: 9999;
}

/* Main Bar */
.mean-container .mean-bar {
    float: left;
    width: 100%;
    min-height: 60px;
    padding: 4px 0 0;
    position: relative;
    top: 49px;
    background: transparent;
    z-index: 999;
    box-sizing: content-box;
}

.mean-container .mean-bar *,
.mean-nav .wrapper {
    box-sizing: content-box;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* Toggle Button */
.mean-container a.meanmenu-reveal {
    position: absolute;
    top: -117px;
    right: 15px;
    width: 22px;
    height: 22px;
    padding: 18px;
    display: block;
    cursor: pointer;
    text-indent: -9999em;
    line-height: 22px;
    font-size: 1px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    color: #ffffff;
    background: #4f0c0c;
    text-decoration: none;
    border-radius: 6px;
    z-index: 10000;
}

/* Hamburger Lines */
.mean-container a.meanmenu-reveal span {
    display: block;
    height: 3px;
    margin-top: 3px;
    background: #ffffff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.mean-container a.meanmenu-reveal:hover span {
    background: #222;
}

.meanmenu-reveal.meanclose:hover {
    color: #ffffff !important;
}

/* Navigation Wrapper */
.mean-container .mean-nav {
    float: left;
    width: 100%;
    background: #0c1923;
    position: relative;
    z-index: 998;
}

/* UL Reset */
.mean-container .mean-nav ul {
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
}

/* Menu Items */
.mean-container .mean-nav ul li {
    float: left;
    width: 100%;
    position: relative;
    background: #444;
    border-top: 1px solid #ddd;
}

/* Menu Links */
.mean-container .mean-nav ul li a {
    display: block;
    float: left;
    width: 90%;
    padding: 1em 5%;
    margin: 0;
    background: #f8f8f8;
    color: #232323;
    text-decoration: none;
    text-transform: capitalize;
    text-align: left;
    font-size: 14px;
}

.mean-container .mean-nav ul li a:hover {
    background: #f8f8f8;
    border-radius: 0;
}

/* Last Item */
.mean-container .mean-nav ul li.mean-last a {
    border-bottom: 0;
    margin-bottom: 0;
}

/* Submenu Links */
.mean-container .mean-nav ul li li a {
    width: 80%;
    padding: 1em 10%;
    font-size: 14px;
    font-weight: 500;
    color: #232323;
    opacity: 0.75;
    text-transform: capitalize;
    text-shadow: none !important;
    visibility: visible;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

/* Nested Submenus */
.mean-container .mean-nav ul li li li a {
    width: 70%;
    padding: 1em 15%;
}

.mean-container .mean-nav ul li li li li a {
    width: 60%;
    padding: 1em 20%;
}

.mean-container .mean-nav ul li li li li li a {
    width: 50%;
    padding: 1em 25%;
}

/* Expand Button */
.mean-container .mean-nav ul li a.mean-expand {
    position: absolute;
    top: -4px;
    right: 0;
    height: 15px;
    padding: 12px !important;
    text-align: right;
    font-weight: 700;
    border: 0 !important;
    background: none !important;
    z-index: 2;
}

.mean-container .mean-nav ul li a.mean-expand:hover {
    background: none !important;
}

/* Push */
.mean-container .mean-push {
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
    clear: both;
}

/* Remove */
.mean-remove {
    display: none !important;
}

/* Hide MENU Text */
.mean-container .mean-bar::after {
    display: none;
}

/* Optional Logo */
.mean-container .mean-bar::before {
    position: absolute;
    top: 18px;
    left: 10px;
    font-size: 28px;
    font-weight: 600;
    color: #ffffff;
    /* content: url('../images/logo.png'); */
}

/* ==========================================
   MODAL FIX
   Prevent MeanMenu from appearing inside popups
========================================== */
.modal,
.modal-backdrop,
.popup,
.popup-overlay,
.mfp-wrap,
.mfp-bg {
    z-index: 1050 !important;
}

/* Menu stays above page content but below modal */
.mean-container,
.mean-container .mean-bar,
.mean-container .mean-nav {
    z-index: 999 !important;
}

/* Hide menu if rendered inside popup */
.modal .mean-container,
.popup .mean-container,
.mfp-wrap .mean-container {
    display: none !important;
}

/* ==========================================
   RESPONSIVE
========================================== */
@media (max-width: 767px) {
    .mean-container .mean-bar {
        top: 49px;
    }

    .mean-container a.meanmenu-reveal {
        top: -117px;
        right: 15px;
    }
}