@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

.global-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 900px;
  padding-left: 1rem;
  padding-right: 1rem;
}

.nav-link-item.drop-trigger {
  display: flex;
  column-gap: 5px;
  align-items: center;
}

.waitlist-btn {
  transition: background-color 0.3s ease;
  font-weight: 400;
  font-size: 14px;
  line-height: 26px;
  border-radius: 8px;
  padding: 5px 25px;
  color: white;
  box-shadow: inset 0 0 6px 3px rgba(255, 255, 255, 0.25),
    /* Previous blurry shadow */ inset 0 0 0 1px rgba(255, 255, 255, 0.15); /* New inner stroke */
}

.white-border-container {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  border-radius: 12px; /* Rounded corners for the white border */
  padding: 6px; /* This creates the "spacing" between the white border and the button */
  display: flex; /* Helps center the button if needed */
  justify-content: center;
  align-items: center;
  background-color: transparent; /* Ensure background doesn't obscure the button */
}

.white-border-container-whiteBtn {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  border-radius: 12px; /* Rounded corners for the white border */
  padding: 10px; /* This creates the "spacing" between the white border and the button */
  display: flex; /* Helps center the button if needed */
  justify-content: center;
  align-items: center;
  background-color: transparent; /* Ensure background doesn't obscure the button */
}

.menu-block {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  border-radius: 60px; /* Rounded corners for the white border */
  padding: 8px 40px; /* This creates the "spacing" between the white border and the button */
  display: flex; /* Helps center the button if needed */
  justify-content: center;
  align-items: center;
  background-color: transparent; /* Ensure background doesn't obscure the button */
}

.site-header {
  box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.15);
}

h1 {
  /* 1. Set the background to the desired gradient */
  background: linear-gradient(
    to bottom,
    /* Direction */ #ffffff 0%,
    /* Start color (white) */ #b372cf 100% /* End color (purple) */
  );

  /* 2. Clip the background to the text */
  -webkit-background-clip: text;
  background-clip: text;

  /* 3. Make the text color transparent so the background shows through */
  color: transparent;

  /* Optional: for better display */
  font-size: 70px;
  line-height: 84px;
  /* letter-spacing: -5.06%; */
  font-family: "Inter", sans-serif;
}

/* .linear-gradient {
  background-image: linear-gradient(to bottom, #000000 0%, #371866 100%),
    url("/assets/img/App-Wide.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
} */

.linear-gradient {
  background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(55, 24, 102, 0.7) 100%
    ),
    url("/assets/img/App-Wide.png");
  background-size: 500px auto;
  background-position: center;
  background-repeat: no-repeat;
  margin: auto;
}

.linear-gradient-bg {
  background: linear-gradient(to bottom right, #190d2e 0%, #020103 100%);
}

/* .bg-gradient {
  background: linear-gradient(to bottom, #141315 0%, #0d0b15 40%, #020103 100%);
  position: relative;
  overflow: hidden;
} */

/* .background-direct {
  background: radial-gradient(
    circle,
    #56299d 0%,
    #56299d 0%,
    #020103 100%,
    #020103 100%
  );
} */

.background-direct {
  /* background: radial-gradient(
    circle at center,
    rgba(140, 69, 255, 0.25) 0%,
    rgba(2, 1, 3, 0.95) 100%
  ); */
  background: linear-gradient(
      to bottom,
      #010002 0%,
      rgba(54, 23, 100, 0.9) 100%
    ),
    url("/assets/img/pattern.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 0 800px rgba(140, 69, 255, 0.5);
  /* box-shadow: 0px 10px 74px 10px rgba(78, 0, 191, 0.41); */
  /* background: linear-gradient(to bottom, #010002 0%, #361764 100%); */
}
ul li:hover {
  color: white;
  cursor: pointer;
  transition: all 0.5s ease;
}

@media (max-width: 820px) {
  h1 {
    font-size: 52px;
    line-height: 64px;
  }
  .global-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 760px;
    padding-left: 0px;
    padding-right: 0px;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 40px;
    line-height: 52px;
  }

  .global-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 350px;
    padding-left: 0px;
    padding-right: 0px;
  }
}

/* base hidden state */
.hidden-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* fade in up */
.fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* fade in left */
.fade-in-left {
  animation: fadeInLeft 0.8s ease-out forwards;
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* zoom in */
.zoom-in {
  animation: zoomIn 0.8s ease-out forwards;
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}