@import url("variables.css");
/* mobile */
@media only screen and (max-width: 600px) {
  .response{
    text-align: center;
    padding-bottom: 10px !important;
  }
  .logo {
    height: 65px !important;
    width: 65px !important;
    margin: 0 auto;
  }
  .box-tos{
    width: 100.5% !important;
  }
  .p-community{
    text-align: left !important;
  }
  .giving-bill{
    width: 250px; 
    height: 280px;
  }
  .head-card-ecosystem img{
    max-width: 65px;
    max-height: 65px;
  }
  .card-ecosystem{
    margin-top: 20px !important;
  }
  p{
    font-size: 15px !important;
    line-height: 28px !important;
    text-align: center !important;
  }
  .tosaswap-proccess-item{
    text-align: center !important;
  }
  .content-tosaswap{
    margin-top: 30px !important;
  }
  .btn-buy-ecosytem{
    text-align: center !important;
  }
  .btn-buy-ecosytem .py-3,.btn-buy-ecosytem .px-3,.btn-lg{
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding: 10px !important;
  }
  .icon-whychoose .card-whychoose{
    margin-right: 30px !important;
  }
  .icon-whychoose .card-whychoose{
    margin-top: 15px !important;
    margin-left: -3px !important;
  }
  .content-whychoose p{
    padding-right: -25px !important;
  }
  .icon-whychoose .my-5{
    padding: 0 0.5rem 0 1rem;
  }
.wapper-img-tosaswap {
    margin-bottom: 4rem;
}
.wapper-img-tosaswap img{
  margin-left: 22px !important;
}
.btn-outline-secondary {
  font-size: 15px !important;
}
.card-ecosystem>.mx-5{
  margin-right: 1rem!important; 
 margin-left: 1rem!important;
}
.btn-primary {
font-size: 15px !important;
}
.title-content-ecosystem{
  justify-content: center;
  }
  .tosaswapContent {
     margin: 0px !important; 
}
#ecosystem .box-shadow {
  width: 100%;
}
.text-contract{
  font-size: 18px !important;
  margin-bottom: -5px !important;
  margin-right: 3px;
}
#QandA{
  margin-top: 50px !important;
}
.btn-trade-tosaswap{
  text-align: center !important;
  margin-right: -24px !important;
  margin-top: -20px !important;
}
input[name=question]+label {
  font-size: 18px !important;
  text-align: center;
  margin-top: -20px !important;
}
.footer-logo img{
  margin-right: -80px !important;
}
.cp-community{
  margin-right: 25px !important;
}

.swiper-slide img {
  width: 100%;
  height: 220px;
  border-radius: 4px;
}
.swiper-slide{
  height: 220px !important;
}
.swiper-button-next,.swiper-button-prev{
  top: 18% !important;
 }

}
/* iphone > 12*/
@media only screen and (max-width: 850px) {
  .swiper-button-next,.swiper-button-prev{
    top: 18% !important;
   }
  .swiper-slide img {
    width: 100%;
    height: 220px;
    border-radius: 4px;
  }
  .swiper-slide{
    height: 220px !important;
  }

  .cp-community{
    margin-right: 25px !important;
  }
  
  .response{
    text-align: center;
    padding-bottom: 10px !important;
  }
  .footer-logo img{
    margin-right: -80px !important;
  }
  input[name=question]+label {
    font-size: 18px !important;
    text-align: center;
  }
  .logo {
    height: 65px !important;
    width: 65px !important;
    margin: 0 auto;
  }
  .btn-trade-tosaswap{
    margin-right: -24px !important;
  }
  .box-tos{
    width: 100.5% !important;
  }
  #QandA{
    margin-top: 50px !important;
  }
  .text-contract{
    font-size: 18px !important;
    margin-right: 3px;
    margin-bottom: -5px !important;
  }
 .wapper-img-tosaswap img{
  margin-left: 14px ;
} 
  .card-ecosystem{
    margin-top: 30px !important;
  }
  .tosaswapContent{
    margin: 0 10px;
  }
  .tosaswapContent .head-card-tosaswap{
    margin-left: 0px;
  }
  .content-whychoose p{
    padding-right: -25px !important;
  }
  .card-whychoose img{
    width: 60px;
    height: 60px;
  }
  .giving-bill{
    width: 250px; 
    height: 280px;
  }
  #tosaswap .fs-6{
    text-align: center;
  }
  .lead{
    font-size: 16px !important;
    line-height: 32px;
  }
  .h1-title-banner{
    font-size: 30px !important;
    line-height: 42px;
  }
  .text-title-index{
    font-size: 28px !important;
    line-height: 32px;
  }
  #QandA p{
    font-size: 15px !important;
    line-height: 25px;
    padding-left: 5px;
    padding-right: 5px;
  }
  .wapper-img-tosaswap {
    margin-bottom: 4rem;
}
}
@media screen and (min-width: 567px){
    .tosaswap-proccess-item{
        width: calc(100% / 2 - 20px);
    }
    .tosaswap-info{
        flex-direction: row;
    }
    .planets{
      display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: space-evenly;
      }
    .circle-small .token-small1{
      bottom: 0;
    }
    .circle-small .token-small{
      top: 0;
    }
    .proccess{
      left: 50%;
    }
    .giving-bill{
      width: 360px; 
      height: 390px;
    }
    .icon-whychoose .my-5{
      margin-top: 0px!important;
      padding: 10px 1.5rem;
    }
    .card-whychoose{
       margin-bottom: 2rem;
    }
    .wapper-img-tosaswap {
      margin-bottom: 4rem;
  }
  .stt {
    font-size: 28px;
    left: 4.5%;
  }
}
@media screen and (min-width: 768px){
  .galaxy{
    height: 500px;
    width: 500px;
  }
  .circle-big .circle-small {
    width: 68%;
    height: 68%;
  }
  .phases{
    padding-left: 65px;
  }
  .phase-item .phase-title::before{
    left: -82px;
  }
    .planets .planet.planet-1{
        width: 400px ;
        height: 400px ;
      }
      .planets .planet.planet-2{
        width: 380px ;
        height: 380px ;
      }
      .planets .planet.planet-3{
        width: 350px ;
        height: 350px ;
      }
      .planets .planet.planet-4{
        width: 250px ;
        height: 250px ;
      }
      .planets .planet.planet-5{
        width: 300px ;
        height: 300px ;
      }
      .planets .planet{
        width: unset;
        height: unset;
      }
      .planets .planet:hover{
        box-shadow: 0px 0px 60.256px #454545, 0px 0px 30.408px #454545, 0px 0px 8.688px #454545, 0px 0px 4.344px #454545;
      }
      .planets .planet p{
        font-size: 1.1rem;
        max-width: 300px;
      }
    .banner-container{
        height: 100% ;
    }
    #banner{
        padding: 50px 0 10px 0;
        height: 99vh;
    }
    .tosaswap-proccess-item{
        margin-bottom: 2.5rem;
    }
    .shape {
      height: 600px;
      width: 600px;
      padding: 4rem;
    }
    .shape .shape-content {
      padding: 2rem;
    }
    .shape-content__question {
      font-size: 1.6rem;
    }
    .shape-content__answer {
      font-size: 18px;
      line-height: 28px;
    }
    .circle-small .token-small1{
      bottom: 0;
    }
    .circle-small .token-small{
      top: 0;
    }
    .planets > * ~ *{
      margin-top: unset ;
    }
    .central-body{
      transform: none !important;
    }
    .giving-bill{
      width: 360px; 
      height: 390px;
    }
    .wapper-img-tosaswap {
      margin-bottom: 4rem;
  }
}
@media screen and (min-width: 1024px){
  .content-whychoose p{
    padding-right: 50px;
  }
  .img-content{
    max-width: 60%;
  }
.img-overlay .img-content{
    height: 90%;
  }
.img-overlay-close{
    top: 2%;
  }
  .bd-placeholder-img {
    height: 280px !important;
  }
  .blog-item .card-title {
    font-size: 1.7rem !important;
  }
  .blog-item .card-body {
    padding: 20px 33px 38px;
  }
  .p-text{
  font-size: 18px;
  line-height: 32px;
  }

  .clipboard-text span{
    font-weight: 400;
    font-size: 1.3rem;
  }
  .proccess .status{
    height: 50px;
    width: 50px;
    margin-bottom: 300px;
  }
  .phase-item{
    height: 350px;
  }
  .tabs{
    overflow-x: hidden !important;
  }
    .feature-content img{
        height: unset;
      }
      .feature-content h2{
      font-size: 23px;
      line-height: 33px;
      }
      .feature-content p{
      font-size: 18px;
      line-height: 25px;
      }
    section{
        padding: 90px 0 !important;
    }
    .banner-container{
        height: calc(100vh - 30px) ;
    }
    #banner{
        padding: unset;
    }
    .divider{
        margin: 0 12px;
        height: 10px;
        width: 1px;
        border-radius: 25px;
        background: rgb(138, 138, 138);
    }
    .nav > * ~ * {
        margin-top: unset;
    }
    .title-section{
        margin-bottom: 50px !important;
    }
    .title-section h2 {
        font-size: 50px !important;
        line-height: 60px !important;
      }
      .title-section h4 {
        font-size: 36px !important;
        line-height: 50px !important;
      }
      .title-section h2::before {
        bottom: -20px !important;
      }
      .title-section p {
        font-size: 28px !important;
      }
      .form-group{
        padding: 20px 36px !important;
      }
      .btn-outline-primary{
        padding: 1rem 4rem !important;
      }
      .circle-big .icon{
        height: 75px;
        width: 75px;
      }
      .rescue-content{
        padding: 28px 40px;
      }
      .rescue-item .rescue-item__address{
        padding: 4px 20px !important;
      }
     .clipboard-btn{
      width: 200px;
      display: flex !important;
     }
     .clipboard-btn .copied{
       justify-content: center;
     }
     .galaxy{
      margin: 0 0 0 auto !important;
     }
     .giving-bill{
      width: 360px; 
      height: 390px;
    }
    .stt {
      font-size: 28px;
      left: 2%;
    }
}
@media screen and (min-width: 1104px){
  .display-5{
    font-size: 2.9rem !important;
  }
  .circle-small .token-small1, .circle-small .token-small{
    height: 80px;
    width: 80px;
  }
  .circle-small .token-small1{
    bottom: 8%;
  }
  .circle-small .token-small{
    top: 8%;
  }
    .menu-toggle{
        display: none;
    }
    .navbar-wrap{
        position: relative;
        top: unset;
        left: unset;
        transform: unset;
        width: unset;
        height: unset;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background-color: unset;
    }
    .giving-bill{
      width: 375px; 
      height: 420px;
    }
    .stt {
      font-size: 28px;
      left: 15%;
    }
}
@media screen and  (min-width: 1540px){
  .gallery-slider .swiper-button-next, .swiper-rtl .swiper-button-prev{
    right: -70px !important;
  }
  .gallery-slider .swiper-button-prev, .swiper-rtl .swiper-button-next{
    left: -70px !important;
  }
  .circle-small .token-small1, .circle-small .token-small{
    height: 96px;
    width: 96px;
  }
  .circle-small .token-small1{
    bottom: 10%;
  }
  .circle-small .token-small{
    top: 10%;
  }
  .galaxy{
    height: 70vh;
    width: 70vh;
  }
  .giving-bill{
    width: 375px; 
    height: 420px;
  }
  .stt {
    font-size: 28px;
    left: 15%;
  }
}