/* Mobile devices (320px - 480px) */
@media screen and (max-width: 480px) {
    .hero-content {
        flex-direction: column;
    }
    .hero-caption {
        align-items: center;
        text-align: center;
    }
    h1, .h1 {
        font-size: 2.25rem;
    }
    h2, .h2 {
        font-size: 1.45rem;
    }
    h3, .h3 {
        font-size: 1.40rem;
    }
    h4, .h4 {
        font-size: 1.25rem;
    }
    h5, .h5 {
        font-size: 1rem;
    }
    h6, .h6 {
        font-size: 12px;
    }
    p {
        font-size: .875rem;
    }
    .main-btn {
        font-size: .875rem;
    }
    .footer-menu li {
        font-size: .875rem;
    }
}

/* iPads and Tablets (481px - 768px) */
@media screen and (min-width: 481px) and (max-width: 768px) {
    .hero-content {
        flex-direction: column;
    }
    .hero-caption {
        align-items: center;
        text-align: center;
    }
    h1, .h1 {
        font-size: 2.25rem;
    }
    h2, .h2 {
        font-size: 1.45rem;
    }
    h3, .h3 {
        font-size: 1.40rem;
    }
    h4, .h4 {
        font-size: 1.25rem;
    }
    h5, .h5 {
        font-size: 1rem;
    }
    h6, .h6 {
        font-size: 12px;
    }
    p {
        font-size: .875rem;
    }
    .main-btn {
        font-size: .875rem;
    }
    .footer-menu li {
        font-size: .875rem;
    }
}

/* Small screens and laptops (769px - 991px) */
@media screen and (min-width: 769px) and (max-width: 991px) {
    .hero-content {
        flex-direction: column;
    }
    .hero-caption {
        align-items: center;
        text-align: center;
    }
    h1, .h1 {
        font-size: 2.25rem;
    }
    h2, .h2 {
        font-size: 1.45rem;
    }
    h3, .h3 {
        font-size: 1.40rem;
    }
    h4, .h4 {
        font-size: 1.25rem;
    }
    h5, .h5 {
        font-size: 1rem;
    }
    h6, .h6 {
        font-size: 12px;
    }
    p {
        font-size: .875rem;
    }
    .custom-header .navbar-nav .nav-link {
        font-size: .875rem;
    }
    .main-btn {
        font-size: .875rem;
    }
    .footer-menu li {
        font-size: .875rem;
    }
}

/* Desktops and large screens (992px - 1024px) */
@media screen and (min-width: 992px) and (max-width: 1024px) {
    h1, .h1 {
        font-size: 2.5rem;
    }
    h2, .h2 {
        font-size: 1.5rem;
    }
    h3, .h3 {
        font-size: 1.40rem;
    }
    h4, .h4 {
        font-size: 1.25rem;
    }
    h5, .h5 {
        font-size: 1rem;
    }
    h6, .h6 {
        font-size: 12px;
    }
    p {
        font-size: .875rem;
    }
    .main-btn {
        font-size: .875rem;
    }
    .footer-menu li {
        font-size: .875rem;
    }
}

/* Extra large screens (1025px - 1200px) */
@media screen and (min-width: 992px) and (max-width: 1200px) {
    h1, .h1 {
        font-size: 2.5rem;
    }
}