@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap');

*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  
}

.container{
  width: 100%
}

@media (min-width: 640px){
  .container{
    max-width: 640px
  }
}

@media (min-width: 768px){
  .container{
    max-width: 768px
  }
}

@media (min-width: 1024px){
  .container{
    max-width: 1024px
  }
}

@media (min-width: 1280px){
  .container{
    max-width: 1280px
  }
}

@media (min-width: 1536px){
  .container{
    max-width: 1536px
  }
}

.visible{
  visibility: visible
}

.fixed{
  position: fixed
}

.absolute{
  position: absolute
}

.relative{
  position: relative
}

.sticky{
  position: sticky
}

.mb-0{
  margin-bottom: 0px
}

.mb-3{
  margin-bottom: 0.75rem
}

.mr-2{
  margin-right: 0.5rem
}

.mt-3{
  margin-top: 0.75rem
}

.mt-4{
  margin-top: 1rem
}

.mt-\[8\%\]{
  margin-top: 8%
}

.block{
  display: block
}

.inline{
  display: inline
}

.flex{
  display: flex
}

.table{
  display: table
}

.grid{
  display: grid
}

.hidden{
  display: none
}

.w-\[100\%\]{
  width: 100%
}

.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.flex-wrap{
  flex-wrap: wrap
}

.justify-between{
  justify-content: space-between
}

.border{
  border-width: 1px
}

.bg-\[\#040c38\]{
  --tw-bg-opacity: 1;
  background-color: rgb(4 12 56 / var(--tw-bg-opacity))
}

.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}

.p-\[10px\]{
  padding: 10px
}

.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem
}

.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem
}

.py-\[1\%\]{
  padding-top: 1%;
  padding-bottom: 1%
}

.pb-3{
  padding-bottom: 0.75rem
}

.pl-5{
  padding-left: 1.25rem
}

.text-center{
  text-align: center
}

.font-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}

.text-\[18px\]{
  font-size: 18px
}

.font-bold{
  font-weight: 700
}

.font-semibold{
  font-weight: 600
}

.uppercase{
  text-transform: uppercase
}

.capitalize{
  text-transform: capitalize
}

.text-green-400{
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity))
}

.text-red-400{
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity))
}

.text-red-600{
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity))
}

.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity))
}

.shadow{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms
}

/* .textNotice{
   @apply
   hidden
} */

.mainBg{
  --tw-bg-opacity: 1;
  background-color: rgb(18 18 28 / var(--tw-bg-opacity))
}

.semiGbColor{
  background-color: rgb(35 36 56 / 0.9)
}

.yellowBgColor{
  background-color: rgb(250 203 35 / 0.8)
}

.absoluteDiv{
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  height: 24rem;
  width: 100%
}

.regBtn{
  width: 100%;
  border-radius: 5px;
  --tw-bg-opacity: 1;
  background-color: rgb(14 101 227 / var(--tw-bg-opacity));
  padding: 10px;
  font-weight: 700
}

.cardDiv{
  display: none
}

/* table styling  */

.tableTh{
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(148 163 184 / var(--tw-border-opacity));
  background-color: rgb(18 18 28 / 0.5);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity))
}

.tableTd{
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(18 18 28 / var(--tw-bg-opacity));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity))
}

/* table styling ends here  */

/* investment plan  */

.mainPlanDiv{
  margin-top: 10%;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding-bottom: 1rem;
  --tw-text-opacity: 1;
  color: rgb(4 12 56 / var(--tw-text-opacity))
}

@media (min-width: 640px){
  .mainPlanDiv{
    margin-top: 4%;
    display: flex
  }
}

.planClmDiv{
  margin-top: 5%;
  margin-bottom: 5%;
  border-radius: 5px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 4%;
  padding-bottom: 4%;
  --tw-shadow: -1px 3px 8px 0px rgba(4,12,56,0.75);
  --tw-shadow-colored: -1px 3px 8px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

@media (min-width: 640px){
  .planClmDiv{
    margin-top: 0;
    margin-bottom: 0;
    width: 23%;
    padding-top: 2%;
    padding-bottom: 2%
  }
}

/* investment plan ends here  */

/* coin payment  */

.coinType{
  width: 50%;
  padding: 1rem;
  text-align: center;
  font-weight: 700;
  text-transform: uppercase
}

.walletAddr{
  position: relative;
  width: 50%;
  padding: 1rem;
  font-weight: 300;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity))
}

.copyBtn{
  position: absolute;
  right: 0px;
  margin-right: 0.75rem;
  cursor: pointer;
  align-items: center;
  border-radius: 10px;
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: #1e3a8a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: #ec4899 var(--tw-gradient-to-position);
  padding: 7px;
  text-align: center;
  font-weight: 700
}

/* coin payment ends here */

/* top header div  */

.mainHeaderDiv{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgb(35 36 56 / 0.9);
  padding-left: 3%;
  padding-right: 3%;
  padding-top: 10px;
  padding-bottom: 10px
}

@media (min-width: 640px){
  .mainHeaderDiv{
    padding-left: 7%;
    padding-right: 7%
  }
}

.headerMenueDiv{
  cursor: pointer
}

@media (min-width: 640px){
  .headerMenueDiv{
    display: none
  }
}

.cancelLeftDiv{
  display: none;
  cursor: pointer;
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity))
}

/* .headerLogoDiv{

} */

.headerLogoDivSpan{
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity))
}

@media (min-width: 640px){
  .headerLogoDivSpan{
    font-size: 1.25rem;
    line-height: 1.75rem
  }
}

.headerNoteDiv{
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(161 98 7 / var(--tw-bg-opacity))
}

.headerNoteDivSpan{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity))
}

@media (min-width: 640px){
  .headerNoteDivSpan{
    font-size: 1.25rem;
    line-height: 1.75rem
  }
}

/* top header div ends here */

/* content holder div   */

.mainContentDiv{
  position: relative;
  margin: auto;
  margin-top: 0.5rem;
  margin-bottom: 20;
  width: 95%
}

@media (min-width: 640px){
  .mainContentDiv{
    margin: auto;
    margin-top: 0.75rem;
    display: flex;
    width: 90%;
    gap: 1.25rem
  }
}

/* left div */

.mainLeftDiv{
  position: fixed;
  top: 3rem;
  left: 0px;
  bottom: 0px;
  z-index: 10;
  display: none;
  justify-content: space-evenly;
  overflow: auto;
  border-radius: 0.375rem;
  padding-top: 0px;
  padding-bottom: 0px;
  text-transform: capitalize
}

@media (min-width: 640px){
  .mainLeftDiv{
    position: relative;
    top: 0px;
    left: 0px;
    bottom: 0px;
    z-index: 0;
    display: block;
    width: 20%;
    padding-top: 1.5%;
    padding-bottom: 1.5%;
    padding-left: 5px;
    padding-right: 5px
  }
}

.leftDivLi{
  margin-top: 1rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  border-radius: 0.375rem;
  padding: 10px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity))
}

.leftDivLi:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(191 167 78 / var(--tw-bg-opacity))
}

.leftDivLiSpan{
  font-size: 0.875rem;
  line-height: 1.25rem
}

.leftDivLiSvg{
  width: 1rem
}

/* left div ends here */

/* center div  */

.mainCenterDiv{
  margin: auto;
  border-radius: 0.375rem;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 1rem
}

@media (min-width: 640px){
  .mainCenterDiv{
    margin: 0px;
    width: 55%;
    padding-left: 13px;
    padding-right: 13px;
    padding-bottom: 0px
  }
}

.centerDivH2{
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-weight: 700;
  text-transform: capitalize;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity))
}

.centerDivCard{
  width: 100%;
  border-radius: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem
}

.centerDivCardLi{
  display: flex;
  justify-content: space-between;
  padding: 10px;
  padding-left: 0px;
  padding-right: 0px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity))
}

.centerDivCardLiSpan{
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  text-transform: capitalize
}

.centerDivCardH1{
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity))
}

.centerDivCardAmountDiv{
  display: flex;
  gap: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity))
}

.centerDivCardAmountDivSpan{
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-transform: capitalize
}

.centerDivCardBtnDiv{
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  display: flex;
  gap: 0.5rem;
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity))
}

.centerDivCardBtnDivClm{
  display: flex;
  gap: 0.25rem;
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity))
}

.centerDivCardBtnDivClmButton{
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  text-transform: capitalize
}

/* center div ends here */

/* content holder div ends here  */

/* payment method page styling  */

.mainFormDiv{
  margin: auto;
  margin-top: 2%;
  display: block;
  border-radius: 10px;
  --tw-bg-opacity: 1;
  background-color: rgb(2 18 41 / var(--tw-bg-opacity));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity))
}

@media (min-width: 640px){
  .mainFormDiv{
    margin-top: 2%;
    width: 30%;
    padding-top: 10px;
    padding-bottom: 10px
  }
}

/* .loginText{
   @apply  
   text-center 
   font-bold 
   capitalize 
   py-[10px] 
   sm:text-[17px]
   ;
} */

.innerFormDiv{
  margin-bottom: 2%
}

/* .regFormLabel{
  @apply 
  capitalize
  ;
} */

.formInput{
  width: 100%;
  border-radius: 0.375rem;
  border-width: 0px;
  background-color: rgb(18 18 28 / 0.5);
  padding: 5px;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px
}

@media (min-width: 640px){
  .formInput{
    padding: 9px
  }
}

.checkBoxDiv{
  margin-top: 20px;
  margin-bottom: 20px
}

.regBtn{
  width: 100%;
  border-radius: 5px;
  --tw-bg-opacity: 1;
  background-color: rgb(14 101 227 / var(--tw-bg-opacity));
  padding: 10px;
  font-weight: 700
}

.formWarningDiv{
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 14px
}

@media (min-width: 640px){
  .formWarningDiv{
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 17px
  }
}

.formA{
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity))
}

.btcPaymentDiv{
  margin: auto;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(18 18 28 / var(--tw-bg-opacity));
  padding: 10px;
  text-align: center
}

@media (min-width: 640px){
  .btcPaymentDiv{
    width: 40%
  }
}

/* payment method page styling ends here  */

/* withdrawal method page styling  */

.mainChooseDiv{
  margin-top: 2%;
  margin-bottom: 2%;
  display: flex;
  justify-content: center;
  gap: 0.5rem
}

.cBtn{
  width: 50%;
  border-radius: 8px;
  padding: 12px;
  font-weight: 600;
  text-transform: capitalize;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity))
}

@media (min-width: 640px){
  .cBtn{
    width: 20%
  }
}

.cardOptionDiv{
  margin: auto;
  margin-top: 5%;
  margin-bottom: 5%;
  width: 95%;
  border-radius: 15px;
  background-color: #081733f3;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem
}

@media (min-width: 640px){
  .cardOptionDiv{
    margin-top: 0;
    margin-bottom: 0;
    width: 30%
  }
}

.cardOptions{
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  display: flex;
  cursor: pointer;
  list-style-type: none;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border-radius: 7px;
  --tw-bg-opacity: 1;
  background-color: rgb(5 13 29 / var(--tw-bg-opacity));
  padding: 5px;
  text-transform: capitalize;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity))
}

.cardOptions:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(191 167 78 / var(--tw-bg-opacity))
}

@media (min-width: 640px){
  .cardOptions{
    margin-top: 1rem;
    margin-bottom: 1rem
  }
}

/* withdrawal method page styling ends here  */

/* card withdrawal page styling  */

.cardLabel{
  padding-left: 0.75rem;
  font-size: 13px;
  text-transform: capitalize;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity))
}

.cardInout{
  margin-bottom: 1rem;
  margin-top: 0.25rem;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border-radius: 7px;
  --tw-bg-opacity: 1;
  background-color: rgb(5 13 29 / var(--tw-bg-opacity));
  padding: 8px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px
}

/* card withdrawal page styling ends here  */

/* purchase token  */

.purchaseTknDiv{
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 10;
  margin: auto;
  display: none;
  --tw-bg-opacity: 1;
  background-color: rgb(18 18 28 / var(--tw-bg-opacity))
}