/* -------------------------------- Fontes -------------------------------- */


@font-face {
    font-family: 'Poppins'; /* Define a fonte com o nome "Poppins" */
    src: url('../fonts/Poppins/Poppins-Bold.ttf') format('truetype'), /* Fonte em formato TrueType para negrito */
         url('../fonts/Poppins/Poppins-ExtraBold.ttf') format('truetype'); /* Fonte extra-negrito */
    font-weight: bold; /* Define o peso da fonte como negrito */
    font-style: normal; /* Define o estilo da fonte como normal */
}

@font-face {
    font-family: 'Poppins-Italic'; /* Define a fonte "Poppins-Italic" */
    src: url('../fonts/Poppins/Poppins-Regular.ttf') format('truetype'); /* Fonte regular */
    font-weight: normal; /* Peso normal */
    font-style: normal; /* Estilo normal */
}

@font-face {
    font-family: 'Acumin'; /* Define a fonte "Acumin" */
    src: url('../fonts/Acumin-RPro.otf') format('opentype'), /* Fonte regular */
         url('../fonts/Acumin-ItpPro.otf') format('opentype'); /* Fonte adicional */
    font-weight: normal; /* Peso normal */
    font-style: normal; /* Estilo normal */
}

@font-face {
    font-family: 'Acumin'; /* Define outra variação da fonte "Acumin" */
    src: url('../fonts/Acumin-BdltPro.otf') format('opentype'), /* Fonte em negrito leve */
         url('../fonts/Acumin-BdPro.otf') format('opentype'); /* Fonte em negrito */
    font-weight: bold; /* Peso negrito */
    font-style: normal; /* Estilo normal */
}

@font-face {
    font-family: 'PowerGrotesk'; /* Define a fonte "PowerGrotesk" */
    src: url('../fonts/PowerGrotesk-Regular.ttf') format('truetype'); /* Fonte regular */
    font-weight: normal; /* Peso normal */
    font-style: normal; /* Estilo normal */
}


/* -------------------------------- Estilo geral -------------------------------- */
* {
    box-sizing: border-box;
}
body {
    margin: 0; /* Remove as margens padrão do corpo da página */
    font-family: 'PowerGrotesk', normal; /* Aplica a fonte "PowerGrotesk" como padrão */
    color: #002414; /* Define a cor do texto como verde escuro */
    background-color: #fff; /* Define o fundo como branco */
    overflow-x: hidden; /* Impede rolagem horizontal na página */
    width: 100%;
    margin: 0;
    padding: 0;
}

.container {
    width: 100%; /* Ocupa 100% da largura disponível */
    margin: 0; /* Remove margens externas */
    padding: 0; /* Remove preenchimento interno */
    box-sizing: border-box; /* Inclui bordas e preenchimento no cálculo da largura total */
    overflow-x: hidden;
}


/* -------------------------------- Menu superior -------------------------------- */

.header {
    position: fixed; /* Posiciona o cabeçalho fixamente no topo */
    top: 0; /* Fixa no topo da página */
    left: 0; /* Começa no lado esquerdo */
    width: 100%; /* Ocupa toda a largura da página */
    height: auto; /* Altura ajustável automaticamente */
    padding: 10px 20px; /* Espaçamento interno (superior/inferior: 10px, laterais: 20px) */
    background: #002414; /* Fundo verde escuro */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil no cabeçalho */
    z-index: 1000; /* Eleva o cabeçalho acima de outros elementos */
    display: flex; /* Usa flexbox para alinhar os itens */
    align-items: center; /* Alinha os itens verticalmente ao centro */
    justify-content: space-between; /* Distribui os itens nos extremos */
    box-sizing: border-box; /* Inclui o preenchimento no cálculo do tamanho */
}

.header .menu-toggle {
    margin-left: auto;
    display: none; /* Esconde o botão de menu no desktop */
    background: none;
    border: none;
    color: white;
    font-size: 24px; /* Tamanho do ícone */
    cursor: pointer;
    
}


.header .logo img {
    max-height: 90px; /* Limita a altura máxima da logo */
    height: auto; /* Ajusta automaticamente a altura proporcional */
    padding-left: 70px;
    flex-shrink: 0; /* Evita que a logo diminua de tamanho */
}

.header nav {
    display: flex; /* Define um contêiner flexível para os itens do menu */
    align-items: center; /* Centraliza os itens verticalmente */
    flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha, se necessário */
    gap: 15px; /* Espaçamento entre os itens */
    flex-grow: 1; /* Faz o menu crescer ocupando o espaço restante */
    justify-content: flex-end; /* Alinha os itens à direita */
}

/* Estilo para o menu no modo desktop */
.header nav ul {
    display: flex; /* Mostra o menu horizontalmente no desktop */
    list-style: none; /* Remove marcadores da lista */
    margin: 0;
    padding: 0;
    gap: 15px; /* Espaçamento entre os itens */
}

.header nav ul li a {
    text-decoration: none; /* Remove o sublinhado dos links */
    color: #fff; /* Cor do texto branco */
    font-weight: normal; /* Peso normal para o texto */
    font-size: 1em; /* Tamanho da fonte padrão */
    transition: color 0.3s; /* Transição suave na mudança de cor */
    margin-right: 20px; /* Espaçamento extra à direita dos itens do menu */
}

.header nav ul li a:hover {
    color: #dcdcdc; /* Muda a cor do texto para verde claro no hover */
}


.header .cta-button {
    background-color: #fff; /* Fundo branco do botão */
    color: #002414; /* Texto em verde escuro */
    padding: 10px 20px; /* Espaçamento interno (vertical: 10px, horizontal: 20px) */
    border: none; /* Remove bordas padrão */
    border-radius: 25px; /* Bordas arredondadas */
    font-weight: bold; /* Texto em negrito */
    font-size: 0.9em; /* Tamanho levemente menor do texto */
    cursor: pointer; /* Mostra o ícone de "mãozinha" ao passar o mouse */
    transition: background-color 0.3s, color 0.3s; /* Transição suave para mudança de cores */
    white-space: nowrap; /* Evita quebra de linha no texto do botão */
    margin-left: auto; /* Empurra o botão para a extremidade direita */
}

.header .cta-button-conteiner {
    white-space: wrap; /* Permite quebra de linha nos elementos internos, se necessário */
    margin-left: auto; /* Alinha à direita */
    margin-right: auto; /* Centraliza, se combinado com elementos de mesma classe */
}

.header .cta-button:hover {
    background-color: #002414; /* Fundo muda para verde claro ao passar o mouse */
    color: #fff; /* Texto muda para branco no hover */
}





/* -------------------------------- Menu Superior -------------------------------- */
.header {
    position: fixed; /* Fixa no topo da página */
    top: 0;
    left: 0;
    width: 100%; /* Ocupa toda a largura */
    height: auto;
    padding: 10px 20px;
    background: #002414; /* Fundo verde escuro */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* Garante que o menu fique acima de outros elementos */
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.header nav ul {
    display: flex;
    list-style: none; /* Remove marcadores */
    margin: 0;
    padding: 0;
    gap: 15px; /* Espaçamento entre os itens */
}

.header nav ul li a {
    text-decoration: none; /* Remove sublinhado */
    color: #fff; /* Texto branco */
    font-weight: normal;
    font-size: 1em;
    transition: color 0.3s; /* Transição suave */
}

.header nav ul li a:hover {
    color: #dcdcdc; /* Verde claro no hover */
}

.header .logo img {
    max-height: 60px; /* Altura ajustável */
    height: auto;
}


/* -------------------------------- Responsividade-------------------------------- */
@media (max-width: 768px) {
    .header {
        height: auto;
        display: flex;
        flex-direction: row; /* Alinha os itens horizontalmente */
        align-items: center;
        justify-content: space-between; /* Espaço entre logo e botão do menu */
        padding: 10px 15px;
    }

    .header .logo {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        padding-right: 70%;
    }

    .header .logo img {
        max-height: 60px;
        padding-left: 2vh; /* Adiciona espaçamento entre a logo e o menu */
        
    }

    .header .menu-toggle {
        display: block; /* Mostra o botão de menu no celular */
        background: none;
        border: none;
        color: white;
        font-size: 2rem;
        cursor: pointer;
        z-index: 20;
    }

    .header nav {
        width: 100%;
    }

    .header nav ul {
        display: none;
        flex-direction: column;
        background-color: rgba(0, 0, 0, 0.9);
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 10px 0;
        z-index: 10;
    }

    .header nav ul.show {
        display: flex;
    }

    .header nav ul li {
        width: 100%;
        text-align: center;
        padding: 10px 0;
    }

    .header nav ul li a {
        color: white;
        text-decoration: none;
        font-size: 1rem;
        font-weight: bold;
        padding: 10px 20px;
        display: block;
        transition: background-color 0.3s ease;
    }

    .header nav ul li a:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }
}

/* -------------------------------- Seção Hero -------------------------------- */
.hero {
    height: 40vh; /* Ocupa 40% da altura da tela */
    background: url('../images/wallpaperinicial.jpeg') center/cover no-repeat; /* Imagem de fundo responsiva */
    position: relative;
    overflow: hidden;
    margin-top: 80px; /* Ajuste para o menu fixo */
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Sobreposição preta semitransparente */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2; /* Conteúdo acima da sobreposição */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%; /* Ocupa toda a altura do hero */
    text-align: center;
    color: white;
}

/* -------------------------------- Texto Hero -------------------------------- */
.hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 60vh; /* Preenche o restante da tela (60%) */
    padding: 20px;
    background: #f4f4f4; /* Fundo claro para diferenciar do hero */
}

.hero-text h2 {
    font-size: 3.0rem;
    color: #002414;
    margin-bottom: 20px;
}

.hero-text .line {
    width: 50%;
    max-width: 400px;
    height: 2px;
    background-color: #002414;
    margin: 10px auto;
}

.hero-text .btn-secondary {
    padding: 12px 25px;
    background-color: #fdd835;
    color: #002414;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2rem;
    transition: all 0.3s ease-in-out;
    margin-top: 20px;
}

.hero-text .btn-secondary:hover {
    background-color: #002414;
    color: white;
}

.scroll-indicator {
    margin-top: 20px;
}

.scroll-indicator img {
    width: 20px;
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}

.scroll-indicator img:hover {
    transform: scale(1.2); /* Aumenta o tamanho no hover */
}

/* Ajustes para dispositivos móveis */
@media (max-width: 768px) {
    .hero {
        height: 50vh; /* Expande o wallpaper no celular */
        background-size: cover; /* Garante que o wallpaper ocupe toda a área */
        background-position: center; /* Centraliza o wallpaper */
    }

    .hero-text {
        height: 45vh; /* Ajusta a altura do texto automaticamente */
        padding: 20px; /* Adiciona espaçamento interno */
    }

    .hero-text h2 {
        font-size: 1.8rem; /* Tamanho maior para o título no celular */
    }

    .hero-text .btn-secondary {
        font-size: 1rem; /* Ajusta o tamanho do botão */
        padding: 12px 25px; /* Tamanho mais confortável do botão */
    }

    .scroll-indicator img {
        width: 20px; /* Ajusta o tamanho da seta */
    }
}


/* -------------------------------- ZETA INICIAL -------------------------------- */
.scroll-indicator {
    display: flex; /* Define um contêiner flexível */
    justify-content: center; /* Centraliza a seta horizontalmente */
}

.scroll-indicator img {
    width: 20px; /* Define a largura da imagem como 40px */
    height: auto; /* Mantém a proporção da imagem */
    cursor: pointer; /* Exibe o ícone de "mãozinha" ao passar o mouse */
    transition: transform 0.3s ease-in-out; /* Animação suave ao interagir */
}

.scroll-indicator img:hover {
    transform: scale(1.1); /* Aumenta ligeiramente o tamanho ao passar o mouse */
}



/* -------------------------------- Projetos -------------------------------- */

.projects-section {
    background: url('../images/fundo2.jpg') center/cover no-repeat; /* Fundo responsivo */
    padding: 60px 20px;
    color: #fff;
    height: 80vh;
    position: relative;
    overflow: visible;
    z-index: 1;
}

.projects-section h2 {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 40px;
    font-family: 'Poppins', normal;
    color: #fff;
}
/* Carrossel Container */
.carousel-container {
    display: flex;
    justify-content: flex-start; /* Alinha todas as caixas à esquerda */
    overflow: visible; /* Permite que todas as caixas fiquem visíveis */
    position: relative;
    width: 100%;
    max-width: 1200px; /* Ajusta a largura total do carrossel */
    margin: 0 auto;
    margin-left: 90px;
}

/* Carrossel */
.carousel {
    display: flex;
    gap: 20px; /* Espaçamento entre as caixas */
    transition: transform 0.5s ease-in-out;
    position: relative;
    align-items: flex-start; /* Garante alinhamento superior */
    width: 100%; /* Ocupa toda a largura disponível */
}
/* Caixa do Projeto */
.project-card {
    flex: 0 0 320px; /* Define a largura fixa */
    background: #fff;
    color: #002414;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    display: flex;
    flex-direction: column;
    padding: 15px;
    transition: transform 0.3s ease, z-index 0.3s ease;
    z-index: 1;
    position: relative;

}



/* Efeito de Hover na Caixa */
.project-card:hover {
    overflow: visible; /* Permite que o conteúdo ultrapasse a caixa */
    transform: scale(1.1); /* Aumenta ligeiramente no hover */
    z-index: 10; /* Garante que a caixa fique acima dos outros elementos */
}

/* Ajustes para a Imagem */
.project-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
}

.project-card h3 {
    font-size: 1.2em;
    margin: 10px 0;
    color: #002414;
}

.project-card p {
    font-size: 0.9em;
    color: #555;
}

.details {
    display: flex;
    justify-content: space-around;
    margin: 10px 0;
}

.details span {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9em;
    color: #002414;
}

.details img {
    width: 20px;
    height: auto;
}

/* Botões de Navegação */
.carousel-btn {
    position: absolute;
    top: 50%; /* Centraliza verticalmente */
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 15;
    background: none;
    border: none;
    width: 50px;
    height: 50px;
}

/* Botões Ajustados */
.prev-btn {
    left: 20px; /* Ajusta para fora */
}

.next-btn {
    right: 20px; /* Ajusta para fora */
}

/* Ajusta Imagem do Botão */
.carousel-btn img {
    width: 100%;
    height: auto;
    overflow: visible;
}

/* Barra de Rolagem Oculta */
.carousel-container::-webkit-scrollbar {
    display: none;
    
}

/* Botão "Tenho Interesse" */
.btn-interest {
    margin-top: 40px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 15px 30px;
    background-color: #fdd835;
    color: #002414;
    border-radius: 25px;
    font-weight: bold;
    font-size: 1.2em;
    text-decoration: none;
    text-align: center;
    left: 45%;
    transition: background-color 0.3s ease, transform 0.3s ease;
    z-index: 10;
    position: absolute; /* Alinha ao centro da tela */
}

.btn-interest:hover {
    background-color: #002414;
    color: #fff;
    transform: scale(1.1); /* Aumenta ligeiramente no hover */
}
@media (max-width: 768px) {
    /* Ajusta a seção do carrossel */
    .projects-section {
        position: relative;
        text-align: center;
        padding: 20px 10px;
        width: 100%;
        min-height: 100vh; /* Garante que ocupa a altura total da tela */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        background: url('../images/wallpaperceluar.jpg') center center no-repeat; 
        background-size: cover;
    }

    /* Container do carrossel */
    .carousel-container {
        width: 100%;
        display: flex;
        justify-content: center;
        overflow: hidden;
        margin: 0 auto;
    }

    .carousel {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        transition: transform 0.3s ease-in-out;
    }

    /* Cards do carrossel - exibe 1 por vez, todos com mesma altura */
    .project-card {
        flex: 0 0 90%; /* Ocupa 90% da largura da tela */
        max-width: 320px;
        margin: 0 auto 20px;
        background: #fff;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        text-align: center;
        position: relative;
        height: 420px; /* Força mesma altura para todos os cards */
    }

    .project-card img {
        width: 100%;
        height: 180px; /* Altura fixa para padronização */
        object-fit: cover;
        border-radius: 10px 10px 0 0;
    }

    .project-card h3 {
        font-size: 1em;
        margin: 10px 0;
    }

    .project-card p {
        font-size: 0.9em;
        margin: 0 0 10px;
    }

    .project-card .details {
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 0.8em;
        color: #666;
        margin: 10px 0;
    }

    .project-card .details span {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .project-card .details img {
        width: 18px;
        height: 18px;
    }

    /* Botão "Tenho Interesse" */
    .btn-interest {
        position: absolute;
        bottom: 10%; /* Posicionado a 10% do final da seção */
        left: 50%; /* Centraliza horizontalmente */
        transform: translateX(-50%);
        padding: 12px 25px;
        font-size: 1em;
        border-radius: 25px;
        background-color: #0c6c38;
        color: #ffffff;
        text-decoration: none;
        font-weight: bold;
        text-align: center;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        max-width: 250px;
        width: 90%;
    }

    .btn-interest:hover {
        background-color: #002414;
        color: #0c6c38;
        border: 2px solid #0c6c38;
    }

    /* Botões de navegação do carrossel */
    .carousel-btn {
        display: flex;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        border: none;
        padding: 10px;
        border-radius: 50%;
        cursor: pointer;
        z-index: 15;
    }

    .carousel-btn.prev-btn {
        left: 10px;
    }

    .carousel-btn.next-btn {
        right: 10px;
    }
}

@media (hover: none) {
    .btn-interest:hover {
        background-color: #0c6c38 !important; /* Volta ao estilo original */
        color: #ffffff !important;
        border: none !important;
        cursor: pointer;
    }
}

/* -------------------------------- Quem Somos -------------------------------- */
.quem-somos {
    background: url('/construction-company-portal/src/images/wallpaper3.jpg') no-repeat center center; /* Wallpaper aplicado */
    background-size: cover; /* Ajusta o wallpaper sem repetir */
    width: 100%; /* Ocupa toda a largura */
    height: auto; /* Altura dinâmica baseada no conteúdo interno */
    box-sizing: border-box; /* Inclui padding na largura total */
    padding-bottom: 40px; /* Espaço extra abaixo */
}
.quem-somos-header h2 {
    font-size: 3.0em;
    font-weight: bold;
    text-align: center;
}

/* Alinhamento das bolinhas (team-container) */
.team-container {
    display: flex; /* Ativa o layout flexível */
    justify-content: center; /* Centraliza as bolinhas no meio */
    gap: 110px; /* Espaçamento horizontal entre as bolinhas */
    flex-wrap: wrap; /* Permite quebra de linha caso o espaço seja insuficiente */
    padding-top: 110px; /* Adiciona espaçamento no topo da seção */
    height: auto;
}

/* Estilização de cada membro */
.team-member {
    display: flex;
    flex-direction: column; /* Título e descrição ficam abaixo da bolinha */
    align-items: center;
    text-align: center;
    width: 200px; /* Largura fixa para cada membro */
}

/* Imagem circular */
.team-member img {
    width: 200px;
    height: 200px;
    border-radius: 50%; /* Torna a imagem circular */
    object-fit: cover;
    margin-bottom: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

/* Nome e título do membro */
.member-info h3 {
    font-size: 1.2em;
    font-weight: bold;
    margin: 5px 0;
}

.member-info p {
    font-size: 1em;
    color: #333333;
    margin: 0;
}
/* Green-section */
.green-section {
    text-align: center;
    font-family: 'Poppins', sans-serif;
    padding: 60px 20px;
    color: #ffffff;
    background-color: #002414; /* Fundo da green-section */
    width: 100%;
    margin-top: 70px;
    margin-bottom: 20px; /* Espaçamento inferior para evitar sobreposição */
    position: relative; /* Mantém o fluxo natural */
    height: auto; /* Garante altura dinâmica */
}


/* Parágrafo */
.green-section p {
    font-size: 1.2em;
    margin-bottom: 30px;
    line-height: 1.6;
}
.green-section h3 {
    font-size: 2.5em;
    margin-bottom: 20px;
    font-family: 'PowerGrotesk';
}

/* Botão */
.contact-button {
    background-color: #0c6c38;
    color: #ffffff;
    border: none;
    padding: 15px 30px;
    border-radius: 25px;
    font-size: 1.1em;
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    font-style: normal;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    margin-top: 20px; /* Adicionado para criar espaçamento acima */
    margin-bottom: 10px; /* Espaçamento inferior */
    text-decoration: none; /* Remove sublinhado */
    display: inline-block; /* Para garantir comportamento consistente */
}

/* Efeito no botão ao passar o mouse */
.contact-button:hover {
    background-color: #002414;
    color: #0c6c38;
    border: 2px solid #0c6c38;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    .green-section {
        width: 100%;/* Espaço extra abaixo da seção */
        height: auto;
        position: relative; 
    }
    /* Ajusta o layout para 1 bolinha em cima e 2 embaixo */
    .team-container {
        display: grid; /* Altera para layout de grade */
        grid-template-columns: 1fr; /* Uma coluna na primeira linha */
        grid-template-rows: auto auto; /* Ajusta as linhas automaticamente */
        gap: 20px; /* Espaçamento entre os itens */
    }

    .team-container > .team-member:nth-child(n+2) {
        grid-column: span 1; /* Segunda e terceira bolinhas na segunda linha */
        display: inline-block; /* Mantém o comportamento de bloco */
    }

    .team-container > .team-member:first-child {
        grid-column: span 2; /* Bolinha centralizada na primeira linha */
        margin: auto; /* Centraliza horizontalmente */
    }
}

/* -------------------------------- Formulario -------------------------------- */
/* Seção do formulário */
.contact-section {
    background: url('/construction-company-portal/src/images/wallpaper10.png') no-repeat center center;
    background-size: cover;
    height: 120vh; /* Ajusta a altura ao tamanho da tela */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333333;

}

/* Container do formulário */
.contact-container {
    background-color: rgba(255, 255, 255, 0.9); /* Fundo branco semitransparente */
    padding: 40px 20px;
    border-radius: 10px;
    max-width: 600px;
    width: 100%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* Título */
.contact-container h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 30px;
    color: #333333; /* Verde escuro */
}

/* Formulário */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Inputs e Textarea */
.contact-form input,
.contact-form textarea {
    font-family: 'Poppins', sans-serif;
    font-size: 1em;
    padding: 10px 15px;
    border: 1px solid #0c6c38; /* Verde escuro */
    border-radius: 5px;
    outline: none;
    color: #333333;
}

.contact-form textarea {
    resize: none; /* Remove redimensionamento */
}

/* Botão */
.contact-button {
    background-color: #f5f5f5; /* Dourado */
    color: #333333; /* Texto escuro para contraste */
    border: 2px solid #f5f5f5; /* Borda em tom creme */
    padding: 15px 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

.contact-button:hover {
    background-color: #faf4e6; /* Creme */
    color: #333333; /* Texto escuro */
    border: 2px solid #faf4e6; /* Borda dourada */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Aumenta a sombra */
}

/* Inputs e Textarea */
.contact-form input,
.contact-form textarea {
    font-family: 'Poppins', sans-serif;
    font-size: 1em;
    padding: 10px 15px;
    border: 1px solid #f5f5f5; /* Borda em tom creme */
    border-radius: 5px;
    outline: none;
    color: #333333;
}

.contact-form textarea {
    resize: none; /* Remove redimensionamento */
}
@media (max-width: 768px) {

    .contact-section {
        min-height: 450px; /* Garante altura mínima para o formulário */
    }
}


/* -------------------------------- Rodape -------------------------------- */
/* Estilização do rodapé */
.site-footer {
    background-color: #002b16; /* Fundo verde escuro */
    color: #ffffff; /* Texto branco */
    display: flex;
    justify-content: space-between; /* Espaça logo e texto */
    align-items: flex-start; /* Alinha logo ao topo */
    padding: 0 40px; /* Remove espaçamento superior/inferior, mantém laterais */
}

/* Logo no rodapé */
.footer-logo img {
    width: 150px; /* Tamanho fixo da logo */
    height: auto; /* Mantém proporção */
    margin: 0; /* Remove qualquer margem ao redor da logo */
    padding: 0; /* Remove padding */
    margin-top: -15px;
    align-self: flex-start; /* Garante que a logo fique no topo */
}

/* Informações no rodapé */
.footer-info {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9em; /* Tamanho do texto */
    line-height: 1.5; /* Espaçamento entre linhas */
    text-align: right; /* Alinha texto à direita */
    max-width: 400px; /* Limita a largura do texto */
    flex: 1; /* Garante que o texto ocupe o espaço restante */
    margin: 0; /* Remove margens adicionais */
    padding: 20px 0; /* Adiciona um pequeno espaçamento interno apenas no texto */
}



/* Responsividade para telas menores */
@media (max-width: 768px) {
    .site-footer {
        flex-direction: column; /* Empilha logo e texto no mobile */
        align-items: center; /* Centraliza conteúdo */
    }

    .footer-logo {
        margin-bottom: 20px; /* Espaçamento abaixo da logo */
    }

    .footer-info {
        text-align: center; /* Centraliza o texto no mobile */
        max-width: 100%; /* Remove limite de largura */
    }
}