/*mobile nav bar, initially hide it*/
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001; 
}

/*hide the navigation items */
.nav-items-mobile {
    display: none;
    list-style-type: none;
    padding: 0;
}


@media (max-width: 768px) {

    .nav-toggle {
        display: block;
    }

    .nav-items {
        display: none;
    }

    .nav-items-mobile {
        display: none; 
        font-weight: bold;
        flex-direction: column;
        position: fixed;
        background-color: #fff;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100vh;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        overflow-y: auto; 
    }
    
    .show-nav-items {
        display: flex; 
    }

    .nav-item-mobile {
        display: block; 
        width: 100%; 
        text-align: center; 
    }

    .nav-item-mobile a {
        display: block;
        text-decoration: none;
        color: #333;
        font-size: 18px; 
        padding: 15px 20px; 
        width: 100%; 
    }

    .sub-nav {
        padding: 0;
        margin: 0;
    }

    .sub-nav li {
        padding-left: 30px; 
    }

    .sub-nav li a {
        display: block;
        padding-top: 2px;
        padding-bottom: 2px;
        font-weight: normal; 
    }

    .lock-scroll {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
    }
}