/************************/
/**** MEDIA QUARIES *****/
/************************/


/**** STANDARD BREAKPOINTS BASED ON SCREEN WIDTH RANGES ****/

/* @media(max-width: 1200px) {
  .section-hero {
    background-color: #51cf66;
  }
}

@media(max-width: 900px) {
  .section-hero {
    border: 20px solid #94d82d;
  }
}

@media(max-width: 600px) {
  .section-hero {
    border: 20px solid #94d82d;
  }
} */



/****** PERFECT BREAKPOINTS BASED ON WHEN THE DESIGN "BREAKS" DOWN ****/


/* rem and em DO NOT DEPEND ON HTML FONT-SIZE in media queries!
INSTEAD, 1rem = 1em = 16px */


@media(max-width: 89em) {  
  .header {
    padding: 0 3.2rem;
  }

}

/******************/
/* 84em = 1344px */
/******************/

@media(max-width: 84em) {
.hero {
  max-width: 120rem;
}

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

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

.gallery-item:nth-child(n+9) { 
  display: none; 
}

.header {
  padding: 0 3.2rem;
}

}

/******************/
/* 75em = 1200px */
/******************/

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

/* .gallery-item:nth-child(n+7) { 
  display: none; 
} */

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

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

.grid {
  column-gap: 4.8rem;
  row-gap: 6.4rem;
}

.header {
  padding: 0 3.2rem;
}

.hero {
  gap: 4.8rem;
}

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

.testimonials-container {
  padding: 9.6rem 3.2rem;
}

}


/******************/
/* 59em = 944px */
/******************/

@media(max-width: 59em) {

html {
  font-size: 50%; /* 50% of 16px = 8px */
}

.gallery-item:nth-child(n+7) { 
  display: none; 
} 

.hero {
  grid-template-columns: 1.6fr 1fr;
}

.hero-img {
  display: none;
}

.section-hero {
 
  background-image: linear-gradient(
    to right,
    rgba(34, 34, 34, 0.6),
    rgba(34, 34, 34, 0.6)
  ), url(../img/hero-oneimg-compressed.webp);
  background-size: cover;
  color: white;
}

.heading-primary {
  color: white;
}

.delivered-imgs img {

  border: 3px solid rgba(51, 51, 51, 0.489);
}

.hero-description {
  color: #bdbcbc;
}

.logos img {
  height: 2.4rem;
}

.step-number {
  font-size: 7.4rem;
}

.meal-content {
  padding: 2.4rem 3.2rem 3.2rem 2.4rem;
}

.section-testimonials {
  grid-template-columns: 1fr;
}

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

.gallery-item:nth-child(n+7) { 
  display: inline; 
} 

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

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


.btn--form {
  margin-top: 1.2rem;
}

/* MOBILE */

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

.main-nav {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-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;

  

  /* display: none; NO TRANSITIONS OR ANIMATIONS ARE ALLLOWED WHEN DISPLAY NONE IS USED ON AN ELEMENT!*/

  opacity: 0;

  pointer-events: none;

  visibility: hidden;
}

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

  visibility: visible;
  transform: translateX(0);
  z-index: 5;

}

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

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

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

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

}


/******************/
/* 44em = 704px */
/******************/

@media (max-width: 44em){
.grid--3-cols, .grid--4-cols {
  grid-template-columns: repeat(2, 1fr);
}

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

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

.pricing-plan {
  width: 100%;
}

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

.nav-col {
  grid-row: 1;
  grid-column: span 2;
  margin-bottom: 3.2rem;
}

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

.step-description, .testimonial-text, .feature-text, .cta-text {
  line-height: 1.4;
}

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

.cta-img-box {
  height: 32rem;
  grid-row: 1;
  background-size: cover;
  background-position: bottom;
}

}

/******************/
/* 44em = 704px */
/******************/

@media (max-width: 44em){ 

.hero {
  grid-template-columns: 1fr;
  text-align: center;
}

.delivered-meals {
  justify-content: center;
}

.section-hero {
  padding: 4.8rem 0 0 0;
}

.logos img {
  height: 2rem;
}

.logos {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3.2rem;
}

.section-meals {
  padding: 0;
}

}

/* 544px */
@media (max-width: 34em) {

html {
  font-size: 46%;
}

.logos img {
  height: 2.4rem;
}

.grid {
row-gap: 4.8rem;
}

.hero {
padding: 0 3.2rem;
}

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

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

.pricing-plan {
width: 75%;
}

.pricing-plan--starter, .pricing-plan--complete {
justify-self: center;
}

.meal {
width: 75%;
justify-self: center;
}

.section-meals {
margin-bottom: 8rem;
}

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

.testimonials-container {
padding: 6.4rem 3.2rem;
}

.feature {
width: 75%;
justify-self: center;
}

.btn,
.btn:link,
.btn:visited {
padding: 2.4rem 1.6rem;
}

.delivered-imgs img {
height: 3.8rem;
width: 3.8rem;
}

.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: 1fr 1fr 1fr 1fr;
gap: 1.2rem;
}

.cta-img-box {
height: 32rem;
grid-row: 1;
}

.cta-img-box {
background-position: center;
}

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

}