/*
0 - 600px:      Phone
600 - 900px:    Tablet portrait
900 - 1200px:   Tablet landscape
[1200 - 1800] is where our normal styles apply
1800px + :      Big desktop

$breakpoint arguement choices:
- phone
- tab-port
- tab-land
- big-desktop

ORDER: Base + typography > general layout + grid > page layout > components

1em = 16px
*/
@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10rem);
  }
  80% {
    transform: translateX(1rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(10rem);
  }
  80% {
    transform: translateX(-1rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@keyframes moveInBottom {
  0% {
    opacity: 0;
    transform: translateY(3rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

/* Overlay animation */
@keyframes overlayMove {
  0% {
    background: linear-gradient(
      to left,
      rgba(0, 0, 0, 0.925),
      rgba(0, 0, 0, 0.445) 80%
    );
  }
  100% {
    background: linear-gradient(
      to left,
      rgba(0, 0, 0, 0.925),
      rgba(0, 0, 0, 0.445) 50%
    );
  }
}

/* Keyframes for fade-in and slide-up animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(300px);
  }
  to {
    transform: translateY(0);
  }
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #fff;
  border-radius: 100px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #fff;
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.664);
}

html {
  font-size: 62.5%;
  background-color: #000;
  scroll-behavior: smooth;
  cursor: url("../Images/Cursor White.svg"), auto;
}
@media only screen and (max-width: 75em) {
  html {
    font-size: 56.25%;
  }
}
@media only screen and (max-width: 56.25em) {
  html {
    font-size: 50%;
  }
}
@media only screen and (min-width: 112.5em) {
  html {
    font-size: 75%;
  }
}

::selection {
  background-color: #000;
  color: #fff;
}

@font-face {
  font-family: "Nebula-regular";
  src: url("/Fonts/Nebula-Regular.ttf");
}

@font-face {
  font-family: "SpaceGrotesk-Regular";
  src: url("/Fonts/SpaceGrotesk-Regular.ttf");
}

@font-face {
  font-family: "SpaceGrotesk-Light";
  src: url("/Fonts/SpaceGrotesk-Light.ttf");
}

@font-face {
  font-family: "WhyteInktrap-Regular";
  src: url("/Fonts/WhyteInktrap-Regular.ttf");
}

@font-face {
  font-family: "WhyteInktrap-Heavy";
  src: url("/Fonts/WhyteInktrap-Heavy.ttf");
}

@font-face {
  font-family: "WhyteInktrap-Light";
  src: url("/Fonts/WhyteInktrap-Light.ttf");
}

.pc-nav a {
  font-size: 2.1rem;
  color: #7e7e7e;
  margin-bottom: 3.2rem;
  cursor: pointer;
  font-family: "WhyteInktrap-Regular";
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
  text-transform: uppercase;
  padding-right: 2.6rem;
  padding-left: 2rem;
}
.pc-nav a:last-child {
  padding-right: 0;
}
.pc-nav a:hover {
  font-size: 3.6rem;
  font-family: "WhyteInktrap-Heavy";
  color: #fff;
  cursor: url("/Images/Cursor White (Hover).svg"), pointer;
}
@media only screen and (max-width: 37.5em) {
  .pc-nav a:hover {
    font-size: 4.5rem;
  }
}
.pc-nav a.active {
  font-size: 3.6rem;
  font-family: "WhyteInktrap-Heavy";
  color: #fff;
}
.pc-nav a.active::before {
  content: "";
  position: absolute;
  right: 0;
  /* Adjust position of the logo */
  top: 15px;
  width: 20px;
  /* Adjust the size of the logo */
  height: 20px;
  /* Adjust the size of the logo */
  background-image: url("/Images/blocknads-logo.png");
  /* Replace with the path to your logo */
  background-size: 15px;
  background-repeat: no-repeat;
}
@media only screen and (max-width: 37.5em) {
  .pc-nav a.active::before {
    top: -4px;
    right: -10px;
    background-size: 15px;
  }
}
@media only screen and (max-width: 37.5em) {
  .pc-nav a.active {
    font-size: 4rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .pc-nav a {
    margin-left: 5rem;
    margin-bottom: 8rem;
    font-size: 3rem;
  }
}

.text-center {
  text-align: center;
}

.header-text {
  color: #fff;
  padding-top: 6.4rem;
  padding-bottom: 2rem;
  font-size: 9.6rem;
  font-family: "WhyteInktrap-Heavy";
  font-style: normal;
  font-weight: 400;
  -webkit-text-stroke-width: 5;
  -webkit-text-stroke-color: #000;
}
@media only screen and (max-width: 37.5em) {
  .header-text {
    font-size: 2rem;
  }
}
.header-text:nth-child(4) {
  padding-top: 18rem;
}
@media only screen and (max-width: 37.5em) {
  .header-text {
    font-size: 4.8rem;
  }
}

.sub-text {
  font-size: 2.4rem;
  color: #fff;
  padding: 0 11.3rem;
  font-family: "SpaceGrotesk-Regular";
  font-weight: 100;
  text-align: center;
}

.hero-text {
  font-family: "SpaceGrotesk-Light";
  font-size: 2rem;
  color: #fff;
  margin-left: 8rem;
}
@media only screen and (max-width: 37.5em) {
  .hero-text br {
    display: none;
  }
}
@media only screen and (max-width: 37.5em) {
  .hero-text {
    font-family: "SpaceGrotesk-Regular";
    margin-left: 0rem;
    font-size: 1.6rem;
    padding-top: 5rem;
    padding-bottom: 4rem;
    line-height: 1.8;
    width: 90%;
  }
}

.hero-tenets__exclusivity,
.hero-tenets__exploration,
.hero-tenets__defiance {
  font-size: 12.8rem;
  color: #fff;
  font-family: "WhyteInktrap-Heavy";
  text-transform: uppercase;
}
.hero-tenets__exclusivity span,
.hero-tenets__exploration span,
.hero-tenets__defiance span {
  font-size: 1rem;
}
@media only screen and (max-width: 56.25em) {
  .hero-tenets__exclusivity,
  .hero-tenets__exploration,
  .hero-tenets__defiance {
    font-size: 7rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .hero-tenets__exclusivity,
  .hero-tenets__exploration,
  .hero-tenets__defiance {
    font-size: 9vw;
  }
}

.unique-collectibles__header {
  color: #000;
  padding-top: 11rem;
  margin-left: 4.6rem;
  font-size: 9.6rem;
  font-size: 9.6rem;
  font-family: "WhyteInktrap-Heavy";
  font-style: normal;
  font-weight: 400;
}
@media only screen and (max-width: 37.5em) {
  .unique-collectibles__header {
    font-size: 2rem;
  }
}
.unique-collectibles__header_1 {
  color: #000;
  margin-top: 1rem;
  margin-right: 4.6rem;
  font-size: 9.6rem;
  margin-bottom: -2rem;
  font-size: 9.6rem;
  font-family: "WhyteInktrap-Heavy";
  font-style: normal;
  font-weight: 400;
  text-align: end;
}
@media only screen and (max-width: 37.5em) {
  .unique-collectibles__header_1 {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .unique-collectibles__header_1 {
    font-size: 7vw;
    margin-right: 5rem;
    margin-top: 1rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .unique-collectibles__header {
    font-size: 7vw;
    padding-top: 2.5rem;
    padding-bottom: 1.5rem;
    margin-left: 5rem;
  }
}

.unique-generation__text {
  font-size: 1.5rem;
  font-family: "SpaceGrotesk-Regular";
  padding-bottom: 3rem;
}
@media only screen and (max-width: 37.5em) {
  .unique-generation__text {
    font-size: 1.4rem;
    padding-bottom: 1rem;
  }
}

.fun-fact {
  font-size: 2.2rem;
  font-family: "SpaceGrotesk-Regular";
  color: #000;
  padding-bottom: 3rem;
}
@media only screen and (max-width: 56.25em) {
  .fun-fact {
    font-size: 1.45rem;
    padding-bottom: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .fun-fact {
    font-size: 1.45rem;
    padding-bottom: 0.6rem;
    padding-right: 2.5rem;
    line-height: 1.1;
  }
}

.factions-header {
  padding-bottom: 6rem;
}

.team-header {
  margin-top: 40rem;
  padding-bottom: 11rem;
}

.team-name {
  color: #000;
  -webkit-text-stroke-width: 0.5;
  -webkit-text-stroke-color: #000;
  font-family: "WhyteInktrap-Heavy";
  font-size: 2.45rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding-top: 7rem;
  padding-left: 3.5rem;
  text-transform: uppercase;
}

.team-title {
  font-size: 1.22rem;
  font-family: "SpaceGrotesk-Regular";
  font-weight: 400;
  padding-left: 3.5rem;
  padding-bottom: 4rem;
}

.footer__hero {
  color: #fff;
  font-size: 5rem;
  transform: skew(120deg, 10deg);
}

/* Modal background */
.modall {
  display: none;
  /* Hidden by default */
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.993);
  /* Black background with transparency */
  overflow: auto;
  animation: fadeIn 0.5s ease;
  /* Modal fade-in effect */
  z-index: 10000;
  /* Modal content */
}
@media only screen and (max-width: 37.5em) {
  .modall {
    background: rgba(0, 0, 0, 0.651);
    backdrop-filter: blur(4rem);
    -webkit-backdrop-filter: blur(4rem);
  }
  @supports (backdrop-filter: blur(1rem)) {
    .modall .modall {
      background: rgba(0, 0, 0, 0.651);
      backdrop-filter: blur(4rem);
      -webkit-backdrop-filter: blur(4rem);
    }
  }
}
.modall-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.modall-content {
  background: url("/Images/modal-bg.png") no-repeat center;
  /* Your PNG image */
  background-size: 113.6rem 74rem;
  margin: auto;
  padding: 20px;
  height: 74rem;
  max-width: 113.6rem;
  position: relative;
  /* Clip modal to the shape of PNG (adjust the path to match your image) */
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  animation: fadeIn 0.5s ease, slideUp 0.5s ease;
  /* Slide and fade in animation */
}
@media only screen and (max-width: 37.5em) {
  .modall-content {
    background: url("/Images/modal-bg-mobile.png") no-repeat center;
  }
}

/* Close button */
.closeModal {
  position: absolute;
  top: 8rem;
  right: 11rem;
  cursor: url("/Images/Cursor White (Hover).svg"), pointer;
  color: black;
}
.closeModal svg {
  cursor: url("/Images/Cursor White (Hover).svg"), pointer;
}
@media only screen and (max-width: 37.5em) {
  .closeModal svg {
    width: 3rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .closeModal {
    top: 10rem;
    right: 1rem;
    width: 11rem;
  }
}

.closeModal {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.close-modal-button svg .icon-fill {
  transition: fill 0.3s ease;
}

.close-modal-button:hover svg .icon-fill {
  fill: red;
  /* Change to the desired fill color */
}

.modal-box {
  display: flex;
}
.modal-box img {
  padding-top: 17rem;
  padding-right: 18rem;
  width: 33.9rem;
}
@media only screen and (max-width: 37.5em) {
  .modal-box img {
    padding-top: 5rem;
    padding-left: 8rem;
    width: 20rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .modal-box {
    flex-direction: column;
  }
}

.popup-border {
  padding-top: 16rem;
  padding-left: 8rem;
}
@media only screen and (max-width: 37.5em) {
  .popup-border {
    padding-top: 15rem;
  }
}

.popup-border h6 {
  font-size: 6.4rem;
  font-weight: bold;
  font-family: "WhyteInktrap-Heavy";
  color: #fff;
  margin-bottom: 3rem;
  text-transform: uppercase;
}
@media only screen and (max-width: 37.5em) {
  .popup-border h6 br {
    display: none;
  }
}
@media only screen and (max-width: 37.5em) {
  .popup-border h6 {
    font-size: 3rem;
  }
}

.popup-border p {
  font-size: 2rem;
  font-family: "SpaceGrotesk-Light";
  font-weight: 100;
  width: 90%;
  color: #fff;
}
@media only screen and (max-width: 37.5em) {
  .popup-border p {
    font-size: 1.2rem;
    width: 75%;
  }
}

.footer {
  background: url(/Images/footer-bg.svg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 55rem;
  width: 122rem;
  margin-top: 40rem;
  overflow: hidden;
}
@media only screen and (max-width: 37.5em) {
  .footer {
    width: 100%;
    margin-top: 25rem;
    height: fit-content;
  }
}
@media only screen and (max-width: 56.25em) {
  .footer {
    width: 100%;
    height: fit-content;
  }
}
.footer__top {
  display: flex;
  justify-content: space-between;
}
.footer__top-links {
  display: flex;
  flex-direction: column;
  padding-top: 12rem;
  padding-left: 5rem;
  padding-bottom: 2rem;
}
@media only screen and (max-width: 37.5em) {
  .footer__top-links {
    padding-left: 2rem;
  }
}
.footer__top-links a {
  font-size: 2.4rem;
  font-family: "WhyteInktrap-Regular";
  margin-bottom: 2rem;
  text-decoration: none;
  color: #000;
  cursor: url("/Images/Cursor White (Hover).svg"), pointer;
}
.footer__top-links a:hover {
  text-decoration: underline;
}
@media only screen and (max-width: 37.5em) {
  .footer__top-links a {
    font-size: 1.6rem;
  }
}
.footer img {
  width: 100%;
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
}
.footer__bottom-links {
  padding-top: 6rem;
  padding-left: 5rem;
}
@media only screen and (max-width: 37.5em) {
  .footer__bottom-links {
    padding-left: 1rem;
    padding-top: 2rem;
  }
}
.footer__bottom-links a {
  font-size: 1.6rem;
  margin-right: 3rem;
  cursor: url("/Images/Cursor White (Hover).svg"), pointer;
}
@media only screen and (max-width: 37.5em) {
  .footer__bottom-links a {
    font-size: 1.2rem;
    margin-right: 1.5rem;
  }
}
.footer__bottom-license {
  display: flex;
  padding-top: 6rem;
  padding-right: 4rem;
  font-size: 1.6rem;
  text-transform: uppercase;
  font-family: "SpaceGrotesk-Regular";
}
@media only screen and (max-width: 37.5em) {
  .footer__bottom-license {
    padding-right: 1rem;
    padding-top: 2rem;
    font-size: 1.2rem;
  }
}
.footer__bottom-license a {
  margin-right: 5px;
  text-decoration: none;
  color: #000;
  cursor: url("/Images/Cursor White (Hover).svg"), pointer;
}

.svg-button {
  background: none;
  border: none;
  cursor: url("/Images/Cursor White (Hover).svg"), pointer;
  padding: 0;
  outline: none;
  height: fit-content;
  margin-top: 13rem;
  margin-right: 5rem;
}
.svg-button text {
  font-size: 1.5rem;
  font-family: "WhyteInktrap-Regular";
}
@media only screen and (max-width: 37.5em) {
  .svg-button text {
    font-size: 2.5rem;
  }
}
.svg-button svg:hover {
  fill: black;
}
.svg-button svg:hover text {
  fill: #fff;
}
@media only screen and (max-width: 37.5em) {
  .svg-button svg {
    width: 50%;
  }
}
@media only screen and (max-width: 37.5em) {
  .svg-button {
    margin-right: -7rem;
    margin-top: 10rem;
  }
}

.row {
  max-width: 114rem;
  margin: 0 auto;
}
.row:not(:last-child) {
  margin-bottom: 8rem;
}
@media only screen and (max-width: 56.25em) {
  .row:not(:last-child) {
    margin-bottom: 6rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .row {
    max-width: 50rem;
    padding: 0 3rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .row {
    margin: 0 auto !important;
    display: flex;
    flex-direction: column;
  }
}
.row::after {
  content: "";
  display: table;
  clear: both;
}
.row [class^="col-"] {
  float: left;
}
.row [class^="col-"]:not(:last-child) {
  margin-right: 6rem;
}
@media only screen and (max-width: 56.25em) {
  .row [class^="col-"]:not(:last-child) {
    margin-right: 0;
    margin-bottom: 6rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .row [class^="col-"] {
    width: 100% !important;
  }
}
.row .col-1-of-2 {
  width: calc((100% - 6rem) / 2);
}
.row .col-1-of-3 {
  width: calc((100% - 2 * 6rem) / 3);
}
.row .col-2-of-3 {
  width: calc(2 * ((100% - 2 * 6rem) / 3) + 6rem);
}
.row .col-1-of-4 {
  width: calc((100% - 3 * 6rem) / 4);
}
.row .col-2-of-4 {
  width: calc(2 * ((100% - 3 * 6rem) / 4) + 6rem);
}
.row .col-3-of-4 {
  width: calc(3 * ((100% - 3 * 6rem) / 4) + 2 * 6rem);
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: fixed;
  z-index: 1000;
}
@media only screen and (max-width: 37.5em) {
  .nav {
    height: 7vh;
    background: #000;
  }
  @supports (backdrop-filter: blur(1rem)) {
    .nav .nav {
      background: rgba(0, 0, 0, 0.562);
      backdrop-filter: blur(4rem);
    }
  }
}

.pc-nav {
  position: absolute;
  background-color: #000;
  z-index: 50;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 13rem;
}
@media only screen and (max-width: 37.5em) {
  .pc-nav {
    right: 0%;
    height: 100vh;
    width: 100%;
    top: 0vh;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transform: translateX(100%);
    transition: transform 350ms ease-out;
    justify-content: flex-start;
    padding-left: 10rem !important;
  }
}

.nav-active {
  transform: translateX(0%);
}

.toggle .line1 {
  transform: rotate(-45deg) translate(-5px, 5px);
  width: 35px !important;
}

.toggle .line2 {
  opacity: 0;
}

.toggle .line3 {
  transform: rotate(45deg) translate(-5px, -12px);
  width: 35px !important;
}

.logo img {
  display: none;
}
@media only screen and (max-width: 37.5em) {
  .logo img {
    display: block;
    padding-left: 3rem;
    padding-top: 1.5rem;
  }
}

@supports (backdrop-filter: blur(1rem)) {
  .pc-nav {
    background: rgba(0, 0, 0, 0.562);
    backdrop-filter: blur(4rem);
  }
}

.burger {
  display: none;
  z-index: 100;
}
@media only screen and (max-width: 37.5em) {
  .burger {
    display: block;
    margin-top: 1.5rem;
    margin-right: 3rem;
  }
}

.burger div {
  background-color: #fff;
  height: 2px;
  width: 45px;
  margin: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.line1 {
  width: 33px !important;
  margin-left: 20px !important;
}

.line3 {
  width: 25px !important;
  margin-left: 15px !important;
}

#preloader {
  height: 100vh;
  background: black url(/Images/blocknads-loader.gif) no-repeat center center;
  background-size: 40%;
  width: 100%;
  position: fixed;
  z-index: 2000000;
}

.homepage-body {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
}
@media only screen and (max-width: 37.5em) {
  .homepage-body {
    width: 100%;
  }
}
.homepage-body__nav {
  display: flex;
}
.homepage-body__content {
  width: 122rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.left-panel {
  background: #222;
  width: 11.2rem;
  height: 100vh;
  position: fixed;
  z-index: 1500;
  margin-left: -133.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.left-panel img {
  width: 5.4rem;
  margin-top: 6.75rem;
}
.left-panel a {
  cursor: url("/Images/Cursor White (Hover).svg"), pointer;
}
.left-panel span {
  padding-top: 4.5rem;
  margin-top: auto;
  width: 100%;
  border-top: 1px solid #fff;
}
.left-panel i {
  font-size: 5rem;
  margin-top: auto;
  color: #fff;
  margin-bottom: 7rem;
  position: relative;
}
.left-panel i ::before {
  content: "";
  position: absolute;
  top: -3rem;
  /* Position the line above the icon */
  left: -3rem;
  width: 11rem;
  /* Make the line span the width of the icon */
  height: 0.5px;
  /* Line thickness */
  background-color: #bfbfbf;
  /* Line color */
}
@media only screen and (max-width: 37.5em) {
  .left-panel {
    display: none;
  }
}
@media only screen and (max-width: 56.25em) {
  .left-panel {
    display: none;
  }
}

.right-panel {
  background: #222;
  width: 11.2rem;
  height: 100vh;
  position: fixed;
  z-index: 1500;
  margin-right: -133.2rem;
}
@media only screen and (max-width: 37.5em) {
  .right-panel {
    display: none;
  }
}
@media only screen and (max-width: 56.25em) {
  .right-panel {
    display: none;
  }
}

.hero {
  display: flex;
  align-items: flex-end;
  margin-top: 22.6rem;
  margin-bottom: 22.6rem;
  justify-content: center;
}
.hero-gif-div {
  position: relative;
  width: 36.3rem;
}
.hero-gif {
  width: 36.3rem;
  object-fit: cover;
}
.hero-gif-ov {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}
@media only screen and (max-width: 37.5em) {
  .hero {
    flex-direction: column-reverse;
    margin-top: 15rem;
    margin-bottom: 15rem;
    align-items: center;
  }
}

.hero-tenets {
  position: relative;
  height: 42rem;
  margin-bottom: 42.4rem;
}
@media only screen and (max-width: 37.5em) {
  .hero-tenets {
    margin-bottom: 8rem;
    height: 30rem;
  }
}
.hero-tenets__exclusivity,
.hero-tenets__exploration,
.hero-tenets__defiance {
  position: absolute;
}
.hero-tenets__exclusivity {
  right: 4.5rem;
  animation: moveInLeft 1.5s ease-out;
}
.hero-tenets__exclusivity span {
  top: 12.5rem;
  right: 1rem;
  position: absolute;
}
@media only screen and (max-width: 37.5em) {
  .hero-tenets__exclusivity span {
    top: 5rem;
    right: 0.12rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .hero-tenets__exclusivity {
    right: 4rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .hero-tenets__exclusivity {
    right: 3rem;
  }
}
.hero-tenets__exploration {
  top: 15rem;
  right: 12rem;
  animation: moveInRight 1.5s ease-out;
}
.hero-tenets__exploration span {
  top: 12.5rem;
  left: 0rem;
  position: absolute;
}
@media only screen and (max-width: 37.5em) {
  .hero-tenets__exploration span {
    top: 5rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .hero-tenets__exploration {
    right: 10rem;
    top: 10rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .hero-tenets__exploration {
    right: 9rem;
  }
}
.hero-tenets__defiance {
  top: 30rem;
  right: 4.5rem;
  animation: moveInLeft 1.5s ease-out;
}
.hero-tenets__defiance span {
  top: 12.5rem;
  right: 1rem;
  position: absolute;
}
@media only screen and (max-width: 37.5em) {
  .hero-tenets__defiance span {
    top: 5rem;
    right: 0.12rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .hero-tenets__defiance {
    right: 4rem;
    top: 20rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .hero-tenets__defiance {
    right: 3rem;
  }
}

.containerr {
  width: 100%;
  box-sizing: border-box;
}

.background-shape {
  width: 107.2rem;
  height: 0;
  padding-bottom: calc(1184 / 1138 * 100%);
  /* Aspect ratio calculation */
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1138" height="1185" viewBox="0 0 1138 1185" fill="none"%3E%3Cpath d="M1135.28 49.3372L1109.75 42.4982L1125.84 63.4589L1120.55 67.5194L1104.46 46.5537V72.9865H1097.8V49.1775L1085.9 69.7941L1080.12 66.4569L1093.34 43.5707L1068.92 53.6819L1066.37 47.5264L1090.78 37.4152L1065.25 30.5713L1066.98 24.1364L1092.51 30.9803L1076.42 10.0047L1081.71 5.95424L1097.8 26.9199V0.487061H1104.46V24.296L1116.37 3.67956L1122.14 7.01175L1108.93 29.8979L1133.34 19.7817L1135.89 25.9422L1111.48 36.0584L1137 42.8973L1135.28 49.3372Z" fill="white"/%3E%3Cpath d="M0 55.1493V773.914C0 788.275 5.705 802.048 15.86 812.203C26.0149 822.358 39.788 828.063 54.1493 828.063H267.844C282.206 828.063 295.979 833.768 306.134 843.923C316.289 854.078 321.994 867.851 321.994 882.212V1130.12C321.994 1144.48 327.699 1158.26 337.854 1168.41C348.009 1178.57 361.782 1184.27 376.143 1184.27H1082.99C1097.35 1184.27 1111.12 1178.57 1121.28 1168.41C1131.43 1158.26 1137.14 1144.48 1137.14 1130.12V146.036C1137.14 131.674 1131.43 117.901 1121.28 107.746C1111.12 97.5912 1097.35 91.8862 1082.99 91.8862C1077.91 91.8862 1072.88 90.8856 1068.18 88.9415C1063.49 86.9974 1059.23 84.1479 1055.64 80.5557C1052.04 76.9636 1049.2 72.6992 1047.25 68.006C1045.31 63.3128 1044.31 58.2828 1044.31 53.2033C1044.31 46.3468 1042.96 39.5576 1040.33 33.2234C1037.71 26.8892 1033.86 21.134 1029.01 16.2865C1024.16 11.439 1018.41 7.59401 1012.07 4.97115C1005.74 2.34829 998.948 0.99889 992.091 1H54.1493C39.788 1 26.0149 6.705 15.86 16.86C5.705 27.0149 0 40.788 0 55.1493Z" fill="white"/%3E%3Cpath d="M145.746 1183.76L243.062 1127.57L139.264 1067.65L97.3155 1067.66L0 1123.85L103.803 1183.78L145.746 1183.76ZM124.802 1171.74L55.7816 1131.89L55.8017 1115.76L118.27 1079.69L187.275 1119.53L187.27 1135.68L124.802 1171.74Z" fill="%23262626"/%3E%3Cpath d="M145.746 1142.21L243.062 1086.03L139.264 1026.1L97.3155 1026.12L0 1082.3L103.803 1142.23L145.746 1142.21ZM124.802 1130.2L55.7816 1090.35L55.8017 1074.21L118.27 1038.15L187.275 1077.99L187.27 1094.13L124.802 1130.2Z" fill="white"/%3E%3C/svg%3E');
  background-size: 100% 90%;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0 auto;
}
@media only screen and (max-width: 37.5em) {
  .background-shape {
    background-image: url(/Images/mobile-background.svg);
    width: 100%;
    background-size: 100% 100%;
  }
}
@media only screen and (max-width: 56.25em) {
  .background-shape {
    width: 95%;
  }
}

@media only screen and (max-width: 37.5em) {
  .unique-collectibles_header_div {
    height: 6vh;
  }
}

.unique-collectibles {
  background-repeat: no-repeat;
  background-position: right top;
  background-size: cover;
  width: 100%;
  height: 100vh;
}
.unique-collectibles__photo {
  position: relative;
  display: flex;
  justify-content: center;
}
.unique-collectibles__photo__p1 {
  position: absolute;
  top: 10rem;
  left: 4.9rem;
  width: 35.8rem;
}
@media only screen and (max-width: 37.5em) {
  .unique-collectibles__photo__p1 {
    width: 30vw;
    top: 6rem;
    left: 4.5rem;
  }
}
.unique-collectibles__photo__p2 {
  position: absolute;
  width: 46rem;
  top: 4.3rem;
  left: 29%;
  z-index: 10;
}
@media only screen and (max-width: 37.5em) {
  .unique-collectibles__photo__p2 {
    width: 40vw;
    top: 4rem;
    left: 31%;
  }
}
.unique-collectibles__photo__p3 {
  position: absolute;
  right: 4.9rem;
  top: 10rem;
  width: 35.8rem;
}
@media only screen and (max-width: 37.5em) {
  .unique-collectibles__photo__p3 {
    width: 30vw;
    right: 4.5rem;
    top: 6rem;
  }
}

.unique-generation {
  display: flex;
  flex-direction: column;
  justify-content: end;
  width: 68.8rem;
  margin-top: 60rem;
  margin-left: 34rem;
}
@media only screen and (max-width: 56.25em) {
  .unique-generation {
    font-size: 1.45rem;
    margin-left: 30rem;
    padding-bottom: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .unique-generation {
    font-size: 1.45rem;
    padding-bottom: 1.5rem;
    padding-right: 1.5rem;
    margin-left: 33vw;
    width: 60vw;
    margin-top: 25vh;
  }
}

.marquee-container {
  max-width: 105rem;
}
@media only screen and (max-width: 37.5em) {
  .marquee-container {
    width: 100vw;
    overflow: hidden !important;
  }
}
@media only screen and (max-width: 56.25em) {
  .marquee-container {
    width: 100vw;
    overflow: hidden !important;
  }
}

.marquee {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  padding: 20rem 0;
  width: 123rem;
  margin-left: -1rem;
}
@media only screen and (max-width: 56.25em) {
  .marquee {
    width: 100%;
  }
}
@media only screen and (max-width: 37.5em) {
  .marquee {
    width: fit-content;
  }
}
.marquee span {
  text-transform: uppercase;
  will-change: transform;
  transform: translateX(0);
  white-space: nowrap;
  animation: marquee 5s linear infinite;
  margin-right: 1rem;
  font-size: 16rem;
  font-family: "WhyteInktrap-Heavy";
  font-weight: 900;
  color: #fff;
}
.marquee span a {
  text-decoration: none;
  color: #fff;
  cursor: url("/Images/Cursor White (Hover).svg"), pointer;
}
.marquee span a :visited {
  color: #fff !important;
}
@media only screen and (max-width: 37.5em) {
  .marquee span {
    font-size: 10rem;
    margin-right: 1rem;
  }
}

.say-text {
  color: #000 !important;
  -webkit-text-stroke-width: 1px !important;
  -webkit-text-stroke-color: #fff !important;
  margin-right: -2rem !important;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@media only screen and (max-width: 37.5em) {
  .factions {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.faction-body {
  display: flex;
  width: 122rem;
}
.faction-body__container {
  display: flex;
  justify-content: space-between;
}
.faction-body__molandak {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 30.5rem;
  cursor: url("/Images/Cursor White (Hover).svg"), pointer;
}
.faction-body__molandak img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}
.faction-body__molandak:hover img {
  transform: scale(1.1) translate(5%, 5%);
}
.faction-body__molandak:hover .text-overlay {
  color: white;
}
.faction-body__molandak::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to left,
    rgba(0, 0, 0, 0.932),
    rgba(0, 0, 0, 0.2) 90%
  );
  transition: opacity 0.5s ease;
  /* Smooth fade-out effect on hover */
  z-index: 1;
  /* Below the text, above the image */
  pointer-events: none;
  /* Make it non-interactable */
}
@media only screen and (max-width: 37.5em) {
  .faction-body__molandak::before {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.932),
      rgba(0, 0, 0, 0.2) 90%
    );
  }
}
@media only screen and (max-width: 56.25em) {
  .faction-body__molandak {
    width: 100%;
  }
}
@media only screen and (max-width: 37.5em) {
  .faction-body__molandak {
    width: 48%;
    height: 54rem;
    margin-bottom: 2rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .faction-body {
    width: 100vw;
  }
}
@media only screen and (max-width: 37.5em) {
  .faction-body {
    display: flex;
    flex-direction: column;
    width: 85vw;
  }
}

.faction-body:hover > :not(:hover) {
  filter: blur(5px);
  opacity: 0.5;
}
@media only screen and (max-width: 37.5em) {
  .faction-body:hover > :not(:hover) {
    filter: blur(0px);
    opacity: 0;
  }
}

.faction-body__container:hover > :not(:hover) {
  filter: blur(5px);
  opacity: 0.5;
}
@media only screen and (max-width: 37.5em) {
  .faction-body__container:hover > :not(:hover) {
    filter: blur(0px);
    opacity: 0;
  }
}

.dark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.356);
  /* Dark transparent color */
  opacity: 0;
  /* Initially hidden */
  transition: opacity 0.5s ease;
  /* Smooth fade-in effect */
  z-index: 2;
  /* Above the gradient, below the text */
}

.faction-body__molandak:hover::before {
  opacity: 0;
  /* Fade out the gradient */
}

.faction-body__molandak:hover .dark-overlay {
  opacity: 1;
  /* Fade in the dark overlay */
}

.text-overlay {
  position: absolute;
  bottom: 26rem;
  right: -10px;
  transform: rotate(-90deg);
  color: rgba(255, 255, 255, 0.562);
  font-size: 9.5rem;
  font-family: "WhyteInktrap-Regular";
  font-weight: bold;
  z-index: 2;
  pointer-events: none;
  opacity: 1;
}
@media only screen and (max-width: 37.5em) {
  .text-overlay {
    transform: rotate(0deg);
    font-size: 3rem;
    font-family: "WhyteInktrap-Heavy";
    color: #fff;
    left: 0;
    bottom: 0;
    padding-bottom: 1rem;
    padding-left: 0.5rem;
  }
}

.to-molandak {
  bottom: 23rem;
  right: -24rem;
}
@media only screen and (max-width: 37.5em) {
  .to-molandak {
    left: 0;
    bottom: 0;
  }
}

.to-chog {
  bottom: 10rem;
  right: -10.4rem;
}
@media only screen and (max-width: 37.5em) {
  .to-chog {
    left: 0;
    bottom: 0;
  }
}

.to-moyaki {
  bottom: 13.3rem;
  right: -14.2rem;
}
@media only screen and (max-width: 37.5em) {
  .to-moyaki {
    left: 0;
    bottom: 0;
  }
}

.to-mouch {
  bottom: 14.2rem;
  right: -15rem;
}
@media only screen and (max-width: 37.5em) {
  .to-mouch {
    left: 0;
    bottom: 0;
  }
}

.svg-frame {
  width: 100%;
  height: fit-content;
  /* Let SVG height adjust based on content */
  position: absolute;
  /* Ensure SVG stays in place */
  top: 0;
  left: 0;
  z-index: 0;
  /* Place SVG behind accordion content */
}

.FAQ {
  position: relative;
  width: 110rem;
  display: flex;
  justify-content: center;
  margin: auto;
  border: 1px solid white;
  background-size: 100% auto;
  /* Scale to full width, auto height */
  background-repeat: no-repeat;
  background-position: top, bottom;
  /* Pin the top and bottom */
  background-attachment: local;
  /* Fix background to element's scroll */
  padding-top: 5rem;
}
@media only screen and (max-width: 56.25em) {
  .FAQ {
    max-width: 90rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .FAQ {
    max-width: 90vw;
  }
}

.accordion {
  position: relative;
  /* Change from absolute to relative */
  padding: 4.78rem;
  overflow-y: auto;
  z-index: 1;
  /* Ensure accordion is above SVG */
  width: 98rem;
}
@media only screen and (max-width: 37.5em) {
  .accordion {
    padding: 1rem;
  }
}

details {
  background-color: #fff;
  border: 2px solid #fff;
  clip-path: polygon(0% 0%, 100% 0%, 100% 73%, 97% 100%, 0% 100%);
  transition: background-color 0.7s ease;
  margin-bottom: 1.5px;
}
details:last-child {
  margin-bottom: 5rem;
}

details:hover {
  cursor: url("/Images/Cursor White (Hover).svg"), pointer;
}

details[open] {
  background-color: #000;
  /* Background color when opened */
  clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 97% 100%, 0% 100%);
}
details[open] > summary {
  color: #fff;
}

details > summary {
  color: #000;
  padding-top: 4.1rem;
  padding-bottom: 4.1rem;
  padding-left: 3.67rem;
  font-size: 3.6rem;
  font-family: "SpaceGrotesk-Regular";
  font-weight: 800;
  cursor: url("/Images/Cursor White (Hover).svg"), pointer;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
details > summary::after {
  content: "";
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="53" height="53" viewBox="0 0 53 53" fill="none"><path d="M27.5517 2.50635V25.0995L24.4708 28.1887V50.5063" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M50.0112 28.0467H27.4181L24.3288 24.9658H2.01123" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  width: 4.8rem;
  height: 4.8rem;
  position: absolute;
  right: 2.5rem;
  /* Adjust position as needed */
  transform: rotate(0deg);
  transition: background-image 0.3s ease;
}
@media only screen and (max-width: 37.5em) {
  details > summary::after {
    width: 2rem;
    margin-top: 2rem;
  }
}
@media only screen and (max-width: 37.5em) {
  details > summary {
    font-size: 2rem;
    padding-top: 2.1rem;
    padding-bottom: 2.1rem;
    padding-left: 1.67rem;
  }
}

details[open] > summary::after {
  margin-top: 4.5rem;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="53" height="8" viewBox="0 0 53 8" fill="none"><path d="M50.0112 5.51155H27.4181L24.3288 2.43066H2.01123" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

details > p {
  padding-top: 2.5rem;
  padding-left: 3.67rem;
  padding-right: 2rem;
  color: #fff;
  font-size: 2.4rem;
  font-family: "SpaceGrotesk-Regular";
  font-weight: 300;
  cursor: url("/Images/Cursor White (Hover).svg"), pointer;
}
details > p a {
  text-decoration: solid;
  color: #fff;
  cursor: url("/Images/Cursor White (Hover).svg"), pointer;
}
@media only screen and (max-width: 37.5em) {
  details > p {
    font-size: 1.5rem;
    padding-top: 1.9rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.acc-top {
  padding-top: 2.5rem;
}

.acc-btm {
  padding-bottom: 5.9rem;
}

.team {
  padding-top: 5rem;
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.team-container {
  width: 30.8rem;
  transition: background-image 0.3s ease;
  position: relative;
  overflow: visible;
  /* Hide the image when not hovered */
  display: flex;
  flex-direction: column;
  align-content: center;
}
.team-container__hover {
  position: absolute;
  /* Position the image absolutely within the div */
  top: -2rem;
  /* Move the image 20px above the top of the div */
  left: -1.5rem;
  /* Center the image horizontally */
  width: 110%;
  /* Set the width to 120% to extend beyond the div */
  height: auto;
  /* Maintain aspect ratio */
  opacity: 0;
  /* Initially hide the image */
  transition: opacity 0.3s ease, top 0.3s ease;
  /* Smooth transition */
  cursor: url("../Images/Cursor White.svg"), auto;
}
.team-container__img {
  width: 29.8rem;
  padding-left: 0.5rem;
  aspect-ratio: 1 / 1;
}
.team-container__details {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22504%22%20height%3D%22182%22%20viewBox%3D%220%200%20504%20182%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M450.558%2053.7379L503.788%200.165039V127.447L450.558%20181.02H388.695L54.1245%20181.02L0.89502%20127.447V0.165237L54.1245%2053.738L388.695%2053.7379H450.558Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
  background-size: 30.8rem 100%;
  width: 100%;
  background-repeat: no-repeat;
  margin-top: -4.5rem;
}

.team-container:hover .team-container__hover {
  opacity: 1;
}

.team-container:hover {
  cursor: pointer;
}

.team-nameDeets {
  display: flex;
  align-items: center;
}
.team-nameDeets a {
  text-decoration: none;
  cursor: url("/Images/Cursor White (Hover).svg"), pointer;
}
.team-nameDeets a :hover .fa-twitter {
  color: #fff;
}
.team-nameDeets a :hover svg path {
  fill: #000;
  /* Change the SVG fill color on hover */
  stroke: #000;
  /* Change the SVG stroke color on hover */
}

@media only screen and (max-width: 37.5em) {
  .builciber {
    margin-bottom: 6rem;
  }
}

.icon-container {
  position: relative;
  width: 2.3rem;
  margin-top: 7rem;
  margin-left: 1.5rem;
}
@media only screen and (max-width: 37.5em) {
  .icon-container {
    margin-top: 6.5rem;
  }
}

.icon-container svg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.icon-container .fa-twitter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: black;
  /* Change the icon color as needed */
  z-index: 2;
  /* Make sure the Font Awesome icon stays on top */
  font-size: 10px;
}

.FAQ-header {
  margin-top: 30rem;
  margin-bottom: 1rem;
  margin-left: 5rem;
}
@media only screen and (max-width: 37.5em) {
  .FAQ-header {
    margin-bottom: 1rem;
    margin-left: 2rem;
  }
}

.back-to-top {
  display: flex;
  justify-content: end;
  margin-right: 2.5rem;
  padding-top: 30rem;
  position: relative;
}
.back-to-top a {
  cursor: url("/Images/Cursor White (Hover).svg"), pointer;
}
.back-to-top a :hover {
  opacity: 60%;
}
@media only screen and (max-width: 37.5em) {
  .back-to-top a {
    margin-right: -13rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .back-to-top img {
    width: 50%;
    margin-right: 0rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .back-to-top {
    padding-top: 20rem;
    overflow: hidden;
  }
}