/* --- RESPONSIVE DESIGN */
@media (max-width: 800px) {
    .header {
        width: 100%;
        display: block;
    }

    .header-logo {
        min-width: 248px;
    }

    .right {
        width: 100%;
    }
}

@media (max-width: 768px) {
 

    .banner {
        display: none;
    }



    .table-wrapper {
        width: 100%;
        font-size: 1em;
    }

    .details-wrapper {
        flex-direction: column;
        max-width: 100%;
    }

    .home,
    .main-sub {
        padding: 0 10px 10em 10px;
    }

    .me-super-card, .me-category-card {
        max-width: 100%;
        min-width: 120px;
    }

    .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .filters {
        max-width: 300px;
        padding-right: 15px;
        margin-bottom: 20px;
    }

    .nav-logo {
        max-width: 300px;
        padding-left: 0.5em;
        padding-top: 0.5em;
    }

    details:not([open]) summary ~ * {
        display: none;
    }

    .table-container {
        flex-direction: column; /* Stack vertically on small screens */

        }

    .productTable {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .sidebar,
    .main {
        width: 100%;
        height: auto;
    }

    .sidenav, main {
        width: 100%;
        height: auto;
    }
}



@media (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

    .sidebar {
        padding-top: 15px;
    }
}
@media (max-width: 600px) {

}