/*---------------

COLOR : #74c209;

--------------*/




 @media (max-width: 500px) {

  nav {
    background-color: #151618;fift
  }   

}

.swal2-container {
  z-index: 10000 !important;
}

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

*:focus {
  outline: 0 !important;
}

@font-face {
  font-family: circular_std;
  src: url(../fonts/CircularStd-Medium.otf);
}

@font-face {
  font-family: circular_book;
  src: url(../fonts/CircularStd-Book.otf);
}

@font-face {
  font-family: bugaki_regular;
  src: url(../fonts/Bugaki-Regular.otf);
}

@font-face {
  font-family: poppins_extralight;
  src: url(../fonts/Poppins-ExtraLight.ttf);
}

@font-face {
  font-family: poppins_semibold;
  src: url(../fonts/Poppins-SemiBold.ttf);
}

@font-face {
  font-family: poppins_thin;
  src: url(../fonts/Poppins-Thin.ttf);
}

html, 
body {
  font-family: 'circular_book', serif;
  scroll-behavior: smooth;
  margin: 0!important;
  padding: 0!important;
  overflow-x: clip !important;
  width: 100%;
  font-smoothing:antialiased;
  background-color: #111214;
}

a {
  text-decoration: none !important;
  cursor: pointer;
}

nav {
  background-color: transparent;
  padding-top: 2vw !important;
  z-index: 9000;
}

#nav_section {
  padding-left: 7vw;
  padding-right: 7vw;
}

.main_logo_img {
  width: 13vw;
  height: auto;
  margin-top: -0.5vw;
}

#download_btn {
  padding: 0.8vw 1.8vw !important;
  color: #fff;
  font-size: 1vw;
  background-color: #151618;
  font-weight: 600;
  letter-spacing: 0.1vw;
  border:2px solid #33363d;
  border-radius: 10px;
}

.download_btn_img {
  margin-left: 1vw;
  width: 1.5vw;
  margin-top: -0.2vw;
}

.download_btn_img_2 {
  margin-left: 1vw;
  width: 1.5vw;
  margin-top: -0.2vw;
}

.toggle_btns {
  background-color: transparent;
  margin-right: 1.5rem;
}

.toggle_btns_img {
  width: 1.5rem;
  height: auto;
}

.nav-link {
  font-size: 1vw;
  padding-left: 3vw !important;
  padding-right: 1vw !important;
  color: #777e90 !important;
}

#banner_section {
  background-image: url("../images/background_1.webp") !important; 
  background-color: #cccccc; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  margin-top: -6.2vw;
  padding-top: 14vw;
  padding-bottom: 30vw;
  overflow-x: hidden;
  width: 100%;
  
/*  overflow-y: hidden;*/ 
}

#banner_section h1 {
  color: #fff;
  font-family: 'poppins_extralight', serif;
  font-size: 3.8vw;
}

#banner_section span {
  font-family: 'poppins_semibold', serif;
}

#banner_section p {
    color: #777e90 !important;
    font-size: 1vw;
    margin-top: 1.2vw;
    line-height: 1.3vw;
}

.input_box {
  width: 180px;
  padding: 0.8vw !important;
  margin: 0 auto;
  display: block;
  margin-bottom: 10px;
  border: 2px solid #74c209; /* Highlight border color */
  border-radius: 10px;
  background-color: #1a1c1f; /* Slightly lighter background for contrast */
  color: #fff;
  font-size: 1vw;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 0 10px rgba(116, 194, 9, 0.5); /* Adding a glow effect */
}

.buy_token_btn {
  padding: 0.8vw 2vw !important;
  color: #fff;
  font-weight: 600;
  font-size: 1vw;
  letter-spacing: 0.1vw;
  border: 2px solid #33363d;
  border-radius: 10px;
  margin: 0 auto;
  display: block;
  text-align: center;
  background-image: linear-gradient(to right, #7f63ff , #00f0ff); /* Adjust these color codes to match the logo gradient */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 0 10px rgba(127, 99, 255, 0.5); /* Adding a glow effect similar to the input box */
}


.progress-bar-container {
  width: 200px; /* Increased width */
  height: 15px; /* Increased height */
  background-color: #33363d;
  border-radius: 5px;
  margin: 10px auto;
  overflow: hidden;
  border: 2px solid #151618; /* Matching the button's border color */
}

.progress-bar {
  height: 100%;
  width: 0%;
  background-color: #74c209; /* Progress bar color */
  border-radius: 5px;
  animation: progressAnimation 2s forwards; /* Animation */
}


@media (max-width: 500px) {

  .input_box {
    width: 90%; /* Make the input box take up 90% of the available width */
    margin: 0 auto; /* Center the input box */
    padding: 0.8rem; /* Adjust padding for mobile */
    font-size: 1rem; /* Adjust font size for mobile */
  }

  .buy_token_btn {
    width: 90%; /* Make the button take up 90% of the available width */
    margin: 0rem 0.8rem auto; /* Center the button and add some margin for spacing */
    padding: 1rem 0.8rem; /* Adjust padding for mobile */
    font-size: 1rem; /* Adjust font size for mobile */
  }

  .progress-bar-container {
    width: 90%; /* Make the progress bar take up 90% of the available width */
    margin: 0.5rem auto; /* Center the progress bar and add some margin for spacing */
  }

  .row .text-center {
    text-align: center;
    padding-left: 5%;
    padding-right: 5%;
  }
}


@keyframes progressAnimation {
  0% {
    width: 0%;
  }
  100% {
    width: 20%; /* Progress bar end width */
  }
}




.scroll_div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.chevron {
  position: absolute;
  width: 2.1rem;
  height: 0.48rem;
  opacity: 0;
  transform: scale(0.3);
  -webkit-animation: move-chevron 3s ease-out infinite;
          animation: move-chevron 3s ease-out infinite;
}

.chevron:first-child {
  -webkit-animation: move-chevron 3s ease-out 1s infinite;
          animation: move-chevron 3s ease-out 1s infinite;
}

.chevron:nth-child(2) {
  -webkit-animation: move-chevron 3s ease-out 2s infinite;
          animation: move-chevron 3s ease-out 2s infinite;
}

.chevron:before,
.chevron:after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  background: #777e90;
}

.chevron:before {
  left: 0;
  transform: skewY(30deg);
}

.chevron:after {
  right: 0;
  width: 50%;
  transform: skewY(-30deg);
}

@-webkit-keyframes move-chevron {
  25% {
    opacity: 1;
  }
  33.3% {
    opacity: 1;
    transform: translateY(2.28rem);
  }
  66.6% {
    opacity: 1;
    transform: translateY(3.12rem);
  }
  100% {
    opacity: 0;
    transform: translateY(4.8rem) scale(0.5);
  }
}

@keyframes move-chevron {
  25% {
    opacity: 1;
  }
  33.3% {
    opacity: 1;
    transform: translateY(2.28rem);
  }
  66.6% {
    opacity: 1;
    transform: translateY(3.12rem);
  }
  100% {
    opacity: 0;
    transform: translateY(4.8rem) scale(0.5);
  }
}

.scroll_p {
  color: #777e90;
  letter-spacing: 0.2rem;
}

.hand_one {
  position: absolute;
  top: 48%;
  left: 14%;
  width: 14vw;
  height: auto;
  animation-name: example;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes example {
  0%   {transform: rotate(-0deg);}
  50%  {transform: rotate(-6deg);}
  100% {transform: rotate(0deg);}
}

.hand_two {
  position: absolute;
  top: 42%;
  left: 1%;
  width: 9vw;
  height: auto;
  transform: rotate(20deg);
  animation-name: example_two;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes example_two {
  0%   {transform: rotate(-20deg);}
  50%  {transform: rotate(-26deg);}
  100% {transform: rotate(-20deg);}
}

.hand_three {
  position: absolute;
  top: 95%;
  left: 18%;
  width: 7vw;
  height: auto;
  transform: rotate(-12deg);
  animation-name: example_three;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes example_three {
  0%   {transform: rotate(-12deg);}
  50%  {transform: rotate(-18deg);}
  100% {transform: rotate(-12deg);}
}

.phone_one {
  position: absolute;
  right: 3%;
  top: 42%;
  width: 36vw;
  height: auto;
  z-index: 200;
  animation: move-up-down 7s ease-in-out 2s infinite;
}

.phone_two {
  position: absolute;
  right: 0%;
  top: 85%;
  width: 31vw;
  height: auto;
  z-index: 100;
  animation: move-up-down 8s ease-in-out 2s infinite;
}

.heart_one {
  position: absolute;
  right: 10%;
  top: 85%;
  width: 4vw;
  z-index: 300;
}

.heart_two {
  position: absolute;
  right: 26%;
  top: 140%;
  width: 2.5vw;
  z-index: 300;
}

.commentor_logo_one {
  position: absolute;
  right: 35%;
  top: 100%;
  width: 4vw;
  z-index: 300;
}

.commentor_logo_two {
  position: absolute;
  right: -1%;
  top: 105%;
  width: 5vw;
  z-index: 300;
}

@keyframes move-up-down {
  0% {
      -webkit-transform: translateX(0) translateY(5px);
      transform: translateX(0) translateY(5px)
  }
  50% {
      -webkit-transform: translateX(0) translateY(-8px);
      transform: translateX(0) translateY(-8px)
  }
  100% {
      -webkit-transform: translateX(0) translateY(5px);
      transform: translateX(0) translateY(5px)
  }
}

#second_section {
  background-image: url("../images/background_2.webp") !important; 
  background-color: #cccccc; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  padding-left: 10vw;
  padding-right: 10vw;
  padding-bottom: 8vw;
  margin-top: -0.2vw;
  overflow-x: hidden;
  width: 100%;
}

#second_section h1 {
  color: #fff;
  font-family: 'poppins_semibold', serif;
  font-size: 4.4vw;
}

#second_section span {
   font-family: 'poppins_extralight', serif;
}

.line {
  border-top: 3px solid #9058ff;
  width: 6.5vw;
  margin-top: 1.6vw;
}

#second_section h2 {
   font-size: 1.2vw;
   color: #fff;
   margin-top: 2vw;
   max-width: 42ch;
   line-height: 1.5vw;
}

#second_section p {
   font-size: 1vw;
   color: #777e90;
   max-width: 55ch;
}

.btn_div {
  display: flex;
  margin-top: 1.6rem;
}

.money_img {
  width: 30vw;
  margin-top: -1vw;
}

#third_section {
  background-image: url("../images/background_3.webp") !important; 
  background-color: #cccccc; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  margin-top: -0.2vw;
  padding-bottom: 5vw;
  overflow-x: hidden;
  width: 100%;
}

.circular_img {
  width: 60vw;
  margin-left: -2vw;
}

.third_section_div {
  padding-left: 4vw;
}

#third_section h1 {
  color: #fff;
  font-family: 'poppins_semibold', serif;
  font-size: 4.4vw;
  margin-top: 17vw;
}

#third_section span {
   font-family: 'poppins_extralight', serif;
}

#third_section h2 {
   font-size: 1.2vw;
   color: #fff;
   margin-top: 2vw;
   max-width: 42ch;
   line-height: 1.5vw;
}

#third_section p {
   font-size: 1vw;
   color: #777e90;
   max-width: 55ch;
}

#fourth_section {
  background-image: url("../images/background_4.webp") !important; 
  background-color: #cccccc; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  padding-left: 12vw;
  padding-right: 12vw;
  padding-top: 8vw;
  padding-bottom: 5vw;
  margin-top: -0.2vw;
  overflow-x: hidden;
  width: 100%;
}

#fourth_section h1 {
  color: #fff;
  font-family: 'poppins_semibold', serif;
  font-size: 4.4vw;
}

#fourth_section span {
   font-family: 'poppins_extralight', serif;
}

#fourth_section h2 {
   font-size: 1.2vw;
   color: #fff;
   margin-top: 2vw;
   max-width: 42ch;
   line-height: 1.5vw;
}

#fourth_section p {
   font-size: 1vw;
   color: #777e90;
   max-width: 55ch;
}

.girl_img {
  width: 30vw;
  margin-top: -12vw;
}

#fifth_section {
  background-image: url("../images/background-app.png") !important; 
  background-color: #cccccc; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  margin-top: -0.2vw;
  padding-top: 40vw;
  padding-bottom: 8vw;
  padding-left: 12vw;
  padding-right: 12vw;
  overflow-x: hidden;
  width: 100%;
}

.big_download_img {
  width: 5vw;
}

#fifth_section h1 {
  color: #777e90 !important;
  font-family: 'poppins_thin', serif;
  font-size: 3vw;
  font-weight: 700;
  margin-top: 5vw;
}

@media (max-width: 500px) {
  #fifth_section h1 {
    padding-top: 20vw; /* Increase the margin-top for mobile devices */
  }
  
  .store_btn_row {
    margin-top: 5vw; /* Adjust the margin-top of the store buttons for mobile */
  }
}

.store_btn_row {
  margin-top: 3rem;
}

.store_btn_1 {
  border:none;
  background-color: transparent;
  color: #fff;
  font-size: 1.6vw;
  padding-left: 3vw;
  padding-right: 3vw;
  float: right !important;
}

.store_btn_2 {
  border:none;
  background-color: transparent;
  color: #fff;
  font-size: 1.6vw;
  padding-left: 3vw;
  padding-right: 3vw;
  float: left !important;
}

.store_btn_img {
  width: 2.4vw;
  margin-right: 1.5vw;
  margin-top: -0.5vw;
}

.divider {
  border-right: 6px solid #212225;
}

footer {
  background-color: #111214;
  padding-left: 12vw;
  padding-right: 12vw;
  padding-top: 5vw;
  padding-bottom: 5vw;
}

.scroll_p {
  color: #777e90;
  font-size: 1vw;
  margin-top: -0.5vw;
}

.scroll_left_div {
  width: 100%;
  border-top: 2px solid #777e90;
}

.scroll_right_div {
  width: 100%;
  border-top: 2px solid #777e90;
}

#scroll_to_top_row {
  margin-top: -5.1vw;
}

.footer_logo {
  width: 13vw;
  height: auto;
}

.newsletter_input {
  background-color: #111214;
  color: #fff;
  padding: 1rem;
  border : 2px solid #212225;
  height: 3rem;
  border-radius: 15px;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #fff !important;
  opacity: 1; /* Firefox */
  font-size: 1rem !important; 
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #fff !important;
  font-size: 1rem !important; 
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #fff !important;
  font-size: 1rem !important; 
}

.submit_btn {
  background-image: linear-gradient(to right, #7f63ff , #00f0ff); /* Adjust these color codes to match the logo gradient */
  color:#fff;
  height: 2.8rem;
  border-radius: 10px;
  border:none;
}

.submit_btn_arrow {
  width: 1rem;
  margin-left: 0.5rem;
}

footer h1 {
  color: #fff;
  font-size: 1vw;
}

.footer_links {
  color: #69707f !important;
  margin-top: 1.2vw !important;
  font-size: 1vw;
}

.social_media {
  margin-top: 1.2vw;
  width: 1.2vw;
  margin-right: 1vw;
}

.line2 {
  border-top: 3px solid #9058ff;
  width: 2vw;
  margin-top: 1.6vw;
}

.footer_hr {
  border-top: 2px solid #22242a !important;
  margin-top: 5vw;
}

.end_p {
  color: #fff;
  font-size: 0.8vw;
  margin-right: 1vw;
  margin-top: 1vw;
}

.standing_girl {
  position: absolute;
  width: 12vw;
  top: -18%;
}

@media (max-width: 992px) {   /* SLIDING NAVBAR IN MOBILE VIEW */

    .navbar-collapse {
        position: fixed;
        top: 0px;
        left: 0;
        padding-top: 40px;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
        width: 75%;
        height: 100%;
        background-color: #151618;
    }

    .navbar-collapse.collapsing {
        left: -75%;
        transition: height 0s ease;
    }

    .navbar-collapse.show {
        left: 0;
        transition: left 300ms ease-in-out;
    }

    .navbar-toggler.collapsed ~ .navbar-collapse {
        transition: left 500ms ease-in-out;
    }

}