/*Rem and em do not depend on HTML font size in media queries, instead we assume 1rem = 1em = 16px
Rem = Root font size
Em = Current font size
Rem has some bugs in some browsers when used in media queries (check to see if this is true in 2026)
*/



/*====================
BELOW 1344px (smaller desktops)
====================*/
@media (max-width: 84em) {

    .hero-container {
        max-width: 120rem;
    }

    .max-width-1320 {
        max-width: 120rem;
    }

    .max-width-1300 {
        max-width: 120rem;
    }

    .heading-1 {
        font-size: 4.4rem;
    }

}

/*====================
BELOW 1200px (Lanscape Tablets)
====================*/
@media (max-width: 75em) {
    html {
        /*9px (9px/16px)*/
        font-size: 56.25%;
    }

    .hero-container {
        gap: 2.4rem;
    }

    .gap-48 {
        gap: 3.2rem !important;
    }

    .heading-2 {
        font-size: 3.6rem;
    }

    .heading-3 {
        font-size: 2.4rem;
    }

    .header {
        /*padding: 0 3.2rem;*/
        padding: 2.4rem 2.4rem;
    }

    .main-nav-list {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 3.2rem;

        list-style: none;
        padding: 0;
        margin: 0;



    }

    .footer {
        /*padding: 0 3.2rem;*/
    }

}

.main-nav {
    background:
            linear-gradient(
                    135deg,
                    rgba(255, 255, 255, 0.78),
                    rgba(255, 255, 255, 0.45)
            );

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 0.8rem;


    padding: 2em;
}

/*====================
BELOW 992px (For Tablets)
1000/16 = 62.5 ~ 62
62*16 = 992
====================*/
@media (max-width: 62em) {
    html {
        /*8px (8px/16px)*/
        font-size: 50%;
    }

    .hero-container {
        grid-template-columns: 1fr;
        padding: 0 8rem;
        gap: 6.4rem;
    }

    .hero-image {
        width: 50%;
    }

    .para-creator {
        width: 50%;
    }

    .grid--4-cols {
        grid-template-columns: 1fr 1fr;
    }

    .cta {
        grid-template-columns: 3fr 2fr;
    }

    .cta-text-box {
        padding: 3.2rem;
    }
/*
    .cta-form {
        grid-template-columns: 1fr;
    }*/


    /*MOBILE NAVIGATION*/

    .btn-mobile-nav {
        display: block;
        z-index: 100;
    }

    .main-nav {

        position: absolute;
        top: 0;
        width: 100%;
        height: 100vh;
        left: 0;
        transform: translateX(100%);

        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .5s ease-in;

    /* Hide Navigation */
    /* Allows NO transitions at all   */
    /*    display: none;*/
    /*    1. hide the element visually */
        opacity: 0;
    /*    2. make it unaccessible to mouse and keyboard*/
        pointer-events: none;

    /*    3. Hide it from screen readers*/
        visibility: hidden;
    }

    .nav-open .main-nav {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;

        transform: translateX(0);
    }

    .nav-open .mobile-menu-close {
        display: block;
    }

    .nav-open .mobile-menu {
        display: none;
    }

    .main-nav-list {
        flex-direction: column;
        gap: 4.8rem;

    }

    .nav-cta-desktop:link,
    .nav-cta-desktop:visited {
        display: none !important;
    }

    .nav-cta-mobile {
        display: block;
    }

    .main-nav-link:link,
    .main-nav-link:visited {
        font-size: 2.4rem;
    }
}

/*====================
750/16 = 46.875 ~ 47
47*16 = 752
FOR SMALLER TABLETS (Below 752px)
====================*/
@media (max-width: 47em) {

    .grid--3-cols, .grid--4-cols {
        grid-template-columns: repeat(2, 1fr);
    }

    .feature-last {
        grid-column: 1/-1;
        justify-self: center;
    }

    .section-book .grid {
        /*gap: 3.2rem;*/
        gap: 4.8rem;
    }

    .section-how .grid {
        gap: 3.2rem !important;
    }

    .book-image {
        width: 30rem;
    }

    .grid--footer {
        /*grid-template-columns: 1fr 1fr 1fr;*/
        grid-template-columns: repeat(6, 1fr);
    }

    .logo-col {
        grid-column: span 3;
    }

    .address-col {
        grid-column: span 3;
    }

    .nav-col {
        /*grid-row: 1;*/
        grid-row: 1;
        grid-column: span 2;

        /*margin-bottom: 3.2rem;*/
        margin-bottom: 4rem;
    }

}


/*====================
550/16 = 34.375 ~ 35 (better than just 34)
35*16 = 560px
FOR PHONES (Below 560px)
====================*/
@media (max-width: 35em) {

    .grid {
        /*row-gap: 4.8rem;*/
    }

    .grid--2-cols, .grid--3-cols, .grid--4-cols {
        /*grid-template-columns: repeat(1, 1fr);*/
        grid-template-columns: 1fr;
    }


    .button,
    .button:link,
    .button:visited {
        padding: 1.6rem 3.2rem;
        /*padding: 2.4rem 1.6rem;*/
    }

    .section-hero {
        padding: 2.4rem 0 6.4rem 0;
    }

    .hero-container {
        padding: 0 3.2rem;
    }

    .hero-image {
        width: 70%;
    }

    .para-creator {
        width: 70%;
    }

    .section-how .grid {
        gap: 4.8rem !important;
    }

    /*number 2 and not number 1 because this is the second child of the parent*/
    .how-image-box:nth-child(2) {
        grid-row: 1;
    }

    .how-image-box {
        transform: translateY(2.4rem);
    }

    .how-img {
        width: 80%;
    }

    .section-cta {
        padding: 9.6rem 3.2rem;
    }

    .cta {
        grid-template-columns: 1fr;
    }

    .cta-image-box {
        height: 36rem;
        grid-row: 1;
        background-position: top;
    }

    .cta-text-box {
        padding: 2.4rem;
    }



}