:root {
  --color-primary: #efb810;
  --color-secondary: #ffffff;
  --color-third: #000000;
  --color-fourth: #eaeafd;
  --color-fifth: #f83760;
  --color-dark: #706f6f;
  --color-light: #faf9f9;
  --color-black: #333333;
  --space-xs2: calc(8 / 3 / 16 * 1rem);
  --space-xs: calc(8 / 2 / 16 * 1rem);
  --space-sm: calc(8 * 1 / 16 * 1rem);
  --space: calc(8 * 2 / 16 * 1rem);
  --space-lg: calc(8 * 3 / 16 * 1rem);
  --space-lg1: calc(8 * 4 / 16 * 1rem);
  --space-xl: calc(8 * 5 / 16 * 1rem);
  --space-xl1: calc(8 * 6 / 16 * 1rem);
  --space-xl2: calc(8 * 7 / 16 * 1rem);
  --space-xl3: calc(8 * 15 / 16 * 1rem);
  --space-xl4: calc(8 * 30 / 16 * 1rem);
  --space-xl5: calc(8 * 40 / 16 * 1rem);
  --space-xl6: calc(8 * 50 / 16 * 1rem);
  --space-xl7: calc(8 * 60 / 16 * 1rem);
  --space-xl8: calc(8 * 70 / 16 * 1rem);
  --space-xl9: calc(8 * 80 / 16 * 1rem);
}
/* NAVIGATION FONTS STYLES */
.header-nav {
  font-family: "Quicksand";
  font-weight: 600;
  color: var(--color-primary);
}
/* First FONTS STYLES */
.title-primary {
  font-family: "Quicksand";
  font-weight: bold;
  font-size: calc(48 / 16 * 1rem);
  color: var(--color-primary);

  @media screen and (max-width: 1220px) {
    font-size: calc(38 / 16 * 1rem);
  }
  /*
  @media screen and (max-width: 768px) {
    font-size: calc(34 / 16 * 1rem);
  }
  @media screen and (max-width: 620px) {
    font-size: calc(24 / 16 * 1rem);
  }
  @media screen and (max-width: 480px) {
    font-size: calc(20 / 16 * 1rem);
  }
  */
}
.text-primary {
  font-family: "Quicksand";
  font-weight: 400;
  line-height: 30px;
  color: var(--color-third);
  font-size: calc(22 / 16 * 1rem);

  @media screen and (max-width: 620px) {
    font-size: calc(18 / 16 * 1rem);
  }
  /*@media screen and (max-width: 480px) {
    font-size: calc(12 / 16 * 1rem);
  }
  */

  strong {
    font-weight: 800;
  }
}
.text-secondary {
  font-family: "Quicksand";
  font-weight: 900;
  color: var(--color-third);
  font-size: calc(22 / 16 * 1rem);

  @media screen and (max-width: 620px) {
    font-size: calc(18 / 16 * 1rem);
  }
  /*@media screen and (max-width: 480px) {
    font-size: calc(12 / 16 * 1rem);
  }
  */
}
.text-third {
  font-family: "Quicksand";
  font-weight: 600;
  line-height: 30px;
  color: var(--color-third);
  font-size: calc(18 / 16 * 1rem);

  @media screen and (max-width: 620px) {
    font-size: calc(16 / 16 * 1rem);
  }
  /*@media screen and (max-width: 480px) {
    font-size: calc(12 / 16 * 1rem);
  }
  */
}
.text-four {
  font-family: "Quicksand";
  font-weight: 800;
  color: var(--color-primary);
  font-size: calc(22 / 16 * 1rem);
  /*
@media screen and (max-width: 620px) {
  font-size: calc(16 / 16 * 1rem);
}
@media screen and (max-width: 480px) {
  font-size: calc(14 / 16 * 1rem);
}
*/
}
.text-five {
  font-family: "Quicksand";
  font-weight: 900;
  color: var(--color-secondary);
  font-size: calc(22 / 16 * 1rem);
  /*
  @media screen and (max-width: 620px) {
    font-size: calc(14 / 16 * 1rem);
  }
  @media screen and (max-width: 480px) {
    font-size: calc(12 / 16 * 1rem);
  }
  */
}
.text-six {
  font-family: "Quicksand-Light";
  font-weight: 900;
  color: var(--color-secondary);
  font-size: calc(22 / 16 * 1rem);
  /*
  @media screen and (max-width: 620px) {
    font-size: calc(14 / 16 * 1rem);
  }
  @media screen and (max-width: 480px) {
    font-size: calc(12 / 16 * 1rem);
  }
  */
}

/* FOOTER SECTION FONTS STYLES */
.footer-text {
  font-family: "In";
  font-weight: bold;
  font-size: calc(16 / 16 * 1rem);
  color: var(--color-secondary);
}

.footer-text-secondary {
  font-family: "PlusJakartaSans";
  font-weight: 400;
  font-size: calc(16 / 16 * 1rem);
  color: var(--color-secondary);
}

/* BUTTON STYLES */
.cta-button {
  font-family: "Quicksand";
  background: black;
  color: white;
  border: none;
  padding: 16px 32px;
  font-size: 1.3rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;

  /*
  @media screen and (max-width: 768px) {
    font-size: calc(12 / 16 * 1rem);
  }
  */
}
.cta-button:hover {
  background: #333;
  transform: translateY(-2px);
}

/*second FONTS STYLES */
.title-secondary {
  font-family: "Quicksand";
  font-weight: bold;
  font-size: calc(48 / 16 * 1rem);
  color: var(--color-third);
  @media screen and (max-width: 1220px) {
    font-size: calc(38 / 16 * 1rem);
  }

  /*
  @media screen and (max-width: 1220px) {
    font-size: calc(40 / 16 * 1rem);
  }
  @media screen and (max-width: 768px) {
    font-size: calc(34 / 16 * 1rem);
  }
  @media screen and (max-width: 620px) {
    font-size: calc(24 / 16 * 1rem);
  }
  @media screen and (max-width: 480px) {
    font-size: calc(20 / 16 * 1rem);
  }
  */
}