@media (max-width: 768px) {
    body {
        flex-direction: column;
    }

    aside, main {
        width: 100%;
    }
    main{
        padding-left: 0;
    }
    aside {
        order: -1;
        position: relative;
    }
    aside h3{
        font-size: 16px;
    }
    aside p{
        font-size: 12px;
    }
    .name-box p{
        margin-top: 0;
        color: silver;
    }
   
    main .container{
        display: flex;
        flex-direction: column;
    }
    .container h1{
        font-size: 2rem;
    }
    .left h1{
        text-align: center;
        font-size: 3rem;
    }
    .sub-container{
        width: 100%;
    }
    .icon-image img{
        width: 5rem;
        height: auto;
    }
    
    .plank{
        width: 100%;
        justify-content: center;
    }
    .card{
        width: 20rem; /* Adjust this to your preferred size */
        height: 20rem;
    }
    #education h1{
        font-size: 2rem;
    
    }
    #experience h1{
        font-size: 2rem;
    
    }
    #projects h1{
        font-size: 2rem;
    }
    #contact h1{
        font-size: 2rem;
    }
    #contact h1{
        font-size: 2rem;
    }
}