/* Critical CSS - Above the fold styles */
body {
    background: #000;
    color: #D4AF37;
    font-family: 'Times New Roman', Times, serif;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    font-display: swap;
}

u {
    color: #fdfae2;
}

/* Preload critical fonts */
@font-face {
    font-family: 'Times New Roman';
    font-display: swap;
}
.header-structure, .footer-structure {
    position: fixed;
    width: 100%;
    height: 100px;
    background: #D4AF37;
    z-index: 1000;
    left: 0;
    right: 0;
    box-sizing: border-box;
}
.header-structure { top: 0; }
.footer-structure { bottom: 0; }
.line {
    position: absolute;
    left: 0;
    width: 100%;
    background: black;
}
.header-structure .line1, .footer-structure .line1 { top: 5px; height: 4px; }
.header-structure .line2, .footer-structure .line2 { top: 10px; height: 2px; }
.header-structure .line3, .footer-structure .line3 { top: 87px; height: 2px; }
.header-structure .line4, .footer-structure .line4 { top: 91px; height: 4px; }
.navbar-container {
    position: relative;
    top: 45px;
    width:100%;
    display: grid;
    justify-content: center;
    align-items: center;
    transform: translateY(-50%);
    max-width: 100%;
    overflow: hidden;
}
.navbar {
    padding: 0;
    background-color: #f1d063;
    box-shadow: 6px 6px 6px rgba(0,0,0,0.1);
    position: relative;
}
.navbar::before, .navbar::after {
    content: '' !important;
    position: absolute !important;
    bottom: -10px !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    z-index: 999 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
}
.navbar::before {
    left: 0 !important;
    border-width: 10px 10px 0 5px !important;
    border-color: #000000 transparent transparent transparent !important;
}
.navbar::after {
    right: 0 !important;
    border-width: 10px 5px 0 10px !important;
    border-color: #000000 transparent transparent transparent !important;
}

/* Regras adicionais para garantir que os cantos pretos apareçam sempre */
.navbar {
    position: relative !important;
    overflow: visible !important;
}

.navbar-container {
    position: relative !important;
    overflow: visible !important;
}
.navbar .nav-link {
    color: black;
    font-size: 21px;
    font-weight: 300;
    padding: 5px 0px 0px;
    position: relative;
}
.navbar .nav-link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 5px;
    height: 2px;
    width: 0;
    background-color: black;
    transition: width 0.3s ease, left 0.3s ease;
}
.navbar .nav-link:hover::after {
    width: 100%;
    left: 0;
}
.navbar-collapse {
    justify-content: center;
}

/* Estilos para o botão do menu hambúrguer */
.navbar-toggler {
    border: 2px solid #000000;
    background-color: #f1d063;
    padding: 8px 12px;
    margin-right: 15px;
}

.navbar-toggler:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

/* Garantir que o botão do menu seja visível e funcional */
.navbar-toggler {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1001 !important;
    background-color: #f1d063 !important;
    border: 2px solid #000000 !important;
    padding: 8px 12px !important;
    margin-right: 15px !important;
}

.navbar-toggler:focus {
    outline: none !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25) !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    background-size: 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    display: block !important;
    visibility: visible !important;
}

/* Garantir que o menu colapsado funcione corretamente */
.navbar-collapse.collapse {
    display: none;
}

.navbar-collapse.collapsing {
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;
}

.navbar-collapse.show {
    display: block !important;
}

/* Prevenir scroll horizontal no menu */
.navbar-collapse {
    overflow-x: hidden;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

/* Garantir que o texto do menu não quebre incorretamente */
.navbar-nav .nav-link {
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    white-space: normal !important;
}

/* Regras globais para garantir que os cantos pretos apareçam sempre */
.navbar::before, .navbar::after {
    content: '' !important;
    position: absolute !important;
    bottom: -10px !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    z-index: 999 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

.navbar::before {
    left: 0 !important;
    border-width: 10px 10px 0 5px !important;
    border-color: #000000 transparent transparent transparent !important;
}

.navbar::after {
    right: 0 !important;
    border-width: 10px 5px 0 10px !important;
    border-color: #000000 transparent transparent transparent !important;
}

/* Sobrescrever qualquer regra do Bootstrap que possa estar interferindo */
.navbar.navbar-expand-lg::before,
.navbar.navbar-expand-lg::after {
    content: '' !important;
    position: absolute !important;
    bottom: -10px !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    z-index: 999 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

.navbar.navbar-expand-lg::before {
    left: 0 !important;
    border-width: 10px 10px 0 5px !important;
    border-color: #000000 transparent transparent transparent !important;
}

.navbar.navbar-expand-lg::after {
    right: 0 !important;
    border-width: 10px 5px 0 10px !important;
    border-color: #000000 transparent transparent transparent !important;
}

/* Regras específicas para telas grandes */
@media (min-width: 992px) {
    .navbar::before, .navbar::after {
        content: '' !important;
        position: absolute !important;
        bottom: -10px !important;
        width: 0 !important;
        height: 0 !important;
        border-style: solid !important;
        z-index: 999 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: none !important;
    }
    
    .navbar::before {
        left: 0 !important;
        border-width: 10px 10px 0 5px !important;
        border-color: #000000 transparent transparent transparent !important;
    }
    
    .navbar::after {
        right: 0 !important;
        border-width: 10px 5px 0 10px !important;
        border-color: #000000 transparent transparent transparent !important;
    }
    
    /* Garantir que o botão do menu seja visível em telas grandes quando necessário */
    .navbar-toggler {
        display: none !important;
    }
}

/* Regras para garantir que o botão do menu seja visível em dispositivos móveis */
@media (max-width: 991.98px) {
    .navbar-toggler {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1001 !important;
        background-color: #f1d063 !important;
        border: 2px solid #000000 !important;
        padding: 8px 12px !important;
        margin-right: 15px !important;
    }
    
    /* Garantir que os cantos pretos apareçam em dispositivos móveis */
    .navbar::before, .navbar::after {
        content: '' !important;
        position: absolute !important;
        bottom: -10px !important;
        width: 0 !important;
        height: 0 !important;
        border-style: solid !important;
        z-index: 999 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: none !important;
    }
    
    .navbar::before {
        left: 0 !important;
        border-width: 10px 10px 0 5px !important;
        border-color: #000000 transparent transparent transparent !important;
    }
    
    .navbar::after {
        right: 0 !important;
        border-width: 10px 5px 0 10px !important;
        border-color: #000000 transparent transparent transparent !important;
    }
}

.content {
    padding-top: 80px;
    text-align: center;
    padding-bottom: 80px;
}
.logo {
    display: block;
    margin: 0 auto;
    width: 80%;
    max-width: 431px;
    height: auto;
}

.mission-text {
    max-width: 800px;
    width: 90%; 
    margin: 20px auto 0; /* Centraliza o texto */
    color: #D4AF37;
    font-size: clamp(12px, 2vw, 26px);
    text-align: justify;
    
    opacity: 0;
    transform: translateY(20px);
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}
.mission-text h1 {
    text-align: center;
    font-size: 2.8em;
}
.mission-text.visible {
    opacity: 1;
    transform: translateY(0);
}

/*estilos cristianereis.html*/
.logoCristiane {
    display: block;
    margin: 0 auto;
    width: 50%;
    max-width: 250px;
    height: auto;
    padding-top: 5px;
}
.apresentacao {
    width: 100%;
    margin: 20px auto;
    background-color: #f8f8f8;
    overflow: hidden; /* Importante para o efeito na imagem */
    display: flex; /* Alinha os elementos lado a lado */
    align-items: center; /* Alinha verticalmente */
    justify-content: center; /* Centraliza o conteúdo horizontalmente */
}
.apresentacao .row {
    flex-wrap: wrap;
    width: 95%;
    max-width: 1600px;
}

.col-md-6 {
    
    padding: 15px;
}

.col-md-6:first-child { /* Estilos específicos para a coluna do texto */
    display: flex;
    justify-content: center; /* Centraliza o texto horizontalmente */
    align-items: center; /* Centraliza o texto verticalmente */
}

.col-md-6:last-child { /* Estilos específicos para a coluna da img */
    display: flex;
    
    align-items: center; /* Centraliza o texto verticalmente */
}
.col-md-6 h2{
    color: #ceb04f;   
}
.col-md-6 h3{
    color: #a59150;    
}
.col-md-6 p{
    color: #000000;    
}

.col-md-6 img {
    width: auto; /* Largura automática para a imagem */
    height: auto;
    max-width: 100%; /* Largura máxima de 100% da coluna */
    display: block;
    margin-left: auto; /* Margem automática à esquerda para posicionar a imagem à direita */
    border-radius: 5px;
    opacity: 0; /* Começa invisível */
    transform: scale(0.8); /* Começa menor */
    transition: opacity 1s ease-in-out, transform 1s ease-in-out; /* Transição suave */
}
.col-md-6 img.visible {
    opacity: 1;
    transform: scale(1); /* Tamanho normal */
}

.cristiane {
    /* Estilos específicos para a seção "Cristiane Reis" */
    padding: 20px; /* Espaçamento interno */
    border-radius: 10px; /* Bordas arredondadas */
    opacity: 0; /* Começa invisível */
    transform: translateY(20px); /* Começa um pouco abaixo */
    transition: transform 2s ease-in-out, opacity 2s ease-in-out; /* Transição suave */
    width: 1500px;
    height: 1500px;
}

.cristiane.visible { /* Classe adicionada por JavaScript */
    opacity: 1; /* Fica visível */
    transform: translateY(0); /* Volta à posição original */
}

/* Estilos para o texto */
.mission-text.cristiane {
    padding: 20px;
    border-radius: 10px;
    opacity: 0;
    transform: translateY(20px);
    transition: transform 2s ease-in-out, opacity 2s ease-in-out;
}

.mission-text.cristiane.visible {
    opacity: 1;
    transform: translateY(0);
}
/* Estilos para o texto dentro da seção "Cristiane Reis" */
.mission-text.cristiane h1, .mission-text.cristiane h2, .mission-text.cristiane h3, .mission-text.cristiane p {
    opacity: 0;
    transform: translateY(20px);
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

.mission-text.cristiane.visible h1, .mission-text.cristiane.visible h2, .mission-text.cristiane.visible h3, .mission-text.cristiane.visible p {
    opacity: 1;
    transform: translateY(0);
}

/* Estilos para a imagem */
.imagem-cristiane {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

.imagem-cristiane.visible {
    opacity: 1;
    transform: scale(1);
}
.col-md-6 img {
    width: auto;
    height: auto;
    max-width: 100%;
    display: block;
    margin-left: auto;
    border-radius: 5px;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}.col-md-6 img.visible {
    opacity: 1;
    transform: scale(1);
}
/* fim estilos cristianereis.html*/
@media (max-width: 750px) {
    .navbar .nav-link {
        font-size: 18px;
        padding: 5px 10px;
    }
    .navbar-container {
        width: 100%;
        top: 40px;
        transform: translateY(-50%);
        padding: 0 10px;
        box-sizing: border-box;
    }
    .mission-text {
        
        width: 39%;
        margin: 20px auto 0;
            color: #D4AF37;
        font-size: clamp(12px, 2vw, 26px);
        text-align: justify;
        opacity: 0;
        transform: translateY(20px);
        transition: transform 1s ease-in-out, opacity 1s ease-in-out;
    }
    .mission-text h1 {
        text-align: center;
        font-size: 2.5em;
    }
    col-md-6:first-child {
        -ms-flex: 0 0 90%;
        flex: 0 0 90%;
        max-width: 90%;
    }
    .col-md-6:last-child {
        -ms-flex: 0 0 10%;
        flex: 0 0 10%;
        max-width: 10%;
    }
    
    /* Correção do rodapé para telas médias */
    .footer-content {
        font-size: 1em;
        padding: 0 15px;
    }
    
    .footer-content p {
        font-size: 0.9em;
        line-height: 1.3;
    }
    
    .footer-content .social-icons a {
        font-size: 1.3em;
        margin: 0 8px;
    }
    
    /* Melhorias para texto da missão em tablets */
    .mission-text {
        font-size: clamp(14px, 2.5vw, 22px) !important;
        width: 90% !important;
        margin: 20px auto 0 !important;
        line-height: 1.5;
    }
    
    .mission-text h1 {
        font-size: 2.4em !important;
        margin-bottom: 20px;
    }
    
    .mission-text p {
        margin-bottom: 20px;
        text-align: justify;
    }
    
    /* Melhorias para áreas de atuação em tablets */
    .areas-atuacao h2 {
        font-size: 2.2em;
        margin-bottom: 20px;
    }
    
    .area {
        width: 160px;
        height: 160px;
        margin: 10px;
    }
    
    .area span {
        font-size: 1.15em;
        padding: 8px 5px;
    }
    
    /* Melhorias para formulário de contato em tablets */
    .contact-form h2 {
        font-size: 1.9em;
        margin-bottom: 20px;
    }
    
    .contact-form p {
        font-size: 1.15em;
        margin-bottom: 20px;
        line-height: 1.5;
    }
    
    .contact-form label {
        font-size: 1.05em;
        margin-bottom: 8px;
        display: block;
    }
    
    .contact-form input, .contact-form textarea {
        font-size: 16px;
        padding: 12px;
        margin-bottom: 15px;
    }
    
    .contact-form button {
        font-size: 1.15em;
        padding: 12px 25px;
        margin-top: 15px;
    }
    
    .contact-info {
        font-size: 1.05em;
        margin-top: 25px;
        line-height: 1.5;
    }
    
    .contact-info p {
        margin-bottom: 12px;
    }
}
.areas-atuacao {
    margin: 0px 5px 5px 5px;
    text-align: center;
    background-color: #2e2e2e; /* cor de fundo suave */
    padding: 20px; /* adicionar espaçamento interno */
    border-radius: 10px; /* adicionar cantos arredondados */
    
}
.areas-atuacao h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #ece3c2;
}
.area {
    display: inline-block;
    width: 180px;
    height: 180px;
    margin: 10px;
    color: #D4AF37;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    position: relative;
}
.area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.area span {
    display: block;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: #c2a751;
    padding: 5px;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
}
.contact-section {
    background-image: url('img/imgfundocontato.jpg');
    background-size: cover;
    background-position: center;
    padding: 30px 5px;
    color: #D4AF37;
    margin: 0px 5px 5px 5px;
    border-radius: 10px; /* adicionar cantos arredondados */
}
.contact-form {
    margin: 30px auto;
    max-width: 650px;
    text-align: center;
           
    color: #242118;
    background-color: #9b9292; /* cor de fundo suave */
    padding: 30px; /* adicionar espaçamento interno */
    border-radius: 10px; /* adicionar cantos arredondados */
}
.contact-form h2 {
    font-size: 2em;
    margin-bottom: 20px;
}
.contact-form p {
    font-size: 1.2em;
    margin-bottom: 20px;
}
.contact-form .form-group {
    text-align: left;
}
.contact-form label {
    font-size: 1.1em;
}
.contact-form input, .contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #D4AF37;
    background: black;
    color: #D4AF37;
}
.contact-form input[type="checkbox"] {
    width: auto;
    margin-right: 10px;
}
.contact-form button {
    background: #D4AF37;
    color: black;
    padding: 10px 20px;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
}
.contact-info {
    font-size: 1.1em;
    margin-top: 20px;
}
.terms-link {
color: #fdc200; /* Cor dourada */
}
.terms-link:hover {
    text-decoration: underline;
}
.modal-content {
    background: black;
    color: #D4AF37;
    border: 1px solid #D4AF37;
}
.modal-header, .modal-footer {
    border-bottom: 1px solid #D4AF37;
    border-top: 1px solid #D4AF37;
}
.modal-header .close {
    color: #D4AF37;
}
.footer-content {
    text-align: center;
    color: white;
    font-size: 1.2em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    overflow: hidden;
    word-wrap: break-word;
    hyphens: auto;
}
.footer-content a {
    color: white;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.footer-content a:hover {
    text-decoration: underline;
}
.footer-content svg {
    margin-right: 5px;
}
.footer-content .social-icons {
    margin-top: 0px;
}
.footer-content .social-icons a {
    margin: 0px 10px 0px;
    color: white;
    font-size: 1.5em;
}


/*areas atuação*/
.areas-detalhadas {
    margin: 30px auto; /* Centraliza o contêiner e adiciona margem */
    padding: 20px;
    max-width: 1200px; /* Largura máxima para o contêiner de detalhes */
    display: grid; /* Usa grid para organizar as áreas de detalhe */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Colunas responsivas */
    gap: 25px; /* Espaçamento entre as áreas de detalhe */
    background-color: #1a1a1a; /* Fundo ligeiramente diferente para destaque */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.area-detalhe {
    background-color: #2e2e2e; /* Fundo para cada caixa de detalhe */
    padding: 25px;
    border-radius: 8px;
    text-align: left; /* Alinha o texto à esquerda */
    color: #f0f0f0; /* Cor do texto principal */
    border: 1px solid #444; /* Borda sutil */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    scroll-margin-top: 120px; /* compensa o cabeçalho fixo */
}

.area-detalhe:hover {
    transform: translateY(-5px); /* Efeito de elevação ao passar o mouse */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.area-detalhe h3 {
    color: #D4AF37; /* Cor dourada para os títulos */
    font-size: 1.8em;
    margin-bottom: 15px;
    border-bottom: 2px solid #D4AF37; /* Linha dourada abaixo do título */
    padding-bottom: 10px;
}

.area-detalhe p, li{
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 10px;
    color: #fce7a5; /* Cor do texto dos parágrafos */
}

.area-detalhe p:last-child {
    margin-bottom: 0; /* Remove margem do último parágrafo */
}

/* Media query para telas menores */
@media (max-width: 768px) {
    .areas-detalhadas {
        grid-template-columns: 1fr; /* Uma única coluna em telas menores */
        margin: 20px 10px; /* Ajusta margens para telas menores */
    }

    .area-detalhe {
        padding: 20px;
    }

    .area-detalhe h3 {
        font-size: 1.6em;
    }

    .area-detalhe p {
        font-size: 1em;
    }
}

/* Smooth zoom effect for area images */
.areas-atuacao .area {
    cursor: pointer; /* Indicates it's clickable */
    transition: transform 0.3s ease; /* Smooth transition for the transform property */
}

.areas-atuacao .area:hover {
    transform: scale(1.05); /* Slightly enlarge the image on hover */
}

.video-atuacao {
    width: 100%;
    height: 300px;
    object-fit: cover; /* ou "cover" se quiser preencher totalmente */
    display: block;
    margin-bottom: 0;
    padding-bottom: 0;
}

/*info.php*/
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(180, 179, 179, 0.4);
}


/* Título e conteúdo no modal */
.modal-content h2 {
    color: #333;
}
.modal-content p {
    color: #666;
}

/* Imagens */
/*.card-post img {
  width: 10cm;
  height: 8cm;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}*/
.card-post img {
  
  max-height: 10cm;
  max-width: 8cm;
  border-radius: 10px; /* cantos arredondados */
  object-fit: cover;
}
.minha-imagem-post{
  max-height: 10cm;
  max-width: 8cm;
  border-radius: 10px; /* cantos arredondados */
  object-fit: cover;  
}


.modal-content img {
  max-height: 90%;
  max-width: 90%;
  /*width: auto;
  height: auto;*/
  display: block;
  margin: 0 auto;
}

/* Botões de partilha */
.share-buttons {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

.share-buttons button {
  background-color: #d9d9d9;
  border: none;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
}

.share-buttons button:hover {
  background-color: #c0c0c0;
}
.share-buttons button.x-share {
  font-size: 30px;  /* aumenta o tamanho */
}

.modal-post-content {
  background-color: #f2f2f2;
  color: #494949;
  margin: 5% auto;
  padding: 30px 20px;
  border-radius: 10px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 0 20px rgba(71, 70, 70, 0.5);
}
main.container {
    margin-top: 110px;
    margin-bottom: 110px;
}
/* Corrige layout quebrado da seção info.php */
.info-layout .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

.info-layout .col-md-4 {
  flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 576px) {
  .info-layout .col-md-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (min-width: 992px) {
  .info-layout .col-md-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}
#modalPost .modal-content {
  max-width: 600px;
  margin: 5% auto;
  width: 90%;
}
.btn-saber-mais {
  background-color: #747272;
  color: #1a1a1a;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: bold;
  transition: background-color 0.3s;
}
.btn-saber-mais:hover {
  background-color: #999999;
  color: #ffffff;
}

/* ==== Correção para menu colapsado no mobile não ficar atrás do header ==== */
@media (max-width: 991.98px) {
  .navbar-collapse {
    position: absolute;
    top: 100px; /* altura do header fixo */
    left: 0;
    width: 100%;
    background-color: rgba(0,0,0,0.95);
    z-index: 2000;
    max-height: calc(100vh - 100px); /* limita altura ao ecrã */
    overflow-y: auto; /* adiciona scroll quando necessário */
    padding: 0 20px; /* aumentado padding lateral para mais espaço */
    box-sizing: border-box; /* garante que o padding não cause overflow */
    min-width: 280px; /* largura mínima para garantir legibilidade */
  }

  .navbar-container {
    position: relative;
    top: 40px;
    transform: translateY(-50%);
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
  }
  
  .navbar {
    max-width: 100%;
    overflow: hidden;
  }
  
  /* Garantir que os rebordos apareçam em dispositivos móveis */
  .navbar::before, .navbar::after {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    bottom: -10px !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    z-index: 1 !important;
  }
  
  .navbar::before {
    left: 0 !important;
    border-width: 10px 10px 0 5px !important;
    border-color: #000000 transparent transparent transparent !important;
  }
  
  .navbar::after {
    right: 0 !important;
    border-width: 10px 5px 0 10px !important;
    border-color: #000000 transparent transparent transparent !important;
  }
  
  /* Estilos para o menu colapsado */
  .navbar-nav {
    padding: 20px 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    word-break: normal;
    overflow-wrap: normal;
    min-width: 240px; /* largura mínima para os links */
  }
  
  .navbar-nav .nav-item {
    margin: 10px 0;
    width: 100%;
  }
  
  .navbar-nav .nav-link {
    color: #D4AF37 !important;
    font-size: 18px;
    padding: 15px 25px; /* aumentado padding horizontal */
    text-align: center;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    width: 100%;
    box-sizing: border-box;
    white-space: normal;
    line-height: 1.4;
    word-break: normal;
    overflow-wrap: normal;
    min-width: 220px; /* largura mínima para cada link */
  }
  
  .navbar-nav .nav-link:hover {
    background-color: rgba(212, 175, 55, 0.1);
  }
  
  /* Garantir que o botão do menu seja visível em dispositivos móveis */
  .navbar-toggler {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1001 !important;
  }
  
  .navbar-toggler-icon {
    display: block !important;
    visibility: visible !important;
  }
  
  /* Garantir que o menu tenha largura suficiente para todas as opções */
  .navbar-collapse.show {
    width: 100%;
    min-width: 280px;
  }
}

/* ==== Correção adicional para telas muito pequenas ==== */
@media (max-width: 480px) {
  .navbar-container {
    top: 35px;
    padding: 0 5px;
  }
  
  /* Melhorias para o menu colapsado em smartphones */
  .navbar-collapse {
    padding: 0 15px; /* aumentado padding */
    max-height: calc(100vh - 90px); /* ajusta para header menor */
    min-width: 260px; /* largura mínima para smartphones */
  }
  
  .navbar-nav .nav-link {
    font-size: 16px;
    padding: 12px 20px; /* aumentado padding horizontal */
    line-height: 1.3;
    word-break: normal;
    overflow-wrap: normal;
    min-width: 200px; /* largura mínima para cada link */
  }
  
  .navbar .nav-link {
    font-size: 16px;
    padding: 3px 8px;
  }
  
  /* Garantir que os rebordos apareçam em smartphones */
  .navbar::before, .navbar::after {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    bottom: -10px !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    z-index: 1 !important;
  }
  
  .navbar::before {
    left: 0 !important;
    border-width: 10px 10px 0 5px !important;
    border-color: #000000 transparent transparent transparent !important;
  }
  
  .navbar::after {
    right: 0 !important;
    border-width: 10px 5px 0 10px !important;
    border-color: #000000 transparent transparent transparent !important;
  }
  
  .header-structure {
    height: 90px;
  }
  
  .header-structure .line3 { top: 77px; }
  .header-structure .line4 { top: 81px; }
  
  /* Correção do rodapé para smartphones */
  .footer-structure {
    height: 90px;
  }
  
  .footer-structure .line3 { top: 77px; }
  .footer-structure .line4 { top: 81px; }
  
  .footer-content {
    font-size: 0.8em;
    padding: 0 8px;
    width: 100%;
    max-width: 100%;
  }
  
  .footer-content p {
    font-size: 0.75em;
    line-height: 1.2;
    margin: 5px 0;
  }
  
  .footer-content .social-icons {
    margin-top: 5px;
  }
  
  .footer-content .social-icons a {
    font-size: 1.1em;
    margin: 0 5px;
  }
  
  /* Melhorias para texto da missão em dispositivos móveis */
  .mission-text {
    font-size: clamp(14px, 3vw, 20px) !important;
    width: 95% !important;
    margin: 15px auto 0 !important;
    line-height: 1.4;
  }
  
  .mission-text h1 {
    font-size: 2.2em !important;
    margin-bottom: 15px;
  }
  
  .mission-text p {
    margin-bottom: 15px;
    text-align: left;
  }
  
  /* Melhorias para áreas de atuação */
  .areas-atuacao h2 {
    font-size: 2em;
    margin-bottom: 15px;
  }
  
  .area {
    width: 150px;
    height: 150px;
    margin: 8px;
  }
  
  .area span {
    font-size: 1.1em;
    padding: 8px 5px;
  }
  
  /* Melhorias para formulário de contato */
  .contact-form h2 {
    font-size: 1.8em;
    margin-bottom: 15px;
  }
  
  .contact-form p {
    font-size: 1.1em;
    margin-bottom: 15px;
    line-height: 1.4;
  }
  
  .contact-form label {
    font-size: 1em;
    margin-bottom: 5px;
    display: block;
  }
  
  .contact-form input, .contact-form textarea {
    font-size: 16px; /* Evita zoom no iOS */
    padding: 12px;
    margin-bottom: 15px;
  }
  
  .contact-form button {
    font-size: 1.1em;
    padding: 12px 25px;
    margin-top: 10px;
  }
  
  .contact-info {
    font-size: 1em;
    margin-top: 20px;
    line-height: 1.4;
  }
  
  .contact-info p {
    margin-bottom: 10px;
  }
}

/* ==== Correção para telas muito pequenas (smartphones pequenos) ==== */
@media (max-width: 320px) {
  .footer-content {
    font-size: 0.7em;
    padding: 0 5px;
  }
  
  /* Melhorias para o menu colapsado em smartphones muito pequenos */
  .navbar-collapse {
    padding: 0 12px; /* aumentado padding */
    max-height: calc(100vh - 90px);
    min-width: 240px; /* largura mínima para smartphones muito pequenos */
  }
  
  .navbar-nav .nav-link {
    font-size: 15px;
    padding: 10px 18px; /* aumentado padding horizontal */
    line-height: 1.2;
    word-break: normal;
    overflow-wrap: normal;
    min-width: 180px; /* largura mínima para cada link */
  }
  
  /* Garantir que os rebordos apareçam em smartphones muito pequenos */
  .navbar::before, .navbar::after {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    bottom: -10px !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    z-index: 1 !important;
  }
  
  .navbar::before {
    left: 0 !important;
    border-width: 10px 10px 0 5px !important;
    border-color: #000000 transparent transparent transparent !important;
  }
  
  .navbar::after {
    right: 0 !important;
    border-width: 10px 5px 0 10px !important;
    border-color: #000000 transparent transparent transparent !important;
  }
  
  /* Garantir que o botão do menu seja visível */
  .navbar-toggler {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1001 !important;
  }
  
  .footer-content p {
    font-size: 0.65em;
    line-height: 1.1;
  }
  
  .footer-content .social-icons a {
    font-size: 1em;
    margin: 0 3px;
  }
  
  /* Melhorias para texto da missão em smartphones muito pequenos */
  .mission-text {
    font-size: clamp(13px, 3.5vw, 18px) !important;
    width: 98% !important;
    margin: 10px auto 0 !important;
    line-height: 1.3;
  }
  
  .mission-text h1 {
    font-size: 2em !important;
    margin-bottom: 12px;
  }
  
  .mission-text p {
    margin-bottom: 12px;
    text-align: left;
  }
  
  /* Melhorias para áreas de atuação em smartphones muito pequenos */
  .areas-atuacao h2 {
    font-size: 1.8em;
    margin-bottom: 12px;
  }
  
  .area {
    width: 130px;
    height: 130px;
    margin: 6px;
  }
  
  .area span {
    font-size: 1em;
    padding: 6px 4px;
  }
  
  /* Melhorias para formulário de contato em smartphones muito pequenos */
  .contact-form h2 {
    font-size: 1.6em;
    margin-bottom: 12px;
  }
  
  .contact-form p {
    font-size: 1em;
    margin-bottom: 12px;
    line-height: 1.3;
  }
  
  .contact-form label {
    font-size: 0.95em;
    margin-bottom: 4px;
    display: block;
  }
  
  .contact-form input, .contact-form textarea {
    font-size: 16px;
    padding: 10px;
    margin-bottom: 12px;
  }
  
  .contact-form button {
    font-size: 1em;
    padding: 10px 20px;
    margin-top: 8px;
  }
  
  .contact-info {
    font-size: 0.95em;
    margin-top: 15px;
    line-height: 1.3;
  }
  
  .contact-info p {
    margin-bottom: 8px;
  }
}