/* ------------------- */
/* Header  */
/* ------------------ */
.header{
  display:flex;
  justify-content:space-between;
  align-items: center;
  background-color: #fdf2e9;
  /* sticky we will be it */
  height: 9.6rem;
  padding: 0  4.8rem;
  position: relative;
}
.logo{
  height: 2.2rem;
}

/* ------------------- */
/* navigation */
/* ------------------ */
.main-nav-list{
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4.8rem;
}
.main-nav-link:link,
.main-nav-link:visited{
  display: inline-block;
 text-decoration:none;
 color:#333;
 font-weight:500;
 font-size:1.8rem;
 transition: all 0.3s;

}


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


}
.main-nav-link.nav-cta:link,
.nav-cta:visited{

  padding: 1.2rem 2.4rem;
  border-radius: 9px;
  color:#fff;
  background-color: #e67e22;
}
.sticky .header{
  position: fixed;
  top:0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.97);
  z-index: 9999;
  width: 100%;
  height: 8rem;
 padding-top:0 ;
 padding-bottom: 0;
 box-shadow: 0 1.2rem 3.2rem  rgba(0,0,0,0.03);
}
.sticky .section-hero{
  margin-top: 9.6rem;
}
/* icon- */
.btn-mobile-nav{
  border:none;
  background: none;
  cursor: pointer;
  display: none;
}


.icon-mobile-nav{
   height:4.8rem ;
   width:4.8rem ;
   color:#333;
}
.icon-mobile-nav[name="close-outline"]{
 display: none;
}

/* ------------------- */
/* Hero components */
/* ------------------ */
.section-hero{
  padding: 4.8rem 0 9.6rem 0;
  background-color: #fdf2e9;
}

.hero{
  
   max-width: 130rem; 
   margin: 0  auto ;
   padding: 0 3.6rem;
   
   display: grid;
   align-items: center;
   gap:9.6rem;
   grid-template-columns: 1fr 1fr ;
}


.hero-description{
  font-size:2rem;
  line-height: 1.6;
  margin-bottom: 4.8rem;
}

.hero-img{
  width: 100%;
}


.delivered-meals{
  display:flex;
  align-items: center;
  gap:1.6rem;
  margin-top: 8rem;
}
.delivered-imgs{
  display:flex;
}
.delivered-imgs img{

  display:flex;
  height: 4.8rem;
  width: 4.8rem;
  border-radius: 50%;
  margin-right: -1.6rem;
  border: 3px solid #fff;
}
.delivered-imgs img:last-child{
  margin-right:0;
}
.delivered-text{
  font-size: 1.8rem;
  font-weight: 600;
}
.delivered-text span{
  color:#cf711f;
  font-weight: 700;
}
/*-----------------*/
/* Featured In section */
/* ---------------- */
.section-featured{
  padding: 4.8rem 0 3.2rem 0;
}
.heading-featured-in{
  font-size:1.4rem;
  text-transform:uppercase;
  letter-spacing:0.75px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 2.4rem;
  color: #888;
}
.logos{
  display: flex;
  justify-content: space-around;
  filter: brightness(0);
  opacity: 50%;
}
.logos img{
  height: 3.2rem;
  
}
/* How it works Section */
/* ---------------- */
.section-how{
  padding:9.6rem 0;
  /* background-color:orangered; */

}
.step-img{
  width: 35%;
}

.step-description{
  font-size:1.8rem;
  line-height: 1.8;
}
.step-number{
  font-size: 8.6rem;
  font-weight:600;
  color:#ccc;
  margin-bottom: 1.2rem;


}
.step-img-box{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.step-img-box::before,.step-img-box::after{
  content: "";
  display: block;
  border-radius: 50%;

  position:absolute;

  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.step-img-box::before{
 
  width: 60%;
  /* height: 60%; */
  /* 60% of the parent width*/
  padding-bottom: 60%;
  background-color: #fdf2e9;
  z-index: -2;
}
.step-img-box::after{
  width: 45%;
  padding-bottom: 45%;
  background-color: #fae5d3;
  z-index: -1;
}
/* --------------- */
/* Meals section */
/* --------------- */
.section-meals{
  padding: 9.6rem 0;
}
.meal{
  box-shadow: 0  0.6rem 1.2rem rgba(0,0,0,0.1);
  border-radius:11px;
  overflow: hidden;
  transition: all 0.7s;

}
.meal:hover{
  transform: translateY(-1.2rem);
  box-shadow: 0  2.4rem 4.8rem rgba(0,0,0,0.1);
}
.meal-content{
  padding: 3.2rem 4.8rem 4.8rem 4.8rem;
}

  
 
.meal-tags{
  margin-bottom: 1.2rem;
  display: flex;
  gap:0.4rem;
}
.tag{
  display: inline-block;
  padding: 0.4rem 0.8rem;
  font-size: 1.2rem;
  text-transform: uppercase;
  color:#333;
  border-radius: 100px;
  font-weight: 600;
}
.tag--vegetarian{
  background-color: #51cf66;
}
.tag--vegan{
  background-color: #94d82d;
}
.tag--paleo{
  background-color: #ffd43b;
}
.meal-title{
  font-size: 2rem;
  color:#333;
  font-weight: 600;
  margin-bottom: 3.2rem;

}
.meal-attributes{
list-style: none;
display: flex;
flex-direction: column;
gap: 2rem;
}
.meal-attribute{
   font-size: 1.8rem;
   display: flex;
   align-items: center;
   gap:1.6rem
}
.meal-icon{
  height: 2.5rem;
  width: 2.5rem;
  color: #cf711f;
}
.meal-img{
  width: 100%;
}
.all-recipes{
  text-align: center;
  font-size: 1.8rem;
}

/* *********************** */
/* Testimonials section */
/* *********************** */
.section-testimonials{
  
  background-color:#fdf2e9;
  display: grid;
  grid-template-columns: 50fr 45fr;
  align-items: center;
}
.testimonials-container{
  padding: 9.6rem;
}
.testimonials{
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap:4.8rem;
 column-gap: 8rem;
  
}
.testimonial-img{
  width: 6.2rem;
  border-radius: 50%;
  margin-bottom: 1.2rem;
}
.testimonial-text{
font-size: 1.8rem;
line-height: 1.8;
margin-bottom: 1.6rem;


}
.testimonial-name{
 font-size: 1.6rem;
 color: #6f6f6f;  
}
.gallery{
  display: grid;
  gap:1.6rem;
  padding: 1.6rem;
  grid-template-columns:repeat(3,1fr);
}
.gallery-item{
  overflow: hidden;
  
}
.gallery-item img{
  display: block;
  width:100%;
  /* HEIGHT:100%; */
  transition:all 0.4s;
 
}
.gallery-item img:hover{
  transform: scale(1.1);
}
/* ---------------- */
/* Pricing section */
/* --------------- */
.section-pricing{
  padding:9.6rem 0;
}
.pricing-plan{
  padding: 4.8rem;
  width: 75%;
  /* justify-items: end */
  border-radius: 1.6rem;
 
}
.pricing-plan--starder{
  justify-self: end;
  border:2px solid  #fdf2e9;
  padding: 4.6rem;
}
.pricing-plan--complete{
  background-color: #fdf2e9;
  /* padding: ; */
  position:relative;
  overflow: hidden;
}
.pricing-plan--complete::before{
  content:"Best value";
  text-transform: uppercase;
  position: absolute;
  top:6%;
  right: -18%;

  font-size: 1.4rem;
  font-weight: 700;
  color:#333;
  background-color:#ffd43b;
  padding: 0.8rem 8rem;
  transform: rotate(45deg);
   
}
.plan-header{
  text-align: center;
  margin-bottom: 4.8rem;
}
.plan-name{
color:#cf711f;
font-weight:600;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: 0.75;
margin-bottom: 3.2rem;
}
.plan-price{
font-size:7.5rem;
font-weight: 600;
line-height:  1.6em;
margin-bottom: 1.6rem;
}
.plan-price span{
  font-size: 3rem;
  font-weight: 500;
  margin-bottom: 0.8rem;
}
.plan-text{
font-size:1.6rem;
line-height: 1.6;
color: #6f6f6f;
}
.plan-sing-up{
  margin-top: 4.8rem;
}
/* -------------- */
/* feature block*/
/* ------------ */
.plan-details{
  font-size: 1.6rem;
  line-height: 1.6;
  text-align: center;
}
.feature-icon{
 color:#e67e22;
 width: 3.4rem;
 height: 3.4rem;
 margin-bottom: 2.4rem;
 background-color: #fdf2e9;
 padding: 1.6rem;
border-radius: 50%;
}
.feature-title{
 font-size:2.4rem;
 color:#333;
 font-weight: 700;
 margin-bottom: 1.6rem;
}
.feature-text{
   font-size: 1.8rem;
   line-height: 1.8;
}
/* -------------- */
/* section cta*/
/* ------------ */
.section-cta{
  /* top/right/buttom/left */
  /* top/horizontal/bottom amit 0 */
padding: 4.8rem 0 12.8rem ;
}
.cta{
  display: grid;
  /* 2/3=66.6% 1/3= 33.3*/
  grid-template-columns: 2fr 1fr;
  /* background-color:#e67e22 ; */
  box-shadow: 0  2.4rem 4.8rem rgba(0,0,0,0.15);
   border-radius: 11px;
   background-image: linear-gradient(to right bottom,#eb984e,#e67e22);
  /* temp height */
  overflow: hidden;
}
.cta-text-box{
  padding:4.8rem 6.4rem 6.4rem 6.4rem;
  color:#2e1907;

}
.cta .heading-secondary{
  color:#2e1907;
  margin-bottom: 3.2rem;
  }
  .cta-text{
    font-size:1.8rem;
    line-height: 1.8;
    margin-bottom: 4.8rem;
  }
.cta-img-box{
  background-image: linear-gradient(to right bottom,rgba(235, 151, 78, 0.35),rgba(148, 91, 40, 0.35)) 
  ,url('../img/customers/dave.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.cta-form{
  display: grid;
  grid-template-columns: 1fr 1fr;
column-gap: 3.2rem;
row-gap: 2.4rem;

}
.cta-form label{
   display: block;
   font-size:1.6rem;
   font-weight: 500;
   margin-bottom: 1.2rem;

}
.cta-form input,.cta-form select{
  width: 100%;
  padding: 1.2rem;
  font-size: 1.8rem;
  font-family: inherit;
  color: inherit;
  border:none;
  background-color: #fdf2e9;
  border-radius: 9px;
  box-shadow:  0 1px 2px rgba(0,0,0,0.10);
}
.cta-form input::placeholder{
   color:#aaa;
}
 .cta *:focus{
  outline:none;
  box-shadow: 0 0 0 0.8rem rgba(254, 254, 254, 0.51);
}
/* -------------- */
/* FOOTER*/
/* ------------ */
.footer{
padding: 12.8rem 0;
 border-top: 1px solid #eee;
}
.logos-col{
  display: flex;
  flex-direction: column;
}
.footer-logo{
  display: block;
  margin-bottom: 3.2rem;
}
.grid--footer{
  grid-template-columns: 1.5fr 1.3fr 1fr 1fr 1fr;
}
.social-link{
  list-style: none;
  display: flex;
  gap:2.4rem;
}
.social-icon{
  height: 2.4rem;
  width: 2.4rem;
}
.Copyright{
  font-size:1.4rem;
  color:#767676;
  margin-top: auto;
}
.contacts{
  font-style: normal;
  font: size 1.6rem;
  line-height: 1.6;
}
.address{
  margin-bottom: 2.4rem;
}
.footer-heading{
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 4rem;
}
.footer-nav{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap:2.4rem;
}
.footer-link:link,
.footer-link:visited{
  text-decoration: none;
  font-size: 1.6rem;
  color:#767676;
  transition:all 0.3s;
}
.footer-link:hover,
.footer-link:actived{
  color:#767676;
}