/* 

--- 01 TYPOGRAPHY SYSTEM

- Font sizes (px): 
  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
  Small: 1.2
  Medium: 1.3
  Paragraph default: 1.4

- Letter spacing
-0.5px
0.75px

--- 02 COLORS

- Primary: #DB7158 (header: #444)
- Tints: 

- Shades:

#fbf1ee
#f8e3de
#f1c6bc
#EDB8AC
#E69C8A
#e28d79
#df7f69
#c5664f
#af5a46

- Accents:
- Greys:

#444
#4e4e4e
#5a5a5a
#a2a2a2
#efefef

#292929
#363636
#3d3d3d
#4e4e4e
#575757
#696969
#8f8f8f
#a2a2a2
#c7c7c7
#ececec

--- 03 SHADOWS

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

--- 04 BORDER RADIUS

Default: 9px
Medium: 11px

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

*/

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

/* *:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem #cccdd9;
} */

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

body {
  font-family: 'Exo', 'Rubik', sans-serif;
  line-height: 1;
  font-weight: 400;
  background-color: rgba(69, 69, 69, 0.805);
  color: #5a5a5a;
  overflow-x: hidden;
}

/* CUSTOM SCROLLBAR */
/* Width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #5a5a5a;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #e69c8a;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #df7f69;
}

/*********************************/
/* GENERAL REUSABLE COMPONENTS */
/*********************************/

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

.margin-box {
  margin-bottom: 3.2rem;
}

.general-heading--1 {
  font-size: 3.2rem;
  text-transform: uppercase;
  line-height: 1.3;
  /* line-height: 1.2; */
  /* color: #db7158; */
}

.general-heading h2 span {
  font-size: 3.2rem;
  font-weight: 700;
  color: #db7158;
}

.general-heading--h4 {
  font-size: 2.4rem;
  font-weight: 600;
  text-transform: uppercase;
  padding-top: 2.4rem;
}

.general-heading span {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.4;
  color: #e28d79;
  /* grid-column: 2 / 4; */
}

.general-heading-padding-sm {
  padding-top: 3.2rem;
}

/* .general-p {
  display: block;
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1.6;
  padding-top: 3.6rem;
  margin: auto;
} */

.general-p {
  display: block;
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1.6;
  margin: auto;
}

.general-p span {
  display: block;
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1.6;
  margin: auto;
}

.general-p--padding-sm span {
  padding-top: 1.6rem;
}

.general-p--padding-hi span {
  padding-top: 3.2rem;
}

.floating {
  animation-name: floating;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes floating {
  0% {
    transform: translate(0, 0px);
  }
  50% {
    transform: translate(0, 15px);
  }
  100% {
    transform: translate(0, -0px);
  }
}

.card-box {
  display: grid;
  gap: 4.8rem;
  margin-top: 4.8rem;
}

.btn-1 {
  font-family: inherit;
  border-radius: 11px;
  padding: 1.2rem 1.6rem;
  border: none;
  transition: all 0.3s;
  letter-spacing: 1px;
}

.btn-1:link,
.btn-1:visited,
.btn-1:hover,
.btn-1:active {
  transition: all 0.4s;
}

.btn-1:hover {
  transform: scale(1.1);
  transition: all 0.4s;
}

.grid {
  display: grid;
}

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

.grid--3-cols {
  display: grid;
  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--6-cols {
  grid-template-columns: repeat(6, 1fr);
}

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

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

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