@font-face{
    font-family: smooch;

    /*Caso a fonte esteja na mesma pasta*/
    src: url("../font/Smooch_Sans/SmoochSans-VariableFont_wght.ttf");
}

@font-face{
    font-family: saira;

    /*Caso a fonte esteja na mesma pasta*/
    src: url("../font/Saira/Saira-VariableFont_wdth\,wght.ttf");
}

@font-face{
    font-family: rubik;

    /*Caso a fonte esteja na mesma pasta*/
    src: url("../font/Rubik_Mono_One/RubikMonoOne-Regular.ttf");
}

@font-face{
    font-family: roboto;

    /*Caso a fonte esteja na mesma pasta*/
    src: url("../font/Roboto/Roboto-VariableFont_wdth\,wght.ttf");
}

@font-face{
    font-family: benzin;

    /*Caso a fonte esteja na mesma pasta*/
    src: url("../font/Benzin-Font/Benzin-Medium.ttf");
}

@font-face{
    font-family: inter;

    /*Caso a fonte esteja na mesma pasta*/
    src: url("../font/Inter/Inter-VariableFont_opsz\,wght.ttf");
}

@font-face{
    font-family: techno;

    /*Caso a fonte esteja na mesma pasta*/
    src: url("../font/font/TechnoScriptEF.ttf");
}

html {

    scroll-behavior: smooth;

}

html, body {

    margin: 0;
    padding: 0;
    background-color: white;

}

/*--------------HEADER---------------*/



#logo {

    width: auto;
    height: 50px;
    margin: auto 5vw;

}

header {

    display: flex;
    width: 100vw;
    justify-content: space-between;
    background-color: black;
    height: 90px;
    position: fixed;
    z-index: 10;

}

div {

    display: flex;
    justify-content: space-between;
    width: 100vw;
    margin: 0 auto;

}

div > img {

    display: flex;
    width: 40vw;
    
}

div > nav {

    display: flex;
    width: auto;
    margin: auto 0;

}

div > nav > ul {

    display: flex;
    width: 30vw;

}

div > nav > ul > li > a {

    display: row;
    list-style-type: none;
    color: white;
    margin-right: 30px;
    font-family: roboto;
    text-decoration: none;

}

/*--------------FIM HEADER---------------*/
/*--------------HOME---------------*/
section.home {

    display: flex;
    width: 100vw;
    height: 800px;
    background-color: black;

}


#circulo1 {

    width: 300px;
    height: 300px;
    filter: blur(200px);
    background-color: white;
    opacity: 0.3;
    position: absolute;
    top: 800px;
    left: 0px;
    z-index: 3;

}

#circulo2 {

    width: 250px;
    height: 250px;
    filter: blur(200px);
    background-color: white;
    opacity: 0.1;
    position: absolute;
    top: 400px;
    left: 0px;
    z-index: 2;

}

#circulo3 {

    width: 400px;
    height: 400px;
    filter: blur(400px);
    background-color: white;
    opacity: 0.3;
    position: absolute;
    top: 800px;
    left: 60vw;

}

#circulo4 {

    width: 200px;
    height: 200px;
    filter: blur(200px);
    background-color: white;
    opacity: 0.3;
    position: absolute;
    top: 400px;
    right: 0;
    z-index: 4;

}

section.home #txt {

    display: flex;
    background-color: #18222B;
    background-image: linear-gradient(to right, #18222B , #1e2a35);
    width: 30vw;
    height: 60px;
    border-radius: 15px;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 180px;
    margin: 0 35vw;
    opacity: 0.8;
    color: white;
    font-family: techno;
    font-size: 10px;

}

section.home #titulo {

    display: flex;
    width: 100vw;
    color: white;
    text-align: center;
    position: absolute;
    top: 250px;
    justify-content: center;
    text-align: center;
    font-size:  32px;
    font-family: benzin;
    padding: 0;
    margin-top: 30px;

}

h1 {

    margin: 0;

}

section.home #subtitulo {

    color: white;
    width: 100vw;
    position: absolute;
    top: 450px;
    justify-content: center;
    text-align: center;
    font-family: Inter;
    font-weight: 100;

}


section.home > a {

    display: flex;
    position: relative;;
    top: 650px;
    width: 18vw;
    margin: 0px auto;
    height: 60px;
    border-radius: 10px;
    background-color: green;
    border: 1px solid white;
    box-shadow: 0 9px #ffffff;
    cursor: pointer;
    color: white;
    font-weight: 500;
    font-size: 16px;
    justify-items:center;

}

a {

    text-decoration: none;
    font-family: roboto;
    justify-content: center;

}

section.home > a:active {

    border: 1px solid gray;
    background-color: rgb(0, 86, 0);
    box-shadow: 0 5px gray;
    transform: translateY(5px);

  }

section.home > a:hover {

    background-color: rgb(0, 110, 0);

}


section.info {

    display: flex;
    width: 100vw;
    height: auto;
    flex-direction: column;
    background-image: url("../img/info.png");
    background-size: 90vw auto;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 100px;
    background-color: black;

}

section.info > .card {

    display: flex;
    flex-direction: column;
    width: 300px;
    height: 300px;
    z-index: 2;
    background-color: #16212A;
    padding-top: 40px;
    border-radius: 20px;
    opacity: 0.9;
    transition: transform 1s;
    transform: translateX(0) scale(1);
    cursor: pointer;

}

section.info > .card > div{

    width: 30%;
    height: 30%;
    justify-content: center;
    text-align: center;
    align-items: center;
    border: 1px solid white;
    margin: 20px auto;
    border-radius: 10px;
    border-width: 3px;
    margin-top: 50px;
    opacity: 1;
    box-shadow: 0px 0px 30px 10px rgba(255, 255, 255, 0.2);


}

section.info > .card:hover, .card:focus {

    transform: translateX(10px) scale(1.2);
    
  }

#card1{

    margin-right: 160px;
    margin-top: 0px;

}

#card2{

    margin-left: 160px;
    
}

#card3{

    margin-right: 430px;
    
}

section.info > .card > div > img {

    width: 50px;
    height: 50px;
    justify-content: center;
    margin-left: 60px;
}

#nuvem{
    width: 70px;
    margin: 50% auto;
}

#protecao {

    margin: 50% auto;
    width: 70px;
    height: 70px;
}

#support {

    margin: 50% auto;
    width: 70px;
    height: 70px;

}

section.info > .card > p {

    display: flex;
    color: white;
    text-align: center;
    font-family: saira;
    margin-top: 0px;
    padding-top: 0px;
    width: 100%;
    height: 100px;
    font-size: 20px;
    align-items: center;
    justify-content: center;

}

section.clientes {

    display: flex;
    width: 100vw;
    height: 800px; 
    background-color: black;
    flex-direction: column;

}

section.clientes > div {
    
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 250px;
    justify-content: center;
    padding-top: 150px;
    text-align: center;
}




section.clientes > div > div {

    display: flex;
    width: 100vw;
    margin: 0;

}

section.clientes > div > div >  h1 {

    display: flex;
    width: 100vw;
    color: white;
    font-family: smooch;
    font-size: 80px;
    letter-spacing: 5px;
    justify-content: center;

}

section.clientes > div > p {

    color: white;
    font-family: roboto;
    font-size: 18px;
    margin-top: 0;
    padding-top: 0;
    width: 100vw;

}

section.clientes > .list {
    
    display: flex;
    flex-direction: row;
    width: 100vw;
    height: 115px;
    margin-top: 150px;
    padding-top: 0px;
    margin-bottom: 150px;
    z-index: 5;


}


section.clientes > .list > div {
    
    display: flex;
    width: 300px;
    height: 100px;
    transition: transform 1s;
    transform: translateX(0) scale(1);
    z-index: 6;

}

section.clientes > .list > div:hover, div:focus {
   
    transform: translateX(10px) scale(1.5);
        
}

section.clientes > .list > div#desanja:hover, div:focus {
   
    transform: translateX(0px) scale(1.1);
    padding-right: 0;
    margin-right: 0;
        
}

section.clientes > .list > div > img {
    
    display: flex;
    width: auto;
    height: 40px;
    margin: 0 auto;
    padding-top: 25px;

}

section.clientes > #circulo1 {

    width: 300px;
    height: 300px;
    filter: blur(200px);
    background-color: white;
    opacity: 0.3;
    position: absolute;
    top: 1900px;
    left: 0px;
    z-index: 3;

}

/*------------BLUR------------*/

section.clientes > #circulo3 {

    width: 300px;
    height: 300px;
    filter: blur(200px);
    background-color: white;
    opacity: 0.2;
    position: absolute;
    top: 2300px;
    left: 0px;
    z-index: 3;

}

section.clientes > #circulo4 {

    width: 300px;
    height: 300px;
    filter: blur(200px);
    background-color: white;
    opacity: 0.2;
    position: absolute;
    top: 1800px;
    right: 0px;
    z-index: 3;

}

/*------------BLUR------------*/

section.eu {

    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;
    background-color: white;
    border-width: 10px;

}

section.eu > .card_eu {

    display: flex;
    width: 30vw;
    height: 50px;
    justify-content: center;
    border-radius: 10px;
    margin: 100px auto;
    background-color: #F0F8FF;
    font-family: techno;
    font-size: 14px;
    align-items: center;

}

section.eu > .titulo {

    display: block;
    width: 100vw;
    font-family: benzin;

}

section.eu > .titulo > div {

    display: flex;
    width: 50w;
    height: 40px;
    justify-content: center;
    font-size: 30px;
    letter-spacing: 3px;

}


section.eu > .titulo > div > .card_2 {

    width: auto;
    margin-right: 0;

}

section.eu > .titulo > div > .card_1 {

    width: auto;
    margin-left: 20px;

}


section.eu > .titulo > p {

    display: flex;
    width: 100vw;
    justify-content: center;
    margin-top: 60px;
    font-family: roboto;
    color: #98A4AA;

}

section.eu > div {

    display: flex;
    width: 100vw;

}


section.eu > .sobre_eu {

    display: flex;
    width: 80vw;
    height: 600px;
    margin-top: 150px;
    background-color: #101214;
    border-radius: 20px;

}

section.eu > .sobre_eu > div {

    display: block;
    color: white;
    margin-bottom: 100px;

}

section.eu > .sobre_eu > div > h1 {

    color: white;
    font-size: 32px;
    margin-top: 100px;
    margin-left: 100px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: lighter;

}

section.eu > .sobre_eu > div > p {

    color: white;
    font-size: 16px;
    margin-top: 30px;
    margin-left: 100px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: lighter;
    text-align: justify;
    width: 70%;
    line-height: 25px;

}

section.eu > .sobre_eu > div > img {

    width: 77%;
    height: auto;
    margin: 0 auto;

}

section.servicos {

    width: 100vw;
    height: auto;
    background-color: white;

}


section.servicos > .titulo_service {

    display: flex;
    width: 20vw;
    justify-content: center;
    border-radius: 10px;
    margin-top: 100px;
    margin-left: 10vw;
    background-color: #F0F8FF;
    font-family: techno;

}

section.servicos > div > p {

    font-size: 16px;

}

section.servicos > .texto_principal {

    display: flex;
    width: 50vw;
    justify-content: left;
    font-size: 32px;
    margin-left: 10vw;
    margin-top: 50px;
    font-family: benzin;

}

section.servicos > .desc_service > p {

    display: flex;
    width: 50vw;
    justify-content: left;
    font-size: 24px;
    margin-left: 10vw;
    margin-top: 20px;
    font-family: roboto;
    color: #98A4AA;

}

section.servicos > .cards_services {

    display: flex;
    width: 100vw;
    height: auto;
    margin-top: 100px;
    margin-bottom: 150px;

}

section.servicos > .cards_services > div {

    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.186);
    width: 22vw;
    height: auto;
    margin-top: 100px;
    background-color: #F0F8FF;
    border-radius: 20px;

}

section.servicos > .cards_services > div > .quadrado {

    display: flex;
    background-color: red;
    width: 50px;
    height: 50px;
    color: white;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    margin-left: 48px;
    margin-top: 40px;
    font-size: 32px;

}

section.servicos > .cards_services > div > h1 {

    display: flex;
    width: 70%;
    text-align: justify;
    margin: 0 auto;
    margin-top: 50px;
    font-family: roboto;
    font-size: 22px;
    font-weight: 500;

}

section.servicos > .cards_services > div > p {

    display: flex;
    width: 70%;
    text-align: justify;
    margin: 50px auto;
    font-size: 18px;
    font-family: roboto;
    text-align: left;
    line-height: 30px;

}

section.servicos > .cards_services > div > .item2 {

    display: flex;
    width: 70%;
    height: auto;
    text-align: justify;
    margin: 0 auto;
    margin-top: 0px;
    font-family: roboto;
    font-size: 22px;
    font-weight: 500;
    align-items: center;

}

section.servicos > .cards_services > div > .p2 {

    display: flex;
    width: 70%;
    height: 230px;
    text-align: justify;
    margin: 50px auto;
    font-size: 18px;
    font-family: roboto;
    text-align: left; 
    line-height: 30px;
    margin-top: 0;

}

section.servicos > .cards_services > div > .item3 {

    display: flex;
    width: 70%;
    text-align: justify;
    margin: 0 auto;
    margin-top: 0px;
    font-family: roboto;
    font-size: 22px;
    font-weight: 500;
    align-items: center;

}

section.servicos > .cards_services > div > .p3 {

    display: flex;
    width: 70%;
    height: 230px;
    text-align: justify;
    margin: 50px auto;
    font-size: 18px;
    margin-top: 0;
    font-family: roboto;
    text-align: left; 
    line-height: 30px;

}

section.servicos > a {

    display: flex;
    width: 20vw;
    margin: 0px auto;
    height: 60px;
    border-radius: 10px;
    background-color: green;
    color: white;
    font-weight: lighter;
    border: none;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-bottom: 100px;
    border: 1px solid black;
    box-shadow: 0 9px black;
    cursor: pointer;
    font-weight: 500;

}

section.servicos > a:active {

    border: 1px solid gray;
    box-shadow: 0 5px gray;
    transform: translateY(4px);

}

section.servicos > a:hover {

    background-color: rgb(0, 110, 0);

}

a {

    text-decoration: none;
    font-family: roboto;
    align-items: center;
    text-align: center;
    padding-top: 0px;

}



section.contato {

    display: flex;
    width: 100vw;
    height: auto;
    background-color: #F0F8FF;
    padding-bottom: 100px;

}

section.contato > div {

    display: flex;
    flex-direction: column;
    width: 25vw;
    height: auto;

}

section.contato > div > h1 {

    width: 70%;
    margin: 0 auto;
    margin-top: 40px;
    font-size: 20px;
    font-family: roboto;
    color: #000000;
    font-weight: 400;

}

section.contato > div > ul {

    margin: 0 auto;
    width: 70%; 
    padding-left: 0;
    margin-bottom: 20px;
    margin-top: 20px;

}   

section.contato > div > ul > li {

    list-style: none;
    height: 20px;
    text-align: left;
    font-family: roboto;
    color: #98A4AA;
    font-weight: 400;
    margin: 10px  0

}

section.contato > div {

    display: flex;
    width: 350px;
    height: auto;
    justify-content: center;
    align-items: center;
}


section.contato > div > img {

    width: 350px;
    height: auto;
    justify-content: center;

}

footer {

    width: 100vw;
    height: 70px;
    background-color: #F0F8FF;

}

footer > div {

    width: 80vw;
    background-color: #F0F8FF;
    border: 1px solid #16212a6d;
    margin: 0 auto;

}

footer > p {

    font-family: roboto;
    color: #98A4AA;
    font-weight: 400;
    width: 80vw;
    margin: 0 auto;
    text-align: right;
    margin-top: 20px;
}









/*Responsividade do site mobile*/


@media screen and (min-width: 300px) and (max-width: 768px) {

    html {

        width: 100vw;

    }
    body {

        width: 100vw;

    };

    #circulo1 {

        display: none;
    }
    
    #circulo2 {
    
        display: none;
    
    }
    
    #circulo3 {

        display: none;

    }
    
    #circulo4 {
    
        display: none;
    
    }
    
    body {

        width: 100vw;
        height: auto;
    }
    
    div > nav > ul {

        display: none;
    
    }

    section.home {

        display: flex;
        width: 100vw;
        height: 650px;
        background-color: black;
    
    }

    section.home #txt {

        width: 80vw;
        margin:0 30px;
        font-size: 8px;
        top: 100px;

    }
    
    section.home #titulo {
        
        font-size: 25px;
        width: 90vw;
        margin-left: 20px;
        margin-top: 0px;
        top: 200px;
    
    }
    
    section.home #subtitulo {

        display: flex;
        top: 550px;
        width: 85vw;
        margin-left: 30px;
        font-size: 16px;
    
    }
    

    section.home > a {

        display: flex;
        width: 60vw;
        top: 700px;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    
    }







    section.home {

        height: 800px;

    }

    section.info {

        display: flex;
        flex-direction: column;
        width: 100vw;
        height: auto;
        background-image: none;
    
    }

    section.info > #card2 {

        margin: 0;
        margin-top: 30px;

    }

    section.info > .card {

        display: flex;
        margin-top: 30px;


    }




    section.clientes {

        height: 1440px;

    }



    section.clientes > div > div >  h1 {

        display: flex;
        width: 100vw;
        color: white;
        font-family: smooch;
        font-size: 40px;
        letter-spacing: 5px;
        justify-content: center;
    
    }
    
    section.clientes > div > p {
    
        color: white;
        font-family: roboto;
        font-size: 12px;
        margin-top: 0;
        padding-top: 0;
        width: 100vw;
    
    }
    
    section.clientes > .list {
        
        display: flex;
        flex-direction: column;
        width: 100vw;
        height: 115px;
        margin-top: 400px;
        padding-top: 0px;
        margin-bottom: 150px;
    
    
    }
    
    section.clientes > .list > div {
        
        display: flex;
        width: 100vw;
        height: 100px;
        margin-top: 100px;
    
    }
    
    section.clientes > .list > div > img {
        
        display: flex;
        width: auto;
        height: 50px;
        margin: 0 auto;
        padding-top: 25px;
    
    }


    section.clientes > #circulo1, #circulo3, #circulo4 {

        display: none;
    
    }
    

    section.eu {

        width: 100vw;

    }



    section.eu > .card_eu {

        display: flex;
        width: 90vw;
        font-size: 10px;

    
    }
    
    section.eu > .titulo {
    
        display: flex;
        flex-direction: column;
        width: 90vw;
        margin-left: 0;
    
    }

    section.eu > .titulo > div  {
    
        display: flex;
        flex-direction: column;
        width: 90vw;
        height: 100px;
        padding-left: 20px;
        margin-left: 0;
    
    }

    section.eu > .titulo > div > .card_2 > h1 {

        font-size: 32px;
        width: 90vw;
        margin-left: 0;
    
    }

    section.eu > .titulo > div > .card_1 > h1 {

        font-size: 32px;  
        width: 90vw;
        margin-left: 0;
    
    }
    
    section.eu > .titulo > div > .card_1 {

        width: 90vw;
        margin-left: 0;
    }

    section.eu > .titulo > div > .card_2 {

        margin-left: 0;
        width: 90vw;
    }
    
    

    section.eu > .titulo > p {
    
        display: flex;
        width: 90vw;
        font-size: 12px;
        margin-left: 0;

    }


    section.eu > .sobre_eu {

        height: auto;
        width: 90vw;
        height: auto;
        flex-direction: column;
 
    }

    section.eu > .sobre_eu > div {

        width: 90vw;

 
    }

    section.eu > .sobre_eu > div > h1 {

        margin-left: 40px;
 
    }

    section.eu > .sobre_eu > div > p {

        margin-left: 45px;
 
    }

    section.eu > .sobre_eu > div > img {

        display: none;

    }




    section.servicos > .titulo_service {

 
        width: 70vw;
        justify-content: center;
        margin: 100px auto;

    
    }
    
    section.servicos > .texto_principal {

        display: flex;
        width: 50vw;
        margin-left: 10px;
        font-size: 24px;   
    }

    section.servicos > .texto_principal > h1 {

        width: 70vw;
        margin-left: 0;
        font-size: 32px;
    
    }


    section.servicos > .texto_principal > span {

        width: 70vw;
        font-size: 32px;
    
    }

    section.servicos > .desc_service {

        display: flex;
        width: 100vw;

    }

    section.servicos > .desc_service > p {

        display: flex;
        width: 100vw;
        margin-left: 20px;

    }

    section.servicos > .cards_services {

        display: flex;
        width: 100vw;
        flex-direction: column;

    }

    section.servicos > .cards_services > div {

        display: flex;
        width: 80vw;

    }


    section.servicos > .cards_services > div > .item2 {

        margin-top: 50px;

    }

    section.servicos > .cards_services > div > .p2 {

        margin-top: 50px;
        font-size: 18px;

    }

    
    section.servicos > .cards_services > div > .item3 {

        margin-top: 50px;

    }

    section.servicos > .cards_services > div > .p3 {

        margin-top: 30px;
        font-size: 17px;
        padding-bottom: 40px;

    }

    section.servicos > a {

        width: 60vw;

    }

    section.contato {

        display: flex;
        width: 100vw;

    }

    section.contato > div {

        display: flex;
        width: 25vw;

    }

    section.contato > div > img {

        display: none;
        width: 80vw;
        margin: 50px auto;

    }

    section.contato > div > h1 {

        display: none;

    }

    section.contato > div > ul {

        display: none;

    }

    
    section.info > #card2 {

        margin-top: 30px;
        margin-left: 30px;

    }
    section.info > #card1 {

        margin-left: 30px;
        margin-top: 30px;

    }
    section.info > #card3 {

        margin-left: 30px;
        margin-top: 30px;
        padding-bottom: 30px;

    }

    header > div {

        width: 100vw;

    }

    header > div > img#logo {

        width: 80vw;
        margin: 20px auto;

    }

    header {

        position: absolute;
        z-index: 10;
    
    }
    
    

    
    
}

@media screen and (min-width: 769px) and (max-width: 1080px) {

    html {

        width: 100vw;

    }
    body {

        width: 100vw;

    };

    #circulo1 {

        display: none;
    }
    
    #circulo2 {
    
        display: none;
    
    }
    
    #circulo3 {

        display: none;

    }
    
    #circulo4 {
    
        display: none;
    
    }
    
    body {

        width: 100vw;
        height: auto;
    }
    
    div > nav > ul {

        display: none;
    
    }

    section.home {

        display: flex;
        width: 100vw;
        height: 650px;
        background-color: black;
    
    }

    section.home #txt {

        width: 80vw;
        margin:0 80px;
        font-size: 8px;
        top: 100px;

    }
    
    section.home #titulo {
        
        font-size: 25px;
        width: 90vw;
        margin-left: 20px;
        margin-top: 50px;
        top: 200px;
    
    }
    
    section.home #subtitulo {

        display: flex;
        top: 450px;
        width: 85vw;
        margin-left: 80px;
        font-size: 16px;
    
    }
    
    section.home > a {

        display: flex;
        width: 60vw;
        top: 600px;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    
    }







    section.home {

        height: 800px;

    }

    section.info {

        display: flex;
        flex-direction: column;
        width: 100vw;
        height: auto;
        background-image: none;
    
    }

    section.info > #card2 {

        margin: 0;
        margin-top: 30px;

    }

    section.info > .card {

        display: flex;
        margin-top: 30px;


    }




    section.clientes {

        height: 1440px;

    }



    section.clientes > div > div >  h1 {

        display: flex;
        width: 100vw;
        color: white;
        font-family: smooch;
        font-size: 40px;
        letter-spacing: 5px;
        justify-content: center;
    
    }
    
    section.clientes > div > p {
    
        color: white;
        font-family: roboto;
        font-size: 12px;
        margin-top: 0;
        padding-top: 0;
        width: 100vw;
    
    }
    
    section.clientes > .list {
        
        display: flex;
        flex-direction: column;
        width: 100vw;
        height: 115px;
        margin-top: 400px;
        padding-top: 0px;
        margin-bottom: 150px;
    
    
    }
    
    section.clientes > .list > div {
        
        display: flex;
        width: 100vw;
        height: 100px;
        margin-top: 100px;
    
    }
    
    section.clientes > .list > div > img {
        
        display: flex;
        width: auto;
        height: 50px;
        margin: 0 auto;
        padding-top: 25px;
    
    }


    section.clientes > #circulo1, #circulo3, #circulo4 {

        display: none;
    
    }
    

    section.eu {

        width: 100vw;

    }



    section.eu > .card_eu {

        display: flex;
        width: 90vw;
        font-size: 10px;

    
    }
    
    section.eu > .titulo {
    
        display: flex;
        flex-direction: column;
        width: 90vw;
        margin-left: 0;
    
    }

    section.eu > .titulo > div  {
    
        display: flex;
        flex-direction: column;
        width: 90vw;
        height: 100px;
        padding-left: 20px;
        margin-left: 15vw;
    
    }

    section.eu > .titulo > div > .card_2 > h1 {

        font-size: 32px;
        width: 90vw;
        margin-left: 0;
    
    }

    section.eu > .titulo > div > .card_1 > h1 {

        font-size: 32px;  
        width: 90vw;
        margin-left: 0;
    
    }
    
    section.eu > .titulo > div > .card_1 {

        width: 90vw;
        margin-left: 0;
    }

    section.eu > .titulo > div > .card_2 {

        margin-left: 0;
        width: 90vw;
    }
    
    

    section.eu > .titulo > p {
    
        display: flex;
        width: 30vw;
        font-size: 12px;
        margin-left: 15vw;

    }


    section.eu > .sobre_eu {

        height: auto;
        width: 90vw;
        height: 500px;
        flex-direction: column;
 
    }

    section.eu > .sobre_eu > div {

        width: 90vw;

 
    }

    section.eu > .sobre_eu > div > h1 {

        margin-left: 40px;
 
    }

    section.eu > .sobre_eu > div > p {

        margin-left: 45px;
 
    }

    section.eu > .sobre_eu > div > img {

        display: none;

    }




    section.servicos > .titulo_service {

 
        width: 70vw;
        justify-content: center;
        margin: 100px auto;

    
    }
    
    section.servicos > .texto_principal {

        display: flex;
        width: 50vw;
        margin-left: 15vw;
        font-size: 24px;   
    }

    section.servicos > .texto_principal > h1 {

        width: 70vw;
        margin-left: 0;
        font-size: 32px;
    
    }


    section.servicos > .texto_principal > span {

        width: 70vw;
        font-size: 32px;
    
    }

    section.servicos > .desc_service {

        display: flex;
        width: 100vw;
        margin-left: 13vw;

    }

    section.servicos > .desc_service > p {

        display: flex;
        width: 100vw;
        margin-left: 20px;

    }

    section.servicos > .cards_services {

        display: flex;
        width: 100vw;
        flex-direction: column;

    }

    section.servicos > .cards_services > div {

        display: flex;
        width: 50vw;

    }


    section.servicos > .cards_services > div > .item2 {

        margin-top: 50px;

    }

    section.servicos > .cards_services > div > .p2 {

        margin-top: 50px;
        font-size: 18px;

    }

    
    section.servicos > .cards_services > div > .item3 {

        margin-top: 50px;

    }

    section.servicos > .cards_services > div > .p3 {

        margin-top: 30px;
        font-size: 17px;
        padding-bottom: 40px;

    }

    section.servicos > a {

        width: 60vw;

    }

    section.contato {

        display: flex;
        width: 100vw;

    }

    section.contato > div {

        display: flex;
        width: 25vw;

    }

    section.contato > div > img {

        display: none;
        width: 80vw;
        margin: 50px auto;

    }

    section.contato > div > h1 {

        display: none;

    }

    section.contato > div > ul {

        display: none;

    }

    
    section.info > #card2 {

        margin-top: 30px;
        margin-left: 35vw;

    }
    section.info > #card1 {

        margin-left: 35vw;
        margin-top: 30px;

    }
    section.info > #card3 {

        margin-left: 35vw;
        margin-top: 30px;
        padding-bottom: 30px;

    }

    header > div {

        width: 100vw;

    }

    header > div > img#logo {

        width: 30vw;
        margin: 20px auto;

    }

    header {

        position: absolute;
        z-index: 10;
    
    }
    



}