/* Small devices (portrait tablets and large phones, 666px and up) */
@media only screen and (max-width: 666px) {

    /* HERO CONTENT ----------------------- */

    .hero-container {
        flex-direction: column;
        gap: 30px;
        justify-content: space-around;
    }

    .hero-content__contact--responsive {
        margin: 20px 0 0 0;
    }
    
    .hero-content__contact--responsive .contact-item {
        display: inline-block;
        margin: 0 5px;
    }

    .hero-content__title,.red-title {
        text-align: center;
        font-size: 25px;
    }

    .hero-content__text {
        font-size: 15px;
    }

    .hero-content__btns--responsive {
        display: flex;
        width: 100%;  
        margin: 20px 0 0 0;
        justify-content: space-around;
    }

    .hero-img {
        margin: 0;
        height: 40vh;
    }

    @media only screen and (max-width: 580px) {
        .hero-content__contact--responsive .contact-item {
            width: 100%;
            margin: 5px 0;
            text-align: center;
        }

        .hero-content__btns--responsive { 
            justify-content: center;
        }
    }

    /* ABOUT CONTAINER -------------------- */

    .about-container {
        width: 90%;
        margin: 20px auto;
    }

    .about__text {
        width: 100%;
    }

    /* SKILLBARS ----- */

    .skillbar--centralize {
        width: 100%;
        margin: 0;
    }

    .skillbar__title {
        font-size: 13px;
        width: 70px;
    }

    .skillbar i {
        display: none;
    }

    .bar {
        width: 70%;
    }

    .skill {
        padding: 0px 5px;
        font-size: 15px;
    }

    /* PROJECTS CONTAINER ----------------- */

    /* WEBS --------- */

    @media only screen and (max-width: 550px) {
        
        .webs__thumb .image {
            width: 15em;
        }

        .fa-circle-arrow-left {
            margin: 14em 0;
            left: 20px;
        }
    
        .fa-circle-arrow-right {
            margin: 14em 0;
            right: 20px;
        }
    }

    /* GALLERY --------- */

    .photogallery-img {
        width: 330px;
    }

    /* INSPIRATION CONTAINER ---------------- */

    .inspiration-container {
        width: 90%;
    }

    .inspiration__item {
        justify-content: space-around;
    }

    .inspiration__text {
        width: 75%;
        font-size: 15px;
    }

    .inspiration__label {
        font-size: 16px;
    }

    /* CONTACT CONTAINER -------------------- */

    .section-line {
        width: 100px;
    }

    /* FOOTER ------------------------ */
    
    .footer-section:nth-of-type(2) {
        margin-bottom: 20px;
    }

    .footer-section:last-of-type {
        display: none;
    }

    .footer__logo  {
        width: 80%;
        margin: 0 10%;
    }

    .footer__item {
        text-align: center;
    }

    .footer-section:nth-of-type(2) .footer__item {
        text-align: left;
    }

}