/* --- Desktop & Common Styles --- */
#menu ul li ul li {
    position: relative;
}

#menu .menu3rdlevel {
    position: absolute;
    top: -5px;
    /* Alignment thoda upar adjust kiya */
    left: 100%;
    display: none;
    z-index: 1001;
    padding: 5px 0;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

/* Arrow Icon using Font (No Image) */
#menu .arrow {
    position: relative;
    padding-right: 30px !important;
}

#menu .arrow::after {
    content: "\f105";
    /* Right Angle */
    font-family: 'FontAwesome';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
}

/* Desktop Hover Effect */
@media (min-width: 768px) {
    #menu ul li ul li:hover>.menu3rdlevel {
        display: block;
    }

    #menu ul li ul li:hover>a.arrow {
        background-color: #229ac8;
        /* Change to your theme color */
        color: #FFF !important;
    }

    #menu ul li ul li:hover>a.arrow::after {
        color: #FFF;
    }
}

/* --- Mobile Specific Styles (767px and below) --- */
@media (max-width: 767px) {
    #menu .menu3rdlevel {
        position: static;
        /* Stack vertically on mobile */
        display: none;
        width: 100%;
        left: 0 !important;
        box-shadow: none;
        border: none;
        background-color: #ffffff !important;        
        /* Light shade for depth */
        padding-left: 10px;
    }

    /* Open or Hover par menu dikhane ke liye */
    #menu ul li ul li:hover>.menu3rdlevel,
    #menu ul li ul li.open>.menu3rdlevel {
        display: block;
    }

    /* Mobile Arrow (Down) */
    #menu .arrow::after {
        content: "\f107";
        /* Down Angle */
    }

    #menu .menu3rdlevel_inner,
    #menu .menu3rdlevel_inner ul {
        display: block;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    #menu .menu3rdlevel_inner ul li {
        list-style: none;
    }

    #menu .menu3rdlevel_inner a {
        display: block;
        color: #333333 !important;
        background-color: transparent !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        font-size: 13px;
    }

    /* See All button link mobile */
    #menu .menu3rdlevel .see-all {
        color: #23A1D1;
        font-weight: bold;
    }
}

/* Common Utility */
#menu .dropdown-inner a {
    white-space: nowrap;
}

#menu .menu3rdlevel .see-all {
    display: block;
    border-top: 1px solid #eee;
    font-size: 12px;
}