/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estilos gerais */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f9;
    margin: 0;
    padding: 0;
}

/* menu principal, cor de fundo, cor letras, tipo de alinhamento do menu ao centro */
header {
    background-color: #fa8704;
    color: #fff;
    padding: 1rem 0;
    text-align: center;
}

header nav ul {
    list-style: none;
    display: flex;
    justify-content: center; /* justifica o texto ao centro da página*/
    gap: 1.5rem;
}

header nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
}

header nav ul li a:hover {
    color: #080500;
}

/* alinha os textos do menu ao centro */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.header {
   
    color: white;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* logo principal encima do menu, configuração do layout da logo*/
.logo img {
    width: 100%;
    height: auto;
    max-height: 600px;
  }

  @media (max-width: 768px) {
    .logo img {
      max-height: 300px;
    }
  }


  /* fachada principal , configuração do layout */
.fachada img {
    width: 100%;
    height: auto;
    max-height: 600px;
  }

  @media (max-width: 768px) {
    .fachada img {
      max-height: 300px;
    }
  }

  /* configurações para deixar o texto do menu alinhado em diferentes tamanhos de tela em uma única linha*/
.navbar ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

.navbar a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

/*Deixa os menu com linha ao passar o mouse, referenciando que é um link*/
.navbar a:hover {
    text-decoration: underline;
}




.fachada  {
    display: flex;
    align-items: center; /* Alinha verticalmente ao centro */
    justify-content: center; /* Alinha horizontalmente ao centro */
    /*height: 600px; /* Certifique-se de definir uma altura consistente */
    position: relative;
    overflow: hidden;
    object-fit: cover; /* Garante que a imagem preencha todo o container */
    
}

.banner {
    position: absolute;
    text-align: center;
    z-index: 2;
    color: #0f0f0f;
}

.banner {
    
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2; /* Garantir que o conteúdo do banner fique acima da imagem de fundo */
    /*background: rgba(0, 0, 0, 0.6); /* Cor do fundo do texto do banner */
    padding: 0,5px;
    
    color: #0f0f0f;
    text-align: center;

    /*background-color: rgba(255, 255, 255, 0.6); /* Opcional para destacar o texto */
    
    
   
     
   
  }



/*configuração do tamanho do texto*/
.banner h1 {
    font-size: 1.5rem;
   
    padding: 0,5px;
}

/*configuração do tamanho do paragrafo*/
.banner p {
    font-size: 1.2rem;
    padding: 0,5px;
}


/* Seção Principal */
/*Seção do banner principal abaixo do menu*/
.principal {

    display: flex;
    align-items: center; /* Alinha verticalmente ao centro */
    justify-content: center; /* Alinha horizontalmente ao centro */
    height: 900px; /* Certifique-se de definir uma altura consistente */
    position: relative;
    overflow: hidden;

    
    text-align: center;
    z-index: 2;
    color: #0f0f0f;

    


    text-align: center; /*centraliza os itens e texto ao centro*/
    padding: 2rem;/*deixa itens e texto a uma distância de 2rem no top e parte de baixo da seção em que ele se encontra*/
    /*coloca uma imagem de fundo na seção*/
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('fachada-salta-1.jpg') no-repeat center/cover;
    color: #fff; /*cor do texto*/
}

/*configuração do tamanho do texto*/
.principal h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

/*configuração do tamanho do paragrafo*/
.principal p {
    font-size: 1.2rem;
}

/*configuração do botão Peça um Orçamento*/
.principal .btn {
    display: inline-block;
    margin-top: 1rem;/*distância do item superior ao botão*/
    padding: 0.75rem 1.5rem;
    background-color: #f39c12; /*cor do botão*/
    color: #fff; /*cor do texto do botão*/
    text-decoration: none;
    border-radius: 5px; /*deixa a borda do item neste caso botão mais arredondada*/
    transition: background-color 0.3s;
}

.principal .btn:hover {
    background-color: #e67e22;
}


/* Projetos Recentes */
.projetos-recentes {
    padding: 2rem;
    background-color: #fff;
    text-align: center;

    
}

.projetos-recentes h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #2c3e50;
}

.projetos-recentes p {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #2c3e50;
}


/* padrão do texto e cores que estão na seção Projetos */
.timeline {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1rem;
}

.timeline .evento {
    background-color: #e8e8e8;
    padding: 1rem;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.timeline .evento h3 {
    margin-bottom: 0.5rem;
    color: #2c3e50;
}




.botao {
    
    display: inline-block;
    padding: 0.5rem 0.5rem;
    background-color: #494846;
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
    

   
    
    font-size: 1.2rem;
}

.botao:hover {
    background-color: #e67e22;
}




.botao-galeria {
    
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2; /* Garantir que o conteúdo do banner fique acima da imagem de fundo */
    /*background: rgba(0, 0, 0, 0.6); /* Cor do fundo do texto do banner */
    padding: 0,5px;
    
    color: #0f0f0f;
    text-align: center;

    /*background-color: rgba(255, 255, 255, 0.6); /* Opcional para destacar o texto */
    
    
   
     
   
  }



/*configuração do tamanho do texto*/
.botao-galeria h1 {
    font-size: 1.5rem;
   
    padding: 0,5px;
}

/*configuração do tamanho do paragrafo*/
.botao-galeria p {
    font-size: 1.2rem;
    padding: 0,5px;
}





/* Quem-Somos */
.quem-somos {
    padding: 2rem;
    background-color: #fff;
    text-align: center;

    
}

.quem-somos h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #2c3e50;
}




/* padrão do texto e cores que estão na seção Quem-Somos */


.timeline-quem-somos {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1rem;
}

.timeline-quem-somos .evento-quem-somos {
    background-color: #e8e8e8;
    padding: 1rem;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    
}

.timeline-quem-somos .evento-quem-somos h3 {
    margin-bottom: 0.5rem;
    color: #2c3e50;
}

.timeline-quem-somos .evento-quem-somos p {
  
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #2c3e50;
}



/* padrão do texto que está abaixo do Quem Somos */
.sobre p {
    margin-bottom: 15px;
    text-align: justify;
}

.sobre ul {
    list-style-type: disc;
    margin-left: 20px;
    margin-bottom: 15px;
}

.sobre ul li {
    margin-bottom: 10px;
    text-align: justify;
}

.sobre ul li strong {
    color: #555;
    
}





/*  Galeria de Obras Anteriores */
.galeria-obras-anterior {
    padding: 2rem; /*deixa um espaçamento de 2rem no canto esquerto */
    background-color: #e8e8e8; /*cor de fundo*/
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /*margin-top: 1rem;*/ /* margem top deixa uma linha no top da secção onde aplicado*/
}



.galeria-obras-anterior p {
    /*font-size: 1.2rem; */
    margin-bottom: 1rem;
    color: #2c3e50;
}


.galeria-obras-anterior h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: #2c3e50;

    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #2c3e50;


}
/* grid faz a distribuição das imagens de maneira uniforme  dentro da galeria */
.grid-obras-anterior {
    display: grid;/*distribui imagens e conteúdo dentro do grid de maneira uniforme de acordo com tamanhos de telas*/
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /*define o tamanho máximo de cada iten dentro do grid, neste caso imagem para não ficar cortada*/
    gap: 1rem;/*gap onde cria uma distância entre cada imagem de 1rem nos quatro cantos*/
}
/*configuração dentro de cada grid de imagem*/
.grid-item-obras-anterior {
    background-color: #fff; /*cor de fundo*/
    padding: 1rem; /*deixa um espaçamento de 1rem nos quatro cantos */
    border-radius: 8px; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/*proporção de cada grid dentro da seção*/
.grid-item-obras-anterior img {
    width: 100%;
    border-radius: 5px;
    border: 2px solid #ccc;
}

.grid-item-obras-anterior a {
    display: block;
    margin-top: 0.5rem;
    color: #f39c12;
    text-decoration: none;
    font-weight: bold;
}

.grid-item-obras-anterior img:hover {
    border-color: #f39c12;
    transform: scale(1.1);
}



/* Deixa um linha na cor branca quando aplicado essa seção para dar um efeito de separador */
.separador {
    
    padding: 1rem; /*deixa um espaçamento de 2rem no canto esquerto */
    background-color: white; /*cor de fundo*/
    border-radius: 25px;
   
    
   
}



/*  Galeria Obras de Revitalização */
.galeria-revitalizacao {
    padding: 2rem; /*deixa um espaçamento de 2rem no canto esquerto */
    background-color: #e8e8e8; /*cor de fundo*/
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /*margin-top: 1rem;*/ /* margem top deixa uma linha no top da secção onde aplicado*/
}



.galeria-revitalizacao p {
    /*font-size: 1.2rem;*/
    margin-bottom: 1rem;
    color: #2c3e50;
}


.galeria-revitalizacao h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: #2c3e50;

    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #2c3e50;


}
/* grid faz a distribuição das imagens de maneira uniforme  dentro da galeria */
.grid-revitalizacao {
    display: grid;/*distribui imagens e conteúdo dentro do grid de maneira uniforme de acordo com tamanhos de telas*/
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /*define o tamanho máximo de cada iten dentro do grid, neste caso imagem para não ficar cortada*/
    gap: 1rem;/*gap onde cria uma distância entre cada imagem de 1rem nos quatro cantos*/
}
/*configuração dentro de cada grid de imagem*/
.grid-item-revitalizacao {
    background-color: #fff; /*cor de fundo*/
    padding: 1rem; /*deixa um espaçamento de 1rem nos quatro cantos */
    border-radius: 8px; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/*proporção de cada grid dentro da seção*/
.grid-item-revitalizacao img {
    width: 100%;
    border-radius: 5px;
    border: 2px solid #ccc;
}

.grid-item-revitalizacao a {
    display: block;
    margin-top: 0.5rem;
    color: #f39c12;
    text-decoration: none;
    font-weight: bold;
}

.grid-item-revitalizacao img:hover {
    border-color: #f39c12;
    transform: scale(1.1);
}


/*  Galeria Prestação de Serviços */
.galeria-prestacao-servico {
    padding: 2rem; /*deixa um espaçamento de 2rem no canto esquerto */
    background-color: #e8e8e8; /*cor de fundo*/
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /*margin-top: 1rem;*/ /* margem top deixa uma linha no top da secção onde aplicado*/
}



.galeria-prestacao-servico p {
    /*font-size: 1.2rem;*/
    margin-bottom: 1rem;
    color: #2c3e50;
}


.galeria-prestacao-servico h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: #2c3e50;

    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #2c3e50;


}
/* grid faz a distribuição das imagens de maneira uniforme  dentro da galeria */
.grid-prestacao-servico {
    display: grid;/*distribui imagens e conteúdo dentro do grid de maneira uniforme de acordo com tamanhos de telas*/
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /*define o tamanho máximo de cada iten dentro do grid, neste caso imagem para não ficar cortada*/
    gap: 1rem;/*gap onde cria uma distância entre cada imagem de 1rem nos quatro cantos*/
}
/*configuração dentro de cada grid de imagem*/
.grid-item-prestacao-servico {
    background-color: #fff; /*cor de fundo*/
    padding: 1rem; /*deixa um espaçamento de 1rem nos quatro cantos */
    border-radius: 8px; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/*proporção de cada grid dentro da seção*/
.grid-item-prestacao-servico img {
    width: 100%;
    border-radius: 5px;
    border: 2px solid #ccc;
}

.grid-item-prestacao-servico a {
    display: block;
    margin-top: 0.5rem;
    color: #f39c12;
    text-decoration: none;
    font-weight: bold;
}

.grid-item-prestacao-servico img:hover {
    border-color: #f39c12;
    transform: scale(1.1);
}





/*  Galeria Projetos em Vídeo */
.galeria-video {
    padding: 2rem; /*deixa um espaçamento de 2rem no canto esquerto */
    background-color: #e8e8e8; /*cor de fundo*/
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /*margin-top: 1rem;*/ /* margem top deixa uma linha no top da secção onde aplicado*/
}



.galeria-video p {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #2c3e50;
}


.galeria-video h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: #2c3e50;

    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #2c3e50;


}
/* grid faz a distribuição das imagens de maneira uniforme  dentro da galeria */
.grid-video {
    display: grid;/*distribui imagens e conteúdo dentro do grid de maneira uniforme de acordo com tamanhos de telas*/
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /*define o tamanho máximo de cada iten dentro do grid, neste caso imagem para não ficar cortada*/
    gap: 1rem;/*gap onde cria uma distância entre cada imagem de 1rem nos quatro cantos*/
}
/*configuração dentro de cada grid de imagem*/
.grid-item-video {
    background-color: #fff; /*cor de fundo*/
    padding: 1rem; /*deixa um espaçamento de 1rem nos quatro cantos */
    border-radius: 8px; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/*proporção de cada grid dentro da seção*/
.grid-item-video img {
    width: 100%;
    border-radius: 5px;
    border: 2px solid #ccc;
}

.grid-item-video a {
    display: block;
    margin-top: 0.5rem;
    color: #f39c12;
    text-decoration: none;
    font-weight: bold;
}

.grid-item-video p {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #2c3e50;
}


.grid-item-video img:hover {
    border-color: #f39c12;
    transform: scale(1.1);
}





/*  Secção Projetos Anual */
.projetos-anual {
   
    background-color: #ccc;
    text-align: center;
}



.projetos-anual-background h2 {
    padding: 2rem; /*deixa um espaçamento de 2rem do outro DIV acima deste, neste caso */
    background-color: white; /*cor de fundo*/
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /*margin-top: 1rem;*/ /* margem top deixa uma linha no top da secção onde aplicado*/
}




.projetos-anual p {
    
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #2c3e50;
}


.projetos-anual h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: #2c3e50;

    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #2c3e50;


}

.timeline-projetos-anual {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1rem;
}

.timeline-projetos-anual .projetos-anual {
    background-color: #e8e8e8;
    padding: 1rem;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    
}

.timeline-projetos-anual .evento-projetos-anual h3 {
    text-align: center;
    margin-bottom: 0.5rem;
    color: #2c3e50;
}

.timeline-projetos-anual .evento-projetos-anual p {
  
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #2c3e50;
}









/* Estilos para a página de detalhes */
.detalhes {
     
    display: flex;
    flex-direction: column;
    margin: 20px;
    align-items: center;

    
}


.imagem-container {
    position: relative;
    display: flex;
    align-items: center; /* Alinha verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.imagem-principal {
    display: flex;
    justify-content: center; /* Centraliza a imagem */
    align-items: center; /* Alinha a imagem verticalmente */
    width: 100%;
    
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.imagem-principal img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Exibe a imagem inteira sem cortar */
    background-color: #f5f5f5;
}


.galeria-miniaturas {
    width: 70%;
    margin-bottom: 20px;
    

    
    flex: 1;
    max-width: 50%;
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;

    
   


}



.galeria-miniaturas img {
    width: 100%;
    border: 2px solid #ccc;
    height: auto;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;

}


.galeria-miniaturas img:hover {
    border-color: #f39c12;
    transform: scale(1.1);
}

.galeria-miniaturas img.active {
    border-color: #f39c12;
    box-shadow: 0 0 10px rgba(243, 156, 18, 0.5);
}

/* Estilização da barra de rolagem */
.galeria-miniaturas::-webkit-scrollbar {
    height: 8px;
}

.galeria-miniaturas::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.galeria-miniaturas::-webkit-scrollbar-thumb {
    background: #f39c12;
    border-radius: 4px;
}

.galeria-miniaturas::-webkit-scrollbar-thumb:hover {
    background: #e67e22;
}


/* miniatura das imagens apresentadas detalhe.html */











/* alteração da exibição das miniaturas */



.imagem-principal img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.imagem-principal {
    flex: 1;
    max-width: 60%;
    padding: 1rem;
}





/* Botão voltar no código detalhe.html */

.btn-pagina{
    background-color: #e8e8e8;
}

.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: #494846;
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
    

    margin: 0 2rem;
    
    font-size: 1.2rem;
    
}

.btn:hover {
    background-color: #e67e22;
}


/* Botão de WhatsApp */
.whatsapp-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    z-index: 1000;
}

.whatsapp-button img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.whatsapp-button img:hover {
    transform: scale(1.1);
}


/* Rodapé */
footer {
    padding: 1.5rem;
    background-color: #fa8704;
    color: #fff;
    text-align: center;
}

footer .social-media a {
    margin: 0 0.5rem;
    color: #fff;
    font-size: 1.2rem;
    transition: color 0.3s;
}

footer .social-media a:hover {
    color:  #333;
}

footer form {
    margin-top: 1rem;
}

footer form input {
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-right: 0.5rem;
}

footer form button {
    padding: 0.5rem 1rem;
    background-color: #f39c12;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

footer form button:hover {
    background-color: #e67e22;
}