@media (max-width: 992px) {
    .hero-section {
        padding: 40px 0;
        text-align: center;
    }

    h1.display-3 {
        font-size: 2.5rem;
    }

    .lead {
        font-size: 1.1rem;
    }

    .app-badge {
        height: 42px;
    }

    .hero-image-container {
        margin-top: 2rem;
    }
}

@media (max-width: 575.98px) {
    h1.display-3 {
        font-size: 2rem;
    }

    .gap-3 {
        gap: 0.5rem !important;
    }
}