/*
DESIGN SYSTEM

---01 TYPOGRAPHY SYSTEM
-font-sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
      
-font-weight
Default: 400
Medium: 500
Semi-bold: 600
Bold: 700

-line-height
Default: 1
h1: 1.2
p: 1.5

-letter spacing
h1:2px

---02 COLOR
Primary: #74b816
Tints: #f4fce3, #e9fac8
Shades:#66a80f, #5c940d, #233a04, #233a04;
Accents:
Grey: #333 #555


---03 SHADOWS


---04 BORDER-RADIUS
-border radius
Default: 5px;
3px

-border
Default: 3px

---05 WHITE SPACE
Default: 4.8rem
-spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128


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

html {
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  font-family: "Rubik", sans-serif;
  line-height: 1;
  font-weight: 400;
  color: #111;
  overflow-x: hidden;
}

strong {
  font-weight: 500;
}

*:focus {
  outline: none;
  box-shadow: 0 0 0 0.5rem rgba(92, 148, 13, 0.5);
}

/* GENERAL STYLES */

.grid {
  display: grid;
}

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

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

.grid-center-v {
  align-items: center;
}

.center {
  display: flex;
  justify-content: center;
}

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

.primary-heading,
.secondary-heading,
.tertiary-heading {
  color: #333;
  line-height: 1.2;
}

.primary-heading {
  font-size: 5.2rem;
  font-weight: 700;
}

.secondary-heading {
  font-size: 4.4rem;
  letter-spacing: -1px;
}

.tertiary-heading {
  font-size: 3.6rem;
  letter-spacing: -1px;
}

.subheading {
  font-size: 1.6rem;
  font-weight: 500;
  text-transform: uppercase;
  color: #5c940d;
  letter-spacing: 1px;
  margin-bottom: 1.6rem;
}

.tag {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  color: #333;
  font-size: 1.2rem;
  border-radius: 100px;
  font-weight: 600;
  text-transform: uppercase;
}

.btn {
  display: inline-block;
  text-decoration: none;
  font-size: 2rem;
  font-weight: 500;
  border-radius: 9px;
  padding: 1.4rem 2.8rem;
  border: none;
  transition: all, 0.3s;
}

.btn-fill,
.btn-fill:link,
.btn-fill:visited {
  color: #fff;
  background-color: #74b816;
}

.btn-fill:hover,
.btn-fill:active {
  background-color: #66a80f;
}

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

.btn-outline:hover,
.btn-outline:active {
  background-color: #f4fce3;
  box-shadow: inset 0 0 0 3px #fff;
}

.list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}

.list-item {
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  gap: 2.4rem;
}

.icon {
  height: 2.4rem;
  width: 2.4rem;
  color: #74b816;
}

.link:hover {
  color: #66a80f;
  border-bottom: 2px solid transparent;
}

/* UTILITY CLASSES */
.mb-32 {
  margin-bottom: 3.2rem !important;
}

.mb-96 {
  margin-bottom: 9.6rem !important;
}

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

.bold {
  font-weight: 600;
}

/* DIVIDERS */
.divider {
  border-bottom: 1.5px solid #eee;
  margin-bottom: 7.2rem;
}