@media screen and (max-width: 1200px) {
    #hero p {
        font-size: .9rem;
    }

    #hero h1 {
        font-size: 2.3rem;
    }
    
    #hero .row {
        padding-bottom: 75px;
    }

    #skill .card h3 {
        font-size: 1.3rem;
    }
    
    .hr-1 {
        margin: 0 auto;
    }

}

@media screen and (max-width: 768px) {
    #hero img {
        width: 60%;
    }

    .social-icon {
        left: 50%;
        transform: translate(-50%);
    }

    #skill .card {
        padding-left: 30px !important;
        padding-right: 30px !important;
        margin-top: 20px;
    }

    #portofolio1 {
        padding-top: 70px !important;
    }

    #portofolio2 {
        padding-top: 70px !important;
    }

    .hr-2 {
        width: 75%;
    }

    h1 {
        font-size: 2rem !important;
    }

    footer img {
        width: 75px;
    }

    footer p {
        font-size: 0.8rem;
    }
}

@media screen and (max-width: 576px) {

}

@media screen and (max-width: 350px) {
    
}