body{
    color: #fff !important;
    background-color: #111112;
    font-family: "Manrope", sans-serif;
}
a{
    color: #fff;
    text-decoration: none;
}
.navbar-nav .nav-link {
    color: white; 
}
.navbar-nav .nav-link:hover {
    color:#c82a1d; 
}
.navbar-toggler{
    border: none !important;
}

.navbar-toggler:focus, .navbar-toggler:hover {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.navbar-toggler-icon {
    background-image: url('./images/list.svg'); !important;
    background-color: transparent !important;
    border: none !important;
}
.navbar.scrolled {
    background-color: #111112 !important; 
    transition: background-color 0.3s ease;
  }
  
  .navbar-toggler .toggler-icon {
    display: inline-block;
    background-image: url('./images/list.svg')!important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter:invert(1);
  }
  
  .navbar-toggler.active .toggler-icon {
     background-image: url('./images/x-lg.svg')!important;
  }
  
.social-icons {
    display: flex;
    align-items: center; 
    right: 80px; 
    top: 50%; 
    transform: translateY(-50%); 
  }
  
  .social-icons a {
    color: #fff;
    margin-left: 15px;
    font-size: 1.5rem;
    transition: color 0.3s ease;
  }
  
  .social-icons a:hover {
    color: #c82a1d; 
  }
h2{
    font-size: 55px;
    font-weight: 700;
    line-height: 80px;
}
h3{
    font-size: 30px;
    line-height: 40px;
    font-weight: 700;
}
h5{
    font-size: 18px;
    font-weight: 700;
}
p{
    color: #9c9c9c;
    font-weight: 300;
    font-size: 16px;
}

.hero-section{
    background-size: cover;
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 8rem 0 ;
    
}

.hero-section h1{
    color: #fff;
    padding-top: 120px;
    font-size: 102px;
    line-height: 82px;
    letter-spacing: -.03em;
    font-weight: 700;
}
.bg-gradient{
    z-index: -1;
    width: 50vw;
    height: 50vw;
    border-radius: 50%;
    background-image: linear-gradient(60deg,#5E1915,#741E19,#8A231C ) !important;
    filter: blur(300px);
    position: absolute;
}
.btn-hero{
    font-size: 1.3rem;
    line-height: 1;
    padding: 15px 88px;
    margin: 0px 10px;
    background-color: #c82a1d;
    border: 1px solid #c82a1d;
    border-radius: 50px;

    }
.btn-hero:hover{
    background: linear-gradient(to bottom,#5E1915, #741E19);
}
.tokne-structure{
    display: flex;
    align-items: center;
    border: 1px solid #404040;
    border-radius: 10px;
    margin-top: 145px;
    background:linear-gradient(to bottom,#5E1915, #741E19);
    padding-left: 20px;
    padding-right: 0px;
    overflow: hidden;

}
.hero-token{
    border-right: 1px solid #fff ;
    padding: 40px 40px 40px;
    width: 40%;
}
.table{
    padding: 46px 50px 45px 25px;
    width: 58%;
}
.game--img-section{
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    
}
.game-banner-fc{
    width: 100%;
}


.items-progress{
    width: 100%;
    height: 8px;
    background: #fff;
    border-radius: 20px;
}
.item-pro-color{
    width: 70%;
    height: 8px;
    background: #13131b;
    border-radius: 20px;
}
.shape{
height: 30px;
width: 4px;
float: right;
margin-top: -11px;
background: #13131b !important;
}
.item-line{
    max-width: 90%;
    margin-left: 40px;
}
.item-line span{
    display: block;
    width: 1px;
    height: 43px;
    background: #fff;
}
.items-info{
    padding-top: 30px;
}
.hero-scroll{
    padding: 2% 0;
}
.about{
    position: relative;
   
}
.about-card{
    border: 1px solid #404040;
    border-radius: 10px;
    padding: 1rem;
    background: linear-gradient(120deg, #471412,#5E1915,#741E19 );
}
 ul li{
    list-style: none;
}
.shapeone{
    position: absolute;
    
    left: 50px;

}
.shapetwo{
    position: absolute;
    right:50px;
    top: 90px;
}
.game-carousel{
    margin-top: 50px;
    display: flex;
    position: relative;
    border-style: solid;
    border-width: 3px;
    border-image: linear-gradient(to bottom, #8A231C, #111112) 1 100%;
    border-radius: 10px;
    padding: 10px;
}
.carousel-inner{
    background-color: #13131b;
}
.btn-game{
    font-size: 1rem;
    line-height: 1;
    padding: 15px 88px;
    background-color: #fff;
    border-radius: 50px;
    border: solid 1px #fff;

    & a{
        color: #111112;
    }  
}
.games{
    margin: 150px 0;
}
.distribution{
    margin: 5rem 0;
    background-position: top center;
    background-repeat: no-repeat;
    background-image: url(./images/pattern.svg);
}
.first-cry{
    position: relative;
    background: #8A231C;
    padding: 54px;
    border: solid 1px #E7253A;
    border-radius: 10px;
    width: 100%;
    
}
.second-cry{
    background: #8A231C;
    padding: 54px;
    border: solid 1px #E7253A;
    border-radius: 10px;
    width: 100%;
    margin-bottom: 1.5rem;

}
.third-cry{
    background: #8A231C;
    padding: 54px;
    border: solid 1px #E7253A;
    border-radius: 10px;
    width: 100%;
}
.items-list-circle{
    position: relative;
    height: 195px;
    width: 390px;
}
.items-list-circle .item-circle:nth-child(1){
    display: flex;
    align-items: center;
    justify-content: center;
    height: 167px;
    width: 167px;
    border-radius: 50%;
    top: 50px;
    background: rgb(174, 55, 174);
    position: absolute;
}
.items-list-circle .item-circle:nth-child(2){
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background: rgb(205, 127, 74);
   left: 150px;
   position: absolute;
}
.items-list-circle .item-circle:nth-child(3){
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background: rgb(224, 113, 83);
   left: 250px;
   top: 50px;
   position: absolute;
}
.token-progress{
   
    width: 100%;
    height: 10px;
    border-radius: 15px;
    margin-bottom: 23px;
}
.token-progress .first-color{
    height: 10px;
    width: 317px;
    border-radius: 15px 0 0 15px;
    background: #2DD98F
}

.token-progress .second-color{
height: 10px;
    width: 163px;
    background: #4D57FF;
}
.token-progress .third-color{
    height: 10px;
    width: 114px;
    background: #1BB8FF;
}
.token-progress .fourth-color{
    height: 10px;
    width: 65px;
    background: #7bd6ff;
    border-radius: 0 15px 15px 0;
}
.item-percentage span:nth-child(1){
    padding-right: 40%;
}
.item-percentage span:nth-child(2){
    padding-right: 20%;
}
.item-percentage span:nth-child(3){
    padding-right: 10%;
}
.roadmap-line{
    width: 100%;
    height: 8px;
    background: #fff;
    opacity: 0.1;
    margin-top: -57px;
}
.roadmap-circle{
    margin-top: 11px;
    height: 32px;
    width: 32px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 32px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: radial-gradient(208.8% 113.91% at 100% 100%, #ebf7fd 0%, #8A231C 9.0000003576%, #471412 28.0000001192%, #080b18 75%);
}
.roadmap-circle span{
    height: 12px;
    width: 12px;
    border-radius: 100%;
    box-shadow: 0 4px 11px 0 #471412;
    background: radial-gradient(532.71% 290.63% at 50% 90.63%, #ebf7fd 0%, #8A231C 9.0000003576%, #471412 28.0000001192%, #080b18 75%);
}
.roadmap-bottom .roadmap-item .rm-head{
    padding-top: 50px;
}
 .rm-head{
    padding-left: 70px;
}
.rm-info{
    padding-left: 92px;
    padding-bottom: 67px;
}
.roadmap-top{
    padding-left: 200px;
    padding-right: 150px;
}
.roadmap-bottom{
    padding-left: 127px;
    padding-right: 40px;
}
.roadmap-year span{
    font-size: 14px;
    font-weight: 600;
    color: #8A231C;
    padding-top: 11px;
    display: block;
}

.roadmap-bottom .roadmap-item{
    margin-top: -60px;
}
.rm-first{
    position: relative;
    & ::before{
    content: '';
    height: 233px;
    width: 1px;
    position: absolute;
    left: 48px;
    top: 10px;
    background: linear-gradient(181deg, #fff 0%, #000 100%);
    }
}
.rm-second{
    position: relative;
    & ::before{
    content: '';
    height: 233px;
    width: 1px;
    position: absolute;
    left: 48px;
    top: 10px;
    background: linear-gradient(181deg, #fff 0%, #000 100%);
    }
}
.roadmap-item{
    position: relative;
    &::before{
    content: '';
    height: 233px;
    width: 1px;
    position: absolute;
    left: 48px;
    background: linear-gradient(181deg, #000 0%, #fff 100%);
    top: 80px;
    }
}
.features{
    background: linear-gradient(335deg, #8A231C 0%, #741E19 66.48%, #5E1915 100%);
    border-radius: 20px;
    padding: 25px 40px 50px;
    margin-bottom: 30px;
}
.item-img{
    padding-left: 40px;
    align-self: center;

}
.acc-btn{
    position: relative;
    color: #fff;
    font-size:22px;
    line-height: 34px;
    padding: 30px 0;
    font-weight: 400;

}
.acc-body{
    position: relative;
}
.faq-list{
    background-color: #242424;
    padding: 20px 30px;
    border-radius: 20px;
}
.accordion-block{
    border-bottom: solid 1px #fff;
    position: relative;
    overflow: hidden;
}
.content{
    padding-right:24px ;
    padding-bottom: 40px;
}
.pt-card{
    background: linear-gradient(60deg,#471412,#741E19);
    padding: 40px;
    border: 1px solid #505050;
    border-radius: 10px;
    width: 289px;
    height: 202px;
    text-align: center;
    align-self: center;
}
.footer{
    display: flex;
    background-color: #0e0e0e;
    border-radius: 20px;
    padding: 60px 70px 32px;
    position: relative;
    margin: 10rem auto;
}
.footer-bg-gradient{
    z-index: -1;
    width: 30vw;
    height: 20vw;
    border-radius: 50%;
    background-image: linear-gradient(60deg,#5E1915,#741E19,#8A231C ) !important;
    filter: blur(300px);
    position: absolute;
    

}
.comunity{
    background: linear-gradient(60deg,#471412,#741E19);
    padding: 30px;
    max-width: 220px;
    height: 100%;
    border-radius: 10px;
}
.cm-btn{
    border: 1px solid #fff;
    border-radius: 50px;
    padding: .8rem 2rem;
    margin-top: 20px;
    
    & a{
        color: #111112;
    } 
}
.footer-widget ul{
    padding: 0;
    line-height: 2;
}
.footer-widget span{
    font-size: 18px;
    font-weight: 600;
    line-height: 3;
}
.tab-btn{
    background-color: #8A231C;
    border: 1px solid #E7253A;
    border-radius: 10px;
    padding: .6rem 1.5rem;
    color: #fff;
    
}
.tab-buttons{
    display: flex;
    gap: 10px;
}


.tab-btn.active {
    background-color: #c82a1d; 
    color: #fff; 
    border-radius: 10px; /* Optional: Rounded corners */
    box-shadow: 0 4px 8px #c82b1d7d; 
    transition: background-color 0.3s ease; 
}
  
.card-img{
    border: 1px solid #404040;
    border-radius: 20px;
    margin-bottom: 10px;
    height: auto;
    max-width: 250px;
}
.game-cards{
    padding-top: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;  
    grid-template-rows: auto;
    grid-auto-columns: 1fr;
}
.card-btn{
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 50px;
    margin-top: 10px;
     & a{
        color: #080b18;
        font-size: 15px
     }
}
.dist-sec{
    display: flex;
}
.partner-section{
    display: flex;
    
}
.about-cards{
    display: flex;
}
.hero-btn{
    padding-top: 50px;
    display: flex;
    justify-content: center;
}
.features-list li{
list-style:circle;
padding: 20px 0px;
    & span{
        font-weight: 700;

}
}

@media only screen and (max-width: 767px)  {
     .navbar-collapse {
        background-color: #111112; 
        border-radius: 10px;
        padding: 20px;
    }
    .social-icons {
        position: static; 
        margin-top: 10px; 
        justify-content: center;
        width: 100%;
      }
    
      .navbar-toggler {
        order: 1; 
      }
    
      .navbar-brand {
        order: 2; 
      }
    
      .navbar-collapse {
        order: 3; 
      }
    .hero-section h1{
        font-size: 60px;
        line-height: 46px;
       
    }
    h2{
        font-size: 30px;
        line-height: 30px;
    }
    h3{
        font-size: 25px;
        line-height: 30px;
    }
   

    .dist-sec{
        flex-flow: column;
    }
    .partner-section{
        flex-flow: column;
        gap: 20px;
        
    }
    .roadmap-line{
        display: none;
    }
    .roadmap-top {
        flex-wrap: wrap;
        padding-left: 0px;
    }
    .roadmap-bottom{
        flex-wrap: wrap;
    }
    .about-cards{
       flex-flow: column;
    }
    .game-cards{
        flex-flow: column;
        padding: 1rem 3rem;
    }
    .footer{
        flex-flow: column;
    }
    .tokne-structure{
        flex-wrap: wrap;
    }
    .hero-btn{
        padding-top: 50px;
        flex-flow: column;
        gap: 20px;
    }
    .tab-buttons{
        justify-content: center;
        padding-bottom: 40px;
    }
    .game-cards{
        padding-top: 40px;
        display: grid;
        grid-template-columns: 1fr 1fr;  
        grid-column-gap: 20px;
        grid-row-gap: 20px;
    }
    .offcanvas.show:not(.hiding), .offcanvas.showing{
        background-color: #111112;
    }
    .acc-btn{
        
        font-size:16px;
        font-weight:600;
    }
    .faq-list{
        
        padding: 10px 10px;
    }
    ul{
    padding-left: 0;
   }
}