@charset "UTF-8";
/*@import url(//fonts.googleapis.com/css?family=Otomanopee+One);*/


html {
  scroll-behavior: smooth;
}

body,
ul,
li,
p {

    margin: 0;
    padding: 0;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    list-style: none;

}

a {
    text-decoration: none;
}

.header{

    display: flex;
    background-color: #D0DB97;
    height: 90px;
    justify-content: space-between; /*Alinha um espaçamento entre os itens*/
    padding: 10px 80px;
    align-items: center; /*Alinha os itens no centro do item*/
    flex-wrap: wrap; /*Ajusta o texto para que no tamanho mínimo, ele jogue o ítem para baixo*/


}

#logo{

    height: 50px;
    width: auto;

}

.menu {

    display: flex;
}

.menu li {

    margin-left: 10px;
}

.menu li a {

    display: block; /*transforma o link do item da tabela em um bloco*/
    padding: 10px;
    color: #181D27;
}

.menu li a strong:hover {

    color: #254D32;
    border-bottom: 1px solid #181D27;
}

h1 {

    font-size: 54px;
    /*font-family: 'Otomanopee One';*/
    padding: 0;
    margin: 0;

}

/*Home Principal*/

.hero {

    display: flex;
    flex-wrap: wrap; /*Informo que meu hero pode quebrar as imagens*/
    justify-content: space-between; /*Informo que quero os espaco entre os itens*/
    align-items: center; /*Alinha os itens no meio*/
    margin: 0 auto;
    max-width: 1240px; /*Define um tamanho máximo de 1240px para a tela*/

}

.hero > div { /*Div que ta dentro do flex*/

    flex: 1 1 350px; /*Informo que quero que o item se expanda, depois  que ele fique menor, e que tenha uma base de 200px...se nao tiver 200 ele quebra - depois indica op flex-wrap para quebrar*/
    display: flex;

}

.hero > div > img {

    max-width: 100%; /*Define que a sua imagem ficará no máximo em 100%, tamanho total da tela*/
    display: flex;
    padding: 50px 0 20px 70px; /*Espaçamento de 50px da borda superior, 0px de espaçamento do lado direito, 20px de espaçamento para a parte debaixo e 50px de espaçamento da parte da esquerda*/

}

.hero > .title {

    display: flex;
    flex-direction: column;
    padding-top: 0;
    width: auto; /*Comprimento automático para o tamanho do texto*/
    height: auto; /*Altura automático para o tamanho do texto*/
    color: #181D27;

}

.hero > .title > .p {

    padding: 0; /*Remove o espaçamento entre tudo o que estiver*/
    margin: 27px 0px; /*Acrescenta a margem na parte de cima e na parte de baixo de 27px, sendo 0 nas laterais */
    font-size: 24px; /*Tamanho de 24px nas fontes*/
    color: #181D27;
    
}

/*Botão CTA da página hero*/

.hero > .title > a > .cta {

    background-color: #3A7D44;
    color: white;
    width: 488px;
    height: 70px;
    border-radius: 15px;
    border-style: none;
    font-size: 20px;
    font-family: "Arial";
    margin-top: 64px;
    box-shadow: 0 9px #999;
    
}

.hero > .title > a > .cta:hover {

    background-color: #2f6437;
    cursor: pointer;
    
}

.hero > .title > a > .cta:active {
    background-color: #2f6437;
    box-shadow: 0 5px #666;
    transform: translateY(4px);

}

    /*fim do Botão CTA da página hero*/

/*FIM da Home Principal*/

/*Começo do Sobre*/

.sobre {

    display: flex;
    flex-wrap: wrap; /*Informo  que pode quebrar linha quando a tela for recolhida*/
    justify-content: space-between;/*Informo que eu gostaria de acrescentar um espaço entre os dois itens*/
    align-items: center;/*Alinho os itens de forma centralizada*/
    max-width: 1240px;/*|Comprimento máximo de 1240px*/
    margin: 0 auto;/*|Defino uma marge com 0 para top e bottom e automático nas laterais para centralizar os nossos dois itens*/
    padding: 100px 50px; /*Defino um tamanho de espaçamento interno antes da borda*/

}

.sobre > div {

    flex: 1 1 350px; /*Verificar qual função é essa*/
    margin: 70px 20px;

}

.sobre > div > img {

    max-width: 100%; /*Define que a sua imagem ficará no máximo em 100%, tamanho total da tela*/
    display: block;
    margin-left: 50px; /*Define uma margem de 50px do lado esquerdo*/

}

.sobre > .texto {

    display: flex;
    flex-wrap: wrap; /*Quebra o bloco tipo flex para a tela debaixo*/
    color: #181D27; /*Adiciona a cor em hexa na letra*/

}

.sobre > .texto > h1 {

    font-size: 48px; /*Define um tamanho de fonte para o h1 dentro sw .sobre . texto*/
    padding: 20px 116px; /*Define um espaçamento interno para cima e baixo de 20px e 116px para as laterais */

}

.sobre > .texto > p {

    font-size: 32px; /*Define um tamanho de fonte para o parágrafo que está dentro de .sobre .textp*/
    padding: 0 30px; /*Define um espaçamento lateral de 30px*/
    margin-top: 20px; /*Define uma margem superior do item de 20px*/
    text-align: justify; /*Define o tipo justificado para o texto do parágrafo*/

}

/*FIM do Sobre*/

/*Começo da área de serviços*/

.serviços {

    display: flex; /*Define o bloco que será construído em flex*/
    flex-wrap: wrap; /*Quebra o bloco tipo flex para a tela debaixo*/
    background-color: #D0DB97; /*Define uma cor de hexa #D0DB97 para o background */
    
}

.serviços > div {

    display: block;
    max-width: 1240px; /*Define um tamanho máximo de 1240px para a div de serviços*/
    align-items: center; /*Alinha os itens centralizados*/
    margin: 0 auto;

}

.serviços > div > h1 {

    display: block;
    font-size: 48px; /*Define um tamanho de 48px dentro do .serviço .div */
    color: #181D27; /*Define uma cor hexadecimal para esse mesmo h1*/
    text-align: center; /*Alinha o texto na posição central*/
    margin: 100px 0 30px 0; /*Define uma margem superior e inferior  de 50px e 0 nas laterais*/

}

.serviços > div > .txtservico {

    display: block;
    font-size: 48px; /*Define um tamanho de 48px dentro do .serviço .div para a classe textservico */
    color: #181D27;/*Define uma cor hexadecimal para esse mesmo h1*/
    text-align: center; /*Alinha o texto na posição central*/
    margin: 50px 0; /*Define uma margem superior e inferior  de 50px e 0 nas laterais*/
    padding: 0px 100px; /*Define uma margem superior e inferior  de 50px e 0 nas laterais*/  

}

.serviços > div > .tabelinha {

    display: flex; /*Display do tipo Flex*/
    flex-wrap: wrap; /*Quebra os itens para a próxima linha conforme o tamanho da página*/
    justify-content: space-between; /*Define um espaço entre os itens de dentro do div com a classe tabelinha*/
    max-width: 1240px; /*Define um tamanho máximo para comprimeiro de 1240px para essa div*/
    align-items: center; /*Alinha os itens de forma centralizada*/
    padding: 20px 250px; /*Define um espaçamento interno superior e inferior de 20px e de 250px nas laterais*/

}

.serviços > div > div > ul > .itens {

    display: flex; /*Define os blocos dos itens como flex*/
    width: 350px; /*Define um comprimento de 350px*/
    height: 68px; /*Define uma altura de 68px*/
    margin: 20px auto; /*Define uma margem superior e inferios de 20px e margem automática nas laterais*/
    background-color: white; /*Define uma cor branca para o fundo*/
    align-items: center; /*Alinhar os itens do bloco de forma centralizada*/
    text-align: center; /*Alinha os textos dentro dos itens de forma centralizada*/
    justify-content: center; /*Alinha os itens de forma centralizada*/
    color: #181D27; /*Define uma cor de letra*/
    border-radius: 10px;

}

.serviços > div > div > ul > .itens:hover {

    background-color: rgb(227, 227, 227); /*Define uma cor branca para o fundo*/

}

.serviços > div > div > ul > .itens2 {

    display: flex; /*Define os blocos dos itens como flex*/
    width: 350px; /*Define um comprimento de 350px*/
    height: 68px; /*Define uma altura de 68px*/
    margin: 20px auto; /*Define uma margem superior e inferios de 20px e margem automática nas laterais*/
    background-color: white; /*Define uma cor branca para o fundo*/
    align-items: center; /*Alinhar os itens do bloco de forma centralizada*/
    text-align: center; /*Alinha os textos dentro dos itens de forma centralizada*/
    justify-content: center; /*Alinha os itens de forma centralizada*/
    color: #181D27; /*Define uma cor de letra*/
    border-radius: 10px;

}

.serviços > div > div > ul > .itens2:hover {

    background-color: rgb(227, 227, 227); /*Define uma cor branca para o fundo*/

}

.serviços > div > div .outros {

    display: flex; /*Define os blocos dos itens como flex*/
    width: 350px; /*Define um comprimento de 350px*/
    height: 68px; /*Define uma altura de 68px*/
    margin: 10px auto; /*Define uma margem superior e inferior de 10px e margem automática para as laterais*/
    align-items: center; /*Alinhar os itens do bloco de forma centralizada*/
    text-align: center;  /*Alinha os textos dentro dos itens de forma centralizada*/
    justify-content: center; /*Alinha os itens de forma centralizada*/
    color: #181D27; /*Define uma cor de letra*/

}

.serviços > div > a > button {

    display: block; /*Define um item da forma de block*/
    width: 386px; /*Define um comprimento de 386px para o botão*/
    height: 70px; /*Define uma altura de 70px para o botão*/
    justify-content: center; /*Alinha o item de forma centralizada*/
    background-color: #181D27; /*Define uma cor de fundo para o botão*/
    color: white; /*Define uma cor branca para o texto dentro do botão*/
    align-items: center; /*Alinha os itens de forma centralizada*/
    margin: 40px auto 100px auto; /* Define uma margem automática para as laterais e uma margem superior de 40px e inferior de 100px*/
    border-radius: 15px; /*Define um arredondamento de 15px para os cantos da forma*/
    font-size: 20px; /*Define uma altura de 20px para a fonte dentro do botão*/
    box-shadow: 0 9px #999; /*Define uma sombra branca para o botão*/
    border: none;

}

.serviços > div > a > button:hover {

    cursor: pointer;
    background-color: #1f2633;

}

.serviços > div > a > button:active {

    box-shadow: 0 5px #666;
    transform: translateY(4px);
    border: none;

}


/*FIM da área de serviços*/

/*Área do Feedback*/

.feedback {

    display: flex; /*Define um item da forma de flex*/
    flex-wrap: wrap; /*Quabra a linha para a parte debaixo*/
    max-width: 1240px; /*Define um tamanho máximo de 1240px*/
    margin: 0 auto; /*Margem 0 para superior e inferior, nas laterais fora definido margem automática*/
    height: 740px; /*Define uma altura de 740px*/
    align-items: center; /*Alinha os itens de forma centralizada*/
    justify-content: center; /*Centraliza os itens*/

}

.feedback > div {

    display: flex; /*Alinha a div para ficar como flex*/
    flex: 1 1 350px;
    justify-content: center;
    align-items: center;

}

.feedback > div > .feed {

    display: flex;
    flex-wrap: wrap;


}

.feedback > div > .item {

    display: block;
    border: 1px solid rgb(216, 216, 216);
    width: 280px;
    height: 458px;
    justify-content: center;
    margin: 50px;
    border-radius: 25px;
    box-shadow: 0px 10px 20px gray;

}

.feedback > div > div > .header_feed {

    display: flex;
    flex-wrap: wrap;
    height: 158px;
    width: auto;
    align-items: center;

}

.feedback > div > div > .header_feed > .perfil {

    display: block;
    border: 1px solid white;
    background-color: #D0DB97;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    margin-left: 20px;
    margin-top: 10px;
    padding: 5px;

}

.feedback > div > div > .header_feed > .perfil > p {

    display: block  ;
    color: white;
    text-align: center;
    padding-top: 7px;
    font-size: 32px;
}

.feedback > div > div > .header_feed > .perfil_texto {

    display: block;
    flex-wrap: wrap;
    margin-left: 10px;
    margin-top: 10px;

}

/*

.feedback > div > div > .header_feed > .titulo_feedback {

    display: flex;
    flex-wrap: wrap;
    border: 1px solid black;
    height: 25px;
    width: 120px;
    margin: 5px;

}


.feedback > div > div > .header_feed > .dados_feedback {

    display: flex;
    flex-wrap: wrap;
    height: 25px;
    width: 120px; 
    margin-left: 85px;
    margin-top: 0;


}
*/


.feedback > div > div > .header_feed > .retorno {

    display: flex; /*Alinha o display de retorno do comentário como flex para ser um bloco interiço*/
    width: 100%; /*Defino esse comprimento como automático*/
    margin: auto 20px; /*Defino uma margem superior e inferior automática e uma lateral fixa de 20px*/

}


.feedback > div > div > .header_feed > .retorno > .avaliacao {

    display: flex; /*Defino como as estrelas das avaliações como blocos ajustáveis*/
    flex-wrap: wrap; /*Quero na linha debaixo de for preciso*/
    justify-content: center; /*Alinho de forma centralizada*/
    align-items: center;
    
}

.feedback > div > div > .header_feed > .retorno > p {

    display: flex;
    flex-wrap: wrap;
    margin-left: 10px;
    justify-content: center;
    align-items: center;
}

.feedback > div > div > .corpo_feed {

    display: flex;
    flex-wrap: wrap;
    height: 200px;
    width: auto;
    align-items: center;

}

.feedback > div > div > .corpo_feed > .desc_corpo_feed {

    display: flex;
    flex-wrap: wrap;
    margin: 10px 30px;

}

.contato {

    display: flex;
    flex-wrap: wrap;
    max-width: 1300px;
    margin: 0 auto;
    height: 790px;
    width: 1300px;
    justify-content: space-between;

}

.contato > .titulo_contato  {

    display: flex;
    width: 100%;
    /*margin: 30px;*/
    height: 100px;
    justify-content: center;
    padding-top: 30px;

}

.contato > ul {

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

}

.contato > ul > li {

    display: flex;
    justify-content: space-between;
    width: 650px;
    height: 450px;
    z-index: 4;

}


.contato > ul > li > .numero  {

    display: flex;
    flex-wrap: wrap;
    background-color: #254D32;
    align-items: center;
    justify-content: center;
    width: 650px;
}


.contato > ul > li > .numero > .titulo_contato  {

    display: block;
    width: 610px;
    padding: auto;
    margin: auto;
    color: white;
    font-size: 30px;
    padding-left: 15px;
    text-align: center;

}

.contato > ul > li > .numero > .corpo_contato  {

    display: flex;
    color: white;
    margin: auto auto;
    align-items: center;
    margin-top: 0;
    margin-left: 70px;


}
.contato > ul > li > .numero > .corpo_contato > img {

    width: 60px;
    height: 60px;
    justify-content: center;
    padding: auto;
    margin: auto;

}

.contato > ul > li > .numero > .corpo_contato > p {

    font-size: 38px;
    justify-content: center;
    padding: auto;
    margin: auto;
    margin-left: 15PX;

}

.contato > ul > li > .instagram > .titulo_contato  {

    display: flex;
    width: 610px;
    margin: auto;
    color: #181D27;
    font-size: 30px;
    padding-left: 70px;
    text-align: center;

}

.contato > ul > li > .instagram  {

    display: flex;
    flex-wrap: wrap;
    background-color: #D0DB97;
    align-items: center;
    justify-content: center;
    width: 650px;

}

.contato > ul > li > .instagram > .corpo_contato  {

    display: flex;
    color: #181D27;
    margin: auto auto;
    align-items: center;
    margin-top: 0;
    margin-left: 70px;


}
.contato > ul > li > .instagram > .corpo_contato > img {

    width: 60px;
    height: 60px;
    justify-content: center;
    padding: auto;
    margin: auto;

}

.contato > ul > li > .instagram > .corpo_contato > p {

    font-size: 38px;
    justify-content: center;
    padding: auto;
    margin: auto;
    margin-left: 15PX;

}

footer {

    display: flex; /*Define o bloco que será construído em flex*/
    flex-wrap: wrap; /*Quebra o bloco tipo flex para a tela debaixo*/
    background-image: linear-gradient(180deg, white, #D0DB97); /*Define um background gradiente*/
}

footer > .blur {

    margin: 0 auto;
    padding: 0;
    width: 3000px;
    height: 500px;
    background-color: white;
    filter: blur(70px);
    position: relative;
    top: -150px;
    left: 0;
    border-radius: 100%;
    border: 1px solid red;
    z-index: 3;

}

footer > div {


    display: flex;
    max-width: 100%;
    flex-wrap: wrap;

}

footer > div > .arrumadinho {


    display: flex;
    margin: 0 auto;
    width: 100%;
    justify-content: space-between ;
    z-index: 5;

}

footer > div > .arrumadinho > .image_footer {

    margin: 0 150px;

}

footer > div > .arrumadinho > .image_footer > img {

    width: auto;
    height: 70px;

}

footer > div > .arrumadinho > .menus-footer {

    display: flex;
    font-size: 24px;
    height: 250px;
    margin-right: 60px;

}

footer > div > .arrumadinho > .menus-footer > .menuzinho {

    margin: 15px;

}

footer > div > .arrumadinho > .menus-footer > .redes-sociais-footer {

    margin: 15px;
    display: flex;
    width: auto;
    justify-content: space-between;

}

footer > div > .arrumadinho > .menus-footer > .redes-sociais-footer > ul > li > img {

    display: flex;
    width: 30px;
    margin: 0;
    padding: 0;
    padding-top: 5px;

}

footer > div > .arrumadinho > .menus-footer > .redes-sociais-footer > ul > li > a {

    display: flex;
    padding-left: 10px;

}

footer > div > .arrumadinho > .menus-footer > .redes-sociais-footer > ul > li {

    display: flex;
    align-items: center;
    margin: 20px;

}

footer > div > .arrumadinho > .menus-footer > .redes-sociais-footer > ul > li > .titulo-footer {

    margin-bottom: 30px;
    padding: 0;
    color: #181D27;

}

footer > div > .arrumadinho > .menus-footer > .menuzinho > ul > li {

    margin: 20px;

}

footer > div > .arrumadinho > .menus-footer > .menuzinho > ul > li > .titulo-footer {

    margin-bottom: 30px;
    padding: 0;
    color: #181D27;

}

footer > div > .arrumadinho > .menus-footer > .contato-footer > ul > li > .titulo-footer {

    margin-bottom: 30px;
    padding: 0;
    color: #181D27;

}

footer > div > .arrumadinho > .menus-footer > .contato-footer {

    margin: 15px;

}

footer > div > .arrumadinho > .menus-footer > .contato-footer > ul > li {

    margin: 20px;

}

footer > div > .direitos-autorizar {

    display: flex;
    width: 1440px;
    height: 100px;
    align-items: center;
    justify-content: center;
    margin: 0 auto;

}

/*Responsividade do site mobile*/


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

    header.header {

        padding: 0;
        margin: 0;
        justify-content: center;

    }
    
    header > nav {

        display: none;

    }

    header > a > #logo{

        display: flex;
        width: auto;
        height: 30px;
 

    }


    section.hero {

        display: flex;
        flex-direction: column-reverse;

        }

    .hero > div {

        width: 100vw; /*Define que a sua imagem ficará no máximo em 100%, tamanho total da tela*/
        margin: 0;
        padding-left: 0;
           
    }

    .hero > div > img {

        width: 100vw; /*Define que a sua imagem ficará no máximo em 100%, tamanho total da tela*/
        padding: 0;
        margin: 0;
        margin-top: 60px;

           
    }

    .hero > .title {

        width: 100vw; /*Comprimento automático para o tamanho do texto*/
        height: auto; /*Altura automático para o tamanho do texto*/

    
    }

    .hero > .title > h1 {

        flex-wrap: wrap;
        padding: 40px 0;
        width: 100vw; /*Comprimento automático para o tamanho do texto*/
        height: auto; /*Altura automático para o tamanho do texto*/
        text-align: center;
    
    }

    .hero > .title > .p {
    
        font-size: 18px; /*Tamanho de 24px nas fontes*/
        color: #181D27;
        justify-content: center;
        margin: 0 20px;
        text-align: center;
        
    }
    
    /*Botão CTA da página hero*/
    
    .hero > .title > a > .cta {
    
        width: 80vw;
        margin: 0px 10vw;
        margin-top: 40px;

    }

    /*hero FIM*/
    /*sobre*/

    section.sobre {

        display: flex;
        flex-direction: column-reverse;
        margin: 0;
        padding: 0;
        width: 100vw;
        height: auto;

        }

    .sobre > div {

        width: 90vw;
        flex: 1 1 350px; /*Verificar qual função é essa*/
        margin: 0 auto;
        
    }

    .sobre > .texto > h1 {
        
            font-size: 48px; /*Define um tamanho de fonte para o h1 dentro sw .sobre . texto*/
            width: 100vw;
            text-align: center;
            justify-content: center;
            padding: 0;
            margin: 30px auto;
            margin-top: 100px;

    }
        
    .sobre > div > img {
        
            width: 80vw; /*Define que a sua imagem ficará no máximo em 100%, tamanho total da tela*/
            display: flex;
            padding: 0;
            margin: 70px auto;
    }
    
    /*sobre FIM*/
    /*serviços*/

    .serviços {

        width: 100vw;
        height: 1400px;
        
    }
    
    .serviços > div {
    
        display: flex;
        flex-direction: column;
        width: 100vw;
        align-items: center; /*Alinha os itens centralizados*/
        margin: 0;
    
    }

    section.serviços > div > .txtservico {

        font-size: 40px;
        width: 80vw;
        margin: 0;
        padding: 0;
    }

    
    .serviços > div > .tabelinha {
    
        width: 80vw;
        margin: 0;
        padding: 0px;
        justify-content: center;

    }

    .serviços > div > a > button {
    
        width: 80vw;
        margin: 10px 0;
        padding: 0px;
        justify-content: center;

    }
  
  
    .serviços > div > div > ul > .itens2 {

        margin-top: 0;
    
    }

    /*serviços FIM*/
    /*feedback*/

    .feedback {

        width: 100vw; /*Define um tamanho máximo de 1240px*/
        height: auto;
        
    
    }

    .feedback > .feed {

        display: flex;
        flex-direction: column;
        margin-top: 50px;
        width: 100vw;
 
    }
    
    /*feedback FIM*/
    /*contato*/
    
    .contato {

        width: 100vw;
        height: 1000px;

    }
    
    .contato > .titulo_contato  {
    
        margin: 50px 0;
    
    }

    .contato > ul > li {

        display: flex;
        justify-content: space-between;
        width: 100vw;
        height: 100vw;
    
    }

    .contato > ul > li > .numero > .titulo_contato  {

        font-size: 28px;
        padding-left: 0;
        text-align: center;
        width: 90vw;
    
    }
    
    .contato > ul > li > .numero > .corpo_contato  {
    
        margin: 0 auto;
        flex-direction: column;
        margin: 10px  
    
    }

    .contato > ul > li > .numero > .corpo_contato > img  {

        margin: 30px;

    
    
    }

    .contato > ul > li > .numero > .corpo_contato > p {
    

        font-size: 24px;
        padding: 0;
        width: 60vw;
        margin: 0 auto;
        text-align: center;
    
    }

    .contato > ul > li > .instagram  {
    
        width: 100vw;
        margin: 0;
        padding: 0;
    
    }
    
    .contato > ul > li > .instagram > .titulo_contato > h2 {
    
        font-size: 28px;
        align-items: center;
        padding: 0;
        margin: 0;
        justify-content: center;
        width: 100vw;

    
    }

    .contato > ul > li > .instagram > .titulo_contato {
    
        padding-left: 0;
        width: 90vw;
    
    }
    
    
    .contato > ul > li > .instagram > .corpo_contato  {

        flex-direction: column;
        margin: 0 5px;
    
    
    }

    .contato > ul > li > .instagram > .corpo_contato > img  {

        margin: 30px;

    
    
    }
    
    .contato > ul > li > .instagram > .corpo_contato > p {
    
        font-size: 24px;
        padding: 0;
        width: 90vw;
        text-align: center;
    
    }

    .contato > ul > li > .instagram > .titulo_contato > h2 > strong {
    
        font-size: 42px;
    
    }

    /*contato FIM*/


    footer {

        width: 100vw;

    }

    footer > div > .arrumadinho > .image_footer > img {

        width: auto;
        height: 50px;
        margin-top: 100px;
    
    }

    footer > div > .arrumadinho > .image_footer{

        margin: 0 auto;
    
    }

    footer > div > .arrumadinho > .menus-footer {

        display: none;
    
    }
    
    footer > .blur {

        display: none;
    
    }

    footer > div > .direitos-autorizar {

        width: 100vw;
        text-align: center;
        margin: 0;
        padding: 0;

    }

    footer > div > .direitos-autorizar > p {

        font-size: 16px;

    }
}


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

    header.header {

        padding: 0;
        margin: 0;
        justify-content: center;

    }
    
    header > nav {

        display: none;

    }

    header > a > #logo{

        display: flex;
        width: auto;
        height: 30px;
 

    }


    section.hero {

        display: flex;
        flex-direction: column-reverse;

        }

    .hero > div {

        width: 100vw; /*Define que a sua imagem ficará no máximo em 100%, tamanho total da tela*/
        margin: 0;
        padding-left: 0;
           
    }

    .hero > div > img {

        width: 100vw; /*Define que a sua imagem ficará no máximo em 100%, tamanho total da tela*/
        padding: 0;
        margin: 0;
        margin-top: 60px;

           
    }

    .hero > .title {

        width: 100vw; /*Comprimento automático para o tamanho do texto*/
        height: auto; /*Altura automático para o tamanho do texto*/

    
    }

    .hero > .title > h1 {

        flex-wrap: wrap;
        padding: 40px 0;
        width: 100vw; /*Comprimento automático para o tamanho do texto*/
        height: auto; /*Altura automático para o tamanho do texto*/
        text-align: center;
    
    }

    .hero > .title > .p {
    
        font-size: 18px; /*Tamanho de 24px nas fontes*/
        color: #181D27;
        justify-content: center;
        margin: 0 20px;
        text-align: center;
        
    }
    
    /*Botão CTA da página hero*/
    
    .hero > .title > a > .cta {
    
        width: 80vw;
        margin: 0px 10vw;
        margin-top: 40px;

    }

    /*hero FIM*/
    /*sobre*/

    section.sobre {

        display: flex;
        flex-direction: column-reverse;
        margin: 0;
        padding: 0;
        width: 100vw;
        height: auto;

        }

    .sobre > div {

        width: 90vw;
        flex: 1 1 350px; /*Verificar qual função é essa*/
        margin: 0 auto;
        
    }

    .sobre > .texto > h1 {
        
            font-size: 48px; /*Define um tamanho de fonte para o h1 dentro sw .sobre . texto*/
            width: 100vw;
            text-align: center;
            justify-content: center;
            padding: 0;
            margin: 30px auto;
            margin-top: 100px;

    }
        
    .sobre > div > img {
        
            width: 80vw; /*Define que a sua imagem ficará no máximo em 100%, tamanho total da tela*/
            display: flex;
            padding: 0;
            margin: 70px auto;
    }
    
    /*sobre FIM*/
    /*serviços*/

    .serviços {

        width: 100vw;
        
    }
    
    .serviços > div {
    
        display: flex;
        flex-direction: column;
        width: 100vw;
        align-items: center; /*Alinha os itens centralizados*/
        margin: 0;
    
    }

    section.serviços > div > .txtservico {

        font-size: 40px;
        width: 80vw;
        margin: 0;
        padding: 0;
    }

    
    .serviços > div > .tabelinha {
    
        width: 90vw;
        margin: 0;
        padding: 0px;

    }


    /*serviços FIM*/
    /*feedback*/

    .feedback {

        width: 100vw; /*Define um tamanho máximo de 1240px*/
        height: auto;
        
    
    }

    .feedback > .feed {

        display: flex;
        flex-direction: column;
        margin-top: 50px;
 
    }
    
    /*feedback FIM*/
    /*contato*/
    
    .contato {

        width: 100vw;
        height: 800px;

    }
    
    .contato > .titulo_contato  {
    
        margin: 50px 0;
    
    }
    
    section.contato > ul{

        height: 700px;
    
    }
    .contato > ul > li {

        display: flex;
        width: 100vw;
        height: 350px;
    
    }

    .contato > ul > li > .numero {

        width: 100vw;
        margin: 0;
        padding: 0;
        height: 350px;
  
    }

    .contato > ul > li > .numero > .titulo_contato  {

        font-size: 28px;
        padding-left: 0;
        text-align: center;
        width: 90vw;
    
    }
    
    .contato > ul > li > .numero > .corpo_contato  {
    
        margin: 0 auto;
        flex-direction: column;
        margin: 10px  
    
    }

    .contato > ul > li > .numero > .corpo_contato > img  {

        margin: 30px;

    
    
    }

    .contato > ul > li > .numero > .corpo_contato > p {
    

        font-size: 24px;
        padding: 0;
        width: 60vw;
        margin: 0 auto;
        text-align: center;
    
    }

    .contato > ul > li > .instagram  {
    
        width: 100vw;
        margin: 0;
        padding: 0;
        height: 350px;
    
    }
    
    .contato > ul > li > .instagram > .titulo_contato > h2 {
    
        font-size: 28px;
        align-items: center;
        width: 100vw;
    
    }

    .contato > ul > li > .instagram > .titulo_contato {
    
        padding-left: 0;
    
    }
    
    
    .contato > ul > li > .instagram > .corpo_contato  {

        flex-direction: column;
        margin: 0 5px;
    
    
    }

    .contato > ul > li > .instagram > .corpo_contato > img  {

        margin: 30px;

    
    
    }
    
    .contato > ul > li > .instagram > .corpo_contato > p {
    
        font-size: 24px;
        padding: 0;
        width: 90vw;
        text-align: center;
    
    }

    .contato > ul > li > .instagram > .titulo_contato > h2 > strong {
    
        font-size: 42px;
    
    }

    /*contato FIM*/


    footer {

        width: 100vw;
        height: auto;

    }

    footer > div > .arrumadinho {

        display: flex;
        height: auto;

    }

    footer > div > .arrumadinho > .image_footer > img {

        width: auto;
        height: 50px;
        margin-top: 100px;
    
    }

    footer > div > .arrumadinho > .image_footer{

        margin: 0 auto;
    
    }

    footer > div > .arrumadinho > .menus-footer {

        display: none;
    
    }
    

    footer > div > .direitos-autorizar {

        width: 100vw;
        text-align: center;
        margin: 0;
        padding: 0;

    }

    footer > div > .direitos-autorizar > p {

        font-size: 16px;

    }

}