:root {
  --vh: 1vh;
  --headerHeight: 74px;

  --font-primary: "Inter", sans-serif;
  --font-secondary: "Fraunces", serif;

  --color-black: #000;
  --color-black-3: rgba(0, 0, 0, 0.3);
  --color-black-5: rgba(0, 0, 0, 0.5);
  --color-black-7: rgba(0, 0, 0, 0.7);

  --color-white: #fff;
  --color-white-3: rgba(255, 255, 255, 0.3);
  --color-white-5: rgba(255, 255, 255, 0.5);
  --color-white-6: rgba(255, 255, 255, 0.6);
  --color-white-7: rgba(255, 255, 255, 0.7);

  --color-gray-1: #e6e6e6;
  --color-gray-2: #6b6965;
  --color-gray-3: #28292b;
  --color-gray-4: #0b0b0b;
  --color-gray-5: #28303f;
  --color-gray-6: #6b6965;

  --color-pink-1: #d97a9e;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}

html {
  overflow-x: hidden !important;
}

body {
  font-feature-settings: "liga" off;
  width: 100vw;
  height: auto;
  margin: 0 !important;
  font-family: var(--font-primary);
  overscroll-behavior-y: contain;
}

@media screen and (max-width: 1024px) {
  body {
    overflow: hidden;
  }
}

.overflow-x-hidden {
  overflow-x: hidden;
  overflow-y: visible;
}

button {
  border: none;
  background: none;
}

input:focus-visible,
input:focus,
input:focus-within {
  outline: none !important;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0px;
}

/* ======================================== */
/* Font family                              */
/* ======================================== */

.font-primary {
  font-family: var(--font-primary) !important;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.font-secondary {
  font-family: var(--font-secondary) !important;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}

/* ======================================== */
/* Font sizes                               */
/* ======================================== */

.text-11 {
  font-size: 11px !important;
}

.text-12 {
  font-size: 12px !important;
}

.text-14 {
  font-size: 14px !important;
}

.text-16 {
  font-size: 16px !important;
}

.text-18 {
  font-size: 18px !important;
}

.text-21 {
  font-size: 21px !important;
}

.text-22 {
  font-size: 22px !important;
}

.text-24 {
  font-size: 24px !important;
}

.text-32 {
  font-size: 32px !important;
}
.text-36 {
  font-size: 36px !important;
}
.text-40 {
  font-size: 40px !important;
}
.text-44 {
  font-size: 44px !important;
}
.text-54 {
  font-size: 54px !important;
}
.text-64 {
  font-size: 64px !important;
}

/* ======================================== */
/* Text Colors                              */
/* ======================================== */

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

.text-white-7 {
  color: var(--color-white-7);
}

.text-black {
  color: var(--color-black);
}

.text-black-5 {
  color: var(--color-black-5);
}

.text-black-7 {
  color: var(--color-black-7);
}

.text-gray-1 {
  color: var(--color-gray-1);
}
.text-gray-2 {
  color: var(--color-gray-2);
}
.text-gray-3 {
  color: var(--color-gray-3);
}

.text-gray-4 {
  color: var(--color-gray-4);
}

.text-gray-6 {
  color: var(--color-gray-6);
}

/* ======================================== */
/* BG Colors                                */
/* ======================================== */

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

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

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

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

.bg-black-3 {
  background-color: var(--color-black-3);
}

.bg-black-5 {
  background-color: var(--color-black-5);
}

.bg-gray-1 {
  background-color: var(--color-gray-1);
}

.bg-gray-5 {
  background-color: var(--color-gray-5);
}

/* ======================================== */
/* Font weights                             */
/* ======================================== */

.font-100 {
  font-weight: 100 !important;
}

.font-200 {
  font-weight: 200 !important;
}

.font-300 {
  font-weight: 300 !important;
}

.font-400 {
  font-weight: 400 !important;
}

.font-500 {
  font-weight: 500 !important;
}

.font-600 {
  font-weight: 600 !important;
}

.font-700 {
  font-weight: 700 !important;
}

/* ======================================== */
/* Line Height                              */
/* ======================================== */
.line-height-103 {
  line-height: 103% !important;
}

.line-height-110 {
  line-height: 110% !important;
}

.line-height-112 {
  line-height: 112% !important;
}

.line-height-116 {
  line-height: 116% !important;
}

.line-height-120 {
  line-height: 120% !important;
}

.line-height-122 {
  line-height: 122% !important;
}

.line-height-128 {
  line-height: 128% !important;
}

.line-height-130 {
  line-height: 130% !important;
}

.line-height-140 {
  line-height: 140% !important;
}

.line-height-150 {
  line-height: 150% !important;
}

.line-height-normal {
  line-height: normal;
}

/* ======================================== */
/* Letter Spacing                           */
/* ======================================== */

.tracking-011 {
  letter-spacing: -0.11px !important;
}

.tracking-014 {
  letter-spacing: -0.14px !important;
}

.tracking-022 {
  letter-spacing: -0.22px !important;
}

.tracking-024 {
  letter-spacing: -0.24px !important;
}

.tracking-028 {
  letter-spacing: -0.28px !important;
}

.tracking-032 {
  letter-spacing: -0.32px !important;
}

.tracking-036 {
  letter-spacing: -0.36px !important;
}

.tracking-044 {
  letter-spacing: -0.44px !important;
}

.tracking-048 {
  letter-spacing: -0.48px !important;
}

.tracking-064 {
  letter-spacing: -0.64px !important;
}

.tracking-066 {
  letter-spacing: -0.66px !important;
}

.tracking-072 {
  letter-spacing: -0.72px !important;
}

.tracking-08 {
  letter-spacing: -0.8px !important;
}

.tracking-088 {
  letter-spacing: -0.88px !important;
}

/* ======================================== */
/* Widths and Heights                       */
/* ======================================== */

.w-screen {
  width: 100vw !important;
}
.h-screen {
  height: 100vh !important;
}

.w-dscreen {
  width: 100dvw;
}

.h-dscreen {
  height: 100dvh;
}

.w-half {
  width: 50% !important;
}
.h-half {
  height: 50% !important;
}

.min-w-screen {
  min-width: 100vw !important;
}

.min-w-dscreen {
  min-width: 100dvw !important;
}

.min-h-screen {
  min-height: 100vh !important;
}

.min-h-dscreen {
  min-height: 100dvh !important;
}

.max-w-screen {
  max-width: 100vw !important;
}
.max-h-screen {
  max-height: 100dvh !important;
}

.max-w-230 {
  max-width: 230px !important;
}

.max-w-270 {
  max-width: 270px !important;
}

/* ======================================== */
/* Opacity                                  */
/* ======================================== */

.opacity-50 {
  opacity: 50% !important;
}

.opacity-60 {
  opacity: 60% !important;
}

.opacity-70 {
  opacity: 70% !important;
}

.opacity-80 {
  opacity: 80% !important;
}

.opacity-90 {
  opacity: 90% !important;
}

/* ======================================== */
/* Margins                                  */
/* ======================================== */

.mb-10 {
  margin-bottom: 10px !important;
}

.mb-15 {
  margin-bottom: 15px !important;
}

.mb-20 {
  margin-bottom: 20px !important;
}

.mb-35 {
  margin-bottom: 35px !important;
}

.mb-40 {
  margin-bottom: 40px !important;
}

.mx-auto {
  margin: 0 auto !important;
}

.my-auto {
  margin: auto 0 !important;
}
.m-auto {
  margin: auto !important;
}

/* ======================================== */
/* Padding                                  */
/* ======================================== */

/* 4px */
.p-4 {
  padding: 4px;
}
.px-4 {
  padding-left: 4px;
  padding-right: 4px;
}
.py-4 {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* 6px */
.p-6 {
  padding: 6px;
}
.px-6 {
  padding-left: 6px;
  padding-right: 6px;
}
.py-6 {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* 8px */
.p-8 {
  padding: 8px;
}
.px-8 {
  padding-left: 8px;
  padding-right: 8px;
}
.py-8 {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* 10px */
.p-10 {
  padding: 10px;
}
.px-10 {
  padding-left: 10px;
  padding-right: 10px;
}
.py-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* 12px */
.p-12 {
  padding: 12px;
}
.px-12 {
  padding-left: 12px;
  padding-right: 12px;
}
.py-12 {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* 16px */
.p-16 {
  padding: 16px;
}
.px-16 {
  padding-left: 16px;
  padding-right: 16px;
}
.py-16 {
  padding-top: 16px;
  padding-bottom: 16px;
}

/* 18px */
.p-18 {
  padding: 18px;
}
.px-18 {
  padding-left: 18px;
  padding-right: 18px;
}
.py-18 {
  padding-top: 18px;
  padding-bottom: 18px;
}

/* 20px */
.p-20 {
  padding: 20px;
}
.px-20 {
  padding-left: 20px;
  padding-right: 20px;
}
.py-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

/* 20px */
.p-22 {
  padding: 22px;
}
.px-22 {
  padding-left: 22px;
  padding-right: 22px;
}
.py-22 {
  padding-top: 22px;
  padding-bottom: 22px;
}

/* 24px */
.p-24 {
  padding: 24px;
}
.px-24 {
  padding-left: 24px;
  padding-right: 24px;
}
.py-24 {
  padding-top: 24px;
  padding-bottom: 24px;
}

/* 27px */
.p-27 {
  padding: 27px;
}
.px-27 {
  padding-left: 27px;
  padding-right: 27px;
}
.py-27 {
  padding-top: 27px;
  padding-bottom: 27px;
}

/* 30px */
.p-30 {
  padding: 30px;
}
.px-30 {
  padding-left: 30px;
  padding-right: 30px;
}
.py-30 {
  padding-top: 30px;
  padding-bottom: 30px;
}

/* 32px */
.p-32 {
  padding: 32px;
}
.px-32 {
  padding-left: 32px;
  padding-right: 32px;
}
.py-32 {
  padding-top: 32px;
  padding-bottom: 32px;
}

/* 36px */
.p-36 {
  padding: 36px;
}
.px-36 {
  padding-left: 36px;
  padding-right: 36px;
}
.py-36 {
  padding-top: 36px;
  padding-bottom: 36px;
}

/* 40px */
.p-40 {
  padding: 40px;
}
.px-40 {
  padding-left: 40px;
  padding-right: 40px;
}
.py-40 {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* 64px */
.p-64 {
  padding: 64px;
}
.px-64 {
  padding-left: 64px;
  padding-right: 64px;
}
.py-64 {
  padding-top: 64px;
  padding-bottom: 64px;
}

/* ======================================== */
/* Border Radius                            */
/* ======================================== */
.rounded-10 {
  border-radius: 10px !important;
}

.rounded-12 {
  border-radius: 12px !important;
}

.rounded-20 {
  border-radius: 20px !important;
}

.rounded-24 {
  border-radius: 24px !important;
}

.rounded-30 {
  border-radius: 30px !important;
}

.rounded-50 {
  border-radius: 50px !important;
}

.rounded-90 {
  border-radius: 90px !important;
}

.rounded-88 {
  border-radius: 88px !important;
}

.rounded-full {
  border-radius: 9999px !important;
}

/* ======================================== */
/* Z Index                                  */
/* ======================================== */

.z-5 {
  z-index: 5;
}

.z-10 {
  z-index: 10 !important;
}

.z-20 {
  z-index: 20 !important;
}

.z-30 {
  z-index: 30 !important;
}

.z-40 {
  z-index: 40 !important;
}

.z-50 {
  z-index: 50 !important;
}

.z-90 {
  z-index: 90 !important;
}

.z-100 {
  z-index: 100 !important;
}

.z-110 {
  z-index: 110 !important;
}

.z-150 {
  z-index: 150 !important;
}

.z-180 {
  z-index: 180 !important;
}

.z-200 {
  z-index: 200 !important;
}

.z-210 {
  z-index: 210 !important;
}

.z-250 {
  z-index: 250 !important;
}

.z-998 {
  z-index: 998 !important;
}

.z-999 {
  z-index: 999 !important;
}

/* ======================================== */
/* Flex Box                                */
/* ======================================== */

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

/* ======================================== */
/* Flex Gaps                                */
/* ======================================== */

.gap-4 {
  gap: 4px !important;
}
.gap-8 {
  gap: 8px !important;
}
.gap-12 {
  gap: 12px !important;
}

.gap-15 {
  gap: 15px !important;
}

.gap-16 {
  gap: 16px !important;
}

.gap-18 {
  gap: 18px !important;
}

.gap-20 {
  gap: 20px !important;
}

.gap-26 {
  gap: 26px !important;
}

.gap-40 {
  gap: 40px !important;
}

.gap-44 {
  gap: 44px !important;
}

.gap-52 {
  gap: 52px !important;
}

.gap-60 {
  gap: 60px !important;
}

.gap-215 {
  gap: 215px !important;
}

/* ======================================== */
/* Positions                                */
/* ======================================== */

.left-0 {
  left: 0px !important;
}

.left-10 {
  left: 10px !important;
}

.left-20 {
  left: 20px !important;
}

.left-52 {
  left: 52px !important;
}

.bottom-0 {
  bottom: 0px !important;
}

.bottom-10 {
  bottom: 10px !important;
}

.bottom-20 {
  bottom: 20px !important;
}

.right-0 {
  right: 0px !important;
}

.right-10 {
  right: 10px !important;
}

.right-20 {
  right: 20px !important;
}

.right-52 {
  right: 52px !important;
}

.top-0 {
  top: 0px !important;
}

.top-10 {
  top: 10px !important;
}

.top-20 {
  top: 20px !important;
}

.top-52 {
  top: 52px !important;
}

.inset-0 {
  inset: 0 !important;
}

.top-30percent {
  top: 30% !important;
}

.top-half {
  top: 50% !important;
}

.top-full {
  top: 100% !important;
}

.bottom-half {
  bottom: 50% !important;
}

.bottom-full {
  bottom: 100% !important;
}

.left-half {
  left: 50% !important;
}

.left-full {
  left: 100% !important;
}

.right-half {
  right: 50% !important;
}
.right-full {
  right: 100% !important;
}

/* ======================================== */
/* Object Fit                               */
/* ======================================== */

.object-cover {
  object-fit: cover !important;
}

/* ======================================== */
/* Buttons                                  */
/* ======================================== */

.btn-light {
  display: flex;
  padding: 10px 12px;
  justify-content: center;
  align-items: center;

  background: rgba(40, 41, 43, 0.04);

  color: var(--color-gray-3);
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  letter-spacing: 0.42px;
  text-transform: uppercase;
}

.btn-light em {
  margin-right: 5px;
}

/* ======================================== */
/* MISC                                     */
/* ======================================== */

.cursor-pointer {
  cursor: pointer !important;
}

.text-underline {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 2%;
  text-underline-offset: 19%;
  text-underline-position: from-font;
}

.fst-normal {
  font-style: normal !important;
}

.d-xxxl-block {
  display: none;
}

@media screen and (min-width: 1920px) {
  .d-xxxl-block {
    display: block !important;
  }

  .d-xxxl-none {
    display: none !important;
  }
}