@font-face {
  font-display: swap;
  font-family: "Primary";
  font-weight: 400;
  /* src: url("../fonts/NeueMontreal-Regular.woff2"); */
  src: url("../fonts/Switzer-Regular.woff2");
}

@font-face {
  font-display: swap;
  font-family: "Primary";
  font-weight: 700;
  /* src: url("../fonts/NeueMontreal-Bold.woff2"); */
  src: url("../fonts/Switzer-Bold.woff2");
}

@font-face {
  font-display: swap;
  font-family: "Secondary";
  font-weight: 700;
  src: url("../fonts/CabinetGrotesk-Bold.woff2");
}

:root,
*::before,
*::after {
  --color-primary: #b521e9;
  --color-gradient: linear-gradient(90deg, #00c2ff 0%, #b521e9 100%);
  --color-gradient-transparent: linear-gradient(90deg, #b3e7ff 0%, #e3b3f4 100%);
  --color-black: #4f4f4f;
  --color-black-dark: #1c1c1c;
  --color-grey: #8f8f8f;
  --color-grey-light: #f0f0f0;
  --color-grey-light-2: #d9d9d9;
  --color-red: #ff3030;
  --color-green: #1ce823;
  --color-yellow: #ffc107;
  --aspect-ratio-landscape: 4/3;
  --grid-container-bigger-max-width: 100rem;
  --scaling-base-desktop: 1920;
  --scaling-base-mobile-phones: 425;
  --scaling-base-mobile-tablets: 768;
  --font-min-desktop: 14px;
  --font-max-desktop: 20px;

  --font-min-tablet: 13px;
  --font-max-tablet: 18px;

  --font-min-phone: 12px;
  --font-max-phone: 16px;
}

#overlay {
  background-color: rgba(39, 39, 39, 0.95);
}

body {
  color: var(--color-black);
  position: relative;
}

html[data-no-transition],
html[data-no-transition] *,
html[data-no-transition] *::before,
html[data-no-transition] *::after {
  transition: none !important;
}

body::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background: var(--color-gradient);
  opacity: 0.25;
  z-index: -1;
}

body::after {
  content: "";
  position: fixed;
  height: 100vh;
  width: 100%;
  z-index: 99999999;
  left: 0;
  top: 0;
  background: var(--color-white);
  transition: var(--transition);
  transform-origin: top;
  transform: translateY(100%);
  transition: 500ms;
}

body[data-transitioning-to-onboarding]::after {
  background: var(--color-gradient);
  transform: none;
}

body[data-transitioning] {
  pointer-events: none;
}

body[data-transitioning]::after {
  transform: none;
}

body[data-transitioning][data-transitioning-change-theme]::after {
  background: var(--color-black-dark);
}

body.scroll-block {
  -ms-touch-action: none;
  touch-action: none;
  -webkit-overflow-scrolling: none;
  overflow: hidden;
  overscroll-behavior: none;
}

.grid-container.grid-container--bigger {
  max-width: var(--grid-container-bigger-max-width);
}

img {
  pointer-events: none !important;
}

/* START TOP BAR */

.top-bar {
  padding: 0.75rem 0;
  position: fixed;
  border: solid 0.0625rem transparent;
}

.top-bar .logo-container {
  display: flex;
}

.top-bar .logo-container * {
  height: 2.5rem;
}

.top-bar .logo-container svg * {
  fill: var(--color-black);
}

.top-bar .menu__items {
  display: flex;
  gap: 3rem;
}

.top-bar .menu__items .menu__item {
  display: flex;
  align-items: center;
  position: relative;
}

.top-bar .menu__items .menu__item a {
  position: relative;
}

.top-bar .menu__items .menu__item a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 0.0625rem;
  width: 100%;
  transform-origin: left;
  transition: var(--transition);
  background: var(--color-black);
  transform: scaleX(0);
}

.top-bar .menu__items .menu__item[data-active] a::before {
  transform: none;
  background: var(--color-gradient);
}

.top-bar .menu__items .menu__item[data-active] a {
  background: var(--color-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}

body[data-scrolled] .top-bar {
  background: var(--color-white);
  border-color: var(--color-grey-light);
}

/* END TOP BAR */

/* START TITLES */

.h1 {
  font-family: "Secondary";
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
}

/* END TITLES */

/* START TYPO */

p {
  line-height: 1.75;
}

/* END TYPO */

/* START MODIFICATIONS */

.section--newsletter {
  margin-top: 10vh;
}

.section--newsletter .form .label-virtual-cnt[data-active] .label-virtual {
  opacity: 0;
}

.section--newsletter .input-bar {
  padding: 1rem 1rem 1rem 2rem;
  background: var(--color-grey-light);
}

.section--newsletter .advantages-list {
  list-style-type: none;
}

.section--newsletter .advantages-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section--newsletter .advantages-list li svg {
  height: 1.5rem;
  width: 1.5rem;
  min-height: 1.5rem;
  min-width: 1.5rem;
}

/* START TYPO */

/* END MODIFICATIONS */

/* START FOOTER */

.footer {
  padding: 3rem 0;
}

/* END FOOTER */

/* START SECTION */

.section {
  padding: 10vh 0;
}

.section.section--white {
  background: var(--color-white);
  border-radius: 6.25rem;
}

.section .h1 {
  font-size: 3rem;
}

body.page-secondary .top-bar + .section {
  padding-top: 20vh;
}

body.page-secondary .section h1.h1 {
  font-size: 4rem;
}

/* END SECTION */

@media (min-width: 1023px) {
  .top-bar .menu__items .menu__item a:hover::before {
    transform: none;
  }
}

@media (max-width: 63.9375rem) {
  .top-bar {
    padding: 0.5rem 0;
  }

  .menu {
    visibility: unset;
    opacity: 0;
    z-index: 3;
    padding-top: calc(2 * var(--top-bar-height));
  }

  .menu[data-active] {
    opacity: 1;
  }

  .menu::after {
    content: "";
    position: absolute;
    transition: var(--transition);
    background: var(--color-white);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .menu::before {
    background: var(--color-gradient);
    opacity: 0.25;
    z-index: 2;
  }

  .menu > * {
    z-index: 3;
  }

  .menu .menu__items {
    justify-content: flex-start;
    align-items: center;
    height: auto;
  }

  .menu .menu__items .menu__item {
    justify-content: center;
    font-weight: 700;
    font-family: "Secondary";
    font-size: 1.25rem;
    overflow: hidden;
  }

  .menu .menu__items .menu__item a {
    transform: translateY(100%);
    transition: var(--transition);
    opacity: 0;
  }

  .menu[data-active] .menu__items .menu__item a {
    transform: none;
    opacity: 1;
  }

  .section {
    padding: 7.5vh 0;
  }

  .section.section--white {
    border-radius: 3rem;
  }

  .section .h1 {
    font-size: 1.75rem !important;
  }

  body.page-secondary .top-bar + .section {
    padding-top: 12.5vh;
  }

  .section--newsletter {
    margin-top: 2rem;
  }
}

/* Desktop - Use clamp() to prevent text from becoming too small in split-screen */
@media (min-width: 64rem) {
  html {
    font-size: clamp(var(--font-min-desktop), calc((100vw / var(--scaling-base-desktop)) * 16), var(--font-max-desktop));
  }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 63.9375rem) {
  html {
    font-size: clamp(var(--font-min-tablet), calc((100vw / var(--scaling-base-mobile-tablets)) * 16), var(--font-max-tablet));
  }
}

/* Mobile Phones */
@media (max-width: 767px) {
  html {
    font-size: clamp(var(--font-min-phone), calc((100vw / var(--scaling-base-mobile-phones)) * 16), var(--font-max-phone));
  }
}