:root {
  --primary-dark: #9E0000;
  --primary-darker: #B60E00;
  --primary-darkest: #7E031A;
  --primary-black: #710317;
  --primary-blackest: #5A0010;
  --primary: #DE1200;

  --primary-light: #FF3719;

  --dark: #000;
  --dark-lighter: #1E1E1E;

  --medium: #444444;

  --light: #FFF;
  --light-100: #EDEDED;
  --light-700: #686868;
  --light-900: #F2F2F2;

  --border-radius-lg: 12px;
  --border-radius-sm: 5px;
  --border-color: #ccc;

  --hero-startup-animation-duration: 3s;
  --hero-content-delay: 2s;

  --padding: min(125px, 10vw);
}

svg {
  outline: none;
}

html,
body {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  background-color: var(--light);
  position: relative;
  font-size: 17px;
  line-height: 22px;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

.vw-100 {
  width: min(100svw, 100vw);
}

.vh-100 {
  height: min(100svh, 100vh);
}

.transition {
  -webkit-transition: all 0.225s ease;
  -moz-transition: all 0.225s ease;
  -ms-transition: all 0.225s ease;
  -o-transition: all 0.225s ease;
  transition: all 0.225s ease;
}

.constrained {
  width: 100%;
  max-width: calc(min(100%, 1366px) - var(--padding) * 2);
}

.constrained-padding,
.constrained {
  padding: 0 var(--padding);
}

.hidden {
  display: none !important;
}

.flex,
.flex-column {
  display: flex;
}

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

.gap-xxl {
  gap: 148px;
}

.gap-xl {
  gap: 96px;
}

.gap-l {
  gap: 64px;
}

.gap {
  gap: 32px;
}

.gap-m {
  gap: 20px;
}

.gap-s {
  gap: 10px;
}

.gap-xs {
  gap: 4px;
}

.gap-accent {
  gap: 15px;
}

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

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

.end-h {
  align-items: flex-end;
}

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

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

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.wrap {
  flex-wrap: wrap;
}

.m-none {
  margin: 0;
}

.p-none {
  padding: 0;
}


@media screen and (max-width: 768px) {
  .constrained {
    --padding: min(28px, 10vw);
  }

  .desktop {
    display: none !important;
  }

  .flex-column-mobile {
    flex-direction: column !important;
  }
}

@media screen and (min-width: 769px) {
  .mobile {
    display: none !important;
  }
}


@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: 0ms !important;
    animation-duration: 0ms !important;
  }
}