/*#region fonts*/
@font-face {
  font-family: 'Geist';
  src: url('/src/assets/fonts/geist/GeistVF.ttf') format('truetype-variations');
  font-weight: 100 950;
}
/*#region fonts*/
@font-face {
  font-family: 'Outfit';
  src: url('/src/assets/fonts/outfit/Outfit-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 950;
}

/*#endregion fonts*/
:root {
  --black-text-color: #020c00;
  --white-text-color: #ffffff;
  --info-text-color: #545b61;
  --accent5-color: #d8d0ff;
  --accent6-color: #1a0090;
  --accent7-color: #060131;
  --accent-danger-color: #ffe7e4;
  --accent-success-color: #eafae5;
  /* Fonts */
  --font-geist-sans: "Geist";
  --font-outfit-sans: "Outfit";
  --font-group-primary: var(--font-outfit-sans), "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --font-group-secondary: var(--font-geist-sans), "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --font-group-tetiary: var(--font-geist-sans), -apple-system, BlinkMacSystemFont, "Inter UI", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  /* Card */
  --card-box-shadow: 0 3px 7px rgba(29, 36, 41, 0.18);
  /* Shimmer */
  --shimmer-background-size: 200% auto;
  --shimmer-animation: shimmerAnimation 1.5s infinite;
  /* Elevation */
  --effect-elevation-4dp: 0px 2px 4px var(--color-neutral-darken-600), 0px 8px 24px var(--color-neutral-darken-600), inset 0px 0px 0px 1px var(--color-border-default-alpha), inset 0px 1px 0px var(--color-border-default-alpha);
  --effect-elevation-3dp: 0px 1px 2px var(--color-neutral-darken-800), 0px 6px 12px var(--color-neutral-darken-800), inset 0px 0px 0px 1px var(--color-border-default-alpha), inset 0px 1px 0px var(--color-border-default-alpha);
  --effect-elevation-2dp: 0px 1px 1px var(--color-neutral-darken-800), 0px 4px 10px -2px var(--color-neutral-darken-800), inset 0px 0px 0px 1px var(--color-border-default-alpha), inset 0px 1px 0px var(--color-border-default-alpha);
  --effect-elevation-1dp: 0px 2px 12px -6px var(--color-neutral-darken-900), inset 0px 0px 0px 1px var(--color-border-default-alpha), inset 0px 1px 0px 0px var(--color-border-default-alpha);
  --effect-elevation-inset-1dp: inset 0px 1px 0px var(--color-neutral-lighten-800), inset 0px 0px 1px var(--color-neutral-darken-300), inset 0px 1px 4px var(--color-neutral-darken-200);
  --effect-border-left: inset 1px 0px 0px var(--color-border-default-alpha);
  --effect-border-top: inset 0px 1px 0px var(--color-border-default-alpha);
  --effect-border-right: inset -1px 0px 0px var(--color-border-default-alpha);
  --effect-border-bottom: inset 0px -1px 0px var(--color-border-default-alpha);

  --ease: cubic-bezier(.22, .6, .36, 1);
  --ease2: cubic-bezier(.87, 0, .13, 1);
  --color-dotted-pattern:#b0b0b0;
  --color-dotted-mask:#b0b0b0;
  --color-link-hover:#96c085;
}

html {
  position: relative;
  min-height: 100%;
  font-size: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background-color: black;
}

body {

  color: var(--primary-text-color);
  font-family: var(--font-group-primary);
  font-size: 16px;
  font-weight: normal;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-font-feature-settings: "kern" 1;
  -moz-font-feature-settings: "kern" 1;
  margin: 0px;
  background-color: var(--bg-color-primary);
}

menu,
ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
button{
  font-family: var(--font-outfit-sans);
  cursor: pointer;
}
button:hover{
  background-color: var(--button-default-hover-color);
}
a{
  text-decoration: none;
  color:#000;
  cursor: pointer;
    transition: .4s;
}


.hidden{
  display: none !important;
}

.bg-black{
  background-color: #000;
  color:#fdfdfd
}
.bg-black a{
  color:#fdfdfd
}

.bg-white{
  background-color: #FFF;
  color:#2c2c2c
}

@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translateY(20px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(-10px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes image-glow {
  0% {
    content: "";
    opacity: 0;
    animation-timing-function: cubic-bezier(.74, .25, .76, 1)
  }

  10% {
    content: "";
    opacity: .7;
    animation-timing-function: cubic-bezier(.12, .01, .08, .99)
  }

  to {
    content: "";
    opacity: .4
  }
}

@keyframes shimmer {

  0%,
  90%,
  to {
    background-position: calc(-100% - 100px) 0
  }

  30%,
  60% {
    background-position: calc(100% + 100px) 0
  }
}


.animate {
  animation-delay: 0.4s;
  animation-direction: normal;
  animation-duration: 1s;
  animation-iteration-count: 1;
}

.animate.fadein {
  animation-direction: normal;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-name: fade-in;
  animation-play-state: running;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: backwards;
}

.animate.fadeup {
  animation-direction: normal;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-name: fade-up;
  animation-play-state: running;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: backwards;
}

.animate.delay-1 {
  animation-delay: 0.4s !important;
}

.animate.delay-2 {
  animation-delay: 0.6s !important;
}

.animate.delay-3 {
  animation-delay: 0.8s !important;
}
.animate.delay-4 {
  animation-delay: 1.2s !important;
}

.hero-section {
  max-width: 100%;
  height: 100dvh;
  position: relative;
}

.hero-section .logo-container
  {
    position: absolute;
    top: 30%;
    width: 100%;
    z-index: 10;
}

@media (max-width:31.25em) {

  .hero-section .logo-container
  {
    top: 40%;
}
}
.hero-section .logo{
  position: relative;
  display: flex;
  justify-content: center;
}

.hero-section .logo svg{
  width: 80%;
  max-width: 1200px;
  fill: #ededed;
    
}

.hero-text-container {
  position: absolute;
  display: flex;
  justify-content: center;
  bottom: 10dvh;
  z-index: 10;
  width: 100%;
  padding-bottom: 2rem;
}

.hero-text {
  margin: 0 5rem;
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 3rem;
  font-weight: 500;
}

.main-title {
  font-size: 3.5rem;
  font-weight: 600;
  letter-spacing: clamp(-2.4px, -1px - 0.1vw, -0.96px);
  padding-bottom: 10px;
  color: rgba(0, 0, 0, 0);
  background-clip: text;
  background-image: linear-gradient(to right bottom, rgb(0,0,0) 30%, rgba(0,0,0, 0.4));
  margin: 0;
  flex:1 0 0;
}


.title {
  font-size: 68px;
  font-weight: 600;
  letter-spacing: clamp(-2.4px, calc(-1px - .1vw), -.96px);

  color: rgba(0, 0, 0, 0);
  background-clip: text;
  background-image: linear-gradient(to right bottom, rgb(0,0,0) 30%, rgba(0,0,0, 0.4));
}



.title-subtext {
  box-sizing: border-box;
  display: block;
  margin-bottom: 48px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  text-size-adjust: 100%;
  font-family: __Inter_aaf875, __Inter_Fallback_aaf875, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-feature-settings: normal;
  font-size: 1.5rem;
  font-variation-settings: normal;
  letter-spacing: -0.5px;
  line-height: 28px;
  tab-size: 4;
  text-align: center;
  text-wrap: balance;
  color: #f2f2f2;
  transform: matrix(1, 0, 0, 1, 0, 0);
  unicode-bidi: isolate;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.hero-text .title-subtext {
  color: #f2f2f2b3;
  flex: 1 0 0;
  margin: 0;
  padding: 1rem 0;
}

.hero-image-container {
  height: 100%;
  position: relative;
  display: block;
  text-align: center;
  animation: fade-up 1s ease 0.8s backwards;
  opacity: 1;
  perspective: 2000px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}



.hero-image-container::before {
  background-image: linear-gradient(#020c0000, #020c0005 7%, #020c000f 14%, #020c0026 26%, #020c00);
  width: 100%;
  height: 50%;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  z-index: -1;
}

.hero-image-container::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 76%, rgb(2 12 0) 100%);
  z-index: 5;
}

.hero-image-container .hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -5;
  position: relative;
}




.mx-auto {
  margin: 0 auto;
}