@media (max-width:768px) {

    nav{
        padding: 2rem 1.5rem;
        border-bottom: 1px solid rgba(241, 241, 241, 0.055);
    }

 * section{
    width: 100%;
    padding: 0rem 1.3rem;
    display: flex;
    justify-content: center;
    margin-top: 12rem;
 }

 .section2{
    width: 100%;
    margin-top: 3rem;
    display: flex;
    justify-content: center;
 }

    .mobile-menu{
        display: flex;
        color: white;  
    }

    .list-container{
        display: none;
    }

    .social-media p{
        display: none;
    }

    .profileHome{
        display: none;
    }
    

    .container{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        row-gap: 2.5rem;
    }

    .container2{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
        row-gap: 2.5rem;
    }


    
    * h2{
        color: white;
        font-size: 1.4rem;
        font-weight: 600;
        line-height: 1.9rem;
    }

    /* MY_work */
    .project-title{
        display: flex;
        flex-direction: column;
        row-gap: 2rem;
        align-items: start;
    }

    .aboutme-details{
        width: 100%;
        display: flex;
        flex-direction: column;
        row-gap: 2rem;
        align-items: start;
    }

    .profile-images{
        width: 100%;
        height: 400px;
        display: flex;
        flex-direction: row;
        column-gap: 1rem;
    }

    .contact-us-title{
        display: flex;
        flex-direction: column;
        row-gap: 2rem;
    }

    .project-cover{
        background-size: cover;
        width: 100%;
        height: 250px;
    }

    .profile-images{
        width: 100%;
        height: 400px;
    }
    
    .profile-images img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        border: 1px solid white;
    }

    .button-container{
        display: flex;
        flex-direction: row;
        column-gap: 1rem;
    }

    .project{
        row-gap: 1.5rem;
        padding: 0rem;
    }

    .project-container{
        width: 100%;
        display: flex;
        flex-direction: column;
        row-gap: 2.5rem;
    }

    .project-title button {
        display: none;
    }

    .stack-title{
        
        padding: 1.5rem 0rem;
    }

    .contact-us{
        padding: 1.5rem;
        margin-top: 5rem;
    }

    /* Blogs_Section */

    .blog-section{
        row-gap: 3rem;
    }

    .blogs{
        width: 100%;
        display: flex;
        flex-direction: column;
        row-gap: 2rem;
        padding: 0rem;
    }

    .blog-image{
        width: 100%;
        height: 200px;
        background-size: cover;
        border-radius: 8px;
    }

    .blog-content{
        width: 100%;
        display: flex;
        flex-direction: column;
        row-gap: 1.2rem;
        padding: 1.2rem;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.115);
    }

    .blog-container{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        row-gap: 0.7rem;
        justify-content:start;
        align-items: start;
    }

    .interview-process{
        /* border-bottom: 1px solid #262626; */
        padding-left: 0rem;
    }

    .tab{
        width: fit-content;
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: stretch;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;

    }

    .tabSlider{
        width: fit-content;
        flex: 0 0 auto; /* Prevent shrinking */
        scroll-snap-align: start;
    }

    .tools-container{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        row-gap: 1rem;
    }

    .image-container{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        row-gap: 1rem;
    }
    .image-container img{
        width: 100%;
        height: 300px;
        object-fit: cover;
        border-radius: 8px;
        border-style: dashed;
        border: 1px solid white;
    }
    
}


@media (min-width: 768px) and (max-width: 1200px) {



    nav{
        padding: 2rem 1.5rem;
    }


 * section{
    width: 100%;
    padding: 0rem 1.3rem;
    display: flex;
    justify-content: center;
    margin-top: 12rem;
 }


 .section2{
    width: 100%;
    margin-top: 3rem;
    display: flex;
    justify-content: center;
 }

    
    .mobile-menu{
        display: flex;
        color: white;
    }

    .list-container{
        display: none;
    }

    .container{
        width: 70%;
        height: auto;
        display: flex;
        flex-direction: column;
        row-gap: 2.5rem;
    }

    .container2{
        width: 80%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
        row-gap: 2.5rem;
    }
    
    * h2{
        color: white;
        font-size: 1.4rem;
        font-weight: 600;
        line-height: 1.9rem;
    }

    /* MY_work */
    .project-title{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: start;
    }

    .aboutme-details{
        width: 100%;
        display: flex;
        flex-direction: column;
        row-gap: 2rem;
        align-items: start;
    }

    .profile-images{
        width: 100%;
        height: 400px;
        display: flex;
        flex-direction: row;
        column-gap: 1rem;
    }

    .contact-us-title{
        display: flex;
        flex-direction: column;
        row-gap: 2rem;
    }

    .project-cover{
        background-size: cover;
        width: 100%;
        height: 350px;
    }

    .button-container{
        display: flex;
        flex-direction: row;
        column-gap: 1rem;
    }

    .project{
        row-gap: 1.5rem;
        padding: 2rem;
    }

    .project-container{
        width: 100%;
        display: flex;
        flex-direction: column;
        row-gap: 1.5rem;
    }

    .profile-images{
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0rem;
    }

    .project-title button {
        display: flex;
    }

    .stack-title{
        padding: 1.5rem 0rem;
    }

    .contact-us{
        padding: 4rem;
        margin-top: 5rem;
    }

    .footercontainer{
        width: 80%;

    }

    .blogs{
        width: 100%;
        display: flex;
        flex-direction:column;
        row-gap: 2rem;
        padding: 4rem;
        flex-wrap: wrap;
    }

    .contact-us-title{
        display: flex;
        flex-direction: row;
        column-gap: 4rem;
    }


}