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

    #hero h {
        font-size: 2rem;
    }

    #hero p {
        font-size: .9rem;
    }
}

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

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

    #hero .row {
        padding-bottom: 80px;
    }

    .btn-custom1 {
        width: 80%;
    }
    #about p {
        text-align: justify !important;
    }
    #skills .card h3 {
        font-size: 1.3rem;
    }
    #skills .card {
        padding-left: 30px !important;
        padding-right: 30px !important;
        margin-top: 30px !important;
    }
}

@media screen and (max-width: 576px) {
    hr {
        width: 80%;
    }
    h1 {
        font-size: 2rem !important;
    }
    .btn-custom1 {
       margin-bottom: 40px;
    }
    footer img {
        width: 60px;
        height: 60px;
    }
    footer p {
        font-size: 0.8rem;
    }
}

@media screen and (max-width: 400px) {
    #portofolio .col-md-12 {
        flex-direction: column;
    }
}