@tailwind base;
@tailwind components;
@tailwind utilities;

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

@font-face {
  font-family: CCMaladroit;
  src: url(../font/Brocats.otf);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: CCMaladroit;
  font-weight: 400;
  color: #fff;
  background-color: #0052fe;
  overflow-x: hidden;
}

p {
  font-size: 1.5vw;
}

.header,
.about,
.video {
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
}

.header {
  background-image: url(../images/header.png);
  height: 58vw;
}

.header .header_main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5vw;
}

.header .right {
  display: flex;
  flex-direction: column;
  gap: 0.5vw;
  transform: translateX(-10vw);
  margin-top: -5vw;
}

.header .heading {
  width: 90vw;
}

.header p {
  font-size: 2vw;
}

.header .links {
  display: flex;
  align-items: center;
  gap: 1vw;
}

.header .links a img {
  width: 5vw;
  transition: all 0.3s ease-in-out;
}

.header .links a img:hover {
  transform: scale(1.1);
}

.header .buy {
  background-color: #717689;
  color: #ffdd58;
  border-radius: 4vw;
  border: 2px solid #000;
  width: fit-content;
  padding: 1vw 3vw;
  margin-top: 2vw;
  rotate: 3deg;
  transition: all 0.3s ease-in-out;
  font-size: 2vw;
  text-wrap: nowrap;
}

.header .buy:hover {
  rotate: 0deg;
}

.marquee {
  position: relative;
  z-index: 99999;
}

.slider_main {
  display: flex;
  align-items: center;
}

/* video  */
.video {
  background-image: url("../images/video-bg.png");
  height: 32vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video iframe {
  width: 25vw;
  margin-left: 2vw;
  height: 30vw;
}

.slider-container {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  background-color: #ffdd58;
  padding: 5vw;
  border-radius: 5vw;
}

.slider-container h1 {
  font-size: 7vw;
  color: #003dbf;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
  line-height: 7vw;
  text-align: center;
  margin-bottom: 3vw;
}

.slider {
  display: flex;
  transition: transform 0.5s ease;
}

.slide {
  min-width: 30%;
}

.item {
  margin: 10px;
  padding: 20px;
  background-color: #717689;
  border: 0.3vw solid #000000;
  border-radius: 3vw;
}

.item span {
  padding: 0.5vw 1vw;
  font-size: 1.5vw;
  background-color: #0052fe;
  border: 0.2vw solid #000000;
  border-radius: 1vw;
  display: flex;
  flex-direction: column;
  gap: 3vw;
  width: fit-content;
}

.item p {
  font-size: 1.5vw;
  margin: 1vw 0;
}

.dots {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.dot {
  width: 12px;
  height: 12px;
  margin: 0 5px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s;
  cursor: pointer;
}

.dot.active {
  background-color: #0052fe;
}

@media screen and (max-width: 768px) {
  .slide {
    min-width: 100%;
    /* For mobile: 1 item */
  }
}

.twittes {
  padding: 5vw;
  position: relative;
}

.twittes .heading {
  width: 50vw;
  margin: auto;
  margin-bottom: 5vw;
}

.twittes .airplane {
  position: absolute;
  left: 0;
  top: 8vw;
  width: 30vw;
}

.twittes .post {
  margin-bottom: 2vw;
}

.twittes .post img {
  height: 100%;
  width: 100%;
}

/* banana_new  */

.banana_new {
  padding: 0vw 5vw 8vw 5vw;
  background-color: #ffce33;
  border-radius: 10vw;
}

.banana_new h1 {
  font-size: 7vw;
  color: #003dbf;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
  line-height: 7vw;
}

.tokenomice {
  padding: 5vw;
}

.tokenomice .right {
  margin-left: -5vw;
}

.tokenomice h1 {
  font-size: 5vw;
  color: #ffdd00;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
  text-align: center;
}

.toc-box {
  display: flex;
  align-items: center;
  gap: 1vw;
}

.toc-box img {
  width: 10vw;
}

.toc-box h2 {
  font-size: 2vw;
}

.toc-box p {
  font-size: 2vw;
  color: #ffdd00;
}

/* howtobuy */
.howtobuy {
  background-color: #ffdd00;
  border-radius: 10vw;
  padding: 10vw 5vw;
}

.howtobuy h1 {
  font-size: 6vw;
  color: 003DBF;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
  line-height: 6vw;
}

.howtobuy .para {
  color: #000;
  font-size: 2vw;
  margin-top: 2vw;
}

.howtobuy .main {
  margin-top: -5vw;
}

.howtobuy h2 {
  background-color: #0052fe;
  border: 2px solid #000;
  border-radius: 5vw;
  padding: 1vw 3vw;
  width: fit-content;
  font-size: 3vw;
  rotate: 3deg;
  margin-bottom: 2vw;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
}

.howtobuy .box_1 {
  padding: 6vw 4vw 2vw 4vw;
  border-radius: 4vw;
  border: 4px solid #000;
  rotate: -4deg;
  background-color: #717689;
}

.box_2 {
  rotate: 4deg !important;
}

.howtobuy .box_1 span {
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  border: 4px solid #000;
  color: #fff;
  display: block;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0052fe;
  font-size: 3vw;
  margin-top: -8vw;
}

.howtobuy .box_1 h3 {
  font-size: 2.5vw;
  -webkit-text-stroke-width: 1.5px;
  -webkit-text-stroke-color: black;
}

/* roadmap  */
.roadmap {
  padding: 5vw 8vw;
  position: relative;
}

.roadmap .bg {
  position: absolute;
  right: 0;
  bottom: 40vw;
  width: 40vw;
  z-index: -1;
}

.roadmap h1 {
  font-size: 8vw;
  color: #ffdd00;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
  line-height: 6vw;
  text-align: center;
  margin-bottom: 5vw;
}

.roadmap h2 {
  background-color: #ffdd00;
  border: 2px solid #000;
  border-radius: 5vw;
  padding: 1vw 12vw;
  width: fit-content;
  font-size: 3vw;
  rotate: -3deg;
  margin-bottom: 2vw;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  margin-top: -3vw;
}

.boxes_1 {
  margin-top: 10vw;
}

.boxes_2 {
  margin-top: 5vw;
}

/* join  */
.join {
  background-color: #ffdd00;
  border-top-left-radius: 20vw;
  border-top-right-radius: 20vw;
  padding: 8vw 5vw 10vw 5vw;
}

.join h1 {
  font-size: 8vw;
  color: #0052fe;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
  line-height: 6vw;
  text-align: center;
  margin-left: 15vw;
  margin-bottom: 2vw;
}

.join .para {
  color: #000;
  font-size: 2.3vw;
  margin-top: 2vw;
}

.join .main {
  width: 20vw;
  margin-left: 10vw;
  margin-top: -5vw;
}

.join .links {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 1vw;
  margin-top: -10vw;
}

.join .links a {
  background-color: #717689;
  color: #ffdd58;
  border-radius: 4vw;
  border: 2px solid #000;
  width: fit-content;
  padding: 1vw 3vw;
  margin-top: 0vw;
  transition: all 0.3s ease-in-out;
  font-size: 2vw;
  text-wrap: nowrap;
}

.join .links a:hover {
  transform: scale(1.1);
}

/* footer  */
.footer {
  background-image: url("../images/footer-bg.png");
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 2vw 5vw;
}

.footer h1 {
  font-size: 14vw;
  text-align: center;
}

.footer .main {
  margin: -15vw auto auto auto;
  width: 25vw;

  display: block;
}

.footer .links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2vw;
  margin-bottom: 2vw;
}

.footer .links a img {
  width: 5vw;
  transition: all 0.3s ease-in-out;
}

.footer .links a img:hover {
  transform: scale(1.1);
}

.footer p {
  /* transform: translateY(-13vw); */
  text-align: center;
  width: 50vw;
  margin: auto;
  margin-bottom: 2vw;
}

@media screen and (max-width: 480px) {
  p {
    font-size: 3vw;
  }

  body,
  html {
    overflow-x: hidden;
  }

  .header .right {
    transform: translateX(0vw);
  }

  .header {
    background-image: url(../images/header.png);
    height: 170vw;
    padding: 5vw;
  }

  .header .header_main {
    flex-direction: column-reverse;
  }

  .header .heading {
    width: 70vw;
    margin-left: 10vw;
  }

  .header .right {
    display: flex;
    flex-direction: column;
    gap: 1vw;
    margin-top: 0vw;
  }

  .header p {
    font-size: 4vw;
  }

  .header .links {
    display: flex;
    align-items: center;
    gap: 1vw;
  }

  .header .links a img {
    width: 10vw;
  }

  .item span {
    padding: 0.5vw 1vw;
    font-size: 5vw;
  }

  .item p {
    font-size: 5vw;
    margin: 1vw 0;
  }

  .header .buy {
    background-color: #717689;
    color: #ffdd58;
    border-radius: 4vw;
    border: 2px solid #000;
    width: fit-content;
    padding: 1vw 3vw;
    margin-top: 2vw;
    rotate: 3deg;
    transition: all 0.3s ease-in-out;
    font-size: 4vw;
    text-wrap: nowrap;
  }

  .header .buy:hover {
    rotate: 0deg;
  }

  .twittes .heading {
    width: 70vw;
    margin: auto;
  }

  /* tokenomice  */

  .tokenomice {
    padding: 5vw;
  }

  .tokenomice .right {
    margin-left: 0vw;
  }

  .tokenomice h1 {
    font-size: 8vw;
    -webkit-text-stroke-width: 1px;
    margin-bottom: 5vw;
  }

  .toc-box {
    display: flex;
    align-items: center;
    gap: 1vw;
  }

  .toc-box img {
    width: 20vw;
  }

  .toc-box h2 {
    font-size: 5vw;
  }

  .toc-box p {
    font-size: 4vw;
    color: #ffdd00;
  }

  /* howtobuy */

  .howtobuy h1 {
    font-size: 8vw;
    line-height: 8vw;
  }

  .howtobuy .para {
    color: #000;
    font-size: 2.5vw;
  }

  .howtobuy h2 {
    font-size: 6vw;
    margin-bottom: 2vw;
    margin-top: 2vw;
    -webkit-text-stroke-width: 1.5px;
  }

  .howtobuy .box_1 {
    padding: 6vw 4vw 7vw 4vw;
    border: 2px solid #000;
    margin-bottom: 5vw;
  }

  .box_2 {
    rotate: 4deg !important;
  }

  .howtobuy .box_1 span {
    width: 10vw;
    height: 10vw;
    border: 2px solid #000;
    font-size: 5vw;
    margin-top: -10vw;
  }

  .howtobuy .box_1 h3 {
    font-size: 5vw;
  }

  .howtobuy .box_1 p {
    font-size: 3vw;
    letter-spacing: 1px;
  }

  /* .roadmap  */
  /* roadmap  */
  .roadmap {
    padding: 10vw 8vw;
  }

  .roadmap .bg {
    position: absolute;
    right: -10vw;
    bottom: 70vw;
    width: 100vw;
    z-index: -1;
  }

  .roadmap h2 {
    font-size: 6vw;
    rotate: -3deg;
  }

  .boxes_1 {
    margin-top: -10vw;
  }

  .boxes_2 {
    margin-top: -5vw;
  }

  /* footer  */

  .footer h1 {
    font-size: 20vw;
    text-align: center;
  }

  .footer .main {
    margin: -18vw auto auto auto;
    width: 40vw;
    display: block;
  }

  .footer .links {
    margin-bottom: 4vw;
  }

  .footer .links a img {
    width: 9vw;
    transition: all 0.3s ease-in-out;
  }

  .footer .links a img:hover {
    transform: scale(1.1);
  }

  .footer p {
    /* transform: translateY(-13vw); */
    text-align: center;
    width: 80vw;
    margin: auto;
    margin-bottom: 2vw;
  }

  /* video  */
  .video {
    height: 50vw;
    background-image: none;
  }

  .video iframe {
    width: 100%;
    margin-left: 0vw;
    height: 100%;
  }
}

.float {
  position: fixed;
  width: 120px;
  height: 60px;
  bottom: 40px;
  right: 40px;
  background-color: #0c9;
  color: #fff;
  border-radius: 50px;
  text-align: center;
  box-shadow: 2px 2px 3px #999;
}