/* ============================
   ESTILO GERAL
============================ */
:root {
    --primary-color: #b97b1d;
    --secondary-color: #d66745;
    --background:#bfc6d4;
    --text-color: #333;
    --font-family: 'Roboto', sans-serif;
    --shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
body {
    background-color: var(--background); /* Cor de fundo */
    box-sizing: border-box; /* Inclui padding e bordas no tamanho total */
    font-family: var(--font-family); /* Fonte padrão */
    display: flex; /* Organiza o conteúdo em coluna */
    flex-direction: column; /* Organiza os itens em coluna */
    align-items: center; /* Centraliza os itens horizontalmente */
    justify-content: center; /* Centraliza os itens verticalmente */
    margin: 1rem; 
    padding: 1rem; 
}
hr {/* Linha horizontal */
    width: 100%; /* Faz a linha ocupar toda a largura do contêiner */
    max-width: 960px; /* Limita a largura máxima da linha */
    border: none; /* Remove borda padrão */
    height: 2px; /* Define a altura da linha */
    align-items: center; /* Centraliza a linha verticalmente */
    justify-content: center; /* Centraliza a linha horizontalmente */
    display: flex; /* Organiza o conteúdo em linha */
    background-color: rgba(0, 0, 0, 0); /* Linha transparente */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra com transparência */
  }
  /* ============================
   HEADER
============================ */
header {
    max-width: 960px; /* Limita a largura máxima do header */
    margin: 2rem auto; /* Centraliza o header com margens */
    padding: 1.5rem; /* Adiciona espaçamento interno */
    display: flex;
    flex-direction: column; /* Organiza os itens em coluna */
    align-items: center; /* Centraliza os itens horizontalmente */
    justify-content: center; /* Centraliza os itens verticalmente */
    background-color:#e1e5e9; /* Cor de fundo */
    text-align: center; /* Centraliza o texto */
    font-size: 1rem; /* Tamanho do texto */
    line-height: 1.5; /* Espaçamento entre linhas */
    color: var(--text-color); /* Cor do texto */
    border-bottom: 1px solid var(--primary-color); /* Linha inferior */
    border-radius: 5px; /* Bordas arredondadas */
    box-shadow: var(--shadow); /* Sombra leve */
}
/* ============================
   ESTILO DO MENU
============================ */
.container {
    max-width: 1200px; /* Define a largura máxima para os contêineres */
    width: 100%; /* Faz os contêineres ocuparem toda a largura */
    margin: 0 auto; /* Centraliza os contêineres */
    padding: 1rem; /* Adiciona espaçamento interno */
    background-color:#e1e5e9; /* Fundo claro */ /* Cor de fundo suave */
}
/* Ajuste do header com logo e texto */
.logo-container {
    display: flex;
    align-items: center; /* Centraliza logo e texto verticalmente */
    gap: 1rem; /* Espaçamento entre logo e texto */    
}
.logo {
    width: 90px; /* Ajusta o tamanho do logotipo */
    height: auto; /* Mantém a proporção do logotipo */
}
header h1 {
    font-size: 2rem; /* Tamanho do título */
    color: var(--text-color); /* Cor do texto */
    text-align: center; /* Centraliza o texto */
}
/* ============================
   MENU DE NAVEGAÇÃO
============================ */
/* Estilo do menu de navegação */
nav ul {
    display: flex; /* Coloca os itens do menu em linha */
    list-style: none; /* Remove os pontos da lista */
    text-align: center; /* Centraliza o texto */
    flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha, se necessário */
    align-items: center; /* Centraliza os itens verticalmente */
    justify-content: center; /* Centraliza os itens horizontalmente */
    gap: 2rem; /* Espaçamento entre os links */
    margin: 1rem; /* Espaçamento entre o menu e o conteúdo */
    padding: 1rem; /* Adiciona espaçamento interno */
}

nav ul li a {
    margin: 2rem; /* Espaçamento entre os links */
    padding: 1rem 2rem; /* Espaçamento interno */
    text-decoration: none; /* Remove o sublinhado */
    align-items: center; /* Centraliza os itens verticalmente */
    color: var(--text-color); /* Cor do texto */
    font-size: 1.2rem; /* Tamanho da fonte */
    font-weight: bold; /* Negrito */
    transition: color 0.3s; /* Transição suave ao passar o mouse */
}

nav ul li a:hover {
    color: var(--primary-color); /* Cor ao passar o mouse */
}
/* ============================
   SEÇÕES
============================ */
/* Ajuste para o título das seções */
.section {
    max-width: 1200px; /* Define a largura máxima */
    margin: 2 rem auto;
    padding: 1rem; /* Adiciona espaçamento interno */
    text-align: center; /* Centraliza o texto */
    background-color: #e1e5e9; /* Fundo claro */
    border-radius: 5px; /* Bordas arredondadas */
    box-shadow: var(--shadow); /* Sombra leve */
    -webkit-box-shadow: var(--shadow); /* Prefixo para navegadores antigos */
    -moz-box-shadow: var(--shadow); /* Prefixo para navegadores antigos */
}
section h2 , section h3 {
    text-align: center;
    margin: 1rem; /* Espaçamento abaixo do título */
    padding: 1rem; /* Espaçamento interno */
    color: var(--primary-color); /* Cor do texto */
    border-radius: 5px; /* Bordas arredondadas */
    margin: 2rem auto; /* Centraliza o título */
    font-size: 2rem; /* Tamanho do título */
}
/* ============================
   SOBRE
============================ */
.sobre {
    text-align: center;
    padding: 2rem;
    margin: 2rem;
    max-width: 1200px; /* Define uma largura máxima para a seção */
    display: flex; /* Organiza os itens em linha */
    flex-direction: column; /* Organiza os itens em coluna */
    align-items: center; /* Centraliza os itens horizontalmente */
    background-color: #e1e5e9; /* Fundo cinza claro */
    border-radius: 5px; /* Bordas arredondadas */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra leve */
}
.sobre-container img {
    width: 100%; /* Faz a imagem ocupar toda a largura do contêiner */
    height: auto; /* Mantém a proporção da imagem */
    max-width: 500px; /* Limita o tamanho máximo da imagem */
    border-radius: 5px; /* Ajusta as bordas arredondadas */
    margin: 20px auto; /* Centraliza a imagem com margens */
    display: block; /* Centraliza a imagem no contêiner */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra leve */
}
img {
        max-width: 100%;
        height: auto;
    }

/* ============================
   PROJETOS
============================ */
.projetos-container {
    margin: 2rem auto; /* Centraliza a seção com margens */
    padding: 2rem; /* Adiciona espaçamento interno */
    max-width: 1200px; /* Define uma largura máxima para a seção */  
    background-color:#bfc6d4; /* Fundo cinza claro */
    border-radius: 5px; /* Bordas arredondadas */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra leve */
    display: flex; /* Organiza os itens em linha */
    flex-direction: column; /* Organiza os itens em coluna */
    align-items: center; /* Centraliza os itens horizontalmente */
    justify-content: center; /* Centraliza os itens verticalmente */
    text-align: center; /* Centraliza o texto */
    font-size: 1rem; /* Tamanho do texto */
    line-height: 1.5; /* Espaçamento entre linhas */
    color: var(--text-color); /* Cor do texto */
}
.projetos-lista {
    display: flex; /* Coloca os itens em linha */
    flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha, se necessário */
    justify-content: center; /* Centraliza os itens horizontalmente */
    align-items: center; /* Centraliza os itens verticalmente */
    list-style: none; /* Remove os pontos da lista */
    text-align: center; /* Centraliza o texto */
    margin: 2rem; /* Espaçamento entre a lista e o restante do conteúdo */
    gap: 1rem; /* Espaçamento entre os círculos */
    padding: 1rem;
    max-width: 1200px; /* Limita a largura máxima da lista */
    -webkit-box-shadow: var(--shadow); /* Prefixo para navegadores antigos */
    -moz-box-shadow: var(--shadow); /* Prefixo para navegadores antigos */
    box-shadow: var(--shadow); /* Sombra leve */
}
.projeto-item {
    width: 130x; /* Largura do círculo */
    height: 130px; /* Altura do círculo */
    padding: 1rem; /* Espaçamento interno */
    display: flex; /* Garante que o conteúdo dentro do círculo seja centralizado */
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    text-align: center;
    border-radius: 50%; /* Torna os itens circulares */
    background: #e1e5e9; /* Fundo claro */
    border: 2px solid var(--primary-color); /* Borda com a cor primária */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.projeto-item:hover {
    transform: scale(1.1); /* Aumenta o tamanho do círculo ao passar o mouse */
    -webkit-transform: scale(1.1); /* Prefixo para navegadores antigos */
    -moz-transform: scale(1.1);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Sombra mais intensa */
}
.projeto-item i {
    margin: auto; /* Centraliza o ícone */
    font-size: 1.4rem; /* Tamanho do ícone */
    color: var(--primary-color); /* Cor do ícone */
    margin-bottom: 0.5rem; /* Espaçamento entre o ícone e o texto */
}
/* ============================
   DEPOIMENTOS
============================ */
/* Estilo do balão de depoimento */
.depoimentos-cliente {
    width: 100%; /* Largura total do contêiner */
    max-width: 600px; /* Largura máxima do balão */
    margin: 2rem auto; /* Centraliza os balões e adiciona espaçamento */
    padding: 1.5rem; /* Espaçamento interno */
    background: #e1e5e9; /* Fundo claro */
    border-radius: 15px; /* Bordas arredondadas para o balão */
    border: 2px solid var(--primary-color); /* Borda com a cor primária */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra leve */
    font-size: 1rem; /* Tamanho do texto */
    color: var(--text-color); /* Cor do texto */
    text-align: center; /* Centraliza o texto */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição suave */
}
.depoimentos-cliente:hover {
    transform: scale(1.02); /* Leve aumento ao passar o mouse */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Sombra mais intensa */
}
.depoimentos h2 {
    text-align: center;
    font-size: 2rem;
    margin: 2rem; /* Espaçamento entre o título e a lista de depoimentos */
    color: var(--primary-color); /* Cor do título */
}
/* Efeito de hover */
.depoimentos:hover {
    transform: scale(1.03); /* Leve aumento ao passar o mouse */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Sombra mais intensa */
}
/* Seta do balão */
.balao::after {
    content: ''; /* Elemento vazio para criar o bico */
    position: relative;
    bottom: -10px; /* Posiciona o bico abaixo do balão */
    left: 20px; /* Ajusta a posição horizontal do bico */
    width: 0;
    height: 0;
    border-left: 10px solid transparent; /* Parte esquerda transparente */
    border-right: 10px solid transparent; /* Parte direita transparente */
    border-top: 10px solid #f0f0f0; /* Cor da ponta */
  }

/* Nome do cliente - depoimentos */
.cliente {
    margin-top: 1rem; /* Espaço entre o balão e o nome */
    font-size: 1rem;
    font-weight: bold;
    color: #555; /* Cor do texto do cliente */
}

/* ============================
   CONTATO
============================ */
.contato {
    width: 100%; /* Faz o contêiner ocupar toda a largura do contêiner */
    height: auto; /* Mantém a proporção do contêiner */
    display: flex; /* Organiza os itens em coluna */
    align-items: center; /* Centraliza os itens horizontalmente */
    justify-content: center; /* Centraliza os itens verticalmente */
    text-align: center; /* Centraliza o texto */
    font-size: 1rem; /* Tamanho do texto */
    line-height: 1.5; /* Espaçamento entre linhas */
    background-color: #e1e5e9;/* Fundo cinza claro */
    max-width: 960px;
    margin: 2rem auto;
    padding: 1.5rem;
    background-color: var(--background-color);
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.contato a {
    text-decoration: none; /* Remove o sublinhado dos links */
    color: var(--primary-color); /* Cor dos links */
    font-size: 1.2rem; /* Tamanho da fonte */
    transition: color 0.3s ease; /* Transição suave ao passar o mouse */
}

.contato a:hover {
    color: var(--secondary-color); /* Cor ao passar o mouse */
}

.contato p{
    margin: 1rem 0; /* Espaçamento entre o título e o conteúdo */
    padding: 1rem; /* Espaçamento interno */
    text-align: center; /* Centraliza o texto */
    font-size: 1rem; /* Tamanho do título */
}
.contato h3 {
    margin: 1rem; /* Espaçamento entre o título e o conteúdo */
    padding: 1rem; /* Espaçamento interno */
    text-align: center; /* Centraliza o texto */
    font-size: 1rem; /* Tamanho do título */
    font-weight: bold; /* Negrito */
    line-height: 1.5; /* Espaçamento entre linhas */
    color: var(--primary-color);
}
.contact-form {
    width: 100%; /* Faz o formulário ocupar toda a largura do contêiner */
    height: auto; /* Mantém a proporção do formulário */
    display: flex; /* Organiza os itens em coluna */
    flex-direction: column; /* Organiza os itens em coluna */
    align-items: center; /* Centraliza os itens horizontalmente */
    justify-content: center; /* Centraliza os itens verticalmente */
    text-align: center; /* Centraliza o texto */
    font-size: 1rem; /* Tamanho do texto */
    line-height: 1.5; /* Espaçamento entre linhas */
    background-color:  #e1e5e9;/* Fundo cinza claro */
    max-width: 960px;
    margin: 2rem auto;
    padding: 1.5rem;
    background-color: var(--background-color);
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.contact-form h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}
.contact-form input,
.contact-form textarea {
    width: 100%;
    margin-bottom: 1rem;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    color: var(--text-color);
    background:#e1e5e9; /* Fundo claro */
}
.contact-form button {
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}
.contact-form button:hover {
    background-color: var(--secondary-color);
}
/* ============================
 LINKS REDES SOCIAIS
============================ */
#contato .social-icons {
    display: flex; /* Exibe os ícones em linha */
    justify-content: center; /* Centraliza os ícones horizontalmente */
    gap: 1rem; /* Espaçamento entre os ícones */
    margin: 1rem 0; /* Espaçamento acima e abaixo dos ícones */
}
.social-icons a {
    text-decoration: none;
    color: var(--text-color);
    font-size: 2rem;
    transition: color 0.3s;
}
.social-icons a:hover {
    color: var(--secondary-color);
}
/* ============================
  RODAPÉ - FOOTER
============================ */
footer {
    width: 100%; /* Faz o rodapé ocupar toda a largura do contêiner */
    height: auto; /* Mantém a proporção do rodapé */
    text-align: center; /* Centraliza o texto */
    font-size: 1rem; /* Tamanho do texto */
    line-height: 1.5; /* Espaçamento entre linhas */
    color: var(--text-color); /* Cor do texto */
    background-color:#e1e5e9; /* Cor de fundo */
    padding: 1rem; /* Espaçamento interno */
    max-width: 960px; /* Limita a largura máxima do rodapé */
    margin: 2rem auto; /* Centraliza o rodapé com margens */
    border-radius: 5px; /* Bordas arredondadas */
    border-bottom: 1px solid var(--primary-color); /* Linha inferior */
    display: flex; /* Organiza o conteúdo em linha */
    justify-content: space-between; /* Espaçamento entre logo e menu */
    align-items: center; /* Centraliza verticalmente */
    -webkit-box-shadow: var(--shadow); /* Prefixo para navegadores antigos */
    -moz-box-shadow: var(--shadow); /* Prefixo para navegadores antigos */
}
footer a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s;
}
footer a:hover {
    color: var(--secondary-color);
}
footer p{
    margin: 1rem; /* Espaçamento entre os links */
    padding: 1rem 2rem; /* Espaçamento interno */
    display: flex;
    flex-direction: column; /* Organiza os itens em coluna */
    align-items: center; /* Centraliza os itens horizontalmente */
    justify-content: center; /* Centraliza os itens verticalmente */
    text-align: center; /* Centraliza o texto */
    text-decoration: none; /* Remove o sublinhado */
    background-color: #e1e5e9;
    color: var(--text-color); /* Cor do texto */
    font-size: 1rem; /* Tamanho da fonte */
    font-weight: bold; /* Negrito */
}
/* ============================
   ESTILO DO BOTÃO VOLTAR AO TOPO
============================ */
.back-to-top {
    position: fixed; /* Fixa o botão na tela */
    bottom: 20px; /* Distância do fundo da tela */
    right: 20px; /* Distância da direita da tela */
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}
.back-to-top:hover {
    background-color: #ff5722;
    transform: scale(1.05); /* Efeito de hover */
    -webkit-transform: scale(1.05); /* Prefixo para navegadores antigos */
    -moz-transform: scale(1.05); /* Prefixo para navegadores antigos */
}
/* ============================
   RESPONSIVIDADE
============================ */
@media (max-width: 768px) {
    .logo {
        width: 100px; /* Reduz o tamanho do logotipo em telas menores */
    }

    .background-img {
        max-width: 300px; /* Reduz o tamanho máximo da imagem */
    }

    .nav ul {
        flex-direction: column; /* Empilha os itens do menu verticalmente */
        gap: 1rem;
    }

    .projetos-lista {
        flex-direction: column; /* Empilha os itens verticalmente */
    }

    .projeto-item {
        width: 100%; /* Faz os itens ocuparem toda a largura */
        height: auto;
    }
}

@media (max-width: 480px) {
    .logo {
        width: 80px; /* Reduz ainda mais o tamanho do logotipo */
    }

    .background-img {
        max-width: 200px; /* Reduz ainda mais o tamanho máximo da imagem */
    }

    header h1 {
        font-size: 1.2rem; /* Reduz o tamanho do título */
    }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    img {
        image-rendering: crisp-edges;
    }
}