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

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

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Gochi Hand", cursive;
  font-weight: 400;
  color: #000;
  background-color: #FEDB3E;
  overflow-x: hidden;
  position: relative;
  scroll-behavior: smooth;
}

.backtotop {
  position: fixed;
  bottom: 2vw;
  right: 2vw;
  width: 40px;
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
  z-index: 1000;
}

.backtotop.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


h6 {
  font-family: "Inter", sans-serif;
}

p {
  font-size: 1.5vw;
}

/* - ======================== 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 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1vw 5vw;
}

nav .logo {
  width: 5vw;
}

nav .right {
  display: flex;
  align-items: center;
  gap: 1vw;
}

nav .right img {
  transition: all 0.3s ease-in-out;

}

nav .right img:hover {
  scale: 1.1;
}

nav .right .chart {
  width: 12vw;
}

nav .right img {
  width: 4vw;
}


.header,
.sections,
.sections .left,
.faqs {
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}

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

.main .left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


.main .heading {
  width: 25vw;
}


.main .left p {
  font-size: 3vw;
  line-height: 3vw;
}

.main .left h2 {
  font-size: 1.5vw;
  line-height: 3vw;
  margin: 1vw 0;
}

.main .left h2 span {
  font-size: 3vw;

}

 .ca {
  background-color: #fff;
  padding: 1vw 2vw;
  border-radius: 1vw;
  font-size: 1vw;
  display: flex;
  align-items: center;
  gap: 2vw;
}


.main .right {
  transform: translateY(6vw);
  scale: 1.2;
}


/* ==================socail  */

.social {
  background-color: #FE3C01;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1vw 5vw; 
  position: relative;
  z-index: 99;
}

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



.social .links img {
  transition: all 0.3s ease-in-out;

}

.social .links img:hover {
  scale: 1.1;
}

.social .links .buybtn {
  width: 12vw;
}

.social .links img {
  width: 4vw;
}

.social .textbox {
  background-color: #fff;
  padding: 1vw 2vw;
  font-weight: 700;
  border-radius: 1vw;
  border: 2px solid #000;
  box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 1);
  -webkit-box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 1);
  -moz-box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 1);
  display: flex;
  align-items: center;
  gap: 2vw;
}

.social .textbox span {
  font-family: "Inter", sans-serif;
  font-size: 3vw;
  color: #FE3C01;
}


/* wallat  */

.wallat {
  background-image: linear-gradient(to bottom, #FE8B3E, #FEB83E00);
  padding: 3vw 8vw;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wallat .wallatbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 2vw;
}


.wallat .wallatbox img {
  width: 10vw;
}


/* slider  */

.slide1 {
  background: #FFD100;
  padding: 2vw 0;
  border-top: 2px solid;
  border-bottom: 2px solid;
}

.slider {
  display: flex;
  gap: 1vw;
}

 

.slider video { 
  width: 100%;
  height: 30vw;
  border: 2px solid;
  border-radius: 8px;
}


/* about  */

.about {
  padding: 5vw 10vw;
}

.about .right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.about .right h2 {
  font-size: 3vw;
  text-align: center;
  margin-bottom: 2vw;
  text-shadow: 2px 2px #000;
  color: #fff;
  font-weight: 700;
}

.about .gif3 {
  position: absolute;
  width: 20vw;
  right: -5vw;
  bottom: -10vw;
}

.about .right p {
  background-color: #fff;
  padding: 3vw;
  border-radius: 1vw;
  display: flex;
  align-items: center;
  font-size: 1.7vw;
}


.headingmain {
  font-size: 3vw;
  margin-bottom: 1vw;
  text-shadow: 2px 2px #000;
  color: #fff;
  font-weight: 700;
  line-height: 3vw;
}


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

.roadmap h2 {
  text-align: center;
  margin-bottom: 5vw;

}

.roadmap .road1 {
  transform: translateY(2vw);
  width: 25vw;
  margin: auto;
}

.roadmap .box {
  background-color: #fff;
  padding: 3vw;
  border-radius: 1vw;
  display: flex;
  flex-direction: column;
  height: fit-content;
  position: relative;
  z-index: 10;
  box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 1);
  border: 2px solid #000;
  transition: all 0.4s ease-in-out;
}

.roadmap .box:hover {
  background-color: #FE8B3E;
  color: #fff;
}

.roadmap .box h4 {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  margin-top: 2vw;
}


.roadmap .box4 {
  margin-top: -20vw;
}

.roadmap .road7 {
  margin-top: 10vw;
}

.roadmap .box .line1 {
  position: absolute;
  left: 0;
  bottom: -15vw;
  width: 6vw;
}

.roadmap .box .line2 {
  position: absolute;
  right: 0;
  bottom: -12vw;
  width: 7vw;
}

.roadmap .box .line5 {
  position: absolute;
  left: 0;
  bottom: -15vw;
  width: 4vw;
}

.roadmap .box .line7 {
  position: absolute;
  left: 0;
  bottom: -7vw;
  width: 4vw;
}


/* sections  */
.sections {
  background-image: url("../images/Section.png");
  padding: 5vw;
}

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

.sections .left {
  display: flex;
  justify-content: center;
  justify-content: center;
  background-image: url("../images/bg.png");


}

.sections .right h1 {
  font-size: 4vw;
  color: #fff;
  text-shadow: 2px 2px #000;
  line-height: 4vw;
}

.sections .right p {
  font-size: 1.5vw;
}

.sections .right h3 {
  font-size: 2vw;
  background-color: #fff;
  padding: 1vw;
  border-radius: 1vw;
  box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 1);
  border: 2px solid #000;
  margin-top: 2vw;
  width: fit-content;
}


/* howtobuy  */

.howtobuy {
  padding: 5vw;
  padding-top: 0;
  overflow-x: hidden;

}

.howtobuy h3 {
  text-align: center;
  margin: 5vw 0;
}

.boxmain {
  background-color: #fff;
  padding: 2vw;
  border-radius: 3vw;
  border: 2px solid #000; 
}

.boxmain h4 {
  background-color: #FE7549;
  font-size: 2vw;
  padding: 0.5vw 2vw;
  border-top-left-radius: 1vw;

}

.boxmain p {
  margin-top: 1vw;
  margin-bottom: 2vw;
}

.howgif {
  position: absolute;
  bottom: -10vw;
  right: 0vw;
  width: 20vw;
}

/* bookslider-container  */

.bookslider-container {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 100%;
}

.bookslider {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 20px;
  padding: 10px;
  scrollbar-width: none;
}

.bookslider::-webkit-scrollbar {
  display: none;
}

.bookslider .box {
  flex: 0 0 25%;
  box-sizing: border-box;
  background: #f3f3f3;
  padding: 2vw;
  border-radius: 8px;
  text-align: center;
  border: 2px solid #000;
}

.bookslider .box h4 {
  font-size: 2vw;
}

/* Arrows */
.arrow {
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1;
  width: 3vw;
  margin: 0 1vw;
}


/* ==================== faqs */
.faqs {
  padding: 5vw;
  background-image: url("../images/Section2.png");
}



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

.faqs .left h1 {
  font-size: 5vw;
  text-align: center;
  color: #fff;
}



.accordion-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: start;
  cursor: pointer;
  font-size: 2vw;
  padding: 1vw 2vw;
  border-top: 1px solid #fff;
  color: #fff;
  width: 100%;
  text-align: start;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease;
  opacity: 0;
  padding: 0 0;
}

.accordion .box.active .accordion-content {
  max-height: 200px;
  opacity: 1;
  padding: 10px 0;
  color: #fff;
}

.accordion .box .icon {
  transition: transform 0.3s ease;
}

.accordion .box.active .icon {
  transform: rotate(45deg);
  /* turns + into x */
}

.faqs .left .faqgif {
  width: 33vw;
  margin-top: 2vw;
}


/* tokenomice  */

.tokenomice {
  padding: 0 5vw;
}

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

.tokenomice .left h1 {
  font-size: 5vw;
  text-align: center;
  color: #fff;
  text-shadow: 3px 3px #000;
}



.tokenomice .left .box {
  display: flex;
  box-sizing: border-box;
  background: #f3f3f3;
  padding: 0.5vw 1vw;
  border-radius: 1vw;
  text-align: center;
  border: 2px solid #000;
  gap: 2vw;
  align-items: center;
  box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 1); 
  justify-content: center;
  margin-top: 2vw;
  min-height: 5vw;
}

.tokenomice .left .box img {
  width: 4vw;
}

/* join  */
 
.join  h3 {
  font-size: 4vw;
  text-align: center; 
  margin-top: 5vw;

}

.join .box {
  display: flex;
  box-sizing: border-box;
  background: #f3f3f3;
  padding: 0.5vw 4vw;
  border-radius: 4vw;
  text-align: center;
  border: 2px solid #000;
  gap: 2vw;
  align-items: center;
  box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 1); 
  justify-content: center;
  margin-top: 2vw;
  min-height: 5vw;
  width: fit-content;
  justify-content: center;
  margin: auto;
  margin-top: 2vw;
}

.footer {
  display: flex; 
  padding: 5vw; 
  margin-top: 5vw;
}

.crying{
  width: 15vw;
  position: absolute;
  top: -7vw;
  left: 5vw;
}

.footer .fotimg{
  width: 34%;
}
 

.copyright{
  background-color: #FFA60A;
  padding: 2vw;
  text-align: center;
}