body{
    background: #FA51A2 !important;
  }
html {
    scroll-behavior: smooth;
  }

.p_first{
    font-size: 1.2rem;
}
@media (max-width: 767.98px) {
  .p_first{
        font-size: 1rem !important;
    }
  }


.logo_img{
    width: 45px !important;
}
@media (max-width: 767.98px) {
    .logo_img{
        width: 30px !important;
    }
  }


.main_title{
  font-size: 5rem;
}
.main_title2{
  font-size: 3rem;
  -webkit-text-stroke: 2px rgb(55, 41, 133);
}
/* colors */
/* 
#fb7375
#ef6fb9
#d27752
#fb7374
#d0a59d
#fe9aa1
#90545c
*/
.color{
    color: #fb7375;
    color: #ef6fb9;
    color: #d27752;
    color: #fb7374;
    color: #d0a59d;
    color: #fe9aa1;
    color: #90545c;
}
.pink_color{
  color: #FF6782;
}
.icons_color:hover{
    color: #d649b0;
}
/* navbar */

  
  .nav_color{
    background: #ff6782;
  }
  .nav-link{
    color: #ffffff !important;
    font-weight: 400;
    text-transform: uppercase;
  }
  .nav_icons{
    font-size: 1.3rem !important; 
  }
  /* .nav_link:hover{
    background: #4db6e2;
  } */
 
  .nav_link:hover{
    color: #c2c1c7 !important;
  }
/*  */
.background_section1{
      background: url('../img/backgrounds/1.jpg');
      background-size: 100% 100%;
  }

  /* @media (max-width: 767.98px) {
    .background_section1{
        min-height: 200px;
    }
  }
  @media (max-width: 500px) {
    .background_section1{
        min-height: 100px;
        margin-top: 3.5rem !important;
    }
  } */
/* about */
.background_about{
    background: url('../img/backgrounds/2.jpg');
    background-size: 100% 100%;
}
.discord_button{
    padding: 20px 60px !important;
    font-size: 1rem !important;
    background: #ff6782 !important;
    box-shadow: 0 10px 14px rgb(0 0 0 / 34%), inset 0 0 13px 3px hsl(0deg 0% 100% / 34%);
    color: rgb(255, 255, 255) !important;
    border-radius: 50px !important;
  }
.discord_button:hover{
    background: #990070 !important;
    transform: scale(1.1, 1.1) !important;
}

/* carousel */
.background_carousel{
  position: relative;
  background: url('../img/backgrounds/3.jpg');
  background-size: 100% 100%;
}
/* faq */
/* faq */
.border_faq{
    border: none !important;
  }
.card{
  background: #b327f400 !important;
  box-shadow: none !important;
}
.card-header{
    background: #b327f4 !important;
    
}
.card-body{
  background: #bb39f9 !important;
  
  border-bottom-left-radius: 50px 50px !important;
  border-bottom-right-radius: 50px 50px !important;
}
.padding_faq{
    padding: 20px;
}


/* footer */
.background_footer{
    background: #ff6782;
}
/* background_steps */
.background_steps{
    background: #d649b0;
}
/* s4 */
.background_section4{
    background: #ff51d0;
}
/* s5 */
.background_section5{
    background: #ff51d0;
}
/* team */
/* .background_team{
    background: #d649b0;
}
.background_faq{
    background: #d649b0;
} */
.background_roadmapFaq{
  background: url("../img/backgrounds/6.jpg");
  background-size: 100% 100%;
}
/* carousel */
.carousel_buttom{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 200px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  z-index: 2;
}
/* rarity */
.hr{
  width: 100%;
  height: 2px;
  background: white;
  color: white;
}
.background_rarity{
  background: url('../img/backgrounds/4.jpg');
  background-size: 100% 100%;
}
.background_rarity2{
  background: #b4bff5;
  border-radius: 50px;
  padding: 80px;
}
@media (max-width: 767.98px) {
  .background_rarity2 {
    font-size: 0.5rem;
    margin: 10px;
  }
}
.line_rarity{
  width: 100%;
}
@media (max-width: 767.98px) {
  .line_rarity {
    width: 50%;
  }
}
/* roadmap */
.timeline {
    position: relative;
    list-style: none;
    padding: 1rem 0;
    margin: 0;
  }

  .timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    margin-left: -1px;
    background-color: #ffffff;
  }

  .timeline-element {
    position: relative;
    width: 50%;
    padding: 1rem 0;
    padding-right: 2.5rem;
    text-align: left;
  }

  .timeline-element::before {
    content: '';
    position: absolute;
    right: 113px;
    top: 1.35rem;
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 4px solid #ffffff;
    background-color: #d649b000;
  }
.timeline-element::after{
    content: '';
    position: absolute;
    right: 0;
    top: 1.8rem;
    display: inline-block;
    width: 115px;
    height: 4px;
    background-color: white;
}
  .timeline-element:nth-child(even)::before {
    right: auto;
    left: 113px;
  }
.timeline-element:nth-child(even)::after {
    right: auto;
    left: 0;
  }
  .timeline-element:nth-child(even) {
    margin-left: 50%;
    padding-left: 2.5rem;
    padding-right: 0;
    text-align: right;
  }
@media (max-width: 767.98px) {
  .timeline-element::after{
    display: none;
  }
  }
  @media (max-width: 767.98px) {
    .timeline::before {
      left: 8px;
    }
  }

  @media (max-width: 767.98px) {
    .timeline-element {
      width: 100%;
      text-align: left;
      padding-left: 2.5rem;
      padding-right: 0;
    }
  }

  @media (max-width: 767.98px) {
    .timeline-element::before {
      top: 1.25rem;
      left: 1px;
      background-color: white;
    }
  }

  @media (max-width: 767.98px) {
    .timeline-element:nth-child(even) {
      margin-left: 0rem;
      text-align: left;
    }
  }

  @media (max-width: 767.98px) {
    .timeline-element {
      width: 100%;
      text-align: left;
      padding-left: 2.5rem;
      padding-right: 0;
    }
  }

  @media (max-width: 767.98px) {
    .timeline-element:nth-child(even)::before {
      left: 1px;
    }
  }

  @media (max-width: 767.98px) {
    .timeline-element::before {
      top: 1.25rem;
    }
  }

.background_roadmap{
    background: url('../img//backgrounds/5.jpg');
    background-size: 100% 100%;
}

/* rectangle_animation */
.rectangle_animation{
  position: relative;
  animation: myfirst 2s infinite;
  animation-direction: alternate;
  left: 10px;
}

@keyframes myfirst {
  0%   {left: 10px;}
  100% {left: 300px;}
}
.img_scale{
  position: relative;
  animation: myscale 2s infinite;
  animation-direction: alternate;
}
@keyframes myscale {
  0%   {transform: scale(0.8, 0.8)}
  100% {transform: scale(1.1, 1.1)}
}