/*global*/
@font-face {
  font-family: "Poppins";
  src: url('../fonts/Poppins-Regular.ttf') format("truetype");
}

body {
  padding-bottom:0px;
}
a {
  text-decoration: none !important;
}
.nav a {
  font-size: 16px !important;
}
p, li,a {
  font-family: 'Barlow' !important;
}
.title {
  font-family: 'Poppins' !important;
font-style: normal !important;
}
span {}






.bg-red-600 {
  background: #FF2E00 !important;
}
.bg-red-500 {
  background:  #FF9680 !important;
}
.bg-blue-600 {
  background: #0038FF !important;
}
.text-red-600 {
  color: #FF2E00 !important;
}
.bg-transparent {
  background: transparent !important;
}
.bg-gray {
  background: rgba(0,0,0,0.2) !important;
}
.bg-grey {
  background: #EDEDED !important;
}
.bg-dark {
  background:  #464646 !important;
}
.color-green {
  color: #83D35D !important;
}
.bg-green {
  background: #84AB53;
}
.color-yellow {
  color:#F2D42E;
}
.color-gray {
  color: #FFFFFF;
}
.size-10 {
  height:10px !important;
  width:10px !important;
}
.p-0 {
  padding:0px;
}
.m-0 {
  margin:0px !important;
}
.m-2-r {
  margin-top:-2px;
}
.m-10-r {
  margin-top:-10px;
}
.rounded-tr-5xl {
  border-top-right-radius: 50px;
}
.rounded-br-5xl {
  border-bottom-right-radius: 50px;
}
.non-a:hover {
  color: black !important;
}
.container {
  margin: auto;
  padding-left:10px !important;
  padding-right:10px !important;
}
.dark-overlay {
  background: rgba(0,0,0,0.6);
}
.border-top {
  border-top: 2px solid lightgray;
}
.bg-green-600 {
  background:  #84AB53 !important;
}
.bg-green {
  background: #84AB53 !important;
}
.custom-link {
  color: #FF2E00 !important;
  text-decoration:true;
  cursor: pointer;
 
}
.custom-link:hover {
  border-bottom:1px solid #FF2E00;
}
.height-fill-available {
  height: -webkit-fill-available;
}
.h-content {
  height: fit-content !important;
}



/*== Homepage ==*/
/*header section*/
section {
  /* min-height:300px; */
}
section.header {
  width: 100%;
  background: #0038FF;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  
}
.connect-btn {
  align-items: center;
  justify-content: space-between;
  margin-right:10px !important;
}

.logo-title {
  width: 96px;
  height: 20px;
  font-style: normal;
  font-weight: 600;
  font-size: 21px;
  line-height: 20px;
  text-align: center;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  width: 189px;
  background: #84AB53;
  border-radius: 0px 0px 50px 0px;
}
/*liquidity*/
section.liquidity .contain-div {
  box-shadow: 0px 4px 35px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  
}
section.liquidity .contain-div .bg-green {
  background: #D4FFC0;
}
section.liquidity .contain-div .color-green {
  color: #42B00D;
}
section.liquidity .contain-div .bg-pink {
  background: #FFDAE1;
}
section.liquidity .contain-div .color-pink {
  color: #FF164E;
}
/*swap*/
.swap-platform {
  background: #FFFFFF;
  box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
.swap-platform .selector {
  height: 105px;
  background: #FFFFFF;
  border-radius: 8px;
  margin-bottom:12px;
}
.swap-platform .selector {
  border: 2px solid #DDDDDD;
}

.swap-platform .selector:hover {
  border: 4px solid #00FD47;
  cursor:pointer;
}
.swap-platform .selector-btn {
  background: #EDEDED;
  border-radius: 50px;
}
.swap-platform .max-btn {
 
  background: #C4C4C4;
  opacity: 0.5;
  border: 1px solid #000000;
  border-radius: 6px;
  cursor:pointer;
}
section.trade {
  background: url('../img/trade-bg.png');
  background-repeat: no-repeat;
  background-position:right;
  background-size: 72% 100%;
  
}
.trade-bg {
  background: #F2F2F2;
  border-radius: 50px;
}
.trade-anything {
  float: right !important;
}

/*footer*/
section.footer {
  background: #151515;
}
section.footer .border-bottom {
  border-bottom: 2px solid rgba(255,255,255,0.2) !important;
}
section.footer .social {
  width: 56px;
  height: 56px;
  margin-right:20px;
  background: #3A3A3A;
  border-radius: 50px;
  border:1px solid transparent;
  padding:18px;
}








/*responsive*/

.responsive-nav {
  position: absolute;
  left: 0px;
  width: 100%;
  height: 300px;
  top: 100px;
  padding-bottom: 300px;
  padding-bottom: 100px !important;
  margin-bottom: 100px !important;
}
.responsive-star {
  width: 47px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media (max-width: 418px) { 

} 
@media (max-width: 768px) { 
  .align-recenter {
    text-align: center !important;
    margin: auto !important;
    margin-bottom:10px !important;
    justify-content:center !important;
  }
  .m-0 {
    margin: 0px !important;
  }
} 
@media (max-width: 1188px) { 
  section.header .align-recenter {
    text-align: center !important;
    margin: auto !important;
    margin-bottom:10px !important;
    justify-content:center !important;
  }
  .m-0 {
    margin: 0px !important;
  }
}