/*Seguindo o modelo SMACSS, este documento CSS é o documento CSS "module", ou seja, usado em algumas páginas do projeto (index.html e about.html).*/

/* MAIN CLASS */
.apresentacao {
    padding: 8vh 30vh;
    align-items: center;
    justify-content: space-between;
    color: var(--cor-texto-principal);
}

/* CONTEUDO SECTION */

.apresentacao__conteudo {
    width: 50%;
    flex-direction: column;
}

.apresentacao__titulo {
    font-family: var(--font-titulo);
    font-size: 2.25rem;
}

.apresentacao__texto {
    font-family: var(--font-texto);
}

.apresentacao__titulo-destaque, .apresentacao__texto-destaque:hover {
    color: var(--cor-texto-destaque);
}

.apresentacao__links {
    flex-direction: column;
    align-items: center;
}

.apresentacao__links__subtitulo {
    font-family: var(--font-titulo);
    font-weight: 400;
}

.apresentacao__links__navegacao {
    width: 55%;
    padding: 21.5px;
    display: flex;
    justify-content: center;
    gap: 1.6vh;
    align-items: center;
    border: 2px solid var(--cor-borda);
    border-radius: 8px;
    color: var(--cor-texto-secundario);
    text-decoration: none;
    font-family: var(--font-texto);
    font-weight: 600;
}

.apresentacao__links__navegacao:hover {
    background-color: var(--cor-fundo-secundaria);
}

/* IMAGEM */
.apresentacao__imagem {
    width: 50%;
    border-radius: 24px;
    box-shadow: 10px -10px 14px #9E511290;
}

/* ---BLOCO DE SELETORES - INICIO--- */

.apresentacao,
.apresentacao__conteudo,
.apresentacao__links {
    display: flex;
    gap: 4vh;
}

.apresentacao__texto,
.apresentacao__links__subtitulo,
.apresentacao__links__navegacao {
    font-size: 1.5rem;
}

/* ---BLOCO DE SELETORES - FIM--- */

/* RESPONSIVO */

@media (min-width: 2000px) {
    .apresentacao {
        padding: 10vh 30vh;
        gap: 5vh;
    }

    .apresentacao__titulo {
        font-size: 3.75rem;
    }
    
    .apresentacao__links__navegacao {
        padding: 40px;
    }
    
    .apresentacao__texto,
    .apresentacao__links__subtitulo,
    .apresentacao__links__navegacao {
        font-size: 3rem;
    }
}

@media (max-width: 1200px) {
    .apresentacao {
        flex-direction: column-reverse;
        padding: 10vh;
        gap: 8vh;
    }

    .apresentacao__conteudo {
        width: 80%;
        text-align: center;
        gap: 6vh;
    }

    .apresentacao__links {
        gap: 4vh;
    }

    .apresentacao__imagem {
        width: 50%;
    }
}

@media (max-width: 600px) {
    .apresentacao {
        padding: 5vh;
    }

    .apresentacao__titulo {
        font-size: 1.5rem;
    }

    .apresentacao__links__navegacao {
        padding: 15px;
    }
    
    .apresentacao__texto,
    .apresentacao__links__subtitulo,
    .apresentacao__links__navegacao {
        font-size: 1rem;
    }
}