/*Aqui iniciamos a estrtutura*/

*{
    margin: 0;
    border: 0;
    padding: 0;
    text-align: center;
    
    
}

html{
    font-family: arial;
    font-size: 62.5%;
    
}

body{
    background-image: url('img/engrenagens.jpeg');
}

header{
    
    color: #fff;
    font-size: 1.8rem;
    padding: 1rem;
    position: fixed;
    
    z-index: 1;
    width: 90%;
   
}

@media(min-width:300px) and ( max-width: 820px){
    header{
    color: #fff;
    font-size: 1rem;
    padding: 1rem;
    position: fixed;
    width: 100%;
    z-index: 1;
    text-align: center;
}
}


footer{
    background: linear-gradient(to right, #0000008e, #0000008e, #0000008e);
    color: #fff;
    font-size: 2rem;
    padding: 1rem;
    text-align: center;
    text-shadow: 1px 1px 1px #000;
}

@media
(min-width: 300px) and (max-width: 600px){
    .nocell{
        display:none;
    }
}

@media
(min-width: 300px) and (max-width: 600px){
    #logo-topo{
        display:inline;
        padding: 0px;
        padding-right: 100px;
    }
}


.conteudo{
    text-align: left;
    font-size: 1.8rem;
    
    padding: 1.5rem;
    margin: 0 auto;
    max-width: 95%;
    padding-top: 3rem;

}

.conteudo-corpo{
    text-align: justify;
    font-size: 2rem;
    padding: 11rem;
    padding: 3rem;
    margin: 0 auto;
    max-width: 100%;
    
    padding-top: 8rem;

}
.conteudo-corpo2{
    text-align: justify;
    font-size: 2rem;
    margin: 0 auto;
    max-width: 100%;
    padding-top: 0rem;  
    padding-top: 25rem;
}

@media
(min-width: 300px) and (max-width: 820px){
    .conteudo-corpo{
        
        font-size: 1.6rem;
        text-align: center;
        max-width: 100%;
        padding-top: 1rem; 
        width: 100%;
      
        
    }
}
@media
(min-width: 300px) and (max-width: 820px){
    .conteudo-corpo2{
        text-align: center;
        font-size: 1.6rem;
        padding: 3rem;
        margin: 0 auto;
        max-width: 100%;
        padding-top: 1rem; 
        width: 100%;
      
        
    }
}
    
.conteiner-topo{
    text-align: center;
    font-size: 1.6rem;
    
    padding: 1.5rem;
    margin: 0 auto;
    margin-top: 3rem;
    max-width: 90%;
    padding-top: 3rem;
    border-radius: 20px;
}



@media(min-width:300px) and ( max-width: 820px){
    .conteiner-topo{
        text-align: center;
        font-size: 1.6rem;
        padding: 1.5rem;
        margin: 0 auto;
        margin-top: 1rem;
        max-width: 85%;
        padding-top: 3rem;
        border-radius: 20px;
    }}

    @media(min-width:300px) and ( max-width: 820px){
        .conteiner-topo 
        .a{
            text-align: center;
            font-size: 1.6rem;

            padding: 1.5rem;
            margin: 0 auto;
            margin-top: 1rem;
            max-width: 80%;
            padding-top: 3rem;
            border-radius: 20px;
        }}

/*Aqui iniciamos as fontes*/ 
h1.endereco{

padding-top: 0;

}


h1{
    font-size: 3rem;
    padding-top: 35%;
}

h2#titulo-topo{
    font-size: 3rem;
    
}

h2{
    font-size: 5rem;
    padding-bottom: 3rem;
    text-align: center;
    font-weight: bold;
    color: #fff;
}

#text-avaliacoes{
    text-align: center;
    font-size: 3rem;
    padding-top: 70px;
    padding-bottom: 50px;
}
h2.titulo-corpo{
    font-size: 2.5rem;
    color: #010188;
    
}

h3{
    font-size: 3rem;
}

@media(min-width:300px) and ( max-width: 820px){
    h3{
        font-size: 2.1rem;
    }
}


h4{
    font-size: 2.5rem;
    color: #04c004;
    font-weight: bold;
    text-shadow: 1px 1px 2px #ffffff;
}


.aga4{
    font-size: 2rem;
    color: #ffffff;
    font-weight: bold;
    text-shadow: 1px 1px 2px #ff0000;
}

h5{
    font-size: 2.5rem;
    color: #ff0000;
    font-weight: bold;
    text-shadow: 1px 1px 1px #ff0000;
}


h6{
    font-size: 8px;
}

/*Controle de imagens*/

.tecnologias{
    color: #000;
    text-shadow: none;
}


.imagens-site{
    border-radius: 20px;
    width: 70%; /* Para garantir que as imagens preencham a largura da coluna */
    height: auto; /* Para manter a proporção */

}

@media
(min-width: 300px) and (max-width: 820px){
    .imagens-site{
        border-radius: 20px;
         width: 50%;
         height: 30%;
     
    }}

.imagens-site:hover{
animation: pulse 1s infinite;

}

#corpo{
width: 100%;
height: 100%;

}

.avaliacoes{
    width: 35%;
    height: 20%;
}


@media
(min-width: 300px) and (max-width: 820px){
    .imagens-site{
        border-radius: 7px ;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 90%;
        height: 70%;
        max-width: 100%;
    }    
}

@media
(min-width: 300px) and (max-width: 820px){
    #corpo{
        display:none;
    }
}

.imagens-corpo{
    width: 100%;
    height: 100%;
}

@media
(min-width: 821px){
.logo-cel{
    width: 80%;
    height: 70%;
    padding: 5px;
    padding-left: 35px;
    padding-right: 35px;
    display: none;
}}

@media
(min-width: 300px) and (max-width: 820px){
.logo-cel{
    width: 80%;
    height: 70%;
    padding: 5px;
    padding-left: 35px;
    padding-right: 35px;
}}

#logo-topo{
    width: 10%;
    height: 6%;
    margin-right: 80%;
}

@media
(min-width: 300px) and (max-width: 820px){
    #logo-topo{
    display:none;
    width: 40%;
    height: 20%;
    margin-left: 16rem;
    margin: 0 auto;
}}



#whats:hover{
        right: 0;
        bottom: 0;
        position: fixed;
        z-index: 1;
        margin-right: 20px;
        transition: all 3s;
    }


    @media
    (min-width: 300px) and (max-width: 820px){
        #whats{
            right: 0;
            bottom: 0;
            position: fixed;
            z-index: 1;
            margin-right: 20px;
           
        }
    }

    
    #whats{
        right: 0;
        bottom: 0;
        position: fixed;
        z-index: 1;
        margin-right: 20px;
       
    }
    

    .sem_borda:hover{
        border: none;
    }

@media
    (min-width: 300px) and (max-width: 820px){
        .img-whats{
        right: 40px;
        bottom: 25px;
        position: fixed;
        z-index: 1;
        width: 18%;
        border: none;
        }
    }

    /*Controles de GRIDS*/


.grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) ;
    grid-gap: 30px;
    max-width: 1250px;
    margin: 30px auto;
}


@media
    (min-width: 300px) and (max-width: 820px){
.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Dividir o conteúdo em duas colunas */
    grid-gap: 9px; /* Espaçamento entre os elementos */
}}

.grid div{
    text-align: center;
    padding: 0px;
}

/*Aqui inicia a configurações de grids para o topo*/

#grid-conteudo-corpo{   
    text-align: center;
    border-radius: 20px;
    margin-bottom: 5%;
}
@media(min-width: 300px) and (max-width: 820px){
#grid-conteudo-corpo{   
    text-align: center;
    width: 95%;
    margin-bottom: 15px;
}}

.grid-corpo{
    display: grid;
    grid-template-columns: 480px 1fr;
    grid-gap: 50px;
    max-width: 1100px;
    margin: 0 auto;
    color: #fff;
   
}
@media(min-width: 300px) and (max-width: 820px){
    .grid-corpo img {
        transform: scale(0.8); /* Reduz o tamanho das imagens em 20% */
        
    }}


    
@media(min-width: 300px) and (max-width: 820px){
    .grid-corpo{
        display: grid;
        margin: 0 auto;
        color: #fff;
        text-shadow: 1px 1px 1px #000;
        padding-left: 8rem;
    }}

    .grid-corpo2{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) ;
        grid-gap: 200px;
        max-width: 1250px;
        margin: 30px auto;
        
        
    }

    @media(min-width: 300px) and (max-width: 820px){
        .grid-corpo2{
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 2fr));
            grid-gap: 1px;
            max-width: 1200px;
            margin: 0 auto;
            color: #fff;
            text-shadow: 1px 1px 1px #000;
       
        }}    




.grid div #corpo{
    text-align: center;
    padding: 1px;
    padding-bottom: 5px;
}

/*Aqui incia a formatação de formulario*/

#formulario{
    color: #fff;
}

input{
    border: solid black;
    padding: 5px;
    border-radius: 20px;
    font-size: 1.8rem;
}

#mensagem{
    border: solid black;
    padding: 5px;
    border-radius: 5px 30px 5px 30px;
    font-size: 1.8rem;
}


/*Aqui inicia as configurações de botões*/
#btn-limpar{
    background-color: #ff0000;
    color: #fff;
    text-align: center;
    padding: 5px;
    font-weight: bold;
}
#btn-enviar{
    background-color: #008000;
    color: #fff;
    text-align: center;
    padding: 5px;
    font-weight: bold;
}

.botao-acao{
    background-color: #03001a;
    border: solid 2px #ffffff;
    padding: 1rem;
    border-radius: 20px;
    text-align: center;
    padding-left: 10rem;
    padding-right: 10rem;
    text-shadow: 1px 1px 1px #000;
    font-size: 2rem;
    max-width: 100%;
}



.botao-acao:hover{
    background-color: #06012e;
    border: solid 2px #ffffff;
    padding: 1rem;
    border-radius: 20px;
    text-align: center;
    padding-left: 10rem;
    padding-right: 10rem;
    text-shadow: 2px 1px 5px #000;
    transition: 0.3s;  
    
}

@media
(min-width: 300px) and (max-width: 820px){
    .botao-acao{
        padding: 15px;
        margin: 0 auto;
    }
}
@media
(min-width: 300px) and (max-width: 820px){
    .botao-acao:hover{
        padding: 15px;
        margin: 0 auto;
    }
}

/*configurações de navegações*/
nav{
    text-align: right;
    font-size: 1.6rem;
    padding-bottom: 5px;
    text-shadow: #0026ff;
    margin: 30px;
    

    
    
}

@media
(min-width: 300px) and (max-width: 820px){
    nav{
        text-align: center;
        font-size: 1.6rem;
        padding-bottom: 10px;
        margin: 2px;
        width: 94%;
        display: flex;
        margin: 0 auto;
        margin-top: 0;
    }}

a{
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
    border: #000;
    font-size: 2rem;
    padding: 5px;
}

.btn-topo {
    display: inline-block;
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
    text-shadow: 2px 2px 2px #640b08;
    font-size: 2rem; /* Reduzindo o tamanho da fonte para torná-lo mais proporcional */
    padding: 20px;
    background-color: #000;
    border-radius: 20px; /* Arredondando as bordas */
    box-shadow: 3px 3px 5px #fffefe; /* Adicionando sombra */
    transition: all 1.3s ease; /* Adicionando uma transição suave */
}

.btn-topo:hover {
    color: #e5ff00;
    text-shadow: 2px 2px 2px #000000;
    font-size: 2.3rem; 
    border-radius: 8px;
    padding: 25px; /* Ajustando o padding ao passar o mouse */
    background-color: #0076fd;
    box-shadow: 4px 4px 6px #ffffff; /* Ajustando a sombra ao passar o mouse */
    transition: all 0.7s ease; /* Adicionando uma transição suave */
}

@media
(min-width: 300px) and (max-width: 820px){
.btn-topo{
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
    text-shadow: 2px 2px 2px #0076fd;
    font-size: 2.3rem;
    padding: 7px;
    max-width: 95%;
    padding-right: 7px;
    background-color: #000;
    
}}

@media
(min-width: 300px) and (max-width: 820px){
.btn-topo:hover{
    text-decoration: none;
    color: #e5ff00;
    font-weight: bold;
    text-shadow: 2px 2px 2px #640b08;
    font-size: 2.3rem;
    padding: 7px;
    max-width: 95%;
    padding-right: 7px;
    background-color: #0076fd;
    
}}

a:hover{
 
    border-top: solid 3px #ffee00;
    text-shadow: 2px 2px 2px #000;
    padding: 30px;
    border-radius: 0px;
}

.sobre{
    width: 75%;
    text-align: j;
    border-radius: 20px;
    border: solid 3px #626264;
    margin: 0 auto;
    padding-top: 30px;
    padding: 30px;
    background: linear-gradient(to bottom, #fff, #fff, #00ff00);  
    color: #020101;
    
}


.sobrecar{
    width: 75%;
    text-align: justify;
    border-radius: 20px;
    border: solid 3px #626264;
    margin: 0 auto;
    padding-top: 30px;
    padding: 30px;
    color: #020101;
    font-size: 2rem;
    padding-bottom: 50px;
    margin-bottom: 9%;
}
.sobrecar:hover{
    
    border: solid 4px #fff;
  
}

@media(min-width: 300px) and (max-width: 820px){
    .sobrecar{
        width: 70%;
        border-radius: 20px;
        border: solid 3px #626264;
        margin: 0 auto;
        padding-top: 35px;
        padding: 30px;
        color: #020101;
        font-size: 2rem;
        padding-bottom: 50px;
        margin-bottom: 9%;
    }
    
}

.sobrecarvalores{
    width: 50%;
    text-align: justify;
    border-radius: 20px;
    border: solid 3px #626264;
    margin: 0 auto;
    padding-top: 30px;
    padding: 30px;
    color: #ffffff;
    font-size: 2rem;
    padding-bottom: 50px;
    margin-top: 3%;   
}

.sobrecarvalores:hover{
    border: solid 3px #e0c9c9;
}
@media(min-width: 300px) and (max-width: 820px){
.sobrecarvalores{
    width: 50%;
    text-align: justify;
    border-radius: 20px;
    border: solid 3px #9e9d9d;
    margin: 0 auto;
    padding-top: 30px;
    padding: 30px;
    color: #ffffff;
    font-size: 2rem;
    padding-bottom: 25px;
    margin-top: 3%;    
}   }

.sobrecarvalores h2{
   font-size: 3rem;

}

.sobrecar p {
    color: #fff;
    font-size: 3rem;
    text-align: justify;
}

@media(min-width: 819px) {
.just{
    text-align: justify;
    margin-left: 8%;
}}

.just{
    text-align: justify;
}
.sobre p{
    font-size: 1.4rem;
}

.prof{
    text-align: center;
    background-color: #000031;
    color: #fff;
    padding: 2rem;
    border-radius: 10px;
 
}

.professor{
    text-align: center;
    font-size: 10px;
    color: #fff;
    padding: 35rem;
    border-radius: 20px;
    text-shadow: 1px 1px 2px #000;
 
}



figcaption{
    margin-top: 10px;
    width: 80%;
    padding: 2rem;
    margin: 0 auto;
    border-radius: 20px;
    font-size: 1.5rem;
    color: #ffffff;
}

.servicoes{
    color: #ffffff;
    border: none;
    border-radius: 20px;
    font-size: 2.0rem;
    text-shadow: 2px 2px 2px #0026ff;
}

.servicoes:hover{
    color: #fbff00;
    border: none;
    border-radius: 20px;
    font-size: 2.0rem;
    text-shadow: 2px 2px 2px #0026ff;
}



.personalizacao{
    background-color: #ffff00;
    color: #000;
    text-align: center;
    padding: 1rem;
    font-size: 1.8rem;
    font-weight: bold;
    width: 60%;
    border-radius: 20px;
    margin: 0 auto;
    text-shadow: none;
}

.botao-acao-localizacao{
    background-color: #030022;
    border: solid 3.5px #aaaaaa;
    padding: 1rem;
    border-radius: 20px;
    text-align: center;
    padding-left: 10rem;
    padding-right: 10rem;
    text-shadow: 1px 1px 1px #000;
    font-size: 2rem;
    max-width: 70%;
}
.botao-acao-localizacao:hover{
    background-color: #06012e;
    border: solid 2px #ffffff;
    padding: 1rem;
    border-radius: 20px;
    text-align: center;
    padding-left: 10rem;
    padding-right: 10rem;
    text-shadow: 1px 1px 1px #000;
    font-size: 2rem;
    max-width: 70%;
}

@media(min-width: 300px) and (max-width: 820px){
    .botao-acao-localizacao{
        background-color: #030022;
        border: solid 3.5px #aaaaaa;
        padding: 1rem;
        border-radius: 20px;
        text-align: center;
        padding-left: 10rem;
        padding-right: 10rem;
        text-shadow: 1px 1px 1px #000;
        font-size: 2rem;
        max-width: 70%;
    }}
    
    @media(min-width: 300px) and (max-width: 820px){
        .botao-acao-localizacao:hover{
            background-color: #002a36;
            border: solid 3.5px #ffffff;

            padding: 1rem;
            border-radius: 20px;
            text-align: center;
            padding-left: 10rem;
            padding-right: 10rem;
            text-shadow: 1px 1px 1px #000;
            font-size: 2rem;
            max-width: 70%;
        }}

        .conteudo-corpo {
            display: flex;
            
            align-items: center;
            font-size: 2rem;
            width: 70%;
          
            
            
        }

        

        @media(min-width:300px) and ( max-width: 820px){
            .conteudo-corpo{
                width: 100%;
                max-width: 380px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 2rem;
                width: 70%;
                padding: 11px;
                margin: 5px;

            }}
            @media(min-width:300px) and ( max-width: 820px){
                .conteudo-corpo2{
                    width: 100%;
                    max-width: 380px;
                    padding: 5px;
    
                }}
        
        .grid-corpo {
            display: grid;
            grid-template-columns: 12fr 12fr; /* Divide o conteúdo em duas colunas */
            gap: 20px; /* Espaçamento entre os elementos */
        }
        
        .localizacao {
            padding-top: 30%;
            text-align: center;
        }
        
        .botao-acao-localizacao {
            display: inline;
            margin-top: 15px;
            margin-bottom: 0px;
        }


        .localizacao-imagem {
            width: 100%; 
            height: auto; 
            border: solid 3px #fff;
            border-radius: 20px;
           
        }

        .localizacao-imagem:hover {
            width: 110%; 
            height: auto; 
            border: solid 7px #fff;
        }
        a.localizacao-imagem:hover {
            text-decoration: none;
        }

        .ceo-carangas{
            border-radius: 200000px;
            width: 70%; /* Para garantir que as imagens preencham a largura da coluna */
            height: auto; 
            border: solid 5px #fff;
        }

        .carangas-localizacao{
            border-radius: 20px;
            width: 70%; /* Para garantir que as imagens preencham a largura da coluna */
            height: auto; 
            border: solid 7px #fff;
        }

        .ceo-carangas:hover { 
            animation: pulse 2s infinite; 
            border: solid 8px #fff;
        } 
        
       
    .figcap{
        
        background-color: #ffffff;
    }    
        

        .ceo{
        background: none;
        font-size: 1.6rem;
        padding: 1rem;
        margin: 0 auto;
        border-radius: 20px;
        font-size: 3rem;
        color: #fff;
        }

        .ceo-loca{
            background: none;
            font-size: 1.6rem;
            padding: 1rem;
            margin: 0 auto;
            border-radius: 20px;
            font-size: 3rem;
            color: #fff;
            margin-bottom: 35px;
            }

        @media(min-width: 300px) and (max-width: 820px){
            .ceo-carangas{
                width: 70%;
                height: 55%;
                border-radius: 10000px;
            }

        }

        #ceo-car{
            text-align: left;
            font-size: 1.8rem;
            padding: 1.5rem;
            margin: 0 auto;
            max-width: 95%;
            padding-top: 3rem;
        }
        @media(min-width: 300px) and (max-width: 820px){
            #ceo-car{
                margin-bottom: 50px;
                
                padding-left: 10px;
                max-width: 100%;
            }
            
        }
        
        @media(min-width: 300px) and (max-width: 820px){
        .botao-acao-localizacao{
            background-color: #030022;
            border: solid 3.5px #aaaaaa;
            padding: 1rem;
            border-radius: 20px;
            text-align: center;
            padding-left: 10rem;
            padding-right: 10rem;
            text-shadow: 1px 1px 1px #000;
            font-size: 1.4rem;
            max-width: 100%;
            margin-left: 5px;
            padding: 15px;
            margin: 0 auto;
            padding-top: 15px;
        }}

        .localizao-mais-btn{
            max-width: 65%;
        }

        @media(min-width: 300px) and (max-width: 820px){
        .localizao-mais-btn{
            max-width: 65%;
        }}

        @media
    (min-width: 300px) and (max-width: 820px){
    .botao-acao-localizacao{
        padding: 15px;
        margin: 0 auto;
        padding-top: 15px;
    }
}


        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        
        .localizacao-imagem:hover {
            animation: pulse 1s infinite; /* Aplica a animação pulse com duração de 1 segundo, repetindo infinitamente */
            width: 107%; 
            height: auto;
            border: solid 7px #fff; 
        }
        



.carangas-localizacao:hover {
    animation: pulse 1s infinite; 
    width: 80%; 
    height: auto; 
    border: solid 7px #0307ff; 
    transition: all 2s;
}
@media(min-width: 300px) and (max-width: 820px){
.carangas-localizacao:hover {
    animation: pulse 1s infinite; 
    width: 80%; 
    height: auto; 
    border: solid 7px #0307ff; 
}}