/* General navigation styles */
 .main-menu, #nav-placeholder {
    width: 300px;
    position: fixed; /* Fix it to the left side */
    top: 0;
    height: 100vh; /* Full height of the viewport */
    overflow-y: auto; /* Allow scrolling within the menu if content overflows */
    background-color: rgba(36, 31, 33, .6);
    /* background-color: var(--bs-primary); Primary color */
    z-index: 1000; /* Keep it above the content */
}

.mobile-navbar {
    background: rgba(36, 31, 33, .9);
}

/* Align text vertically with icons */
.nav-link {
    display: flex;
    align-items: center;
    font-size: 1.125rem;
    font-weight: 300;
    padding-right: 8px;
    padding-left: 8px;
}

/* Icon styling */
.nav-link .material-symbols-outlined,
.material-symbols-outlined {
    font-size: 1.5rem;
    vertical-align: -.35rem;
}

.navbar-toggler {
    padding: 0px;
}

.navbar-toggler .material-symbols-outlined{
    margin-right: 0rem;
    vertical-align: -.35rem;
}

.breadcrumbs .material-symbols-outlined{
    margin-right: 0rem;
    vertical-align: -.25rem;
}


.nav .nav-link {
    color: var(--bs-white);
}

#nav-placeholder {
    flex-shrink: 0; /* Prevent nav from shrinking */
}

/* Mobile view adjustments */
@media (max-width: 767px) {
    .main-menu {
        display: none !important;
    }

    .mobile-navbar {
        display: block !important;
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    #nav-placeholder {
        width: 100%; /* Full width navigation on mobile */
    }

    .main-menu, #nav-placeholder {
        height: auto;
    }
}
/* Show desktop/tablet navigation */
@media (min-width: 768px) {
    .mobile-navbar {
        display: none !important;
    }

    .main-menu {
        display: flex !important;
    }
}

/* Mobile Navigation Styles */
.mobile-navbar {
    display: none; /* Initially hidden, shown only on mobile */
}

/* Navigation link toggle and hover effects */
.btn-toggle-nav a {
    width: 80%;
    padding: .1875rem .5rem;
    margin-top: .125rem;
    margin-left: 2.75rem;
    color: var(--bs-white);
}

.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
    background-color: var(--nav-pill-bg);
}


.sub-link {
    font-size: 1rem;
    color: var(--bs-gray-400) !important;
    font-weight: 300;
}


.nav-sub-heading {
    font-size: .75rem;
    color: var(--bs-gray-200);
    margin-top: 1rem;
    border-bottom: 1px solid var(--bs-gray-600);
    margin: 8px 16px 0 52px;
}

.nav-sub-heading p{
    padding: 4px 0px 8px 0px;
    margin: 0;
}

  /* Mobile view adjustments */
  @media (max-width: 767px) {
    .nav-sub-heading {
        margin: 8px 16px 8px 16px;
    }
    .nav-sub-heading p {
        color: var(--bs-primary);
    }
  }