.mobile-navbar {
    /*position: fixed;
    top: 0;*/
    left: 20px;
    width: 100%;
    /*background-color: #333;*/
    background: linear-gradient(90deg, rgba(121, 9, 19, 1) 0%, rgba(3, 7, 69, 1) 51%, rgba(27, 81, 92, 1) 100%);
    z-index: 999;
    padding: 10px;
    
}

.menu-toggle {
    font-size: 26px;
    color: white;
    cursor: pointer;
}

.mobile-menu {
    /*background-color: #444;*/
    background: linear-gradient(90deg, rgba(105, 9, 19, 1) 0%, rgba(3, 7, 69, 1) 51%, rgba(27, 81, 92, 1) 100%);
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;

}

.mobile-menu li {
    border-bottom: 1px solid #555;
}

.mobile-menu li a,
.has-submenu {
    display: block;
    padding: 12px;
    color: white;
    text-decoration: none;
    cursor: pointer;
}

.submenu {
    display: none;
    /*background-color: #555;*/
    background: linear-gradient(90deg, rgba(100, 9, 10, 1) 0%, rgba(3, 7, 69, 1) 51%, rgba(27, 81, 92, 1) 100%);
    list-style: none;
    margin: 0;
    padding-left: 20px;
}

.submenu li a {
    padding: 10px;
    color: #ddd;
    border-bottom: 1px solid #666;
    display: block;
    text-decoration: none;
}

.submenu li a:hover {
    background-color: #666;
    color: white;
}

/* Hide entire mobile navbar on larger screens */
@media (min-width: 768px) {
    .mobile-navbar {
        display: none;
    }
}
/* Show mobile menu toggle for screens less than 768px */
@media (min-width: 768px) {
    #mobileMenuToggle {
        display: none;
    }
}

@media (max-width: 767px) {
    #mobileMenuToggle {
        display: block;
    }
}
@media (max-width: 991px) {
    .mobile-navbar {
        display: block;
    }
}
/* Tablet view: 768px to 991px */
@media (min-width: 768px) and (max-width: 991px) {
    /* Show the mobile menu toggle button */
    #mobileMenuToggle {
        display: block;
        background-color: #dc3545;
        color: white;
        padding: 10px 15px;
        border: none;
        font-size: 18px;
        cursor: pointer;
        margin: 10px;
    }

    /* Show the nav container if needed */
    .mobile-navbar {
        display: block;
        background-color: #f8f9fa;
        padding: 10px;
    }

    /* Initially hide the mobile menu (will be toggled by JS) */
    #mobileMenu {
        display: none;
        list-style: none;
        padding: 0;
        margin: 0;
    }

        #mobileMenu li {
            padding: 10px;
            border-bottom: 1px solid #ccc;
        }

    /* Style for submenu */
    .submenu {
        display: none; /* Hidden by default, shown via JS */
        padding-left: 20px;
        background-color: #e9ecef;
    }

    .has-submenu {
        cursor: pointer;
        font-weight: bold;
    }
}