@media (max-width: 88.75em) {

    .primary-header {
        font-size: 5.4rem;
    }

    .hero-container {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-90%, -50%);
        max-width: 60rem;
    }
}

@media (max-width: 78.12rem) {

    html {
        font-size: 56.25%;
    }

    .offer-grid {
        gap: 6.4rem;
    }

    .review {
        padding: 3.6rem 6.4rem;
    }

    .container {
        max-width: 110rem;
    }

    .heading-secondary {
        font-size: 4.0rem;
    }

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

@media (max-width: 63.12rem) {

    html {
        font-size: 50%;
    }

    .main-nav-list {
        gap: 3.2rem;
    }

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

    .cta-grid .heading-secondary {
        font-size: 3.6rem;
    }

    .cta-text-container {
        padding: 6rem 0 4.8rem  4.8rem;
    }
}

@media (max-width: 56.87rem) {

    .hero-container {
        max-width: 110rem;
        transform: translate(-60%, -50%);
        left: 40%;
    }

    .heading-secondary {
        margin-bottom: 4.8rem;
    }

    .about-us {
        padding: 4.8rem 1.4rem 4.8rem 1.4rem;
    }

    .about-us-grid {
        gap: 4.8rem;
    }

    .in-numbers {
        padding: 0 4rem;
        grid-template-columns: repeat(2, 1fr);
    }

    .in-numbers figure:last-child {
        grid-column: 1 / -1;
    }

    .offer-grid {
        gap: 3.2rem
    }

    .offer-content {
        padding: 2.4rem 2.8rem 2.8rem 2.8rem;
    }

    .btn-mobile-nav {
        display: block;
        z-index: 9999;
        justify-self: end;
        margin-right: 4rem;
    }

    .main-nav {
        background-color: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        transform: translateX(100%);

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

        opacity: 0;

        pointer-events: none;

        visibility: hidden;
        z-index: 9999;
    }

    .nav-open .icon-mobile-nav.closed {
        display: none;
    }

    .nav-open .icon-mobile-nav.open {
        display: block;
    }

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

    .main-nav-link:link, .main-nav-link:visited {
        font-size: 3rem;
        color: #101720;
    }

    .main-nav-link:hover, .main-nav-link:active {
        color: #e277cd;
    }

    .main-nav-link.cta:link, .main-nav-link.cta:visited {
        color: white;
    }

    .main-nav-link.cta:hover, .main-nav-link.cta:active {
        color: white;
        background-color: #b55fa4;
        scale: 1.05;
    }

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

    .in-numbers-number {
        font-size: 3.0rem;
    }
}

@media (max-width: 44.68rem) {

    .hero-container {
        max-width: 110rem;
        transform: translate(-5%, -50%);
        left: 10%;
    }

    .header {
        background-image: linear-gradient(rgba(34, 34, 34, 0.7), rgba(34, 34, 34, 0.7)), url(../img/hero-image-mobile.webp);
        background-position: left;
    }

    .about-us {
        padding: 4.8rem 4.8rem;
    }

    .about-us-grid {
        grid-template-columns: 1fr;
    }

    .in-numbers {
        grid-template-columns: 1fr;
    }

    .our-offer {
        padding: 4.8rem 4.8rem;
    }

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

    .offer:nth-child(odd) {
        justify-self: center;
    }

    .offer:nth-child(even) {
        justify-self: center;
    }

    .testimonials {
        padding: 4.8rem 4.8rem;
    }

    .cta {
        padding: 4.8rem 4.8rem 12.8rem 4.8rem;
    }

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

    .cta-img-container {
        grid-row: 1;
    }

    .cta-img {
        max-width: 75%;
        opacity: 0;
    }

    .cta-text-container {
        padding: 0 6.4rem 6.4rem 6.4rem;
        color: #44243d;
    }

    .review {
        padding: 2.4rem 2.4rem;
    }

    .footer-grid {
        gap: 3rem
    }
}

@media (max-width: 37.63rem) {

    .header {
        background-image: linear-gradient(rgba(34, 34, 34, 0.7), rgba(34, 34, 34, 0.7)), url(../img/hero-image-mobile-small.webp);
    }

    .hero-container {
        transform: translate(100%, -50%);
        opacity: 0;
        animation: slide-in 2s ease-in forwards;
        text-align: center;
    }

    @keyframes slide-in {
        from {
            transform: translate(100%, -50%);
            opacity: 0;
        }
        to {
            transform: translate(-5%, -50%);
            opacity: 1;
        }
    }

    .hero-buttons {
        flex-direction: column;
    }

    .footer {
        padding: 6.4rem 0;
        border-top: 1px solid #eee;
    }

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

    .footer-cert {
        grid-column: 1 / -1;
        text-align: center;
    }
}

@media (max-width: 28.5rem) {

    .about-us {
        padding: 4.8rem 0;
    }

    .our-offer {
        padding: 4.8rem 0;
    }

    .cta {
        padding: 4.8rem 0 12.8rem 0;
    }

    .testimonials {
        padding: 4.8rem 0;
    }
}