body {
    overflow-x: hidden;
}

.sidebar {
    width: 250px;
    transition: transform 0.3s ease;
    z-index: 999;
}

.sidebar.hide {
    transform: translateX(-100%);
}

.main-content {
    margin-left: 250px;
    margin-top: 70px;
    padding-left: 15px;
    padding-right: 15px;
    transition: margin-left 0.3s ease;
    max-width: 100%;
    overflow-x: hidden;
}

.main-content.expanded {
    margin-left: 0;
}

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
    }
    
    .sidebar.show {
        transform: translateX(0);
    }
    
    .main-content {
        margin-left: 0 !important;
    }
}