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

 

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

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: MamaBear;
  font-weight: 400;
  color: #fff;
  background-color: #2F47FF;
  overflow-x: hidden;
}

.maindiv {
  background-image: url("../images/bg.png");
  background-position: top center;
  background-repeat: no-repeat;
}

p {
  font-size: 1.2vw;
}

/* - ======================== Loading overlay ============================*/
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Loader animation */
.loader {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}

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

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


nav {
  background-color: #274AFF;
  padding: 1vw 3vw;
  border-radius: 3vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav a {
  color: #D0D0F9;
}

nav img {
  width: 15vw;
}



.header,
.about2,
.tokenomice {

  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}

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

.header .main {
  margin-top: 5vw;
  text-align: center;
}

.header .main .heading {
  width: 50vw;
  margin: auto;
  margin-bottom: 2vw;
}

.header .main a img {
  width: 20vw;
  margin: auto;
  transition: all 0.3s ease-in-out;
}

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

/* about  */
.about {
  padding: 0vw 5vw;
  position: relative;
  z-index: 999;
}

.section {
  background-image: linear-gradient(#2f47ff9d, #000000);

}

.about .main_img {
  margin-top: -18vw;
}

.about .caracter {
  position: absolute;
  top: -2vw;
  right: 15vw;
  width: 20vw;
  animation: fly 6s ease-in-out infinite;
}

@keyframes fly {
  0% {
    transform: translateY(0) translateX(0) rotate(-2deg);
  }

  25% {
    transform: translateY(-30px) translateX(-15px) rotate(2deg);
  }

  50% {
    transform: translateY(-60px) translateX(10px) rotate(-3deg);
  }

  75% {
    transform: translateY(-30px) translateX(-10px) rotate(2deg);
  }

  100% {
    transform: translateY(0) translateX(0) rotate(-2deg);
  }
}

.about2 {
  padding: 2vw 5vw;
  background-image: url("../images/about-section.png");
  height: 96vw;
  margin-top: -16vw;
  padding-top: 17vw;
  position: relative;
}

.about2 .heading {
  width: 50vw;
}

.about2 .icon {
  width: 5vw;
}

.about2 h2 {
  font-size: 2vw;
  margin: 1vw 0;
}

.about2 p {
  color: #D0D0F9;
}

.about2 .grid {
  margin-top: 5vw;
}

.about2 a img {
  width: 20vw;
  margin-left: -4vw;
  transition: all 0.3s ease-in-out;
}

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

.about2 .cycal_c {
  position: absolute;
  bottom: 18vw;
  right: 40vw;
  width: 20vw;
  animation: cycleMove 6s linear infinite;
}

@keyframes cycleMove {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg);
  }

  25% {
    transform: translateX(-50px) translateY(-10px) rotate(-1deg);
  }

  50% {
    transform: translateX(-10px) translateY(0) rotate(1deg);
  }

  75% {
    transform: translateX(200px) translateY(10px) rotate(-1deg);
  }

  100% {
    transform: translateX(0) translateY(0) rotate(0deg);
  }
}

/* team  */
.team {
  padding: 0vw 5vw;
  position: relative;
}

.team .main_img {
  margin-top: 0vw;
}

.team .caracter {
  position: absolute;
  top: -8vw;
  left: 18vw;
  width: 26vw;
  animation: floatMoon 3s ease-in-out infinite;
}

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

  25% {
    transform: translateY(-20px) rotate(-3deg);
  }

  50% {
    transform: translateY(0) rotate(3deg);
  }

  75% {
    transform: translateY(-15px) rotate(-1deg);
  }

  100% {
    transform: translateY(0) rotate(0deg);
  }
}


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

.roadmap .main {
  margin-top: 5vw;
  text-align: center;

}

.roadmap .main .heading {
  width: 40vw;
  margin: auto;
  margin-bottom: 2vw;
}



.roadmap .main a img {
  width: 25vw;
  margin: auto;
  transition: all 0.3s ease-in-out;
}

.roadmap .main a img:hover {
  transform: scale(1.1);
}

.roadmap_c {
  width: 20vw;
  position: absolute;
  right: 2vw;
  top: 0vw;
  animation: flyAround 12s infinite ease-in-out;
}

@keyframes flyAround {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  20% {
    transform: translate(-30px, 20px) rotate(-5deg);
  }

  40% {
    transform: translate(-60px, -10px) rotate(5deg);
  }

  60% {
    transform: translate(-30px, 30px) rotate(-3deg);
  }

  80% {
    transform: translate(0, -20px) rotate(3deg);
  }

  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

.roadmap .grid {
  margin-top: 5vw;
  position: relative;
}

.roadmap .grid img {
  width: 5vw;
  margin-left: -1vw;
  position: relative;
  z-index: 99;
}

.roadmap .grid h2 {
  font-size: 2vw;
  margin: 2vw 0;
}

.roadmap .grid ul li {
  color: #E9E4FE;
}

.roadmap .grid .line {
  position: absolute;
  top: 2.5vw;
  left: 2vw;
  width: 100%;
  z-index: -10;
}

/* tokenomice  */

.tokenomice {
  padding: 2vw 5vw;
  background-image: url("../images/token.png");
  height: 75vw;
  position: relative;
}

.tokenomice .token_c {
  position: absolute;
  width: 25vw;
  top: 10vw;
  right: 28vw;
  animation: bounceRotate 4s ease-in-out infinite;
}

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

  25% {
    transform: translateY(-20px) rotate(-5deg);
  }

  50% {
    transform: translateY(0) rotate(0deg);
  }

  75% {
    transform: translateY(-15px) rotate(5deg);
  }

  100% {
    transform: translateY(0) rotate(0deg);
  }
}

.tokenomice .footer_img {
  position: absolute;
  width: 15vw;
  bottom: -7vw;
  left: 28vw;
  animation: moveLR 8s linear infinite;
}

@keyframes moveLR {
  0% {
    left: 5vw;
  }

  50% {
    left: calc(100% - 100px);
  }

  100% {
    left: 0;
  }
}

/* footer  */

.footer {
  background-color: #0D2E75;
  margin: 3vw;
  padding: 4vw 2vw 2vw 2vw;
  border-radius: 3vw;
}

.footer .logo {
  width: 20vw;
  margin-bottom: 2vw;
}

.footer p {
  color: #E9E4FE;
}


.footer h2 {
  font-size: 1.8vw;
  margin-bottom: 3vw;
}

.footer a {
  color: #FFFFFF50;
  margin-bottom: 1vw;
  display: block;
}

.footer a:hover {
  color: #fff;
}

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

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

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

.footer .copyright {
  background-color: #274AFF;
  padding: 1vw;
  border-radius: 3vw;
  text-align: center;
  margin-top: 2vw;
}