@media (min-width: 320px) and (max-width: 767px) {
    .mega-nav {
        display: none;
    }

    .menu-toggle {
        background: #3D3D3D;
        color: white;
        padding-left: 0;
        padding-right: 20px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Overlay */
    .mobile-menu-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 998;
    }

    .mobile-menu-overlay.active {
        display: block;          /* shown when menu opens */
    }

    /* Menu container */
    .mobile-menu {
        position: fixed;
        top: 0; left: -100%;
        width: 66%;       /* 2/3 of screen */
        max-width: 380px;
        height: 100%;
        background: #2e2e2e;  /* dark gray like screenshot */
        color: #fff;
        z-index: 999;
        transition: left 0.3s ease;
        overflow-y: auto;
        font-family: 'Cabin', sans-serif;
    }

    /* Header */
    .mobile-menu-header {
        display: flex;
        justify-content: flex-end;
        padding: 12px;
        border-bottom: 1px solid #444;
    }

    .menu-close {
        background: none;
        border: none;
        font-size: 24px;
        color: #fff;
        cursor: pointer;
    }

    /* Root menu list */
    .mobile-nav {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mobile-nav li {
        position: relative;
        border-bottom: 1px solid #444;
    }

    /* Links */
    .mobile-nav .menu-link {
        display: flex;                 /* Use flexbox for alignment */
        align-items: center;
        padding: 14px 18px;
        color: #fff;
        text-decoration: none;
        font-weight: bold;
        font-size: 14px;
        letter-spacing: 0.5px;
    }

    .mobile-nav .submenu-arrow {
        font-size: 16px;
        color: #EE3A25;
        margin-left: 6px;
        flex-shrink: 0;
        position: relative;
        top: 1px; /* adjust as needed */
    }

    .mobile-nav .menu-link:hover {
        background: #3a3a3a;
    }

    /* Active category clicked */
    .mobile-nav .menu-link.active-link {
        background: #222; /* darker background */
        color: #EE3A25;   /* red text */
        font-weight: bold;
    }

    /* Submenu styles */
    .submenu {
        display: none;
        background: #3a3a3a;
    }

    .submenu li {
        border-bottom: 1px solid #444;
    }

    .submenu li a {
        padding: 12px 30px;  /* indented */
        font-size: 13px;
        font-weight: normal;
        text-transform: none;
        color: #ddd;
    }

    /* Toggle arrow */
    .submenu-toggle {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: #EE3A25;  /* red arrow */
        font-size: 16px;
        cursor: pointer;
    }

    /* Open states */
    .mobile-menu.active {
        left: 0;
    }
    .mobile-menu-overlay.active {
        display: block;
    }
    .submenu.open {
        display: block;
    }
}
@media (min-width: 768px) and (max-width: 1280px) {
    .mega-nav {
        display: none;
    }

    .menu-toggle {
        background: #3D3D3D;
        color: white;
        padding-left: 0;
        padding-right: 20px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Overlay */
    .mobile-menu-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 998;
    }

    .mobile-menu-overlay.active {
        display: block;          /* shown when menu opens */
    }

    /* Menu container */
    .mobile-menu {
        position: fixed;
        top: 0; left: -100%;
        width: 66%;       /* 2/3 of screen */
        max-width: 380px;
        height: 100%;
        background: #2e2e2e;  /* dark gray like screenshot */
        color: #fff;
        z-index: 999;
        transition: left 0.3s ease;
        overflow-y: auto;
        font-family: 'Cabin', sans-serif;
    }

    /* Header */
    .mobile-menu-header {
        display: flex;
        justify-content: flex-end;
        padding: 12px;
        border-bottom: 1px solid #444;
    }

    .menu-close {
        background: none;
        border: none;
        font-size: 24px;
        color: #fff;
        cursor: pointer;
    }

    /* Root menu list */
    .mobile-nav {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mobile-nav li {
        position: relative;
        border-bottom: 1px solid #444;
    }

    /* Links */
    .mobile-nav .menu-link {
        display: flex;                 /* Use flexbox for alignment */
        align-items: center;
        padding: 14px 18px;
        color: #fff;
        text-decoration: none;
        font-weight: bold;
        font-size: 14px;
        letter-spacing: 0.5px;
    }

    .mobile-nav .submenu-arrow {
        font-size: 16px;
        color: #EE3A25; /* match your theme red */
        margin-left: 6px;
        flex-shrink: 0; /* prevent arrow from shrinking */
    }

    .mobile-nav .menu-link:hover {
        background: #3a3a3a;
    }

    /* Active category clicked */
    .mobile-nav .menu-link.active-link {
        background: #222; /* darker background */
        color: #EE3A25;   /* red text */
        font-weight: bold;
    }

    /* Submenu styles */
    .submenu {
        display: none;
        background: #3a3a3a;
    }

    .submenu li {
        border-bottom: 1px solid #444;
    }

    .submenu li a {
        padding: 12px 30px;  /* indented */
        font-size: 13px;
        font-weight: normal;
        text-transform: none;
        color: #ddd;
    }

    /* Toggle arrow */
    .submenu-toggle {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: #EE3A25;  /* red arrow */
        font-size: 16px;
        cursor: pointer;
    }

    /* Open states */
    .mobile-menu.active {
        left: 0;
    }
    .mobile-menu-overlay.active {
        display: block;
    }
    .submenu.open {
        display: block;
    }
}
@media (min-width: 1281px) {
    .mobile-menu,
    .menu-toggle {
        display: none;
    }
    /* --- Base styles --- */
    .mega-nav, .mega-nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        font-family: 'Cabin', sans-serif;
    }

    /* --- Level 1 --- */
    .mega-nav {
        display: flex;
        background: #3D3D3D; /* Black background */
    }

    .mega-nav > li {
        position: relative;
    }

    .mega-nav > li > a {
        display: block;
        padding: 12px 18px;
        color: #fff; /* White letters */
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .mega-nav > li:hover > a {
        background: #3D3D3D; /* Slightly darker hover background */
        color: #EE3A25;        /* Text turns red on hover */
    }

    /* --- Level 2 dropdown --- */
    .mega-nav > li > ul.level-2 {
        display: none;
        position: absolute;
        top: 100%; /* directly below parent */
        left: 0;
        background: #3D3D3D; /* Black background */
        border: 1px solid #333;
        min-width: 200px;
        z-index: 99;
    }

    .mega-nav > li:hover > ul.level-2 {
        display: block;
    }

    .mega-nav > li > ul.level-2 > li > a {
        display: block;
        padding: 14px 19px;
        color: #fff;
        font-weight: 700;
        line-height: 16px;
        font-size: 16px;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .mega-nav > li > ul.level-2 > li > a:hover {
        /*background: #111; !* Hover background *!*/
        color: #EE3A25;        /* Hover text red */
    }

    /* --- Level 3+ flyouts --- */
    .mega-nav li.parent > .submenu-wrapper {
        position: absolute;
        display: none;
        z-index: 100;
        top: 0;
        left: 100%; /* flyout to the right */
    }

    .mega-nav li.parent:hover > .submenu-wrapper {
        display: block;
    }

    .mega-nav li.parent > .submenu-wrapper ul {
        width: 200px;
        max-height: 400px;
        overflow-y: auto;
        overflow-x: hidden;
        background: #3D3D3D; /* black flyout */
        border: 1px solid #333;
    }

    .mega-nav li.parent > .submenu-wrapper ul li a {
        display: block;
        padding: 14px 19px;
        font-weight: 700;
        line-height: 16px;
        font-size: 16px;
        color: #fff;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .mega-nav li.parent > .submenu-wrapper ul li a:hover {
        /*background: #111;*/
        color: #EE3A25;
    }

    /* --- Hide scrollbars --- */
    .mega-nav li.parent:hover > .submenu-wrapper ul::-webkit-scrollbar {
        width: 0;
    }
    .mega-nav li.parent:hover > .submenu-wrapper ul {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .mega-nav .submenu-wrapper.level-3 ul {
        width: 275px !important;
    }

    /* --- Arrow indicators for items with children --- */
    .mega-nav li ul li:has(ul) > a::after {
        content: "›";
        font-size: 16px;
        font-weight: 700;
        line-height: 16px;
        color: #fff; /* default white arrow */
        margin-left: 8px;
        transition: color 0.3s ease;
    }

    .mega-nav li ul li:has(ul):hover > a::after {
        color: #EE3A25; /* arrow turns red on hover */
    }

    /* --- Two-column layout for the last-level submenu (LEVEL 4) --- */
    .mega-nav .submenu-wrapper.level-4 ul {
        column-count: 2;          /* Split into two vertical columns */
        column-gap: 24px;         /* Space between columns */
        width: 600px !important;             /* Total width of both columns */
        background: #3D3D3D;      /* Match existing submenu color */
        border: 1px solid #333;
        padding: 10px 0;
        overflow: visible;
    }

    /* Prevent list items from breaking across columns */
    .mega-nav .submenu-wrapper.level-4 ul li {
        break-inside: avoid;
    }

    /* Adjust item spacing and text styling */
    .mega-nav .submenu-wrapper.level-4 ul li a {
        display: block;
        padding: 10px 18px;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .mega-nav .submenu-wrapper.level-4 ul li a:hover {
        color: #EE3A25;
    }

    /* --- Adjust position for Level-4 flyouts --- */
    .mega-nav .submenu-wrapper.level-4 {
        left: calc(100%) !important;   /* push it slightly further right */
    }
}