/* Monitores Grandes / Ultrawide (abaixo de 1600px) */
@media screen and (max-width:1601px) {
    .s1 {

        .flex {
            .direita {
                h1 {
                    font-size: 72px;
                }
            }
        }
    }

    .s2 {
        padding: 4.5vh 7vw;

        .content-s2 {
            
            .card {
            padding: 25px;  
                p {
                    font-size: 13px;
                    margin: 0px 10px 0px 0px;
                }
            }
        }
    }


    .s4 {

        .direita {

            h2 {
                font-size: 74px;
            }
        }

        .esquerda {

            img {
                height: 420px;
                width: 440px;
            }
        }
    }

}

/* Laptops e Monitores Médios (abaixo de 1367px) */
@media screen and (max-width:1367px) {
    .s1 {

        .flex {
            .direita {
                width: 57%;

                h1 {
                    font-size: 62px;
                }
            }

            .botoes-s1 {

                .botao-orcamento {
                    padding: 3px 8px 3px 16px;
                    font-size: 16px;
                }

                .botao-contato {
                    padding: 3px 8px 3px 16px;
                    font-size: 16px;
                }
            }
        }
    }

    s2 {
        padding: 4.5vh 5vw;

        .content-s2 {

            .card {
                 padding: 55px;
                width: 22%;
                height: 230px;

                p {
                    margin: 0px 5px 0px 5px;
                }

                img {
                    width: 40px;
                    height: 40px;
                }
            }


        }
    }

    .s3 {
        padding: 4.5vh 5vw;
        height: 80vh;
        .grid-container {
            height: 80%;
        }
    }

    .s4 {
        gap: 2vw;
        padding: 10vh 5vw 10vh 10vw;

        .esquerda {

            img {
                height: 400px;
                width: 420px;
            }

            .redes-sociais {

                h4 {
                    font-size: 16px;
                }

                .icones {
                    gap: 18px;

                    a {
                        width: 35px;

                        img {
                            width: 35px;
                            height: min-content
                        }
                    }
                }
            }
        }
    }

}

/* Tablets Landscape / iPads (abaixo de 1024px) */
@media (max-width: 1024px) {

    .s1 {

        .flex {
            .direita {
                width: 72%;

                h1 {
                    font-size: 51px;
                }

            }

            .botoes-s1 {

                .botao-orcamento {
                    padding: 2px 6px 2px 14px;
                    font-size: 18px;
                 
                    gap: 14px;
                    margin-right: 25px;

                    img {
                        width: 46px;
                        height: 46px;
                    }
                }

                .botao-contato {
                    padding: 3px 8px 3px 14px;
                    font-size: 18px;
                    
                    gap: 14px;

                    img {
                        width: 46px;
                        height: 46px;
                    }
                }

            }
        }
    }

    .s2 {
        padding: 4.5vh 5vw;

        .content-s2 {
            .titulo-s2 {
                width: 100%;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                margin-bottom: 50px;
                margin-left: 6vw;
                gap: 100px;

                h2 {
                    font-size: 52px;
                }

                p {
                    font-size: 14px;
                    margin: 0px;

                }

                a {
                    width: min-content;
                }

                .botao-saiba-mais {
                    margin-top: 15px;
                    font-size: 18px;
                    padding: 3px 8px 3px 16px;

                    img {
                        height: 45px;
                    }

                }
            }

            .card {
                width: 45%;
                padding: 20px;

                img {
                    width: 50px;
                    height: 50px;

                }

                h3 {
                    font-size: 18px;
                }

                p {
                    font-size: 16px;
                    margin: 0px 0px 0px;
                }
            }

            #selecionado {
                box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.12);
            }
        }
    }

    .s3{
        padding: 4.5vh 3vw;
        margin-bottom: 12vh;

          .title-s3{
            h3{
                font-size: 5.5vw;
            }
            p{
                font-size: 3vw;
            }
        }
        .grid-container{
            grid-template-columns: repeat(4,1fr);
            grid-template-rows: repeat(8, 1fr);
            height: 100%;

            h4{
                font-size: 14px;
                margin: 7px;
                padding: 7px;
            }
            #animacao{
                grid-column: 1/3;
                grid-row: 1/4;
            }

            #tresd {
                 grid-column: 3/5;
                 grid-row: 1/4;

            }

            #design{
                grid-column: 1 / 5;
                grid-row: 4/7;
            }

             #metricas{
                grid-row: 7/9;
                grid-column: 1/3;
             }
             #automacao{
                grid-row: 7/9;
                grid-column: 3/5;
             }
        }
    }

    .s4 {
        gap: 2vw;
        padding: 10vh 5vw 10vh 10vw;

        .direita {

            h2 {
                font-size: 60px;
            }

            .botoes-s4 {
                .botao-orcamento {
                    padding: 2px 6px 2px 14px;
                    font-size: 18px;
                    
                    gap: 14px;
                    margin-right: 25px;
                    margin-top: 20px;

                    img {
                        width: 46px;
                        height: 46px;
                    }
                }

                .botao-contato {
                    padding: 3px 8px 3px 14px;
                    font-size: 18px;
                    
                    gap: 14px;
                    margin-top: 20px;

                    img {
                        width: 46px;
                        height: 46px;
                    }
                }
            }
        }

        .esquerda {

            img {
                height: 65%;
                width: 85%;
                margin: auto;
            }

            .redes-sociais {
                justify-content: flex-end;
                padding-left: 1vw;
                gap: 12px;

                h4 {
                    font-size: 13px;
                }

                .icones {
                    gap: 12px;

                    a {
                        width: 30px;

                        img {
                            width: 30px;
                            height: min-content
                        }
                    }
                }
            }
        }
    }


}

/* Tablets Portrait / Transição Mobile (abaixo de 767px) */
@media (max-width: 767px) {

    .s1 {
        padding-bottom: 24vh;

        .flex {
            .direita {
                margin: 5vw 0vw 0vw 5vw;

                h1 {
                    font-size: 46px;
                }

            }

            .botoes-s1 {

                .botao-orcamento {
                    margin-top: 25px;
                }

                .botao-contato {
                    margin-top: 25px;
                }
            }
        }
    }

    .s2 {
        padding: 4.5vh 5vw;

        .content-s2 {
            .titulo-s2 {
                width: 100%;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-bottom: 30px;
                margin-left: 6vw;
                gap: 0px;

                h2 {
                    font-size: 52px;
                }


                .botao-saiba-mais {
                    margin: 20px auto;
                }
            }

            .card {
                width: 48%;
                padding: 16px;

                img {
                    width: 40px;
                    height: 40px;

                }


                p {
                    font-size: 14px;
                    margin: 0px 0px 0px;
                }
            }
        }
    }

    .s4 {
        flex-direction: column;
        align-items: center;
        gap: 2vw;
        padding: 10vh 5vw 10vh 10vw;

        .direita {

            h2 {
                font-size: 60px;
            }

            .botoes-s4 {
                text-align: center;
                .botao-orcamento {
                    padding: 2px 6px 2px 14px;
                    font-size: 16px;
                    font-size: 14px;
                    gap: 14px;
                    margin-right: 25px;
                    margin-top: 20px;

                    img {
                        width: 46px;
                        height: 46px;
                    }
                }

                .botao-contato {
                    padding: 3px 8px 3px 14px;
                    font-size: 16px;
                    font-size: 14px;
                    gap: 14px;
                    margin-top: 20px;

                    img {
                        width: 46px;
                        height: 46px;
                    }
                }
            }
        }

        .esquerda {
            width: 100%;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;

            .img-cerebro-s4 {
                order: 1;
                height: 25%;
                width: 35%;
                display: flex;
                margin: 0px 0px 0px 25vw;

                align-items: flex-end;
            }

            .redes-sociais {
                order: -1;
                justify-content: center;
                padding-left: 1vw;
                gap: 12px;

                h4 {
                    font-size: 16px;
                }

                .icones {
                    gap: 12px;

                    a {
                        width: 30px;

                        img {
                            width: 30px;
                            height: min-content
                        }
                    }
                }
            }
        }
    }
}


/* Celulares Padrão (abaixo de 480px) */
@media (max-width: 480px) {
    .pai {
        background: radial-gradient(225.77% 190.87% at 57.05% -163.12%, #bdbbbb 0%, #0F0F0F 100%);
    }

    

    .s1 {
        height: 100vh;
        padding-bottom: 20vh;

        header {
            padding: 5vh 2vw 2vw 4vw;
            width: 100%;

            img {
                width: 75px;
            }
        }

        .flex {
            .direita {
                width: 100%;

                margin: 10vh 0 0vw 5vw;

                h1 {
                    font-size: clamp(43px, 12vw, 48px);
                    text-align: left;
                    font-weight: 400;
                    width: auto;
                }

                p {
                    display: block;
                    width: 80%;
                    font-weight: 300;
                    color: rgba(255, 255, 255, 0.4);
                    margin: 30px 0 0px 3vw;
                    font-size: 18px;
                }
            }

            .botoes-s1 {

                .botao-orcamento {
                    margin-top: 25px;
                    font-size: 16px;
                    border-radius: 50px;
                }

                .botao-contato {
                    margin-top: 25px;
                    display: none;
                    border-radius: 50px;
                }
            }

            .esquerda {
                display: none;
            }
        }
    }

    .s2 {
        padding: 4.5vh 2vw;

        .content-s2 {

            h2 {
                font-size: 46px;
            }

            .card {
                margin-bottom: 35px;
                padding: 12px;

                h3 {
                    margin-left: 5px;
                    margin-bottom: 10px;
                    font-size: clamp(14px, 4vw, 18px);
                }

                p {
                    margin: 0px 0px 0px;
                    width: 100%;
                    font-size: 13px;
                    letter-spacing: 0.4px;
                }
            }
        }
    }

    .s3{

        .title-s3{
            h3{
                font-size: 6vw;
            }
            p{
                font-size: 3.7vw;
            }
        }
        .grid-container{
            #design{
                background-image: url('imagens/foto\ design\ para\ mobile.png');
            }
        }
    }

    .s4 {

        padding: 10vh 0vw 10vh 0;
        align-items: center;

        .direita {
            h2 {
                font-size: 52px;
                text-align: center;
            }

            .botoes-s4 {
                .botao-contato {
                    margin-right: 0px;
                }
            }
        }

        .esquerda {
            .img-cerebro-s4 {
                justify-content: center;
                margin: auto;
            }

            .redes-sociais {
                justify-content: center;
            }
        }
    }
}

/* Celulares Pequenos (abaixo de 320px) */
@media (max-width: 320px) {}