@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url("https://fonts.googleapis.com/css?family=DM+Mono:500,400");

:root {
  --team-card-red: var(--variable-collection-red);
  --team-card-blue: var(--variable-collection-blue);
  --team-card-yellow: var(--variable-collection-yellow);
  --variable-collection-blue: rgba(11, 144, 151, 1);
  --variable-collection-red: rgba(221, 66, 40, 1);
  --variable-collection-yellow: rgba(248, 158, 28, 1);
  --variable-collection-background-black: rgba(10, 10, 10, 1);
}

* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
html,
body {
  margin: 0px;
  height: 100%;
}
/* a blue color as a generic focus style */
button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}
a {
  text-decoration: none;
}
@font-face {
  font-family: "PP Monument Extended-Black";
  src: url("https://anima-uploads.s3.amazonaws.com/projects/633c2bf70ae1dbd35fe00ea2/fonts/ppmonumentextended-black.otf")
    format("opentype");
}

@font-face {
  font-family: "HK Grotesk Wide-Bold";
  src: url("https://anima-uploads.s3.amazonaws.com/projects/66585455ecd5bb4a34be059b/fonts/_hkgroteskwide-bold.otf")
    format("opentype");
}

@font-face { 
    font-family: "DeathRattle BB-Regular"; 
    src: url('fonts/deathrattlebb_reg.ttf'); 
} 

.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: rgba(9, 9, 9, 0.9);
  backdrop-filter: blur(10px);
  z-index: 1000;
  transition: transform 0.3s ease-in-out;
}

.nav-content {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 40px;
}

.nav-logo {
  font-family: "DeathRattle BB-Regular", Helvetica;
  color: #ffffff;
  font-size: 24px;
}

.nav-links {
  display: flex;
  gap: 30px;
  margin-left: 20px;
}

.nav-link {
  font-family: "DM Mono", Helvetica;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s;
  text-transform: uppercase;
}

.nav-link:hover {
  color: var(--variable-collection-yellow);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.language-selector {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.flag-icon {
  width: 20px;
  height: 15px;
  object-fit: cover;
}

.language-selector span {
  color: #ffffff;
  font-family: "DM Mono", Helvetica;
  font-size: 14px;
}

.language-selector select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.connect-wallet {
  background: #ffffff;
  color: #000000;
  border: none;
  padding: 8px 16px;
  font-family: "DM Mono", Helvetica;
  font-size: 14px;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.3s;
}

.connect-wallet:hover {
  background: var(--variable-collection-yellow);
  color: #ffffff;
}

.nav-hidden {
  transform: translateY(-100%);
}

html {
  background-color: #090909;
}

body {
  padding-top: 60px;
  background-color: #090909;
}

.desktop-final {
    background-color: #090909;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  
  .desktop-final .overlap-wrapper {
    background-color: #090909;
    overflow: hidden;
    height: 15056px;
    left: -500px;
    right: -200%;
    position: absolute;
  }
  
  .desktop-final .overlap {
    position: relative;
    width: 1600px;
    height: 15497px;
  }
  
  .desktop-final .ellipse {
    position: absolute;
    width: 1190px;
    height: 1190px;
    top: 3362px;
    left: 1364px;
    border-radius: 595px;
    border: 11px dashed;
    border-color: #ffffff5c;
  }
  
  .desktop-final .div {
    position: absolute;
    width: 1190px;
    height: 1190px;
    top: 2784px;
    left: 0;
    border-radius: 595px;
    border: 11px dashed;
    border-color: #ffffff5c;
  }
  
  .desktop-final .image {
    position: absolute;
    width: 1600px;
    height: 843px;
    top: 4673px;
    left: 500px;

    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
  }
  
  .desktop-final .roadmap-BG {
    position: absolute;
    width: 1283px;
    height: 2350px;
    top: 9694px;
    left: 738px;
  }
  
  .desktop-final .overlap-group {
    position: relative;
    height: 2350px;
  }
  
  .desktop-final .marks {
    position: absolute;
    width: 1169px;
    height: 2150px;
    top: 0;
    left: 0;
  }
  
  .desktop-final .text-wrapper {
    position: absolute;
    width: 167px;
    top: 8px;
    left: 77px;
    transform: rotate(-6.93deg);
    opacity: 0.6;
    font-family: "DeathRattle BB-Regular", Helvetica;
    font-weight: 400;
    color: var(--variable-collection-blue);
    font-size: 600px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop-final .text-wrapper-2 {
    position: absolute;
    width: 167px;
    top: 221px;
    left: 963px;
    transform: rotate(-6.93deg);
    opacity: 0.6;
    font-family: "DeathRattle BB-Regular", Helvetica;
    color: var(--variable-collection-yellow);
    font-size: 600px;
    text-align: center;
    line-height: normal;
    font-weight: 400;
    letter-spacing: 0;
  }
  
  .desktop-final .text-wrapper-3 {
    position: absolute;
    width: 167px;
    top: 1050px;
    left: 53px;
    transform: rotate(-6.93deg);
    opacity: 0.6;
    font-family: "DeathRattle BB-Regular", Helvetica;
    color: var(--variable-collection-red);
    font-size: 600px;
    text-align: center;
    line-height: normal;
    font-weight: 400;
    letter-spacing: 0;
  }
  
  .desktop-final .text-wrapper-4 {
    position: absolute;
    width: 167px;
    top: 1317px;
    left: 823px;
    transform: rotate(-6.93deg);
    opacity: 0.6;
    font-family: "DeathRattle BB-Regular", Helvetica;
    color: var(--variable-collection-yellow);
    font-size: 600px;
    text-align: center;
    line-height: normal;
    font-weight: 400;
    letter-spacing: 0;
  }
  
  .desktop-final .text-wrapper-5 {
    position: absolute;
    width: 167px;
    top: 1640px;
    left: 30px;
    transform: rotate(-6.93deg);
    opacity: 0.6;
    font-family: "DeathRattle BB-Regular", Helvetica;
    color: var(--variable-collection-blue);
    font-size: 600px;
    text-align: center;
    line-height: normal;
    font-weight: 400;
    letter-spacing: 0;
  }
  
  .desktop-final .traks {
    position: absolute;
    width: 1178px;
    height: 2262px;
    top: 87px;
    left: 104px;
  }
  
  .desktop-final .ellipse-2 {
    position: absolute;
    width: 1174px;
    height: 1174px;
    top: 6236px;
    left: 713px;
    border-radius: 587px;
    filter: blur(100px);
    background: radial-gradient(50% 50% at 50% 50%, rgba(248, 158, 28, 0.8) 0%, rgba(248, 158, 28, 0) 100%);
  }
  
  .desktop-final .nets {
    position: absolute;
    width: 1600px;
    height: 14476px;
    top: 887px;
    left: 500px;


    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
  }
  
  .desktop-final .first-page {
    position: absolute;
    width: 1600px;
    height: 975px;
    top: 0;
    left: 500px;
    object-fit: cover;
  }
  
  .desktop-final .ABOUT {
    position: absolute;
    width: 1835px;
    height: 1202px;
    top: 995px;
    left: 592px;
  }
  
  .desktop-final .overlap-2 {
    position: relative;
    width: 1508px;
    height: 1202px;
    top: 5px;
  }
  
  .desktop-final .an-exclusive-NFT-and {
    position: absolute;
    width: 961px;
    top: 11px;
    left: 0;
    font-family: "PP Monument Extended-Black", Helvetica;
    font-weight: 900;
    color: #ffffff;
    font-size: 70px;
    letter-spacing: 0;
    line-height: 56px;
  }
  
  .desktop-final .layer {
    position: absolute;
    width: 1157px;
    height: 1202px;
    top: 0;
    left: 351px;
  }
  
  .desktop-final .the-hyena-club-is-an {
    width: 475px;
    top: 608px;
    font-family: "DM Mono", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 20px;
    line-height: 30px;
    position: absolute;
    left: 0;
    letter-spacing: 0;
  }
  
  .desktop-final .text-wrapper-6 {
    position: absolute;
    top: 1963px;
    left: 516px;
    transform: rotate(-3.45deg);
    font-family: "DeathRattle BB-Regular", Helvetica;
    font-weight: 400;
    color: #dd4228;
    font-size: 385px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .desktop-final .NFT {
    display: flex;
    flex-direction: column;
    width: 1420px;
    align-items: flex-end;
    gap: 154px;
    position: absolute;
    top: 2354px;
    left: 590px;
  }
  
  .desktop-final .element-UNIQUE-NFT-s {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "PP Monument Extended-Black", Helvetica;
    font-weight: 900;
    color: #ffffff;
    font-size: 113px;
    text-align: right;
    letter-spacing: 0;
    line-height: 118px;
  }
  
  .desktop-final .frame {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
  }
  
  .desktop-final .frame-2 {
    display: flex;
    align-items: center;
    gap: 247px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
  }
  
  .desktop-final .NFT-sq {
    position: relative;
    width: 531px;
    height: 493px;
    background-color: #ffffff40;
    backdrop-filter: blur(20px) brightness(100%);
    -webkit-backdrop-filter: blur(20px) brightness(100%);
  }
  
  .desktop-final .img {
    position: absolute;
    width: 531px;
    height: 493px;
    top: 0;
    left: 0;
    object-fit: cover;
  }
  
  .desktop-final .group {
    position: relative;
    width: 644px;
    height: 325px;
    margin-right: -2px;
  }
  
  .desktop-final .text-wrapper-7 {
    position: absolute;
    top: 28px;
    left: 5px;
    transform: rotate(-6.93deg);
    font-family: "DeathRattle BB-Regular", Helvetica;
    font-weight: 400;
    color: #0b9097;
    font-size: 130px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .desktop-final .the-hyena-club {
    width: 499px;
    top: 235px;
    left: 141px;
    text-align: right;
    position: absolute;
    font-family: "DM Mono", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 20px;
    letter-spacing: 0;
    line-height: 30px;
  }
  
  .desktop-final .frame-3 {
    display: flex;
    align-items: center;
    gap: 78px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
  }
  
  .desktop-final .group-2 {
    position: relative;
    width: 814.28px;
    height: 368px;
  }
  
  .desktop-final .text-wrapper-8 {
    top: 48px;
    color: #f89e1c;
    position: absolute;
    left: 4px;
    transform: rotate(-6.93deg);
    font-family: "DeathRattle BB-Regular", Helvetica;
    font-weight: 400;
    font-size: 130px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .desktop-final .these-nfts-are-the {
    position: absolute;
    width: 499px;
    top: 248px;
    left: 2px;
    font-family: "DM Mono", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 20px;
    letter-spacing: 0;
    line-height: 30px;
  }
  
  .desktop-final .frame-4 {
    display: flex;
    align-items: center;
    gap: 125px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
  }
  
  .desktop-final .group-3 {
    position: relative;
    width: 766px;
    height: 387.67px;
    margin-right: -2px;
  }
  
  .desktop-final .text-wrapper-9 {
    top: 43px;
    color: #dd4228;
    text-align: center;
    position: absolute;
    left: 4px;
    transform: rotate(-6.93deg);
    font-family: "DeathRattle BB-Regular", Helvetica;
    font-weight: 400;
    font-size: 130px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .desktop-final .holding-an-NFT-also {
    position: absolute;
    width: 499px;
    top: 238px;
    left: 263px;
    font-family: "DM Mono", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 20px;
    text-align: right;
    letter-spacing: 0;
    line-height: 30px;
  }
  
  .desktop-final .TOKENS {
    position: absolute;
    width: 1493px;
    height: 885px;
    top: 4671px;
    left: 553px;
  }
  
  .desktop-final .overlap-group-wrapper {
    position: absolute;
    width: 1442px;
    height: 270px;
    top: 0;
    left: 27px;
  }
  
  .desktop-final .overlap-group-2 {
    position: relative;
    width: 1438px;
    height: 270px;
  }
  
  .desktop-final .text-wrapper-10 {
    position: absolute;
    top: 0;
    left: 0;
    font-family: "PP Monument Extended-Black", Helvetica;
    font-weight: 900;
    color: #ffffff;
    font-size: 137px;
    letter-spacing: 0;
    line-height: 118px;
    white-space: nowrap;
  }
  
  .desktop-final .text-wrapper-11 {
    position: absolute;
    top: 82px;
    left: 502px;
    transform: rotate(-6.93deg);
    font-family: "DeathRattle BB-Regular", Helvetica;
    font-weight: 400;
    color: var(--variable-collection-red);
    font-size: 195px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .desktop-final .a-transaction-tax {
    position: absolute;
    width: 763px;
    top: 640px;
    left: 365px;
    font-family: "DM Mono", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 20px;
    text-align: center;
    letter-spacing: 0;
    line-height: 30px;
  }
  
  .desktop-final .group-4 {
    position: absolute;
    width: 1422px;
    height: 197px;
    top: 344px;
    left: 35px;
  }
  
  .desktop-final .frame-5 {
    display: flex;
    flex-direction: column;
    width: 342px;
    align-items: center;
    gap: 19px;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .desktop-final .text-wrapper-12 {
    position: relative;
    align-self: stretch;
    margin-top: -1px;
    font-family: "PP Monument Extended-Black", Helvetica;
    font-weight: 900;
    color: #ffffff;
    font-size: 102px;
    letter-spacing: 0;
    line-height: 118px;
  }
  
  .desktop-final .text-wrapper-13 {
    position: relative;
    align-self: stretch;
    font-family: "DM Mono", Helvetica;
    font-weight: 500;
    color: #25caa3;
    font-size: 25px;
    text-align: center;
    letter-spacing: 0;
    line-height: 30px;
  }
  
  .desktop-final .frame-6 {
    display: flex;
    flex-direction: column;
    width: 388px;
    align-items: center;
    gap: 19px;
    position: absolute;
    top: 0;
    left: 515px;
  }
  
  .desktop-final .text-wrapper-14 {
    position: relative;
    align-self: stretch;
    margin-top: -1px;
    font-family: "PP Monument Extended-Black", Helvetica;
    font-weight: 900;
    color: #ffffff;
    font-size: 102px;
    text-align: center;
    letter-spacing: 0;
    line-height: 118px;
  }
  
  .desktop-final .frame-7 {
    display: flex;
    flex-direction: column;
    width: 370px;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 19px;
    position: absolute;
    top: 0;
    left: 1052px;
  }
  
  .desktop-final .TRADING-BOT {
    position: absolute;
    width: 1457px;
    height: 1701px;
    top: 5658px;
    left: 591px;
  }
  
  .desktop-final .overlap-3 {
    position: absolute;
    width: 1472px;
    height: 980px;
    top: 768px;
    left: 0;
  }
  
  .desktop-final .overlap-4 {
    position: absolute;
    width: 1466px;
    height: 980px;
    top: 0;
    left: 6px;
  }
  
  .desktop-final .element {
    position: absolute;
    width: 354px;
    height: 782px;
    top: 0;
    left: 539px;
    background-image: url(img/iphone-16-pro.png);
    background-size: 100% 100%;
  }
  
  .desktop-final .mockup {
    position: absolute;
    width: 314px;
    height: 759px;
    top: 12px;
    left: 32px;
  }
  
  .desktop-final .we-are-committed {
    position: absolute;
    width: 1454px;
    top: 700px;
    left: 6px;
    transform: rotate(-6.93deg);
    font-family: "DeathRattle BB-Regular", Helvetica;
    font-weight: 400;
    color: var(--variable-collection-red);
    font-size: 227px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .desktop-final .to-building-a-data {
    position: absolute;
    width: 415px;
    top: 218px;
    left: 0;
    font-family: "DM Mono", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 20px;
    letter-spacing: 0;
    line-height: 30px;
  }
  
  .desktop-final .a-portion-of-the {
    position: absolute;
    width: 415px;
    top: 218px;
    left: 1003px;
    font-family: "DM Mono", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 20px;
    text-align: right;
    letter-spacing: 0;
    line-height: 30px;
  }
  
  .desktop-final .the-hyena-club-is {
    width: 1198px;
    top: -1px;
    font-family: "PP Monument Extended-Black", Helvetica;
    font-weight: 900;
    color: white;
    font-size: 70px;
    line-height: 60px;
    position: absolute;
    left: 0;
    letter-spacing: 0;
  }
  
  .desktop-final .span {
    color: #ffffff;
  }
  
  .desktop-final .text-wrapper-15 {
    color: #f89e1c;
  }
  
  .desktop-final .REDESTRIBUTION-MODEL {
    position: absolute;
    width: 1469px;
    height: 1155px;
    top: 7633px;
    left: 565px;
  }
  
  .desktop-final .the-hyena-club-s {
    width: 1469px;
    left: 0;
    font-size: 44px;
    text-align: center;
    line-height: 73px;
    position: absolute;
    top: -150px;
    font-family: "PP Monument Extended-Black", Helvetica;
    font-weight: 900;
    color: white;
    letter-spacing: 0;
  }
  
  .desktop-final .text-wrapper-16 {
    color: #dd4228;
  }
  
  .desktop-final .element-of-the-creator-s-wrapper {
    position: absolute;
    width: 532px;
    height: fit-content;
    padding: 50px;
    top: 494px;
    left: 26px;
    background-color: var(--variable-collection-blue);
    border-radius: 6px;
  }
  
  .desktop-final .element-of-the-creator-s {
    /* position: absolute; */
    width: 100%;
    top: 110px;
    left: 87px;
    font-family: "PP Monument Extended-Black", Helvetica;
    font-weight: 900;
    color: #ffffff;
    font-size: 30px;
    text-align: center;
    letter-spacing: 0;
    line-height: 45px;
  }
  
  .desktop-final .any-profits-from-wrapper {
     position: absolute;
    width: 532px;
    height: fit-content;
    padding: 50px;
    top: 494px;
    left: 913px;
    background-color: var(--variable-collection-yellow);
    border-radius: 6px;
  }
  
  .desktop-final .any-profits-from {
    width: 100%;
    top: 110px;
    left: 87px;
    font-family: "PP Monument Extended-Black", Helvetica;
    font-weight: 900;
    color: #ffffff;
    font-size: 30px;
    text-align: center;
    letter-spacing: 0;
    line-height: 45px;
  }
  
  .desktop-final .this-focus-on {
    position: absolute;
    width: 763px;
    top: 1094px;
    left: 353px;
    font-family: "DM Mono", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 20px;
    text-align: center;
    letter-spacing: 0;
    line-height: 30px;
  }
  
  .desktop-final .TEAM {
    position: absolute;
    width: 1470px;
    height: 1076px;
    top: 11966px;
    left: 565px;
  }
  
  .desktop-final .text-wrapper-17 {
    position: absolute;
    width: 1188px;
    top: 70px;
    left: 141px;
    transform: rotate(-6.93deg);
    font-family: "DeathRattle BB-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 190px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .desktop-final .the-hyena-club-team {
    width: 763px;
    top: 865px;
    left: 353px;
    text-align: center;
    position: absolute;
    font-family: "DM Mono", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 20px;
    letter-spacing: 0;
    line-height: 30px;
  }
  
  .desktop-final .frame-8 {
    position: absolute;
    width: 1470px;
    height: 386px;
    top: 369px;
    left: 0;
  }
  
  .desktop-final .image-wrapper {
    position: absolute;
    width: 210px;
    height: 386px;
    top: 0;
    left: 210px;
    background-image: url(img/frame-19.svg);
    background-size: cover;
    background-position: 50% 50%;
    background-color: var(--team-card-blue);
  }
  
  .desktop-final .image-2 {
    height: 362px;
    top: 24px;
    position: absolute;
    width: 210px;
    left: 0;
    object-fit: cover;
  }
  
  .desktop-final .img-wrapper {
    position: absolute;
    width: 210px;
    height: 386px;
    top: 0;
    left: 420px;
    background-image: url(img/frame-20.svg);
    background-size: cover;
    background-position: 50% 50%;
    background-color: var(--team-card-yellow);
  }
  
  .desktop-final .image-3 {
    height: 360px;
    top: 26px;
    position: absolute;
    width: 210px;
    left: 0;
    object-fit: cover;
  }
  
  .desktop-final .frame-9 {
    position: absolute;
    width: 210px;
    height: 386px;
    top: 0;
    left: 0;
    background-image: url(img/frame-26.svg);
    background-size: cover;
    background-position: 50% 50%;
    background-color: var(--team-card-red);
  }
  
  .desktop-final .image-4 {
    height: 366px;
    top: 20px;
    position: absolute;
    width: 210px;
    left: 0;
    object-fit: cover;
  }
  
  .desktop-final .frame-10 {
    position: absolute;
    width: 210px;
    height: 386px;
    top: 0;
    left: 630px;
    background-image: url(img/frame-21.svg);
    background-size: cover;
    background-position: 50% 50%;
    background-color: var(--team-card-red);
  }
  
  .desktop-final .frame-11 {
    position: absolute;
    width: 210px;
    height: 386px;
    top: 0;
    left: 840px;
    background-image: url(img/frame-22.svg);
    background-size: cover;
    background-position: 50% 50%;
    background-color: var(--team-card-blue);
  }
  
  .desktop-final .image-5 {
    height: 364px;
    top: 22px;
    position: absolute;
    width: 210px;
    left: 0;
    object-fit: cover;
  }
  
  .desktop-final .frame-12 {
    position: absolute;
    width: 210px;
    height: 386px;
    top: 0;
    left: 1050px;
    background-image: url(img/frame-23.svg);
    background-size: cover;
    background-position: 50% 50%;
    background-color: var(--team-card-yellow);
  }
  
  .desktop-final .frame-13 {
    position: absolute;
    width: 210px;
    height: 386px;
    top: 0;
    left: 1260px;
    background-image: url(img/frame-24.svg);
    background-size: cover;
    background-position: 50% 50%;
    background-color: var(--team-card-red);
  }
  
  .desktop-final .image-6 {
    height: 338px;
    top: 48px;
    position: absolute;
    width: 210px;
    left: 0;
    object-fit: cover;
  }
  
  .desktop-final .JOIN-THE-CLUB {
    position: absolute;
    width: 1955px;
    height: 1644px;
    top: 13389px;
    left: 55px;
  }
  
  .desktop-final .overlap-5 {
    position: relative;
    width: 1510px;
    height: 1970px;
    top: -303px;
    left: 445px;
  }
  
  .desktop-final .whatsapp-image {
    position: absolute;
    width: 1265px;
    height: 1970px;
    top: 0;
    left: 0;
    object-fit: cover;
  }
  
  .desktop-final .div-wrapper {
    position: absolute;
    width: 481px;
    height: 492px;
    top: 797px;
    left: 559px;
    background-color: #ffffff05;
    backdrop-filter: blur(13px) brightness(100%);
    -webkit-backdrop-filter: blur(13px) brightness(100%);
  }
  
  .desktop-final .text-wrapper-18 {
    position: absolute;
    width: 363px;
    top: 45px;
    left: 59px;
    font-family: "HK Grotesk Wide-Bold", Helvetica;
    font-weight: 700;
    color: #ffffff;
    font-size: 97px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop-final .frame-14 {
    position: absolute;
    width: 355px;
    height: 329px;
    top: 303px;
    left: 800px;
    background-color: var(--variable-collection-blue);
    border-radius: 6px;
    overflow: hidden;
  }
  
  .desktop-final .social-icons {
    position: absolute;
    width: 161px;
    height: 161px;
    top: 84px;
    left: 97px;
  }
  
  .desktop-final .text-wrapper-19 {
    position: absolute;
    top: 282px;
    left: 15px;
    font-family: "DM Mono", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 20px;
    letter-spacing: 0;
    line-height: 30px;
    white-space: nowrap;
  }
  
  .desktop-final .frame-15 {
    position: absolute;
    width: 355px;
    height: 329px;
    top: 632px;
    left: 1155px;
    background-color: var(--variable-collection-yellow);
    border-radius: 6px;
    overflow: hidden;
  }
  
  .desktop-final .frame-16 {
    position: absolute;
    width: 355px;
    height: 329px;
    top: 1125px;
    left: 1155px;
    background-color: var(--variable-collection-blue);
    border-radius: 6px;
    overflow: hidden;
  }
  
  .desktop-final .frame-17 {
    position: absolute;
    width: 355px;
    height: 329px;
    top: 1454px;
    left: 800px;
    background-color: var(--variable-collection-red);
    border-radius: 6px;
    overflow: hidden;
  }
  
  .desktop-final .ROADMAP {
    position: absolute;
    width: 1421px;
    height: 2729px;
    top: 9060px;
    left: 590px;
  }
  
  .desktop-final .overlap-6 {
    position: absolute;
    width: 1423px;
    height: 2084px;
    top: 644px;
    left: 0;
  }
  
  .desktop-final .frame-18 {
    position: absolute;
    width: 555px;
    height: 175px;
    top: 0;
    left: 0;
    background-color: #ffffff0f;
    backdrop-filter: blur(49px) brightness(100%);
    -webkit-backdrop-filter: blur(49px) brightness(100%);
  }
  
  .desktop-final .frame-19 {
    position: absolute;
    width: 386px;
    height: 213px;
    top: 153px;
    left: 859px;
    background-color: #ffffff0f;
    backdrop-filter: blur(49px) brightness(100%);
    -webkit-backdrop-filter: blur(49px) brightness(100%);
  }
  
  .desktop-final .frame-20 {
    position: absolute;
    width: 301px;
    height: 213px;
    top: 1035px;
    left: 22px;
    background-color: #ffffff0f;
    backdrop-filter: blur(49px) brightness(100%);
    -webkit-backdrop-filter: blur(49px) brightness(100%);
  }
  
  .desktop-final .frame-21 {
    position: absolute;
    width: 301px;
    height: 200px;
    top: 1300px;
    left: 708px;
    background-color: #ffffff0f;
    backdrop-filter: blur(49px) brightness(100%);
    -webkit-backdrop-filter: blur(49px) brightness(100%);
  }
  
  .desktop-final .frame-22 {
    position: absolute;
    width: 439px;
    height: 200px;
    top: 1614px;
    left: 22px;
    background-color: #ffffff0f;
    backdrop-filter: blur(49px) brightness(100%);
    -webkit-backdrop-filter: blur(49px) brightness(100%);
  }
  
  .desktop-final .r {
    position: absolute;
    width: 619px;
    height: 388px;
    top: 0;
    left: 0;
  }
  
  .desktop-final .overlap-group-3 {
    position: relative;
    width: 617px;
    height: 388px;
  }
  
  .desktop-final .text-wrapper-20 {
    position: absolute;
    top: 5px;
    left: 13px;
    transform: rotate(-6.93deg);
    font-family: "DeathRattle BB-Regular", Helvetica;
    font-weight: 400;
    color: var(--variable-collection-yellow);
    font-size: 260px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .desktop-final .frame-23 {
    display: flex;
    flex-direction: column;
    width: 532px;
    align-items: flex-start;
    gap: 22px;
    position: absolute;
    top: 128px;
    left: 85px;
  }
  
  .desktop-final .text-wrapper-21 {
    position: relative;
    align-self: stretch;
    margin-top: -1px;
    font-family: "PP Monument Extended-Black", Helvetica;
    font-weight: 900;
    color: #ffffff;
    font-size: 37px;
    letter-spacing: 0;
    line-height: 56px;
  }
  
  .desktop-final .creating-the-NFT-s {
    position: relative;
    align-self: stretch;
    height: 160px;
    font-family: "DM Mono", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 20px;
    letter-spacing: 0;
    line-height: 40px;
  }
  
  .desktop-final .r-2 {
    position: absolute;
    width: 583px;
    height: 404px;
    top: 184px;
    left: 840px;
  }
  
  .desktop-final .overlap-7 {
    position: relative;
    width: 581px;
    height: 404px;
  }
  
  .desktop-final .text-wrapper-22 {
    top: 7px;
    left: 13px;
    transform: rotate(-6.93deg);
    color: var(--variable-collection-red);
    position: absolute;
    font-family: "DeathRattle BB-Regular", Helvetica;
    font-weight: 400;
    font-size: 260px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .desktop-final .frame-24 {
    display: flex;
    flex-direction: column;
    width: 476px;
    align-items: flex-start;
    gap: 22px;
    position: absolute;
    top: 104px;
    left: 105px;
  }
  
  .desktop-final .p {
    position: relative;
    width: 360px;
    height: 200px;
    font-family: "DM Mono", Helvetica;
    color: #ffffff;
    font-size: 20px;
    line-height: 40px;
    font-weight: 400;
    letter-spacing: 0;
  }
  
  .desktop-final .r-3 {
    position: absolute;
    width: 581px;
    height: 404px;
    top: 1060px;
    left: 1px;
  }
  
  .desktop-final .overlap-8 {
    position: relative;
    width: 579px;
    height: 404px;
  }
  
  .desktop-final .text-wrapper-23 {
    top: 6px;
    left: 13px;
    transform: rotate(-6.93deg);
    color: var(--variable-collection-blue);
    position: absolute;
    font-family: "DeathRattle BB-Regular", Helvetica;
    font-weight: 400;
    font-size: 260px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .desktop-final .frame-25 {
    display: flex;
    width: 476px;
    top: 104px;
    left: 103px;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    position: absolute;
  }
  
  .desktop-final .r-4 {
    position: absolute;
    width: 716px;
    height: 452px;
    top: 1319px;
    left: 706px;
  }
  
  .desktop-final .overlap-9 {
    position: relative;
    width: 717px;
    height: 452px;
    left: -3px;
  }
  
  .desktop-final .text-wrapper-24 {
    width: 95px;
    top: 5px;
    left: 14px;
    transform: rotate(-7.63deg);
    color: var(--variable-collection-red);
    position: absolute;
    font-family: "DeathRattle BB-Regular", Helvetica;
    font-weight: 400;
    font-size: 260px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .desktop-final .frame-26 {
    display: flex;
    width: 627px;
    height: 349px;
    top: 103px;
    left: 90px;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    position: absolute;
  }
  
  .desktop-final .text-wrapper-25 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "PP Monument Extended-Black", Helvetica;
    font-weight: 900;
    color: #ffffff;
    font-size: 37px;
    letter-spacing: 0;
    line-height: 56px;
    white-space: nowrap;
  }
  
  .desktop-final .r-5 {
    position: absolute;
    width: 532px;
    height: 363px;
    top: 1653px;
    left: 0;
  }
  
  .desktop-final .overlap-10 {
    position: relative;
    width: 530px;
    height: 363px;
  }
  
  .desktop-final .text-wrapper-26 {
    top: 6px;
    left: 13px;
    transform: rotate(-6.93deg);
    color: var(--variable-collection-yellow);
    position: absolute;
    font-family: "DeathRattle BB-Regular", Helvetica;
    font-weight: 400;
    font-size: 260px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .desktop-final .frame-27 {
    display: inline-flex;
    top: 103px;
    left: 97px;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    position: absolute;
  }
  
  .desktop-final .text-wrapper-27 {
    position: relative;
    width: 433px;
    margin-top: -1px;
    font-family: "PP Monument Extended-Black", Helvetica;
    font-weight: 900;
    color: #ffffff;
    font-size: 37px;
    letter-spacing: 0;
    line-height: 56px;
  }
  
  .desktop-final .launching-AI {
    position: relative;
    width: 433px;
    font-family: "DM Mono", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 20px;
    letter-spacing: 0;
    line-height: 40px;
  }
  
  .desktop-final .from-the-initial-NFT {
    position: absolute;
    width: 506px;
    top: 625px;
    left: 1px;
    font-family: "DM Mono", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 20px;
    letter-spacing: 0;
    line-height: 30px;
  }
  
  .desktop-final .future-milestones {
    position: absolute;
    width: 506px;
    top: 1933px;
    left: 902px;
    font-family: "DM Mono", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 20px;
    text-align: right;
    letter-spacing: 0;
    line-height: 30px;
  }
  
  .desktop-final .text-wrapper-28 {
    position: absolute;
    top: 880px;
    left: 434px;
    font-family: "PP Monument Extended-Black", Helvetica;
    font-weight: 900;
    color: #ffffff;
    font-size: 134px;
    letter-spacing: 0;
    line-height: 118px;
    white-space: nowrap;
  }
  
  .desktop-final .the-hyena-club-s-2 {
    width: 887px;
    left: 1px;
    font-size: 70px;
    line-height: 60px;
    position: absolute;
    top: -1px;
    font-family: "PP Monument Extended-Black", Helvetica;
    font-weight: 900;
    color: white;
    letter-spacing: 0;
  }
  
  .desktop-final .FOOTER {
    position: absolute;
    width: 1602px;
    height: 464px;
    top: 15033px;
    left: 500px;
    background-color: #090909;
  }
  
  .social-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: opacity 0.3s;
    position: absolute;
    width: 355px;
    height: 329px;
    border-radius: 6px;
    overflow: hidden;
  }
  
  .social-link:hover {
    opacity: 0.8;
  }
  
  .glass-back {
    background-color: #ffffff0f;
    backdrop-filter: blur(49px) brightness(100%);
    -webkit-backdrop-filter: blur(49px) brightness(100%);
    padding: 30px;
    border-radius: 6px;
  }
  
  .desktop-final .text-wrapper-21 {
    margin-bottom: 20px;
  }
  
  .desktop-final .creating-the-NFT-s,
  .desktop-final .p,
  .desktop-final .launching-AI {
    margin: 0;
  }
  
  .desktop-final .frame-23,
  .desktop-final .frame-24,
  .desktop-final .frame-25,
  .desktop-final .frame-26,
  .desktop-final .frame-27 {
    position: relative;
    z-index: 1;
  }
  
  .desktop-final .text-wrapper-20,
  .desktop-final .text-wrapper-22,
  .desktop-final .text-wrapper-23,
  .desktop-final .text-wrapper-24,
  .desktop-final .text-wrapper-26 {
    z-index: 0;
  }
  
  .first-page {
    width: 1600px;
    height: 975px;
    position: relative;
  }

  .first-page > div, .first-page > a {
    z-index: 1001;
  }

  .first-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("img/first-page-1.png");
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
    z-index: 999;
  }

  .hero-title {
    left: 99px;
    top: 118px;
    position: absolute;
    color: #FDFDF6;
    font-size: 128px;
    font-family: "HK Grotesk Wide", sans-serif;
    font-weight: 700;
    word-wrap: break-word;
  }

  .nav-item {
    position: absolute;
    width: fit-content;
    height: 73px;
  }

  .nav-dot {
    width: 28px;
    height: 28px;
    position: absolute;
    left: 0;
    top: 45px;
  }

  .dot-outer {
    width: 28px;
    height: 28px;
    position: absolute;
    border-radius: 9999px;
    border: 1px #FDFDF6 solid;
  }

  .dot-inner {
    width: 12.38px;
    height: 12.38px;
    left: 7.81px;
    top: 7.81px;
    position: absolute;
    background: #FDFDF6;
    border-radius: 9999px;
  }

  .nav-text {
    position: absolute;
    left: 58.5px;
    top: 0;
    color: white;
    font-size: 20px;
    font-family: "DM Mono", monospace;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 30px;
    width: fit-content;
    text-wrap: nowrap;
  }

  .nav-line {
    display: none;
  }

  /* Position specific nav items */
  .about-nav {
    left: 63px;
    top: 388px;
  }

  .about-nav .nav-line {
    width: 88px;
  }

  .team-nav {
    left: 143px;
    top: 675px;
  }

  .team-nav .nav-line {
    width: 78px;
  }

  .contacts-nav {
    left: 287px;
    top: 841px;
  }

  .contacts-nav .nav-line {
    width: 121px;
  }

  .tokenomics-nav {
    left: 538px;
    top: 602px;
  }

  .tokenomics-nav .nav-line {
    width: 153px;
  }

  /* Standalone nav items */
  .standalone-nav {
    position: absolute;
  }

  .nft-nav {
    left: auto;
    right: 1198px;
    top: 433px;
  }

  .nft-nav .nav-line {
    width: 62px;
    transform: rotate(180deg);
    transform-origin: 0 0;
  }

  .trading-nav {
    left: auto;
    right: 674px;
    top: 521px;
  }

  .trading-nav .nav-line {
    width: 152px;
    transform: rotate(180deg);
    transform-origin: 0 0;
  }

  .roadmap-nav {
    left: auto;
    right: 761px;
    top: 809px;
  }

  .roadmap-nav .nav-line {
    width: 118px;
    transform: rotate(180deg);
    transform-origin: 0 0;
  }
  
  /* Update standalone nav items styling */
  .standalone-nav .nav-text {
    left: auto;  /* Remove default left positioning */
    right: 58.5px;  /* Position text to the right of the dot */
  }

  .standalone-nav .nav-dot {
    left: auto;  /* Remove default left positioning */
    right: 0;  /* Position dot at the right end */
  }
  
  /* Add hover effect for dots */
  .nav-dot {
    transition: transform 0.3s ease;
  }

  .nav-dot:hover {
    transform: scale(1.2);
    cursor: pointer;
  }

  /* Make the entire nav item clickable */
  .nav-item, .standalone-nav {
    cursor: pointer;
  }
  
  /* Update nav item hover effects */
  .nav-item, .standalone-nav {
    cursor: pointer;
  }

  /* Group the dot and text for hover effects */
  .nav-dot, .nav-text {
    transition: transform 0.3s ease;
  }

  /* Apply zoom effect to both dot and text on nav item hover */
  .nav-item:hover .nav-dot,
  .standalone-nav:hover .nav-dot
   {
    transform: scale(1.2);
  }

  .nav-item:hover .nav-text,
  .standalone-nav:hover .nav-text {
    opacity: 0.5;
  }

  /* Remove individual dot hover since it's now handled by the parent */
  .nav-dot:hover {
    transform: none;
  }

  /* Ensure text transform origin is appropriate */
  .nav-item .nav-text {
    transform-origin: left center;
  }

  .standalone-nav .nav-text {
    transform-origin: right center;
  }

  /* For desktop */
  .div-wrapper:hover .text-wrapper-18 {
    color: #DD4228;
    transition: color 0.3s ease;
  }