/* ========================================= */
/* MÓDULO 1: SIMPLIFICANDO O CAMINHO         */
/* ========================================= */

.simplificando-section {
    background-color: #40ac53;
    padding: 50px 20px;
    width: 100%;
}

.simplificando-section .main-container {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.simplificando-section .text-content {
    color: white;
    font-size: 30px;
    line-height: 1.2;
    text-align: left;
    font-weight: 900; /* Ajustado para a fonte "Black" que você carregou */
    font-family: 'Neogrotesk Ess Alt', sans-serif; /* Adicionado para aplicar a fonte */
}

/* Regras de visibilidade para as versões desktop e mobile do Módulo 1 */
.simplificando-section-mobile {
    display: none; /* Por padrão, oculta a versão mobile no desktop */
}


/* ========================================= */
/* MÓDULO 2: CONQUISTAR SUA MORADIA          */
/* ========================================= */

.simplificando-section2 {
    background-color: white;
    padding: 50px 20px;
}

.simplificando-section2 .main-container2 {
    max-width: 1200px;
    margin: 0 auto;
}

.simplificando-section2 .content-wrapper2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.simplificando-section2 .image-content2 {
    flex-shrink: 0;
    flex-basis: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Regra CRUCIAL para a imagem */
.simplificando-section2 .responsive-image {
    max-width: 100%;
    height: auto;
    display: block;
}

.simplificando-section2 .text-content2 {
    flex: 1;
    color: #333;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    max-width: 400px;
    font-weight: 100;
    font-family: 'Neogrotesk Ess Alt', sans-serif;
}


/* ========================================= */
/* SEÇÃO 3: ÍCONES E BENEFÍCIOS              */
/* ========================================= */
.benefits-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding-top: 20px;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 20px;
}

.icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #28a745;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-circle i {
    color: white;
    font-size: 28px;
}

.text-content-benefit h3 {
    color: #28a745;
    font-size: 20px;
    margin: 0;
    font-weight: 600;
}

.text-content-benefit p {
    color: #555;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

/*
* FONTES
* As definições @font-face estão corretas e não precisam de alteração.
* (Código das fontes omitido aqui para brevidade, mas deve permanecer no seu arquivo CSS)
*/

/* ========================================= */
/* MEDIA QUERIES PARA RESPONSIVIDADE         */
/* ========================================= */

@media (max-width: 768px) {
    /* Oculta a versão desktop do Módulo 1 e mostra a versão mobile */
    .simplificando-section-desktop {
        display: none;
    }
    .simplificando-section-mobile {
        display: block; /* Mostra a versão mobile */
        padding: -10px 0px; /* Ajuste o padding para mobile */
    }

    /* Ajustes específicos para o texto da versão mobile do Módulo 1 */
    .simplificando-section-mobile .text-content {
        font-size: 28px; /* Reduz o tamanho da fonte para mobile */
        line-height: 1.1; /* Ajusta a altura da linha */
        text-align: center; /* Alinha o texto à esquerda, como na imagem */
    }

    .simplificando-section2 .content-wrapper2 {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .simplificando-section2 .image-content2 {
        min-height: auto;
        width: 100%;
        justify-content: center;
    }

    .simplificando-section2 .text-content2 {
        font-size: 20px;
        max-width: 100%;
        
    }
}