@import "../../css/root.css";

body {
  background: var(--body-theme);
}
/* header */
body.landing-page {
  overflow-y: auto;
}

a, button{cursor: pointer !important;}

/* sticky */
.header-sctn.is-sticky {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #000000ba;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  animation: slideDown 0.6s ease-out;
  z-index: 999;
}

.fa-moon {
  color: #000;
  width: 33px;
}
body.light .fa-moon {
  display: none;
}
body.light .fa-sun {
  display: block;
}
.fa-sun {
  color: #000;
  font-size: 20px;
  width: 40px;
  display: none;
}
header .checkbox {
  opacity: 0;
  position: absolute;
}
body.landing-page.dark label.checkbox-label {
  height: 19px;
}

.checkbox-label {
  width: 50px;
  height: 26px;
  border-radius: 50px;
  position: relative;
  cursor: pointer;
}
/* sticky */

/* header */

li.nav-item a.nav-link {
  color: var(--para-dark-clr) !important;
  display: var(--flex);
  align-items: var(--align-direct);
  font-size: 12px;
  font-weight: 700;
  justify-content: var(--justi-c);
}
.btn.trade,
.btn.trade:active {
  background-color: var(--primary-btn-clr);
  font-size: 12px;
  font-weight: 700;
  color: var(--para-dark-clr);
  padding: 16px 54px;
  border: #07c;
}

header.header-sctn a.btn.trade {
  padding: 13px 50px;
  border-radius: 10px;
}
.left-banner-sec {
  max-width: 507px;
}
.right-banner-sec div{
  float: right;
}
section.banner-main {
  padding: 155px 0;
}

.left-banner-sec p {
  color: var(--para-dark-clr);
  margin: 50px 0 40px;
  font-size: var(--font-20);
}

.accordion-button:not(.collapsed) {
  box-shadow: none !important;
}
.accordion-button:not(.collapsed)::after {
  transform: none !important;
}

/* light mode */
body.light img.banner-bottom-bg {
  bottom: -53px;
}
body.light .sm svg path,
body.light .sm svg g path {
  fill: black;
}
body.light .crypto-trading {
  background: #0077cc !important;
}
body.light .trade-apitrading .btn.api {
  background: #234862;
}
body.landing-page {
  background: #10152f;
}
body.light .staked-only-inner label.depth-toggle, body.light .sm i, body.light ul.extras-page-link li a.active-menu, body.light section.extras-inner-content p, body.light section.extras-inner-content label, body.light section.extras-inner-content h6 {
  color: #000;
}


/* light mode */








/* Trust wallet css */

/* header */
header.header-sctn {
  width: 100%;
  background: linear-gradient(162deg, #161A42 22.61%, rgba(22, 26, 66, 0.00) 118.29%);
}

.TrustX-common-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90px;
}
.before-hover-btn{
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.05);

  display: flex;
  width: 64.94px;
  padding: 6.5px 13.08px 10.5px 12.86px;
  justify-content: center;
  align-items: center;
}
.contain-width.container-fluid.head-bg-border {
  display: inline;
}
ul.language {
  display: flex;
  margin: 0;
  border-radius: 4506px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.05);
  display: inline-flex;
  padding: 0px 11.45px 0px 14px;
  justify-content: center;
  align-items: flex-start;
  gap: 4.13px;
  line-height: 2.5;
  width: 81px;
  list-style: none;
}
ul.language li, ul.language li a {
  color: #FFF;
  font-family: "Segoe UI";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
}
.left-part > div {
  display: flex;
  align-items: center;
}
/* header */
/* footer */
footer{
  background: linear-gradient(360deg, #161A42 22.61%, rgba(22, 26, 66, 0.00) 118.29%);
  padding-bottom:85px;
}
.footer-inner-div h6 {
  color: #FFF;
  font-size: 19.195px;
  font-style: normal;
  font-weight: 600;
  line-height: 17px;
  white-space: nowrap;
}
.community, .social-media {
  display: flex;
  align-items: center;
  gap: 15px;
}
footer .first-row, footer .sec-row {
  margin-top: 65px;
}
footer .first-row ul li a,
footer .sec-row ul li a, footer .first-row ul li, footer .sec-row ul li{
  color: rgba(255, 255, 255, 0.50) !important;
  font-size: 13.453px;
  font-style: normal;
  font-weight: 400;
  line-height: 19px;
}
footer .first-row ul li a:hover, footer .sec-row ul li a:hover{
  color: #12D8FA !important;
}
footer .first-row ul,
footer .sec-row ul{
display: flex;
flex-direction: column;
gap: 16px;
list-style: none;
padding-left: 0;
}
footer .first-row h6,
footer .sec-row h6{
  margin-bottom: 30px;
}
footer .copy-right {
  color: rgba(255, 255, 255, 0.30);
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 18.86px;
}
footer .footer-inner-div {
  padding: 45px 0 51px;
}
/* footer */
/* banner */
.left-banner-sec h1 span {
  color: var(--heading-color);
  background: linear-gradient(96deg, #1FA2FF 4.74%, #12D8FA 22%, #A6FFCB 39.25%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: Inter;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.banner-background {
  /* position: relative;
  z-index: 1;
  overflow: hidden; */
  background: linear-gradient(0deg, #10172A 0%, #10172A 100%), #FFF;
}
.left-banner-sec h1 {
  font-family: Inter;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: #fff;
}
.left-banner-sec {
  max-width: 635px;
}
.banner-main{
  background-image: url(../../landing/assets/banner-bottom-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  bottom: 0;
}
.head-bg-border {
  padding: 10px !important;
}
.TrustX-mail-flex{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 35px;
}
.TrustX-mail-flex input[type="mail"], .TrustX-mail-flex input:focus-visible {
  border-radius: 10px;
  border: 2px solid #212554 !important;
  background: linear-gradient(162deg, #161A42 22.61%, rgba(22, 26, 66, 0.00) 118.29%);
  backdrop-filter: blur(11px);
  display: flex;
  width: 285px;
  height: 52px;
  padding: 16px 25px;
  justify-content: center;
  align-items: center;

  color: #fff;
  font-family: Verdana;
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.TrustX-mail-flex input::placeholder{
  color: rgba(255, 255, 255, 0.25) !important;
}
.start-mailing, .start-mailing:hover{
width: 129px;
height: 52px;
font-size: 17px;
font-weight: 400;
color: #fff;
border-radius: 10px !important;
border: 1px solid var(--22, #1FA2FF);
background: #161A42;

/* 222 */
box-shadow: 0px 13px 17px 0px rgba(99, 233, 255, 0.10);
}
.admin-rating-bonus {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
  justify-content: center;
  color: #FFF;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  padding: 0px 18.66px 0px 19px;
}
section.banner-main .row {
  margin-bottom: 100px;
  justify-content: space-between;
  align-items: center;
}
/* banner */
/* cryptocurrency-exchange */
.cryptocurrency-exchange h2, .cmn-head-title{
  color: #FFF;
  text-align: center;
  font-size: 36px;
  font-style: normal;
  font-weight: 600;
  line-height: 50px;
}
.row.three-stage-card{
  margin-top: 50px;
  justify-content: center;
}
.cryptocurrency-exchange p, .cmn-head-para{
  color: rgba(255, 255, 255, 0.30);
  text-align: center;
  font-family: "Segoe UI";
  font-size: 18.7px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}
.stage-card{
  border-radius: 12px;
  border: 1px solid var(--Colors-Blue-400, #60A5FA);
  background: rgba(0, 0, 0, 0.20);
  backdrop-filter: blur(6px);
  padding: 25px 25px 35px;
  box-shadow: 0px 13px 17px 0px rgba(99, 233, 255, 0.10);
  height: 100%;
}
.stage-card h3{
  color: rgba(255, 255, 255, 0.60);
  font-size: 25px;
  font-style: normal;
  font-weight: 600;
  line-height: 39.29px;
  /* margin: 0; */
}
.stage-head{
  /* display: flex; */
  align-items: center;
  gap: 11px;
}
.stage-con {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.stage-head div {
  text-align: center;
}
.stage-con p{
  color: #FFF;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 19px;
  opacity: 0.4;
  text-align: center;
  margin-top: 5px;
  /* min-height: 76px; */
}
.stage-card a{
  color: rgba(255, 255, 255, 0.20);
  font-family: "Segoe UI";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 19px;
}
/* cryptocurrency-exchange */
/* social network */
.network{
  border-radius: 16px;
  background: #212760;
  padding: 18px 21px;
  width: 326px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sm {
  display: flex;
  gap: 12px;
  align-items: center;
}
.sm p{
  color: #FFF;
  font-family: "Segoe UI";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 25.14px;
  margin: 0;
}
.network i{
  color: #fff;
}
.social-world {
  display: flex;
  flex-wrap: wrap;
  column-gap: 32px;
  row-gap: 16px;
  justify-content: center;
}
/* social network */
/* trade anytime */
.trade-anytime-define h4{
  color: #FFF;
  font-size: 21px;
  font-style: normal;
  font-weight: 600;
  line-height: 27px;
}
.trade-anytime-define p{
  color: rgba(255, 255, 255, 0.50);
  font-family: "Segoe UI";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}
.trade-anytime-define p span{
  color: #FC6;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}
.trade-anytime-step {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 22.33px 0px 22.34px 0px;
}
section.trade-at-anytime .row {
  align-items: center;
  margin-top: 50px;
}
.trade-anytime-define {
  max-width: 424px;
}
.doc-1{
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(0, 0, 0, 0.10);
}
.common-doc{
  display: flex;
  height: 68px;
  /* padding: 2px 1px 2px 27px; */
  padding: 14px 50px 14px 27px;
  align-items: center;
  gap: 20px;
  width: fit-content;
  white-space: nowrap;
}
.nex-doc .common-doc{
  padding: 14px 27px 14px 50px;
  height: fit-content;
}

.doc-con h5{
  color: #FFF;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
  margin: 0;
}
.doc-2.common-doc .doc-con h5{
  color: #000;
}
.doc-con p{
  color: #A3A3A3;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 17px;
  margin: 0;
}
.whole-document {
  padding: 20px 80px;
  /* gap: 172px; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.doc-2{
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.30);
  background: var(--22, linear-gradient(90deg, #1FA2FF 0%, #12D8FA 50%, #A6FFCB 100%));
}
.doc-3, .doc-4{
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.05);
}
.nex-doc {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
/* trade anytime */
/* group logo slider */

@keyframes scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(calc(-250px * 7))}
}
@keyframes slideright {
0% {
  transform: translateX(0);
}
100% {
  transform: translateX(30%);
}
}

.group-slider {
	height: 100px;
	margin: auto;
	overflow:hidden;
	position: relative;
	width: auto;
}
	
.group-slider	.slide-track{
		display: flex;
    gap: 24px;
	}
  .group-slider	.slide-track.first-track, .group-slider	.slide-track.last-track {
		animation: scroll 40s linear infinite;
	}
  .group-slider	.slide-track.mid-track{
		animation: slideright 50s linear infinite;
    flex-direction: row-reverse;
	}
  section.logo-groups.lazyload-wrapper{
    padding: 70px 0;
  }
  section.logo-groups.lazyload-wrapper .contain-width{
    position: relative;
  }
  section.logo-groups.lazyload-wrapper .contain-width::before{
    position: absolute;
    content: "";
    width: 320px;
    height: 299px;
    background: linear-gradient(90deg, #10172A 0%, rgba(16, 23, 42, 0.00) 100%);
    filter: blur(0px);
    left: 0;
    bottom: 0;
    z-index: 1;
  }
  section.logo-groups.lazyload-wrapper .contain-width::after{
    position: absolute;
    content:"";
    width: 320px; 
    height: 299px;
    background: linear-gradient(90deg, #10172A 0%, rgba(16, 23, 42, 0.00) 100%);
    filter: blur(38px);
    right: 0;
    bottom: 0;
    z-index: 1;
  }

/* group logo slider */

/* MARKET trade */
section.market-update ul#pills-tab li button {
  color: rgba(255, 255, 255, 0.30);
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: 23px;
  padding-bottom: 15px !important;
padding: 13px 40px;
}
section.market-update ul#pills-tab li button.active{
  color: #63E9FF;
font-size: 17px;
font-style: normal;
font-weight: 600;
line-height: 23px;
background-color: transparent;
position: relative;
width: fit-content;
}
section.market-update ul#pills-tab li button.active::after{
position: absolute;
content:"";
border-radius: 10px;
background: #63E9FF;
width: -webkit-fill-available;
height: 3px;
bottom: 0;
left: 0;
}
.top-tab-head {
  background: linear-gradient(162deg, #161A42 22.61%, rgba(22, 26, 66, 0.00) 118.29%);
  margin-bottom: 70px;
}
.top-tab-head .contain-width{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 70px;
  padding: 0 20px;
}
.left-search-more a {
  color: rgba(255, 255, 255, 0.30);
  font-family: "Segoe UI";
  font-size: 13.563px;
  font-style: normal;
  font-weight: 400;
  line-height: 19px;
}
.left-search-more input, .left-search-more input:focus-visible{
border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
background: rgba(255, 255, 255, 0.05);
width: 200px;
height: 40px;
padding: 20px;
color: #fff;
}
.left-search-more {
  display: flex;
  align-items: center;
  gap: 30px;
}
.table-box{
  border-radius: 14.966px;
  border: 2.806px solid var(--Colors-Light-Blue-800, #075985);
  background: linear-gradient(162deg, #161A42 22.61%, rgba(22, 26, 66, 0.00) 118.29%);
  overflow: auto;
}
section.market-update .table-box thead {
  border-radius: 14.966px;
  background: rgba(255, 255, 255, 0.02);
  width: 1199.129px;
  height: 48.639px;
  padding: 0px 38.349px 0px 38.35px;
}
section.market-update .table-box thead tr th {
  color: rgba(255, 255, 255, 0.30);
  font-size: 11.224px;
  font-style: normal;
  font-weight: 400;
  line-height: 17.641px;

  /* width: 204.684px; */
  height: 48.639px;
  padding: 14.854px 0.009px 15.779px 9.354px;
  border-bottom: 0.935px solid rgba(255, 255, 255, 0.03);
}
section.market-update .table-box tbody tr td{
  color: rgba(255, 255, 255, 0.50);
  font-family: "Segoe UI";
  font-size: 14.966px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  padding: 13.422px 74.436px 14.508px 9.354px;
  white-space: nowrap;
}
section.market-update .table-box tbody tr{
  border-bottom: 0.935px solid rgba(255, 255, 255, 0.03);
}
section.market-update .table-box tbody tr:last-child{
  border-bottom: 0px solid transparent;
}
.coin-img img {
  border-radius: 21px;
}
section.market-update .table-box tbody tr td:last-child {
  padding: 13.422px 0.436px 14.508px 9.354px;
  white-space: nowrap;
  text-align: right;
}
.table-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
button.swap-btn {
  border-radius: 2.806px;
  background: rgba(255, 255, 255, 0.05);
  border: 0;
  display: flex;
  /* width: 29.931px;
  height: 18.707px; */
  padding: 3.274px 7.483px 4.209px 11.225px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
section.market-update .table-box tbody tr td:first-child {
  /* text-align: center;
  padding: 20px 29px; */
  text-align: left;
  padding: 14px 0px 14px 30px;
  justify-content: center;
}
section.market-update .table-box table tbody{
  margin: 0 39px;
}
span.change {
  display: flex;
  align-items: center;
  gap: 3px;
} 
.red{
  color: #E0314F;
}
.green{
  color: #3FD1B9;
}
/* MARKET trade */
/* Trust wallet css */

.main-social-network{
  padding-top: 50px;
}
section.trade-at-anytime{
  padding-top: 100px;
}
section.documentation{
  margin-top: 100px;
}
section.cryptocurrency-exchange {
  padding-top: 80px;
}
.border-gradient{
  --borderWidth: 2px;
  background: #161A42;
  position: relative;
  border-radius: var(--borderWidth);
  box-shadow: 0px 13px 17px 0px rgba(99, 233, 255, 0.10);
}
.border-gradient:hover{
  background-color: var(--bs-btn-hover-bg) !important;
}
.border-gradient:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: var(--22, linear-gradient(90deg, #1FA2FF 0%, #12D8FA 50%, #A6FFCB 100%)) !important;
  border-radius: calc(2 * var(--borderWidth));
  z-index: -1;
  animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 300%;
}

@keyframes animatedgradient {
0% {
  background-position: 0% 50%;
}
50% {
  background-position: 100% 50%;
}
100% {
  background-position: 0% 50%;
}
}
.common-btm{
  width: 100%;
	border: 1px solid transparent;
  border-left:0;
  border-right: 0;
	background-origin: border-box;
	/* background-clip: content-box, border-box; */
	background-size: cover;
	box-sizing: border-box;
}

.border-gradient1{
  border-image-source: var(--22, linear-gradient(90deg, #1FA2FF 0%, #12D8FA 50%, #A6FFCB 100%)) !important;
  /* border-image-width: 1px !important; */
  border-image-outset: 0px !important;
  border-image-slice: 18 !important;
  border-radius: inherit;
  
  --borderWidth: 2px;
  background: #161A42;
  position: relative;
  border-radius: var(--borderWidth);
  
  border-radius: 10px;
  box-shadow: 0px 13px 17px 0px rgba(99, 233, 255, 0.10);
  }
  section.header-sctn {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #161A42 !important;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    animation: slideDown 0.60s ease-out;
    z-index: 999;
}