/*FONTS*/

@font-face {
  font-family: MenuShapiro;
  src: url("../fonts/nokiafc22.ttf") format("opentype");
}

@font-face {
  font-family: MainTitle;
  src: url("../fonts/nokiafc22.ttf") format("opentype");
}

@font-face {
  font-family: Descriptions;
  src: url("../assets/fonts/Shapiro/Shapiro\ 35\ Feather\ Text.otf")
    format("opentype");
}

@font-face {
  font-family: Button;
  src: url("../assets/fonts/Shapiro/Shapiro\ 25\ Super\ Fly\ Text.otf")
    format("opentype");
}

@font-face {
  font-family: ShapiroT;
  src: url("../assets/fonts/Shapiro/Shapiro\ 55\ Middle\ Extd.otf");
}

@font-face {
  font-family: MiddleWide;
  src: url("../assets/fonts/Shapiro/Shapiro\ 55\ Middle\ Wide.otf");
}

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

* {
  color: white;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: #080d01;
  user-select: none;
}

#backgroundImage {
  position: fixed;
  width: 110%;
  top: 100px;
  left: 10px;
  z-index: -99;
}

/* Sections and titles with descriptions */
.styledSection {
  padding: 80 140 0 140;
  scroll-behavior: smooth;
}

.sectionTitleContainer p {
  font-family: MiddleWide;
  font-size: 16px;
  padding: 20 40;
}

.sectionTitle {
  font-size: 32px;
  font-family: MainTitle;
  padding: 20 40 20 40;
}

/* Header */
.header {
  display: block;
  padding: 0 20 0 120;
  z-index: 999;
  position: fixed;
  width: 100%;
  left: 0;
  display: flex;
  flex-direction: row;
  transition: 0.5s;
  align-items: center;
  justify-content: space-between;
  background-color: #080d01;
  z-index: 999 !important;
  pointer-events: all !important;
}

#close {
  transition: 0.5s;
  display: none;
}

.logoAndNav,
.socialLinkAndButton {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.socialLinkAndButton {
  margin-left: auto;
}

.navbar ul {
  display: flex;
  font-family: MenuShapiro;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 300;
  list-style: none;
}

.navbar ul li {
  padding: 10 20;
}

.navbar ul li a:hover {
  transition: 0.3s;
  color: rgba(135, 210, 31, 255);
}

.navbar ul li a {
  text-decoration: none;
}

.logoContainer a img,
.footerContainer img {
  padding: 25px;
  width: 130px;
}

.socialLinks ul {
  list-style: none;
  display: flex;
  margin: 0 40 0 0;
}

.socialLinks ul li {
  font-size: 28px;
  padding: 0 10px;
}

.socialLinks ul li a i {
  /*
    -webkit-background-clip: text !important;
    color: transparent;
    background: linear-gradient(90deg, rgba(100, 200, 224, 1) 15%, rgba(137, 100, 215, 1) 41%, rgba(70, 25, 162, 1) 86%);
   */

  color: white;
}

.socialLinks ul li a i:hover {
  transition: 0.3s;
}

#twitter i:hover {
  color: #04861a;
}

#telegram i:hover {
  color: #04861a;
}

#medium i:hover {
  color: rgb(100, 99, 99);
}

#discord i:hover {
  color: #5865f2;
}

.socialLinkAndButton button {
  padding: 10 40px;
  background: linear-gradient(
    90deg,
    rgba(135, 210, 31, 255) 31%,
    #87D21F 79%
  );
  font-weight: bold;
  font-family: MenuShapiro;
  font-size: 16px;
  color: black;
  border: none;
  outline: none;
  border-radius: 20px;
}

button:hover {
  cursor: pointer;
  transition: 0.4s;
  box-shadow: rgba(98, 248, 187, 1) 0px 0px 15px;
}

#toggleMenu {
  display: none;
  position: relative; /* or absolute/fixed, depending on your layout */
  z-index: 999000; /* Ensure this is higher than the background element */
  cursor: pointer;
  pointer-events: all !important;
}

/*Sticky Nav*/

.header.sticky {
  background-color: rgb(0, 0, 0);
  position: fixed;
  transition: 5s;
}

/*Mobile Nav*/
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: black;
  overflow-x: hidden;
  transition: 0.5s;
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.sidenav a {
  padding: 25px;
  text-decoration: none;
  font-size: 20px;
  color: white;
  display: block;
  transition: 0.3s;
  font-family: MenuShapiro;
}

.sidenav div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#mobilebtn {
  padding: 15 40px;
  background-color: transparent;
  border: 1px solid #87D21F;
  border-radius: 10px;
  font-family: Descriptions;
}

.mobileIcons {
  display: grid;
  grid-template-columns: repeat(2, auto);
  list-style: none;
}

.mobileIcons i {
  color: white;
  font-size: 35px;
}

/* First Section */

#Home {
  padding: 90 0 0 140;
  z-index: 99;
  background-color: #080d01;
  box-shadow: 0 44px 60px #080d01;
  height: 100%;
}

.allContent {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.contentContainer {
  width: 50%;
  padding: 0 0 0 20px;
}

.contentContainer * {
  padding: 20 0;
}

.contentContainer h1 {
  font-family: MainTitle;
  font-size: 46px;
}

.contentContainer p {
  font-family: Descriptions;
  font-size: 18px;
}

.contentContainer h3 {
  color: transparent;
  font-family: MenuShapiro;
  align-items: center;
  background: linear-gradient(
    90deg,
    rgba(135, 210, 31, 255) 31%,
    #87D21F 79%
  );
  -webkit-background-clip: text;
  display: flex;
  text-transform: uppercase;
}

.contentContainer > h3::after {
  content: "";
  background: linear-gradient(
    90deg,
    rgba(135, 210, 31, 255) 31%,
    #325106 79%
  );
  width: 100px;
  height: 5px;
  margin: 0 20;
  border-radius: 10px;
}

.homeButtons {
  display: flex;
  flex-direction: row;
}

.homeButtons button {
  border: none;
  padding: 15 40;
  background: linear-gradient(
    90deg,
    rgba(135, 210, 31, 255) 31%,
    #87D21F 79%
  );
  font-weight: bold;
  font-family: MenuShapiro;
  font-size: 16px;
  outline: none;
  border-radius: 20px;
  margin: 10;
  cursor: pointer;
}

.homeButtons button a {
  text-decoration: none;
  color: black;
}

.heroImage {
  width: 50%;
  display: flex;
  border-radius: 30px;
  margin: -50 10;
}

/* Features Section */

.featuresContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gridFeatures {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 50px;
  cursor: pointer;
  height: 200px;
  padding: 0 30;
}

.gridFeatures i {
  margin: 0 0 10 0;
  font-size: 20px;
}

.portfolio,
.giveaways,
.deals {
  width: 100%;
  height: 50%;
  background-color: #131313;
  /*
    box-shadow: 0 3px 6px 0 rgb(0 0 0 / 25%);
    */
  padding: 20 30;
  border-radius: 10px;
  font-family: MiddleWide;
  line-height: 1.2;
  transition: 0.5s;
}

.gridFeatures div h2 {
  margin: 0 0 10 0;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gridFeatures div h2::after {
  font-family: "Font Awesome 5 Free";
  content: "\f107";
  font-size: 28px;
  margin: 0 10;
  color:  #87D21F;
}

.gridFeatures div p {
  font-size: 16px;
  color: #e0e0e0b7;
  font-family: Descriptions;
}

.dropdownDescription {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
  transition: 0.5s;
}

/* Hover Effect*/

.gridFeatures > div:hover,
.gridFeatures > div:active,
.gridFeatures > div:hover .dropdownDescription,
.gridFeatures > div:active .dropdownDescription {
  transition: 0.5s;
  visibility: visible;
  opacity: 1;
  height: 90%;
}

/* Marketplace platform */

.platform {
  padding: 10 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.platformImage img {
  width: 90%;
  /*
    box-shadow: 5px 10px 25px rgba(255, 253, 253, 0.096);*/
  border-radius: 20px;
}

.platformContent {
  width: 100%;
  display: flex;
  font-family: MiddleWide;
  line-height: 1.5;
  /* Image not as same size as the others*/
}

.platformContent p {
  font-size: 18px;
}

/* Tax Distribution*/

.taxContainer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 20px;
  padding: 10 40;
}

.tax {
  padding: 10 20 20 20;
  height: 190px;
  background-color: #1b1c1e;
  border-radius: 20px;
  max-width: 100%;
}

.taxDescription p {
  padding: 10 0;
  font-family: MiddleWide;
  line-height: 1.2;
  font-size: 14px;
  color: rgb(202, 200, 200);
  font-stretch: expanded;
}

.taxPercentage p {
  padding: 100px;
  font-size: 22px;
  font-family: MainTitle;
  padding: 0;
  margin: 0;
}

.taxPercentage > p::before {
  content: "";
  display: flex;
  flex-direction: column;
  width: 20%;
  height: 8px;
  border-radius: 20px;
  margin: 15 0;
}

.percentageDef::before {
  background-color: #a52286;
}

.percentageLightRed::before {
  background-color: #c22a5a;
}

.percentageOrange::before {
  background-color: #3202c3;
}

.percentageBlue::before {
  background-color: #e9625f;
}



.highlight {
  background-color: #87D21F;
  padding:5px;
  text-align: center;
}

/* RoadMap */

.firstRoadmap {
  padding: 0 40;
  margin: 30 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.firstRoadmap p {
  width: 50%;
  font-size: 18px;
  font-family: MiddleWide;
  color: #e0e0e0b7;
  font-weight: 400 !important;
  line-height: 1.5;
}

.firstRoadmap h2 {
  -webkit-background-clip: text !important;
  color: transparent;
  font-size: 206px;
  font-family: MainTitle;
  padding: 20 0 0 0;
  margin: 0 40 0 0;
}

#roadMapRed {
  align-items: center;
}

#roadMapRed h2 {
  background: linear-gradient(
    90deg,
    rgba(254, 94, 0, 1),
    rgba(246, 69, 98, 1),
    rgba(194, 45, 225, 1),
    rgba(246, 69, 98, 1),
    rgba(254, 94, 0, 1)
  );
}

#roadMapBlue h2 {
  -webkit-background-clip: text !important;
  background: linear-gradient(90deg, #3d6dfc, #42f5e1, #3d6dfc);
}

#roadMapBluePhase > ul > li::before {
  background: linear-gradient(90deg, #3d6dfc, #42f5e1, #3d6dfc) !important;
}

#roadMapBlue {
  align-items: center;
}

.Phase {
  width: 35%;
  padding: 20px 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #1b1c1e;
  border-radius: 20px;
  /*
    box-shadow: 5px 10px 20px rgba(241, 236, 236, 0.068);*/
}

.Phase h1 {
  font-size: 30px;
  font-family: MainTitle;
  font-weight: 900;
  margin: 10 0;
}

 h2 {
  font-size: 20px;
  font-family: MainTitle;
  font-weight: 900;
  margin: 10 0;
  overflow-wrap: anywhere;
}

.Phase ul {
  list-style: none;
  font-family: Descriptions;
  text-align: left;
  padding: 0;
  width: 100%;
}

.Phase ul li {
  margin: 10 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 18px;
  color: #c3c3e1;
}

.Phase > ul > li::before {
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: linear-gradient(90deg, #f64562, #fe5e00 100%);
  display: block;
  margin: 0 10;
}

/*Tokenomics*/

.tokenomicsContainer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  padding: 30px;
}

.tokenStats {
  padding: 10 20;
  border-radius: 10px;
  background-color: #1b1c1e;
}

.tokenNumber {
  font-size: 38px;
  font-family: MainTitle;
  margin: 10 0;
}

.tokenNumber::before {
  content: "";
  display: flex;
  flex-direction: column;
  width: 25%;
  height: 8px;
  border-radius: 20px;
  margin: 15 0;
}

.tokenTitle {
  font-family: Descriptions;
  color: #e0e0e0b7;
  font-size: 18px;
}

#chart {
  display: flex;
  align-items: center;
  justify-content: center;
}

#token {
  font-size: 28px;
}

#supply {
  color: #c3c3e1;
  font-weight: 100;
  margin: 10 0;
}

#tokenInfonContainer {
  font-family: MiddleWide;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#monthsContainer {
  grid-area: 1 / 1 / 2 / 3;
}


#chart {
  grid-area: 2 / 1 / 4 / 3;
}


#monthsContainer > h1::before {
  background-color: white;
}

#artistFund > h1::before {
  background-color: #c53ba9;
}

#earlyBackers > h1::before {
  background-color: #0072c5;
}

#treasury > h1::before {
  background-color: #48b2ff;
}

#advisors > h1::before {
  background-color: #9e7df4;
}

#rewards > h1::before {
  background-color: #04d1f7;
}

#balancerLBP > h1::before {
  background-color: #48b2ff;
}

#initialLiquidity > h1::before {
  background-color: #02ffff;
}

#team > h1::before {
  background-color: #00dcff;
}

#airdrop > h1::before {
  background-color: #00a1e3;
}

/* Footer */
footer {
  padding-top: 100px;
}

.footerContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 10 30;
}

.footerContainer p {
  font-family: 14px;
  font-family: Descriptions;
}

/*Scrollbar */

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

::-webkit-scrollbar-track {
  border-radius: 10px;
  z-index: 99;
  background-color: black;
}

::-webkit-scrollbar-thumb {
  background-color: white;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.3) 20%,
    transparent 20%,
    transparent 40%,
    rgba(255, 255, 255, 0.3) 40%,
    rgba(255, 255, 255, 0.3) 60%,
    transparent 60%,
    transparent 80%,
    rgba(255, 255, 255, 0.3) 80%
  );
  border-radius: 10px;
}

/*RESPONSIVE */

@media (max-width: 1480px) {
  /*Nav*/
  .header {
    padding: 0 50;
  }

  /*Sections*/
  #Home {
    padding:130px 0 0 60px;
  }
  .styledSection {
    padding: 30 100 30 60;
    scroll-margin: 50px;
    transition: 0.4s;
  }

  /*Features */

  .gridFeatures > div:hover,
  .gridFeatures > div:hover .dropdownDescription {
    height: 90%;
  }

  /* Tax */

  .taxContainer {
    display: grid;
    grid-template-columns: repeat(3, auto);
    align-items: center;
    justify-content: space-between;
  }

  .tax {
    max-width: 100% !important;
  }

  .taxPercentage > p::before {
    width: 10%;
  }
}

@media (max-width: 1400px) {
  /*Features*/

  .gridFeatures > div:hover,
  .gridFeatures > div:hover .dropdownDescription {
    height: 95%;
  }

  /*Hero Section*/
  /* #Home {
    padding: 80 0 0 140;
    } */

  #marketplace {
    padding-top: 100px;
  }
}

@media (max-width: 1300px) {
  /*Nav*/
  .header {
    padding: 20 20 0 60;
  }

  /*Sections*/

  .styledSection {
    padding: 30 0 30 0;
    scroll-margin-top: 60px;
  }

  /* Marketplace */

  .platform {
    padding: 0 30;
  }

  .platformContent {
    width: 90%;
  }

  .platformContent p {
    width: 100%;
    font-size: 14px;
    padding: 0;
  }

  /*Roadmap*/
  .firstRoadmap p {
    font-size: 16px;
  }
}

@media (max-width: 1270px) {
  .socialLinkAndButton,
  .navbar {
    display: none;
  }

  #toggleMenu {
    transition: 0.5s;
    display: block;
    font-size: 32px;
    cursor: pointer;
  }
}

@media (max-width: 1150px) {
  /*Sections*/

  .sectionTitle {
    font-size: 30px;
  }

  /*Home */

  .contentContainer h1 {
    font-size: 36px;
  }

  .contentContainer p {
    font-size: 16px;
  }

  /*Features*/

  .gridFeatures div h2 {
    font-size: 16px;
  }

  .gridFeatures div p {
    font-size: 15px;
  }

  /*Tokenomics*/

  .tokenomicsContainer {
    display: flex;
    flex-wrap: wrap;
  }

  .tokenTitle {
    font-size: 15px;
  }

  .tokenNumber {
    font-size: 34px;
  }

  .tokenStats {
    flex: 1 1 30%;
  }

  #monthsContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  #monthsContainer h1 {
    font-size: 34px;
  }

  #monthsContainer p {
    font-size: 20px;
  }

  #backgroundImage {
  }
}

@media (max-width: 1024px) {
  .header {
    top: 0;
  }

  /*Sections*/

  .styledSection {
    padding: 80 20px 20 20;
  }

  /*Home*/
  #Home {
    padding: 140 0 140 0;
    height: 70%;
  }

  .allContent {
    padding: 0 40;
  }

  .contentContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .contentContainer h1 {
    font-size: 48px;
    text-align: center;
  }

  .heroImage {
    display: none;
  }

  /* Marketplace */

  .platform {
    gap: 50px;
  }

  .platformImage {
    width: 100%;
  }

  .platformImage img {
    width: 100%;
  }

  .platformContent {
    width: 50%;
  }

  .platformContent p {
    font-size: 12px;
  }
}

@media (max-width: 900px) {

  /*Marketplace*/
  .platform {
    display: flex;
    flex-direction: column;
  }

  .platformContent {
    padding: 0 10px;
    width: 100%;
  }

  .platformContent p {
    font-size: 16px;
  }

  /* Features */

  .gridFeatures {
    flex-direction: column;
    height: 450px;
  }

  .portfolio,
  .giveaways,
  .deals {
    height: 100px;
  }

  /*Roadmap*/

  .firstRoadmap {
    gap: 50px;
  }

  .firstRoadmap p {
    width: 50%;
    font-size: 14px;
  }

  .Phase {
    width: 50%;
  }

  .firstRoadmap h2 {
    font-size: 146px;
  }
}

@media (max-width: 800px) {
  /*Home*/
  #Home {
    text-align: center;
  }

  /*Roadmap*/
  .firstRoadmap {
    padding: 0 40;
    margin: 10 0 80 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .firstRoadmap p {
    width: 100%;
  }

  #roadMapRed {
    flex-direction: column-reverse;
  }

  .Phase {
    width: 100%;
  }

  /* Tax*/

  .taxContainer {
    display: grid;
    grid-template-columns: repeat(1, auto);
  }
}

@media (max-width: 780px) {
  #home {
    height:100%;
  }
}

@media (max-width: 500px) {   

  #marketplace {
    padding-top:160px;
  }
  
  .styledSection {
    padding: 60 0 20 0;
  }

  .header {
    padding: 0 20;
  }

  .allContent {
    width: 100%;
    padding: 0;
  }

  .contentContainer {
    width: 100%;
    padding: 0 20;
  }

  .contentContainer h1 {
    font-size: 45px;
    width: 100%;
  }

  .homeButtons {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .gridFeatures > div:checked,
  .gridFeatures > div:checked .dropdownDescription {
    transition: 0.5s;
    visibility: visible;
    opacity: 1;
    height: 80%;
  }

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

@media (max-width: 400px) {
  .sectionTitle {
    font-size: 25px;
  }

  .contentContainer h1 {
    font-size: 35px;
  }

  .homeButtons button {
    padding: 15 40;
  }

  #chart {
    width: 100% !important;
    background-color: transparent;
  }

  .firstRoadmap h2 {
    font-size: 100px;
  }

  .homeButtons {
    flex-direction: column;
  }
}

@media(max-width:370px) {

}

a,
button {
  pointer-events: auto; /* Ensure pointer events are enabled */
  cursor: pointer;
  transition: 0.3s;
}

button:hover {
  /* Add any additional hover styles you want here */
  box-shadow: rgba(98, 248, 187, 1) 0px 0px 15px;
}

body {
  overflow-x: hidden;
}

body > *:not(.container2) {
  position: relative;
  z-index: 2;
  pointer-events: auto; /* Enable pointer events for all elements */
}

a:hover,
button:hover {
  cursor: pointer;
  transition: 0.3s;
  /* Add any additional hover styles you want here */
}

body > *:not(.container2):hover {
  pointer-events: none; /* Re-enable pointer events on hover */
}

.featuresContainer {
  pointer-events: auto; /* Enable pointer events */
}

.gridFeatures > div:hover,
.gridFeatures > div:active,
.gridFeatures > div:hover .dropdownDescription,
.gridFeatures > div:active .dropdownDescription {
  transition: 0.5s;
  visibility: visible;
  opacity: 1;
  height: 95%;
  pointer-events: auto; /* Ensure pointer events are enabled on hover */
}

@keyframes animate {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

@keyframes moveUpDown {
  0%,
  100% {
    transform: translateY(0) skewY(-20deg);
  }
  50% {
    transform: translateY(20px) skewY(-20deg);
  }
}

.container2 {
  position: fixed;
  transform: skewY(-20deg);
  z-index: -1;
  left: 77%;
  top: 18vh; /* Use vh for vertical positioning */
  opacity: 0.4;
  pointer-events: auto;
  animation: moveUpDown 3s ease-in-out infinite;

  .cube {
    position: relative;
    z-index: 2;
    &:nth-child(2) {
      z-index: 1;
      translate: -5vw -5vh; /* Halved vw and vh for translation */
    }
    &:nth-child(3) {
      z-index: 3;
      translate: 5vw 5vh; /* Halved vw and vh for translation */
    }
    div {
      position: absolute;
      display: flex;
      flex-direction: column;
      gap: 4vh; /* Halved vh for gap */
      translate: calc(-10vw * var(--x)) calc(-4vh * var(--y)); /* Halved vw and vh */
      background: #dcdcdc;
      span {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2.4vw; /* Halved vw for font size */
        font-family: MainTitle;
        color: green;
        width: 6vw; /* Halved vw for width */
        height: 6vw; /* Halved vw for height */
        background: #dcdcdc;
        z-index: calc(1 * var(--i));
        transition: 1.5s;
        &:hover {
          color: white;
          transition: 0s;
          background: green; /* Set background to green on hover */
          filter: drop-shadow(0 0 1.5vw green); /* Halved vw for shadow */
          &:before,
          &:after {
            transition: 0s;
            background: green; /* Set background to green on hover */
          }
        }
        &:before {
          content: "";
          position: absolute;
          left: -4.5vw; /* Halved vw for left */
          width: 4.5vw; /* Halved vw for width */
          height: 100%;
          background: #fff;
          transform-origin: right;
          transform: skewY(45deg);
          transition: 1.5s;
        }
        &:after {
          content: "";
          position: absolute;
          top: -4.5vw; /* Halved vw for top */
          left: 0;
          width: 100%;
          height: 4.5vw; /* Halved vw for height */
          background: #f2f2f2;
          transform-origin: bottom;
          transform: skewX(45deg);
          transition: 1.5s;
        }
      }
    }
  }
}

/* Loader */

.container-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed !important;
  z-index: 999999999999 !important;
  background-color: #6ab04c;
  width: 100%;
  height: 100%;
  animation: fadeOut 0.5s ease-out forwards; /* Apply fadeOut animation */
  animation-delay: 4s;
}

/* Enhanced hand styling with parallax effect */
.hand-container {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  transform: perspective(600px); /* Depth effect */
}

.left-hand,
.right-hand {
  width: 150px;
  filter: drop-shadow(
    6px 6px 8px rgba(0, 0, 0, 0.4)
  ); /* Enhanced shadow for realism */
  transition: transform 0.5s ease-in-out; /* Smooth transition effect */
}

.left-hand {
  animation: moveLeftHand 2s cubic-bezier(0.65, 0.05, 0.36, 1) forwards 2s; /* Start animation after 2s */
  transform-origin: center right;
}

.right-hand {
  animation: moveRightHand 2s cubic-bezier(0.65, 0.05, 0.36, 1) forwards 2s; /* Start animation after 2s */
  transform-origin: center left;
}

@keyframes moveLeftHand {
  0% {
    transform: translateX(0) rotate(0deg) scale(1);
  }
  90% {
    transform: translateX(35px) rotate(-5deg) scale(1.1);
  }
  100% {
    transform: translateX(30px) rotate(0deg) scale(1);
  }
}

@keyframes moveRightHand {
  0% {
    transform: translateX(0) rotate(0deg) scale(1);
  }
  90% {
    transform: translateX(-35px) rotate(5deg) scale(1.1);
  }
  100% {
    transform: translateX(-30px) rotate(0deg) scale(1);
  }
}

/* Text animation styling with sliding effect */
.text-container {
  font-size: 3rem;
  color: #000 !important; /* Black text for contrast against green background */
  display: flex;
  z-index: 1;
  text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.3); /* Stronger shadow for more pop */
}

.letter {
  font-family: MainTitle, sans-serif; /* Use NokiaFC22 font */
  opacity: 0;
  color: #000;
  transform: translateY(40px) skewX(10deg); /* Skew for dynamic entrance */
  animation: letterAnimation 0.7s forwards; /* Keep letters visible at the end */
}

/* Enhanced text animation for each letter */
@keyframes letterAnimation {
  0% {
    opacity: 0;
    transform: translateY(40px) skewX(10deg);
  }
  70% {
    opacity: 1;
    transform: translateY(-10px) skewX(0deg);
  } /* Bounce up effect */
  100% {
    opacity: 1;
    transform: translateY(0px);
  } /* Keep letters visible */
}

/* Arcade-style loading bar styling */
.loading-bar {
  width: 200px;
  height: 15px;
  background: rgba(0, 0, 0, 0.1);
  border: 2px solid #000; /* Black border for arcade style */
  border-radius: 5px;
  margin-top: 20px;
  position: relative;
}

.loading-fill {
  display: grid;
  grid-template-columns: repeat(10, 1fr); /* 10 squares */
  width: 100%;
  height: 100%;
  position: relative;
}

.square {
  width: 100%;
  height: 100%;
  background: black; /* Black fill */
  opacity: 0; /* Start invisible */
  animation: squareAnimation 0.5s forwards; /* Fill animation */
}

@keyframes squareAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  } /* Keep filled after animation */
}

/* Fill each square one by one */
.square:nth-child(1) {
  animation-delay: 2s;
}
.square:nth-child(2) {
  animation-delay: 2.05s;
}
.square:nth-child(3) {
  animation-delay: 2.1s;
}
.square:nth-child(4) {
  animation-delay: 2.15s;
}
.square:nth-child(5) {
  animation-delay: 2.2s;
}
.square:nth-child(6) {
  animation-delay: 2.25s;
}
.square:nth-child(7) {
  animation-delay: 2.3s;
}
.square:nth-child(8) {
  animation-delay: 2.35s;
}
.square:nth-child(9) {
  animation-delay: 2.4s;
}
.square:nth-child(10) {
  animation-delay: 2.45s;
}

/* Hover effect on hands for interactivity */
.left-hand:hover,
.right-hand:hover {
  transform: scale(1.1); /* Slight scale up on hover */
  cursor: pointer;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    display:none;
  }
}


.important-note {
  padding:50px;
  font-family: MiddleWide;
}