/*
 * Arquivo: responsive.css
 * Descrição: Estilos para telas menores (tablets e mobile).
*/

/* --- Para Tablets (Telas até 992px) --- */
@media (max-width: 992px) {
    .home-slogan .display-3 {
        font-size: 3.5rem; /* Reduz um pouco o título principal */
    }

    .home-slogan .display-5 {
        font-size: 1.75rem; /* Reduz o subtítulo */
    }

    section {
        padding: 45px 0; /* Diminui o espaçamento vertical */
    }
}


/* --- Para Celulares (Telas até 768px) --- */
@media (max-width: 768px) {
    .home-slogan {
        text-align: center; /* Centraliza todo o texto da seção inicial */
    }

    .home-slogan .display-3 {
        font-size: 2.5rem; /* Reduz mais o título principal */
    }

    .home-slogan .display-5 {
        font-size: 1.5rem; /* Reduz mais o subtítulo */
    }
    
    .w-100.mt-5 {
        text-align: center; /* Garante que o botão fique centralizado */
    }

    .footer {
        text-align: center; /* Centraliza o texto no rodapé */
    }

    .footer .list-unstyled {
        margin-bottom: 2rem; /* Adiciona espaço entre as colunas do rodapé quando empilhadas */
    }
}

/* --- Para Celulares Pequenos (Telas até 576px) --- */
@media (max-width: 576px) {
    .navbar-brand img {
        height: 40px; /* Diminui um pouco mais o logo */
    }
    
    .btn {
        padding: 8px 18px; /* Botões um pouco menores */
        font-size: 0.9rem;
    }
}