/* ==========================================================
   AFCEC - Correções para mobile
   Cole este bloco no FINAL do css/style.css
   (ou salve como css/mobile-fix.css e inclua DEPOIS do novo.css)
   ========================================================== */

/* 1) Nada pode ser mais largo que a tela (causa do fundo verde "cortado") */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

@supports (overflow: clip) {
    body { overflow-x: clip; }
}

@media (max-width: 991.98px) {

    /* Regras globais de <img> que empurravam todas as imagens */
    img {
        margin-left: 0 !important;
        margin-top: 0;
        max-width: 100% !important;
        height: auto;
    }

    /* mantém o logo pequeno do menu fixo no tamanho original */
    .navigation .navbar .navbar-brand img {
        max-width: 63px !important;
    }

    /* 2) Fundo verde do topo ocupa a largura toda */
    .hero-area {
        width: 100%;
        overflow: hidden;
    }

    .hero-area .custom-shape {
        left: 0 !important;
        width: 100%;
    }

    /* 3) Logo do topo: centralizado, menor e SEM ficar por cima do texto */
    .doa30 {
        left: 0;
        top: 75px;                  /* logo abaixo do menu fixo (61px) */
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0;
        text-align: center;
    }

    .doa30 .navbar-brand {
        display: inline-block;
        margin: 0;
        padding: 0;
    }

    .doa30 img {
        width: 200px;
        max-width: 60vw !important;
        margin: 0 auto !important;
        display: block;
    }

    .hero-area {
        padding-top: 0 !important;
    }

    /* empurra o título para baixo do logo (75px + ~150px do logo + respiro) */
    #TxtTopo {
        padding-top: 250px !important;
    }

    /* 4) Vídeo centralizado e ocupando a largura disponível */
    .hero-area .right-img {
        text-align: center;
        width: 100%;
        padding: 0;
    }

    #videoInst {
        display: block;
        width: 100% !important;
        max-width: 100%;
        height: auto;
        margin: 30px auto 0 !important;
        text-align: center !important;
    }

    /* 5) Bloco "Nosso Objetivo": sem largura fixa e sem sobreposição */
    .whaybest .feature-list {
        width: 100% !important;
        margin-left: 0;
        margin-right: 0;
    }

    .whaybest .feature-list li {
        max-width: 100%;
        flex: 0 0 100%;
        margin-bottom: 30px;
    }

    .whaybest .feature-list li .icon {
        height: auto !important;
        margin-bottom: 14px;
    }

    .whaybest .feature-list li .icon img {
        margin: 0 auto !important;
        display: block;
    }

    .whaybest .about-img {
        padding: 0 !important;
    }

    /* animações AOS laterais não podem criar rolagem horizontal */
    [data-aos="fade-left"],
    [data-aos="fade-right"] {
        max-width: 100%;
    }
}

@media (max-width: 575.98px) {
    /* Sobrescreve os valores antigos (786px, 76px, -23px, 500px...) */
    #videoInst {
        margin: 30px auto 0 !important;
    }
}