:root {
  --blue: #0056fe;
  --darkblue: #18214d;
  --light: #dee8f0;
  --green: #6ce98f;
  --dark: #333333;
  --gray: #4f4f4f;
}

@font-face {
  font-family: "Gilroy";
  src: url("/assets/fonts/Gilroy-Light.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gilroy-Bold";
  src: url("/assets/fonts/Gilroy-Bold.ttf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

.gilroy {
  font-family: "Gilroy", system-ui, -apple-system, sans-serif;
  font-weight: 600;
}

.gilroy-bold {
  font-family: "Gilroy-Bold", system-ui, -apple-system, sans-serif;
  font-weight: 600;
}

.inter {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

html,
body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

h1,
h2,
h3,
h4 {
  font-family: "Gilroy", sans-serif;
}

p,
body {
  font-family: "Inter", sans-serif;
}

body {
  line-height: 1.5;
  color: var(--gray);
}

.bg-custom-light {
  background-color: var(--light);
}

.bg-custom-blue {
  background-color: var(--blue);
}
.bg-custom-darkblue {
  background-color: var(--darkblue);
}
.bg-custom-gray {
  background-color: var(--gray);
}
.bg-custom-green {
  background-color: var(--green);
}

.text-custom-blue {
  color: var(--blue);
}
.text-custom-darkblue {
  color: var(--darkblue);
}

.text-custom-dark {
  color: var(--dark);
}
.text-custom-gray {
  color: var(--gray);
}
.text-custom-green {
  color: var(--green);
}

.subtitle {
  font-size: 16px;
}

.title-xs {
  font: size 25px;
}

.title-sm {
  font-size: 45px;
}

.title-md {
  font-size: 55px;
}

.title-lg {
  font-size: 80px;
}

.number {
  font-size: 50px;
}

.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 calc(0.25rem * 4);
}

@media (max-width: 768px) {
  .container {
    padding: 0 10px;
  }
}

.card-soft {
  box-shadow: inset -8px -8px 16px rgb(255 255 255 / 10%),
    inset 8px 8px 16px rgb(0 0 0 / 10%);
}

@media (max-width: 767.98px) {
  [data-aos="fade-left"],
  [data-aos="fade-right"] {
    transform: none !important;
  }
}