/* CSS específico para dispositivos móveis com largura máxima de 768px */
@media only screen and (max-width: 768px) {

    /* Conteúdo principal do cabeçalho */
    .header-content {
        min-height: auto;
        margin-top: 70px;
        padding: 20px;
        text-align: center;
    }

    .header-content::before {
        background-position: 85% 50%;
        filter: grayscale(10%) brightness(30%);
    }

    .header-content h1 {
        font-size: 2rem;
        font-weight: 600;
        text-align: center;
        margin-top: 20px;
    }

    .header-content p {
        font-size: 1rem;
        text-align: center;
    }

    #home .btn-warning {
        font-size: 14px;
        padding: 15px 20px;
    }

    /* Ajuste do container */
    .header-content .container {
        flex-direction: column;
        align-items: center;
    }

    /* Estrelas */
    #home .stars i {
        font-size: 24px;
        margin: 30px 2px;
    }

    /* Texto + 1 Bilhão */
    .bilhao {
        font-size: 40px;
        margin-top: 20px;
    }

    /* Imagens */
    #home .row img {
        max-height: 60px;
        margin: 20px 0;
    }

    /* Ajuste de colunas */
    #home .row .col-md-4 {
        margin-bottom: 10px;
        text-align: center;
    }

    #home .row .col-md-4 p {
        margin-top: 10px;
    }

    #home .p-3 {
        padding: 5px !important;
    }

}