@charset "utf-8";




/* 1- ##### INICIO DE FORMATAÇÃO DA PÁGINA - HOME - ##########*/

html{

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f2f2f2;
    font-size: 16px;
 }

body{    
    width: 90%;
    max-width: 1500px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color:#FFFFFF;
} 

#barra_01 {width: 100%; margin-top:0.2em;background-color:rgb(0,48,73,0.8); border-radius: 5px;} /*A altura da Barra_01 é controlada pelas @media query*/


/* 1-A INICIO DA CONFIGURAÇÃO DOS ESTILOS QUE ESTÃO DENTRO DA TAG HEADER */


#header-cabecalho{

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    background-color: #ffffff;
}

#picture-cabecalho{  /* Contem as 2 imagens sobrepostas do logotipo e as 3 do BANER*/

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    height: auto;
}

/* 1-B INICIO do Contentor apenas das 2 imagens do logotipo */

.foto-contentor{
    
    position:relative;
    width: 100%;
    padding-top: 15%;
    margin-bottom: 0.8%;
    border-top: 2px solid #FFFFFF;
}

.foto-contentor img{
    position: absolute;
   top: 0;
   left: 0;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
 }
  .foto-contentor img:hover{opacity: 0;}

  /*FIM do Contentor apenas das 2 imagens do logotipo */
  
  
/*As 3 imagens do slider e do Baner têm os estilos em folha própria - slider.css*/


/* 1-C INICIO da barra e do menu de navegação */

#barra_02 {width: 100%; background-color: rgb(0,48,73,0.8);  border-bottom: 2px #FFF solid; border-radius: 5px; margin-top: 5px;
display: flex;
flex-direction: row;
align-items: center;}


.menunavega {padding-left: 1.2rem ;}
.menunavega ul li {display: inline; font-family:'Arial';}
.menunavega ul li a {color: #FFFFFF; text-decoration-line: none;border-radius: 5px;}
.menunavega ul li a:hover {background-color: #FFFFFF; color: #FF7F00;}

/*FIM da barra e do menu de navegação*/

/* FIM DE TODA A CONFIGURAÇÃO DOS ESTILOS QUE SE ENCONTRAM NO HEADER E QUE É COMUM A TODAS AS PÁGINAS______*/


/* INICIO DO CONTENTOR PRINCIPAL MAIN_______________________________________________*/

.maincontentor{
    
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color:#FFFFFF; /* Dei cor diferente branco ao main para ajudar a localizá-lo no HTML*/
    height: auto;
    width: 100%; /* o contentor MAIN ocupa 100% da largura do elemento pai, body*/
}

.seccao_01 {
    max-width: 70%;  /* Ocupa 70% do pai, main*/
    height: auto;
}     

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

}

.seccao_01 h1 {
    color: #7B5838;
    font-weight: bold;
    padding: 20px 0 0px 30px;
  
}

#contentor_01 .caixa_dos_paragrafos{
    width: 91%;
    height: auto;
    margin-left: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
    
    background-color:#FFFFFF;
   
}

#contentor_figure {
    width: 100%;
    height: auto;
    background-color: #FFFFFF;
}

.contentor-fotos{
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

#div-A, #div-B {
    position: relative;
    width: 300px;
    height: 227px;
}

#div-A img, #div-B img{

    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    transition: opacity 0.5s ease-in-out;
    box-sizing: border-box;
    padding: 5px;
    border: 1px solid #FF7F00;
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3);
}
#div-A img:last-child, #div-B img:last-child { opacity: 1;}
#div-A:hover img:last-child, #div-B:hover img:last-child { opacity: 0;}

#contentor_01 h2 {
     color: #000;
    font-weight: bold;
    padding: 0px 0px 0px 30px;
    margin-bottom: 30px;
}

/*INICIO ds estilos COLUNA LATERAL dentro do contentor PRINCIPAL*/

 aside {width: 30%; height: auto;} /* ocupa 30% do pai, main*/

#coluna_lateral {width: 100%;height: 100%; background-color:#FDF5E6;border: 1px solid hsl(16, 64%, 61%); border-radius: 5px;
display: flex;
flex-direction: column;
justify-content:flex-start;
align-items:center;
 }

#logo2_sapateiro{
    width: 95%;
    margin-top: 10px;
    margin-bottom: 20px;
}

#img-IA{
    width: 95%;
    margin-bottom: 20px;
    
}

#coluna_lateral h3 {
    font-size: 1.4em;
    font-weight: bold;
    color: hsl(19, 88%, 43%);
    margin-bottom: 15px;}

.texto_coluna_lateral{ font-size: 0.9em; padding: 5px 10px;font-family: Arial, Helvetica, sans-serif;text-align: justify}

#sapateiro_tania{
    padding: 5px;
    width: 85%;
    margin-top: 10px;}

.rodape_figura{ color: brown;
     padding-bottom: 15px;
     font-size: 12px;}

.remover_sublinhado{text-decoration: none;}

/*FIM dos estilos para a coluna lateral*/


/* FIM DOS ESTILOS CONTENTOR PRINCIPAL MAIN________________________________*/

/*----------------------------------------------------------------------------------*/

/*INICIO dos estilos para o rodapé final*/

#rodape {    
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    background-color:rgb(0,48,73,0.8); height: 6vh; width: 100%; border-radius: 5px;margin-bottom: 1px ; margin-top: 3px;border: 2px solid #A9A9A9;}

#redes_sociais {
    width: 50%;
    height: auto;
    
}

#lista_redes_sociais{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap:15px;
    width: 100%;
    height: auto;
    background-color: #FFFFFF;
    border-radius: 7px;
      
}

.img_redes_sociais_tamanho{
    width: 29px;
    height: auto;
    display: block;
    padding: 4px 0px;;
    
}

    #texto-rodape{
    font-size: 0.8rem;
    color: #000;
    margin-bottom: 10px;    
}
/*FIM dos estilos para o rodapé final da página INDEX.HTML*/




/*## PÁGINA SERVIÇOS - INICIO  dos estilos ################*/


#foto-cabecalho{
    width: 100%;
    height:auto;
}

#foto-cabecalho img{
    width: 100%;
    height:auto;
    display: block; /*para fazer o alinhamento da imagem na DIV e retirar a borda que pode aparecer no bottom da imagem, também se pode usar, vertical-align: bottom;*/
    border-radius: 5px;
}


/* A div-D e div-D, estão na div contentor "contentor-fotos" que está estilizado também para a pág. index.html, bem como a "contentor-figure"*/


#div-C img, #div-D img{

    width: 100%;
    height: auto;
    border-radius: 10px;
    transition: opacity 0.5s ease-in-out;
    box-sizing: border-box;
    padding: 5px;
    border: 1px solid #FF7F00;
    box-shadow: 2px 2px 15px rgba(0, 48,73, 0.6);

}

.lista-trabalhos{

    width: 91%;
    height: auto;
    margin-left: 30px;
    margin-top: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    background-color: rgba(69,139,116, 0.1);
}

.lista-trabalhos li{

    padding:0.5% 2% 0 2%;
}

/*## PÁGINA SERVIÇOS - FIM  dos estilos ################*/

/*--------------------------------------------------------------------------------*/

/*## PÁGINA CONTACTOS - INICIO  dos estilos ################*/


.contentor-email{

    display: flex;
    justify-content: center;
    width: 100%;
    height: auto;
}

.form-container{
    background-color:white ;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    width: 70%;
    height:auto;
    box-sizing: border-box;
}

.form-container h3{

    font-size:1.5rem;
    color: rgb(206,74,13);
    text-align: center;
    font-weight: 600;
 }

#h2-opiniao-conta{
    margin-top: 15px;
 }



label{
    font-weight: bold;
    display: block;
    margin-top: 10px;
    font-size: 0.98rem;
}

input{
    width: 100%;
    font-size: 0.95rem;
    padding: 5px;
    margin-top: 3px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

input[readonly] {
    background-color: #e9e9e9;
    cursor: not-allowed;
}

textarea{
    min-width: 100%;
    max-width: 100%;
    height: auto;
    margin-top: 3px;
    padding: 5px;
    font-size: 0.95rem;
    font-family: Arial, Helvetica, sans-serif;
}


#div-centra-botao{
    display: flex;
    justify-content: center;
    width: 100%;
}

button {
    
    margin-top: 15px;
    width: 50%;
    padding: 5px 10px;
    background-color:rgb(206,74,13);
    font-size: 1rem;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {

    color:rgb(206,74,13) ;
    background-color:rgb(255,255,255);
    border: 1px solid rgb(206,74,13);
    box-shadow: 0px 0px 10px rgba(206, 74, 13, 0.7);
}



/*## PÁGINA CONTACTOS - FIM  dos estilos ################*/

/*-------------------------------------------------------------------------------*/

/*## PÁGINA LOCALIZAÇÃO - INICIO  dos estilos ################*/

.google-container{

    width: 90%;
    height: 100%;
}

#contentor-tabela-horario{
    width: 90%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
}

table{
    display: block;
    margin-bottom: 5px;
}

th{
    color: #cb6614;
    font-weight: 700;
}

th, td{
    font-size: 0.8rem;
    padding: 2px;
}

#linha-laranja-01{

    border-top:1px solid #FF7F00;
}

#linha-laranja-02{
    border-bottom:1px solid #FF7F00;
}

/*## PÁGINA LOCALIZAÇÃO - FIM  dos estilos ################*/

/*-------------------------------------------------------------------------------*/

/*## PÁGINA ERRO - INICIO  dos estilos ################*/


#ups-erro{
   
    color:red;
    padding-left: 20px;
}

.tente-mais-tarde{
    
    width: 100%;
    margin-top: 30px;
    padding-left: 20px;
    padding-right: 10px;
    text-align: justify;
    box-sizing: border-box;
}  

#img-centra{

    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
}

#img-erro{

    width: 80%;
    height: auto;
    margin-top: 100px;
}

/*## PÁGINA ERRO - FIM  dos estilos ################*/

/*-------------------------------------------------------------------------------*/

/*## PÁGINA ENVIADO - INICIO  dos estilos ################*/

#h1-ups-enviado, #h4-ups-enviado{
   
    color:green;
    padding-left: 20px;
}

/*## PÁGINA ENVIADO - FIM  dos estilos ################*/

/*-------------------------------------------------------------------------------*/

/*## PÁGINA COMENTÁRIOS - INICIO  dos estilos ################*/

#contentor-lista-emails{
    width: 80%;
    height: auto;
    display: flex;
    flex-direction: column;
}

#contentor-lista-emails h1{

    font-size: 1.7rem;
    padding: 20px 0px;
    color: #7B5838;
    font-weight: 700;
}

#p-lista{

   margin-bottom: 10px;
   font-size: 0.9rem; 

}

.email-list {
    width: 100%;
    max-height: 100vh;
    overflow-y: scroll;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: hsl(35, 99%, 98%);
    box-sizing: border-box;
}

.email-item {
    border-bottom: 1px solid #FF7F00;
    padding: 10px;
}

.email-item:last-child {
    border-bottom: none;
}

.email-item h3 {
    margin: 0;
}

.email-item p {
    margin: 5px 0;
}

#p-comenta{
    color:  white;
    padding: 3px;
    background-color: rgb(0,48,73,0.8);
    border-radius: 5px;
}

/*## PÁGINA COMENTÁRIOS - FIM  dos estilos ################*/

/*___________________________________________________________________________________*/

/* #####    INICIO DAS @MEDIA QUERY - TÊM DE SE MANTER NO FINAL DA FOLHA ######*/

@media(max-width:600px) {

    /* styles para o header, escepto para o slider que tem página dedicada*/
    #barra_01, #barra_02{height: 3.5vh;}
    .menunavega ul li{font-size: 0.5rem;}
    .menunavega ul li a{padding: 0rem 0.2rem;}

    /* styles para main, corpo principal*/
    .seccao_01 h1{font-size: 0.7rem;padding: 20px 0 0px 15px}
    #contentor_01 .caixa_dos_paragrafos, .lista-trabalhos{font-size: 0.6rem;margin-left: 15px; margin-top: 10px;margin-bottom: 15px;}
    #contentor_01 h2{font-size:0.6rem;padding: 0px 0 0 15px;}
    #div-A, #div-B, #div-C, #div-D{width: 200px; height:170px}
    .contentor-fotos{gap:0px;}

            /*Corpo principal da pág. CONTACTOS*/
            .form-container{width: 80%;}
            .form-container h3{font-size: 0.95rem;}
            label{font-size: 0.75rem;}
            input, textarea{font-size: 0.58rem;}
            button{font-size: 0.8rem;}

            /*Corpo principal da pág. LOCALIZAÇÃO*/
            th, td{font-size: 0.6rem;}

            /*Corpo principal da pág. ERRO e ENVIADO*/
            #ups-erro, #h1-ups-enviado, #h4-ups-enviado{font-size: 0.7rem;}
            .tente-mais-tarde{font-size: 0.6rem;}

             /*Corpo principal da pág. COMENTÁRIOS*/
             #contentor-lista-emails h1{font-size: 0.8rem;}
             #p-lista{font-size: 0.6;}
             #contentor-lista-emails p, h3{font-size:0.6rem ;}

         
    /*styles para a barra lateral asaid*/
    #coluna_lateral h3{font-size: 0.8rem;margin-bottom: 0px;}
    .texto_coluna_lateral{font-size: 0.5rem;}
    .rodape_figura{font-size: 0.35rem;}
    #img-IA{margin-bottom: 5px;}

    /*styles para o rodapé*/
    #rodape{height: 4vh;}
    .img_redes_sociais_tamanho{width: 17px;height: auto;}
    #texto-rodape{font-size: 0.39rem;}
}


 @media(min-width:601px) and (max-width:767px ){

    /* styles para o header, escepto para o slider que tem página dedicada*/
    #barra_01, #barra_02{height: 30px;}
    .menunavega ul li{font-size: 0.8rem;}
    .menunavega ul li a{padding: 0rem 0.3rem;}

    /* styles para main, corpo principal*/
    .seccao_01 h1{font-size: 1.2rem;}
    #contentor_01 .caixa_dos_paragrafos, .lista-trabalhos{font-size: 0.82rem;}
    #contentor_01 h2{font-size:1rem}
    #div-A, #div-B, #div-C, #div-D {width: 250px; height:205px}
    .contentor-fotos{gap:0px;}

            /*Corpo principal da pág. CONTACTOS*/
            .form-container{width: 80%;}
            .form-container h3{font-size: 1.4rem;}
            label{font-size: 0.85rem;}
            input, textarea{font-size: 0.775rem;}
            button{font-size: 0.85rem;}

            /*Corpo principal da pág. LOCALIZAÇÃO*/
            th, td{font-size: 0.76rem;}

            /*Corpo principal da pág. ERRO e ENVIADO*/
            #ups-erro, #h1-ups-enviado, #h4-ups-enviado{font-size: 1.1rem;}
            .tente-mais-tarde{font-size: 0.82rem;}

             /*Corpo principal da pág. COMENTÁRIOS*/
             #contentor-lista-emails h1{font-size: 1.1rem;}
             #p-lista{font-size: 0.82;}
             #contentor-lista-emails p, h3{font-size:0.82rem ;}

    /*styles para a barra lateral asaid*/
    #coluna_lateral h3{font-size: 1rem;margin-bottom: 5px;}
    .texto_coluna_lateral{font-size: 0.7rem;}
    .rodape_figura{font-size: 0.6rem;}
    #img-IA{margin-bottom: 10px;}

     /*styles para o rodapé*/
     #rodape{height: 30px;}
     .img_redes_sociais_tamanho{width: 20px;height: auto;}
     #texto-rodape{font-size: 0.45rem;}
 }

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

    /* styles para o header, escepto para o slider que tem página dedicada*/
    #barra_01, #barra_02{height:30px;}
    .menunavega ul li{font-size: 1rem;}
    .menunavega ul li a{padding: 0rem 0.4rem;}

    /* styles para main, corpo principal*/
    .seccao_01 h1{font-size: 1.5em;}
    #contentor_01 .caixa_dos_paragrafos, .lista-trabalhos{font-size: 0.9rem;}
    #contentor_01 h2{font-size:1.1rem}
    #div-A, #div-B, #div-C, #div-D{width: 340px; height:260px}
    .contentor-fotos{gap:20px;}

                    /*Corpo principal da pág. CONTACTOS*/
                    .form-container{width: 80%;}
                    .form-container h3{font-size: 1.6rem;}
                    label{font-size: 1rem;}
                    input, textarea{font-size: 0.96rem;}
                    button{font-size: 1rem;}

                    /*Corpo principal da pág. LOCALIZAÇÃO*/
                    th, td{font-size: 0.9rem;}
                    table{margin-top: 15px;}
                    #mapa-google{height: 600px;}

                    /*Corpo principal da pág. ERRO e ENVIADO*/
                    #ups-erro, #h1-ups-enviado, #h4-ups-enviado{font-size: 1.5rem;}
                    .tente-mais-tarde{font-size: 0.9rem;}

                     /*Corpo principal da pág. COMENTÁRIOS*/
                    #contentor-lista-emails h1{font-size: 1.55rem;}
                    #p-lista{font-size: 0.98rem;}
                    #contentor-lista-emails p, h3{font-size:0.98rem ;}

    /*styles para a barra lateral asaid*/
    #coluna_lateral h3{font-size: 1rem;margin-bottom: 10px;}
    .texto_coluna_lateral{font-size: 0.843rem;}
    .rodape_figura{font-size: 0.7rem;}
    #img-IA{margin-bottom: 20px;}
    #sapateiro_tania{margin-top: 30px;}

    /*styles para o rodapé*/
    #rodape{height: 30px;}
    .img_redes_sociais_tamanho{width: 22px;height: auto;}
    #texto-rodape{font-size: 0.50rem;}
 }

 @media(min-width:1024px) and (max-width:1279px) {

    /* styles para o header, escepto para o slider que tem página dedicada*/
    #barra_01, #barra_02{height: 7vh;}
    .menunavega ul li{font-size: 1.2rem;}
    .menunavega ul li a{padding: 0rem 0.5rem;}

     /* styles para main, corpo principal*/
    .seccao_01 h1{font-size: 1.5rem;}
    #contentor_01 .caixa_dos_paragrafos, .lista-trabalhos{font-size: 1.05rem;}
    #contentor_01 h2{font-size:1.2rem}
    #div-A, #div-B, #div-C, #div-D{width: 410px; height:320px}
    .contentor-fotos{gap:20px;}

                    /*Corpo principal da pág. CONTACTOS*/
                    .form-container{width: 80%;}
                    .form-container h3{font-size: 1.7rem;}
                    label{font-size: 1.2rem;}
                    input, textarea{font-size: 1rem;}
                    button{font-size: 1.2rem;}

                    /*Corpo principal da pág. LOCALIZAÇÃO*/
                     th, td{font-size: 1rem;}
                     table{margin-top: 30px;}
                     #mapa-google{height: 650px;}

                     /*Corpo principal da pág. ERRO e ENVIADO*/
                    #ups-erro, #h1-ups-enviado, #h4-ups-enviado{font-size: 1.6rem;}
                    .tente-mais-tarde{font-size: 1.1rem;}

                    /*Corpo principal da pág. COMENTÁRIOS*/
                    #contentor-lista-emails h1{font-size: 1.7rem;}
                    #p-lista{font-size: 1.1rem;}
                    #contentor-lista-emails p, h3{font-size:1.1rem ;}

    /*styles para a barra lateral asaid*/
    #coluna_lateral h3{font-size: 1.3rem;margin-bottom: 10px;}
    .texto_coluna_lateral{font-size: 0.95rem;}
    .rodape_figura{font-size: 0.8rem;}
    #img-IA{margin-bottom: 20px;}
    #sapateiro_tania{margin-top: 30px;}

    /*styles para o rodapé*/
    #rodape{height: 7vh;}
    .img_redes_sociais_tamanho{width: 32px;height: auto;}
    #texto-rodape{font-size: 0.50rem;}

 }

    @media (min-width:1280px) {

    /* styles para o header*/
    #barra_01, #barra_02{height: 7vh;}
    .menunavega ul li{font-size: 1.3rem;}
    .menunavega ul li a{padding: 0rem 1rem;}

     /* styles para main, corpo principal*/
    .seccao_01 h1{font-size: 2rem;padding: 20px 0 0px 30px}
    #contentor_01 .caixa_dos_paragrafos, .lista-trabalhos{font-size: 1.4rem;width: 91%;margin-left: 30px; margin-top: 30px;margin-bottom: 30px;}
    #contentor_01 h2{font-size:1.2rem;padding: 0px 0 0 30px;}
    #div-A, #div-B, #div-C, #div-D{width: 510px; height:400px}
    .contentor-fotos{gap:40px;}

                    /*Corpo principal da pág. CONTACTOS*/
                    .form-container{width: 80%;}
                    .form-container h3{font-size: 1.9rem;}
                    label{font-size: 1.3rem;}
                    input, textarea{font-size: 1.2rem;}
                    button{font-size: 1.3rem;}

                    /*Corpo principal da pág. LOCALIZAÇÃO*/
                    th, td{font-size: 1.2rem;}
                    table{margin-top: 60px;}
                    #mapa-google{height: 800px;}

                    /*Corpo principal da pág. ERRO e ENVIADO*/
                    #ups-erro, #h1-ups-enviado, #h4-ups-enviado{font-size: 1.8rem;}
                    .tente-mais-tarde{font-size: 1.25rem;}

                    /*Corpo principal da pág. COMENTÁRIOS*/
                    #contentor-lista-emails h1{font-size: 1.8rem;}
                    #p-lista{font-size: 1.25rem;}
                    #contentor-lista-emails p, h3{font-size:1.25rem ;}

    /*styles para a barra lateral asaid*/
    #coluna_lateral h3{font-size: 1.7rem;margin-bottom: 20px;}
    .texto_coluna_lateral{font-size: 1.2rem;}
    .rodape_figura{font-size: 1rem;}
    #img-IA{margin-bottom: 20px;}
    #sapateiro_tania{margin-top: 10px;}

    /*styles para o rodapé*/
    #rodape{height: 7vh;}
    .img_redes_sociais_tamanho{width: 35px;height: auto;}
    #texto-rodape{font-size: 0.70rem;}
    
 }