/* @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); */

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

@font-face {
  font-family: Inter;
  src: url(../public/assets/inter.woff2);
  font-style: normal;
  font-weight: normal
}

:root{
    --brand-color: #0f1924;
    --secondary-color: #111111;
    --text-gray: #A3A7AC;
    --white-text:#fff;
    --body-text: "Inter", sans-serif;
    --body-color: #000;
    --border-color: #3A3A3A;
    --orange-color: #E87811;
}

body{
    background-color: var(--body-color);
    /* font-family: var(--heading-font) !important; */
    overflow-x: hidden !important;
}

.header-bg{
    background-color: hsl(210, 40%, 10%, .7) !important;
}

.secondary-bg{
    background-color: var(--brand-color) !important;
}

.card-bg{
    background-color: var(--secondary-color) !important;
}

.text-gray{
    color: var(--text-gray) !important;
}

.bg-white{
    background-color: var(--white-text)!important;
}

.body-color{
    background-color: var(--body-color) !important;
}

.text-white{
    color: var(--white-text) !important;
}
.text-brand{
  color: var(--brand-color) !important;
}

/* btn css */
.content{
  position: relative;
  overflow: hidden;
  font-size: 14px;
}

.text,
.hover-text {
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.vertical .text,
.vertical .hover-text {
  transform: translateY(0%);
}

.hover-text {
  position: absolute;
  width: 100%;
  text-align: center;
  display: block;
}

.vertical .hover-text {
  bottom: -100%;
}



.btn{
    /* background: radial-gradient(72% 120% at 27.5% 22.7%, rgb(30, 58, 138) 0%,  rgb(132 82 136) 100%) !important; */
    background: radial-gradient(72% 120% at 27.5% 22.7%, rgb(30, 58, 138) 0%,  rgb(81, 95, 113) 100%) !important;
    position: relative;
    z-index: 1;
    /* border-radius: 30px; */
    border-radius: 30px 5px 30px 30px;
    border: none !important;
    font-size: 16px;
    color: var(--white-text) !important;
    padding: 15px 30px !important;
    font-weight: 700;
    height: auto;
    overflow: hidden;
    /* -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out; */
    transition: .5s all;
    background-size: 200% auto !important;
  background-position: left top !important;
  display: inline-block;
  font-family: var(--body-text) !important;
}


.btn:hover{
    border-radius: 30px;
    background-position: right bottom !important;
}

.btn:hover .vertical .hover-text,
.btn:hover .vertical .text {
  transform: translateY(-100%);
}

/* btn css end */

.w-100{
    width: 100% !important;
}

.m-0{
    margin: 0px !important;
}


.mb-1{
  margin-bottom: .3rem !important;
}

.ol-cs{
    padding-left: 20px;
    line-height: 30px;
}

.py-3{
    padding-top: 1.2rem !important;
    padding-bottom: 1.2rem !important;
}
.py-4{
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.mx-2{
    margin-left: 1rem !important;
    margin-right: 1rem !important;
}
.container{
    width: 95%;
    margin-right: auto;
    margin-left: auto;
}

.shadow{
    box-shadow: 0 0 20px rgb(81, 95, 113) !important;
}

.padding{
    margin-top: 100px;
}

.border0{
    border: none !important;
}
.p-0{
  padding: 0px !important;
}
.p-3{
    padding: 3rem;
}

.p-2{
    padding: 1.5rem;
}
.px-3{
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}
.px-4{
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

.mt-2{
    margin-top: 10px !important;
}

.mt-3{
  margin-top: 1.5rem !important;
}
.pr-3{
  padding-right: 1.2rem !important;
}

.rounded{
    border-radius: 12px !important;
}

.block{
    display: block;
}

.text-center{
    text-align: center !important;
}

.h-100{
    height: 100% !important;
}

.bg-transparent{
    background-color: transparent !important;
}

.mb-3{
    margin-bottom: 2rem !important;
}

.mb-4{
  margin-bottom: 4rem !important;
}

.fs-16{
    font-size: 16px !important;
}

.fs-14{
  font-size: 14px !important;
}
.fs-13{
  font-size: 13px !important;
}
.fs-12{
  font-size: 12px !important;
}

/* media querry */


.inputc{
    height: 50px !important;
    line-height: 32px !important;
    border: 1px solid var(--body-color) !important;
    color: #fff !important;
    background-color: var(--body-color) !important;
}

.inputc::placeholder{
    color: #fff !important;
}

.card-cs .ant-card-body{
    padding: 16px !important;
}

.m-top-130{
    margin-top: 130px;
}
.pill-text{
    /* border: 1.4px solid var(--text-gray) !important; */
    padding: 7px 20px !important;
    border-radius: 50px !important;
    /* background: radial-gradient(72% 120% at 27.5% 22.7%, rgb(30, 58, 138) 0%,  rgb(132 82 136) 100%) !important; */
    background: radial-gradient(72% 120% at 27.5% 22.7%, rgb(30, 58, 138) 0%,  rgb(81, 95, 113) 100%) !important;
    overflow: hidden;
    position: relative;
    display: block;
}

.pill-text::after {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.082);
  transform: skewX(-45deg);
  transition: none;
  animation: animate 0.8s linear infinite ;
}

@keyframes animate {
  0% {
      left: 100%;
  }

  100% {
      left: -100%;
  }
}

/* cards tabs */
.card-tab{
    border-top: 0px;
    border-right: 0px;
    border-bottom: 0px;
    border-left: 1px solid var(--border-color);
    border-radius: 0px;
}

.bg-divider{
    background-color: var(--border-color) !important;
}

.card-tab.active{
    border-color: var(--orange-color) !important;
}

.d-none{
    display: none !important;
}

.d-show{
    display: block !important;
}

.bg-text{
    padding: 6px 15px;
    /* background: radial-gradient(72% 120% at 27.5% 22.7%, rgb(132 82 136) 0%, rgb(11, 21, 49) 100%) !important; */
    background: radial-gradient(72% 120% at 27.5% 22.7%, rgb(81, 95, 113) 0%, rgb(11, 21, 49) 100%) !important;
    border-right: 2px solid rgb(132 82 136);
    border-radius: 5px;
}

.border-gray{
    border-color: var(--border-color) !important;
}

.px-2{
    padding-left: .5rem !important;
    padding-right: .5rem !important;
}



/* footer */
.ul-f{
    list-style-type: none;
    padding-left: 0px;
    line-height: 45px;
    margin-top: 30px;
  }
  
  .hovera{
    color: var(--white-text);
    font-weight: 400;
    font-size: 14px;
    transition: .5s all ease-in-out;
  }

  .hovera:hover{
    transform: translateX(10px);
  }
  
  /* main banner css */
  .bg-banner{
    background-image: url('./assets/images/banner-2.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    /* height: 100vh; */
    padding: 50px 0px;
  }

  .left-images,
  .right-images{
    justify-content: center;
    width: 100%;
  }

  .left-images .ant-space-item,
  .right-images .ant-space-item{
    text-align: center;
    width: 100%;
  }

  .left-images .ant-space-item:nth-child(1){
    margin-left: 60%;
  }

  .right-images .ant-space-item:nth-child(1){
    margin-left: -60%;
  }

  .left-images .ant-space-item:nth-child(2){
    margin-left: 35%;
    margin-top: -10%;
  }

  .right-images .ant-space-item:nth-child(2){
    margin-left: -35%;
    margin-top: -10%;
  }

  .left-images .ant-space-item:nth-child(3){
    margin-left: 15%;
    margin-top: -10%;
  }

  .right-images .ant-space-item:nth-child(3){
    margin-left: -15%;
    margin-top: -10%;
  }

  
/* MainBanner.css */
.fade-in-image {
    animation: fadeIn 0.5s ease-in-out;
  }
  
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  

  .left-images img,
  .right-images img {
    transition: transform 0.3s ease-in-out;
  }
  
  .left-images img:hover,
  .right-images img:hover {
    transform: scale(1.1);
  }
  
  .slide-in-text {
    transform: translateY(20px);
    opacity: 1;
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
  }
  
  .slide-in {
    transform: translateY(0);
    opacity: 1;
  }

  motion {
    overflow: hidden;
  }


  .gradient-text{
   /* background:  linear-gradient(306deg, rgb(30, 58, 138) 36%,   rgb(132 82 136) 53%, rgb(255, 255, 255) 77%); */
   background:  linear-gradient(306deg, rgb(30, 58, 138) 36%,   rgb(81, 95, 113) 53%, rgb(255, 255, 255) 77%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    width: fit-content;
  }

  .panel{
    margin-bottom: 10px;
    border-radius: 20px !important;
    padding: 15px;
  }

  .panel-active{
    /* background: radial-gradient(72% 120% at 27.5% 22.7%, rgb(30, 58, 138) 0%,  rgb(132 82 136) 100%); */
    background: radial-gradient(72% 120% at 27.5% 22.7%, rgb(30, 58, 138) 0%,  rgb(81, 95, 113) 100%);
    border: 1px solid #3b3b3ba6 !important;
  }

  .position-relative{
    position: relative;
  }

  .mb-2{
    margin-bottom: 1rem !important;
  }

  .my-2{
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .card-grad{
    background: linear-gradient(145deg, rgb(125, 125, 125) 0%, rgb(66, 66, 66) 34%,  rgb(81, 95, 113) 74%);
    border-radius: 15px;
    box-shadow: 
        0px 10px 50px 0px rgba(28, 27, 83, 0.7), /* First shadow: Purple with transparency */
        0px 15px 60px 0px rgba(20, 20, 64, 0.5); /* Second shadow: Dark blue with transparency */
    height: 100%;
    width: 100%;
    border: 0px;
    overflow: hidden;
    position: relative;
  }

  .card-grad .ant-card-body{
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    height: 310px;
    justify-content: center;
    overflow: hidden;
    padding: 8px;
    position: relative;
    margin: 7px;
    border-radius: 10px;
    background: radial-gradient(72% 120% at 27.5% 22.7%, rgb(30, 58, 138) 0%, rgb(11, 21, 49) 100%);
  }
  
  .top-small-bar{
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(304deg, rgb(179 179 179) 0%,  rgb(81, 95, 113) 74%);
    box-shadow: rgba(137, 91, 245, 0.463) 0px 0.602187px 0px -0.916667px, rgba(137, 91, 245, 0.447) 0px 2.28853px 0px -1.83333px, rgba(137, 91, 245, 0.384) 0px 10px 0px -2.75px;
    height: 3px;
    width: 50px;
  }

  .sm-icon{
    padding: 5px;
    height: min-content;
    width: min-content;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background-color: var(--white-text);
  }

  .gradient{
    background: linear-gradient(294deg, rgba(45, 77, 165, 0.88) -20%,  rgba(81, 95, 113, .25) 100%) !important; 
  }

  .marquee-cs .rfm-child{
    margin-inline: 10px;
    width: 350px;
  }

 .ant-anchor-link-title-active h4{
  color: #fff !important;
 }

 .ant-anchor-link-title h4{
  color: #6D6C73;
 }

 .anchor-cs .ant-anchor-link-title-active{
  padding-left: 20px;
 }

 
 .anchor-cs .ant-anchor .ant-anchor-ink{
  width: 10px !important;
  height: 10px !important;
  border-radius: 50%;
 }

 .my-5{
  margin: 6rem 0px;
 }

 .mt-5{
  margin-top: 6rem !important;
 }

 .mt-4{
  margin-top: 3rem !important;
 }

 .mt-10{
  margin-top: 10rem;
 }

 .imgcs{
  height: 549px;
  overflow: visible;
  position: relative;
  width: 828px;
  margin: auto;
 }

 .imgcs img{
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-position: center center;
  object-fit: cover;
 }

 .img-pro{
  height: 300px ;
  object-fit: cover;
 }

 /* sheerez css  */
 .card-grad2{
  background: linear-gradient(145deg, rgb(125, 125, 125) 0%, rgb(66, 66, 66) 34%,  rgb(81, 95, 113) 74%);
  border-radius: 15px;
  box-shadow: 
      0px 10px 50px 0px rgba(28, 27, 83, 0.7), /* First shadow: Purple with transparency */
      0px 15px 60px 0px rgba(20, 20, 64, 0.7); /* Second shadow: Dark blue with transparency */
  overflow: hidden;
}

.card-grad2 .ant-card-body{
  overflow: hidden; 
  margin: 2px;
  border-radius: 15px;
  /* background: radial-gradient(72% 120% at 27.5% 22.7%, rgb(30, 58, 138) 0%, rgb(11, 21, 49) 100%); */
  background: radial-gradient(72% 120% at 27.5% 22.7%, rgb(30, 58, 138) 0%, rgb(81, 95, 113) 100%);;
}

.custom-input{
  padding: 12px !important;
  background-color: #1C1C1C !important;
  border-color: #1C1C1C;
  font-weight: 400;
  font-size: 14px !important;
  border-radius: 10px !important;
  color: #fff;
}

.custom-input input::placeholder{
  color: #5e5e5e !important;
}

.custom-input .ant-picker-suffix{
  color: #fff !important;
}

.custom-input .ant-picker-input >input:placeholder-shown{
  color: #5e5e5e !important;
  filter: invert(1);
}

.fw-400{
  font-weight: 400 !important;
}

.fw-500{
  font-weight: 500 !important;
}

h1{
  font-size: 50px;
}



.template{
  align-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 30px;
  height: min-content;
  justify-content: center;
  overflow: hidden !important;
  padding: 100px 100px 80px;
  position: relative;
  margin-top: 30px;
  }

.gradient-rad{
  position: absolute;
  height: 850px;
  left: calc(50.00000000000002% - 1120px / 2);
  overflow: hidden;
  top: calc(3.628117913832222% - 849.5px / 2);
  width: 1120px;
  background: radial-gradient(50% 60% at 50% 32.8%, rgb(255, 255, 255) 7.34973%, rgba(30, 58, 138, 0.886) 24.2278%, rgb(154, 150, 248) 36%, rgb(72, 57, 237) 49.9878%, rgba(0, 0, 0, 0) 100%);
  z-index: -1;
}
.btn-card{
    border-radius: 8px !important;
    font-weight: 400 !important;
    font-size: 18px;
    background-color: #591DAD !important;
    position: relative;
    z-index: 1;
    border: none !important;
    font-family: var(--heading-font);
    color: var(--white-text) !important;
    padding: 10px 30px !important;
    font-weight: 700;
    height: auto;
    overflow: hidden;
    transition: .5s all;
    margin-top: 30px;
}


.tv-animate{
  mask: radial-gradient(50% 66% at 50% 47.9%, rgb(0, 0, 0) 83.8771%, rgba(0, 0, 0, 0) 100%);
    mix-blend-mode: soft-light;
}

.slide-in {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #0f0f0f;
  transform-origin: bottom;
}

.slide-out {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #0f0f0f;
  transform-origin: top;
}
.text-justify{
  display: inline-block;
  text-align: justify !important;
}

.card-b .ant-card-body{
  height: 100% !important;
}

.h-250{
  height: 250px;
}

.overflow-on{
  overflow-y: auto;
  height: 70px;
}

.overflow-on::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

.overflow-on::-webkit-scrollbar
{
	width: 2px;
	background-color: #F5F5F5;
}

.overflow-on::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}

.card-extra .ant-card-body{
  padding: 30px !important;
  flex-direction: column;
  overflow: visible !important;
}

.grad-line{
  width: 2px;
  background:  radial-gradient(72% 120% at 27.5% 22.7%, rgb(62 98 201) 0%, rgb(81, 95, 113) 100%);
}

.feedbk{
  position: relative;
  transition-property:all ;
  transition-timing-function: ease;
  transition-duration: .5s;
  overflow: hidden;
  background-color: var(--brand-color);
  z-index: 1;
}

.bg-img{
  transition-property:all ;
  transition-timing-function: ease;
  transition-duration: .5s;
}

.bg-img img{
  opacity: .2;
}

.feedbk .bg-img {
  position: absolute;
  top: -190px;
  left: -180px;
  width: 180px;
  height: 190px;
  z-index: -1;
}

.feedbk:hover .bg-img{
  left: 0;
  top: 0;
}

.pl-40{
  padding-left: 25px;
}

.list-cs{
  padding: 1.5rem;
}

.circle {
  animation: blink 1.5s infinite alternate;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.size-img{
  height: 100px !important;
  object-fit: contain;
}


/* login css */
.btn-sign{
  padding: 10px 20px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.fb-color{
  background: #0D6EFF;
}

.gm-color{
  background-color: #DA3647;
}

.ant-input-affix-wrapper .anticon.ant-input-password-icon{
  color: var(--white-text) !important;
}

.scale-animate {
  animation: scaling 2s ease-in-out infinite;
}

@keyframes scaling {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.line {
  width: 50px;
  height: 2px;
  background: linear-gradient(145deg, rgb(125, 125, 125) 0%, rgb(66, 66, 66) 34%,  rgb(81, 95, 113) 74%) !important;
}

.smdots {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgb(125, 125, 125) 0%, rgb(66, 66, 66) 34%,  rgb(81, 95, 113) 74%) !important;
}

.footer{
  background: linear-gradient(294deg, #2d4da5e0 -20%,  #515f7140 100%) !important;
  padding: 50px 0px;
}

.iframe{
  width: 100%;
  height: 100%;
  margin-top: 30px;
}

/* media query */
.fs-18{
  font-size: 18px !important;
}
@media (max-width: 991px){
  .imgcs {
    width: auto;
    height: 398px;
  }
  h1{
    font-size: 30px !important;
  }
  .pl-40{
    padding-left: 0px;
  }
  .list-cs{
    padding: 0px;
    padding-bottom: 1rem;
  }
 }

 
@media (min-width: 1400px) {
  .container {
      max-width: 1377px;
      margin: auto;
  }
}
@media (min-width: 1200px) {
  .container {
      max-width: 1270px;
      margin: auto;
  }
}
.blog-card{
  border-radius: 10px !important;
  border: 0px !important;
  background: #47474743 !important;
}
.blog-card .ant-card-body {
  border: 0px !important;
  border-radius: 10px !important;
  padding: 0px !important;

}
.blog-img{
  width: 100% !important;
  height: 200px !important;
}

.blog-img img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius:  10px 0px 0px 10px !important;
}

/* .ant-image{
  width: 100% !important;
} */
.right{
  justify-content: center !important;
}
.left{
  justify-content: start !important;
}
.gradient-txt{
  background: radial-gradient(72% 120% at 27.5% 22.7%, #1e3a8a 0%, #515f71 100%) !important;
  color: white !important;
  padding: 6px 10px;
  border-radius: 4px;
  text-align: center;
}
.sider-list .ant-list-item{
  color: white !important;
}
.blog-tag.ant-tag{
  background-color: #1C1C1C !important;
  font-size: 16px !important;
  color: white !important;
  border-radius: 4px !important;
  border: 0px !important;
  padding: 10px 20px !important;
}
.blog-tag.ant-tag:hover{
  background: radial-gradient(72% 120% at 27.5% 22.7%, rgb(30, 58, 138) 0%, rgb(81, 95, 113) 100%) !important;
  color: white !important;
}
.ant-list .ant-list-pagination{
  margin-block-start: 10px !important;
  justify-content: center !important;
  display: flex !important;
}

.pagination .ant-pagination li .ant-pagination-item-link {
  color: white !important;
}

.pagination .ant-pagination-item-active{
  background-color: #222222 !important;
  color: #fff !important;
  border-color: white !important;
}

.pagination .ant-pagination .ant-pagination-item-active a {
  color: white !important;
}

.pagination .ant-pagination .ant-pagination-item {
  background-color: #474747 !important;
  color: #fff ;
}

.pagination .ant-pagination .ant-pagination-item a{
  color: white !important ;
}

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

.img-join{
  height: 300px !important;
  object-fit: cover !important;
}

.title-gradient{
  color: radial-gradient(72% 120% at 27.5% 22.7%, rgb(30, 58, 138) 0%, rgb(81, 95, 113) 100%) !important;
}

.btn-filter{
  padding: 12px 24px;
  height: 45px;
  background: rgb(81, 95, 113) !important;
  border-color: #1c1c1c !important;
  border-radius: 12px;
}

.card-pill{
  padding: 12px 18px !important;
  height: 38px !important;
}

.card-design .ant-card-actions{
  background-color: transparent !important;
  border-color: var(--border-color);
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  margin-top: 12px !important;
}

.over-flow-cs{
  overflow-x: auto;
}

.over-flow-cs::-webkit-scrollbar-track
{
	border-radius: 10px;
	background-color: transparent;
}

.over-flow-cs::-webkit-scrollbar
{
	width: 0px;
  height: 0px;
	background-color: transparent;
}

.over-flow-cs::-webkit-scrollbar-thumb
{
	border-radius: 10px;
  width: 0px;
  height: 0px;
	background-color: transparent;
}

.placeholder-invert input::placeholder{
  filter: invert(1);
}
.trend-btn{
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 18px 24px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  color: #fff;
  background-color: #222222 !important;
  border: 1px solid #474747 !important;
  transition: .5s all !important
}
.blog-about-card{
  background: #222222 !important;
  border: 1px solid #474747 !important;
}

.space-btw{
  display: flex !important;
  justify-content: space-between !important;
}

.cursor{
  cursor: pointer;
}

.dragcs .ant-upload-list{
  flex-direction: column !important;
}

.dragcs .ant-upload-drag{
  border-width: 2px;
  border-color: var(--border-color) !important;
  border-radius: 12px;
}

.width-drag{
  width: 40%;
  margin: auto;
}


.career-card{
  background: #222222 !important;
  border: 1px solid #47474794 !important;
}
.nft-slider{
  border-radius: 2px !important;
}
.nft-slider img{
  border-radius: 2px !important;
}

.nft-collection .ant-card-body{
  padding: 0px !important;
  border-radius: 10px !important;
  border: none !important;
}
.new-nft{
  border: 1px solid #747373bf !important;
  background: none !important;
  border-radius: 10px !important;
}
.new-nft .ant-card-body{
  border-radius: 10px !important;
  background: #1e1d1d !important;
}
.crypto-chart-container{
  height: 700px !important;
  object-fit: cover !important;
}

.rounded-1{
  border-top-left-radius: 100px;
  border-bottom-right-radius: 100px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
}
.p-left{
  padding-left: 5%;
}

.thumb_coin img {
  max-width: 80%;
}

.thumb_coin {
  position: absolute;
  top: 0;
  left: 45%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-animation: coin 5s linear infinite;
  animation: coin 5s linear infinite;
}

.icon-div{
  width: 60px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 24px;
  border-radius: 5px 50%;
  border-radius: 50%;
}

.icon-div1{
  width: 70px;
  height: 70px;
  background-color: rgba(255, 255, 255, 0.1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 24px;
  border-radius: 5px 50%;
  border-radius: 50%;
}


/* select css */
.custom-select .ant-select-single {
  height: 47px !important;
}

.custom-select .ant-select-outlined:hover{
  border-color: #0D6EFF !important;
}

.custom-select .ant-select-selector {
  background-color: #1C1C1C !important;
  border-color: #1C1C1C !important;
  color: #fff !important;
}
.custom-select .ant-select input{
  font-weight: 400;
    font-size: 14px !important;
    border-radius: 10px !important;
    color: #fff;
}


.custom-select .ant-select-arrow{
  color: #fff !important;
}

.custom-select .ant-select-selector:hover {
  border-color: #0D6EFF !important;
}

.ant-select-item-option{
  background-color: transparent !important;
  border-color: transparent !important;
}

.ant-select-dropdown{
  background-color: #1C1C1C !important;
  border-color: #1C1C1C !important;
}

.ant-select-item-option-content{
  color: #fff;
}

/* select css */

.ant-form-item .ant-form-item-label >label::after {
  margin-inline-start: 0px !important;
  margin-inline-end: 0px !important;
}

.ant-form-item .ant-form-item-label >label {
  flex-direction: row-reverse !important;
}
.ant-form-item .ant-form-item-label >label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
  margin-inline-end: 0px !important;
  margin-inline-start: 4px !important;
}

@keyframes coin {
  0% {
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
  }
  50% {
      -webkit-transform: translateY(0px);
      transform: translateY(0px);
  }
  100% {
      -webkit-transform: translateY(40px);
      transform: translateY(40px);
  }
}

.ant-avatar-group-popover .ant-popover-inner{
  background-color: #1C1C1C !important;
}

.ant-avatar-group-popover .ant-popover-arrow::before{
  background-color: #1C1C1C !important;
}

.ant-avatar-group-popover .ant-popover-arrow::after{
  background-color: #1C1C1C !important;
}

.ant-avatar-group-popover .ant-popover-inner .ant-popover-inner-content button{
  margin-right: 5px;
}

.case-img{
  object-position: top;
  object-fit: cover !important;
  width: auto !important;
  height: 500px !important;
  border-radius: 20px;
}

.custom-description h4{
  font-size: 25px;
  margin-bottom: 10px;
}

.custom-description p{
  font-size: 15px;
  text-align: justify;
  color: var(--text-gray);
}

.ant-dropdown .ant-dropdown-menu{
  background: rgb(81, 95, 113) !important;
}

.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item{
  color: #fff !important;
}

.ant-typography-expand,
.ant-typography-collapse{
  color: var(--white-text) !important;
}

.logout{
  display: none;
  position: absolute;
  bottom: 60px;
  left: 37px;
}

.text-capitalize{
  text-transform: capitalize !important; 
}

.w-70{
  width: 70%;
  margin: auto;
}

.pt-1{
  padding-top: .5rem !important;
}

@media (max-width: 1199px) {
  .logout{
    display: block;
  }
}

@media (max-width: 1100px) {
  .crypto-chart-container{
    height: 520px !important;
  }
  .logout{
    display: block;
  }
}
@media (max-width: 764px) {
  .crypto-chart-container{
    height: 380px !important;
  }
  .thumb_coin img {
    max-width: 100%;
  }
}
@media (max-width: 520px) {
  .crypto-chart-container{
    height: 300px !important;
  }
}

@media (max-width: 764px) {
  .space-mbl{
    display: center !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .p-left{
    padding-left: 0;
  }
}

@media (max-width: 991px){
  .width-drag{
      width: 90%;
  }
  .mbl-reverse{
    flex-direction: column-reverse !important;
  }
  .case-img{
    width: -webkit-fill-available !important;
    height: 100% !important; 
  }
  .mbl-row{
    flex-direction: column-reverse !important;
  }
  .w-70{
    width: 100%;
  }
  
}
 
@media (min-width: 569px) and (max-width: 991px) {
  .author-card{
    height: 270px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }  
}


@media (max-width: 1300px ){
  .list-cs{
    padding: 1.5rem .5rem !important;
  }
}


@media (max-width: 1199px){
  .mbl-cta{
    flex-direction: column;
    padding-inline: 20px;
    margin-top: 20px;
  }
}


.pb-4{
  padding-bottom: 4rem !important;
}