@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;1,100;1,300&family=Sora:wght@200;300;400;500;600&display=swap');

/* Adicione o CSS personalizado aqui */
* {
    margin: 0;
    padding: 0;
}

a {
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
}

a:hover {
    opacity: 0.7;
}

.logo {
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 4px;
}

nav {
    padding: 1rem 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-family: system-ui, -apple-system, Helvetica, Arial, sans-serif;
    background: #5E2028;
    height: 8vh;
    font-family: 'lato', sans;
}

main {
    background-color: #ffffff;
    background-size: cover;
    height: 92vh;
}

.nav-list {
    list-style: none;
    display: flex;
}

.nav-list li {
    letter-spacing: 3px;
    margin-left: 32px;
}

.mobile-menu {
    display: none;
    cursor: pointer;
}

.mobile-menu div {
    width: 32px;
    height: 2px;
    background: #fff;
    margin: 8px;
    transition: 0.3s;
}

@media (max-width: 999px) {
    body {
        overflow-x: hidden;
    }
    .subnav h1, .subnav h2, .subnav div, .subnav p
    {
        padding: 0 10px !important;
    }
    .nav-list { 
        position: absolute;
        top: 8vh;
        right: 0;
        padding: 1rem;
        width: 50vw;
        height: 92vh;
        background: #5E2028;
        flex-direction: column;
        align-items: center;
        justify-content: start;
        transform: translateX(100%);
        transition: transform 0.3s ease-in;
        z-index: 999;
        gap: 3rem;
    }
    .first-li
    {
        margin-top: 3rem;
    }
    .nav-list li {
        margin-left: 0;
        opacity: 0;
    }

    .mobile-menu {
        display: block;
    }
}

.nav-list.active {
    transform: translateX(0);
}

@keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.mobile-menu.active .line1 {
    transform: rotate(-45deg) translate(-8px, 8px);
}

.mobile-menu.active .line2 {
    opacity: 0;
}

.mobile-menu.active .line3 {
    transform: rotate(45deg) translate(-5px, -7px);
}

body{
    overflow-x: hidden;
}

.banner {
    margin-top: 5px; /* Ajuste conforme necessário para definir o espaçamento desejado */
    margin-bottom: -20px; /* Mantém o espaçamento negativo se necessário */
    color: white;
    background-image: url('/image/banner.png');
    background-size: cover;
    background-position: center;
    height: 600px;
    display: flex;
    align-items: center;
    font-family: 'lato';
    text-align: left;
    font-size: 17px;
    position: relative;
    z-index: 2; /* Valor maior do que o z-index do contador */
}

.banner-text {
    padding-left: 110px;
    background-color: rgba(199, 165, 114, 0.85);
    padding: 10px 20px;
    color: #ffffff;
    border-radius: 10px;
    margin-left: 40px;
    width: 636px;
    height: 350px;
    top: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.banner-text h1 {
    margin-bottom: 30px;
}

.banner-buttons-container {
    display: flex;
    margin-top: 20px; /* Ajuste conforme necessário para espaçamento desejado */
}

.banner-button {
    padding: 0.75em 1.5em;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.banner-button-vinho {
    background-color: #5E2028; /* Cor vinho para o botão */
    color: #ffffff; /* Cor branca para o texto */
    border: none;
}

.banner-button-vinho:hover {
    background-color: #ffffff; /* Alteração na cor de fundo ao passar o mouse */
    color: #5E2028; /* Alteração na cor do texto ao passar o mouse */
    border:none;
}

.banner-button-secondary {
    background-color: transparent;
    border: 2px solid #5E2028;
    color: #5E2028;
}

.banner-button:hover {
    background-color: #ffffff;
    color: #5E2028;
}

.banner-button-secondary:hover {
    background-color: #ffffff;
    color: #5E2028;
}

/* Adicione essa regra para evitar quebra de linha */
.banner-button:first-child {
    margin-right: 10px;
}

.counter-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    text-align: center;
    align-items: center;
    margin-bottom: 25px;
    margin-top: 40px; /* Ajuste o valor conforme necessário para posicionar mais para cima */
}

.counter-row {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.counter {
    padding: 20px;
    text-align: center;
    margin-right: 20px;
    font-family: 'lato', sans-serif;
    border-radius: 15px;
}

.count {
    font-size: 1.5em;
    font-weight: bold;
    color: #5E2028;
}

.description {
    font-size: 1.5em;
    color: #5E2028;
    margin-top: 5px;
}

@media (max-width: 768px) {
    .counter-container {
        margin-top: 35px; /* Ajuste a margem superior para posicionar mais para cima em telas menores */
    }

    .menu-container1
    {
        flex-direction: column;
        gap: 1rem;
    }
    .counter-row {
        flex-direction: column; /* Alteração para empilhar os contadores */
        gap: 10px; /* Adicionando espaçamento entre os contadores empilhados */
    }

    .counter {
        margin-right: 0; /* Removendo a margem direita para ocupar a largura total */
    }
}
@media (min-width: 1600px) {
    .counter-container {
        margin-top: -50px; /* Ajuste conforme necessário para posicionar mais para cima em telas maiores */
    }
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'lato', sans-serif;
}

h2 {
    margin-bottom: 10px;
    margin-right: 25px;
}

.button {
    border-radius: 10px;
    padding: 10px 20px;
    background-color: #C7A572;
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    font-size: 16px;
    margin-top: 20px;
}

.button:hover {
    background-color: #3B1418;
}

.content p {
    font-size: 18px;
    line-height: 1.6;
    color: #000000;
    margin-right: 20px;
}

.content {
    margin-bottom: 20px;
}


.testimonial {
    width: 90%;
    max-width: 800px;
    margin: auto;
    margin-top: 70px;
}

.testimonial-title {
    text-align: center;
    color: #5E2028; /* Escolha uma cor que combine com o design do seu site */
    font-family: 'Lato', sans-serif;
    font-size: 24px; /* Ajuste o tamanho conforme necessário */
    font-weight: bold;
    margin-bottom: 30px; /* Adiciona espaço entre o título e os depoimentos */
}

.testimonial-text {
    background: #C7A572;
    color: #000000;
    width: 100%;
    height: 350px;
    position: relative;
    box-shadow: 0 15px 20px rgba(0,0,0, 0.2);
    font-family: 'lato', sans-serif;
    border-radius: 20px;
    display: flex;
    justify-content: space-between; /* Adiciona espaço entre os elementos, posicionando-os nas extremidades */
    align-items: center; /* Mantém os elementos centralizados verticalmente */
}

.user-text {
    width: 80%;
    text-align: center;
    line-height: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

.user-text .fas {
    font-size: 30px;
    margin-bottom: 50px;
    margin-top: 20px;
}

.user-text span {
    display: block;
    font-size: 13px;
    margin-top: 70px;
    font-weight: 700;
    text-transform: uppercase;
}

.control-btn {
    width: 30px;
    height: 30px;
    cursor: pointer;
    margin: 0;
}

#nextBtn {
    transform: scaleX(-1); /* Inverte o botão horizontalmente */
}

.user-text.active-text {
    display: block;
    animation: moveup 0.5s linear forwards;
}

.user-pic.active-pic {
    width: 100px;
    border: 3px solid #5E2028;
}

@keyframes moveup {
    0% {
        margin-top: 25px;
    }

    100% {
        margin-top: 0px;
    }
}

.title {
    text-align: center;
    color: #5E2028;
    margin-bottom: 20px;
    margin-top: 20px; /* Adiciona margem superior de 20px */
    font-family: 'lato';
}

.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Assegura que os items estejam centralizados horizontalmente */
    align-items: center; /* Alinha os items no centro verticalmente, se necessário */
    max-width: 800px;
    margin: 40px auto; /* Centraliza o container na página */
    padding: 0 10px; /* Ajuste o padding conforme necessário para evitar que os cards toquem as bordas */
}

.card {
    width: calc(33.33% - 20px); /* Ajuste inicial para 3 cards por linha */
    margin: 10px; /* Espaçamento uniforme em torno de cada card */
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
}

.card:hover {
    transform: scale(1.05);
}

.card img {
    width: 100%; /* Garante que a imagem preencha completamente o card */
    height: auto; /* Mantém a proporção da imagem */
    object-fit: cover; /* Assegura que a imagem cubra o espaço disponível sem distorção */
}

@media screen and (max-width: 600px) {
    .card-container {
        justify-content: space-around; /* Mantém os cards distribuídos uniformemente */
    }
    .card {
        width: calc(50% - 20px); /* Para dois cards por linha em telas menores */
    }
}
.cta {
    background-image: url(/image/CTA\ 1865x400.png);
    background-size: cover;
    background-position: center;
    padding: 2em 0;
    text-align: center;
    font-family: 'lato';
    margin-top: 75px;
    position: relative;
}

.cta-content {
    max-width: 800px;
    margin: 0 auto;
}

.cta-title {
    color: #FFFFFF;
    font-size: 2.5em;
    margin-bottom: 1em;
}

.cta-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.cta-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #FFFFFF;
    position: relative; /* Adicionado */
}

.button-text {
    margin-top: 10px;
    position: absolute; /* Adicionado */
    bottom: 20px; 
    
}

.cta-button img {
    width: 75%;
    height: auto;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: block; /* Isso garante que a imagem é exibida como bloco */
    margin: 0 auto; /* Centraliza a imagem */
}

.cta-button:hover img {
    background-color: #f7f7f7;
    color: #5E2028;
}


.faixa-titulo {
    background-image: url(/image/faixa-quemsomos.png); 
    color: #fff;           
    padding: 60px 70px;     
    text-align: left;       
    font-size: 22px;      
    box-shadow: 0px 3px 10px rgba(0,0,0,0.2); /* Sombra opcional para dar um destaque */
    font-family: 'lato';
}
.faixa-titulo p {
    text-align: left;
    padding: 10px 20px;
    margin-left: -14px;
    font-size: 1.0em;
}

@media (max-width: 768px) {
    .faixa-titulo {
        padding: 30px 40px;  /* Reduzindo o espaçamento interno da faixa */
        font-size: 1.2em;    /* Reduzindo o tamanho da fonte */
    }
    
    .faixa-titulo p {
        padding: 5px 10px;   /* Reduzindo o espaçamento interno do parágrafo */
        margin-left: -10px;  /* Ajustando a margem esquerda */
    }
}


.conteudo-dividido {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    font-family: 'lato';
    margin-top: 20px;
    text-align: center;
}

.texto {
    white-space: pre-line; /* Permite quebras de linha no texto */
    font-size: 20px;
   
}

.new-counter-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    text-align: center;
    align-items: center;
    margin-bottom: 25px;
    margin-top: 80px; /* Ajuste o valor para movê-lo mais para baixo */
    font-size: 18px;
}

.new-counter-row {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.new-counter {
    padding: 20px;
    text-align: center;
    margin-right: 20px;
    font-family: 'lato', sans-serif;
    border-radius: 15px;
}

.new-count {
    font-size: 1.5em;
    font-weight: bold;
    color: #5E2028;
}

.new-description {
    font-size: 1.5em;
    color: #5E2028;
    margin-top: 5px;
}

@media (max-width: 768px) {
    .new-counter-container {
        margin-top: 35px; /* Ajuste a margem superior para posicionar mais para cima em telas menores */
    }
    .progress-container
    {
        flex-direction: column;

    }
    .new-counter-row {
        flex-direction: column; /* Alteração para empilhar os contadores */
        gap: 10px; /* Adicionando espaçamento entre os contadores empilhados */
    }

    .new-counter {
        margin-right: 0; /* Removendo a margem direita para ocupar a largura total */
    }
}

@media (min-width: 1600px) {
    .new-counter-container {
        margin-top: 20px; /* Ajuste conforme necessário para evitar sobreposição */
    }
}

.progress-section {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza o conteúdo na direção transversal */
    margin: 20px auto; /* Adiciona margem superior e inferior */
}

.progress-container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 800px;
    width: 100%; /* Assegura que o container ocupe a largura total */
    margin-top: -20px; /* Ajusta conforme necessário para mover o título mais para cima */
    padding: 20px;
    font-family: 'Lato';
    font-size: 20px; /* Aumenta o tamanho da fonte para melhor legibilidade */
}

/* Estilos específicos para o título */
.progress-section > h2 {
    text-align: center;
    margin-bottom: 20px; /* Ajusta o espaço entre o título e o conteúdo abaixo dele */
    font-family: 'Lato';
    font-size: 24px; /* Aumenta o tamanho da fonte do título */
}

.imagem-ao-lado-do-texto {
    border-radius: 10px;
    width: 20rem;
    max-width:90%; /* Garante que a imagem não ultrapasse a largura do contêiner */
    order: 1 !important;
}  

.history-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    font-family: 'Lato';
    margin: 20px 10px 50px; /* Adiciona 20px de espaço no topo, mantém 10px nas laterais, e adiciona 50px na base */
    text-align: center;
}

.history-text {
    color: #5E2028;
    white-space: pre-line;
    margin: 0 10px;
    font-size: 20px;
}

.history-image {
    width: 70px; /* Ajuste a largura conforme necessário */
    height: auto;
    overflow: hidden;
    margin-top: 10px; /* Margem superior adicionada */
}

.history-image img {
    width: 100%; /* A imagem preenche a largura do contêiner */
    height: auto;
}

@media (max-width: 768px) {
    .history-text {
      flex: 1;  /* Ocupa o espaço disponível */
    }
}


  
.graduacoes {
    font-family: 'lato', sans-serif;
    padding: 20px;
    max-width: 100%;  /* Mudança aqui */
    margin: 20px auto;
    background-image: url('/image/Imagens-SiteHome---Imagem-Nossos-Escritórios-800x740.png');
}

.graduacoes h2 {
    text-align: center;
    padding-bottom: 10px;
    margin-bottom: 15px;
    color: #ffffff;
}
 
.graduacoes p {
    color: var(--c-7-a-572, #C7A572);
    margin-bottom: 15px; 
    margin-top: 15px;
    text-align: center;
}

.info-box {
    padding: 10px 15px;
    border: 2px solid var(--c-7-a-572, #C7A572);
    border-radius: 5px; /* Mantém os cantos arredondados */
    background-color: transparent; /* Remove o fundo cinza */
    box-shadow: none; /* Remove a sombra */
    transition: background-color 0.3s;
    width: 90%;   
    margin: 10px auto; 
    text-align: center; 
    color: #ffffff;
}

.info-box:hover {
    background-color: #b6b5b5;; /* Adiciona um fundo cinza claro ao passar o mouse */
    transform: translateY(-5px);
}

/* Media query para telas maiores */
@media (min-width: 992px) { 
    .info-box {
        width: calc(33.33% - 20px); /* Distribui três caixas por linha em telas maiores */
    }
}

.cards-container, .profiles-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Permite que os itens se ajustem em novas linhas conforme a necessidade */
    gap: 20px; /* Espaçamento uniforme entre os cards */
    margin: 0 10px; /* Margem lateral para o container */
}

.profile-card-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Lato', sans-serif; /* Certifique-se de que 'Lato' está carregada no seu projeto */
    margin: 20px; /* Espaço ao redor de cada wrapper de card de perfil */
}

.profile-card {
    background: #5E2028; /* Cor de fundo dos cards */
    border-radius: 20px; /* Bordas arredondadas para os cards */
    padding: 20px; /* Padding interno para os conteúdos dos cards */
    width: 300px; /* Largura fixa para os cards */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* Sombra suave para um efeito elevado */
}

.profile-pic {
    width: 50px; /* Define uma largura fixa para a imagem */
    height: 50px; /* Define uma altura fixa para a imagem */
    border-radius: 50%; /* Mantém a imagem circular */
    display: block;
    margin: -40px auto 15px auto; /* Ajusta a margem para centralizar a imagem e alinhar com o topo do card */
    background: #C7A572; /* Cor de fundo para a imagem, caso seja necessário */
    object-fit: cover; /* Garante que a imagem preencha a área sem distorção, cortando o excesso */
}

.profile-name {
    text-align: center; /* Centraliza o nome horizontalmente */
    margin: 0; /* Remove a margem padrão */
    color: #ffffff; /* Cor do texto */
    font-size: 26px; /* Tamanho da fonte para o nome */
}

.profile-description {
    text-align: center; /* Centraliza a descrição horizontalmente */
    color: #ffffff; /* Cor do texto */
    font-size: 18px; /* Tamanho da fonte para a descrição */
}
.card-container img{
max-width: 100%;
}

.social-media-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Permite que os itens se ajustem em novas linhas conforme a necessidade */
    gap: 20px; /* Espaçamento uniforme entre os cards */
    margin: 0 10px 40px 10px; /* Aumenta a margem inferior para criar espaço até a próxima seção */
}

.social-media-card { /* Cor de fundo dos cards */
    border-radius: 20px; /* Bordas arredondadas para os cards */
    padding: 20px; /* Padding interno para os conteúdos dos cards */
    width: 300px; /* Largura fixa para os cards */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* Sombra suave para um efeito elevado */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Suaviza a transição do transform e do box-shadow */
}

.social-media-card img {
    max-width: 100%;
    height: auto;
    border-radius: 50%; /* Opcional: Para imagens circulares */
    display: block;
    margin: 0 auto; /* Centraliza a imagem dentro do card */
    object-fit: cover; /* Garante que a imagem cubra o espaço disponível sem distorção */
}

.social-media-card:hover {
    transform: translateY(-10px); /* Move o card para cima ao passar o mouse */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Opcional: Aumenta a sombra para um efeito mais profundo */
}

@media (max-width: 480px) {
    .social-media-card {
        width: 90%; /* Faz cada card ocupar quase toda a largura da tela */
        margin: 10px auto; /* Aumenta a margem para mais espaço ao redor */
    }
}
@media (max-width: 768px) {
    .social-media-container {
        gap: 15px; /* Ajusta o espaçamento para telas menores */
    }

    .social-media-card {
        width: 45%; /* Adapta os cards para mostrar dois por linha em dispositivos menores */
        padding: 15px; /* Reduz o padding para manter o conteúdo proporcional */
    }

    .social-media-card img {
        width: 80px; /* Ajusta o tamanho da imagem para manter a proporção visual */
        height: 80px; /* Mantém a altura igual à largura para imagens circulares */
        margin-top: 10px; /* Ajusta o posicionamento da imagem */
    }
}

@media (max-width: 480px) {
    .social-media-card {
        width: 100%; /* Permite que cada card ocupe a largura total da tela */
        margin: 10px 0; /* Ajusta as margens para melhorar o espaçamento vertical */
    }

    .social-media-card img {
        margin-top: 0; /* Remove a margem superior adicional para telas muito pequenas */
    }
}


.trabalhe-conosco-button {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    border-radius: 10px;
    background: #C7A572;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
    border: none;
}
.trabalhe-conosco-button:hover {
    background: #5E2028; 
}



.agende-sua-visita-button {
    display: block;
    margin: 10px auto; /* Reduz a margem superior para 10px para aproximar o botão do texto acima */
    padding: 10px 20px;
    border-radius: 10px;
    background: #C7A572;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
    border: none;
}

.agende-sua-visita-button:hover {
    background: #5E2028; 
}

.subnav {
    background-image: url(/image/Imagens-SiteÁreas-de-Atuação---Banner-1865x290\ 1.png);
    background-size: cover; /* Faz com que a imagem cubra toda a área do elemento */
    width: 100%;
    padding: 60px;
    text-align: center; /* Centraliza o conteúdo */
    font-family: 'lato', sans-serif;
}

.subnav p {
    color: #ffffff; /* Cor do texto */
    margin-top: 20px; /* Espaçamento superior */
    font-size: 1.2em; /* Tamanho da fonte */
}

.subnav h1, .subnav p {
    text-align: left; /* Alinha o texto dentro de h1 e p à esquerda */
    margin: 0 auto; /* Centraliza h1 e p na tela */
    max-width: 800px; /* Define a largura máxima para h1 e p */
}

.subnav a {
    margin: 20px 15px 10px; /* Adiciona espaço acima dos botões e espaço menor abaixo */
    text-decoration: none;
    color: #ffffff; /* Cor do texto */
    background-color: #C7A572; /* Cor de fundo */
    transition: background-color 0.3s, color 0.3s; 
    padding: 10px 20px; 
    border: 2px solid #C7A572; /* Cor da borda */
    display: inline-block; 
    border-radius: 10px;
}

.subnav a:hover {
    color: #5E2028; /* Cor do texto no hover */
}

.subnav h1 {
    color: #ffffff; /* Cor do texto do título */
    margin-bottom: 20px; /* Espaçamento entre o título e os botões */
    position: relative; /* Permitirá que adicionemos um elemento "after" em relação a este título */
    font-size: 2.0em; /* Tamanho da fonte para o título */
    padding-bottom: 10px; /* Espaçamento entre o título e a linha */
   

}

@media (max-width: 768px) {
    .subnav {
        text-align: center; /* Alinha os botões em uma coluna no centro */
        padding: 0; /* Remova o preenchimento para evitar espaço extra */
    }

    .subnav a {
        display: block; /* Faça os botões ocuparem toda a largura */
        margin: 10px auto; /* Defina margens automáticas para centralizá-los horizontalmente */
    }
}

.gray-box {
    background-color: #f2f2f2;
    max-width: 100%;
    height: 663px;
    padding: 24px;
    margin-top: 62px;
    margin-bottom: 30px;
    overflow: auto;
    z-index: 2;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.gray-box p {
    margin-bottom: 15px;
    line-height: 2.0;
    font-size: 18px;
}

.gray-box h2.title-header {
    margin-top: -25px; /* Ajuste o valor conforme necessário para movê-lo para cima */
    margin-bottom: 0;
}

.custom-image {
    position: relative;
    left: 100px;
    z-index: 1;
}

.gray-box .title-header {
    margin-top: -20px !important;
    margin-bottom: 0 !important;
} 

/* Para tablets e dispositivos menores */
@media (max-width: 992px) {
    .gray-box {
        width: 85%;
        height: auto;
    }
}

/* Para dispositivos móveis e telas muito pequenas */
@media (max-width: 576px) {
    .gray-box {
        width: 100%;
        padding: 16px;
        margin-top: 30px;
    }
}

.custom-section {
    text-align: center;
    padding: 20px;
    margin: 20px 0;
    font-family: 'lato', sans-serif;
    color: #5E2028;
}


.gray-box {
    background-color: #f2f2f2;
    padding: 1rem;
    border-radius: 10px;
    margin-top: 20px;
    max-width: 90%;
    margin: 0 auto;
}

.spec-section {
    font-family: 'lato', sans-serif;
    color: #5E2028;
    padding: 20px 0; 
    text-align: center;
}

.lists-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.spec-list {
    list-style-type: none;
    padding: 0;
    width: 30%; 
}

.spec-list li {
    margin-bottom: 15px;
    font-size: 1.2em;
}

.spec-list.left-list {
    margin-right: 10%;
}

.spec-list.right-list {
    margin-left: 10%;
}

.spec-section h2 {
    font-size: 1.5em; 
    margin-bottom: 20px; 
}

.custom-section.inverted {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    margin: 20px auto;
    max-width: 100vw;
    font-family: 'lato', sans-serif;
    color: #5E2028;
    position: relative;
}


.custom-section.inverted .custom-text .gray-box {
    background-color: #f2f2f2;
    width: 696px;
    max-width: 100%;
    height: 663px;
    padding: 24px;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.custom-section.flipped {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row-reverse;
}

.specialist-btn {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 20px;
    border: none;
    background-color: #5E2028;
    color: #ffffff;
    text-align: center;
    border-radius: 5px;
    transition: background-color 0.3s;
    text-decoration: none;
}

.specialist-btn:hover {
    background-color: #A06971;
    color: #ffffff;
}

@media (max-width: 768px) {
    .custom-image img {
        width: 100%;
    }
    .gray-box h2.title-header
    {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }

    .specialist-btn
    {
        margin-top: 0;
    }
    .custom-image
    {
        display: none;
    }
}



.banner-section {
    position: relative;
    width: 1400px;
    max-width: 100%;
    height: 232px;
    background: #b3b3b3; /* Cor de fundo do banner - você pode ajustar conforme necessário */
    overflow: visible; /* A caixa menor pode sair para fora deste container */
    margin: 0 auto; /* Centraliza o banner horizontalmente */
    margin-bottom: 20px;
}

.overlay-box {
    position: absolute;
    top:62px; /* Começa a posicionar a caixa no meio do banner */
    left: 50%; /* Começa a posicionar a caixa no meio do banner */
    transform: translate(-50%, 0); /* Centraliza a caixa no meio do banner */
    width: 934px;
    height: 328px;
    background-color: rgb(161, 160, 160); 
    padding: 24px;
    box-sizing: border-box;
    z-index: 2; /* Isso garante que a caixa cinza esteja acima do banner */
    margin-top: 5px; /* Desce a caixa cinza um pouco mais para baixo */
    max-width: 90%;
}
.overlay-box h2 {
    font-size: 24px; /* Tamanho da fonte do título */
    margin-bottom: 20px; /* Espaço entre o título e o parágrafo */
    color: #fff; /* Cor do título */
    font-family: 'lato', sans-serif;
    text-align: center;
}

.overlay-box p {
    font-size: 16px; /* Tamanho da fonte do parágrafo */
    color: #fff; /* Cor do parágrafo */
    line-height: 1.5; /* Espaçamento entre as linhas do parágrafo */
    font-family: 'lato', sans-serif;
    text-align: center;
    color: #5E2028;
}
@media (max-width: 768px) {
    .overlay-box {
        width: 90%; /* Aumenta um pouco a largura da caixa */
        padding: 20px; /* Reduz o padding */
    }

    .overlay-box h2 {
        font-size: 20px; /* Reduz o tamanho da fonte do título */
    }

    .overlay-box p {
        font-size: 14px; /* Reduz o tamanho da fonte do parágrafo */
    }
}

/* Media query para telas menores que 480px (celulares) */
@media (max-width: 480px) {
    .banner-section {
        height: auto; /* Altura automática */
    }

    .overlay-box {
        position: static; /* Remova o posicionamento absoluto */
        transform: none; /* Remova a transformação */
        margin-top: 20px; /* Espaço acima da caixa */
    }
}


.location-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'lato', sans-serif;
    margin-top: 20px;
    background-image: url('/image/BG\ CONTATO.png');
}

.map-and-info-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 20px;
}

.location-info {
    text-align: left;
    margin-right: 20px;
}

.map-container iframe {
    width: 600px;
    height: 450px;
    border: 0;
}

.title-especific {
    color: #FFFFFF;
}

.specific-text {
    color: var(--c-7-a-572, #C7A572);
}

button {
    background-color: #f1f1f1;
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid #ccc;
    color: var(--c-7-a-572, #C7A572);
}

button:hover {
    background-color: #ccc;
}



.footer-distributed .footer-left img {
    max-width: 100%;
    height: auto;
  }
.footer-distributed {
    background-color:#4F4941;
    box-shadow: #4F4941;
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: bold 16px sans-serif;
  
    padding: 55px 50px;
    margin-top: 80px;
  }
  

  .footer-distributed .footer-left,
  .footer-distributed .footer-center,
  .footer-distributed .footer-right {
    display: inline-block;
    vertical-align: top;
  }
  
  /* Footer left */
  
  .footer-distributed .footer-left {
    width: 40%;
  }
  
  /* The company logo */
  
  .footer-distributed h3 {
    color: #ffffff;
    font: normal 36px "Cookie", cursive;
    margin: 0;
  }
  
  .footer-distributed h3 span {
    color: #ffffff;
  }
  
  /* Footer links */
  
  .footer-distributed .footer-links {
    color: #ffffff;
    margin: 20px 0 12px;
    padding: 0;
  }
  
  .footer-distributed .footer-links a {
    display: inline-block;
    line-height: 1.8;
    text-decoration: none;
    color: inherit;
  }
  
  .footer-distributed .footer-company-name {
    color: #8f9296;
    font-size: 14px;
    font-weight: normal;
    margin: 0;
  }
  
  /* Footer Center */
  
  .footer-distributed .footer-center {
    width: 35%;
  }
  
  .footer-distributed .footer-center i {
    background-color: #33383b;
    color: #ffffff;
    font-size: 25px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    text-align: center;
    line-height: 42px;
    margin: 10px 15px;
    vertical-align: middle;
  }
  
  .footer-distributed .footer-center i.fa-envelope {
    font-size: 17px;
    line-height: 38px;
  }
  
  .footer-distributed .footer-center p {
    display: inline-block;
    color: #ffffff;
    vertical-align: middle;
    margin: 0;
  }
  
  .footer-distributed .footer-center p span {
    display: block;
    font-weight: normal;
    font-size: 14px;
    line-height: 2;
  }
  
  .footer-distributed .footer-center p a {
    color: #C7A572;
    text-decoration: none;
  }
  
  /* Footer Right */
  
  .footer-distributed .footer-right {
    width: 20%;
  }
  
  .footer-distributed .footer-company-about {
    line-height: 20px;
    color: #92999f;
    font-size: 13px;
    font-weight: normal;
    margin: 0;
  }
  
  .footer-distributed .footer-company-about span {
    display: block;
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  
  .footer-distributed .footer-icons {
    margin-top: 25px;
  }
  
  .footer-distributed .footer-icons a {
    display: inline-block;
    width: 35px;
    height: 35px;
    cursor: pointer;
    border-radius: 2px;
  
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    line-height: 35px;
  
    margin-right: 3px;
    margin-bottom: 5px;
  }
  
  .footer-distributed .footer-icons a img {
    border-radius: 2px; /* Adiciona bordas arredondadas, se desejar */
    margin-right: 3px;
    margin-bottom: 5px;
}

/* Ajusta o tamanho do ícone, se necessário */
.footer-distributed .footer-icons a img {
    width: 35px;
    height: 35px;
}

/* Efeito de hover para adicionar um leve destaque quando o mouse estiver sobre o ícone */
.footer-distributed .footer-icons a:hover img {
    opacity: 0.8;
}
  /* If you don't want the footer to be responsive, remove these media queries */
  
  @media (max-width: 880px) {
    .footer-distributed {
      font: bold 14px sans-serif;
    }
  
    .footer-distributed .footer-left,
    .footer-distributed .footer-center,
    .footer-distributed .footer-right {
      display: block;
      width: 100%;
      margin-bottom: 40px;
      text-align: center;
    }
  
    .footer-distributed .footer-center i {
      margin-left: 0;
    }
  }
  
  .blog-card-container {
    background-image: url('/image/BG\ Wrapper\ -\ CInza\ ID.png');
    background-size: cover; /* Para garantir que a imagem cubra todo o contêiner */
    background-position: center; /* Para centralizar a imagem */
}
  
  .blog-card {
    display: flex;
    flex-direction: column;
    margin: 1rem auto;
    box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.6%;
    background-image: url(/image/BG\ Wrapper\ -\ CInza\ ID.png);
    line-height: 1.4;
    font-family: sans-serif;
    border-radius: 5px;
    overflow: hidden;
    z-index: 0;
    margin-bottom: 20px;
  }
  
  .blog-card a {
    color: inherit;
  }
  
  .blog-card a:hover {
    color: #5E2028;
  }
  
  .blog-card:hover .photo {
    transform: scale(1.3) rotate(3deg);
  }
  
  .blog-card .meta {
    position: relative;
    z-index: 0;
    height: 200px;
  }
  
  .blog-card .photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.2s;
    border-radius: 5px 5px 0 0;
  }
  
  .blog-card .details,
  .blog-card .details ul {
    margin: auto;
    padding: 0;
    list-style: none;
  }
  
  .blog-card .details {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -100%;
    margin: auto;
    transition: left 0.2s;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 10px;
    width: 100%;
    font-size: 0.9rem;
  }
  
  .blog-card .details a {
    text-decoration: dotted underline;
  }
  
  .blog-card .details ul li {
    display: inline-block;
  }
  
  .blog-card .details .author:before {
    font-family: 'lato';
    margin-right: 10px;
    content: "\f007";
  }
  
  .blog-card .details .date:before {
    font-family: FontAwesome;
    margin-right: 10px;
    content: "\f133";
  }
  
  .blog-card .details .tags ul:before {
    font-family: FontAwesome;
    content: "\f02b";
    margin-right: 10px;
  }
  
  .blog-card .details .tags li {
    margin-right: 2px;
  }
  
  .blog-card .description {
    padding: 1rem;
    background: #fff;
    position: relative;
    z-index: 1;
  }
  
  .blog-card .description h1,
  .blog-card .description h2 {
    font-family: 'lato', sans-serif;
  }
  
  .blog-card .description h1 {
    line-height: 1;
    margin: 0;
    font-size:20px;
  }
  
  .blog-card .description h2 {
    font-size: 1rem;
    font-weight: 300;
    text-transform: uppercase;
    color: #a2a2a2;
    margin-top: 5px;
  }
  
  .blog-card .description .read-more a {
    color: #000000;
    display: inline-block;
    position: relative;
  }
  
  .blog-card .description .read-more a:after {
    content: "\f061";
    font-family: 'lato';
    margin-left: -10px;
    opacity: 0;
    vertical-align: middle;
    transition: margin 0.3s, opacity 0.3s;
  }
  
  .blog-card .description .read-more a:hover:after {
    margin-left: 5px;
    opacity: 1;
  }
  
  .blog-card p {
    position: relative;
    margin: 1rem 0 0;
    color: #000000;
    font-size: 19px;
  }
  
  .blog-card p:first-of-type {
    margin-top: 1.25rem;
  }
  
  .blog-card p:first-of-type:before {
    content: "";
    position: absolute;
    height: 5px;
    background: #000000;
    width: 35px;
    top: -0.75rem;
    border-radius: 3px;
  }
  
  .blog-card:hover .details {
    left: 0%;
  }
  
  @media (min-width: 640px) {
    .blog-card {
      flex-direction: row;
      max-width: 700px;
    }
  
    .blog-card .meta {
      flex-basis: 40%;
      height: auto;
    }
  
    .blog-card .description {
      flex-basis: 60%;
      &:before {
        transform: skewX(-3deg);
        content: "";
        background: #fff;
        width: 30px;
        position: absolute;
        left: -10px;
        top: 0;
        bottom: 0;
        z-index: -1;
      }
    }
  
    .blog-card.alt {
      flex-direction: row-reverse;
    }
  
    .blog-card.alt .description:before {
      left: inherit;
      right: -10px;
      transform: skew(3deg);
    }
  
    .blog-card.alt .details {
      padding-left: 25px;
    }
  }
  
  .banner-blog2 {
    background-image: url(/image/Imagens-SiteBlog---Banner-1865x290.png);
    padding: 50px 20px;
    text-align: center; /* Centraliza o conteúdo horizontalmente */
    font-family: 'Lato', sans-serif;
    color: #FFFFFF; /* Define a cor do texto */
    max-width: 100%;

}

.banner-blog2 .banner-blog-content {
    max-width: 800px;
    margin: 0 auto;
}

.banner-blog2 .banner-blog-content h2 {
    font-size: 30px;
    margin-bottom: 20px;
    text-align: left;
}

.banner-blog2 .banner-blog-content p {
    font-size: 25px;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: left; /* Alinha os parágrafos à esquerda */
}



.founder-section {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
    font-family: 'Lato', sans-serif;
    height: auto;
    margin: 50px 10px; /* Adiciona 50px de espaço tanto na parte superior quanto na inferior */
}

.founder-image {
    text-align: center;
    padding-right: 20px;
}

.founder-image img {
    width: 30rem;
    height: auto;
    max-width: 90%;
    border-radius: 12px;
}

@media(max-width:768px){
    .founder-section{
        flex-direction: column !important;
    }
}

.founder-story {
    padding: 10px; /* Adiciona algum preenchimento para dar espaço entre o conteúdo e a borda */
}

.first-paragraph {
    height: auto;
}

.founder-story h1 {
    font-size: 28px;
    margin-bottom: 10px; /* Reduzi o espaço entre o título e o conteúdo */
}

.founder-story h2 {
    font-size: 25px;
}

.founder-story p {
    font-size: 20px;
    white-space: pre-line;
    margin-left: -13px;
}

.founder-story p:first-child {
    margin-bottom: 10px;
    margin-top: 10px; /* Ajustei o espaço superior */
}


.menu-container {
    position: relative;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'lato', sans-serif;
}

@media (max-width: 768px) {
    .menu-container {
        flex-direction: column;
        align-items: center;
    }
}
        



.main-tab
{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 20px;
     /* Adicione a margem inferior para espaçamento entre os botões */


}
.main-tab span
{
    margin-top: 5px;
}
.tab {
    cursor: pointer;
    padding: 10px 20px;
    background-color: #5E2028;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-right: 10px;
    border-radius: 20px;
}

.tab-content {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    border: 1px solid #ccc;
    background: #EAD7C4;
    font-family: 'lato', sans-serif;
    width: 600px;
    height: 450px;
    margin: 50px auto 0; /* Adicione a margem superior e ajuste conforme necessário */
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    position: relative;
}

.active .tab-content {
    display: flex;
}

.tab img {
    margin-bottom: 10px;
}

.tab span {
    display: block;
        width: 100%;
}
.main-container {
    display: flex;
    justify-content: center;
    font-family: 'lato', sans-serif;
    margin: 0 20px; /* Ajustado para reduzir a margem em dispositivos maiores, considerar ajustes específicos para diferentes tamanhos de tela */
}

.content-container {
    display: flex;
    align-items: center;
    max-width: 600px; /* Define uma largura máxima para o container do conteúdo */
}

.pyramid-images {
    display: flex;
}

.pyramid-images img {
    width: 90px;
    margin: 10px 3px 0;
    transition: transform 0.3s ease-in-out;
}

.pyramid-images img:nth-child(2) {
    margin-top: -120px;
}

.pyramid-images img:hover {
    transform: scale(1.2);
}

.text-content {
    margin-left: 20px;
    margin-right: 60px;
}

.content {
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .main-container {
        flex-direction: column;
        align-items: center;
        margin: 0 10px; /* Reduz a margem lateral para dispositivos móveis para dar mais espaço ao texto */
    }

    .content-container {
        order: -1;
        width: 100%; /* Faz o container do texto usar toda a largura disponível */
        margin: 0 10px; /* Adiciona uma margem lateral para não deixar o texto muito próximo das bordas */
    }

    .pyramid-images {
        margin-top: 20px;
    }

    .pyramid-images img:nth-child(2) {
        margin-top: 0;
    }
}
.quem-somos {
    text-align: center;
    padding: 50px 0;
    margin: 0 20px; /* Ajustado para dispositivos maiores, conforme necessário */
}

.quem-somos-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Lato';
    font-size: 19px; /* Mantém o tamanho da fonte constante */
}

.quem-somos-imagem {
    max-width: 400px; /* Especifica o tamanho original da imagem */
    height: auto; /* Mantém a proporção da imagem */
}

.conteudo2 {
    text-align: left;
    max-width: 45%;
}

@media (max-width: 768px) {
    .quem-somos {
        margin: 0 10px;
    }

    .quem-somos-container {
        flex-direction: column;
        text-align: center;
    }

    .quem-somos-imagem {
        width: 95%; /* Aumenta a largura da imagem para ser maior que o tamanho original */
        height: auto; /* Mantém a proporção da imagem */
        margin: 0 auto;
        display: block;
    }

    .conteudo2 {
        max-width: 100%;
        font-size: 19px; /* Mantém o tamanho da fonte constante */
    }
}

.seu-processo {
    text-align: center;
    padding: 50px 0; /* Espaçamento interno, ajuste conforme necessário */
    margin: 0 320px; /* Ajuste a margem conforme necessário para telas maiores */
}

.seu-processo-container {
    max-width: 800px; /* Ajuste conforme necessário */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Mantém o espaço entre os itens */
    font-family: 'Lato';
    font-size: 19px;
}

.conteudo2 {
    text-align: left; /* Alinha o texto à esquerda */
    max-width: 45%; /* Ajuste conforme necessário */
}

.seu-processo-imagem {
    width: auto;
    height: auto;
    max-width: 50%; /* Mantém a imagem ocupando até 50% do contêiner */
}

@media (max-width: 768px) {
    .seu-processo {
        margin: 0 10px; /* Ajusta a margem para dispositivos menores */
    }

    .seu-processo-container {
        flex-direction: column; /* Empilha o conteúdo verticalmente em telas menores */
        text-align: center; /* Centraliza o texto */
    }

    .seu-processo-imagem {
        width: 95%; /* Define um tamanho fixo maior para a imagem */
        max-width: none; /* Remove qualquer restrição de largura máxima */
        height: auto; /* Mantém a proporção da imagem */
        margin: 0 auto 30px auto; /* Aumenta a margem inferior para criar espaço entre a imagem e o texto */
        display: block; /* Garante que a imagem seja exibida como um bloco */
    }

    .conteudo2 {
        text-align: center; /* Centraliza o texto em dispositivos menores */
        max-width: 100%; /* Permite que o texto ocupe a largura total em dispositivos menores */
        margin-bottom: 20px; /* Adiciona espaço entre o texto e a imagem abaixo dele */
    }
}

#outrasEspecialidades {
    text-align: center;
}

.banner2 img {
    width: 100%;
    height: auto;
}

.conteudo {
    background-color:  #EAD7C4;
    padding: 20px;
    border-radius: 20px;
    font-family: 'lato';
    position: relative;
    top: -60px; /* Ajuste o valor conforme necessário */
    max-width: 800px; /* Definir largura máxima para evitar que o conteúdo se estenda demais */
    margin: 0 auto; /* Centralizar horizontalmente */
}

.conteudo h2 {
    color: #000000;
    font-size: 2em;
    margin-bottom: 10px;
    text-align: center;
}

.conteudo p {
    color: #5E2028;
    font-size: 1.2em;
    line-height: 1.5;
    text-align: center;
}

.conteudo p:first-child {
    margin-bottom: 30px;
}

.banner-lgpd {
    background-image: url('/image/Imagens-SitePol.-Privacidade---Banner-1865x290.png');
    padding: 50px 20px;
    text-align: center; /* Centraliza o conteúdo horizontalmente */
    font-family: 'Lato', sans-serif;
    color: #FFFFFF; /* Define a cor do texto */
    max-width: 100%;
}

.banner-lgpd .banner-lgpd1 {
    max-width: 800px;
    margin: 0 auto;
}

.banner-lgpd .banner-lgpd1 h2 {
    font-size: 30px;
    margin-bottom: 20px;
    text-align: left; /* Centraliza o título horizontalmente */
}

.banner-lgpd .banner-lgpd1 p {
    font-size: 25px;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: left; 
}
.lgpd-section {
    padding: 20px 20px;
    text-align: center;
    font-family: 'Lato', sans-serif;
    color: #000000; 
    background-color: #FFFFFF;
}

.lgpd-content {
    max-width: 800px;
    margin: 0 auto;
}

.lgpd-content h2 {
    font-size: 30px;
    margin-bottom: 20px;
    text-align: left;
}

.lgpd-content p {
    font-size: 19px;
    line-height: 1.6;
    text-align: left; 
}
.lgpd-section {
    padding: 20px 20px;
    font-family: 'Lato', sans-serif;
    color: #000000; /* Define a cor do texto */
    background-color: #FFFFFF; /* Define a cor de fundo */
}

.lgpd-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center; /* Centraliza o conteúdo horizontalmente */
}

.lgpd-title {
    font-size: 30px;
    margin-bottom: 20px;
    text-align: left; /* Alinha o título à esquerda */
}

.lgpd-paragraph {
    font-size: 25px;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: left; /* Alinha os parágrafos à esquerda */
}

.lgpd-section {
    padding: 50px 20px;
    font-family: 'Lato', sans-serif;
    color: #000000; /* Define a cor do texto */
    background-color: #FFFFFF; /* Define a cor de fundo */
}

.lgpd-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center; /* Centraliza o conteúdo horizontalmente */
}

.lgpd-title {
    font-size: 30px;
    margin-bottom: 20px;
    text-align: left; /* Alinha o título à esquerda */
}

.lgpd-paragraph {
    font-size: 25px;
    line-height: 1.6;
    margin-bottom: 10px;
    text-align: left; /* Alinha os parágrafos à esquerda */
}

.lgpd-paragraph-indent {
    font-size: 25px;
    line-height: 1.6;
    margin-bottom: 10px;
}

.lgpd-list {
    font-size: 19px;
    line-height: 1.6;
    margin-bottom: 10px;
    text-align: left; /* Alinha a lista à esquerda */
    list-style-type: disc; /* Define o tipo de marcador */
    margin-left: 30px; /* Recua a lista */
}

.lgpd-section {
    padding: 50px 20px;
    font-family: 'Lato', sans-serif;
    color: #000000; /* Define a cor do texto */
    background-color: #FFFFFF; /* Define a cor de fundo */
}

.lgpd-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center; /* Centraliza o conteúdo horizontalmente */
}

.lgpd-title {
    font-size: 30px;
    margin-bottom: 20px;
    text-align: left; /* Alinha o título à esquerda */
}

.lgpd-paragraph {
    font-size: 25px;
    line-height: 1.6;
    margin-bottom: 10px;
    text-align: left; /* Alinha os parágrafos à esquerda */
}

.lgpd-paragraph-indent {
    font-size: 25px;
    line-height: 1.6;
    margin-bottom: 10px;
}

.lgpd-list {
    font-size: 19px;
    line-height: 1.6;
    margin-bottom: 10px;
    text-align: left; /* Alinha a lista à esquerda */
    list-style-type: disc; /* Define o tipo de marcador */
    margin-left: 30px; /* Recua a lista */
}
.lgpd-section {
    padding: 50px 20px;
    font-family: 'Lato', sans-serif;
    color: #000000; /* Define a cor do texto */
    background-color: #FFFFFF; /* Define a cor de fundo */
}

.lgpd-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center; /* Centraliza o conteúdo horizontalmente */
}

.lgpd-title {
    font-size: 30px;
    margin-bottom: 20px;
    text-align: left; /* Alinha o título à esquerda */
}

.lgpd-paragraph {
    font-size: 25px;
    line-height: 1.6;
    margin-bottom: 10px;
    text-align: left; /* Alinha os parágrafos à esquerda */
}

.lgpd-list {
    font-size: 19px;
    line-height: 1.6;
    margin-bottom: 10px;
    text-align: left; /* Alinha a lista à esquerda */
    list-style-type: disc; /* Define o tipo de marcador */
    margin-left: 30px; /* Recua a lista */
}

.lgpd-section {
    padding: 50px 20px;
    font-family: 'Lato', sans-serif;
    color: #000000; /* Define a cor do texto */
    background-color: #FFFFFF; /* Define a cor de fundo */
}

.lgpd-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center; /* Centraliza o conteúdo horizontalmente */
}

.lgpd-title {
    font-size: 30px;
    margin-bottom: 20px;
    text-align: left; /* Alinha o título à esquerda */
}

.lgpd-paragraph {
    font-size: 19px;
    line-height: 1.6;
    margin-bottom: 10px;
    text-align: left; /* Alinha os parágrafos à esquerda */
}

.lgpd-list {
    font-size: 19px;
    line-height: 1.6;
    margin-bottom: 10px;
    text-align: left; /* Alinha a lista à esquerda */
    list-style-type: disc; /* Define o tipo de marcador */
    margin-left: 30px; /* Recua a lista */
}

.lgpd-paragraph a {
    color: #000000; /* Define a cor do link */
    text-decoration: underline; /* Adiciona sublinhado ao link */
}

.container-lgpd {
    background-image: url('/image/BG\ Wrapper\ -\ CInza\ ID.png'); /* Substitua pelo caminho da sua imagem */
    background-size: cover; /* Ajusta o tamanho da imagem para cobrir toda a div */
    background-position: center; /* Centraliza a imagem na div */
}

.banner-services {
    background-image: url('/image/banner.png');
    padding: 50px 20px;
    text-align: center; /* Centraliza o conteúdo horizontalmente */
    font-family: 'Lato', sans-serif;
    color: #FFFFFF; /* Define a cor do texto */
    max-width: 100%;
}

.services-banner-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: left; /* Centraliza o título horizontalmente */
}

.services-banner-content h2 {
    font-size: 30px;
    margin-bottom: 20px;
}

.services-banner-content p {
    font-size: 25px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.services-banner-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.button-wrapper {
    display: flex;
    justify-content: flex-start; /* Alinha os botões à esquerda */
    margin-top: 20px;
}

.service-button {
    padding: 10px 20px;
    margin: 0 10px;
    font-size: 16px;
    background-color: #C7A572; /* Cor de fundo dos botões */
    color: #ffffff; /* Cor do texto dos botões */
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.service-button:hover {
    background-color: #5E2028; /* Cor de fundo dos botões ao passar o mouse */
}

.your-process {
    padding: 50px 20px;
    text-align: center; /* Centraliza o conteúdo horizontalmente */
    font-family: 'Lato', sans-serif;
    color: #000000; /* Define a cor do texto */
}

.your-process .section-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: left; /* Alinha os parágrafos à esquerda */
}

.your-process .section-content h2 {
    font-size: 26px;
    margin-bottom: 20px;
}

.your-process .section-content p {
    font-size:20px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.trabalhista-section {
    text-align: center;
    font-family: 'Lato', sans-serif;
    color: #000000;
    background-size: cover;
    background-position: center;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    
}

.trabalhista-section .section-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;

    padding: 20px;
    border-radius: 10px;

}

.trabalhista-section .section-content h2 {
    font-size: 25px;
    margin-bottom: 20px;
}

.trabalhista-section .section-content p {
    font-size: 19px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.menu-container1 {
    padding: 10px; /* Espaçamento interno ao redor dos botões */
    border-radius: 30px; /* Bordas arredondadas para suavizar a caixa */
    margin-bottom: 20px; /* Espaço abaixo do menu para separar do conteúdo */
}

.trabalhista-section .fase-content {
    background-color: #EAD7C4; /* Cor de fundo */
    padding: 10px 20px; /* Espaçamento interno: mais espaço nas laterais */
    border-radius: 5px; /* Bordas arredondadas */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra para adicionar profundidade */
    margin-top: 10px; /* Espaço acima do conteúdo da aba */
    max-width: 80%;
    margin-left: auto; /* Centraliza o conteúdo horizontalmente */
    margin-right: auto;
}

.trabalhista-section .menu-container1 {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px; /* Borda arredondada para combinar com a seção */
}

.trabalhista-section .menu-container1 .menu-button {
    padding: 10px 20px; /* Adicione espaço interno para melhorar a legibilidade dos botões */
    margin: 0 10px;
    font-size: 16px;
    background-color: #5E2028;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    width: 240px; 
}

.trabalhista-section .menu-container1 .menu-button:hover {
    background-color:#5e2028b2;
}

.trabalhista-section .fase-content {
    flex-direction: column;
    align-items: start; 
    margin-top: 20px;
}

.trabalhista-section .fase-content.active {
    display: flex;
}

.fase-content h2
{
    text-align: start;
}

.trabalhista-section .fase-content h3 {
    text-align: left; 
}

.trabalhista-section .fase-content p {
    font-size: 20px; 
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 800px; 
    text-align: left;
}

/* Estilos para o summary */
/* Estilos para o summary */
summary {
    cursor: pointer;
    font-family: 'Lato', sans-serif; /* Use a fonte Lato */
    color: #5E2028; /* Use a cor Marsala */
    padding: 10px; /* Adiciona um pouco de espaçamento ao redor do summary */
    font-size: 20px;
    text-align: left; /* Alinha o texto à esquerda */
}

/* Estilos para o details */
details > summary {
    cursor: pointer;
    font-family: 'Lato', sans-serif;
    color: #5E2028;
    padding: 10px;
    font-size: 20px;
    text-align: left; /* Garante que o texto esteja alinhado à esquerda */
}

details p {
    text-align: left; /* Alinha o texto à esquerda */
}


.custom-hr {
    border: none; /* Remove a borda padrão */
    height: 2px; /* Define a altura da linha */
    background-color: #5E2028; /* Define a cor de fundo da linha */
    margin: 20px 0; /* Adiciona margens acima e abaixo da linha */
}

/* Esconde a seta padrão do <details> */
.custom-summary::-webkit-details-marker {
    display: none;
}

.download-buttons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    padding: 20px 0;
    width: 100%; /* Garante que o container ocupe toda a largura disponível */
}

.download-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* Adiciona quebra de linha se necessário */
}
.column {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espaço entre os botões */
}

.download-button {
    padding: 10px 20px;
    background-color: #5E2028;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Lato', sans-serif;
    border-radius: 5px;
    font-size: 16px;
    transition: background-color 0.3s;
}

.download-button:hover {
    background-color: #882033;
}

/* Reduzindo o espaço acima e abaixo dos botões */
.column {
    margin: 10px 0; /* Reduz a margem para diminuir o espaço */
}

.nossos-escritorios {
    text-align: center;
    padding: 50px 20px;
    background-image: url('/image/BG\ CONTATO.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .nossos-escritorios h2 {
    margin-bottom: 30px;
    font-size: 28px;
    font-family: 'Lato';
    color: #FFFFFF;
  }
  
  .escritorio-container {
    display: flex;
    justify-content: center; /* Centraliza os itens horizontalmente */
    align-items: center; /* Alinha os itens verticalmente */
    gap: 10px; /* Reduz o espaço entre o mapa e o texto */
    flex-wrap: wrap;
  }
  
  .escritorio-container iframe, .escritorio-info {
    flex: 1 1 280px; /* Permite que ambos cresçam e encolham, com uma base de 280px */
    max-width: 600px; /* Limita a largura máxima */
    border-radius: 15px; /* Mantém as bordas arredondadas para o mapa */
  }
  
  .escritorio-info {
    font-size: 20px;
    font-family: 'Lato';
    color: #C7A572;
  }
  
  .escritorio-info h3 {
    margin-bottom: 15px;
    color: #FFFFFF;
    font-size: 24px;
  }
  
  .escritorio-imagem {
    max-width: 100px;
    height: auto;
    display: block;
    margin: 0 auto 10px;
  }
  
  @media (max-width: 768px) {
    .button-wrapper
    {
        flex-direction: column;
        gap: 1rem;
    }
    .escritorio-container {
      flex-direction: column;
      gap: 20px; /* Adiciona um pouco mais de espaço quando em coluna para clareza */
    }
  
    .escritorio-container iframe, .escritorio-info {
      max-width: 90%;
    }
  }
  
  .youtube-cta {
    background: url('/image/cta-yt.png') no-repeat center center / cover;
    padding: 40px 20px;
    text-align: center;
    color: #fff;
    font-family: 'Lato', sans-serif;
    display: flex;
    justify-content: center; /* Centraliza o conteúdo na horizontal */
    align-items: center; /* Centraliza o conteúdo na vertical */
}

.youtube-cta-content {
    display: flex;
    align-items: center; /* Alinha os itens ao centro verticalmente */
    justify-content: center; /* Centraliza os itens horizontalmente */
    text-align: center;
    gap: 20px; /* Espaço entre a imagem e o texto */
}

.youtube-cta-content img {
    width: 50px;
}

.text-and-button {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza os elementos filhos (texto e botão) */
}

.youtube-cta-content p {
    margin-bottom: 10px;
    font-size: 18px;
}

.cta-yt {
    background-color: #C7A572;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
}

.cta-yt:hover {
    background-color: #c7a572af;
}

.line-container {
    width: 100%; /* Ou a largura máxima que o background permite */
    overflow: hidden; /* Impede que a imagem ultrapasse o tamanho do container */
    display: flex; /* Para centralizar a imagem */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
}

.responsive-line-image {
    max-width: 100%; /* Garante que a imagem não ultrapasse a largura do container */
    height: auto; /* Mantém a proporção da imagem ajustando a altura proporcionalmente */
}

/* Adiciona margem acima e abaixo para todos os textos dentro de .line-container */
.line-container p, .line-container h2, .line-container h3, .line-container h4 {
    margin-top: 20px; /* Espaço acima */
    margin-bottom: 20px; /* Espaço abaixo */
}

/* Adiciona margem acima e abaixo para a imagem dentro de .line-container */
.line-container .responsive-line-image {
    margin-top: 20px; /* Espaço acima */
    margin-bottom: 20px; /* Espaço abaixo */
}

.fique-atento {
    margin-top: 30px; /* Ajuste este valor conforme necessário para aumentar o espaço */
}

.downloads-importantes {
    margin-top: 30px;
}

details > summary {
    list-style: none;
    position: relative;
    cursor: pointer;
    padding-left: 30px; /* Espaço para o ícone à esquerda */
}

details > summary::-webkit-details-marker {
    display: none; /* Esconde a seta padrão em navegadores WebKit/Blink */
}

/* Adiciona seta customizada usando ::after para summary */
details > summary::after {
    content: "";
    display: inline-block;
    width: 24px; /* Largura do ícone SVG */
    height: 24px; /* Altura do ícone SVG */
    position: absolute;
    left: 0; /* Posiciona o ícone à esquerda */
    top: 50%;
    transform: translateY(-50%); /* Centraliza verticalmente */
    background-image: url('/image/Group.svg'); /* Substitua pelo caminho correto do seu SVG */
    background-size: cover;
    background-repeat: no-repeat;
}

/* Muda a imagem quando details está aberto */
details[open] > summary::after {
    background-image: url('/image/Group.svg'); /* Substitua se quiser outro ícone quando aberto */
}

.client-manual-section {
    text-align: center; /* Centraliza o texto */
    padding: 40px 20px; /* Adiciona um padding para espaçamento interno */
    font-family: 'lato', sans-serif ;
}

.client-manual-section h2 {
    margin-bottom: 20px; /* Espaço entre o título e o parágrafo */
    font-size: 24px; /* Tamanho do texto do título */
}

.client-manual-section p {
    margin-bottom: 30px; /* Espaço entre o parágrafo e o botão */
    font-size: 19px; /* Tamanho do texto do parágrafo */
}

.download-manual-button {
    padding: 10px 20px; /* Preenchimento interno para o botão */
    background-color: #5E2028; /* Cor de fundo do botão */
    color: white; /* Cor do texto do botão */
    border: none; /* Remove a borda do botão */
    border-radius: 5px; /* Borda arredondada para o botão */
    cursor: pointer; /* Muda o cursor para indicar que é clicável */
    font-size: 18px; /* Tamanho do texto do botão */
}

.download-manual-button:hover {
    background-color:#5e20289a; /* Cor do botão quando passa o mouse por cima */
}