/* Media Query para tablets e dispositivos móveis (telas de até 768px de largura) */
@media (max-width: 768px) {

    /* === ESTILOS GERAIS === */
    h2 {
        font-size: 3rem; /* Reduz o tamanho da fonte dos títulos principais */
    }

    p {
        font-size: 1.2rem; /* Ajusta o tamanho da fonte dos parágrafos */
    }


    /* === CABEÇALHO (HEADER) === */
    .header {
        flex-direction: column; /* Empilha os itens do cabeçalho verticalmente */
        height: auto;
        padding: 20px 0;
    }

    .nav-list {
        gap: 20px; /* Reduz o espaçamento entre os links de navegação */
        padding-top: 15px;
    }


    /* === PÁGINA PRINCIPAL (HERO PAGE) === */
    .hero-page {
        flex-direction: column; /* Empilha a seção de herói verticalmente */
        height: auto;
        text-align: start;
    }

    .left-hpage {
        width: 100%; /* Ocupa a largura total */
        padding: 40px 20px;
    }

    .lhpage-content {
        width: 100%;
    }
    .lhpage-content h2{
        width: 100%;
    }
    .right-hpage{
        height: max-content;
        margin-bottom: 75%;
    }

    .right-hpage img {
        position: absolute; /* Remove o posicionamento absoluto */
        width: 70%; /* Ajusta a largura da imagem */
        height: auto;
        top: 50%;
        right: 0;
        margin-top: 20px;
    }


    /* === SEÇÃO DE CURSOS (BLOG PAGE) === */
    .blog-title {
        padding: 25px;
        text-align: center;
    }

    .cards {
        flex-direction: row; /* Empilha os cartões de curso verticalmente */
        justify-content: start;
        overflow: scroll;
        gap: 30px;
        padding: 50px 20px;

    }

    .card {
        width: 90%; /* Ajusta a largura do cartão para telas menores */
        max-width: 350px;
    }


    /* === SEÇÃO DE VÍDEO (VIDEO PAGE) === */
    .video-page {
        flex-direction: column; /* Empilha a seção de vídeo verticalmente */
        padding: 40px 0;
    }

    .video-side {
        width: 100%;
        height: auto;
    }

    .video-side svg {
        display: none; /* Esconde o círculo SVG para simplificar o layout */
    }

    #video-content iframe {
        margin: 0 auto; /* Centraliza o iframe */
        width: 90%;
        height: 300px;
        box-shadow: none; /* Remove a sombra */
    }
    
    .text-side {
        margin: 40px 0 0 0;
        align-items: center;
        text-align: center;
        padding: 0 20px;
    }

    .video-title {
        width: 100%;
    }

    .video-btn{
        width: max-content;
    }

    /* === AVALIAÇÕES (REVIEWS) === */
    .review-title{
        width: max-content;
        justify-self: center;
        padding: 0;
    }
    .wrapper {
        height: 90%; /* Reduz a altura da seção de avaliações */
        margin: 20px 0;
    }

    .carousel{
        max-width: 80%;
    }

    .carousel__item-body {
        padding: 16px 20px 16px 50px; /* Ajusta o padding */
    }

    .carousel__item-head {
        width: 70px; /* Diminui o ícone */
        height: 70px;
        margin-right: -35px;
        font-size: 35px;
    }
    

    /* === RODAPÉ (FOOTER) === */
    .footer {
        padding: 25px;
    }

    .upper-f {
        flex-direction: column; /* Empilha o conteúdo do rodapé */
        gap: 30px;
        text-align: center;
    }

    .left-upper-f {
        width: 100%;
        align-items: center;
    }
    
    .right-upper-f {
        flex-direction: column;
    }

    .lower-f {
        flex-direction: column-reverse; /* Inverte a ordem e empilha */
        align-items: center;
        gap: 15px;
        text-align: center;
    }

    .right-lower-f {
        gap: 15px;
    }


    /* === PÁGINA DE FORMULÁRIO (FORM PAGE) === */
    .main-content {
        flex-direction: column; /* Empilha as seções verticalmente */
        max-height: none;
    }

    .right-page {
        display: none; /* Oculta a imagem no formulário para economizar espaço */
        position: relative;

    }

    .left-page {
        padding: 40px 0px;
    }

    .title-form {
        font-family: "BuiltTitling";
        font-size: 3rem; /* Reduz o tamanho do título do formulário */
    }
    
    form input, .form-btn {
        font-family: 'Mundial Narrow';
        height: 60px; /* Reduz a altura dos campos e do botão */
        font-size: 1.2rem;
        width: 90%;
    }

    .form-btn {
        font-size: 2.5rem; /* Ajusta o texto do botão */
        font-family: "BuiltTitling";
    }

}


/* Media Query Adicional para telas muito pequenas (até 480px) */
@media (max-width: 480px) {

    /* === ESTILOS GERAIS === */
    h2 {
        font-size: 2.5rem;
    }

    p {
        font-size: 1rem;
    }

    /* === PÁGINA PRINCIPAL (HERO PAGE) === */
    .lhpage-content img {
        max-width: 200px; /* Diminui o logo na home */
    }

    .hp-btn {
        height: 60px;
        width: 140px;
        font-size: 1.2rem;
    }
    
    /* === CARTÕES DE CURSO === */
    .card {
        padding: 57px 50px;
        width: 95%;
    }

    .card-title {
        font-size: 2rem;
    }

    .card-txt {
        font-size: 1rem;
    }

    /* === AVALIAÇÕES === */
    .title {
        font-size: 16px;
    }

    /* === RODAPÉ === */
    .f-title {
        font-size: 1.5rem;
    }
    
    .f-txt {
        font-size: 1.2rem;
    }

    /* === FORMULÁRIO === */
    .title-form {
        font-size: 2.5rem;
    }
    
    form input, .form-btn {
        height: 50px;
    }
}