/* start responsive */


/* 💻 Desktop */
@media screen and (max-width: 1140px) {

    .header-left-items>a>img {
        width: 70px;
        height: 53px;
    }

    .text-description-home>h3 {
        font-size: 2rem;
    }

    .stats-item {
        padding-left: 10px;
    }

    .container-skills {
        gap: 30px;
    }

}

/* 📲 Tablet */
@media screen and (max-width: 1023px) {
    #home-page {
        flex-direction: column;
        justify-content: center;
        padding-top: 40px;
    }

    .description-home {
        align-items: center;
        width: 100%;
    }

    .text-description-home {
        align-items: center;
    }

    .stats {
        width: 65%;
    }
    .stats-item{
        padding-left: 0px;
    }

    .stats-item-top {
        justify-content: center;
    }

    .stats-item-down {
        justify-content: center;
    }

    .image-me-home {
        width: 100%;
        margin-top: 0;
    }

    .image-me-home>img {
        width: 65%;
        height: 65%;
    }


}

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

    .description-about-page {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .image-about {
        display: none;
    }

    .about-me {
        width: 75%;
    }

    .container-skills {
        width: 100%;
    }

    #about-page {
        gap: 0;
    }


    .header-left-items {
        order: 1;
    }

    .header-left-items>a {
        justify-content: center;
    }

    .header-center-items {
        order: 0;
        flex-direction: column;
    }

    .header-right-items {
        order: 2;
    }

    .header-left-items>a>img {
        width: 100px;
        height: 80px;
    }

    .header-center-items {
        display: none;
    }

    .header-center-items-2 {
        display: flex;
    }

    .services-box{
        grid-template-columns: repeat( auto-fit , minmax(250px, 1fr));
    }

}




/* 📱 Mobile */
@media screen and (max-width: 700px) {

    .about-me {
        width: 96%;
    }

    .about-me>p {
        text-align: justify;
    }
}

@media screen and (max-width : 600px) {
    .stats {
        width: 90%;
    }

    .contact-box {
        width: 100%;
    }

    .skills {
        justify-content: center;
        gap: 70px;
    }

    .percent-skill {
        width: 50%;
    }

    .image-me-home>img{
        width: 90%;
        height: 90%;
    }
    .filter-project{
        flex-wrap: wrap;
    }

}

@media screen and (max-width : 500px) {
    
    nav{
        width: 93%;
    }
    .header-left-items>a>img{
        width: 80px;
        height: 63px;
    }
    .header-right-items>ul{
        min-width: 90px;
    }
    
    .text-description-home{
        width: 100%;
    }
    .text-description-home>h1{
        font-size: 1.3rem;
    }
    .text-description-home>h3{
        font-size: 2rem;
    }
    .stats{
        width: 100%;
    }

    .container-skills{
        gap: 20px;
        flex-direction: column;
    }
    .skill-icon{
        order: 0;
        justify-content: center;
        width: 100%;
    }
    .skill-icon>p{
        font-size: 1.1rem;
    }
    .skill-icon>i{
        font-size: 1.5rem;
    }
    .percent-skill{
        order: 1;
        width: 80%;
        justify-content: left;
        margin-inline-start: 40px;
    }
    .skills{
        flex-direction: column;
        justify-content: center;
        gap: 20px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 20px 4px;
        border-radius: 15px;
        background-color: #0F1115;
    }

}
@media screen and (max-width: 362px) {
    html{
        font-size: 13px;
    }
}