/* 
---Typography
- Font sizes
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
normal: 1.7
title: 1.05

- Letter spacing
titles -0.5px
subheadings 0.75px

---colors
- Primary: #051e28
- Tints:

- Shades: #cdd2d4 #e6e9ea 

- Accents: #f31148 ,#c20e3a #f5416d
- Greys
#333




---Shadows
box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 8%);

---Border radius
Default:9px

---Whitespace
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/

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

html {
  /* Setting font size to 10 units*/
  font-size: 62.5%;
  overflow-x: hidden;
}

body {
  /* Setting main font family, color, and size */
  font-family: "Inter", sans-serif;
  color: #333;
  line-height: 1;
  font-weight: 500;
  position: relative;
}

/** General and reusable components */

.container {
  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);
}
.primary-heading,
.secondary-heading,
.tertiary-heading {
  letter-spacing: -0.5px;
  font-weight: 700;
}

.primary-heading {
  font-size: 5.2rem;
  margin-bottom: 3.2rem;
  line-height: 1.1;
}

.secondary-heading {
  font-size: 4.4rem;
  margin-bottom: 6.4rem;
  line-height: 1.2;
}

.subheading {
  font-size: 1.6rem;
  margin-bottom: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  font-weight: 600;
  color: #f31148;
}

.margin-btm-sm {
  margin-bottom: 2.4rem;
}

.margin-btm-md {
  margin-bottom: 4.8rem;
}

.margin-ryt-md {
  margin-right: 3.2rem;
}

.heading {
  text-align: center;
}

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

.btn,
.btn:link,
.btn:visited {
  text-decoration: none;
  color: #e6e9ea;
  font-size: 2rem;
  font-weight: 600;
  transition: all 0.3s;
}

.btn-primary,
.btn-primary:link,
.btn-primary:visited {
  text-decoration: none;
  color: #e6e9ea;
  background-color: #f31148;
  padding: 1.2rem 3.2rem;
  border-radius: 9px;
  transition: all 0.3s;
}

.btn-primary:active,
.btn-primary:hover {
  background-color: #c20e3a;
}

.btn-secondary:link,
.btn-secondary:visited {
  border-bottom: 1px solid #e6e9ea;
}

.btn-secondary:hover,
.btn-secondary:active {
  border-bottom: 1px solid transparent;
  color: #f31148;
}

.hidden {
  display: none;
  transition: all 0.3s;
}