@media (max-width: 767px) and (min-width: 320px) {
    /* ---- */
    /* MAIN */
    /* ---- */
    .main-container {
        width: calc(100% - 1rem);
        height: auto;
        margin: 0 0.5rem;
    }

    /* INTRO SECTION */
    .intro-section {
        display: flex;
        flex-direction: column;
    }

    .social-container,
    .profile-container {
        width: calc(100% - 2rem);
        height: auto;
        margin: 0 2rem;
        top: 5%;
    }

    .profile-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* RATING SECTION */
    .rating-container {
        margin-top: 2rem;
    }

    /* ABOUT SECTION */
    .skill-box {
        width: calc(50% - 1rem);
        height: auto;
    }

    

    /* EDU SECTION */
    .edu-detail {
        display: flex;
        flex-direction: column;
        padding: 0.5rem;
    }

    .edu-left, .edu-right {
        width: 100%;
        height: auto;
    }

    /* PROJECT SECTION */
    .project-box {
        width: calc(100% - 2rem);
        height: auto;
    }

}