* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Titan One", sans-serif;
}

.lucky_font {
  font-family: "Luckiest Guy", cursive;
}

.outfit_font {
  font-family: "Outfit", sans-serif;
}

section:not(.hero) .title {
  text-shadow: 0px 12px 0px #000000bf;
  -webkit-text-stroke: 4px black;
}

/* navbar */
nav .logo h2 {
  text-shadow: 0 3px 0 black;
  -webkit-text-stroke: 1px black;
}

nav li:hover a {
  color: rgb(20, 20, 20);
}

nav li a {
  font-family: "Luckiest Guy", cursive;
}

nav .buy {
  box-shadow: 0px 4.55px 0px 0px #000000;
  font-family: "Luckiest Guy", cursive;
}

nav .social .media {
  box-shadow: 2.09px 2.09px 0px 0px #000000;
}

nav .social .media:hover {
  transform: scale(1.1);
}

/* menu button */
.menu {
  transform: translateX(-100%);
}

.menu-button {
  display: none;
  overflow: hidden;

  height: 35px;
  width: 45px;

  position: relative;

  align-items: center;
}

.menu-button span {
  width: 100%;
  height: 3px;
  background-color: white;
  position: absolute;
  transition: all 0.3s ease-in-out;
}

.menu-button span:nth-child(1) {
  top: 0;
}

.menu-button span:nth-child(2) {
  position: relative;
}

.menu-button span:nth-child(3) {
  bottom: 0;
}

.menu-button.active span:nth-child(1) {
  transform: rotate(45deg);
  top: 1rem;
}

.menu-button.active span:nth-child(2) {
  width: 0%;
}

.menu-button.active span:nth-child(3) {
  transform: rotate(-45deg);
  bottom: 1rem;
}

/* hero section */
.hero .title {
  -webkit-text-stroke: 4px black;
  text-shadow: 0 15px 0 black;
}

.rotate_img {
  animation: img_rotate 10s linear infinite;
}

@keyframes img_rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* animation */
.float_animation {
  animation: float 2s ease-in-out infinite;
}
@keyframes float {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-20px);
  }
  100% {
    transform: translatey(0px);
  }
}

/* about srction */
.about .btn {
  box-shadow: 0px 5px 0px 0px #000000bf;
}

.about .text h3 {
  -webkit-text-stroke: 4px black;
  text-shadow: 0 12px 0 black;
}

/* tokenomics srction */
.tokenomics .title {
  text-shadow: 0px 12px 0px #000000bf;
  -webkit-text-stroke: 4px black;
}

.copy_address:hover p {
  border-bottom: 2px solid black;
}

.tokenomics .contract {
  box-shadow: 0px 10px 0px 0px #00000073;
}

.tokenomics .btn {
  box-shadow: 0px 5px 0px 0px #000000bf;
}

/* roadmap */

.phase h1 {
  text-shadow: 2px 3px 0px #000000bf;
  -webkit-text-stroke: 1.5px black;
}

/* footer */
.patners h2 {
  text-shadow: 3px 4px 0px #000000bf;
  -webkit-text-stroke: 1.5px black;
}

.by .social a {
  box-shadow: 1.45px 1.45px 0px 0px #000000;
}

/* media queries */
@media screen and (max-width: 1500px) {
  /* about srction */
  .about .btn {
    box-shadow: 0px 3px 0px 0px #000000bf;
  }

  .about .text h3 {
    -webkit-text-stroke: 2px black;
    text-shadow: 0 7px 0 black;
  }
}

@media screen and (max-width: 1024px) {
  .menu-button {
    display: flex;
    position: absolute;
    right: 0;
  }

  .menu {
    transform: translateX(-100%);
  }

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

  /* hero */
  .hero .title {
    -webkit-text-stroke: 3px black;
    text-shadow: 0 12px 0 black;
  }
}

@media screen and (max-width: 500px) {
  section:not(.hero) .title {
    text-shadow: 0px 5px 0px #000000bf;
    -webkit-text-stroke: 1.5px black;
  }

  /* navbar */
  .menu-button {
    width: 27px;
    height: 23px;
  }

  .menu-button.active span:nth-child(1) {
    top: 0.6rem;
  }

  .menu-button.active span:nth-child(3) {
    bottom: 0.7rem;
  }

  nav .buy {
    box-shadow: 0px 2.55px 0px 0px #000000;
  }

  nav .social .media {
    box-shadow: 1.09px 1.09px 0px 0px #000000;
  }

  /* hero */
  .hero .title {
    -webkit-text-stroke: 2px black;
    text-shadow: 0 8px 0 black;
  }

  /* about srction */
  .about .btn {
    box-shadow: 0px 3px 0px 0px #000000bf;
  }

  .about .text h3 {
    -webkit-text-stroke: 1px black;
    text-shadow: 0 5px 0 black;
  }

  /* tokenomics srction */

  .copy_address:hover p {
    border-bottom: 2px solid black;
  }

  .tokenomics .contract {
    box-shadow: 0px 10px 0px 0px #00000073;
  }

  .tokenomics .btn {
    box-shadow: 0px 5px 0px 0px #000000bf;
  }
}

/* marqee section */

/* marqee style */
.btn_cl {
  background-color: #ffffff;
  padding: 20px 24px 20px 24px;
  border-radius: 12px 12px 12px 12px;
  font-family: "Pragati Narrow", Sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 2.88px;
  color: var(--e-global-color-text);
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: var(--e-global-color-text);
  box-shadow: 0px 6px 0px 0px rgba(0, 0, 0, 0.97);
}
/* General Slider Styling */
.slider {
  padding-top: 0;
  height: auto;
  width: 100%;
  margin: auto;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.slide-track {
  display: flex;
  width: calc(25vw * 18); /* Desktop calculation */
  animation: scroll 40s linear infinite;
}

.slide-track:hover {
  animation-play-state: paused;
}

@keyframes scroll {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(calc(-25vw * 9)); /* Move slides horizontally */
  }
}

/* Individual Slide */
.slide {
  height: 20vw; /* Desktop size */
  width: 20vw;
  display: flex;
  align-items: center;
  padding: 15px;
  perspective: 100px;
}

.slide > img {
  width: 100%;
  border-radius: 10px !important;
  transition: transform 1s;
}

.slide img:hover {
  transform: translateZ(20px); /* 3D hover effect */
}

.vidOne {
  width: 100%;
  height: 100%;
}
.mobVid {
  width: 100%;
  height: 100%;
  display: none;
}
.crd {
  margin-bottom: 25px;
}
/* Responsive Design for Phones */
@media (max-width: 768px) {
  .slide-track {
    width: calc(100vw * 10); /* Ensure smooth sliding */
    animation: scroll-phone 40s linear infinite;
  }
  .mobVid {
    width: 100%;
    height: 100%;
    display: block;
  }
  .vidOne {
    width: 100%;
    height: 100%;
    display: none;
  }
  .dp {
    display: none;
  }
  .crd {
    margin-bottom: 30px;
  }
  @keyframes scroll-phone {
    0% {
      transform: translate(0);
    }
    100% {
      transform: translate(calc(-100vw * 5)); /* Adjust for one image view */
    }
  }

  .slide {
    height: 80vw; /* Make images larger on small screens */
    width: 100vw; /* Display one image at a time */
    padding: 0; /* Remove extra padding */
  }

  .slide > img {
    width: 100%;
  }
  .subttl {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .subttl h2 {
    font-size: 36px; /* Adjust heading size */
    line-height: 121px;
    -webkit-text-stroke-width: 1px; /* Thinner strokes for smaller screens */
  }
}

.slide img:hover {
  transform: translateZ(20px);
  transition: transform 1s;
}
.tkn_img {
  width: 300px;
  height: 280px;
}
.tkn_imgt {
  width: 300px;
}
.subttl h2 {
  font-family: "peFont", Sans-serif;
  font-weight: 400;
  line-height: 240px;
  letter-spacing: -2.7px;
  -webkit-text-stroke-width: 3px;
  stroke-width: 5px;
  -webkit-text-stroke-color: #f39c12;
  stroke: #f39c12;
  text-shadow: 0px 2px 0px #f39c12;
  color: #fff;
  font-size: 144px;
}
.subttl {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mmbg {
  padding-bottom: 0;
}
@media screen and (max-width: 768px) {
  .ttl {
    font-size: 90px;
  }
  .mmbg {
    padding: 0px 0 0px;
  }
  .memes {
    display: none;
  }
  .subttl h2 {
    font-family: "peFont", Sans-serif;
    font-weight: 400;
    line-height: 121px;
    letter-spacing: -2.7px;
    -webkit-text-stroke-width: 3px;
    stroke-width: 5px;
    -webkit-text-stroke-color: #f39c12;
    stroke: #f39c12;
    text-shadow: 0px 2px 0px #f39c12;
    color: #fff;
    font-size: 80px;
  }
  .tkn_img {
    width: 100%;
    height: 280px;
  }
  .tkn_imgt {
    width: 100%;
  }
  .catxt {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
  }
  .slide {
    height: 80vw;
    width: 100vw;
    padding: 0;
    margin-right: 21px;
  }
}

.mar_wrapper {
  background-color: red;
  padding-top: 120px;
  padding-bottom: 120px;
  display: flex;
  justify-content: center;
  gap: 4rem;
  border-top: 3px solid #962562;
  border-bottom: 3px solid #962562;
}

.marq_txt {
  color: #fff !important;
  font-size: 46px;
  -webkit-text-stroke: 3px black;
  text-shadow: 0 7px 0 black;
  font-family: "Titan One", sans-serif;
}
.marqee_inside {
  display: flex;
  gap: 30px;
  align-items: center;
}
.marq_txt {
}

.mar_wid {
  width: 212px;
  padding: 0 7px;
}
.Marquee {
  overflow: hidden;
  /* cursor: url("./images/hs1.png"), pointer !important; */
}
.marquee {
  position: relative;
  width: 100vw;
  max-width: 100%;
  height: 250px;
  overflow-x: hidden;
  /* cursor: url("./images/hs1.png"), pointer !important; */

  /* direction: ltr; */
}
.Marquee-content {
  display: flex;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 8s linear infinite;
  /* cursor: url("./images/hs1.png"), pointer !important; */
}
.Marquee-content:hover {
  animation-play-state: paused;
  /* cursor: url("./images/hs1.png"), pointer !important; */
}

.Marquee-tag:hover {
  /* background: rgba(255, 255, 255, 0.5); */
  /* cursor: pointer; */
  cursor: url("./images/hs1.png"), pointer !important;
}
.Marquee-tag {
  /* width: 200px; */
  margin: 0 0.5em;
  padding: 1.5rem;
  /* background: rgba(255, 255, 255, 0.1); */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease;
  cursor: url("./images/hs1.png"), pointer !important;
}
@keyframes marquee {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-50%);
  }
}
.left {
  left: 0px !important;
}
.bc {
  border: 1px solid white;
}
@media (min-width: 1000px) and (max-width: 1300px) {
  .sooper {
    right: -80px !important;
    top: -80px !important;
  }
}
@media (max-width: 768px) {
  .gr {
    background: #fff !important;
  }
  .tb {
    color: black !important;
  }
  .bc {
    border: 1px solid #000000;
  }
}

.drop-image {
  position: absolute;
  width: 50px; /* Adjust size as needed */
  height: auto;
  animation: moveDown 15s infinite alternate;

  z-index: 2;
}

.slider {
  padding-top: 2.5vw;
  height: auto;
  width: 100%;
  margin: auto;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.slide-track {
  display: flex;
  width: calc(25vw * 18);
  animation: scroll 40s linear infinite;
}

.slide-track:hover {
  animation-play-state: paused;
}

@keyframes scroll {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(calc(-25vw * 9));
  }
}

.slide-track1 {
  display: flex;
  width: calc(25vw * 18);
  animation: scrolling 40s linear infinite alternate-reverse;
}

.slide-track1:hover {
  animation-play-state: paused;
}

@keyframes scrolling {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(calc(-25vw * 9));
  }
}

.slide {
  height: 24vw;
  width: 20vw;
  display: flex;
  align-items: center;
  padding: 15px;
  perspective: 100px;
}

.slide img {
  width: 100%;
  aspect-ratio: 1/1;
  /*padding: 1.2vw;
  background: #360A5E;*/
  border-radius: 1.5vw;
}

.slider {
  padding-top: 0;
  height: auto;
  width: 100%;
  margin: auto;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.slide-track {
  display: flex;
  width: calc(25vw * 18); /* Desktop calculation */
  animation: scroll 40s linear infinite;
}

.slide-track:hover {
  animation-play-state: paused;
}

@keyframes scroll {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(calc(-25vw * 9)); /* Move slides horizontally */
  }
}

/* Individual Slide */
.slide {
  height: 20vw; /* Desktop size */
  width: 20vw;
  display: flex;
  align-items: center;
  padding: 15px;
  perspective: 100px;
}

.slide > img {
  width: 100%;
  border-radius: 10px !important;
  transition: transform 1s;
}

.slide img:hover {
  transform: translateZ(20px); /* 3D hover effect */
}

.vidOne {
  width: 100%;
  height: 100%;
}
.mobVid {
  width: 100%;
  height: 100%;
  display: none;
}
.crd {
  margin-bottom: 25px;
}
/* Responsive Design for Phones */
@media (max-width: 768px) {
  .slide-track {
    width: calc(100vw * 10); /* Ensure smooth sliding */
    animation: scroll-phone 40s linear infinite;
  }
  .mobVid {
    width: 100%;
    height: 100%;
    display: block;
  }
  .vidOne {
    width: 100%;
    height: 100%;
    display: none;
  }
  .dp {
    display: none;
  }
  .crd {
    margin-bottom: 30px;
  }
  @keyframes scroll-phone {
    0% {
      transform: translate(0);
    }
    100% {
      transform: translate(calc(-100vw * 5)); /* Adjust for one image view */
    }
  }

  .slide {
    height: 80vw; /* Make images larger on small screens */
    width: 100vw; /* Display one image at a time */
    padding: 0; /* Remove extra padding */
  }

  .slide > img {
    width: 100%;
  }
  .subttl {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .subttl h2 {
    font-size: 36px; /* Adjust heading size */
    line-height: 121px;
    -webkit-text-stroke-width: 1px; /* Thinner strokes for smaller screens */
  }
}

.slide img:hover {
  transform: translateZ(20px);
  transition: transform 1s;
}
.tkn_img {
  width: 300px;
  height: 280px;
}
.tkn_imgt {
  width: 300px;
}
.subttl h2 {
  font-family: "peFont", Sans-serif;
  font-weight: 400;
  line-height: 240px;
  letter-spacing: -2.7px;
  -webkit-text-stroke-width: 3px;
  stroke-width: 5px;
  -webkit-text-stroke-color: #f39c12;
  stroke: #f39c12;
  text-shadow: 0px 2px 0px #f39c12;
  color: #fff;
  font-size: 144px;
}
.subttl {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mmbg {
  padding-bottom: 0;
}
@media screen and (max-width: 768px) {
  .ttl {
    font-size: 90px;
  }
  .mmbg {
    padding: 0px 0 0px;
  }
  .memes {
    display: none;
  }
  .subttl h2 {
    font-family: "peFont", Sans-serif;
    font-weight: 400;
    line-height: 121px;
    letter-spacing: -2.7px;
    -webkit-text-stroke-width: 3px;
    stroke-width: 5px;
    -webkit-text-stroke-color: #f39c12;
    stroke: #f39c12;
    text-shadow: 0px 2px 0px #f39c12;
    color: #fff;
    font-size: 80px;
  }
  .tkn_img {
    width: 100%;
    height: 280px;
  }
  .tkn_imgt {
    width: 100%;
  }
  .catxt {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
  }
  .slide {
    height: 80vw;
    width: 100vw;
    padding: 0;
    margin-right: 21px;
  }
}

/* General Slider Styling */
.slider {
  padding-top: 0;
  height: auto;
  width: 100%;
  margin: auto;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.slide-track2 {
  display: flex;
  width: calc(25vw * 18); /* Desktop calculation */
  animation: scrol 40s linear infinite;
}

.slide-track2:hover {
  animation-play-state: paused;
}

@keyframes scrol {
  0% {
    transform: translate(calc(-25vw * 9)); /* Start off-screen to the left */
  }
  100% {
    transform: translate(0); /* End at the initial position */
  }
}

/* Individual Slide */
.slide {
  height: 20vw; /* Desktop size */
  width: 20vw;
  display: flex;
  align-items: center;
  padding: 15px;
  perspective: 100px;
}

.slide > img {
  width: 100%;
  border-radius: 10px !important;
  transition: transform 1s;
}

.slide img:hover {
  transform: translateZ(20px); /* 3D hover effect */
}

/* Responsive Design for Phones */
@media (max-width: 768px) {
  .slide-track2 {
    width: calc(100vw * 10); /* Ensure smooth sliding */
    animation: scroll-phone2 40s linear infinite;
  }

  @keyframes scroll-phone2 {
    0% {
      transform: translate(calc(-100vw * 5)); /* Start off-screen to the left */
    }
    100% {
      transform: translate(0); /* End at the initial position */
    }
  }

  .slide {
    height: 80vw; /* Make images larger on small screens */
    width: 100vw; /* Display one image at a time */
    padding: 0; /* Remove extra padding */
  }

  .slide > img {
    width: 100%;
  }

  .subttl {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .subttl h2 {
    font-size: 36px; /* Adjust heading size */
    line-height: 121px;
    -webkit-text-stroke-width: 1px; /* Thinner strokes for smaller screens */
  }
}

.slide img:hover {
  transform: translateZ(20px);
  transition: transform 1s;
}