@font-face {
  font-family: "canela_deck_trialRgIt";
  src: url("fonts/caneladeck-regular-trial-webfont.woff2") format("woff2"),
    url("fonts/caneladeck-regular-trial-webfont.woff2") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* Global Styles from Design System */

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
  overflow-x: hidden !important;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent; /* For Safari */
  touch-action: manipulation; /* Prevent default touch behavior */
}

html body {
  overflow-x: hidden !important;
  color: black !important;
  max-width: 1920px;
  margin: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400 !important;
  font-family: "Canela Deck", serif !important;
}

h1 {
  font-size: 5rem !important;
}

h2 {
  font-size: 5rem !important;
}

.connect {
  font-size: 6rem !important;
  color: #eca906 !important;
}

h3 {
  font-size: 3rem !important;
}
h4 {
  font-size: 2rem !important;
}
h5 {
  font-size: 1.8rem !important;
}
h6 {
  font-size: 1.5rem !important;
}

p,
span,
li,
a,
label,
textarea,
input,
button {
  font-family: "Canela Deck", serif !important;
  font-size: 1.9rem !important;
  text-decoration: none;
  font-weight: 100 !important;
  list-style: none;
}

::placeholder {
  color: rgb(204, 204, 204);
}

.justify {
  text-align: justify;
}

.color-sec-p {
  color: rgb(17, 16, 16, 68%) !important;
  font-size: 1.7rem !important;
}

.color-gray-76 {
  color: rgb(17, 16, 16, 76%);
}

.color-gray-37 {
  color: rgb(37, 37, 37, 100%);
}

.color-gray-68 {
  color: rgb(17, 16, 16, 68%);
}

/* colors pallet  */

.color-black {
  color: #000000 !important;
}

.color-light-white {
  color: #e3e3e3 !important;
}

.color-white {
  color: white !important;
}

.color-golden {
  color: #eca906;
  font-size: 7rem !important;
}

.color-navy-blue {
  color: #1a79b5 !important;
}

.color-red {
  color: red;
}

/* backgorund colors  */

.bg-light-purple {
  background-color: #dfdafa !important;
}

.bg-golden {
  background-color: #eca906 !important;
}

.bg-beige {
  background-color: #edc9af !important;
}

.bg-light-green {
  background-color: #c3dbce !important;
}

.bg-silver-gray {
  background-color: #ddd9d9 !important;
}

.bg-pale-beige {
  background-color: #daccb2 !important;
}

.bg-navy-blue {
  background-color: #234b64 !important;
}

.bg-grayish-green {
  background-color: #afbabb !important;
}

.bg-pale-almond {
  background-color: #e4d9c5 !important;
}

.bg-white {
  background-color: #ffffff !important;
}

.bg-jet-black {
  background-color: #0a0a0b !important;
}

.bg-light-gray {
  background-color: #ececec !important;
}

.bg-light-cream {
  background: #faf7f0;
}

.bg-chocolate-pink {
  background-color: #e8b8b4;
}

.bg-purple {
  background-color: #af9fe8;
}

.bg-cream {
  background: #feede0;
}

.max-width {
  margin: auto;
  max-width: 85% /*vw*/ !important;
}

.thin-font {
  font-family: "canela_deck_trialthin" !important;
}

.regular-font {
  font-family: "canela_deck_regular_trialRg" !important;
}

.lh-23 {
  line-height: 23px;
}

@media (max-width: 992px) {
  h1 {
    font-size: 5rem !important;
  }

  h2 {
    font-size: 4rem !important;
  }

  p {
    font-size: 1.7rem !important;
  }

  .connect {
    font-size: 6rem !important;
    color: #eca906 !important;
  }
}

@media (max-width: 768px) {
  h1 {
    font-size: 4.5rem !important;
  }

  h2 {
    font-size: 3.5rem !important;
  }

  .connect {
    font-size: 6rem !important;
    color: #eca906 !important;
  }

  p {
    font-size: 1.5rem !important;
  }
}

@media (max-width: 556px) {
  h1 {
    font-size: 2.5rem !important;
  }

  h2 {
    font-size: 2rem !important;
  }

  .connect {
    font-size: 6rem !important;
    color: #eca906 !important;
  }

  h3 {
    font-size: 2rem !important;
  }

  p {
    font-size: 1.4rem !important;
  }
}