.font-heading {
  font-family: var(--font-heading)
}

.font-sans {
  font-family: var(--font-sans)
}

.font-light {
  font-weight: 300
}

.font-regular {
  font-weight: 400
}

.font-medium {
  font-weight: 500
}

.font-semibold {
  font-weight: 600
}

.font-bold {
  font-weight: 700
}

.font-12 {
  font-size: 1.2rem
}

.font-14 {
  font-size: 1.4rem
}

.font-16 {
  font-size: 1.6rem
}

.font-18 {
  font-size: 1.8rem
}

.text-center {
  text-align: center
}

.underline {
  text-decoration: underline
}

.uppercase {
  text-transform: uppercase
}

.m-0 {
  margin: 0
}

.mx-auto {
  margin-inline: auto
}

.ml-auto {
  margin-left: auto
}

.mr-auto {
  margin-right: auto
}

.ml-0 {
  margin-left: 0
}

.mr-0 {
  margin-right: 0
}

.mb-0 {
  margin-bottom: 0
}

.mt-1 {
  margin-top: var(--spacing-1)
}

.mt-2 {
  margin-top: var(--spacing-2)
}

.mt-3 {
  margin-top: var(--spacing-3)
}

.mt-4 {
  margin-top: var(--spacing-4)
}

.mt-5 {
  margin-top: var(--spacing-5)
}

.mt-6 {
  margin-top: var(--spacing-6)
}

.mt-7 {
  margin-top: var(--spacing-7)
}

.mt-8 {
  margin-top: var(--spacing-8)
}

.mt-9 {
  margin-top: var(--spacing-9)
}

.mt-10 {
  margin-top: var(--spacing-10)
}

.mt-11 {
  margin-top: var(--spacing-11)
}

.mt-12 {
  margin-top: var(--spacing-12)
}

.mt-13 {
  margin-top: var(--spacing-13)
}

.mt-14 {
  margin-top: var(--spacing-14)
}

.mb-1 {
  margin-bottom: var(--spacing-1)
}

.mb-2 {
  margin-bottom: var(--spacing-2)
}

.mb-3 {
  margin-bottom: var(--spacing-3)
}

.mb-4 {
  margin-bottom: var(--spacing-4)
}

.mb-5 {
  margin-bottom: var(--spacing-5)
}

.mb-6 {
  margin-bottom: var(--spacing-6)
}

.mb-7 {
  margin-bottom: var(--spacing-7)
}

.mb-8 {
  margin-bottom: var(--spacing-8)
}

.mb-9 {
  margin-bottom: var(--spacing-9)
}

.mb-10 {
  margin-bottom: var(--spacing-10)
}

.mb-11 {
  margin-bottom: var(--spacing-11)
}

.mb-12 {
  margin-bottom: var(--spacing-12)
}

.mb-13 {
  margin-bottom: var(--spacing-13)
}

.mb-14 {
  margin-bottom: var(--spacing-14)
}

.pt-1 {
  padding-top: var(--spacing-1)
}

.pt-2 {
  padding-top: var(--spacing-2)
}

.pt-3 {
  padding-top: var(--spacing-3)
}

.pt-4 {
  padding-top: var(--spacing-4)
}

.pt-5 {
  padding-top: var(--spacing-5)
}

.pt-6 {
  padding-top: var(--spacing-6)
}

.pt-7 {
  padding-top: var(--spacing-7)
}

.pt-8 {
  padding-top: var(--spacing-8)
}

.pt-9 {
  padding-top: var(--spacing-9)
}

.pt-10 {
  padding-top: var(--spacing-10)
}

.pt-11 {
  padding-top: var(--spacing-11)
}

.pt-12 {
  padding-top: var(--spacing-12)
}

.pt-13 {
  padding-top: var(--spacing-13)
}

.pt-14 {
  padding-top: var(--spacing-14)
}

.pb-1 {
  padding-bottom: var(--spacing-1)
}

.pb-2 {
  padding-bottom: var(--spacing-2)
}

.pb-3 {
  padding-bottom: var(--spacing-3)
}

.pb-4 {
  padding-bottom: var(--spacing-4)
}

.pb-5 {
  padding-bottom: var(--spacing-5)
}

.pb-6 {
  padding-bottom: var(--spacing-6)
}

.pb-7 {
  padding-bottom: var(--spacing-7)
}

.pb-8 {
  padding-bottom: var(--spacing-8)
}

.pb-9 {
  padding-bottom: var(--spacing-9)
}

.pb-10 {
  padding-bottom: var(--spacing-10)
}

.pb-11 {
  padding-bottom: var(--spacing-11)
}

.pb-12 {
  padding-bottom: var(--spacing-12)
}

.pb-13 {
  padding-bottom: var(--spacing-13)
}

.pb-14 {
  padding-bottom: var(--spacing-14)
}

.gap-1 {
  gap: var(--spacing-1)
}

.gap-2 {
  gap: var(--spacing-2)
}

.gap-3 {
  gap: var(--spacing-3)
}

.gap-4 {
  gap: var(--spacing-4)
}

.gap-5 {
  gap: var(--spacing-5)
}

.gap-6 {
  gap: var(--spacing-6)
}

.gap-7 {
  gap: var(--spacing-7)
}

.gap-8 {
  gap: var(--spacing-8)
}

.gap-9 {
  gap: var(--spacing-9)
}

.gap-10 {
  gap: var(--spacing-10)
}

.gap-11 {
  gap: var(--spacing-11)
}

.gap-12 {
  gap: var(--spacing-12)
}

.gap-13 {
  gap: var(--spacing-13)
}

.gap-14 {
  gap: var(--spacing-14)
}

.border {
  border: var(--border)
}

.border-b {
  border-bottom: var(--border)
}

.border-t {
  border-top: var(--border)
}

.border-l {
  border-left: var(--border)
}

.border-r {
  border-right: var(--border)
}

.rounded {
  border-radius: var(--border-radius)
}

.shadow {
  box-shadow: var(--box-shadow)
}

.bg-background {
  background-color: var(--bg-primary)
}

.bg-primary {
  background-color: var(--color-primary)
}

.bg-accent {
  background-color: var(--color-accent)
}

.bg-text {
  background-color: var(--text-primary)
}

.bg-white {
  background-color: var(--white)
}

.bg-success {
  background-color: var(--color-success)
}

.bg-warning {
  background-color: var(--color-warning)
}

.bg-error {
  background-color: var(--color-error)
}

.color-background {
  color: var(--bg-primary)
}

.color-primary {
  color: var(--color-primary)
}

.color-accent {
  color: var(--color-accent)
}

.color-text {
  color: var(--text-primary)
}

.color-white {
  color: var(--white)
}

.color-success {
  color: var(--color-success)
}

.color-warning {
  color: var(--color-warning)
}

.color-error {
  color: var(--color-error)
}

.visually-hidden {
  border-width: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important
}

@media screen and (max-width: 1024px) {

  .overflow-hidden {
    overflow: hidden
  }
}

.mobile {
  display: none !important
}

.block,
.desktop {
  display: block
}

.display-none {
  display: none
}

@media screen and (max-width:1024px) {
  .desktop {
    display: none !important
  }

  .mobile {
    display: block !important
  }
}

.w-50 {
  width: 50%
}

.w-60 {
  width: 60%
}

.w-70 {
  width: 70%
}

.w-80 {
  width: 80%
}

.w-90 {
  width: 90%
}

.w-full {
  width: 100%
}

.full-screen {
  width: auto;
  max-width: 100vw;
  margin-left: calc(-100vw / 2 + 100% / 2);
  margin-right: calc(-100vw / 2 + 100% / 2)
}

.left-full-screen {
  margin-left: calc(-100vw / 2 + 100% / 2) !important
}

.right-full-screen {
  margin-right: calc(-100vw / 2 + 100% / 2) !important
}

.resize-animation-stopper * {
  animation: none !important;
  transition: none !important
}

.relative {
  position: relative
}

.padding-inline {
  padding-left: var(--global-padding-left);
  padding-right: var(--global-padding-right)
}

.mw {
  max-width: var(--global-max-width);
  margin-left: auto;
  margin-right: auto
}

.flex {
  display: flex
}

.flex-col {
  flex-direction: column
}

.flex-1 {
  flex: 1
}

.flex-wrap {
  flex-wrap: wrap
}

.items-center {
  align-items: center
}

.items-start {
  align-items: flex-start !important
}

.items-end {
  align-items: flex-end !important
}

.self-center {
  justify-self: center
}

.justify-center {
  justify-content: center
}

.justify-between {
  justify-content: space-between
}

.row-reverse {
  flex-direction: row-reverse
}

.col-reverse {
  flex-direction: col-reverse
}

.grid {
  display: grid !important
}

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

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

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

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