/* Header */
@media (max-width: 768px){
    header{
        flex-direction: column;
        padding: 0;
    }
    
    header h2{
        width: 100%;
        display: none;
    }

    nav ul{
        display: none;
    }

    #flags{
        width: 70%;
        justify-content: center;
        gap: 10%;
    }

    .flag{
        width: 18vw;
    }
}

/* Greeting */
@media (max-width:1040px){
    #greeting{
        flex-direction: column;
        padding: 1em 1.2em;
    }

    #greeting .left-side{
        padding: 0;
    }

    #greeting .left-side h3, #greeting .left-side h1{
        display: flex;
        justify-content: center;
    }

    #greeting .left-side h3{
        font-size: 2rem;
    }

    #greeting .left-side h2{
        text-align: center;
    }

    #greeting .left-side h1{
        font-size: 2.2rem;
        gap: 8px;
    }

    #greeting lottie-player{
        max-width: 80vw;
        max-height: 40vh;
        padding-top: 1em;
    }

    #curriculum{
        display: flex;
        padding: 0;
        justify-content: center;
        align-items: center;
        width: 40%;
    }

    #contact{
        width: 40%;
    }
}

/* About me */
@media (max-width: 1040px){
    #about_me{
        flex-direction: column;
        padding: 1.5em 0;
    }

    #dev_image{
        width: 100%;
        justify-content: center;
    }

    #pasqua{
        max-width: 70vw;
    }

    #about_me .right-side{
        max-width: 100%;
        padding-inline: 1.2em;
    }

    #about_me .right-side h2{
        text-align: center;
        padding: 2% 0;
    }

    #about_me .right-side p{
        line-height: 1.1em;
    }
}

/* Enterprises */
#phoneArrows{
    display: none;
}
@media (max-width: 1040px){
    #enterprises{
        padding: 0 2%;
        flex-direction: column;
    }

    #carousel{
        max-width: 370px;
    }

    #carousel img{
        max-height: 80vh;
        filter: grayscale(0%);
    }

    #enterprises .presentation h2{
        font-size: 2rem;
        text-align: center;
        padding-top: 1em;
    }

    #phoneArrows{
        display: block;
    }

    #with_buttons{
        display: flex;
        flex-direction: column;
    }

    #arrow_left, #arrow_right{
        display: none;
    }

    #phoneArrows{
        margin-top: 1em;
    }

    #phoneArrows img{
        max-width: 60px;
    }
}

/* Knowledge */
@media (max-width: 1040px){
    #knowledge{
        padding: 0;
    }

    #knowledge .top-side h2{
        font-size: 2em;
        padding-top: 1em;
    }
    
    .knowledgeBox{
        width: 45%;
    }

    .knowledgeBox img{
        width: 100px;
    }

    .knowledgeBox h3{
        font-size: 0.8em;
    }
}

/* MyBusiness */
@media (max-width: 1040px){
    #myBusiness{
        flex-direction: column;
        padding: 0;
    }

    #myBusiness .right-side h2{
        font-size: 2em;
        padding-top: 1em;
    }

    #automatize_logo{
        width: 100%;
        height: 100%;
        padding-bottom: 1em;
    }

    #myBusiness .left-side{
        padding-top: 1em;
        width: 80%;
    }

    #myBusiness .right-side{
        width: 100%;
        padding-inline: 1em;
    }

    .service{
        width: 100%;
    }

    #services{
        gap: 1em;
    }
}

/* Projects */
@media (max-width: 1040px){
    #projects{
        padding: 0;
    }

    #projects .top-side{
        font-size: 2em;
        padding: 1em .5em 0 .5em;
    }

    .project-left{
        flex-direction: column;
    }

    .project-right{
        flex-direction: column-reverse;
    }

    .project-left .presentation{
        border: none;
        padding: 0;
    }

    .project-right .presentation{
        border: none;
        padding: 0;
    }

    .presentation img{
        max-width: 90vw;
        border: 2px solid #ffffff;
        border-radius: 10px;
    }

    .description-left{
        padding: 0;
        margin-left: 0;
        margin-bottom: 1em;
    }
    
    .description-left h3{
        font-size: 1.6em;
        text-align: center;
    }
    
    .description-left p{
        font-size: 1.3em;
        margin-top: .5em;
        text-align: justify;
        padding-inline: .5em;
    }
    
    .description-right{
        padding: 0;
        margin-left: 0;
        margin-bottom: 1em;
    }
    
    .description-right h3{
        font-size: 1.6em;
        text-align: center;
    }
    
    .description-right p{
        font-size: 1.3em;
        margin-top: .5em;
        text-align: justify;
        padding-inline: .5em;
    }
}

/* Contacts */
@media (max-width: 1040px){
    #contacts .top-side{
        margin-top: 1em;
        width: 100%;
        font-size: 2em;
    }

    #media-images li img{
        max-width: 60px;
    }

    #media-images{
        padding-inline: .5em;
    }
}

/* footer */
@media (max-width: 1040px){
    footer{
        padding: 0;
        font-size: .8em;
    }
}
/* to top */
@media (max-width: 1040px){
    #to_top{
        bottom: 2em;
        width: 50px;
    }
}