main {
    padding: 40px; /* Espaço entre o conteúdo e a borda */
    display: flex; /* Para mexer na posição da imagem e do texto */
    align-items: flex-start; /* Alinha os itens mas sem distorcer a imagem */
    gap: 50px; /* Espaço entre os conteúdos da flexbox (texto e imagem) */
}

.texto-container {
    flex: 2; /* o 2 indica que de 3 partes da tela, o texto deve ocupar 2, ou seja, mais do que a imagem */
    text-align: left; /* Alinha o texto na esquerda */
}

.foto-container { /* Altera as propriedades do container da foto, não da foto em si */
    flex: 1; /* De 3 partes da tela, a imagem ocupa 1 */
    display: flex;
    justify-content: center; /* Centraliza a imagem dentro da porção da tela que possui */
    margin-top: 30px; /* Margem no topo */
}

main img { /* Altera as propriedades da foto */
    max-width: 300px; /* Comprimento */
    height: auto; /* Altura */
    border-radius: 15px; /* Arredonda a imagem toda */
    box-shadow: 15px 15px 50px; /* Sombra mais suave e moderna */
}

p {
    font-size: 20px; /* Tamanho da fonte dos itens dentro das seções */
}

h1 {
    font-size: 40px; /* Tamanho da fonte do nome principal */
}

/* Estilo do título das seções */
h3 {

    border-bottom: 2px solid #00ff0d; /* Linha embaixo do título */
    padding-bottom: 5px; /* Espaço entre o texto e a borda debaixo */
    margin-top: 30px; /* Tamanho da margem do topo */
    text-transform: uppercase; /* Deixa o texto todo em maiúscilo */
    font-size: 30px; /* Tamanho da fonte */
}

/* Estilo do conteúdo das seções */
h4 {
    margin-bottom: 5px;
    color: #333;
    font-size: 20px;
}

.lista-certificados {
    list-style-type: disc; /* Estilo da bolinha do lado de cada item */
    list-style-position: inside; /* Deixa as bolinhas juntas do texto */
    padding-left: 10px; /* Espaço entre o conteúdo e a borda */
}

.lista-certificados li {
    margin-bottom: 10px; /* Margem debaixo */
    font-size: 20px; /* Tamanho da fonte */
}

@media (max-width: 768px) {
    
    main {
        flex-direction: column-reverse; /* Coloca a foto em cima e o texto embaixo */
        padding: 20px;                 
        gap: 20px; /* Diminui o espaço entre foto e texto */
        align-items: center;
    }

    .texto-container {
        flex: none; /* Cancela a divisão de 2/3 no mobile */
        width: 100%; /* Faz o texto ocupar a largura toda */
        text-align: center;
    }

    .foto-container {
        flex: none; /* Cancela a divisão de 1/3 */
        margin-top: 10px;
        width: 100%;
    }

    main img {
        max-width: 200px; /* Diminui a foto no celular */
    }

    /* Ajuste das fontes */
    h1 {
        font-size: 28px; 
    }

    h3 {
        font-size: 22px;
        margin-top: 20px;
    }

    h4, p, .lista-certificados li {
        font-size: 16px; /* Texto corrido em tamanho padrão de leitura mobile */
    }

    .lista-certificados {
        text-align: left; /* Deixa a lista alinhada à esquerda mesmo com título centralizado */
    }
}