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

/* Importa a fonte Rantera */
@font-face {
    font-family: 'Rantera';
    src: url('../fonts/Rantera.otf') format('opentype');
}

body {
    font-family: Arial, sans-serif;
    color: #fff;
    line-height: 1.6;
    background-image: url('../img/fundo.png'); /* Ajuste no caminho */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Cabeçalho */
.header {
    background-color: #24293C;
    padding: 10px 0;
    text-align: center;
}

.header .logo {
    max-width: 250px;
    margin-bottom: 10px;
}

.nav ul {
    display: flex;
    list-style: none;
    justify-content: center;
    gap: 15px;
}

.nav a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 5px;
}

.nav a:hover {
    background-color: #BEAF88;
    color: #FFF;
}

/* Quem Somos Section */
.sobre {
    text-align: center;
}

.sobre h2 {
    color: #24293C;
    margin-bottom: 20px;
}

h3 {
    text-align: center;  /* Centraliza o texto */
    margin-bottom: 20px;  /* Espaço entre o título e a imagem */
    position: relative;  /* Para permitir o posicionamento do sublinhado */
}

 /* Linha abaixo do texto */
h3::after {
    content: '';  /* Cria a linha */
    position: absolute;
    bottom: -8px;  /* Ajuste para a linha ficar abaixo do texto */
    left: 50%;  /* Centraliza a linha */
    transform: translateX(-50%);  /* Centraliza horizontalmente */
    width: 80px;  /* Define o comprimento padrão da linha */
    height: 2px;  /* Espessura da linha */
    background-color: #BEAF88;  /* Cor da linha */
}


.content {
    display: flex;
    align-items: center;  /* Alinha o conteúdo no centro */
    justify-content: center;  /* Centraliza o conteúdo */
    margin-bottom: 30px;  /* Espaçamento entre as seções */
}

.image-left {
    width: 250px;
    height: auto;
    margin-right: 20px;  /* Espaço entre imagem e texto */
    margin-top: 20px;  /* Espaço entre imagem e cabeçalho */
    border-radius: 10px;
}
.content img {
    width: 350px;  /* Largura fixa para a imagem */
    height: auto;  /* Mantém a proporção da imagem */
    margin-left: 20px;  /* Espaçamento entre a imagem e o texto */
    border-radius: 10px;  /* Borda arredondada na imagem */
}

/* Ajustes no texto para quebrar apenas após algumas palavras */
.text p {
    word-wrap: break-word;
    max-width: 600px; /* Ajustado para limitar a largura e forçar a quebra após mais palavras */
    margin-top: 10px;
}

.text h3 {
    margin: 10px 0;
}

/* Classe para alinhar o texto da primeira parte à direita */
.text-right {
    flex: 1;  /* O texto ocupa o restante do espaço disponível */
    max-width: 600px;  /* Controla a largura máxima do texto */
    word-wrap: break-word;
    text-align: left;  /* Alinha o texto à esquerda */
    padding-left: 10px;  /* Espaço adicional à direita do texto */
}

/* Classe para alinhar o texto da segunda parte à esquerda */
.text-left {
    flex: 1;  /* O texto ocupa o restante do espaço disponível */
    max-width: 700px;  /* Controla a largura máxima do texto */
    word-wrap: break-word;
    text-align: right;  /* Alinha o texto à direita */
    padding-right: 20px;  /* Espaço adicional à direita do texto */
}

.text p {
    margin-top: 10px;
}

/* E-Books */
.ebooks .container p {
    text-align: center;
    margin-bottom: 20px;
}

/* Estilos para a classe image-book */
.image-book {
    width: 250px; /* Define o tamanho da largura */
    height: auto; /* Mantém a proporção da imagem */
    margin: 0 auto; /* Centraliza a imagem horizontalmente */
    display: block; /* Faz a imagem se comportar como um bloco */
    border-radius: 10px; /* Bordas arredondadas */
}

.ebooks h2 {
    text-align: center; /* Centraliza o texto do cabeçalho */
    margin-bottom: 10px;    
}

.ebooks .container p {
    text-align: center; /* Centraliza o texto */
    margin-bottom: 20px;
}

.buttons {
    display: flex; /* Flexbox para colocar os botões lado a lado */
    gap: 20px; /* Espaço entre os botões */
    justify-content: center; /* Centraliza os botões */
    margin-top: 20px; /* Adiciona um pouco de espaço acima dos botões */
}

/* Ajusta o tamanho e a aparência dos botões */
.btn-gestao, .btn-evidenciar {
    position: relative; /* Para posicionar a imagem dentro do botão */
    text-decoration: none; /* Remove o sublinhado */
    display: inline-block; /* Faz o botão se comportar como um bloco em linha */
    width: 300px; /* Largura do botão */
    height: 150px; /* Altura do botão */
    border-radius: 10px; /* Bordas arredondadas */
    overflow: hidden; /* Garante que a imagem não saia dos limites do botão */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* Sombras para dar a sensação de elevação */
}


/* A imagem dentro do botão ocupa todo o botão */
.btn-gestao img, .btn-evidenciar img {
    width: 100%; /* A imagem ocupa toda a largura do botão */
    height: 100%; /* A imagem ocupa toda a altura do botão */
    object-fit: cover; /* A imagem se ajusta ao tamanho do botão sem distorcer */
}

/* Contato */
.contato .container {
    text-align: center;
    margin-top: 20px;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
}

.social-icons a {
    display: inline-block;
    color: #24293C; /* Cor aplicada aos links */
    transition: color 0.3s ease; /* Efeito suave ao passar o mouse */
}

/* Alterar a cor dos ícones no hover */
.social-icons a:hover {
    color: #1A2A33; /* Cor alternativa no hover (opcional, pode ajustar) */
}

.social-icons img {
    width: 30px;
    height: 30px;
    filter: brightness(0.8) saturate(100%) invert(30%) sepia(10%) saturate(200%) hue-rotate(150deg) contrast(85%);
}

/* Rodapé */
.footer {
    background-color: #24293C;
    color: #FFF;
    text-align: center;
    padding: 20px;
}

.footer a {
    color: #BEAF88;
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

/* Estilos específicos para a página "Sobre Nós" */
.sobre-nos {
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.9); /* Fundo semi-transparente para melhor leitura */
    color: #24293C; /* Cor do texto */
    background: inherit; /* Herdará o fundo do body */
}

.sobre-nos .content {
    display: flex;
    flex-direction: column; /* Para alinhar os elementos um abaixo do outro no mobile */
    align-items: center; /* Alinha os elementos verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    flex-wrap: wrap; /* Permite quebrar linha em telas menores */
    gap: 20px; /* Espaçamento entre imagem e texto */
}

.sobre-nos h2 {
    text-align: center;
    margin-bottom: 10px;
    font-size: 2.5em;
    color: #24293C;
}

.img-karyda{
    order: -1;  /* Coloca a imagem antes do texto */
}

.img-lidy, .img-karyda {        
    height: auto;
    max-width: 100%; /* A imagem ocupa toda a largura da tela em dispositivos menores */
    margin-top: 20px;  /* Ajusta o espaçamento superior se necessário */
    display: block;
    border-radius: 50%;
}

/* Responsividade */
@media (max-width: 768px) {
    .content {
        flex-direction: column;
        align-items: center;
        text-align: center; /* Garantir que o texto fique centralizado no celular */
    }

     /* Coloca a imagem consultoria.jpeg acima do título */
    .image-right {
        order: -1;  /* Coloca a imagem antes do texto */
    }

    .image-left, .image-right {        
        height: auto;
        max-width: 100%; /* A imagem ocupa toda a largura da tela em dispositivos menores */
        margin-top: 20px;  /* Ajusta o espaçamento superior se necessário */
        display: block;
    }

    .img-karyda {
        order: -1;  /* Coloca a imagem antes do texto */
    }

    .img-lidy, .img-karyda {
        display: block;
        margin: 20px auto; /* Auto nas laterais para centralizar */
        max-width: 90%; /* Evita que a imagem ocupe 100% e fique colada nas laterais */
    }

    .text-lidy, .text-karyda {
        max-width: 600px; /* Limita a largura do texto */
        text-align: justify;
    }
   

    .text-right, .text-left {
        padding: 10px;
        text-align: justify;
    }

    .buttons {
        flex-direction: column; /* Coloca os botões um embaixo do outro em telas menores */
        gap: 15px; /* Menor espaço entre os botões */
    }

    .btn-gestao, .btn-evidenciar {
        width: 100%; /* Faz os botões ocuparem toda a largura da tela */
        min-width: unset; /* Remove o limite de largura mínima */
        height: 180px; /* Ajusta a altura para tela menor */
    }
}