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

-- line-height
   default : 1
   default paragraph-1.6 .
   large:1.8
   medium-1.2
   primary-heading - 1.05

   
-- Font weight
default: 400   
medium: 500
semi-bold:600
bold:700

--letter-spacing
-0.75px
-(-0.5px)


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

* 2. Colors
-- main color : #e67e22,
-- tint color : 
#fdf2e9
#fae5d3,
tag colors:
#51c566,
#94d82d,
#ffd43b

-- shades color:
#cf711f,
#eb984e,
#45260a
-- accent color:
-- gray text color: #555,#333,#ddd,#888
#666,#45260a
#6f6f6f (lightest grey allowed on  #fdf2e9 by color contrast checker)
#676767((lightest grey allowed on  #fff by color contrast checker))

* 3. Shadows  
 0 2.4rem 2.4rem rgba(0, 0, 0, 0.075);

* 4. Border-radius 
--default- 9px 
tag : 100px
meals, pricing plan:11px,

* 5.  White-space  


*/
html {
  /* ! but this can cause user usability issues, if the user want to change the font size it will not change*/
  /*font-size: 10px;*/ /* * for changing rem value, changing the default value of rem.*/

  /* * to avoid the user usability issue we should use rem */
  font-size: 62.5%;
  /* 10px = 100/16*10= 62.5% */

  /* * only works when the elements is not positioned to relative to the viewport*/
  overflow-x: hidden; /*it is hiding the mobile nav bar*/
  /* * Smooth scroll behavior*/
  /* scroll-behavior: smooth; */ /* * we will do it using javascript so it will work on safari*/
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*:focus {
  outline: none;
  box-shadow: 0 0 0 0.8rem rgba(230, 125, 34, 0.5);
}

body {
  font-family: "Rubik", sans-serif;
  line-height: 1;
  color: #555;
  font-weight: 400;

  /* * only works when the elements is not positioned to relative to the viewport*/
  overflow-x: hidden;
}
/* * this is for learning the use case of max-width, rem unit*/
/*.test {
  /* width: 1000px; */
/*background-color: red;
  /* padding: 100px; */
/*max-width: 1000px;*/ /* * if the container is bigger than the element, then element will have its max width but if container is smaller than element's max width than container's size  will be size of element's max width, but remember that thw browser will show the sizes in px because at first, the browser converts the sizes into px then renders it.'*/
/* ! remember if you want to change the default rem value than you specify font-size in the html tag then the value of rem will bw changed  */
/*max-width: 50rem;
  padding: 4rem;
  font-size: 2rem;
}*/

/* * general reusable components(components which we use more than once)*/

.container {
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 3.2rem;
}
.grid {
  display: grid;
  column-gap: 6.4rem;
  row-gap: 9.6rem;
}
.grid:not(:last-child) {
  margin-bottom: 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);
}
.grid--5-cols {
  grid-template-columns: repeat(5, 1fr);
}
.grid--centered-v {
  align-items: center;
}
.heading-primary,
.heading-secondary,
.heading-tertiary {
  letter-spacing: -0.5px;
  font-weight: 700;
  color: #333;
}
.heading-primary {
  font-size: 5.2rem;
  line-height: 1.05;
  margin-bottom: 3.2rem;
}
.heading-secondary {
  font-size: 4.4rem;
  line-height: 1.2;
  margin-bottom: 9.6rem;
}
.heading-tertiary {
  font-size: 3.2rem;
  margin-bottom: 3.2rem;
  line-height: 1.2;
}
.subheading {
  display: block;
  font-size: 1.6rem;
  color: #cf711f;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.75px;
}
.btn,
.btn:link,
.btn:visited {
  display: inline-block;
  padding: 1.6rem 3.2rem;
  font-size: 2rem;
  border-radius: 0.9rem;
  text-decoration: none;
  font-weight: 700;
  /* * necessary for the .btn*/
  border: none;
  cursor: pointer;

  /* * put transition in original 'state'*/

  transition: all 0.5s;
}
.btn--form {
  color: #fdf2e9;
  background-color: #45260a;
  align-self: end;
  padding: 1.2rem;
}
.btn--form:hover {
  background-color: #fff;
  color: #555;
}
.btn--full:link,
.btn--full:visited {
  background-color: #e67e22;
  color: #fff;
}
.btn--full:hover,
.btn--full:active {
  background-color: #cf711f;
  color: #fff;
}
.btn--outline:link,
.btn--outline:visited {
  background-color: #fff;
  color: #555;
}
.btn--outline:hover,
.btn--outline:active {
  background-color: #fdf2e9;
  color: #555;
  box-shadow: inset 0 0 0 3px #fff;
}

.list {
  font-size: 1.8rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.list-icon {
  height: 3rem;
  width: 3rem;
  color: #cf711f;
}
.list-item {
  display: flex;
  gap: 1.6rem;
  align-items: center;
}

/* * helper classes*/

.margin-right-small {
  margin-right: 1.6rem !important;
}
.margin-bottom-md {
  margin-bottom: 4.8rem !important;
}
.center-text {
  text-align: center;
}
strong {
  font-weight: 500;
}