body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

.container {
    display: grid;
    grid-template-columns: 40px 50px repeat(10, 1fr);
    grid-template-rows: 90px 200px 200px 200px 200px 50px;

}

/* Esconder o texto de compatibilidade em telas maiores do resposivo */

.texto-compativel{
  display: none;
}

.linha-laranja {


    grid-column: 2;
    grid-row: 2;
    width: 5px;
    /* Largura da linha */
    height: 300%;
    /* Altura total do contêiner */
    background-color: #ff5722;
    /* Cor Laranja */
    /* Para o caso de ter bordas arredondadas no contêiner, arredondamos a linha */
    border-radius: 5px 0 0 5px;
}

.tela-cinza {
    background-color: #ecebeb;
    grid-column: 3/7;
    grid-row: 2/5;
    border-radius: 15Px;
}

.imagem-logo {
    grid-column: 3/6;
    grid-row: 1;
}

.imagem-4 {
    margin-top: 3%;
    width: 60%;
    height: auto;
    object-fit: cover;
}

.titulo-dnf {
    grid-column: 3/7;
    grid-row: 2;
    color: rgb(0, 0, 0);
    margin-left: 5%;
    margin-top: 4%;
}

.texto-1 {
    grid-column: 3/7;
    grid-row: 3;
    color: rgb(0, 0, 0);
    margin-left: 5%;
    margin-top: -13%;
    text-align: left;


}

.texto-1 p {
    font-size: 24px;
    line-height: 1.4;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
}

.grifado {
    background-color: rgb(146, 146, 145);
    /* Ou qualquer cor que você preferir para o grifo */
    font-weight: bold;
    /* Para deixar em negrito, como em "grifar" geralmente implica */
}






.imagem-1 {
    grid-column: 7/13;
    grid-row: 1;
    width: 60%;
    height: auto;
    object-fit: cover;
    margin-left: 1%;
    margin-top: 8%;


}


.imagem-2 {
    grid-column: 9/14;
    grid-row: 2;
    width: 85%;
    margin-left: -20%;
    margin-top: 20%;
    height: auto;
    object-fit: cover;

}

.imagem-3 {
    grid-column: 9/14;
    grid-row: 3;
    width: 100%;
    margin-top: 5%;
    height: auto;
    object-fit: cover;
}




.button {
    grid-column: 5;
    grid-row: 5;
    padding: 15px 0px;
    font-size: 20px;
    color: #000000;
    align-self: center;
    text-align: center;
    background: linear-gradient(to right, #dfdddd, #ffffff);
    /* Gradiente de verde */
    border-radius: 30px;
    /* Mais arredondado */
    text-decoration: none;
    cursor: pointer;
    width: 190px;
    font-weight: bold;
    height: 24px;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(.25, .8, .25, 1);
    margin-left: -66%;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    /* Sombra mais intensa no hover */
}



.button:hover {
    background: linear-gradient(to right, #e2e2e2, #ffffff);
    /* Inverte o gradiente no hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    /* Sombra mais intensa no hover */
    transform: translateY(-2px);
    /* Pequeno movimento para cima */
    color: black;
}



.email {
        grid-row: 6;
        grid-column:11;
        font-size: 20px;
        margin-left: -25%;
        color: #000000;
        text-decoration: none;
        margin-top: 10%;
    }


    .logo-gmail{
        grid-column: 10;
        grid-row: 6;
        margin-left: 0%;
        margin-top: 0%;

    
    }

    .imagem-gmail {
    
        width: 24%;
        height: auto;
        object-fit: cover;
        margin-left: 42%;
        margin-top: 0%;

    }






    .logo-linkdin {
        grid-column: 12;
        grid-row: 6;
    


    }

    .imagem-linkdin {
        width: 20%;
        height: auto;
        object-fit: cover;
        margin-top: 1% ;
        margin-left: 5% ;

    }


    .texto-linkdin {
        grid-column: 12;
        grid-row: 6;
        color: #000000;
        text-align: center;
        font-size: 20px;
        text-decoration: none;
        margin-top: 10%;
    }


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

    body {
        overflow-x: hidden;
    }

    .container {
        display: grid;
        grid-template-columns: 100px 50px repeat(11, 1fr);
        grid-template-rows: 70px 200px 200px 200px;

    }

    .linha-laranja {
        grid-column: 2;
        grid-row: 2;
        width: 5px;
        /* Largura da linha */
        height: 200%;
        /* Altura total do contêiner */
        background-color: #ff5722;
        /* Cor Laranja */
        /* Para o caso de ter bordas arredondadas no contêiner, arredondamos a linha */
        border-radius: 5px 0 0 5px;
    }

    .tela-cinza {
        background-color: #ecebeb;
        grid-column: 3/7;
        grid-row: 2/4;
        border-radius: 15Px;
    }

    .imagem-logo {
        grid-column: 3/6;
        grid-row: 1;
    }

    .imagem-4 {
        margin-top: 3%;
        width: 60%;
        height: auto;
        object-fit: cover;
    }




    .titulo-dnf {
        grid-column: 3/7;
        grid-row: 2;
        font-size: 14px;
        color: rgb(0, 0, 0);
        margin-left: 5%;
        margin-top: 4%;
    }

    .texto-1 {
        grid-column: 3/7;
        grid-row: 3;
        color: rgb(0, 0, 0);
        margin-left: 5%;
        margin-top: -20%;
        text-align: left;


    }

    .texto-1 p {
        font-size: 24px;
        line-height: 1.4;
        font-size: 18px;
        font-family: Arial, Helvetica, sans-serif;
    }

    .grifado {
        background-color: rgb(146, 146, 145);
        /* Ou qualquer cor que você preferir para o grifo */
        font-weight: bold;
        /* Para deixar em negrito, como em "grifar" geralmente implica */
    }







    .imagem-1 {
        grid-column: 7/13;
        grid-row: 1;
        width: 70%;
        height: auto;
        object-fit: cover;
        margin-left: 1%;
        margin-top: 8%;


    }


    .imagem-2 {
        grid-column: 9/14;
        grid-row: 2;
        width: 85%;
        margin-left: -10%;
        margin-top: 14%;
        height: auto;
        object-fit: cover;

    }

    .imagem-3 {
        grid-column: 9/14;
        grid-row: 3;
        width: 90%;
        margin-left: 14%;
        margin-top: -5%;
        height: auto;
        object-fit: cover;

    }



    .button {
        grid-column: 5;
        grid-row: 4;
        padding: 15px 0px;
        font-size: 20px;
        color: #000000;
        align-self: center;
        text-align: center;
        background: linear-gradient(to right, #dfdddd, #ffffff);
        /* Gradiente de verde */
        border-radius: 30px;
        /* Mais arredondado */
        text-decoration: none;
        cursor: pointer;
        width: 190px;
        font-weight: bold;
        height: 24px;
        transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(.25, .8, .25, 1);
        margin-left: -36%;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        /* Sombra mais intensa no hover */
    }



    .button:hover {
        background: linear-gradient(to right, #dfdddd, #ffffff);
        /* Inverte o gradiente no hover */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        /* Sombra mais intensa no hover */
        transform: translateY(-2px);
        /* Pequeno movimento para cima */
        color: black;
    }





   .email {
        grid-row: 6;
        grid-column: 11;
        font-size: 20px;
        margin-left: 0%;
        color: #000000;
        text-decoration: none;
        margin-top: 5%;
    }


    .logo-gmail{
        grid-column: 11;
        grid-row: 6;
        margin-left: 0%;
        margin-top: 0%;

    
    }

    .imagem-gmail {
    
        width: 20%;
        height: auto;
        object-fit: cover;
        margin-left: -25%;
        margin-top: 0%;

    }






    .logo-linkdin {
        grid-column: 12;
        grid-row: 6;
        height: auto;


    }

    .imagem-linkdin {
        width: 30%;
        height: auto;
        object-fit: cover;
        margin-top: 0% ;
        margin-left: 40% ;

    }


    .texto-linkdin {
        grid-column: 12/13;
        grid-row: 6;
        color: #000000;
        text-align: center;
        font-size: 20px;
        text-decoration: none;
        margin-left: 55%;
         margin-top: 10%;
        
    }


}



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

    body {
        overflow-x: hidden;

    }


    .container {
        display: grid;
        grid-template-columns: 70px 50px repeat(11, 1fr);
        grid-template-rows: 70px 200px 200px 100px;

    }

    .linha-laranja {


        grid-column: 2;
        grid-row: 2;
        width: 5px;
        /* Largura da linha */
        height: 200%;
        /* Altura total do contêiner */
        background-color: #ff5722;
        /* Cor Laranja */
        /* Para o caso de ter bordas arredondadas no contêiner, arredondamos a linha */
        border-radius: 5px 0 0 5px;
    }

    .tela-cinza {
        background-color: #ecebeb;
        grid-column: 3/7;
        grid-row: 2/4;
        border-radius: 15Px;
    }



    .imagem-logo {
        grid-column: 3/6;
        grid-row: 1;
    }

    .imagem-4 {
        margin-top: 3%;
        width: 60%;
        height: auto;
        object-fit: cover;
    }

    .titulo-dnf {
        grid-column: 3/7;
        grid-row: 2;
        font-size: 12px;
        color: rgb(0, 0, 0);
        margin-left: 5%;
        margin-top: 4%;
    }

    .texto-1 {
        grid-column: 3/7;
        grid-row: 3;
        color: rgb(0, 0, 0);
        margin-left: 5%;
        margin-top: -20%;
        text-align: left;


    }

    .texto-1 p {
        font-size: 24px;
        line-height: 1.4;
        font-size: 17px;
        font-family: Arial, Helvetica, sans-serif;
    }

    .grifado {
        background-color: rgb(146, 146, 145);
        /* Ou qualquer cor que você preferir para o grifo */
        font-weight: bold;
        /* Para deixar em negrito, como em "grifar" geralmente implica */
    }






    .imagem-1 {
        grid-column: 7/13;
        grid-row: 1;
        width: 70%;
        height: auto;
        object-fit: cover;
        margin-left: 1%;
        margin-top: 8%;


    }


    .imagem-2 {
        grid-column: 9/14;
        grid-row: 2;
        width: 85%;
        margin-left: -10%;
        margin-top: 12%;
        height: auto;
        object-fit: cover;

    }

    .imagem-3 {
        grid-column: 9/14;
        grid-row: 3;
        width: 90%;
        margin-left: 10%;
        margin-top: -10%;
        height: auto;
        object-fit: cover;

    }




    .button {
        grid-column: 5;
        grid-row: 4;
        padding: 15px 0px;
        font-size: 20px;
        color: #000000;
        align-self: center;
        text-align: center;
        background: linear-gradient(to right, #dfdddd, #ffffff);
        /* Gradiente de verde */
        border-radius: 30px;
        /* Mais arredondado */
        text-decoration: none;
        cursor: pointer;
        width: 190px;
        font-weight: bold;
        height: 24px;
        transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(.25, .8, .25, 1);
        margin-left: -36%;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        /* Sombra mais intensa no hover */
    }



    .button:hover {
        background: linear-gradient(to right, #dfdddd, #ffffff);
        /* Inverte o gradiente no hover */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        /* Sombra mais intensa no hover */
        transform: translateY(-2px);
        /* Pequeno movimento para cima */
        color: black;
    }




   .email {
        grid-row: 6;
        grid-column: 11;
        font-size: 20px;
        margin-left: 0%;
        color: #000000;
        text-decoration: none;
        margin-top: 6%;
    }


    .logo-gmail{
        grid-column: 11;
        grid-row: 6;
        margin-left: 0%;
        margin-top: 0%;

    
    }

    .imagem-gmail {
    
        width: 20%;
        height: auto;
        object-fit: cover;
        margin-left: -25%;
        margin-top: 0%;

    }






    .logo-linkdin {
        grid-column: 12;
        grid-row: 6;
        height: auto;


    }

    .imagem-linkdin {
        width: 37%;
        height: auto;
        object-fit: cover;
        margin-top: 0% ;
        margin-left: 30% ;

    }


    .texto-linkdin {
        grid-column: 12/13;
        grid-row: 6;
        color: #000000;
        text-align: center;
        font-size: 20px;
        text-decoration: none;
        margin-left: 55%;
         margin-top: 14%;
        
    }


}

@media screen and (max-width: 1054px) {
    body {
        overflow-x: hidden;

    }


    .container {
        display: grid;
        grid-template-columns: 70px 50px repeat(11, 1fr);
        grid-template-rows: 70px 200px 200px 100px;

    }

    .linha-laranja {


        grid-column: 2;
        grid-row: 2;
        width: 5px;
        /* Largura da linha */
        height: 200%;
        /* Altura total do contêiner */
        background-color: #ff5722;
        /* Cor Laranja */
        /* Para o caso de ter bordas arredondadas no contêiner, arredondamos a linha */
        border-radius: 5px 0 0 5px;
    }

    .tela-cinza {
        background-color: #ecebeb;
        grid-column: 3/7;
        grid-row: 2/4;
        border-radius: 15Px;
    }



    .imagem-logo {
        grid-column: 3/6;
        grid-row: 1;
    }

    .imagem-4 {
        margin-top: 3%;
        width: 80%;
        height: auto;
        object-fit: cover;
    }

    .titulo-dnf {
        grid-column: 3/7;
        grid-row: 2;
        font-size: 10px;
        color: rgb(0, 0, 0);
        margin-left: 5%;
        margin-top: 4%;
    }

    .texto-1 {
        grid-column: 3/7;
        grid-row: 3;
        color: rgb(0, 0, 0);
        margin-left: 5%;
        margin-top: -35%;
        text-align: left;


    }

    .texto-1 p {
        font-size: 24px;
        line-height: 1.4;
        font-size: 16px;
        font-family: Arial, Helvetica, sans-serif;
    }

    .grifado {
        background-color: rgb(146, 146, 145);
        /* Ou qualquer cor que você preferir para o grifo */
        font-weight: bold;
        /* Para deixar em negrito, como em "grifar" geralmente implica */
    }






    .imagem-1 {
        grid-column: 7/13;
        grid-row: 1;
        width: 70%;
        height: auto;
        object-fit: cover;
        margin-left: 1%;
        margin-top: 8%;


    }


    .imagem-2 {
        grid-column: 9/14;
        grid-row: 2;
        width: 85%;
        margin-left: -10%;
        margin-top: 12%;
        height: auto;
        object-fit: cover;

    }

    .imagem-3 {
        grid-column: 9/14;
        grid-row: 3;
        width: 90%;
        margin-left: 10%;
        margin-top: -10%;
        height: auto;
        object-fit: cover;

    }




    .button {
        grid-column: 5;
        grid-row: 4;
        padding: 15px 0px;
        font-size: 20px;
        color: #000000;
        align-self: center;
        text-align: center;
        background: linear-gradient(to right, #dfdddd, #ffffff);
        /* Gradiente de verde */
        border-radius: 30px;
        /* Mais arredondado */
        text-decoration: none;
        cursor: pointer;
        width: 190px;
        font-weight: bold;
        height: auto;
        transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(.25, .8, .25, 1);
        margin-left: -20%;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        /* Sombra mais intensa no hover */
    }



    .button:hover {
        background: linear-gradient(to right, #dfdddd, #ffffff);
        /* Inverte o gradiente no hover */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        /* Sombra mais intensa no hover */
        transform: translateY(-2px);
        /* Pequeno movimento para cima */
        color: black;
    }




    .email {
        grid-row: 6;
        grid-column: 1/4;
        font-size: 20px;
        margin-left: 40%;
        color: #000000;
        text-decoration: none;
        margin-left: 40%;
        margin-top: 10%;
    }


    .logo-gmail{
        grid-column: 1;
        grid-row: 6;
        margin-left: 0%;
        margin-top: 0%;

    
    }

    .imagem-gmail {
    
        width: 60%;
        height: auto;
        object-fit: cover;
        margin-left: 20%;
        margin-top: 0%;

    }






    .logo-linkdin {
        grid-column: 5;
        grid-row: 6;
        height: auto;


    }

    .imagem-linkdin {
        width: 20%;
        height: auto;
        object-fit: cover;
        margin-top: 0% ;
        margin-left: 40% ;

    }


    .texto-linkdin {
        grid-column: 5/6;
        grid-row: 6;
        color: #000000;
        text-align: center;
        font-size: 20px;
        text-decoration: none;
        margin-left: 45%;
        margin-top: 10%;
    }

}



@media screen and (max-width: 800px) {
    body {
        overflow-x: hidden;

    }


    .container {
        display: grid;
        grid-template-columns: 40px 50px repeat(8, 1fr);
        grid-template-rows: 70px 200px 200px 100px;

    }

    .linha-laranja {
        grid-column: 2;
        grid-row: 2;
        width: 5px;
        /* Largura da linha */
        height: 200%;
        /* Altura total do contêiner */
        background-color: #ff5722;
        /* Cor Laranja */
        /* Para o caso de ter bordas arredondadas no contêiner, arredondamos a linha */
        border-radius: 5px 0 0 5px;
    }

    .tela-cinza {
        background-color: #ecebeb;
        grid-column: 3/7;
        grid-row: 2/4;
        border-radius: 15Px;
    }



    .imagem-logo {
        grid-column: 3/6;
        grid-row: 1;
    }

    .imagem-4 {
        margin-top: 3%;
        width: 80%;
        height: auto;
        object-fit: cover;
    }

    .titulo-dnf {
        grid-column: 3/7;
        grid-row: 2;
        font-size: 8px;
        color: rgb(0, 0, 0);
        margin-left: 5%;
        margin-top: 4%;
    }

    .texto-1 {
        grid-column: 3/7;
        grid-row: 3;
        color: rgb(0, 0, 0);
        margin-left: 5%;
        margin-top: -35%;
        text-align: left;


    }

    .texto-1 p {
        font-size: 14px;
        line-height: 1.4;
        font-family: Arial, Helvetica, sans-serif;
    }

    .grifado {
        background-color: rgb(146, 146, 145);
        /* Ou qualquer cor que você preferir para o grifo */
        font-weight: bold;
        /* Para deixar em negrito, como em "grifar" geralmente implica */
    }






    .imagem-1 {
        grid-column: 7/13;
        grid-row: 2;
        width: 80%;
        height: auto;
        object-fit: cover;
        margin-left: 1%;
        margin-top: 20%;


    }


    .imagem-2 {
        grid-column: 9/14;
        grid-row: 3;
        width: 100%;
        margin-left: -5%;
        margin-top: -20%;
        height: auto;
        object-fit: cover;

    }

    .imagem-3 {
        display: none;
        grid-column: 9/14;
        grid-row: 3;
        width: 90%;
        margin-left: 10%;
        margin-top: -10%;
        height: auto;
        object-fit: cover;

    }




    .button {
        grid-column: 5;
        grid-row: 4;
        padding: 15px 0px;
        font-size: 20px;
        color: #000000;
        align-self: center;
        text-align: center;
        background: linear-gradient(to right, #dfdddd, #ffffff);
        /* Gradiente de verde */
        border-radius: 30px;
        /* Mais arredondado */
        text-decoration: none;
        cursor: pointer;
        width: 190px;
        font-weight: bold;
        height: auto;
        transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(.25, .8, .25, 1);
        margin-left: -20%;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        /* Sombra mais intensa no hover */
    }



    .button:hover {
        background: linear-gradient(to right, #dfdddd, #ffffff);
        /* Inverte o gradiente no hover */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        /* Sombra mais intensa no hover */
        transform: translateY(-2px);
        /* Pequeno movimento para cima */
        color: black;
    }




  .email {
        grid-row: 6;
        grid-column: 1/4;
        font-size: 20px;
        margin-left: 40%;
        color: #000000;
        text-decoration: none;
        margin-left: 40%;
        margin-top: 10%;
    }


    .logo-gmail{
        grid-column: 1;
        grid-row: 6;
        margin-left: 0%;
        margin-top: 0%;

    
    }

    .imagem-gmail {
    
        width: 100%;
        height: auto;
        object-fit: cover;
        margin-left: 20%;
        margin-top: 0%;

    }






    .logo-linkdin {
        grid-column: 5;
        grid-row: 6;
        height: auto;


    }

    .imagem-linkdin {
        width: 20%;
        height: auto;
        object-fit: cover;
        margin-top: 0% ;
        margin-left: 40% ;

    }


    .texto-linkdin {
        grid-column: 5/6;
        grid-row: 6;
        color: #000000;
        text-align: center;
        font-size: 20px;
        text-decoration: none;
        margin-left: 45%;
        margin-top: 10%;
    }




}



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

    body {
        overflow-x: hidden;

    }


    .container {
        display: grid;
        grid-template-columns: 40px 1fr 1fr 1fr 1fr 1fr 20px;
        grid-template-rows: 80px 100px 230px 120px 200px 50px 100px;

    }


    .imagem-logo {
        grid-column: 2/8;
        grid-row: 1;
    }

    .imagem-4 {
        margin-top: 3%;
        width: 80%;
        height: auto;
        object-fit: cover;
    }

    .linha-laranja {
        grid-column: 1;
        grid-row: 2;
        margin-left: 20%;
        width: 5px;
        /* Largura da linha */
        height: 300%;
        /* Altura total do contêiner */
        background-color: #ff5722;
        /* Cor Laranja */
        /* Para o caso de ter bordas arredondadas no contêiner, arredondamos a linha */
        border-radius: 5px 0 0 5px;
    }

    .tela-cinza {
        background-color: #ecebeb;
        grid-column: 2/7;
        grid-row: 2/4;
        border-radius: 15Px;
    }

    .titulo-dnf {
        grid-column: 2/7;
        grid-row: 2;
        font-size: 10px;
        color: rgb(0, 0, 0);
        margin-left: 3%;
        margin-right: auto;
        margin-top: 4%;
    }



    .texto-1 {
        grid-column: 2/7;
        grid-row: 3;
        color: rgb(0, 0, 0);
        margin-left: 3%;
        margin-top: -5%;
        text-align: left;
        margin-right: auto;


    }

    .texto-1 p {
        font-size: 15px;
        line-height: 1.4;
        font-family: Arial, Helvetica, sans-serif;
    }

    .grifado {
        background-color: rgb(146, 146, 145);
        /* Ou qualquer cor que você preferir para o grifo */
        font-weight: bold;
        /* Para deixar em negrito, como em "grifar" geralmente implica */
    }





    .imagem-1 {
        display: none;
        grid-column: 1/6;
        grid-row: 5;
        width: 100%;
        height: auto;
        object-fit: cover;
        margin-left: 6%;
    }


    .imagem-2 {
        display: none;
        grid-column: 9/14;
        grid-row: 2;
        width: 85%;
        margin-left: -10%;
        margin-top: 12%;
        height: auto;
        object-fit: cover;

    }

    .imagem-3 {
        display: none;
        grid-column: 9/14;
        grid-row: 3;
        width: 90%;
        margin-left: 10%;
        margin-top: -10%;
        height: auto;
        object-fit: cover;

    }




    .button {
        grid-column: 5;
        grid-row: 4;
        padding: 15px 0px;
        font-size: 18px;
        color: #000000;
        align-self: center;
        text-align: center;
        background: linear-gradient(to right, #dfdddd, #ffffff);
        /* Gradiente de verde */
        border-radius: 30px;
        /* Mais arredondado */
        text-decoration: none;
        cursor: pointer;
        width: 130px;
        font-weight: bold;
        height: auto;
        transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(.25, .8, .25, 1);
        margin-left: -46%;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        /* Sombra mais intensa no hover */
    }



    .button:hover {
        background: linear-gradient(to right, #dfdddd, #ffffff);
        /* Inverte o gradiente no hover */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        /* Sombra mais intensa no hover */
        transform: translateY(-2px);
        /* Pequeno movimento para cima */
        color: black;
    }


    .email {
        grid-row: 6;
        grid-column: 1/4;
        font-size: 18px;
        margin-left: 40%;
        color: #000000;
        text-decoration: none;
        margin-left: 32%;
        margin-top: 5%;
    }


    .logo-gmail{
        grid-column: 1;
        grid-row: 6;
        margin-left: 0%;
        margin-top: 0%;

    
    }

    .imagem-gmail {
    
        width: 80%;
        height: auto;
        object-fit: cover;
        margin-left: 20%;
        margin-top: 0%;

    }






    .logo-linkdin {
        grid-column: 5;
        grid-row: 6;
        height: auto;


    }

    .imagem-linkdin {
        width: 20%;
        height: auto;
        object-fit: cover;
        margin-top: 2% ;
        margin-left: 20% ;

    }


    .texto-linkdin {
        grid-column: 5/6;
        grid-row: 6;
        color: #000000;
        text-align: center;
        font-size: 18px;
        text-decoration: none;
        margin-left: 26%;
        margin-top: 7%;
    }


    .texto-compativel{
        display: block;
        grid-column: 1/6;
        grid-row: 6;
        font-size: 18px;
        color: rgb(0, 0, 0);
        margin-left: 6%;
        margin-right: auto;
        margin-top: -20%;
    }

}