/* ****************************** */
/* BELOW 1200px (Landscape Tablets) */
/* ****************************** */

@media (max-width: 105em) {
    html {
        font-size: 56.25%;
    }

    .hero-text-primary {
        font-size: 6.2rem;
    }

    .hero-text-secondary {
        font-size: 2rem;
    }
}

/* ****************************** */
/* BELOW 1344px (Smaller desktops) */
/* ****************************** */

@media (max-width: 84em) {
    .about-box {
        width: 75%;
    }
}

/* ****************************** */
/* BELOW 1200px (Landscape Tablets) */
/* ****************************** */

@media (max-width: 75em) {
    html {
        font-size: 56.25%;
    }

    .about-box {
        width: 75%;
    }

    .hero-text-primary {
        font-size: 5.2rem;
    }

    .hero-text-secondary {
        font-size: 1.8rem;
    }
}

/* ****************************** */
/* BELOW 944px (Tablets) */
/* ****************************** */

@media (max-width: 59em) {
    html {
        font-size: 50%;
    }

    .about-box {
        width: 75%;
    }

    .hero-text-primary {
        font-size: 4.4rem;
    }

    .hero-text-secondary {
        font-size: 1.6rem;
    }
}

/* ****************************** */
/* BELOW 704px (Smaller Tablets) */
/* ****************************** */

@media (max-width: 44em) {

    .about-div {
        grid-template-columns: 1fr;
        gap: 0;

    }

    .about-img-div {
        min-height: 60rem;
    }

    .about-title {
        margin-bottom: 1.2rem;
    }

    .about-box {
        width: auto;
        padding: 2.4rem 4.8rem;
    }

    .hero-text-primary {
        font-size: 3.6rem;
    }

    .hero-text-secondary {
        font-size: 1.4rem;
    }

    .btn,
    .btn:link,
    .btn:visited {
        font-size: 1.6rem;
        font-weight: 500;
    }
}

/* ****************************** */
/* BELOW 576px (Phones) */
/* ****************************** */

@media (max-width: 36em) {
    .hero-section {
        min-height: 55vh;
    }

    .logo-box {
        text-align: center;
    }

    .text-box {
        width: 90%;
        top: 55%;
    }

    .hero-text-primary {
        font-size: 4.2rem;
    }

    .hero-text-secondary {
        font-size: 1.6rem;
    }

    .btn,
    .btn:link,
    .btn:visited {
        font-size: 1.6rem;
        font-weight: 500;
    }
}