@media screen and (max-width: 1500px) {
    .sidebar-nav {
        left: 0rem;
        padding: 0.75rem 1rem;
        gap: 0.25rem;
        
    }
    body {
        padding-left: 8rem;
    }
    .nav-bar {
        width: 60%;
    } 
}

@media screen and (max-width: 768px) {
    .nav-bar {
        padding: 0rem 0rem;
        background: none;
        backdrop-filter: blur(4px);
        text-shadow: 0px 0px 3px var(--bg);
        position: fixed;
        top: 0px;
        border-radius: 0;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        border-bottom: 1px solid rgba(175, 170, 185, 0.2);
        border-left: none;
        border-right: none;
        border-top: none;
        gap: 0px;
    }
    .sidebar-nav {
        display: none; /* Hide on mobile */
    }
    body {
        padding: 2rem; /* Reset padding on mobile */
    }
    .grid {
        grid-template-columns: 1fr;
    }
    .main-title {
        font-size: 3rem;
    }
    table {
        min-width: 600px;
        overflow-x: auto;
    }
    .module {
        overflow-x: auto;
    }
    .module table {
        overflow-x: auto;
    }
    .hero {
        height: 10px;
    }
}

@media screen and (max-width: 600px) {
    .sidebar-nav {
        display: none; /* Hide on mobile */
    }
    body {
        padding: 2rem; /* Reset padding on mobile */
    }
    .grid {
        grid-template-columns: 1fr;
    }
    .main-title {
        font-size: 3rem;
    }
    .hero {
        margin-top: 300px;
    }
}


@media screen and (max-width: 470px) {
    .nav-bar {
        zoom: 90%;
        width: fit-content;
    }
    body {
        padding: 2rem; /* Reset padding on mobile */
    }
    .grid {
        grid-template-columns: 1fr;
    }
    .main-title {
        font-size: 3rem;
    }
    .hero {
        margin-top: 300px;
    }
    br {
        display: none;
    }
}

@media screen and (max-width: 275px) {
    .sidebar-nav {
        display: none; /* Hide on mobile */
    }
    body {
        padding: 2rem; /* Reset padding on mobile */
    }
    .grid {
        grid-template-columns: 1fr;
    }
    .main-title {
        font-size: 3rem;
    }
    .hero {
        margin-top: 350px;
    }
}