@media (max-width:1440px) {
    #portfolio .content .content-portfolio {
        width: 100%;
    }
    #contact form {
        width: 100%;
    }
}

@media (max-width:1024px) {
    section {
        margin: 100px 0;
    }
    #about h3 {
        margin-top: 100px;
    }
    #about .img-profile {
        height: 300px;
    }
    #about .about-skill {
        gap: 50px;
    }
    #resume h3 {
        margin-top: 100px;
    }
    #portfolio h3 {
        margin-top: 100px;
    }
    #portfolio .portfolio-item {
        width: calc((100% / 3.5) - 20px);
    }
    #portfolio .content .content-portfolio {
        justify-content: center;
    }
    #contact form {
        width: 100%;
    }
}

@media (max-width:768px) {
    section {
        padding: 0 30px;
    }
    #portfolio .content .content-portfolio {
        width: 100%;
        gap: 20px;
    }
    #portfolio .menu-portfolio {
        display: flex;
        flex-direction: column;
        width: 50%;
        gap: 20px;
        width: max-content;
    }
    #portfolio .portfolio-item {
        width: calc((100% / 2.5));
    }
}

@media (min-width:320px) and (max-width:767px) {
    section {
        text-align: center;
    }
    #about h3 {
        margin-top: 100px;
    }
    #about .about-content {
        flex-wrap: wrap-reverse;
        gap: 20px;
    }
    #about .about-content .about-skill {
        flex-wrap: wrap;
        justify-content: center;
    }
    #about .about-list-skill .about-list-skill-detail {
        justify-content: center
    }
    #resume h3 {
        margin-top: 100px;
    }
    #portfolio h3 {
        margin-top: 100px;
    }
    #portfolio .portfolio-item {
        width: 100%;
        height: max-content;
        margin: 0 10%;
    }
    #portfolio img {
        height: 160px;
    }
    #portfolio video {
        height: 160px;
    }
    #contact h3 {
        margin-top: 100px;
    }
    #contact .info {
        padding: 20px;
        margin: 0 20px;
    }
}