*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body{
    background:#37479c;
    overflow-x: hidden;
    /* font-family: extra; */
}
@font-face {
    font-family:chil;
    src: url(../font/chibold.ttf);
}
@font-face {
    font-family:patrick;
    src: url(../font/patrick.ttf);
}
p{

}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
/* -----------------------------------------banr-sec------------------------------ */
.main-bg{
    background-image: url(../images/bcx.html\ 1.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

.bnr-bg{
    background-image: url(../images/bnr.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 140vw;
}
.nav{
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 60vw;


}
.left img{
    width: 12vw;

}
.right{
    display: flex;
    align-items: center;
    gap: 1vw;


}
.right .icn1 img{
    width: 3.5vw;
    transition: .3s;

}
.right .icn1 img:hover{
    transform: translateY(-.6vw);

}
.right .icn2 img:hover{
    transform: translateY(-.6vw);

}

.right .icn2 img{
    width: 3.5vw;
    transition: .3s;

}
.text{
    width: 20vw;
    display: flex;
    margin: auto;
}
.bnr-gfs{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6vw;
}
.gif1{
    background: url("../images/left.gif");
    background-size: cover;
    background-position: center;
    width: 16%;
    height: 16vw;
    margin-top: 29vw;

}
.gif2{
    background: url("../images/banner.gif");
    background-size: cover;
    background-position: center;
    width: 30%;
    height: 30vw;
    transform: translateY(9vw);

}
.gif3{
    background: url("../images/right.gif");
    background-size: cover;
    background-position: center;
    width: 22%;
    height: 15vw;
    margin-top: 33vw;

}
/* --------------------------logos-sec-------------------------- */
.logos-sec{
    /* margin-top: 3vw; */
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: center;
    margin-top: -31vw;
    gap: 1.5vw;

}
.fst-row{
    display: flex;
    align-items: center; 
    justify-content: center;
    gap: 1vw;

}
.fst-row img{
    width: 9.5vw;
}
.scnd-row{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1vw;

}
.scnd-row img{
    width: 10.7vw;
}
.thrd-row{
    display: flex;
  align-items: center;
    justify-content: center;
    /* gap: 1vw; */

}
.thrd-row img{
    width: 11.8vw;
}
.for-row{
    display: flex;
  align-items: center;
    justify-content: center;
    /* 
     */

}
.for-row img{
    width: 11.8vw;
}
.five-row{
    display: flex;
  align-items: center;
    justify-content: center;
    gap: 2vw;

}
.five-row img{
    width: 7.1vw;
}
/* ---------------------------about-sec------------------------------------ */
.about-sec{
    position: relative;
    margin-top: 2vw;
    width: 100%;
}
.gif4{
    background: url("../images/about1.gif");
    background-size: cover;
    background-position: center;
    width: 17%;
    height: 17vw;
    position: absolute;
    left: 0%;
    z-index: 2;
    top: 93%;
    transform: translateX(-5vw);


}
.about-bx{
    background-image: url(../images/about.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 70%;
    height: 45vw;
    margin: auto;
    position: relative;
    
}
.left-text{
    position: absolute;
    top: 23%;
    width: 45%;
    left: 16%;
}
.left-text h4{
    font-size: 4vw;
    color: #fff;
    font-family: chil;
    -webkit-text-stroke: 2px #3189f1;

}
.left-text p{
    font-size: 1.5vw;
    color: #fff;
    font-family: patrick;
    transform: translateY(6vw);
    width: 90%;
    
}
.gif5{
    background: url("../images/about-main.gif");
    background-size: cover;
    background-position: center;
    width: 30%;
    height: 22vw;
    position: absolute;
    left: 55%;
    top: 27%;

}
/* ----------------------token-sec-------------------------------- */
.token-sec{
    position: relative;
}
.gif6{
    background: url("../images/token-right.gif");
    background-size: cover;
    background-position: center;
    width: 15%;
    height: 15vw;
    position: absolute;
    right: 0;
    z-index: 2;
    top: 116%;

}
.token-box{
    background-image: url(../images/token.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 70%;
    height: 47vw;
    margin: auto;
    position: relative;

}
.left-tkn{
    background: url("../images/token.gif");
    background-size: cover;
    background-position: center;
    width: 30%;
    height: 20vw;
    position: absolute;
    left: 15%;
    top: 37%;

}
.right-tkn {
    position: absolute;
    left: 53%;
    top: 43%;
}
.right-tkn ul li{
    font-size: 1.5vw;
    line-height: 3.7vw;
    color: #fff;
    font-family: patrick;
}
/* ------------------------road-sec---------------------------------------- */
.road-sec{
    background-image: url(../images/road.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 70%;
    height: 100vw;
    margin: auto;
    position: relative;
}
.img1{
    background: url("../images/road-map1.gif");
    background-size: cover;
    background-position: center;
    width: 21%;
    height: 14vw;
    position: absolute;
    left: 20%;
    top: 20%;
}
.img2{
    background: url("../images/road-map2.gif");
    background-size: cover;
    background-position: center;
    width: 28%;
    height: 18vw;
    position: absolute;
    left: 55%;
    top: 17%;
}
.img3{
    background: url("../images/road-map3.gif");
    background-size: cover;
    background-position: center;
    width: 18%;
    height: 13vw;
    position: absolute;
    left: 20%;
    top: 61%;
}
.img4{
    background: url("../images/road-map4.gif");
    background-size: cover;
    background-position: center;
    width: 22%;
    height: 14vw;
    position: absolute;
    left: 55%;
    top: 60%;
}
/* ---phs-- */
#phs1{
    position: absolute;
    left: 18%;
    top: 38.5%;
    
}
#phs2{
    position: absolute;
    left: 58%;
    top: 38.6%;
}
#phs3{
    position: absolute;
    left: 18%;
    top: 80%;
}
#phs4{
    position: absolute;
    left: 58%;
    top: 80%;
}
.phs h4{
    font-size: 2vw;
    color:#242b5b;
    font-family: chil;
    line-height: 3.5vw;
}
.phs ul li{
    font-size: 1.5vw;
    color:#040505;
    font-family: patrick;
    line-height: 2vw;
    list-style: disc;

}
.phs ul{
    transform: translateX(2vw);

}
/* --------------------------ftr-sec--------------------------- */
.ftr-sec{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 3vw;
    text-align: center;
    
}
.up{
    background: url("../images/footer.gif");
    background-size: cover;
    background-position: center;
    width: 11%;
    height: 11vw;
    transform: translateY(1vw);

}
.cntr img{
    width: 16vw;
    
}
.line{
    width: 70%;
    height: 1px;
    background-color:#404783;
    margin: auto;

}
.end{
    font-size: 1.5vw;
    color:#fff;
    font-family: patrick;
    padding-bottom: 1.5vw;
    margin-top: 2vw;
}