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

/* ≥1200px - Extra Large */
@media (min-width: 1200px) {
    .hero-content h1 {
        font-size: 3.5rem;
    }
}

/* 992px - 1199px - Large */
@media (max-width: 1199px) and (min-width: 992px) {
    .hero-section {
        height: 75vh;
    }
}

/* 768px - 991px - Medium */
@media (max-width: 991px) and (min-width: 768px) {
    .hero-section {
        height: 65vh;
    }
    .hero-content h1 {
        font-size: 2.2rem;
    }
    .navbar {
        height: auto;
        padding: 10px 0;
    }

    .navbar .navbar-brand {
        width: 160px;
    }

    .navbar .navbar-collapse {
        border-radius: 0;
        padding: 20px;
    }

    .navbar .nav-link {
        padding: 10px 0;
        text-align: center;
    }

    .navbar .btn-action {
        display: block;
        margin: 15px auto 0;
        width: 100%;
        text-align: center;
    }
}

/* 576px - 767px - Small */
@media (max-width: 767px) and (min-width: 576px) {
    .hero-content h1 {
        font-size: 40px;
    }
    .hero-content p {
        font-size: 0.9rem;
    }
}