/*
--- 01 TYPOGRAPHY SYSTEM

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


- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 56 / 64 / 80 / 96 / 128

- Font weights
Default: 400
Medium: 500,600
Bold: 700

- Line heights
Default: 1
Small: 1.2
Medium: 1.4
Paragraph default: 1.6


--- 02 COLORS

- Primary: #F23D6D
- Tints: #0E1133
- Hover: #da3762

- Accents: #EEF1F6
- Greys
#ddd
#444
#555


--- 05 SHADOWS
0 3.6rem 3.6rem rgb(0 0 0 / 10%)

--- 06 BORDER-RADIUS
Default: 50%
Medium: 5rem

*/

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

*:focus {
  outline: none;
}

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

body {
  font-family: "Roboto", sans-serif;
  line-height: 1;
  font-weight: 400;
  color: #555;
  overflow-x: hidden;
  position: relative;
}

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

.grid {
  display: grid;
}

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

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

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

.primary-heading {
  font-size: 6.2rem;
  color: #0e1133;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 2.4rem;
}

.secondary-heading {
  font-size: 4.4rem;
  color: #0e1133;
  line-height: 1.2;
  margin-bottom: 1.2rem;
}

.third-heading {
  font-size: 3rem;
  color: #0e1133;
  line-height: 1.3;
  margin-bottom: 1.2rem;
}

h4 {
  font-size: 1.8rem;
  color: #0e1133;
  margin-bottom: 1.2rem;
}

.heading-discription {
  display: block;
  font-size: 1.6rem;
  line-height: 1.4;
}

.sub-heading {
  font-size: 1.4rem;
  margin-bottom: 1.6rem;
  color: #f23d6d;
  font-weight: 500;
}

.link-more:link,
.link-more:visited {
  font-size: 1.4rem;
  color: #555;
  text-decoration: none;
  transition: all 0.3s;
  padding-bottom: 0.8rem;
}

.link-more:hover,
.link-more:active {
  color: #da3762;
  border-bottom: 0.1rem solid #da3762;
}