@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600&display=swap');


*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    transition: 0.25s ease;
    /* animation: slideIn 0.25s cubic-bezier(0.33, 0.85, 0.4, 0.96) forwards; */
}


@keyframes slideIn {

    0% {
        transform: translateY(0);
        background-color: white;
    }

    100% {
        transform: translateY(100%);
        background-color: hsl(228, 9%, 10%);
    }

}
body{
    background-color: black !important;
    color: #979797;
}
header{
    display: flex;
    z-index: 200;
    align-items: center;
    justify-content: space-between;
    padding: 0 25px;
    height: 4rem;
    border-bottom: 1px solid #434343;
    position: sticky;
    top: 0; left: 0; width: 100%;
    background-color: black;
}

.text-white{
    color: white;
}

header >a > img{
    width: 150px;
}

header > ul {
    display: flex; 
    gap: 1.5rem;
}
header>ul> li {
    list-style: none;
}

header > ul > li > a{
    color: #979797;
    text-decoration: none;
    font-size: .89rem;
}

header>ul>li>a:hover {
    color: white
}

#arrow{
    width: 12px;
    margin-left: 10px;
}

.connectBtn{
    border: 1px solid #fff;
        color: #fff;
        text-decoration: none;
        height: 36px;
        display: flex;
        align-items: center; justify-content: center;
        font-size: 10px;
        border-radius: 20px;
        padding: 0 20px;
        background-color: transparent;
}

.bg-blue{
    background-color: #0077FE;
}
.text-white{
    color: white
}


/* Hero Section */
.hero{
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    flex-direction: column;
    height: calc(100vh - 4rem);
    
}
#left{
    position: absolute;
    left: 0;
    top: 20%;
    width: 17%;
}
#right{
    position: absolute;
    right: 0;
    top: 20%;
    width: 17%;
}

.hero > p{
    margin-top: 5rem;
    font-size: 1rem;
    text-align: center;
}
.hero > h4, .title{
    color: white;
    font-weight: 600;
    font-size: 3rem;
    width: 40%;
    text-align: center;
    margin: .5rem 0;
}
.title2{
    color: white;
    font-weight: 600;
    font-size: 3rem;
    width: 60%;
    text-align: center;
    margin: .5rem 0;
}
.lineCont{
    width: 31%;
    display: flex;
    justify-content: flex-end;
    margin-top: -10px;
    margin-bottom: 1rem;
}
.line{
    width: 180px;
    align-self: flex-end;
}
.hero > span {
    font-size: .8rem;
    width: 40%;
    line-height: 1.4rem;
    text-align: center;
}
.btnsContainer{
    display: flex;
    gap: 2rem;
    margin: 2rem;
}

.btnsContainer > button, .btn{
    padding: 10px 25px;
    border: none;
    outline: none;
    font-size: .8rem;
    height: 40px;
    border-radius: 20px;
    cursor: pointer;
    width: 150px
}

.stats-container{
    width: 100%;
    z-index: 2;
    background-color: #141618;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
    gap: 2rem;
    margin-top: 3rem;
}

.lineDividor{
    background-color: #434343;
    width: 1px;
    height: 40px;
}

.stat{
    margin: 0 20px;    
}
.stat > h5{
    font-family: 'Plus Jakarta Sans';
        font-style: normal;
        font-weight: 600;
        font-size: 1.3rem;
        line-height: 145%;
        text-align: center;
        color: #FFFFFF;
}
.stat > p{
    font-family: 'Plus Jakarta Sans';
    font-size: .6rem;
    line-height: 145%;
    text-align: center;
    color: #eee;
}

.table{
    width: 97%;
    margin: 1.5%;
}

.partners > h3{
        font-family: 'Plus Jakarta Sans';
        font-weight: 600;
        font-size: 3rem;
        text-align: center;
        letter-spacing: -0.03em;
        color: #FFFFFF;
}

.flex-center{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.dash{
    margin-top: -1rem;
    padding: 1rem
}

.p{
    padding: 0 15px;
    text-align: center;
    font-size: 20px;
}
#story{
    margin: 10%;
    width: 80%;
    margin-top: 10px;
}
#latest{
    width: 60%;
}
.exchange{
    display: flex;
    flex-direction: row;
    gap: 2.5rem;
    padding: 0 2.5rem;
    position: relative;
    height: auto;
}

.exchange > img{
    width: 40%;
}

.exchange > div{
    min-width: 60%;
}

.exchange > div h3{
    color: white;
    font-weight: 600;
        font-size: 1.8rem;
        width: 95%;
        /* text-align: center; */
}

.exchange>div p {width: 70%;}

.exchange > div button{
    padding: 10px 25px;
        border: none;
        outline: none;
        font-size: .8rem;
        height: 40px;
        border-radius: 20px;
        color: white;
        margin-top: 40px;
        cursor: pointer;
}
.tick{
    width: 15px; margin-right: 8px;
}
.paras{
    font-size: 15px;
    line-height: 30px;
}

#frame{
    margin-top: 30px !important;
}

#ssss{
    padding: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

#ssss > img{
    width: 70%;
}
#p2{
    width: 60%;
}

section{
    background-color: #0F1215;
    padding: 4rem 1.2rem;
    
}

section > div{
    background-image: url("../img/MaskGroup.png");
    background-position: center;
    background-size: contain;
    background-color: #0077FE;
    padding: 2rem;
    border-radius: 15px;
    display: flex;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-between;
    color: white;
}

section>div > div> p {
    margin: 10px 0;font-size: 13px;
}

form > input{
    width: 250px;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #eee;
    padding: 5px;
    outline: none;
    color:white
}

form>input::placeholder {color: #eee}

form > button{
    padding: 10px 25px;
        border: none;
        outline: none;
        font-size: .8rem;
        height: 40px;
        border-radius: 20px;
        color: #1E1E1E;
        margin-top: 10px;
        cursor: pointer;
}

footer{
    background-color: #0F1215;
    border-top: 1px solid #434343;
    padding: 2rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.f{
    display: flex;
    align-items: flex-start;
    width: 40%;
    justify-content: space-between;
}

.list > li{
    list-style: none;
}



.list>li a{text-decoration: none; color: white; font-size: 11px;}

.footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    background-color: #0F1215;
}

.footer img{
    width: 17%;
}

.stepsContainer{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 10px;
    margin: 1rem 0;
}
.stepsContainer > img{
    width: 20%;
}


.team{
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 1rem 0;
    justify-content: center;
    align-items: center;
    

}
.team > h4, .mission > h4, .howitworks > h4{
    text-align: center;
    color: white;
    margin-bottom: 2rem;
    font-size: 2rem;
}

.fiverem{
    margin-top: -15rem;
}

.gridd{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px; /* Adjust the gap value as needed */
  padding: 1rem

}

.gridd .person{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.gridd .person img{
    width: 100px;
    object-fit: contain;
}

.gridd .person h5{
    color: white;
    font-weight: 600;
    font-size: .9rem;
    margin-top: 10px;
}

.gridd .person p{
    font-size: .6rem;
    color: #aaa;
    margin-top: 3px;
}

.mission{
    padding: 1rem;
    
    max-width: 100%;
}

.mission > div > p{
    font-size: .9rem;
    text-align: center;
    width: 70%;
    margin: 0 15%;
}

.vid{
    width: 100%;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vid > video {
    width: 80%;
}

#star{
    width: 300px
}

#menuBtn{
    display: none !important;
}

.main{
    background-color: black;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    position: relative;
    padding: 20px;
    height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.black{
    width: 100%;
    height: 100%;
    background-color: #0F1215;
    opacity: 0.6;
    position: absolute;
}

.main h4{
    z-index: 10;
    text-align: center;
    color: white;
    font-size: 3rem;
}

.howitworks{
    padding: 1rem;
    padding-top: 2rem;
}

.howitworks > div{
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    gap:2rem
}

.howitworks .text{
    width: 40%;
}
.howitworks .text > h4{
    font-size: 2.2rem;
    color: white;
}

.howitworks .text > h4 > span{
    
    color: #0077FE;
}

.howitworks > div > img{
    width: 40%;
}

.howitworks .text > p{
    line-height: 40px;
    font-size: 1.7rem;
}

.how {
    display: flex;
    align-items: center;
    padding: 1rem 2rem;
    gap:2rem
}

.how > img{
    width: 40%;
}

.how .text{
    width: 50%;
}

.how .text > h4{
    font-size: 2.2rem;
    color: white;
}

.how .text > h4 > span{
    
    color: #0077FE;
}

.how .text > p{
    line-height: 40px;
    font-size: 1.7rem;
}

.blogContainer{
    width: 100%;
    display: grid;
    /* margin: 1.2rem 0; */
    grid-template-columns: repeat(3, 1fr);
    padding:1.5rem;
    gap: 1rem;
    /* background-color: red; */
}

.blogContainer > img{
    width: 100%;
    cursor: pointer;
}

.ddd{
    display: flex;
    gap: 1.3rem;
    align-items: center;
    padding: 1rem 2.5rem;
}

.logoContainer{
    width: 340px;
    height: 340px;
    background-color: white;
    display: flex;align-items: center; justify-content: center;

}


.logoContainer > img{
    width: 70%;
}
.textCont{
    padding: 1rem;
    width: 40%;
}
.textCont > p{
    font-size: .7rem;
}

.textCont > h3{
    color: white;
    font-size: 2.2rem;

margin-bottom: 1.5rem;}


.partnership {
    padding: 2rem;
}

.flex{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    width: 100%;
}

#contact{
    padding: 20px 1rem
}
#contact > img{
    width: 60%;
}

textarea{
    background-color: transparent;
    border: 1.2px solid lightgray;
    border-radius: 15px;
    padding: 1.3rem;
    margin-left: 55px;
    color: white;
    width: 65%;
}

#vision{
    margin: 10px;
}
#mission{
    margin: 10px 40%;
}


.partnership > p{
    text-align: center;
    width: 80%;
    margin: 0 10%;
}

.pictures{
    display: flex;
    flex-wrap: wrap;
}

.pictures > img:first-child{
    width: 33%;
}
.pictures > img:nth-child(2){
    width: 66%;
}
.pictures > img:nth-child(3){
    width: 45%;
}
.pictures > img:nth-child(4){
    width: 40%;
}
.pictures > img:nth-child(5){
    width: 15%;
}










































/* Mobile */
@media screen and (max-width: 480px) {
    header{
        padding: 0 15px;
    }
   header > ul{
    display: none;
   }
   .hero {
       /* min-height: 50vh; */
       /* background-color: #0077FE; */
       height: auto !important;

   }
   .hero>p {
       margin-top: 5rem;
       font-size: .7rem;
       text-align: center;
   }
   .hero>h4, .title {
       font-weight: 600;
       font-size: 1.8rem;
       width: 95%;
       text-align: center;
   }

   .title2 {
       font-weight: 600;
       font-size: 1.5rem;
       width: 95%;
       text-align: center;
   }
   .hero>span {
       font-size: .6rem;
       width: 92%;
       line-height: 1rem;
       text-align: center;
   }
   #left {
       position: absolute;
       left: 0;
       top: 30%;
       width: 20%;
   }

   #right {
       position: absolute;
       right: 0;
       top: 35%;
       width: 17%;
   }
   .lineCont {
       width: 70%;
       display: flex;
       justify-content: flex-end;
       margin-top: -10px;
       margin-bottom: 1rem;
   }


   .stat>h5 {
       font-weight: 600;
       font-size: 1rem;
       line-height: 145%;
       text-align: center;
       color: #FFFFFF;
   }

   .stats-container {gap:1rem; padding: 1rem;}

   .stat>p {
       font-family: 'Plus Jakarta Sans';
       font-size: .4rem;
       line-height: 145%;
       text-align: center;
       color: #eee;
   }
  .line {
      width: 160px;
  }
  .partners>h3 {
     
      font-size: 1.5rem;
      
  }
  .dash {
      margin-top: 0;
  }
  .p {
      padding: 0 15px;
      text-align: center;
      font-size: 12px;
  }
  #story {
      margin: 3%;
      width: 94%;
      margin-top: 10px;
  }
  #latest {
      width: 80%;
  }
  .exchange {
      display: flex;
      flex-direction: column-reverse;
      gap: 2.5rem;
      padding: 0 2.5rem;

  }
  #frame {
      margin-top: 20px !important;
  }

  .reverse{
    flex-direction: column !important;
  }

  .exchange>img {
      width: 98%;
  }

  .exchange>div {
      min-width: 100%;
  }

  .exchange>div h3 {
      color: white;
      font-weight: 600;
      font-size: 1.2rem;
      margin-top: 40px;
      text-align: center;
  }

  .exchange>div p {
      width: 100%;
  }
  .paras {
      font-size: 13px;
      line-height: 30px;
  }
  #ssss {
      padding: 1rem
  }
  #ssss>img {
      width: 90%;
  }
  #p2 {
      width: 90%;
  }
  section>div {flex-direction: column;}

  footer{
    flex-direction: column;
    padding: 1rem
  }
  .f{
    width: 100%;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    color: white;
  }
  .footer img {
      width: 40%;
  }
  .stepsContainer{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 1rem 0;
}
.stepsContainer > img{
    width: 80%;
}
.fiverem{
    margin-top: -5rem;
}
.team > h4{
    font-size: 1.2rem;
}
.gridd{
    grid-template-columns: repeat(2, 1fr);
}

.mission > div > p{
    font-size: .8rem;
    text-align: center;
    width: 94%;
    margin: 0 3%;
}
#menuBtn{
    display: block !important;
}
/* .main{
    background-color: red;
    width: 100%;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
} */

.main h4{
    text-align: center;
    color: white;
    font-size: 2.3rem;
}
.howitworks > div{
    flex-direction: column;
}
.howitworks > div > img{
    width: 97%;
    margin-bottom: 1rem;
}
.howitworks .text{
    width: 99%;
}

.howitworks .text > p{
    line-height: 35px;
    font-size: 1.2rem;
}
.howitworks .text > h4{
    font-size: 1.8rem;
    color: white;
}

.how{flex-direction: column;}
.how > img{
    width: 97%;
}

.how .text{
    width: 97%;
}

.how .text > h4{
    font-size: 1.8rem;
    color: white;
}

.how .text > h4 > span{
    
    color: #0077FE;
}

.how .text > p{
    line-height: 35px;
    font-size: 1.2rem;
}
.blogContainer{
    width: 100%;
    display: grid;
    margin: 1.2rem 0;
    grid-template-columns: repeat(1, 1fr);
    padding:1rem;
    gap: .5rem;
}

.blogContainer > img{
    width: 100%;
}

.ddd{
    display: flex;
    gap: 1rem;
    flex-direction: column;
}

.textCont{
    padding: .3rem;
    width: 96%;
}

#vision{
    margin: 0 30%;
}
#mission{
    margin: 0 30%;
}


}