* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
    font-family: 'Kanit', sans-serif;
}

div {
    display: inline-block;
}

body{
    text-align: center;
    font-size: 0;
  
    font-family: 'Poppins', sans-serif;
    background-color: #2a315f;
}

#bgAnim{
    opacity: 1;
    z-index: -1;
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
}

.vanta-canvas{
    top: 0;
    width: 100%;
    height: 100vh;
}

.header{
    padding: 0 40px;
    z-index: 99999;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100px;

    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-image: linear-gradient(to right,#da9aba00,  #d99aba, #da9aba00) 1;

}

.headerWrapper{
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 100px;
 
    
  
}

.headerLogo{
    
    position: absolute;
    left: 0;
    top: 20px;
    width: 60px;
    height: 60px;
   background-image: url(./totonaIcon.png);
   background-size: contain;
   background-position: left;
   background-repeat: no-repeat;
}


.headerMenu{
    float: right;
    margin-top: 25px;

}




.headerMenuButton{
    border-radius: 10px;
    font-weight: 600;
    display: inline-block;
    margin-left: 6px;
    padding: 0 20px;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
   text-transform: uppercase;
    color: #03022d;
    background: linear-gradient(-45deg, #ffffff, #e9e9e9);

}

.headerMenuButton i{

    padding-left: 1px;
    vertical-align: top;
    display: inline-block;
    font-size: 10px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    margin-top: 14px;
    border-radius: 50%;
    background-color: #d99ab9;
    color: #03022d;
    margin-right: 2px;
    text-align: center;
}


.headerSocials{
    height: 54px;
margin-top: 24px;
    float: right;
    margin-right: 10px;
 }



.headerSocialButton{
    display: inline-block;
    margin-top: 0px;
 
    height: 50px;
    line-height: 50px;
    font-size: 14px;
   text-transform: uppercase;
   margin-left: 6px;
  
}


.headerSocialButton i{
   
  
    vertical-align: top;
    display: inline-block;
    font-size: 14px;
    width: 34px;
    height: 34px;
    line-height: 34px;
  border-radius: 6px;
  color: white;
  background: rgba(255,255,255,0.15);
    margin: 10px 2px 0px 2px;
    text-align: center;
}

.headerSocialButton2 i{
    font-size: 16px;
}

.section1a{
    width: 100%;
    text-align: center;
    width: 100%;
   


    background: linear-gradient(to left,rgba(0,0,0,0), #02022b );
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-image: linear-gradient(to right, #d99aba00, #d99aba, #d99aba00) 1;

}


.section1b{
   
    width: 100%;
    text-align: center;
    width: 100%;



 background: linear-gradient(to left,rgba(0,0,0,0), #02022b );

 border-bottom-width: 2px;
 border-bottom-style: solid;
 border-image: linear-gradient(to right, #d99aba00, #d99aba, #d99aba00) 1;

}

.section1bCenter{
    letter-spacing: 2px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    position: absolute;
    font-size: 40px;
    font-weight: 500;
    color: white;

}

.section1b1, .section1b2, .section1b3, .section1b4, .section1b5, .section1b6{
    letter-spacing: 1px;
    font-size: 16px;
    font-weight: 700;
    color: black;

    background-color: white;
    padding: 5px 10px;
    border-radius: 3px;
    margin: 0 10px ;
    margin-bottom: 20px;
}






.section1aTitle{
   
    font-weight: 800;
    letter-spacing: 0.5px;
    width: 100%;
    font-size: 36px;
    line-height: 36px;
    color: rgba(255,255,255,1);
}

.section1bTitle{
    padding-bottom: 50px;
 
    font-weight: 800;
    letter-spacing: 0.5px;
    width: 100%;
    font-size: 36px;
    line-height: 36px;
    color: rgba(255,255,255,1);
}



.section1{
   
    text-align: center;
    width: 100%;
    height: 100vh;
    min-height: 700px;
    background: rgb(2,2,43);
    background: linear-gradient(to left,rgba(0,0,0,0), #02022b );


}

.sectionWrapper{
    text-align: center;
    position: relative;
    font-size: 0;
    width: 100%;
    padding: 0 40px;
  height: 100%;

  background: radial-gradient(circle, rgba(2,2,43,0.85) 0%, rgba(2,2,43,0) 100%);

}

.sectionWrapperInner{
    position: relative;
    padding: 90px 0;
    width: 100%;
    max-width: 1200px;
}

.sectionWrapperInner2{
    padding-top: 0;
}

.section1left{
    vertical-align: top;
    position: relative;
    width: 50%;
    height: 100vh;
    min-height: 700px;
}

.section1right{

    vertical-align: top;
    position: relative;
    width: 50%;
    height: 100vh;
    min-height: 700px;
    background-color: radial-gradient(circle, rgba(2,2,43,0.95) 0%, rgba(2,2,43,0) 50%);

}

.section1rightInner{
    margin-top: 45px;
    width: 100%;
    height: 100%;
    background-image: url(./phone.png);
    background-size: 600px auto;
    background-position: center;
    background-repeat: no-repeat;
}


.section1leftInner{
    position: absolute;
    left: 0;
    top: calc(50% + 20px);
    transform: translateY(-50%);
    text-align: left;
    width: 100%;
}

.section1leftInner1{

  
    height: 40px;
    width: 100%;
  
}

.section1leftInner1line{
    vertical-align: top;
    width: 40px;
   
    height: 2px;
    background-color: #da9aba;
    background: linear-gradient(to right, #da9aba00, #da9aba);
    margin-top: 19px;
    border-radius: 2px;
}

.section1leftInner1logo{
    margin: 0 6px;
    vertical-align: top;
    width: 150px;
    height: 40px;
    background-image: url(./totVer.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
   
 
}

.section1leftInner1line2{
    vertical-align: top;
    width: 180px;
   
    height: 2px;
    background-color: #da9aba;
    background: linear-gradient(to left, #da9aba00, #da9aba);
    margin-top: 19px;
    border-radius: 2px;
}

.spacer{
    vertical-align: top;
    width: 100%;
}

.section1leftInner2{
    margin-top: 18px;
    max-width: 700px;
    width: 100%;
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 44px;
    line-height: 48px;

}


.section1leftInner2 span{
    display: inline-block;
    width: 100%;
    font-size: 52px;
}

.section1leftInner3{
    margin-top: 16px;
    width: 100%;
    font-size: 19px;
    font-weight: 400;
    color: rgba(255,255,255,0.8);
    max-width: 580px;
}












.problemWrapper{
    text-align: center;

}

.sectionWrapper2{
    text-align: center;

}

.section1content{
    padding: 90px 0;
    position: absolute;
  top: calc(50% + 30px);
  left: 0;
  transform: translateY(-50%);
    width: 100%;
   
    font-family: 'Teko', sans-serif;


}

.section1Line1{
   margin-top: 40px;
    border-radius: 6px;
    padding: 8px 12px;
    text-shadow: 0 0 10px black;
    font-weight: 800;
  letter-spacing: 1px;
  
text-transform: uppercase;
    background-color: rgba(0,0,0,1);

    font-size: 12px;
    line-height: 14px;

    color: #39ff13;

}

.section1Line3Big {
width: 100%;
height:250px;
background-image: url(./totlogo.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}

.section1Line2{
    letter-spacing: 0.5px;
    text-shadow: 10px black;
      width: 100%;
      max-width: 820px;
       font-size: 15px;
    line-height: 34px;
    color:rgba(255,255,255,0.95);
    margin-top:20px;
 font-weight: 400;
  
}



.section1Line3{
    margin-top: 24px;

    font-weight: 700;
    padding: 0 25px;
 
    text-transform: uppercase;
 
    width: 100%;
   letter-spacing: 4px;
    font-size: 15px;

    color: #d99ab9;
    text-shadow: 0px 0px 20px #2a315f;
    text-align: center;

}

.section1Line32{
    text-transform: uppercase;
    

    font-weight: 600;

    padding: 190px 0;
 
    width: 100%;
  max-width: 550px;
    font-size:18px;
    line-height: 55px;

    color: white;
 
    text-align: center;
    
  
}

.section1Line32 span{
    color: white;
    letter-spacing: 0px;
    font-size: 30px;
    font-weight: 700;
    width: 100%;
    display: inline-block;
    text-decoration: underline;
    text-decoration-color: #d99ab9;
    text-decoration-thickness: 3px;
}

.section1Line4{

    margin-top: 30px;

   width: 100%;
}

.section1Line4Button{

    border-radius: 10px;
    font-weight:700;
    display: inline-block;
    margin-right: 12px;
    padding: 0 20px;
    height: 50px;
    line-height: 49px;
    font-size: 14px;
    color: #111425;
    background: linear-gradient(-45deg, #d99ab9, #fa8bc3);

    margin-top: 0px;
    font-weight: 800;
    display: inline-block;
    width: 100%;
    font-size: 18px;
    text-transform: uppercase;
    color: #111425;
    background: linear-gradient(-45deg, #ffffff, #ffe4f2);
    border: 2px solid #ffffff;
    height: 54px;
    line-height: 50px;
    border-radius: 12px;
    max-width: 220px;
    text-align: center;


}
.section1Line4Button2{
    color: #03022d;
    background: linear-gradient(-45deg, #ffffff, #e9e9e9);

    
}

.section1Line4Button i{

    padding-left: 1px;
    vertical-align: top;
    display: inline-block;
    font-size: 8px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    margin-top: 14px;
    border-radius: 50%;
    background-color: #03022d;
    color: white;
    margin-right: 2px;
    text-align: center;
}

.section1Line4Button2 i{
    color: #03022d;
    font-size: 10px;
    background-color: #d99ab9;
}


.section1leftInner4{
    width: 100%;
    margin-top: 22px;
}



.problemWrapper{
   
    width: 100%;
    max-width: 1200px;
}

.problemItem{

    vertical-align: top;
    width: 40%;
    padding: 190px 0;
    background: radial-gradient(circle, rgba(2,2,43,0.85) 0%, rgba(2,2,43,0) 50%);
}

.problemItemTitle{
    vertical-align: middle;
    text-transform: uppercase;
    width: 100%;
    font-size: 42px;
    color: #d99ab9;
    color: white;
    font-weight: 700;
}

.problemItemTitle i{
   
    color: #d99ab9;
    font-size: 38px;
    display: inline-block;
    vertical-align: baseline;
    color: #d99ab9;
  
    -webkit-text-stroke: 0.5px white;
}

.problemItemText{
    margin-top: 3px;
    width: 100%;
    font-size: 18px;
    color: white;
}

.problemItem2{
    
    width: 20%;
 
 padding-top: 207px;
   
    color: #d99ab9;
    font-weight: 700;
    max-height: 70px;
    background: transparent;
}

.problemItem2 i{
    font-size: 22px;
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;

    color: #d99ab9;

    color: #d99ab9;
    
    -webkit-text-stroke: 0.5px white;
}

.problemItemDot{
    width: 8px;
    height: 8px;
    margin: 14px 0;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.25);
}


.section1c{
    width: 100%;
   
    background: linear-gradient(to left,rgba(0,0,0,0), #02022b );

    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-top-width: 2px;
    border-top-style: solid;
    border-image: linear-gradient(to right, #d99aba00, #d99aba, #d99aba00) 1;

}


.stepsWrapper{
    padding: 120px 0;
    width: 100%;
    max-width: 1200px;
}

.stepItem{
    margin-bottom: 12px;
}

.stepItem2{
    vertical-align: top;
    font-size: 30px;
    height: 30px;
    line-height: 30px;
   font-weight: 500;
   color: white;
}

.stepItem2 span{

    color: #d99ab9;
    font-weight: 800;
   
}

.stepItem2b{
  
}

.stepItem2c{
   
}

.stepItem2d{
  
}


.stepArrows{
    vertical-align: top;
    text-align: center;
    padding: 0 10px;
    font-size: 20px;
    height: 32px;
    line-height: 34px;
    color: #d99ab9;
    font-weight: 900;
    vertical-align: top;

    color: #d99ab9;

    -webkit-text-stroke: 0.5px white;
}

.section1d{
    width: 100%;

    background: linear-gradient(to left,rgba(0,0,0,0), #02022b );
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-image: linear-gradient(to right, #d99aba00, #d99aba, #d99aba00) 1;

}


.missionVision{
    padding: 160px 0;
    width: 100%;
    max-width: 1200px;
}


.missionVisionItem{
    padding-top: 18px;
    padding-bottom: 24px;
    vertical-align: top;
    width: 50%;
    text-align: right;
    border-right: 2px solid rgba(255,255,255,0.1);
    padding-right: 20px;


}

.missionVisionItem1{
    text-transform: uppercase;
    font-size: 100%;
    font-size: 44px;
    font-weight: 700;
    color: white;
    width: 100%;
}

.missionVisionItem1 i{
    font-size: 20px;
    margin-top: -8px;
    vertical-align: middle;
    display: inline-block;
    color: #d99ab9;
    -webkit-text-stroke: 0.5px white;
}

.missionVisionItem2{
   margin-top: 8px;
    font-size: 100%;
    font-size: 18px;
    font-weight: 500;
    max-width: 510px;
    color: #d99ab9;
}

.missionVisionItemB{
    text-align: left;
    border: none;
    padding-left: 20px;
}

.missionVisionItem2a{
   padding-right: 20px;
}

.missionVisionItem2b{
    padding-left: 20px;
 }

 .ecosystemTitle{
    width: 100%;
    font-size: 42px;
    color: white;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 30px;
 }

 .ecosystemWrapper{
    padding: 160px 0;
    width: 100%;
   max-width: 1200px;
 }

 .ecosystemTitle span{
    color: #d99ab9;
 }

 .ecosystemItem{
    padding: 50px 0;
    vertical-align: top;
    width: 50%;
    max-width: 600px;
    text-align: center;
    background: radial-gradient(circle, rgba(2,2,43,0.5) 0%, rgba(2,2,43,0) 30%);

  
 }

 .ecosystemItem1{

    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 6px solid white;
    margin-bottom: 2px;

 }

 .ecosystemItem1_1{
    border: 6px solid #00efff;
 }

 .ecosystemItem1_2{
    border: 6px solid #fc029d;
 }
 .ecosystemItem1_3{
    border: 6px solid #0426f1;
 }
 .ecosystemItem1_4{
    border: 6px solid #06ff00;
 }
 .ecosystemItem1_5{
    border: 6px solid #fd4105;
 }

 .ecosystemItem1_6{
    border: 6px solid #d600ef;
 }



 .ecosystemItem2{
   
    font-weight: 700;
    text-transform: uppercase;
    width: 100%;
    font-size: 28px;
    color: white;
 
 
 }

 .ecosystemItem2 i{
    margin-bottom: 10px;
    width: 100%;
    vertical-align: middle;
    display: inline-block;
    color: #d99ab9;
   font-size: 52px;
    -webkit-text-stroke: 0.5px white;
 }

 .ecosystemItem3{
    padding: 0 60px;
    margin-top: 6px;
   
    width: 100%;
    font-size: 18px;
    font-weight: 500;
    color: #d99ab9;
 }

 .roadmapContent{
    width: 100%;
 }

 .roadmapContentItem{
    vertical-align: top;
    width: 16.666%;
    text-align: center;
    background: radial-gradient(circle, rgba(2,2,43,0.5) 0%, rgba(2,2,43,0) 30%);

 }


 .roadmapContentItem1{
    width: 100%;
    color: white;
    font-weight: 700;
    font-size: 42px;
 }


 .roadmapContentItem2{
    margin-top: 10px;
    width: 100%;
    color: #d99ab9;
    font-weight: 600;
    font-size: 14px;
    padding: 0 10px;
 }

 .roadmapContentItem2 span{
    display: inline-block;
    padding-bottom: 14px;
 }

 .roadmapLine{
    margin-top: 40px;
    width: 100%;
 }

 .roadmapLineItem{
    text-align: center;
    font-size: 20px;
    width: 16.666%;
    color: #d99ab9;
    -webkit-text-stroke: 0.5px white;
 }

.roadmapRoad{
    margin-top: 10px;
    width: 100%;
    height: 2px;
    background-color: rgba(255,255,255,1);
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1), rgba(255,255,255,0) );
}

.roadmapRoadItem{
    width: 16.666%;
    text-align: center;
    height: 2px;

}

.roadmapRoadItemDot{
    width: 6px;
    height: 6px;
    margin-top: -2px;
    border-radius: 50%;
    background-color: white;
}

.tokTitle{
    width: 100%;
    font-size: 32px;
    color: white;
    font-weight: 700;
    margin-bottom: 0px;
}

.ecosystemItem3 i{
    font-size: 16px;
    color: #d99ab9;
    margin-right: 2px;
    -webkit-text-stroke: 0.5px white;
}

.ecosystemItemTok{
    width: 33.333%;
    padding: 0;
    margin-bottom: 35px;
}

.ecosystemItemTok .ecosystemItem2, .ecosystemItemTok .ecosystemItem3, .ecosystemItemTok .ecosystemItem4{
    padding: 0 10px;
}

.ecosystemItemTok .problemItemDot{
   
    height: 2px;
    width: 18px;
    border-radius: 1px;
}

.ecosystemTitleB{
    margin-bottom: 10px;
}

.headerSocialsB{
    width: 100%;
    margin: 0;
}

.headerSocialButtonB{
    overflow: hidden;
    border-radius: 10px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    background-color: rgba(255,255,255,0.1);
}

.headerSocialButtonB i{
    background-color: transparent;
    font-size: 20px;
    margin: 0;
    padding: 0;
    height: 50px;
    line-height: 50px;
    width: 100%;
    border-radius: 0px;
    margin-right: 2px;
    color: #d99ab9;
    -webkit-text-stroke: 0.5px white;
}

.section4{
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    background: linear-gradient(to left,rgba(0,0,0,0.2), #02022b );
    color: rgba(255,255,255,0.15);
}

@media only screen and (max-width: 920px){
.problemItem{
    width: 100%;
    padding: 0;
    margin: 20px 0;
}
.problemWrapper{
    padding: 120px 0;
}
.problemItem2{
    display: none;
}
}

@media only screen and (max-width: 820px){
    .roadmapContentItem1{
        margin-top: 10px;
        font-size: 22px;
    }
    .roadmapContentItem2{
        font-size: 13px;
    }
}

@media only screen and (max-width: 630px){
    .roadmapContentItem1{
        margin-top: 0px;
        font-size: 36px;
    }
    .roadmapContentItem{
        width: 100%;
        margin-bottom: 30px;
    }
    .roadmapContentItem2{
        font-size: 16px;
    }

    .roadmapLine{
        display: none;
    }
    .roadmapRoad{
        display: none;
    }
}

@media only screen and (max-width: 660px){
    .ecosystemItem{
        width: 100%;
    }
    .ecosystemItem3{
        padding: 0;
    }
}


@media only screen and (max-width: 580px){
    .headerSocials{
        display: none;
    }
    .headerSocialsB{
        display: inline-block;
    }
    
}

@media only screen and (max-width: 445px){
    .headerMenuButton{
        padding: 0 12px;
        font-size: 12px;
    }
}

@media only screen and (max-width: 840px){
    .missionVisionItem{
        padding: 0;
        text-align: center;
        width: 100%;
        border: none;
        margin-bottom: 30px;
    }
    .missionVisionItem2a{
        text-align: left;
    }
    .missionVisionItem2b{
        padding: 0;
        text-align: left;
    }

    .missionVisionItem1 i {
        display: none;
    }
}


.tokenStats{
    font-size: 0;
    width: 100%;
    max-width: 600px;
    padding: 30px;
    border: 2px solid #d99ab9;
    border-radius: 16px;
    background: linear-gradient(45deg,transparent,rgba(217,154,186,.37254901960784315));
}


.section1itemProgressTop{
    vertical-align: top;
    padding: 0 4px;
    width: 100%;
   
    color: #d99ab9;
    font-weight: 600;
    margin-top: 4px;
}

.section1itemProgressTop2{
   
    margin-top: 28px;
}

.section1itemProgressTopLeft{
    vertical-align: top;
    text-align: left;
    width: 50%;
    font-size: 14px;
}

.section1itemProgressTopRight{
    vertical-align: top;    
    text-align: right;
    width: 50%;
    font-size: 14px;
  
}


.section1itemProgressTopRightWw{
    color: white;
    font-size: 22px;
    font-weight: 800;
}

.progressbar{
    margin-bottom: 18px;
    padding: 1px;
    position: relative;
    overflow: hidden;
    text-align: left;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background-color: #03022d;
    border: 1px solid #d99ab9;
}

.progressbarinner{
    margin-top: 0px;
    height: 4px;
    border-radius: 2px;
    width: 0%;
    background-color: #57ff92;

}


.sectionWrapperToken{
    padding: 120px 25px;
  
}

.section1itemLine{
    color: white;
    width: 100%;
    font-size: 0px;
    padding: 8px 0;
 
   border-bottom-width: 2px;
   border-bottom-style: solid;
   border-image: linear-gradient(to right, #d99aba, #d99aba00) 1;
}

.section1itemLineLeft{
    text-align: left;
    width: 50%;
    font-size: 16px;
}

.section1itemLineRight{
    text-align: right;
    width: 50%;
    color: #d99ab9;
    font-weight: 800;
    font-size: 16px;
}


.section1itemTitle {
    text-align: left;
    margin-bottom: 10px;
    width: 100%;
    font-size: 28px;
    color: #d99ab9;
    font-weight: 700;
}

.tokenButton{
    margin-top: 30px;
    font-weight: 800;
    display: inline-block;
    width: 100%;
    font-size: 18px;
    text-transform: uppercase;
    color: #111425;
    background: linear-gradient(-45deg, #ffffff, #ffe4f2);
    border: 2px solid #ffffff;
    height: 54px;
    line-height: 50px;
    border-radius: 12px;
}

.abText{
    vertical-align: middle;
    width: 50%;
   text-align: right;
}

.abTextInner{

padding-right: 20px;
  width: 100%;
  text-align: right;
  max-width: 450px;
  font-size: 18px;
  color: white;
}

.abWrapper{
    padding-left: 20px;
    vertical-align: middle;
    text-align: left;
    width: 50%;

    border-left-width: 2px;
    border-left-style: solid;
    border-image: linear-gradient(to bottom,#da9aba00, #d99aba, #da9aba00) 1;
  
}

.abItem{
    text-transform: uppercase;
    font-size: 14px;
    padding: 8px 20px;
    color: #111425;
    background: linear-gradient(-45deg, #d99ab9, #fa8bc3);
    border-radius: 8px;
    margin: 10px;
    font-weight: 700;
}

.abMaster{
    width: 100%;
    font-size: 0;
}

.timage{
    width: 100%;
    height: 500px;
    background-image: url(./wpp.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.wppButton{
    margin-top: 0px;
    font-weight: 800;
    display: inline-block;
    width: 100%;
    font-size: 18px;
    text-transform: uppercase;
    color: #111425;
    background: linear-gradient(-45deg, #ffffff, #ffe4f2);
    border: 2px solid #ffffff;
    height: 54px;
    line-height: 50px;
    border-radius: 12px;
    max-width: 220px;
}

.tokeImage{
    width: 100%;
    height: 500px;
    background-image: url(./token.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}


.faqWrapper{
    width: 100%;
max-width: 700px;
}

.faqItem{
    text-align: left;
    width: 100%;
    margin-bottom: 30px;
    font-size: 0;
}

.faqItem i{
    vertical-align: top;
    width: 22px;
    height: 22px;
    display: inline-block;
    font-size: 22px;
    color: #d99ab9;
    margin-left: -10px;
    margin-top: 5px;
}

.faqQuestion{

    color: #d99aba;
    padding-left: 8px;
    width: calc(100% - 22px);
    font-size: 24px;
        line-height: 28px;
    font-weight: 500;

   
}


.faqSpacer{
    width: 100%;
    vertical-align: top;
    
}


.faqAnswer{
    vertical-align: top;
    margin-top: 0px;

    padding: 8px 20px;
    border-left-width: 2px;
    border-left-style: solid;
    border-image: linear-gradient(to bottom, #d99aba, #da9aba00) 1;
    color: white;
 
    width: 100%;
    font-size: 16px;

}

.faqAnswer i{
    font-size: 16px;
    margin: 0;
    padding: 0;
    margin-top: 4px;
    margin-left: 1px;
}

@media only screen and (max-width: 1025px){
    .section1Line4Button{
        margin-bottom: 14px;
    }
}

@media only screen and (max-width: 975px){
    .section1{
        height: auto;
        min-height: unset;
    }
    .section1left{
        position: static;
        width: 100%;
        height: auto;
        min-height: unset;
        margin-bottom: 80px;
    }

    .section1leftInner{
        text-align: center;
        position: static;
        transform: none;
    }
    .section1right{
        margin-top: 120px;
        position: static;
        width: 100%;
        height: 500px;
        min-height: unset;
    }
    .section1rightInner{
        margin: 0;
        background-size: contain;
    }
    .section1leftInner1line2{
        width: 40px;
    }
   
}

@media only screen and (max-width: 560px){
.section1leftInner2{
    font-size: 32px;
    line-height: 40px;
}
.section1right{
    margin-top: 120px;
    position: static;
    width: 100%;
    height: 300px;
    min-height: unset;
}
   
}


@media only screen and (max-width: 440px){
.stepItem2{
    font-size: 22px;
}
}

@media only screen and (max-width: 540px){
.abText, .abTextInner{
    text-align: center;
    padding: 0;
    margin: 0;
    width: 100%;
}
.abWrapper{
    text-align: center;
    border: none;
    width: 100%;
    padding: 0;
    margin-top: 20px;
}
}


@media only screen and (max-width: 440px){
    .ecosystemTitle{
        font-size: 34px;
    }
    .timage, .tokeImage{
        height: 350px;
    }
    .tokTitle{
        font-size: 22px;
    }
    .header{
        padding: 0 25px;
    }

.sectionWrapperInner{
    padding: 30px 0;
}

}




.section1item{
    vertical-align: top;
    padding: 0 60px;
    text-align: left;
    width: 100%;
    max-width: 700px;
    font-size: 0;

}

.section1itemTitle{
    margin-top: 0px;
    margin-bottom: 14px;
    width: 100%;
    font-size: 28px;
    color: white;
    font-weight: 700;
}

.section1itemLine{
    color: white;
    width: 100%;

    padding: 8px 0;
 
   border-bottom-width: 2px;
   border-bottom-style: solid;
   border-image: linear-gradient(to right, #d99aba00, #d99aba67, #d99aba00) 1;
}

.section1itemLineLeft{
    width: 50%;
}

.section1itemLineRight{
    text-align: right;
    width: 50%;
    color: #d99ab9;
    font-weight: 800;
}

.section1itemProgressTop{
    margin-top: 4px;
    padding: 0 0px;
    width: 100%;
    font-size: 0;
    color: #d99ab9;
    font-weight: 700;
}

.section1itemProgressTopLeft{
   
    text-align: left;
    width: 50%;
    font-size: 16px;
}

.section1itemProgressTopRight{
    text-align: right;
    width: 50%;
    font-size: 16px;
}


.progressbar{
    margin-top: 2px;
    padding: 1px;
    position: relative;
    overflow: hidden;
    text-align: left;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background-color: #03022d;
    border: 1px solid #d99ab9;
}



.field{

    vertical-align: top;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    color: #d99ab9;
    padding: 0 12px;
    margin-top: 0px;
    width: 100%;
    display: inline-block;
    height: 50px;
    line-height: 50px;
    background-color: #2c2d4a;
    border: none;
    outline: none;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.15);
    margin-bottom: 14px;
}

.field::placeholder{
      color: #d99ab9;
}

.fieldHint{
    margin-bottom: 6px;
    padding-left: 4px;
    color: white;
    width: 100%;
    font-size: 12px;
    height: 12px;
    line-height: 12px;
    font-weight: 600;
    text-transform: uppercase;
 
}

.space{
    width: 100%;
    height: 14px;
}

.button{
    margin-top: 10px;
    cursor: pointer;
    width: 100%;
    height: 60px;
    font-size: 22px;
    text-align: center;
    line-height: 60px;
    font-weight: 800;
    color: #03022d;
    background-color: #d99ab9;
    background: linear-gradient(to right,#d99ab9,#ed81b7 );
    border-radius: 8px;
}

.section1item2{
    padding: 30px 30px;
    border: 2px solid #d99ab9;
    border-radius: 10px;
    background: linear-gradient(45deg, rgba(0,0,0,0),#d99aba5f )
}

.secwrap{
    width: 100%;
    max-width: 1200px;
}

.section1itemTitle2{
    margin-top: 20px;
}

@media only screen and (max-width: 780px){
    .sectionWrapper{
        padding: 0 15px;
    }
.section1item{
    width: 100%;
}
.section1item{
    padding: 0;
    margin-bottom: 30px;
}
.section1item2{
    padding: 30px 30px;
}
.headerSocials{
    display: none;
}
.section1item {
    padding: 14px;
}

}

.section1itemProgressTop2{
    font-size: 18px;
    font-weight: 700;
    color: white;
}


.progressbarSectionWrapper{
   
    border-radius: 4px;
    width: 100%;
   
    height: 6px;
   
    background: linear-gradient(to right, #8ff8ff, #e8fdff, #fdff79, #ff2a00);
}

.progressbarSection{

}

.progressbarSection1{
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    text-align: right;
 
    width: 15%;
    height: 6px;
    
}

.progressbarSection2{
    text-align: right;
   
    width: 25%;
    height: 6px;
    
}


.progressbarSection3{
    text-align: right;
   
    width: 28%;
    height: 6px;
    
}


.progressbarSection4{
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    text-align: right;
   
    width: 32%;
    height: 6px;
    
}


.progressbarSectionLine{
    width: 4px;
    margin-top: -2px;
    height: 10px;
    border-radius: 2px;
    background-color: white;
}

.progressbarSectionNamesWrapper{
    margin-bottom: 0px;
    width: 100%;
}

.progressbarSectionNamesWrapper2{
    margin-bottom: 6px;
}

.progressbarSectionNames{
    text-align: center;
    font-size: 12px;
    color: white;
    line-height: 8px;
}

.progressbarSectionNames1{
    width: 15%;
    
}

.progressbarSectionNames2{
    width: 25%;
    
}
.progressbarSectionNames3{
    width: 28%;
    
}
.progressbarSectionNames4{
    width: 32%;
    
}


.progressbarSectionNamesWrapper3{
    margin-top: 6px;
    height: 4px;
    line-height: 5px;
   
}


.progressbarSectionValues1i{
    vertical-align: top;
    width: 15%;
    
}

.progressbarSectionValues2i{
    vertical-align: top;
    width: 25%;
    
}
.progressbarSectionValues3i{
    vertical-align: top;
    width: 28%;
    
}
.progressbarSectionValues4i{
    vertical-align: top;
    width: 32%;   
}


.progressbarSectionValues{
    vertical-align: top;
text-align: right;

 
}

.progressbarSectionValues i{
    margin-right: -1px;
    font-size: 10px;
    color: white;
}


.progressbarSectionNamesWrapper4{
   vertical-align: top;
   
   
}


.progressbarSectionValues1{
    vertical-align: top;
    width: 15%;
    
}

.progressbarSectionValues2{
    vertical-align: top;
    width: 25%;
    
}
.progressbarSectionValues3{
    vertical-align: top;
    width: 28%;
    
}
.progressbarSectionValues4{
    vertical-align: top;
    width: 32%;   
}


.pbrInner{
    vertical-align: top;
    border-radius: 10px;
    margin-right: -10px;

    padding: 6px 6px;
    background-color: white;
    color: #02022b;

    font-weight: 800;
   
    font-size: 10px;
    line-height: 8px;
}

.pbrInnerActive{
    font-weight: 900;
}

.liveSec{
    display: inline-block;
    width: 100%;
   height: 40px;
   margin-bottom: 7px;
   background-image: url(./totonaIcon.png);
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
}


.progressbarSectionNamesActive{
    font-weight: 700;
}

.section1itemTitleA{
    margin-top: 30px;
    margin-bottom: 10px;
}

.showBonus{
    margin-top: 9px;
    width: 100%;
    font-size: 16px;
    color: #d99ab9;
    font-weight: 600;
    margin-bottom: 4px;
}

.showBonus i{
    vertical-align: middle;
    display: inline-block;
    margin-top: -3px;
    margin-left: 2px;
    font-size: 12px;
}


.liveSecDot{
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: white;
    margin-bottom: 8px;
}
















@media only screen and (max-width: 600px){
    .showBonus{
        font-size: 12px;
    }
    .showBonus i{
        font-size: 8px;
        margin-top: -1px;
    }
    .progressbarSectionNames{
        line-height: 13px;
    }
    .pbrInner{
        font-size: 8px;
    }
}