/* **************** */
/* BELOW 1344PX (smaller desktops!) */
/* **************** */
@media screen and (max-width : 84em) {
    /* .hero-section {
        max-width: 120rem;
    } */
}


/* **************** */
/* BELOW 1024PX (smaller desktops!) */
/* **************** */
@media screen and (max-width:64em) {

    .header-img {
        height: 3rem;
    }

    .apartment-name {
        font-size: 1.8rem;
    }

    .nav-link:link {
        font-size: 1.4rem;
    }



    .about-sub {
        font-size: 2.4rem;
    }

    .about-text {
        font-size: 1.4rem;
    }

    .about-btn:link {
        padding: 1rem 2rem;
        font-size: 1.4rem;
    }

    .hero-name {
        font-size: 3rem;
    }

    .apartment-sub2 {
        font-size: 1.1rem;
    }

    .apartment-icon {
        font-size: 1.8rem;
        padding: 0.8rem;
    }

    .apartment-phase-name {
        font-size: 1.4rem;
    }
}

/* **************** */
/* BELOW 928PX (smallest desktops!) */
/* **************** */
@media screen and (max-width : 58em) {

    .header {
        padding: 3.6rem 2.4rem 3rem 2.4rem;
    }

    .nav-link-list {
        gap: 2rem;
    }

    .about-sub {
        font-size: 2rem;
    }

    .facility-name {
        font-size: 1.6rem;
    }

    .facility-lists li {
        font-size: 1.4rem;
    }

    .service-name {
        font-size: 6.2rem;
    }

    .service-icon {
        font-size: 5.2rem;
    }

    .service-text {
        font-size: 1.6rem;
    }

    /* MOBILE NAVIGATION  */

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

    .nav {
        background-color: rgba(255, 255, 255, 0.9);
        position: absolute;
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(20px);
        top: 0;
        left: 0;

        width: 100%;
        height: 80vh;
        transform: translateX(100%);
        z-index: 9999;



        display: flex;
        justify-content: center;
        align-items: center;

        transition: all 2s ease-in-out;


        /* Hide the navigation */
        opacity: 0;



        /* make it unaccesable to mouse and keyboard*/
        pointer-events: none;


        /* Hide it from screen reader */
        visibility: hidden;


    }

    /* .nav-open .nav-link-list{
        padding-top: 2rem;
    } */

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

    .nav-link-list {
        flex-direction: column;
        gap: 4.4rem;

    }

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

    .nav-open .icon-mobile-nav[name="close-outline"] {
        display: block;
        /* z-index: 9999; */

    }

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




/* **************** */
/* BELOW 784PX (Large tablet!) */
/* **************** */

@media screen and (max-width : 49em) {
    .apartment-name {
        font-size: 1.4rem;
    }

    .nav-link:link {
        font-size: 2rem;
    }

    /* .hero-name {
        font-size: 2.4rem;
    } */
    .article {
        padding: 4rem 0 2.4rem 0;
    }

    .article-main {
        gap: 1.2rem;
    }

    .article-list {
        gap: 4px;
        padding: 0.9rem 1.8rem;
    }

    .about-main-sub {
        gap: 6.2rem;
    }

    .about-sub {
        font-size: 1.8rem;
    }

    .about-name {
        font-size: 1.8rem;
    }

    .about-text {
        font-size: 1.2rem;
        color: #000000;
    }

    .primary-name {
        font-size: 2rem;
    }

    .benefit-icon {
        font-size: 2rem;
        padding: 1.2rem;
    }

    .benefit-main-name {
        font-size: 1.6rem;
    }

    .benefit-text {
        font-size: 1.4rem;
    }

    .facility-name {
        font-size: 1.4rem;
    }

    .facility-lists li {
        font-size: 1.2rem;
    }

    .service-name {
        font-size: 5.2rem;
    }

    .service-icon {
        font-size: 4.4rem;
    }

    .service-text {
        font-size: 1.4rem;
    }

    .footer-link:link,
    .footer-link:visited,
    .footer-icon:link,
    .footer-icon:visited {
        font-size: 1.4rem;
    }

    .copyright {
        font-size: 1.4rem;
        margin-top: 0;
    }

    .address {
        font-size: 1.4rem;
    }

    .contact-list {
        font-size: 1.4rem;
    }

}

/* **************** */
/* BELOW 704PX (bigger phone!) */
/* **************** */
@media screen and (max-width:44em) {
    .article-list {
        font-size: 0.7rem;
    }

    .footer-heading {
        font-size: 1.8rem;
    }

    .about-main-sub {
        gap: 3.2rem;
    }

    .about-sub {
        font-size: 1.6rem;

    }

    .about-text-list {
        padding-right: 0;
    }

    .about-name {
        font-size: 1.8rem;
    }

    .about-text {
        font-size: 1.2rem;
        color: #000000;
    }
}


/* **************** */
/* BELOW 500PX (PHONE!) */
/* **************** */

@media screen and (max-width:32em) {


    .article-list {
        gap: 5px;
    }

    .article-main {
        gap: 0.8rem;
        max-width: 120rem;
    }

    .grid-colomn-3 {
        grid-template-columns: 1fr;

    }

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

    .grid-colomn-5 {
        grid-template-columns: repeat(3, 1fr);
    }

    /* iframe {
        max-width: 100%;
    } */

    .grid--5--colos {
        grid-template-columns: repeat(3, 1fr);
    }


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



    .article-main {
        flex-wrap: wrap;
    }

    .article-list {
        font-size: 0.6rem;
    }

    .img-about {
        max-width: 40%;
        transform: scaleY(1.3);

    }

    .about-sub {
        font-size: 1.4rem;
    }

    .about-section {
        padding-top: 1rem;
    }

    .about-name {
        margin-bottom: 3rem;
    }

    .about-text-list {
        margin-top: 1rem;
        padding-right: 0;
    }

    .about-text {
        /* line-height: 1.4; */
        font-size: 1.1rem;
    }

    .about-btn:link,
    .about-btn:visited {
        font-size: 1rem;
    }

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

    .copyright {
        font-size: 1.2rem;
    }


}

/* **************** */
/* BELOW 425PX (Small PHONE!) */
/* **************** */

@media screen and (max-width:27em) {
    .servive-feature-list {
        gap: 4rem;
    }

    .service-name {
        font-size: 4.4rem;
    }

    .service-icon {
        font-size: 3.6rem;
    }

    .service-text {
        font-size: 1.2rem;
    }

    .grid--5--colos {
        gap: 3rem;
    }

    .copyright,
    .contact-list,
    .address,
    .footer-link {
        font-size: 1rem;
    }

    .map1:nth-child(2) {
        width: 300px;
    }


}




.no-flexbox-gap .nav-link-list li:not(:last-child) {
    margin-right: 4.8rem;
}

.no-flexbox-gap .list-item:not(:last-child) {
    margin-bottom: 1.6rem;
}

.no-flexbox-gap .list-icon:not(:last-child) {
    margin-right: 1.6rem;
}

.no-flexbox-gap .delivered-faces {
    margin-right: 1.6rem;
}

.no-flexbox-gap .meal-attribute:not(:last-child) {
    margin-bottom: 2rem;
}

.no-flexbox-gap .meal-icon {
    margin-right: 1.6rem;
}

.no-flexbox-gap .footer-row div:not(:last-child) {
    margin-right: 6.4rem;
}

.no-flexbox-gap .social-link li:not(:last-child) {
    margin-right: 2.4rem;
}

.no-flexbox-gap .footer-nav li:not(:last-child) {
    margin-bottom: 2.4rem;
}

@media (max-width: 75em) {
    .no-flexbox-gap .nav-link-list li:not(:last-child) {
        margin-right: 3.2rem;
    }
}

@media (max-width: 59em) {
    .no-flexbox-gap .nav-link-list li:not(:last-child) {
        margin-right: 0;
        margin-bottom: 4.8rem;
    }
}

/* 
--- 01TYPOGRAPHY
font size
10, 12, 14, 16, 18, 20, 24, 30, 36, 44, 52, 62, 74, 86, 98.
*/


/*
Spacing system  (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 /80 / 96 / 128.