.sidebar {
    flex: 0 0 400px; /* Adjust width as necessary */
    height: 100vh; /* Makes sidebar full height */
    background-color: #f4f4f4; /* Optional: for better visibility */
    padding: 20px; /* Provides spacing inside the sidebar */
    box-sizing: border-box; /* Includes padding in the width */
}


/* Styles for mobile screens */
@media (max-width: 768px) {
    .sidebar {
        display: none; /* Hides the sidebar on small screens */
    }

    .main-content {
        width: 100%; /* Allows main content to use the full width */
        min-height: auto; /* Adjust height automatically based on the content */
    }
}