/* ------------ 1. Extra Small Phones (0 - 320px) ------------ */
@media screen and (max-width: 280px) {
    .navbar-brand img {
        height: 45px;
    }

    .card-top-title h5 {
        font-size: 18px;
    }

    .card-top-title h5:before,
    .card-top-title h5:after {
        width: 20px;
    }

    .card-top-title h3 {
        font-size: 22px;
    }
}

/* ------------ 1. Extra Small Phones (0 - 320px) ------------ */
@media screen and (min-width: 281px) and (max-width: 320px) {

    .banner-content h1,
    .about-banner-content h1,
    .contact-banner-content h1 {
        font-size: 50px;
    }

    .bg-banner,
    .about-bg-banner,
    .contact-bg-banner {
        min-height: 30vh;
    }

    .card-top-title h5 {
        font-size: 18px;
    }

    .card-top-title h5:before,
    .card-top-title h5:after {
        width: 20px;
    }

    .card-top-title h3 {
        font-size: 22px;
    }
}

/* ------------ 2. Small Phones (321px - 360px) ------------ */
@media screen and (min-width: 321px) and (max-width: 360px) {

    .banner-content h1,
    .about-banner-content h1,
    .contact-banner-content h1 {
        font-size: 50px;
    }

    .bg-banner,
    .about-bg-banner,
    .contact-bg-banner {
        min-height: 30vh;
    }

    .card-top-title h5 {
        font-size: 18px;
    }

    .card-top-title h5:before,
    .card-top-title h5:after {
        width: 20px;
    }

    .card-top-title h3 {
        font-size: 22px;
    }
}

/* ------------ 3. Medium Phones (361px - 375px) ------------ */
@media screen and (min-width: 361px) and (max-width: 375px) {

    .banner-content h1,
    .about-banner-content h1,
    .contact-banner-content h1 {
        font-size: 50px;
    }

    .bg-banner,
    .about-bg-banner,
    .contact-bg-banner {
        min-height: 30vh;
    }

    .card-top-title h5 {
        font-size: 25px;
    }

    .card-top-title h5:before,
    .card-top-title h5:after {
        width: 35px;
    }

    .card-top-title h3 {
        font-size: 28px;
    }
}

/* ------------ 4. Large Phones (376px - 414px) ------------ */
@media screen and (min-width: 376px) and (max-width: 414px) {

    .banner-content h1,
    .about-banner-content h1,
    .contact-banner-content h1 {
        font-size: 50px;
    }

    .bg-banner,
    .about-bg-banner,
    .contact-bg-banner {
        min-height: 30vh;
    }

    .card-top-title h5 {
        font-size: 25px;
    }

    .card-top-title h5:before,
    .card-top-title h5:after {
        width: 35px;
    }

    .card-top-title h3 {
        font-size: 28px;
    }
}

/* ------------ 5. Extra Large Phones (415px - 480px) ------------ */
@media screen and (min-width: 415px) and (max-width: 480px) {

    .banner-content h1,
    .about-banner-content h1,
    .contact-banner-content h1 {
        font-size: 50px;
    }

    .bg-banner,
    .about-bg-banner,
    .contact-bg-banner {
        min-height: 30vh;
    }

    .card-top-title h5 {
        font-size: 25px;
    }

    .card-top-title h5:before,
    .card-top-title h5:after {
        width: 35px;
    }

    .card-top-title h3 {
        font-size: 28px;
    }
}

/* ------------ 6. Foldables & Phablets (481px - 600px) ------------ */
@media screen and (min-width: 481px) and (max-width: 600px) {

    .banner-content h1,
    .about-banner-content h1,
    .contact-banner-content h1 {
        font-size: 50px;
    }

    .bg-banner,
    .about-bg-banner,
    .contact-bg-banner {
        min-height: 30vh;
    }

    .card-top-title h5 {
        font-size: 25px;
    }

    .card-top-title h5:before,
    .card-top-title h5:after {
        width: 35px;
    }

    .card-top-title h3 {
        font-size: 28px;
    }
}

/* ------------ 7. Tablets Portrait (601px - 768px) ------------ */
@media screen and (min-width: 601px) and (max-width: 768px) {

    .banner-content h1,
    .about-banner-content h1,
    .contact-banner-content h1 {
        font-size: 50px;
    }

    .bg-banner,
    .about-bg-banner,
    .contact-bg-banner {
        min-height: 30vh;
    }
}

/* ------------ 8. Tablets Landscape (769px - 1024px) ------------ */
@media screen and (min-width: 769px) and (max-width: 1024px) {

    .banner-content h1,
    .about-banner-content h1,
    .contact-banner-content h1 {
        font-size: 50px;
    }

    .bg-banner,
    .about-bg-banner,
    .contact-bg-banner {
        min-height: 40vh;
    }
}

/* ------------ 9. Touch Laptops / Small Desktops (1025px - 1366px) ------------ */
@media screen and (min-width: 1025px) and (max-width: 1366px) {}

/* ------------ 10. Large Touchscreens / Desktops (1367px and up) ------------ */
@media screen and (min-width: 1367px) {}