/**************custom css****************/


a{color: #d3a449; transition: all 0.5s ease; text-decoration: none !important; outline: none !important; box-shadow: none !important;}

html {scroll-behavior: smooth;}

body{overflow-x:hidden;font-family: 'Montserrat', sans-serif; background-color: #060612  !important; }

img{max-width:100%;} 

*{margin:0px; padding:0px; word-break: break-word; white-space: initial;}
h1,h2,h3,h4{font-family: 'Josefin Sans', sans-serif;}
p{font-family: 'Montserrat', sans-serif; font-size: 16px; color: #ffffff; line-height: 30px;}

.uppercase{text-transform: uppercase;}

/******** banner start here *********/

.banner{text-align: center; padding-top: 50px; padding-bottom: 282px; position: relative; background: url(../images/banner-bg.png) no-repeat; background-size:100% auto;}
.banner .container{position: relative;}
.discord-btn{position: absolute; right: 0; top:-20px; transition: all 0.5s ease;}
.discord-btn:hover{transform: scale(1.1);}
.ball-row{background: url(../images/banner-ball-bg.png) no-repeat; background-position: center;}
.banner h3{font-size:60px; font-weight: 700; color: #fff; text-transform: uppercase; margin-top:70px; margin-bottom: 20px;}
.banner .btn, .banner .btn:focus, .banner .btn:not(:disabled):not(.disabled):active{font-size:26px; font-weight: 700; color: #fff; background: url(../images/btn-bg.png) no-repeat; width: 512px; max-width: 100%; padding: 22px 0px; display: inline-block; margin-bottom: 50px; transition: all 0.5s ease;}
.banner .btn:hover{transform: scale(0.95);}
.ball-row h4{font-size: 18px; font-family: 'Montserrat', sans-serif; font-weight: 700;}
.banner .ball{-webkit-animation: float2 2s linear infinite;animation: float2 2s linear infinite;}

@-webkit-keyframes float2 {
    0% {
        -webkit-transform: translateY(-1%);
        transform: translateY(13%)
    }
    50% {
        -webkit-transform: translateY(1%);
        transform: translateY(1%)
    }
    to {
        -webkit-transform: translateY(-1%);
        transform: translateY(-1%)
    }
}

@keyframes float2 {
    0% {
        -webkit-transform: translateY(-5%);
        transform: translateY(-5%)
    }
    50% {
        -webkit-transform: translateY(5%);
        transform: translateY(5%)
    }
    to {
        -webkit-transform: translateY(-5%);
        transform: translateY(-5%)
    }
}


/**********about start here ***********/

.about{width: 100%; position: relative; background: url(../images/player-left.jpg) no-repeat left top, url(../images/player-right.jpg) no-repeat right top; padding:50px 0px;}
.mint-img{border: 4px solid transparent; border-radius: 20px; background: linear-gradient(to top, #CBA23A, #E6D37F, #FAF5C7, #FBDA7D, #CB9F43), linear-gradient(to bottom, #CBA23A, #E6D37F, #FAF5C7, #FBDA7D, #CB9F43); background-clip: padding-box, border-box; background-origin: padding-box, border-box; max-width: 534px; max-height: 534px;}

.about h2{font-size: 30px; color: #f6bc06; font-weight: 700;}

.about .btn, .about .btn:focus, .about .btn:not(:disabled):not(.disabled):active {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    background: url(../images/btn-bg.png) no-repeat;
    padding: 18px 95px;
    display: inline-block;
    transition: all 0.5s ease;
    background-size: 100% 100%;
}

.about .btn:hover{transform: scale(0.95);}

/******** steps start here ************/
.steps-sec{width: 100%; position: relative; padding: 60px 0px; }
.step-box {
 
    padding: 30px;
    border-radius: 30px;
    background: linear-gradient(to top, #060612 0%, #ecb507 100%);
    text-align: center;
    margin-top: 70px;
    width: 100%;
}
.step-box .step .step-heading{font-size: 20px; display: block; color: #fff; font-weight: 600; margin: 10px 0px;}
.step-box .step .img {
    display: block;
    margin-top: -86px;
    text-align: center;
    font-size: 105px;
    color: #fff;
    font-weight: 600;
    line-height: 100px;
}


/************* marquee start **************/


.marquee-wrapper{
  
  text-align:center;
}
.marquee-wrapper .container{
  overflow:hidden;
}
.marquee-inner span{
  float:left;
  width:50%;
  display: flex;
    align-items: center;
}

.marquee-inner span .marquee-item:last-child {
    margin-right: 0px !important;
}
.marquee-inner span .marquee-item:first-child {
    margin-left: 0px !important;
}
.marquee-li.bg {
    position: relative;
    width: 100%;
    overflow: hidden;}
.marquee-wrapper .marquee-block {
    --total-marquee-items: 5;
    height: 98px;
    width: calc(340px * (var(--total-marquee-items)));
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    justify-content: center;
    display: flex;
    align-items: center;
    margin: 0 auto;
    text-align: center;
}

.mint-roadmap-box {
    padding: 15px;
    background: rgb(0,42,92);
    border-radius: 16px;
    margin-top: 30px;
    margin-bottom: 30px;
    color: #fff;
}


.marquee-item img {
    max-width: 160px;
}

.marquee-inner{
  display: block;
  width: 200%;
  position: absolute;
}
.marquee-inner p{
  font-weight: 800;
  font-size: 30px;
  font-family: cursive;
}
.marquee-inner.to-left{
  animation: marqueeLeft 15s linear infinite;
}
.marquee-inner.to-right{
  animation: marqueeRight 15s linear infinite;
}
.marquee-item{
 
  height: auto;
  display: inline-block;
  margin: 0 40px;
  float: left;
  transition: all .2s ease-out;
}
@keyframes marqueeLeft{
  0% {
    left: 0;
  }
  100% {
    left: -100%;
  }
}
@keyframes marqueeRight{
  0% { 
    left: -100%; 
  }
  100% {
   left: 0; 
  }
}


.wallet-btns .btn {
  width: auto;
  padding: 18px 40px;
}
.coming-soon-banner {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px !important;
  background: url(../images/banner-coming-coon.png) no-repeat !important;
  background-position: center top !important;
}
.coming-soon-banner .logo {position: absolute; top: 50px;}
.coming-soon-banner h3 {font-size: 90px !important;}
/***** footer start here *********/

footer {background: #0e0e19;text-align: center;padding: 30px 0px; margin-top: 30px;}
footer img{max-width: 103px;}
.copyright{font-size: 14px; margin: 0px; }

/************** responsive start here ***********/

 @media screen and (min-width: 1600px) {

      .container{max-width: 1410px !important;}
}

 @media screen and (max-width: 1400px) {

      .banner{background-size: cover; padding-bottom: 150px;}
      .about{background-size: 400px;}
      .step-box .step .step-heading {font-size: 18px;}

}



  @media screen and (max-width: 991px) {
.step-box{background: none; margin-top: 0px;}
.step{background: linear-gradient(to top, #060612 0%, #ecb507 100%); padding: 30px;border-radius: 30px; margin-top:10px; margin-bottom: 10px;}
.step-box .step .img{margin-top: 0px;}
.about .row{text-align: center;}
.mint-img{margin-bottom: 45px;}
.banner {background-size: cover; padding-bottom: 80px; background-position: center;}
.coming-soon-banner h3 {font-size: 60px !important;}
}


 @media screen and (max-width: 767px) {

    .ball-row h4{color: #fff;}
    .banner h3 {font-size: 40px;}

    .step-box .step .img {font-size: 65px; line-height: initial;}
}

 @media screen and (max-width: 575px) {

    .banner h3 {font-size: 26px; margin-top: 30px;}
    .banner .btn, .about .btn{
    font-size: 20px;
 max-width: 320px;
    padding: 12px 0px 12px 0px; 
    height: auto;
    margin-bottom: 30px;
    background-size: 100% 100%;
}
.banner .ball {
    max-width: 200px;
}
.discord-btn {right: 15px;top: -35px;}
.about{background-size: cover; position: relative;}
.about::before{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); content: '';}
.about .btn{padding: 12px 30px;}
.steps-sec {padding: 30px 0px;}
.wallet-btns .btn {width: 100%;}

}