/* 
--- 01 TYPOGRAPFY SYSTEM
FONT SIZE SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
 - font weights
 Default:400
 Medium:500
 Semi-bold:600
 Bold: 700
 - Line heights
 Default:1
 Small:1.05
 paragraph default:1.6

 --- 02 colors
 - Primary: #e67e22
 - Tints:#fdf2e9
 - Shades:
 - Accents:
 - Greys: 
   #555 
   #333
 --- 05 shadows
 --- 06 BORDER-
 Default: 9px
 --- 07 WHITESPACE




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

*/

*{
  padding:0 ;
  margin: 0;
  box-sizing: border-box;
}

html{
  /* font-size: 10px; */
  /* 10px / 16px = 0.625 = 62.5% */
  /* Percentage of user's browser font-size setting */
  font-size: 62.5%;
}

body{
  font-family: "Rubik",sans-serif;
  line-height: 1;
  font-weight: 400;
  color: #555;
}
/**********************************/
/* GENERAL REUSABLE COMPONENTS */
/**********************************/

.container {
  /* 1140px */
max-width: 120rem;
margin: 0 auto;
padding: 0 3.2rem;
}
.grid {
  display: grid;
  gap: 9.6rem ;
  
}

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

.grid--3-cols {

  grid-template-columns: repeat(3,1fr);
}

.grid--4-cols {

  grid-template-columns: repeat(4,1fr);
}

.heading-primary,
.heading-secondary{
  font-weight:700 ;
  color:#333;
  letter-spacing: -0.5px;
}
.heading-primary,
.heading-secondary{
  font-size: 5.2rem;
  line-height: 1.05;
  margin-bottom: 3.2rem;
}

/**********************************/




.btn:link, 
.btn:visited{
  
  text-decoration: none;
  display: inline-block;
  font-weight: 600;
  font-size: 2rem;
  padding: 1.6rem 3.2rem;
  border-radius: 9px;
  /*  Put transition on original "state" */
  transition: background-color 0.3s;
}
.btn--full:link, 
.btn--full:visited{
 background-color:#e67e22 ;
 color: #fff;
 
}
.btn--full:hover, 
.btn--full:active{
  background-color:#Cf711f ;
} 
.btn--outline:link, 
.btn--outline:visited{
  background-color:#fff ;
 color: #555;

} 
.btn--outline:hover, 
.btn--outline:active{
  background-color:#fdf2e9 ;
  /* border: 3px solid #fff; */
  /* Trick to add border iside */
  box-shadow: inset 0 0 3px #fff;
}
/* header */  
/**********************************/
.header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color:#fdf2e9 ;
  /*  Because we want header to be sticky later */
  height: 9.6rem;
  padding: 0 4.8rem;
}
.logo{
  height:2.2rem ;
}

/**********************************/
/* NAVIGATION */
/**********************************/
.main-nav-list{
  list-style: none;
display: flex;
align-items: center;
gap: 3.2rem;
}
.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,
.main-nav-link.nav-cta:visited{
 padding: 1.2rem 2.4rem;
 border-radius:9px;
 color: #fff;
 background-color: #e67e22
 
}
.main-nav-link.nav-cta:hover,
.main-nav-link.nav-cta:active{
 background-color: #Cf711f;
}
/**********************************/
/* HERO SECTION */
/**********************************/
.section-hero{
  background-color: #fdf2e9;
  padding: 4.8rem 0 9.6rem 0;
}


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

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

.hero-img{
  width: 100%;
}
.margin-right-sm{
  margin-right: 1.6rem !important;
}
.delivered-meals{
  display: flex;
  align-items: center ;
  gap:1.6rem;
  margin-top: 8rem;
}

.delivered-imgs {
  display: flex;
}
.delivered-imgs img {
  height: 4.8rem;
  width: 4.8rem;
  border-radius:50%;
  margin-right:-1.6rem;
  border: 3px solid #fdf2e9;
}
.delivered-imgs img:last-child {
 margin: 0;
}
.delivered-text {
  font-size:1.8rem ;
  font-weight: 600;
}
.delivered-text span {
  color: #Cf711f;
  font-weight: 700;
}

/*****************/
/* HOW IT WORKS SECTION  */
/*****************/

.section-how{
  padding: 9.6px 0;
}
.step-number {
 font-size: 9.8rem;
 font-weight: 600;
 color: #ddd;
}

.step-img {
  width: 50%;
}