/* =============================
   RESPONSIVE DESIGN
============================= */

@media (max-width: 991px) {
    .navbar-brand {
        font-size: 20px;
    }
    .nav-link {
        margin-left: 0;
        padding: 10px 0;
    }
}

@media (max-width: 768px) {
    .hero-banner h1 {
        font-size: 36px;
    }
    .hero-banner p {
        font-size: 16px;
    }
    .card-img-top {
        height: 180px;
    }
}

@media (max-width: 576px) {
    .hero-banner {
        height: 60vh;
    }
    .hero-banner h1 {
        font-size: 28px;
    }
}