/* rem and em do NOT depend on html font-size in media queries! Instead, 1rem = 1em = 16px */

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

@media (max-width: 112em) {
    .container {
        max-width: 160rem;
    }
    .steps {
        grid-template-columns: 0.9fr 0.7fr 0.7fr 0.8fr 1fr 0.5fr 0.85fr;
        width: 95%;
    }
    .container {
        max-width: 150rem;
    }
}

/* BELOW 1600px (Smaller desktops) */
@media (max-width: 100em) {
    .container {
        max-width: 140rem;
        padding: 0 3.8rem;
    }

    .steps {
        width: 100%;
    }

    .useful-blocks {
        width: 70%;
    }
}

/* BELOW 1420px (Smaller desktops) */

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

    .useful-blocks {
        width: 81%;
    }
}

/* BELOW 1280px (Smaller desktops) */

@media (max-width: 80em) {
    .steps {
        width: 91%;
        grid-template-columns: repeat(5, 1fr);
        row-gap: 4rem;
        margin: auto;
        text-align: center;
        border: none;
    }

    .news-cont-div p {
        width: 88%;
    }

    .step:after {
        top: 16%;
    }

    /* MOBILE NAVIGATION */
    .btn-mobile-nav {
        display: block;
        z-index: 9999;
    }

    .header-ul {
        background-color: rgba(255, 255, 255, 0.9);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(10px);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        transform: translateX(100%);
        flex-direction: column;
        gap: 4.8rem;
        align-items: center;
        justify-content: center;
        transition: all 0.5s ease-in;

        /* Hide navigation */
        /* Allows NO transitions at all */
        /* display: none; */

        /* 1) Hide it visually */
        opacity: 0;

        /* 2) Make it unaccessible to mouse and keyboard */
        pointer-events: none;

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

    .header-ul > li > a,
    .btn-login,
    .btn-signup {
        font-size: 2.4rem;
    }

    .nav-open .header-ul {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transform: translateX(0);
    }

    .nav-open .icon-mobile-nav[name="close-outline"] {
        display: block;
    }

    .nav-open .icon-mobile-nav[name="menu-outline"] {
        display: none;
    }
}

/* BELOW 1110px (Smaller desktops) */
@media (max-width: 69em) {
    .useful-blocks {
        width: 100%;
    }
    .steps {
        grid-template-columns: repeat(4, 20rem);
    }

    .step:after {
        top: 14%;
    }
    .news-cont-div p {
        width: 100%;
    }
    .news-cont-div img {
        width: 45rem;
    }

    .news-section .arrow-div {
        top: 93%;
        right: 5%;
    }

    .news-section .arrow-div img {
        width: 3.5rem;
    }
}

/* BELOW 970px (Smaller desktops) */
@media (max-width: 60em) {
    html {
        font-size: 50%;
    }

    .how-section,
    .news-section {
        padding: 7.5rem 0;
    }

    .useful-section {
        padding: 2rem 0;
    }

    .useful-blocks {
        grid-template-columns: repeat(2, 1fr);
    }

    .numbers-container img {
        width: 7rem;
    }
}

/* BELOW 800px (Smaller desktops) */
@media (max-width: 50em) {
    .steps {
        grid-template-columns: repeat(1, 25rem);
        justify-content: center;
    }

    .wrap {
        padding-bottom: 3rem;
    }

    .news-cont-div {
        flex-direction: column;
    }

    .news-cont-div img {
        width: 100%;
    }

    .news-text-div {
        width: 100%;
        padding-top: 2rem;
        padding-left: 0;
    }

    .news-section .arrow-div {
        top: 101%;
        right: 50%;
        transform: translateX(50%);
    }

    .steps > div:after {
        display: none;
    }

    .heading-h2 {
        text-align: center;
        font-size: 3.6rem;
    }

    .estimate-prices {
        padding: 2rem 1rem;
        font-size: 1.5rem;
    }

    .useful-blocks {
        margin-top: 5rem;
    }

    .interprice-steps {
        visibility: hidden;
    }

    .numbers-container img {
        width: 6rem;
    }

    .inter-logo {
        font-size: 3.5rem;
    }

    .inter-logo-think {
        font-size: 1.5rem;
    }
}

/* BELOW 650px (Smaller desktops) */
@media (max-width: 41em) {
    .how-section,
    .news-section {
        padding: 5rem 0;
    }

    .numbers-container {
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
        row-gap: 4rem;
    }

    .numbers-container > div {
        font-size: 2rem;
    }

    .numbers-container > div > span {
        text-align: center;
    }

    .news-section .arrow-div {
        top: 98%;
    }

    .footer {
        margin-top: 2rem;
    }
    .footer-icons {
        gap: 2rem;
    }

    .footer-icons-container {
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .address-cont {
        margin-bottom: 2rem;
    }

    .footer-ul > li > a {
        gap: 1rem;
    }

    .logo-common {
        width: 20rem;
    }
}

/* BELOW 526px (Smaller desktops) */
@media (max-width: 32em) {
    html {
        font-size: 48%;
    }

    .numbers-container {
        grid-template-columns: repeat(1, 20fr);
    }

    .useful-blocks {
        grid-template-columns: repeat(1, 1fr);
    }
    .useful-blocks div {
        width: 70%;
    }
}