.new-section {
    display: flex;
    align-items: flex-start; /* Alinha os itens ao topo */
    justify-content: space-between; /* Espaça o conteúdo e a imagem */
    padding: 30px 100px; /* Aumenta o espaçamento nas laterais */
    background-color: rgb(30, 203, 86); /* Cor de fundo da seção */
}

.content {
    flex: 1; /* Faz o conteúdo ocupar o máximo de espaço à esquerda */
    margin-right: 20px; /* Espaçamento entre o conteúdo e a imagem lateral */
}

.section-title-image {
    max-width: 200px; /* Ajuste o tamanho da imagem do título conforme necessário */
    margin-bottom: 20px; /* Espaçamento abaixo da imagem do título */
} 

.section-description {
    font-size: 16px; /* Tamanho do texto */
    color: #000000;
    margin-bottom: 20px; /* Espaçamento abaixo da descrição */
}

.button-group {
    display: flex;
    gap: 10px; /* Espaçamento entre os botões */
    margin-bottom: 20px; /* Espaçamento inferior */
}

.btn {
    padding: 10px 20px; /* Espaçamento do botão */
    text-decoration: none; /* Remove sublinhado */
    border-radius: 5px; /* Bordas arredondadas */
    transition: background-color 0.3s ease; /* Transição para mudança de cor */
    border: 1px solid; /* Adiciona borda */
}

.btn-black {
    background-color: #000000; /* Cor de fundo preto */
    color: #fff; /* Cor do texto */
    border-color: #3333331e; /* Borda da mesma cor do fundo */
}

.btn-black:hover {
    background-color: #7ace4a; /* Cor do botão ao passar o mouse */
    color: #000000; /* Cor do texto */
    border-color: #000000; /* Borda preta */
}

.btn-transparent {
    background-color: transparent; /* Fundo transparente */
    color: #000000; /* Cor do texto */
    border-color: #252525; /* Borda preta */
} 

.btn-transparent:hover {
    background-color: rgba(94, 179, 55, 0.986); /* Fundo levemente cinza ao passar o mouse */
    color: #ffffff; /* Cor do texto */
    border-color: #000000; /* Borda preta */
}

/* Estilos da seção superior da aplicação */
.nio-ajuda-cima-section {
    background: #192B1C;
    padding: 0;
    width: 100%;
}
.nio-ajuda-cima-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0;
}
.nio-ajuda-cima-row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 220px;
    padding: 10px;
    gap: 0;
}
.nio-ajuda-cima-col-info {
    /*flex: 0 0 0px;*/
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 35px 20px 0 60px;
    min-height: 220px;
}
.nio-ajuda-cima-title {
    font-size: 0.98rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.2;
}
.nio-ajuda-cima-desc-bold {
    font-size: 0.98rem;
    font-weight: 600;
    color: #fff;
    display: block;
}
.nio-ajuda-cima-links-ajuda {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 8px;
}
.nio-ajuda-cima-ajuda-link {
    color: #b6ff7a;
    font-weight: 600;
    text-decoration: none;
    font-size: 1.08rem;
    margin-bottom: 2px;
    transition: color 0.2s;
    display: inline-block;
}
.nio-ajuda-cima-ajuda-link.green-link {
    color: #6cfb3a;
}
.nio-ajuda-cima-ajuda-link.green-link:hover {
    color: #25D500;
}
.nio-ajuda-cima-ajuda-desc {
    color: #fff;
    font-size: 1rem;
    margin-bottom: 2px;
    margin-left: 0;
    font-weight: 400;
}
.nio-ajuda-cima-col-cards {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 40px 0 0 0;
}
.nio-ajuda-cima-cards {
    display: flex;
    gap: 32px;
    flex-wrap: nowrap;
}
.nio-ajuda-cima-card {
    background: #F6F2EE;
    border-radius: 24px;
    padding: 16px 14px 14px 14px; /* padding reduzido */
    min-width: 170px;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #142d13;
    font-weight: 600;
    font-size: 1.08rem;
    text-decoration: none;
    box-shadow: 0 2px 16px 0 rgba(0,0,0,0.09);
    transition: box-shadow 0.2s, background 0.2s;
    border: none;
    gap: 18px;
}
.nio-ajuda-cima-card:hover {
    background: #F6F2EE;
    border: 0px solid #23b900;
    box-shadow: 0 0 12px 3px #23b90080;
}
.nio-ajuda-cima-card-icon {
    font-size: 2.2rem;
    color: #F6F2EE;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
}
.green-icon,
.nio-ajuda-cima-card-icon i,
.nio-ajuda-cima-card-icon img {
    color: #23b900 !important;
    fill: #23b900 !important;
}
.nio-ajuda-cima-card-title {
    font-size: 1.08rem;
    color: #142d13;
    font-weight: 600;
    margin-top: 0;
}
@media (max-width: 1100px) {
    .nio-ajuda-cima-row {
        flex-direction: column;
        gap: 0;
        align-items: stretch;
    }
    .nio-ajuda-cima-col-info {
        padding: 32px 0 0 24px;
        min-height: 0;
    }
    .nio-ajuda-cima-col-cards {
        padding: 24px 0 0 0;
        justify-content: flex-start;
    }
    .nio-ajuda-cima-cards {
        gap: 18px;
        flex-wrap: wrap;
    }
    .nio-ajuda-cima-card {
        min-width: 140px;
        min-height: 110px;
        padding: 18px 10px 14px 10px;
        font-size: 1rem;
        border-radius: 16px;
    }
}
@media (max-width: 700px) {
    .nio-ajuda-cima-container {
        padding: 0;
    }
    .nio-ajuda-cima-row {
        flex-direction: column;
        align-items: stretch;
    }
    .nio-ajuda-cima-col-info {
        padding: 14px 8px 0 8px;
        flex: 0 0 140px;
        min-width: 0;
        width: 100%;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .nio-ajuda-cima-title {
        font-size: 1rem;
        margin-bottom: 6px;
    }
    .nio-ajuda-cima-desc-bold {
        font-size: 1rem;
    }
    .nio-ajuda-cima-links-ajuda {
        margin-top: 10px;
    }
    .nio-ajuda-cima-col-cards {
        padding: 12px 0 0 0;
        justify-content: flex-start;
    }
    .nio-ajuda-cima-cards {
        gap: 4px;
        flex-wrap: wrap;
        padding: 8px 0 8px 0;
        justify-content: center;
    }
    .nio-ajuda-cima-card {
        min-width: 140px;
        min-height: 70px;
        padding: 8px 4px 8px 4px;
        font-size: 0.93rem;
        border-radius: 10px;
    }
    .nio-ajuda-cima-card-title {
        font-size: 0.93rem;
    }
    .nio-ajuda-cima-title {
        font-size: 1rem;
    }
    .nio-ajuda-cima-desc-bold {
        font-size: 1rem;
    }
}
@media (max-width: 430px) {
    .nio-ajuda-cima-col-info {
        padding: 8px 4px 0 8px;
    }
}
@media (max-width: 768px) {
    .new-section {
        flex-direction: column; /* Alinha os elementos em coluna em telas menores */
        text-align: center; /* Centraliza o texto */
        padding: 20px; /* Reduz o preenchimento em telas menores */
    }

    .content {
        margin-right: 0; /* Remove a margem direita em telas pequenas */
        margin-bottom: 20px; /* Espaçamento abaixo do conteúdo */
    }

    .section-title-image {
        max-width: 150px; /* Ajusta o tamanho da imagem do título para telas pequenas */
        margin-bottom: 15px; /* Ajusta o espaçamento */
    }

    .section-description {
        font-size: 14px; /* Reduz o tamanho da fonte para melhor legibilidade */
    }

    .button-group {
        flex-direction: column; /* Alinha os botões verticalmente em telas menores */
        align-items: center; /* Centraliza os botões */
    }

    .btn {
        width: 100%; /* Faz os botões ocuparem toda a largura disponível */
        max-width: 200px; /* Limita a largura máxima dos botões */
    }
}

/* Responsividade 320px */
@media (max-width: 320px) {
    .new-section {
        flex-direction: column; /* Alinha os elementos em coluna em telas menores */
        text-align: center; /* Centraliza o texto */
        padding: 20px; /* Reduz o preenchimento em telas menores */

    }

    .content {
        margin-right: 0; /* Remove a margem direita em telas pequenas */
        margin-bottom: 20px; /* Espaçamento abaixo do conteúdo */
        text-align: left; /* Centraliza o texto */
    }

    .section-title-image {
        max-width: 150px; /* Ajusta o tamanho da imagem do título para telas pequenas */
        margin-bottom: 15px; /* Ajusta o espaçamento */
    }

    .section-description {
        font-size: 14px; /* Reduz o tamanho da fonte para melhor legibilidade */
    }

    .button-group {
        flex-direction: column; /* Alinha os botões verticalmente em telas menores */
        align-items: center; /* Centraliza os botões */
    }

    .btn {
        width: 100%; /* Faz os botões ocuparem toda a largura disponível */
        max-width: 250px; /* Limita a largura máxima dos botões */
        font-size: 14px; /* Tamanho do texto */

    }
}

/* Responsividade 375px */
@media (max-width: 375px) {
    .new-section {
        flex-direction: column; /* Alinha os elementos em coluna em telas menores */
        text-align: center; /* Centraliza o texto */
        padding: 20px; /* Reduz o preenchimento em telas menores */
    }

    .content {
        margin-right: 0; /* Remove a margem direita em telas pequenas */
        margin-bottom: 20px; /* Espaçamento abaixo do conteúdo */
        text-align: left; /* Centraliza o texto */
    }

    .section-title-image {
        max-width: 150px; /* Ajusta o tamanho da imagem do título para telas pequenas */
        margin-bottom: 15px; /* Ajusta o espaçamento */
    }

    .section-description {
        font-size: 14px; /* Reduz o tamanho da fonte para melhor legibilidade */
    }


    .button-group {
        flex-direction: column; /* Alinha os botões verticalmente em telas menores */
        align-items: center; /* Centraliza os botões */
    }

    .btn {
        width: 100%; /* Faz os botões ocuparem toda a largura disponível */
        max-width: 210px; /* Limita a largura máxima dos botões */
        font-size: 12px; /* Tamanho do texto */

    }
}

/* Responsividade 425px */
@media (max-width: 425px) {
    .new-section {
        flex-direction: column; /* Alinha os elementos em coluna em telas menores */
        text-align: center; /* Centraliza o texto */
        padding: 20px; /* Reduz o preenchimento em telas menores */
        margin-top: -20px; /* Move o botão mais para cima */
    }

    .content {
        margin-right: 0; /* Remove a margem direita em telas pequenas */
        margin-bottom: 20px; /* Espaçamento abaixo do conteúdo */
        text-align: left; /* Centraliza o texto */
    }

    .section-title-image {
        max-width: 150px; /* Ajusta o tamanho da imagem do título para telas pequenas */
        margin-bottom: 15px; /* Ajusta o espaçamento */
    }

    .section-description {
        font-size: 14px; /* Reduz o tamanho da fonte para melhor legibilidade */
    }

    .button-group {
        flex-direction: column; /* Alinha os botões verticalmente em telas menores */
        align-items: center; /* Centraliza os botões */
    }

    .btn {
        width: 100%; /* Faz os botões ocuparem toda a largura disponível */
        max-width: 220px; /* Limita a largura máxima dos botões */
        font-size: 11px; /* Tamanho do texto */

    }
}

/* Responsividade 768px */
@media (max-width: 768px) {
    .new-section {
        flex-direction: column; /* Alinha os elementos em coluna em telas menores */
        text-align: center; /* Centraliza o texto */
        padding: 20px; /* Reduz o preenchimento em telas menores */
    }

    .content {
        margin-right: 0; /* Remove a margem direita em telas pequenas */
        margin-bottom: 20px; /* Espaçamento abaixo do conteúdo */
        text-align: left; /* Centraliza o texto */
    }

    .section-title-image {
        max-width: 150px; /* Ajusta o tamanho da imagem do título para telas pequenas */
        margin-bottom: 15px; /* Ajusta o espaçamento */
    }

    .section-description {
        font-size: 17px; /* Reduz o tamanho da fonte para melhor legibilidade */
    }

    .button-group {
        flex-direction: row; /* Alinha os botões verticalmente em telas menores */
        align-items: left; /* Centraliza os botões */
    }

    .btn {
        width: 100%; /* Faz os botões ocuparem toda a largura disponível */
        max-width: 210px; /* Limita a largura máxima dos botões */
    }
}

/* Responsividade 1024px */
@media (max-width: 1024px) {
    .new-section {
        flex-direction: column; /* Alinha os elementos em coluna em telas menores */
        text-align: center; /* Centraliza o texto */
        padding: 20px; /* Reduz o preenchimento em telas menores */
    }

    .content {
        margin-right: 10; /* Remove a margem direita em telas pequenas */
        margin-bottom: 20px; /* Espaçamento abaixo do conteúdo */
        text-align: left; /* Centraliza o texto */
    }

    .section-title-image {
        max-width: 150px; /* Ajusta o tamanho da imagem do título para telas pequenas */
        margin-bottom: 15px; /* Ajusta o espaçamento */
    }

    .section-description {
        font-size: 17px; /* Reduz o tamanho da fonte para melhor legibilidade */
        margin-right: 0; /* Remove a margem direita em telas pequenas */

    }

    .button-group {
        flex-direction: row; /* Alinha os botões verticalmente em telas menores */
        align-items: left; /* Centraliza os botões */
    }

    .btn {
        width: 100%; /* Faz os botões ocuparem toda a largura disponível */
        max-width: 210px; /* Limita a largura máxima dos botões */
    }
}

/* Responsividade para a seção superior da aplicação */
@media (max-width: 900px) {
    .nio-ajuda-cima-header {
        flex-direction: column;
        gap: 18px;
        padding: 24px 0 0 0;
    }
    .nio-ajuda-cima-links {
        gap: 12px;
    }
    .nio-ajuda-cima-link {
        min-width: 120px;
        min-height: 90px;
        font-size: 1rem;
        padding: 14px 10px;
    }
}

@media (max-width: 600px) {
    .nio-ajuda-cima-container {
        padding: 10px 6px;
    }
    .nio-ajuda-cima-header {
        padding: 14px 0 0 0;
    }
    .nio-ajuda-cima-link {
        min-width: 90px;
        min-height: 70px;
        font-size: 0.95rem;
        padding: 8px 4px;
    }
    .nio-ajuda-cima-title {
        font-size: 1rem;
    }
    .nio-ajuda-cima-desc {
        font-size: 0.95rem;
    }
    .nio-ajuda-cima-ajuda {
        margin-top: 18px;
        gap: 8px;
    }
    .nio-ajuda-cima-ajuda-link,
    .nio-ajuda-cima-ajuda-desc {
        font-size: 0.95rem;
    }
}

/* DESKTOP: Cartões lado a lado */
@media (min-width: 426px) {
    .nio-ajuda-cima-cards {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 22px;
        justify-content: flex-start;
        align-items: stretch;
    }
    .nio-ajuda-cima-card {
        min-width: 170px;
        max-width: 220px;
        min-height: 160px;
        border-radius: 24px;
        margin-bottom: 0;
        margin-right: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #fff;
        box-shadow: 0 2px 16px 0 rgba(0,0,0,0.09);
    }
}

/* MOBILE: Cartões em grid 2x2 */
@media (max-width: 425px) {
    .nio-ajuda-cima-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .nio-ajuda-cima-card {
        min-width: 0;
        max-width: 100%;
        min-height: 90px;
        background: #fff;
        color: #142d13;
        border-radius: 18px;
        margin-bottom: 0;
        margin-right: 0;
        box-shadow: 0 2px 8px 0 rgba(0,0,0,0.07);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 18px 40px 18px;
        font-size: 1.08rem;
        border: none;
        gap: 8px;
    }
    .nio-ajuda-cima-card-icon {
        font-size: 2.1rem;
        height: 32px;
        margin-bottom: 0;
        color: #23b900 !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .nio-ajuda-cima-card-title {
        font-size: 1.08rem;
        font-weight: 600;
        color: #142d13;
        margin-top: 0;
        text-align: center;
        line-height: 1.2;
    }
    .nio-ajuda-cima-col-cards {
        width: 100%;
    }
}

/* MOBILE: Cartões em grid 2x2 */
@media (max-width: 320px) {
    .nio-ajuda-cima-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .nio-ajuda-cima-card {
        min-width: 0;
        max-width: 100%;
        min-height: 90px;
        background: #fff;
        color: #142d13;
        border-radius: 18px;
        margin-bottom: 0;
        margin-right: 0;
        box-shadow: 0 2px 8px 0 rgba(0,0,0,0.07);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 25px 4px 20px 4px;
        font-size: 1.08rem;
        border: none;
        gap: 8px;
    }
    .nio-ajuda-cima-card-icon {
        font-size: 2.1rem;
        height: 32px;
        margin-bottom: 0;
        color: #23b900 !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .nio-ajuda-cima-card-title {
        font-size: 1.08rem;
        font-weight: 600;
        color: #142d13;
        margin-top: 0;
        text-align: center;
        line-height: 1.2;
    }
    .nio-ajuda-cima-col-cards {
        width: 100%;
    }
}