@layer base, component, utilities;

@font-face {
  font-family: 'Interstate Light';
  src: url('/interstate-light.otf') format('opentype');
  font-display: swap;
}

:root {
  /* colors */
  --clr-transparent: rgba(0, 0, 0, 0);
  --clr-black: #000000;
  --clr-white: #ffffff;

  /* Neutral Color */
  --clr-neutral-50: #fcfcfc;
  --clr-neutral-100: #f9f9f9;
  --clr-neutral-125: #f5f5f5;
  --clr-neutral-150: #e6e6e6;
  --clr-neutral-175: #f2f2f2;
  --clr-neutral-200: #dddddd;
  --clr-neutral-250: #e6e7e8;
  --clr-neutral-300: #d9d9d9;
  --clr-neutral-350: #d3d3d3;
  --clr-neutral-400: #bcbec0;
  --clr-neutral-450: #a7a9ac;

  /* Gray Color */
  --clr-gray-200: #d1d3d4;
  --clr-gray-300: #9d9fa2;
  --clr-gray-400: #939598;
  --clr-gray-450: #58595b;
  --clr-gray-500: #4d4d4f;
  --clr-gray-550: #4d4d4d;
  --clr-gray-600: #373940;
  --clr-gray-650: #414042;
  --clr-gray-900: #222222;

  /* Green Color */
  --clr-green-50: #e8f9f0;
  --clr-green-200: #c6e3bd;
  --clr-green-350: #73c167;
  --clr-green-400: #00d281;
  --clr-green-700: #316431;

  /* Red Color */
  --clr-red-50: #fde8e9;
  --clr-red-200: #f5c4c6;
  --clr-red-600: #ff3c23;
  --clr-red-700: #d71920;
  --clr-red-750: #cc0000;
  --clr-red-800: #aa0000;

  /* Yellow Color */
  --clr-yellow-100: #fdf0c3;
  --clr-yellow-500: #ffb42b;

  /* Brown Color */
  --clr-brown-100: #fed7b6;
  --clr-brown-600: #7e5129;

  /* Blue Color */
  --clr-sky-50: #ebfafd;
  --clr-sky-500: #56a0d3;
  --clr-sky-550: #33abd6;
  --clr-sky-600: #0096cc;
  --clr-sky-700: #0e73ac;
  --clr-sky-800: #065785;
  --clr-sky-950: rgba(0, 150, 204, 0.1);

  /* font-sizes */
  --fs-750: 4rem; /* 64px */
  --fs-700: 3.5rem; /* 56px */
  --fs-650: 2.5rem; /* 40px */
  --fs-625: 2.25rem; /* 36px */
  --fs-600: 2rem; /* 32px */
  --fs-500: 1.75rem; /* 28px */
  --fs-400: 1.5rem; /* 24px */
  --fs-350: 1.25rem; /* 20px */
  --fs-325: 1.125rem; /* 18px */
  --fs-300: 1rem; /* 16px */
  --fs-200: 0.875rem; /* 14px */
  --fs-100: 0.75rem; /* 12px */

  /* font-weight */
  --fw-bold: 700;

  /* font-families */
  --ff-inter-light: 'Interstate Light', sans-serif;
  --ff-inter: 'Interstate', sans-serif;
  --ff-inter-bold: 'Interstate Bold', sans-serif;
  --ff-open-sans: 'Open Sans', sans-serif;
  --ff-open-sans-500: 'Open Sans Medium', sans-serif;
  --ff-open-sans-600: 'Open Sans Semi Bold', sans-serif;
  --ff-open-sans-700: 'Open Sans Bold', sans-serif;

  /* box shadow */
  --box-shadow-1: 0px 4px 15px rgba(196, 196, 196, 0.35);
  --box-shadow-2: 0px 8px 28px rgb(0 0 0 / 28%);
  --input-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  --input-shadow-active: rgb(255, 255, 255) 0px 0px 0px 0px, rgb(161, 161, 170) 0px 0px 0px 1px,
    rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;

  /* Transitions property */
  --transition-display: opacity, visibility, background-color;
  --transition-colors: color, background-color, border-color, text-decoration-color, fill, stroke;
  --transition-shadows: box-shadow;
  --transition-transform: translate, rotate, scale;

  /* Transitions duration */
  --duration-100: 100ms;
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-400: 400ms;

  /* Transitions timing function */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* border radius */
  --rounded: 0.25rem;
  --rounded-6: 0.375rem;
  --rounded-8: 0.5rem;
  --rounded-20: 1.25rem;
  --rounded-full: 9999px;

  --container-size-90: 90rem;
}

@media screen and (max-width: 580px) {
  :root {
    --fs-750: 2.5rem;
    --fs-700: 2.5rem;
    --fs-650: 2rem;
    --fs-625: 2rem;
    --fs-600: 1.75rem;
    --fs-400: 1.25rem;
    --fs-350: 1rem;
    --fs-300: 15px;
  }
}

/* ----------------------------- */
/* Utility classes */
/* ----------------------------- */
*,
*::after,
*::before {
  box-sizing: border-box;
}

html[dir='ltr'] li a {
  margin-left: unset;
}

body {
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

body.fixed {
  overflow-y: hidden;
}

svg,
img {
  vertical-align: middle;
}

img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

a {
  user-select: none;
  display: inline-block;
  text-decoration: none;
  transition: 0.15s ease;
}

ul,
ol {
  list-style-type: decimal;
}

table {
  width: 100%;
  border-collapse: collapse;
}

textarea {
  width: 100%;
  padding: 0.75rem;
  resize: vertical;
  border: 1px solid var(--clr-neutral-300);
  box-shadow: var(--input-shadow);
}

::placeholder {
  font-size: 15px;
}

label,
input,
button,
textarea,
select {
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: inherit;
}

textarea,
input {
  outline: 2px solid transparent;
}

button {
  -webkit-appearance: none;
  outline: none;
  user-select: none;
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
hr {
  margin: 0;
  padding: 0;
  font-weight: 400;
}

/* Remove animations for people who've turned them off */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Accessibility for screen reader */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-to-content {
  position: absolute;
  z-index: 9999;
  background-color: var(--clr-white);
  color: var(--clr-gray-900);
  padding: 0.5rem 1rem;
  margin-inline: auto;
  translate: 0 -100%;
  transition: translate 0.4s ease;
}

.skip-to-content:focus {
  translate: 0 0;
}

.list-disc {
  list-style-type: disc;
}

.list-decimal {
  list-style-type: decimal;
}

/* Text */
.text-center {
  text-align: center;
}

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

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

/* Display */
.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.flex-1 {
  flex: 1 1 0%;
}

.shrink-0 {
  flex-shrink: 0;
}

.shrink-1 {
  flex-shrink: 1;
}

.grow-0 {
  flex-grow: 0;
}

.grow-1 {
  flex-grow: 1;
}

.grid {
  display: grid;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-start {
  align-items: start;
}

.items-center {
  align-items: center;
}

.items-stretch {
  align-items: stretch;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-stretch {
  align-self: stretch;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

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

.justify-center {
  justify-content: center;
}

.place-items-center {
  place-items: center;
}

.grid-repeat-auto {
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}

.gap-1 {
  gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-7 {
  gap: 1.75rem;
}

.gap-8 {
  gap: 2rem;
}

.p-1 {
  padding: 0.25rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.py-1 {
  padding: 0.25rem 0;
}

.py-2 {
  padding: 0.5rem 0;
}

.py-3 {
  padding: 0.75rem 0;
}

.py-4 {
  padding: 1rem 0;
}

.py-5 {
  padding: 1.25rem 0;
}

.py-6 {
  padding: 1.5rem 0;
}

.py-8 {
  padding: 2rem 0;
}

.px-1 {
  padding: 0 0.25rem;
}

.px-2 {
  padding: 0 0.5rem;
}

.px-3 {
  padding: 0 0.75rem;
}

.px-4 {
  padding: 0 1rem;
}

.px-5 {
  padding: 0 1.25rem;
}

.px-6 {
  padding: 0 1.5rem;
}

.px-8 {
  padding: 0 2rem;
}

.m-1 {
  margin: 0.25rem;
}

.m-2 {
  margin: 0.5rem;
}

.m-3 {
  margin: 0.75rem;
}

.m-4 {
  margin: 1rem;
}

.m-5 {
  margin: 1.25rem;
}

.m-6 {
  margin: 1.5rem;
}

.m-8 {
  margin: 2rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

/* Position */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
  top: 0;
  z-index: 3;
}

.overflow-hidden {
  overflow: hidden !important;
}

.overflow-auto {
  overflow: auto;
}

.flow > *:where(:not(:first-child)) {
  margin-top: var(--flow, 1rem);
}

.container {
  flex: 1 1;
  width: 100%;
  max-width: 1224px;
  margin: 0 auto;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.hidden {
  opacity: 0;
  visibility: hidden;
}

.none {
  display: none;
}

.hidden[aria-hidden='false'] {
  opacity: 1;
  visibility: visible;
}

.square-shape {
  width: var(--size, 1rem);
  height: var(--size, 1rem);
}

.whitespace-normal {
  white-space: normal;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.whitespace-pre {
  white-space: pre;
}

.whitespace-pre-line {
  white-space: pre-line;
}

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

.whitespace-break-spaces {
  white-space: break-spaces;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-ellipsis {
  text-overflow: ellipsis;
}

.text-clip {
  text-overflow: clip;
}

#onetrust-banner-sdk div, #onetrust-banner-sdk span, #onetrust-banner-sdk h1, #onetrust-banner-sdk h2, #onetrust-banner-sdk h3, #onetrust-banner-sdk h4, #onetrust-banner-sdk h5, #onetrust-banner-sdk h6, #onetrust-banner-sdk p, #onetrust-banner-sdk img, #onetrust-banner-sdk svg, #onetrust-banner-sdk button, #onetrust-banner-sdk section, #onetrust-banner-sdk a, #onetrust-banner-sdk label, #onetrust-banner-sdk input, #onetrust-banner-sdk ul, #onetrust-banner-sdk li, #onetrust-banner-sdk nav, #onetrust-banner-sdk table, #onetrust-banner-sdk thead, #onetrust-banner-sdk tr, #onetrust-banner-sdk td, #onetrust-banner-sdk tbody, #onetrust-banner-sdk .ot-main-content, #onetrust-banner-sdk .ot-toggle, #onetrust-banner-sdk #ot-content, #onetrust-banner-sdk #ot-pc-content, #onetrust-banner-sdk .checkbox, #onetrust-pc-sdk div, #onetrust-pc-sdk span, #onetrust-pc-sdk h1, #onetrust-pc-sdk h2, #onetrust-pc-sdk h3, #onetrust-pc-sdk h4, #onetrust-pc-sdk h5, #onetrust-pc-sdk h6, #onetrust-pc-sdk p, #onetrust-pc-sdk img, #onetrust-pc-sdk svg, #onetrust-pc-sdk button, #onetrust-pc-sdk section, #onetrust-pc-sdk a, #onetrust-pc-sdk label, #onetrust-pc-sdk input, #onetrust-pc-sdk ul, #onetrust-pc-sdk li, #onetrust-pc-sdk nav, #onetrust-pc-sdk table, #onetrust-pc-sdk thead, #onetrust-pc-sdk tr, #onetrust-pc-sdk td, #onetrust-pc-sdk tbody, #onetrust-pc-sdk .ot-main-content, #onetrust-pc-sdk .ot-toggle, #onetrust-pc-sdk #ot-content, #onetrust-pc-sdk #ot-pc-content, #onetrust-pc-sdk .checkbox, #ot-sdk-cookie-policy div, #ot-sdk-cookie-policy span, #ot-sdk-cookie-policy h1, #ot-sdk-cookie-policy h2, #ot-sdk-cookie-policy h3, #ot-sdk-cookie-policy h4, #ot-sdk-cookie-policy h5, #ot-sdk-cookie-policy h6, #ot-sdk-cookie-policy p, #ot-sdk-cookie-policy img, #ot-sdk-cookie-policy svg, #ot-sdk-cookie-policy button, #ot-sdk-cookie-policy section, #ot-sdk-cookie-policy a, #ot-sdk-cookie-policy label, #ot-sdk-cookie-policy input, #ot-sdk-cookie-policy ul, #ot-sdk-cookie-policy li, #ot-sdk-cookie-policy nav, #ot-sdk-cookie-policy table, #ot-sdk-cookie-policy thead, #ot-sdk-cookie-policy tr, #ot-sdk-cookie-policy td, #ot-sdk-cookie-policy tbody, #ot-sdk-cookie-policy .ot-main-content, #ot-sdk-cookie-policy .ot-toggle, #ot-sdk-cookie-policy #ot-content, #ot-sdk-cookie-policy #ot-pc-content, #ot-sdk-cookie-policy .checkbox, #ot-sync-ntfy div, #ot-sync-ntfy span, #ot-sync-ntfy h1, #ot-sync-ntfy h2, #ot-sync-ntfy h3, #ot-sync-ntfy h4, #ot-sync-ntfy h5, #ot-sync-ntfy h6, #ot-sync-ntfy p, #ot-sync-ntfy img, #ot-sync-ntfy svg, #ot-sync-ntfy button, #ot-sync-ntfy section, #ot-sync-ntfy a, #ot-sync-ntfy label, #ot-sync-ntfy input, #ot-sync-ntfy ul, #ot-sync-ntfy li, #ot-sync-ntfy nav, #ot-sync-ntfy table, #ot-sync-ntfy thead, #ot-sync-ntfy tr, #ot-sync-ntfy td, #ot-sync-ntfy tbody, #ot-sync-ntfy .ot-main-content, #ot-sync-ntfy .ot-toggle, #ot-sync-ntfy #ot-content, #ot-sync-ntfy #ot-pc-content, #ot-sync-ntfy .checkbox {
  font-family: var(--ff-open-sans) !important;
}

#onetrust-policy-text a.ot-cookie-policy-link {
  display: inline;
}