/*

--- 01 TYPOGRAPHY SYSTEM

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

- FONT WEIGHT SYSTEM:
- Default: 400
- Medium: 500
- Semi Bold: 600
- Bold: 700

- LINE HEIGHT SYSTEM:
- Default: 1
- Small: 1.05
- Medium: 1.2
- Paragraph default: 1.6
- Large: 1.8

-Letter Spacing System:
 -0.5px
0.75px

--- 02 COLOR PALETTE

- Primary: #e67e22
- Tints: #fdf2e9 / #fae5d3 / #eb984e
- Shades: #cf711f / #45260a
- Accents:
- Greys: #555 / #333 / #6F6F6F (lightest grey allowed on #fdf2e9 background) / #888 / #767676 (lightest grey allowed on #fff)

--- 03 SHADOWS

box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);


--- 04 BORDER RADIUS

- Default: 9px
- Circle: 50%
- 11px

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

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

/*IMP TRICK*/
html {
  /*font-size: 10px;*/
  /* This is the default font size in browsers setting*/
  font-size: 62.5%;
  /*10px / 16px = 0.625 = 62.5%*/

  /* Prevent horizontal scroll especially in mobile devices for navigation bar*/
  overflow-x: hidden;

  /* Smooth scroll animation - but this does not work in safari and MS edge so it is not recommended to use it - use smooth scroll in js instead*/
  /* scroll-behavior: smooth; */
}

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

  /* Only works if there is nothing absolutely positioned in relation to body*/
  /* Prevent horizontal scroll especially in mobile devices for navigation bar*/
  overflow-x: hidden;
}


/* ************************************************************ */
/* GENERAL RESUABLE COMPONENTS */
/* ************************************************************ */

.heading-primary,
.heading-secondary,
.heading-tertiary {
  font-weight: 700;
  color: #333;
  /* color: #2e1907;  Darker shade of the primary color */
  /* color: #343a40; */
  letter-spacing: -0.5px;
}

.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: 3rem;
  line-height: 1.2;
  margin-bottom: 3.2rem;
}

.subheading {
  display: block;
  font-size: 1.6rem;
  font-weight: 500;
  color: #cf711f;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
  letter-spacing: 0.75px;
}

.btn,
.btn:link,
.btn:visited {
  display: inline-block;
  text-decoration: none;
  font-size: 2rem;
  padding: 1.6rem 3.2rem;
  border-radius: 9px;

  /* Put transition on original state */
  transition: all 0.3s ease-in-out;
  font-weight: 600;

  /*Only necessary for .btn in the form. Some more css is required to make it look like a button so it is after this btn css part*/
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.btn--full:link,
.btn--full:visited {
  color: #fff;
  background-color: #e67e22;
}

.btn--full:hover,
.btn--full:active {
  color: #fff;
  background-color: #cf711f;
}

.btn--outline:link,
.btn--outline:visited {
  background-color: #fff;
  color: #555;
}

.btn--outline:hover,
.btn--outline:active {
  background-color: #fdf2e9;
  color: #555;

  /* border: 3px solid #fff; */
  /* If we use border, the width will increase and hence the whole button will look bigger and the section will fluctuate so rather we can use box shadow*/

  /* This is a trick to make the button look like it has a border since box shadow comes inside the button when we use inset keyword */
  box-shadow: inset 0 0 0 3px #fff;
}


.btn--form {
  background-color: #45260a;
  color: #fdf2e9;
  align-self: end;
  /* Align the button to the end of the form */

  padding: 1.2rem;
}

.btn--form:hover {
  background-color: #fff;
  color: #555;
}


.link:link,
.link:visited {
  display: inline-block;
  color: #e67e22;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;

  transition: all 0.3s;
}

.link:hover,
.link:active {
  color: #cf711f;

  /* border-bottom: none; */
  /* Remove the underline on hover but also reduces 1 px space and so the div fluctuates so instead keep the border but with transparent color */

  border-bottom: 1px solid transparent;
}

.container {
  max-width: 120rem;
  padding: 0 3.2rem;
  margin: 0 auto;
}

.grid {
  display: grid;
  column-gap: 6.4rem;
  row-gap: 9.6rem;

  /* margin-bottom: 9.6rem; */
}

/* .grid:last-child {
  margin-bottom: 0;
} */

.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--center-v {
  align-items: center;
}


.list {
  list-style: none;

  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.list-item {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  font-size: 1.8rem;
  line-height: 1.2;
}

.list-icon {
  width: 3rem;
  height: 3rem;
  color: #e67e22;
}

/* Very imp trick to not to have any outline when some element is focused using tab key or keyboard or click on it which looks bad, so we can use this trick and show it as a box shadow. But for some elements having same bg needs to be done manually as per its contrast color*/
*:focus {
  outline: none;
  box-shadow: 0 0 0 0.8rem rgba(230, 125, 34, 0.5);
}

/* HELPER/SETTINGS CLASSES */

.center-text {
  text-align: center;
}

strong {
  font-weight: 500;
}

.margin-right-sm {
  margin-right: 1.6rem !important;
}

.margin-bottom-md {
  margin-bottom: 4.8rem !important;
}