/* Styles applied when the screen width is between 600px and 991px (e.g., larger phones and tablets) */
@media (min-width: 50px) and (max-width: 767.98px) {  
    .sidebar {
        display: none; 
        width: 250px;        
        height: 100%; 
        position: fixed;
        z-index: 9;
        top: 0;
        left: 0; 
        overflow-x: hidden;
        transition: 0.5s; 
    }
    .hometitle {
        font-size: 36px;
    }
    .home-section {
        padding: 54px 15px;
    }
    .flex-container {
        flex-direction: column;
    }
    .about-section, .skills-section, .education-section, .experience-section, .contact-section, .projects-section {
        padding: 0;
    }
    .flex-item, .education-left {
        margin: 0px 0px 20px 0px;
    }
    .project-done h1 {
        font-size: 16px;
    }
    .education-right {
        border-bottom: 1px solid #c6c6c6;
        padding: 0px 0px 24px 72px;
    }
    .project-menu {
        flex-direction: column;
    }
    .project-menu .card {
        width: 100%;
        margin: 0px 0px 20px 0px;
    }
    .openmenu, .closmenu {
        display: block;
    }
    .closebtn {
        top: 9px;
        width: 18px;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .sidebar { 
        width: 33.33333333%;
    }
    .flex-container { 
        display: grid;
        grid-template-columns: 1fr 1fr;
        row-gap: 9px;
        column-gap:9px;
    }
    .project-menu { 
        display: grid;
        grid-template-columns: 1fr 1fr;
        row-gap: 9px;
        column-gap:9px;
    }
    .project-menu .card {
        width: 100%;
    }
}