/* =========================
   TABLET (<= 991px)
========================= */

@media (max-width: 991px) {

    .hero h1 {
        font-size: 36px;
    }

    section {
        padding: 60px 0;
    }
}

/* =========================
   MOBILE (<= 767px)
========================= */

@media (max-width: 767px) {

    .hero {
        padding: 70px 15px;
    }

    .hero h1 {
        font-size: 28px;
    }

    .btn {
        width: 100%;
        text-align: center;
    }

    .course-card {
        margin-bottom: 20px;
    }
}

/* =========================
   SMALL MOBILE (<= 480px)
========================= */

@media (max-width: 480px) {

    .hero h1 {
        font-size: 24px;
    }

    section {
        padding: 40px 0;
    }
}