.title {
    text-align: center;
    font-size: 2rem;
    /* Ajuste o tamanho conforme necessário */
    font-weight: bold;
    margin-bottom: 1em;
    color: var(--title-plans);
    font-size: 60px;
    /* Cor do título */
}
.sub-title {
    text-align: center;
    font-size: 2rem;
    /* Ajuste o tamanho conforme necessário */
    font-weight: bold;
    margin-bottom: 1em;
    color: var(--sub-title-plans);
    font-size: 35px;
    /* Cor do título */
}

.container-wrapper {
    display: flex;
    flex-direction: column;
    /* Título e container empilhados */
    align-items: center;
    /* Centraliza o título e o contêiner */
    width: 100%;
    margin-top: 2em;

}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
    padding: 20px;
    border-radius: 10px;
    padding-bottom: 5em;
}

.image-section {
    flex-shrink: 0;
    /* margin-right: 2em; */
}

.image-section img {
    width: 600px;
    height: 45em;
    -o-object-fit: cover;
       object-fit: cover;
    opacity: 0;
    transform: scale(1.02) translateY(20px); /* Começa menor e deslocada */
    filter: blur(10px); /* Começa desfocada */
    transition: opacity 2s ease, transform 2s ease, filter 2s ease; /* Ajuste da transição */
}

.image-section img.visible {
    opacity: 1;
    transform: scale(1.03) translateY(0); /* Leve zoom e centralização */
    filter: blur(0); /* Remove o desfoque */
    transition: opacity 2s ease, transform 2s ease, filter 2s ease; /* Ajuste da transição */
}

.benefits-section {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center ;
}

.benefits-section ul {
    list-style: none;
    position: relative;
    margin: 0;
    padding: 0;
}

@media (max-width: 1200px) {
    .benefits-section ul {
        margin-top: 20px;
    }
}



.benefits-section li {
    transform-origin: 0% 50%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: transform 0.3s ease;
    margin: 15px 0;
}

.benefits-section li img {
    width: 4rem;
    /* Tamanho responsivo */
    height: auto;
    /* Mantém a proporção original */
    max-width: 100%;
    /* Garante que não ultrapasse o tamanho do contêiner */
    margin-right: 10px;
}

.benefits-section li span {
    font-size: 22px;
    font-weight: bold;
    /* Adicionado para negrito */
    color: #A60069;
}

.benefits-section li img.advantage-icon {
    width: 4rem;
    height: auto;
    /* cursor: pointer; */
    transition: opacity 2s ease, transform 2s ease, filter 2s ease; /* Ajuste da transição */
    /* Adiciona transição ao ícone */
}

.benefits-section li img.advantage-icon:hover {
    transform: scale(1.1);
    /* Amplia o ícone ao passar o mouse */
    opacity: 0.8;
    /* Reduz ligeiramente a opacidade */
}
@media (max-width: 768px) {
    .benefits-section li img.advantage-icon {
        width: 3rem;
        height: auto;
        /* cursor: pointer; */
        transition: opacity 2s ease, transform 2s ease, filter 2s ease; /* Ajuste da transição */
        /* Adiciona transição ao ícone */
    }

    .benefits-section li img.advantage-icon:hover {
        transform: scale(1.1);
        /* Amplia o ícone ao passar o mouse */
        opacity: 0.8;
        /* Reduz ligeiramente a opacidade */
    }
    .container {
        flex-direction: column; /* Empilha os elementos */
        padding: 0;
    }

    .title {
        text-align: center; /* Centraliza o texto horizontalmente */
        font-size: 1.5rem; /* Ajuste o tamanho conforme necessário */
        font-weight: bold;
        color: var(--title-plans); /* Cor do título */
        word-wrap: break-word; /* Quebra palavras longas */
        overflow-wrap: break-word; /* Garante quebra em palavras longas */
        line-height: 1.5; /* Aumenta o espaçamento entre as linhas */
        margin-top: -1em;
        margin-bottom: 7px;
    }
    .sub-title {
        text-align: center; /* Centraliza o texto horizontalmente */
        font-size: 1.2rem; /* Ajuste o tamanho conforme necessário */
        font-weight: bold;
        color: var(--sub-title-plans); /* Cor do título */
        word-wrap: break-word; /* Quebra palavras longas */
        overflow-wrap: break-word; /* Garante quebra em palavras longas */
        line-height: 1.5; /* Aumenta o espaçamento entre as linhas */
        margin-top: -1em;
        margin-bottom: 7px;
        margin-top: 2px;
    }


    .image-section {
        order: 2; /* Move a imagem para o fundo */
        margin: 20px 0; /* Espaçamento entre a lista e a imagem */
    }

    .image-section img {
        width: 100%; /* Ajusta a largura da imagem ao contêiner */
        height: auto; /* Mantém a proporção */
        max-width: 90vw; /* Garante que não ultrapasse a tela */
    }

    .benefits-section {
        order: 1; /* Move os itens para cima */
        display: flex;
        flex-direction: column; /* Empilha os itens */
        align-items: center; /* Centraliza os itens */
        margin-bottom: 1em; /* Espaço entre os itens e a imagem */
        margin: 0;
        width: 100%;
        max-width: 100%; /* Garante que o container não ultrapasse a largura disponível */
        overflow: hidden; /* Impede que o conteúdo extrapole */
        padding: 0 10px;
    }


    .benefits-section li {
        margin: 10px 0; /* Espaçamento entre os itens */
        transform: none; /* Remove a transformação da meia-lua */
        text-align: left; /* Texto alinhado à esquerda */ /* Ajusta a largura para ser dinâmica */ /* Alinha o ícone e o texto na horizontal */ /* Centraliza verticalmente ícone e texto */
        display: flex; /* Garante o alinhamento horizontal */
        align-items: center; /* Centraliza verticalmente */
        justify-content: flex-start; /* Alinha o conteúdo à esquerda */
        padding: 0 15px; /* Adiciona padding lateral */
        margin: 15px 0; /* Espaço entre os itens */
        box-sizing: border-box; /* Inclui padding no tamanho total do elemento */
        width: 100%; /* Garante que respeite o tamanho do container */
    }

    .benefits-section li img {
        margin-right: 0; /* Remove espaçamento lateral */
        margin-bottom: 5px; /* Espaço abaixo do ícone */
        display: block; /* Força o ícone a ficar acima do texto */
    }

    .benefits-section li span {
        font-size: 18px; /* Tamanho da fonte */
        font-weight: bold; /* Deixa o texto em negrito */
        color: #A60069; /* Cor personalizada */
        word-wrap: break-word; /* Quebra palavras muito longas */
        overflow-wrap: break-word; /* Garante a quebra */
        max-width: 100%; /* Ajusta à largura do container */
        text-align: left; /* Alinha o texto à esquerda */
        line-height: 1.4; /* Melhora o espaçamento entre linhas */
        margin-left: 1em;
    }
}

.preview-img {
    max-width: 300px; /* Define a largura máxima da imagem */
    max-height: 300px; /* Define a altura máxima da imagem */
    -o-object-fit: contain;
       object-fit: contain; /* Faz com que a imagem se ajuste dentro do container sem distorção */
    margin: 0 auto; /* Centraliza a imagem */
    display: block; /* Garante que a imagem seja exibida como um bloco */
}