/* media  */
/* em = 16px

rem = 16px */
/* in media quary we shouldn't use rem instead rem we should use em 
 */
 /* brackpoint 1350px convert into em 1350%16 = 84em */
 /* bellow 1344px for laptop */
 @media (max-width:84em){
    .hero{
        max-width: 120rem;
    }
    .heading-primary{
        font-size: 4.4rem;
    }
    .gallery{
        grid-template-columns: repeat(2,1fr);
    }
 }
@media (max-width:75em){
        html{
            /* 9/16 = 52.26% */
            font-size: 56.25%;
        }
        .heading-primary{
            font-size:4.4rem ;

        }
        .heading-tartiary{
            font-size: 2.4rem;
        }
        .header{
            padding: 0 3.2rem;
        }
        .hero{
            gap: 4.8rem;
        }
        .main-nav-list{
            gap: 3.2rem;
        }
        .testimonial-container{
            padding:9.6rem 3.2rem ;
        }
        .grid{
            column-gap: 4.8rem;
            row-gap: 6.4rem;
        }
        .heading-secondary{
            font-size: 3.6rem;
        }
}
/* bellow 940px (tablets) */
@media (max-width:59em){
    html{
        /* 8px / 16px = 0.5 =50% ( 8px is  50% of 16px)  */
        font-size: 50%;
    }
    .hero{
        grid-template-columns: 1fr;
        padding:  0 8rem;
        gap: 6.4rem;
    }
    .hero-text-box{
        text-align:center
    }
    .hero-img-box{
        text-align:center
    }
    .hero-img{
            max-width: 50%;
    }
    .delivered-meals{
        justify-content: center;
        margin-top: 3.2rem;
       
    }
    .logos img{
        height: 2.4rem;
    }
    .step-number{
        font-size: 6.2rem;
    }
    .meal-content{
        padding: 2.4rem 3.2rem 3.2rem 3.2rem;
    }
    .section-testimonial{
        grid-template-columns: 1fr;

    }
    .gallery{
        grid-template-columns: repeat(6,1fr);
    }
    .cta{
          /* 2/3 = 66.6% of width 1/3 33.3% of width; */
    /* but now we need 60 40 ration so then we can change the  value of grid templet 3/5 = 60% and 2/5 40% */
    grid-template-columns: 3fr 2fr;
    }
    .cta-form{
        grid-template-columns: 1fr;
    }
    .btn-form{
        margin-top: 1.2rem;
    }
    .btn-mobile-nav{
        display: block;
        z-index: 5;
    }

    .main-nav{
-webkit-backdrop-filter: blur(10px);
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(255, 255, 255, 0.9);
        width: 100%;
     
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        /* ease in after reached end it will fast  */
        /* ease-out begaining of the animation it goes fast  */
        transition: all 0.3s ease-in-out;
     
        transform: translateX(100%);

        /* hide nav */
        /* display:none ; */
        /* i can't animate them */
        /* visibility: hidden; */

        opacity: 0;

        /* making it unaccessible for mouse and keyboard */
        pointer-events: none;

        /* hiding from screen readers */
        visibility: hidden;
    }
    .open-nav .main-nav{
        opacity: 1;
        visibility:visible;
        pointer-events: auto;
        transform: translateX(0%);
    }
    .open-nav .icon-mobile-nav[name="close-outline"]{
        display: block;
    }
    .open-nav .icon-mobile-nav[name="menu-outline"]{ 
        display: none;
    } 





    
    .main-nav-list{
        flex-direction: column;
       
        gap: 4.8rem;
    }
    .main-nav-links:link,
.main-nav-links:visited {
    font-size: 3rem;
}
}

/* ***************** */
/* bellow 700 for (smaller tablet) */
/* ****************** */
@media (max-width:48em){
    .grid--3-cols,
    .grid--4-cols{
        grid-template-columns: repeat(2, 1fr);
    }
    .diets{
        /* here i have got some problem and i fixed that .the problem is coming for grid column 1/3 mean 1 / 3 column it will take but what would if i have only 2 column i mean if column ration going 1/2 then it will show's a problem so therefor whenever you use grid-column for spacific component or element always use 1/-1 ratio it will do everything normal ,..if you forgot everything then remove 1/-1 instead use 1/3 and then go to on your website and chack meal section you will see first meal section will be disappeared */
        grid-column:1/-1 ;
        /* align-items: ; */
       justify-self: center;}
       .heading-secondary{
        margin-bottom: 4.8rem;
       }
       .pricing-plan{
        width: 100%;
       }
       .step-number{
        font-size: 5.2rem;
       }
       .heading-tartiary{
        margin-bottom: 2.4rem;
       }
       .grid-footer{
        grid-template-columns: repeat(6,1fr);
       }
       .logos-col,.adress-col{
        grid-column: span 3;
       }
       .nav-col{
        grid-row: 1;
        grid-column: span 2;
        margin-bottom: 3.2rem;
       }
      
}
/* ***************** */
/* bellow 600 for (smaller tablet) */
/* ****************** */
@media (max-width:35.6em){
    .grid{
        row-gap: 4.8rem;
    }
    
.grid--2-cols,
.grid--3-cols,
.grid--4-cols{
    grid-template-columns: 1fr;
    
}
.btn,
.btn:link,
.btn:visited {
    padding: 2.4rem 1.6rem;
}
.hero{
    padding: 0 3.2rem;
}
.section-hero{
    padding: 2.4rem 0 6.4rem;
}
.hero-img{
    max-width: 80%;
}
.logos img{
    height: 1.2rem;
}
/* in container this element is second number child element of  this container contain */
.step-img-box:nth-child(2){
  grid-row: 1;
}
.step-img-box:nth-child(6){
    grid-row: 5;
}
.step-img-box{
    transform: translateY(2.4rem);
}
.gallery{
    grid-template-columns: repeat(4,1fr);
}
/* .section-pricing{

} */
.cta{
    grid-template-columns: repeat(1,1fr);
}
/* cta img was disappeared because of this element had no fixed height therefor browser didn't showing this img  */
.cta-img-box{
    height: 32rem;
    
    grid-row: 1;
}

.cta-text-box{
    padding: 3rem;

}
}
/* 
SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

FONT SIZE SYSTEM (px)
10 / 12 /  14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 
*/