/* Estilo da Barra de Navegação */
body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    font-size: 16px; /* Tamanho base da fonte */
    line-height: 1.6; /* Melhor leitura */
    color: #333; /* Cor do texto */
    background-color: #f4f4f9; /* Cor de fundo suave */
    -webkit-font-smoothing: antialiased; /* Melhora o render de fontes */
    -moz-osx-font-smoothing: grayscale;
    align-items: center;
}


nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #F0F0F2;
    position: relative;
}

.logo img {
    max-width: 100px;
    margin-left: 5px;
}

.menu {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.menu li {
    margin: 0 15px;

}

.menu a {
    color: #515254;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
}

.menu a:hover {
    color: #2E42A1;
}

/* Botão "Agendar sua Reunião" */
#whatsappButton {
    background-color: #515254;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#whatsappButton:hover {
    background-color: #2E42A1;
}

/* Hamburger Menu */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.hamburger .bar {
    width: 25px;
    height: 3px;
    margin: 4px 0;
    background-color: #000;
    transition: 0.3s;
}

/* Responsividade */
.menuResponsive {
    display: none;
    position: absolute;
    top: 80px;
    right: 0;
    background-color: #F0F0F2;
    width: 100%;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.menuResponsive ul {
    list-style: none;
    padding: 0;
}

.menuResponsive li {
    margin: 10px 0;
    text-align: center;
}

.menuResponsive a {
    color: #8C8C8C;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
}

.menuResponsive a:hover {
    color: #2E42A1;
}

/* Estilo para telas pequenas */
@media (max-width: 768px) {
    /* O menu deve estar oculto inicialmente */
    .menu {
        display: none;
    }

    /* O hamburger deve ser exibido e ficar em uma camada acima do conteúdo */
    .hamburger {
        display: flex;
        position: relative;  /* Garante que o menu fique visível na tela */
        z-index: 1000;  /* Coloca o hamburger acima de outros conteúdos */
    }

    /* Menu Responsivo */
    #menuResponsive {
        display: none;   /* O menu responsivo está oculto por padrão */
        position: absolute; /* Faz o menu aparecer sobre o conteúdo */
        top: 0;   /* Alinha o menu ao topo */
        left: 0;  /* Alinha o menu à esquerda */
        background-color: rgba(0, 0, 0, 0.9); /* Fundo escuro para o menu */
        width: 100%; /* O menu ocupa toda a largura da tela */
        height: 100%; /* O menu ocupa toda a altura da tela */
        z-index: 999; /* Coloca o menu atrás do hamburger */
        display: none; /* Inicialmente oculto */
    }

    /* Itens dentro do menu */
    #menuResponsive a {
        color: white;
        padding: 15px;
        text-decoration: none;
        display: block;
        text-align: center;
    }

    /* Hover para os itens */
    #menuResponsive a:hover {
        background-color: #444;
    }
}



/* Estilo da Seção Home */
#home {
    background-image: url('/img/banner4.png');
    background-size: cover;
    background-position: center;
    padding: 80px 0; /* Reduzido de 100px para 80px */
    position: relative;
    height: 70vh;
    display: flex;
    justify-content: flex-start; /* Conteúdo à esquerda */
    align-items: center;
    top:-10px;
}

#home::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1); /* Sombra escura sobre a imagem */
    z-index: 1;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin-left: 32px; /* Reduzido de 40px para 32px */
    z-index: 2;
}

.text-container h1,
.text-container h2 {
    color: white;
    text-transform: uppercase;
    font-weight: bold;
}

.text-container h1 {
    font-size: 48px; /* Reduzido de 60px para 48px */
    margin-bottom: 8px; /* Reduzido de 10px para 8px */
}

.text-container h2 {
    font-size: 36px; /* Reduzido de 45px para 36px */
    margin-bottom: 16px; /* Reduzido de 20px para 16px */
    margin-top: 8px; /* Reduzido de 10px para 8px */
}

.text-container p {
    color: white;
    font-size: 16px; /* Reduzido de 20px para 16px */
    margin-bottom: 24px; /* Reduzido de 30px para 24px */
}

/* Estilo dos Botões */
.buttons-container {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Reduzido de 20px para 16px */
}

.service-btn {
    background-color: #545454;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    padding: 12px 24px; /* Reduzido de 15px 30px para 12px 24px */
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 2px solid white; /* Moldura branca para os botões */
    border-radius: 30px; /* Tornando os botões ovais */
    cursor: pointer;
    width:100%;
    transition: transform 0.3s ease-in-out;
    font-size: 8px; /* Reduzido de 10px para 8px */
    box-sizing: border-box;
}

.service-btn img {
    height: 40px; /* Reduzido de 50px para 40px */
    margin-right: 12px; /* Reduzido de 15px para 12px */
    align-items: center;
}

.service-btn:hover {
    transform: scale(1.05); /* Animação de aumento do botão */
}

/* Responsividade para telas menores */
@media (max-width: 768px) {
    #home {
        padding: 40px 0; /* Reduzido de 50px para 40px */
        background-position: top center; /* Foca a parte superior central da imagem */
        background-size: cover; /* Faz com que a imagem preencha toda a área, sem repetir */
        background-repeat: no-repeat; /* Impede que a imagem de fundo se repita */
        height: auto; /* Remove a altura fixa para permitir o ajuste automático */

    }

    .content {
        margin-left: 0; /* Remove a margem lateral */
        align-items: center; /* Centraliza o conteúdo */
        text-align: center;

       
    }

    .text-container h1 {
        font-size: 32px; /* Reduzido de 40px para 32px */
        margin-left: 30px;
        color:#fff ;
        
        
    }

    .text-container h2 {
        font-size: 24px; /* Reduzido de 30px para 24px */
        text-align: center;
        margin-left: 30px;
        color:#fff ;
        
    }

    .text-container p {
        font-size: 18px; /* Reduzido de 30px para 24px */
        text-align: center;
        margin-left: 30px;
        color:#fff ;
        
    }
    .service-btn {
        font-size: 10px; /* Reduzido de 12px para 10px */
        padding: 10px 20px; /* Reduzido de 12px 25px para 10px 20px */
        width: 80%; /* Tornar os botões um pouco menores em dispositivos móveis */
        align-items: center;
        margin-left: 30px;
    }

    .buttons-container {
        align-items: center;
        text-align: center;
    }
}



/* Estilos Gerais */
/* Estilos Gerais */
#solucoes {
    padding: 50px;
    background-color: #f9f9f9;
}

/* Títulos */
.titulo {
    text-align: center;
    color: black;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 30px;
    margin-left: -20px;
}

.cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 20px;
    align-items: center;
}

.card {
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 20px;
    width: calc(33.33% - 40px); /* Três cartões por linha */
    max-width: 300px; /* Limite máximo de largura */
    min-width: 250px; /* Largura mínima */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: fadeIn 0.8s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.icon-container {
    font-size: 4rem; /* Tamanho do ícone */
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000; /* Cor padrão preta */
}

.card:hover .icon-container {
    color: #555; /* Alteração de cor ao passar o mouse */
}

.card p {
    font-size: 16px;
    color: #333;
    margin-top: auto;
}

/* RESPONSIVIDADE */

/* Telas médias: Ajusta para duas colunas */
@media (max-width: 768px) {
    .card {
        width: calc(50% - 40px); /* Duas colunas */
    }
}

/* Telas pequenas: Ajusta para uma coluna */
@media (max-width: 480px) {
    .card {
        width: 100%; /* Uma coluna */
        min-width: unset; /* Remove largura mínima para ocupar toda a linha */
    }
}



@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsividade */
@media (max-width: 768px) {
    .card {
        width: calc(100% / 2 - 20px); /* 2 cards por linha */
        margin-left: -20px;
    }
}

@media (max-width: 480px) {
    .card {
        width: 100%; /* 1 card por linha */
    }
}


/* Estilos para os Pilares */
.pilares-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}

.pilar {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    color: black;
    text-transform: uppercase;
    opacity: 0;
    animation: fadeInUp 0.5s ease forwards;
}

.pilar img {
    width: 24px;
    height: 24px;
}

/* Ajuste exclusivo para a seção Pilares na responsividade */
@media (max-width: 768px) {
    #pilares .imagem-container img {
        width: 150%; /* Ajuste a largura para preencher melhor o espaço disponível */
        max-width: 300px; /* Limite máximo para evitar imagens muito grandes */
        margin: 0 auto; /* Centraliza a imagem no container */
    }

    #pilares .imagem-container {
        margin-top: 10px; /* Reduz o espaçamento superior */
    }
}

/* Animações */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Atraso para animação de cada card */
.cards-container .card:nth-child(1) { animation-delay: 0.1s; }
.cards-container .card:nth-child(2) { animation-delay: 0.2s; }
.cards-container .card:nth-child(3) { animation-delay: 0.3s; }
.cards-container .card:nth-child(4) { animation-delay: 0.4s; }
.cards-container .card:nth-child(5) { animation-delay: 0.5s; }
.cards-container .card:nth-child(6) { animation-delay: 0.6s; }

/* Atraso para animação de cada pilar */
.pilares-container .pilar:nth-child(1) { animation-delay: 0.2s; }
.pilares-container .pilar:nth-child(2) { animation-delay: 0.3s; }
.pilares-container .pilar:nth-child(3) { animation-delay: 0.4s; }
.pilares-container .pilar:nth-child(4) { animation-delay: 0.5s; }


/* Estilos para a seção "Quem Somos" */
#quem-somos {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* Remove o espaço interno para maximizar o uso da área */
    height: 70vh; /* A seção ocupará toda a altura da tela */
    background-color: #f9f9f9; /* Fundo escuro */
    animation: fadeInUp 0.6s ease forwards;
}

.imagem-container img {
    width: 100%; /* A imagem ocupará toda a largura disponível */
    height: 100%; /* A imagem ocupará toda a altura disponível */
    object-fit: cover; /* Garante que a imagem seja cortada proporcionalmente */
    border-radius: 0; /* Remove bordas arredondadas para um estilo clean */
    animation: fadeInUp 0.6s ease forwards;
}

/* Responsividade */
@media (max-width: 768px) {
    #quem-somos {
        height: 70vh; /* Em dispositivos menores, reduz a altura */
    }

    .imagem-container img {
        object-fit: cover; /* Garante o ajuste da imagem mesmo em dispositivos menores */
        margin-top: 70px;
    }
}

/* Animação */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* Estilos da Seção Principal */
#principais-servicos {
    padding: 50px;
    background-color: #f4f4f4;
    text-align: center;
    animation: fadeInUp 0.6s ease forwards;
}

.titulo {
    font-size: 2rem;
    color: #333;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 30px;
}

/* Container dos Cards */
.servicos-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    justify-items: center;
    margin-bottom: 30px;
}

.card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 150px;
    text-align: center;
    padding: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease forwards;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.card img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
}

.card p {
    margin-top: 10px;
    font-weight: bold;
    color: #333;
    text-transform: uppercase;
    font-size: 1rem;
}

/* Botão de Contato */
.botao-container {
    margin-top: 20px;
}

.botao-contato {
    display: inline-block;
    background-color: #333;
    color: #fff;
    padding: 12px 25px;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.botao-contato:hover {
    background-color: #555;
}

/* Responsividade */
@media (max-width: 1024px) {
    .servicos-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .servicos-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .servicos-container {
        grid-template-columns: 1fr;
    }
    .card {
        width: 100%;
    }
}

/* Animações */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Atraso de animação para os cards */
.servicos-container .card:nth-child(1) { animation-delay: 0.1s; }
.servicos-container .card:nth-child(2) { animation-delay: 0.2s; }
.servicos-container .card:nth-child(3) { animation-delay: 0.3s; }
.servicos-container .card:nth-child(4) { animation-delay: 0.4s; }
.servicos-container .card:nth-child(5) { animation-delay: 0.5s; }
.servicos-container .card:nth-child(6) { animation-delay: 0.6s; }
.servicos-container .card:nth-child(7) { animation-delay: 0.7s; }
.servicos-container .card:nth-child(8) { animation-delay: 0.8s; }
.servicos-container .card:nth-child(9) { animation-delay: 0.9s; }
.servicos-container .card:nth-child(10) { animation-delay: 1s; }



/* Estilos da Seção de Contato */
/* Estilos da Seção de Contato */
#contato {
    display: flex;
    justify-content: center; /* Centraliza o conteúdo horizontalmente */
    align-items: center;     /* Centraliza o conteúdo verticalmente */
    padding: 10px;
    background-color: #f9f9f9;
    color: #000;
    animation: fadeInUp 0.6s ease forwards;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    margin-top: -5px;
  

}

/* Contêiner Principal para os Itens (Logo, Contato, Redes Sociais) */
.container {
    display: flex;
    align-items: center;      /* Centraliza verticalmente os itens dentro do contêiner */
    justify-content: space-between;  /* Distribui logo, contato e redes sociais */
    width: 100%;
    max-width: 1200px;        /* Largura máxima do container para telas grandes */
    gap: 20px;                /* Espaço entre os itens */
}

.container h2{

    font-size: 24px;
}
/* Contêiner da Logo (à direita) */
.logo-container {
    display: flex;
    justify-content: flex-end; /* Alinha a logo à direita */
    align-items: center;       /* Centraliza a logo verticalmente */
    width: 25%;
}

.logo-container img {
    width: 200px;             /* Ajusta o tamanho da logo */
    height: auto;
    margin-right: -40px;
}

/* Contêiner de Informações de Contato (no centro) */
.informacoes-contato {
    text-align: center;       /* Centraliza o conteúdo do contato */
    width: 40%;               /* Define a largura do container do contato */
}

.informacoes-contato p,
.informacoes-contato a {
    font-size: 0.8rem;
    color: #000;
    line-height: 1.6;
    margin: 5px 0;
}

.informacoes-contato a {
    color: #000;
    text-decoration: none;
    transition: color 0.3s;
}

.informacoes-contato a:hover {
    color: #ffffff;
}

/* Contêiner de Redes Sociais (à esquerda) */
.redes-sociais {
    display: flex;
    flex-direction: column;    /* Coloca os itens em coluna */
    justify-content: flex-start; /* Alinha os ícones no topo */
    align-items: flex-start;   /* Alinha os itens à esquerda */
    width: 25%;
    font-size: 14px;
}

.icones-sociais {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.icones-sociais img {
    width: 35px;
    height: 35px;
    transition: transform 0.3s ease;
}

.icones-sociais a:hover img {
    transform: scale(1.1);
}

/* Ajuste de responsividade */
@media (max-width: 768px) {
    #contato {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .container {
        flex-direction: column; /* Empilha os itens verticalmente */
        align-items: center;
        gap: 20px;
        width: 100%;
    }

    .logo-container {
        width: 100%;
        align-items: center; /* Centraliza o conteúdo no modo mobile */
        margin-right: 150px;

    }
    .informacoes-contato{
        width: 100%;
        text-align: center;
        align-items: center;
    }
    }

    .redes-sociais{
        width: 100%;
        text-align: center;
        align-items: center;
    }

    .icones-sociais {
        justify-content: center; /* Centraliza os ícones */
    }




/* Footer */
#footer {
    background-color: #f9f9f9ff;
    text-align: center;
    padding: 5px;
    color: #000;
    font-size: 0.9rem;
}

/* Responsividade */
@media (max-width: 768px) {
    #contato {
        flex-direction: column;
        align-items: center;
        text-align: center;
        font-size: 10px;
    }

    .redes-sociais {
        text-align: center;
        font-size: 10px;
    }

    .icones-sociais {
        justify-content: center;
        font-size: 10px;
    }
}

/* Animações */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}