/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
 .container {
      height: 100vh;
      padding: 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .top-section {
      margin-top: 20px;
    }

    .image {
      width: 100%;
      max-height: 300px;
      object-fit: contain;
      margin-bottom: 24px;
    }

    .title {
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 20px;
    }

    .features {
      text-align: left;
      margin-bottom: 20px;
    }

    .features li {
      list-style: none;
      margin: 12px 0;
      position: relative;
      padding-left: 24px;
      font-size: 16px;
    }

    .features li::before {
      content: "✔";
      position: absolute;
      left: 0;
      top: 0;
      color: #2e7d32;
      font-weight: bold;
    }

    .bold {
      font-weight: 700;
    }

    .btn {
      width: 100%;
      padding: 14px;
      background: #dff2e4;
      border: none;
      border-radius: 30px;
      color: #075e38;
      font-weight: 600;
      font-size: 16px;
      text-decoration: none;
      text-align: center;
      display: inline-block;
    }

    .btn:active {
      background: #c6e8d1;
    }

/*welcome page end*/

.footer-content {
  display: flex;
    justify-content: space-between;
    align-items: center; 
    margin: 0 auto; padding-top: 10px;
}
.glass { 
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.mt0 { margin-top:0 !important; }
.back-color-whit { background: #fff; } 
.gradient-box {
  background: var(--primary-color); /* green shades */
 
}
.gradient-box2 {
  background: linear-gradient(45deg, #fff, #fff); box-shadow: 3px 1px 8px rgba(0, 0, 0, 0.2)
 
}
.gradient-box3 {
  background: #ebdcff;
 
}
.errmsg { color:red; font-size:12px;margin-top:-10px;display:none; }

.wtclr { color:#000 !important; }

.card { display: flex; border-radius: 25px;
  padding: 15px 15px 15px 15px;align-items: center; width: 100%; }

.screen-iner {
  display: flex; position: absolute; width: 100%; margin-top: 0px;
  flex-direction: column;
  padding: 0px;  
  height: 100%; overflow-y: scroll; padding-bottom: 170px; background: #fff;
}
.screen {
  display: flex; position: relative; width: 100%;
  flex-direction: column;
  padding: 0px;  
  height: 100%; overflow-y: scroll; padding-bottom: 100px; background: #282a37;
}

.header { 
  border-radius: 30px;
  padding: 60px 20px 20px 20px;
  display: flex; margin-top: -20px;
  align-items: center;
  gap: 15px; position: absolute; width: 100%; z-index: 999;
}
.header-icon-logo { position:absolute; right:15px; top:55px; width:40px; }
.pad15 { padding:15px; }
.pad20 { padding:20px; }
.pad10 { padding:10px; }
.padT10 { padding-top:10px; }
.posR {position: relative;}
.posA {position:absolute;}
.mb5 { margin-bottom:5px }
.mt10 { margin-top: 10px; }
.w30 { width:30px }
.bldtxt { font-weight:bold; }
.bbtmgry { border-bottom: 1px solid #e6e6e6; }
.grn { color:#0fca86!important;  }
.red { color:#c03e3e!important;  }
 
.fnt13 {font-size: 13px!important;}
.fnt15 {font-size: 15px!important;}


 .overlay-iner {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  z-index: 999; 
}
 
  .dn-popup { position:absolute; width:100%; height:300px; background:#fff; border-radius:30px; bottom:-310px; left: 0;transition-timing-function: linear; transition:0.6s; z-index: 9999;}
 
   .sml_cncel_btn { width:100px; color:#f03558; font-size:12px; border:1px solid #f03558; border-radius:5px; text-align:center; padding:3px; cursor: default;}
   .sml_nrm_btn { width:100px; color:#000; font-size:12px; border:1px solid #000; border-radius:5px; text-align:center; padding:3px; cursor: default;}
   .sml_acept_btn { width:100px; background-color:  var(--primary-color); color:#fff; font-size:12px;   border-radius:5px; text-align:center; padding:3px; cursor: default;}
   .pendinglvl { background:#ffd5dd; color:#f03558; font-size:10px;  padding:1px 5px 1px 5px; position:relative; }
   .canceledlvl { background:#fffccd; color:#dcbf1d; font-size:10px;  padding:1px 5px 1px 5px; position:relative; }
   .sml_acept_btn:hover { background-color:  var(--secondary-color-two);}
   .rqstnumcnt { position:absolute; width:20px; height:20px; background:#00ad62; border-radius:100%; top:-12px;right:-3px; color:#fff;align-content: center; justify-content: center; text-align: center;font-size:12px; }


.close-btn {
  width: 36px;
  height: 36px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  color: #2c2c2c;
  cursor: default;
}

.header-text h2 {
  font-size: 18px;
  color: #fff;
}

.header-text span {
  font-size: 16px;
  color: #fff; opacity: 0.5;
}

 
.account-section .label {
  color: gray;
  font-size: 14px;
}

.account-section h1 {
  font-size: 32px;
  font-weight: bold;
  color: #36cc8e;
}

.account-section .gain {
  font-size: 14px;
  color: #0e402c;
}

.account-section .gain span {
  color: #4caf50;
}

.chart-section { 
  position: relative;
  text-align: center;
}

.chart-section .tooltip {
  display: inline-block;
  background: #e3f3e9;
  color: #0e402c;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.chart {
  width: 100%;
  height: auto;
  border-bottom: 2px dashed #ccc;
}

.month-selector {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  font-size: 14px;
  color: #c9a4ff;
}

.month-selector .active {
  color: #fff;
  font-weight: bold;
}

.month-selector .active-dark {
  background-color: #fff;
  color: #7f32f5;
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: bold;
}

.section-bottom {
  margin-top: 24px;
  background: linear-gradient(to right, #e3f3e9, #d6f3e5);
  border-radius: 20px;
  padding: 18px;
  text-align: center;
}

.section-bottom h3 {
  font-size: 16px;
  font-weight: bold;
  color: #0e402c;
}



.section {
  margin-top: 24px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.section-header h3 {
  font-size: 18px;
  color: #000;
}

.see-all {
  font-size: 14px;
  color: #1a1a1a;
  text-decoration: none;
  font-weight: 500;
}

.timestamp {
  font-size: 12px;
  color: gray;
  margin-bottom: 10px;
}
.smaltxt_trns { font-size: 13px;
  color: gray;}
.smaltxt { font-size: 13px!important;
  color: gray!important;}
.smaltxt2 { font-size: 9px!important;
  color: gray!important;}
.smaltxt3 { font-size: 13px!important;
   }
.smaltxt4 { font-size: 11px!important;color: gray!important;
   }

.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px; background: var(--secondary-color); padding: 5px; border-radius: 20px;
}

.tab {
  padding: 3px 14px;
  background-color:var(--secondary-color); 
  color: var(--secondary-color-two);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.tab.active-dark {
  background-color: var(--primary-color);;
  color: white;
}

.stock-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.box-shadow { box-shadow: 3px 1px 8px rgba(0, 0, 0, 0.1);}
.shadow-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  box-shadow: 3px 1px 8px rgba(0, 0, 0, 0.1);
  padding: 7px 14px;
  border-radius: 20px;
}
.shadow-div { 
  background: #ffffff;
  box-shadow: 3px 1px 8px rgba(0, 0, 0, 0.1);
  padding: 7px 14px;
  border-radius: 20px;
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
 border-bottom: 0px solid #e6e6e6;
  padding: 7px 12px;  cursor: default;
}
.stock-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);
  padding: 12px 16px;
  border-radius: 20px;
}

.stock-logo {
  font-size: 20px;
  width: 30px;
  height: 30px;
  background: #f2fdf6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.menu-logo {
  font-size: 20px;
  width: 30px;
  height: 30px; 
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.stock-name {
  flex: 1;
  margin-left: 10px;
  font-size: 16px;
  font-weight: 500;
}

.stock-name2 {
  flex: 1;
  margin-left: 10px;
  font-size: 12px;
  font-weight: 500; color: #4b4b4b;
}

.stock-change {
  font-size: 14px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  background-color: #e3f3e9;
  color: #0e402c;
}

.stock-change.negative {
  background-color: #fdecea;
  color: #fd5115;
}

.stock-change.positive {
  background-color: #e3f3e9;
  color: #2e7d32;
}
.stock-change.neutral {
  background-color: #dfe3e0;
  color: #7a7a7a;
}

.categories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.category {
  padding: 6px 14px;
  background-color: #f0fdf6;
  border-radius: 20px;
  font-size: 14px;
  color: #0e402c;
  font-weight: 500;
}

.category.active {
  background-color: #d6f3e5;
}

.abutton { width: 200px; margin-top: 10px;
  padding: 12px; height: 45px;
  border: none;
  border-radius: 30px;
  background-color:  var(--primary-color);
  color: white;
  font-size: 15px; 
  cursor: default;
  transition: background 0.3s ease;
}

.abutton:hover {
  background-color:  var(--secondary-color-two);
}

.login-screen {
  justify-content: center;
  align-items: center;
  padding: 30px 20px;
/*  background: #fff;*/
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.login-header h2 {
  font-size: 28px;
  color: #000;
  margin-bottom: 8px;
}

.login-header p {
  font-size: 14px;
  color: gray;
}

.login-form {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.login-form label {
  font-size: 12px;
  color: #000;
  font-weight: 500;
}

.login-form input {
  padding: 12px 14px;
  border: 0px solid #ccc;
  border-radius: 12px;
  font-size: 14px;
  outline: none;
  background-color: none; background: none;
  color: #fff;
  transition: border-color 0.3s;
}

.login-form input:focus {
/*  border-color: var(--primary-color);*/border-color: :none;
}
.login-form select {
  padding: 12px 14px;
  border: 1px solid #ccc;
  border-radius: 12px;
  font-size: 14px;
  outline: none;
  background-color: #ffffff;
  color: #1a1a1a;
  transition: border-color 0.3s;
}

.login-form select:focus {
  border-color: var(--primary-color);
}

.login-form button {
  padding: 12px; height: 45px;
  border: none;
  border-radius: 30px;
  background-color:  var(--primary-color);
  color: white;
  font-size: 16px;
  font-weight: bold;
  cursor: default;
  transition: background 0.3s ease;
}

.login-form button:hover {
  background-color:  var(--secondary-color-two);
}

.login-footer {
  text-align: center;
  margin-top: 10px;
}

.login-footer p {
  font-size: 13px;
  color: #333;
}

.login-footer a {
  color: #0e402c;
  text-decoration: none;
  font-weight: 500;
}

.kyc-screen {
  justify-content: flex-start;
  padding: 30px 20px;
  background: linear-gradient(to bottom, #f5fdf7, #e3f3e9);
}

.kyc-form {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0 auto;
}

.kyc-form label {
  font-size: 14px;
  color: #0e402c;
  font-weight: 500;
}

.kyc-form input,
.kyc-form textarea {
  padding: 12px 14px;
  border: 1px solid #cce3d8;
  border-radius: 12px;
  font-size: 14px;
  outline: none;
  background-color: #ffffff;
  color: #1a1a1a;
  transition: border-color 0.3s;
}

.kyc-form input:focus,
.kyc-form textarea:focus {
  border-color: #0e402c;
}

.kyc-form textarea {
  resize: vertical;
}

.kyc-form button {
  padding: 12px;
  border: none;
  border-radius: 30px;
  background-color: #0e402c;
  color: white;
  font-size: 16px;
  font-weight: bold;
  cursor: default;
  transition: background 0.3s ease;
}

.kyc-form button:hover {
  background-color: #105737;
}








.v-section-outer {
  width: 100%; height: 370px;  
 
}
.v-section::-webkit-scrollbar {
  display: none;         /* Chrome, Safari */
}
.v-section {
  width: 100%; height: 370px;  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  overflow-x: auto;     /* Enable horizontal scrolling */
  overflow-y: hidden;
  white-space: nowrap;  /* Keep children in one line */
  display: flex;
 
}
.portfolio-tabs {
  display: inline-block;  
  width: 280px;
   height: 110px; 
  margin-right: 15px; padding-top: 15px;
}
.portfolio-tabs-inr { width: 257px; height:90px; background:; position:relative; }
.dolr-icon-box { width:40px; height:40px; border-radius:100%; padding:5px 5px; }
.dolr-icon-box2 { width:30px; height:30px; border-radius:100%; padding:5px 5px; }
.po-grph { width:50px; position:absolute; bottom:9px; right:0px; }
.bigaddpbtn { border-radius:20px; border:2px dashed #ccc; height:80px; position:relative; align-content: center; justify-content: center; cursor: default;}
.bigaddpbtn:hover {border:2px dashed var(--primary-color); }
.depositbtn { font-size: 10px; width: 130px; height:35px; border-radius:10px; background:var(--primary-color); color: #fff; display: inline-block; position:relative; align-content: center; justify-content: center; text-align: center; cursor: default; margin-right: 10px;}
.withdrbtn {width: 150px; height:50px; border-radius:10px;  background:#fff; color: #000; border:1px solid #ddd;display: inline-block; position:relative; align-content: center; justify-content: center; text-align: center; cursor: default; }
.depositbtn2 { font-size: 13px;   height:40px; border-radius:10px; background:#7f2ef6; color: #fff; display: inline-block; position:relative; align-content: center; justify-content: center; text-align: center; cursor: default; margin-right: 10px;padding-left:15px;padding-right:15px;}
.withdrbtn2 {font-size: 13px;  height:40px; border-radius:10px;  background:#fff; color: #000; border:1px solid #ddd;display: inline-block; position:relative; align-content: center; justify-content: center; text-align: center; cursor: default;padding-left:15px;padding-right:15px; }

  .right-abso-50 { position:absolute; width:50%; background:; right:10px; top:0px; text-align:right; }
    .devider { border-top:1px solid #ccc; height: 10px;width: 100%; margin-top:10px }
    .smllvl2 {float:left; display: inline-block; font-size: 13px; padding-top: 5px}


       .txtbtnu {  padding:3px; color:#000 !important; margin-right:10px; border-bottom:3px solid #fff; cursor:default;  }
   .txtbtnu.active { border-bottom:3px solid var(--primary-color); }
   .devider-w { width:100%; height:1px solid #fff;  }
   .center-item {display: flex; width:100%; align-content: center; justify-content: center; text-align: center;}
   .right-arow-dark { width:30px; height:30px; border-radius:100%; background:var(--secondary-color); color:var(--primary-color); padding:3px 12px; position: absolute; right: 40px; cursor: default;}



    .fulscren_pop_overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: none; /* 🔒 hidden by default */
    
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pop_alert_box_cntr {
    width: 300px; 
    background: #fff;
    border-radius: 10px;
    padding: 10px;
  }


    .ldr_outrbtn { height:45px;  display: flex; width: 100%;
  align-items: center;
  justify-content: center;
  position: relative;  }
   .btnloader {
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top: 2px solid white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 0.6s linear infinite;
}
   .btnloader_b {
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-top: 2px solid white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 0.6s linear infinite;
}
   .btnloader_b2 {
  border: 3px solid var(--primary-color);;
  border-top: 3px solid white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


.f14 { font-size:14px; }
.f12 { font-size:12px; }
.fnr { font-weight:normal; }


 .hdrwltid { position:absolute; right:70px; bottom:20px; }
    .tabimgbtn { width:25%; height:120px; background: ; border:0px solid #ccc; display:inline-block; position:relative; align-content: center; justify-content: center; text-align: center;}
    .tabimgbtn p {font-size: 12px; line-height: 15px; margin-top: 8px}
    .imgbtn { width:45px; height:45px; border-radius:100%; padding-top: 12px;  background: var(--secondary-color); }
    .imgbtn img{ width:22px;  }



     .centeralign {position:relative; align-content: center; justify-content: center; text-align: center; }

.input-wrapper {
  display: flex;  
  align-items: center;
  font-size: 30px; 
  border: 0px solid #ccc;
  padding: 4px 8px; 
  background: ;
  min-width: fit-content; font-family: 'Poppins Regular'; font-weight: bold;
}


.currency {
  margin-right: 4px;
}

.editable {
  min-width: 50px;
  display: inline-block;
  white-space: nowrap; padding-bottom: 5px;
  outline: none; text-align: left;
}

.editable:empty:before {
  content: attr(data-placeholder);
  color: #aaa;
}
.lightgray { width:180px; background: #ececec; padding: 10px; border: none; outline: none; border-radius: 5px; text-align: center;}
 
  .payment-effect {
  position: relative;
  width: 60px;
  height: 60px;
  display: inline-block;
}

.coin {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.ripple-sus {position: absolute;
  top: 50%;
  left: 50%;
  width: 90px;
  height: 90px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%; transform: translate(-50%, -50%);
  z-index: 1;}
.ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90px;
  height: 90px;
  background: rgba(255, 215, 0, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  animation: ripplePulse 1.8s infinite ease-out;
}


.ripple1 {
  animation-delay: 0s;
}
.ripple2 {
  animation-delay: 0.4s;
}
.ripple3 {
  animation-delay: 0.8s;
}

@keyframes ripplePulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  70% {
    transform: translate(-50%, -50%) scale(2.2);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}






  
.slider-menu-desk {
  position: absolute; border-radius: 20px;  
  top: 10px;
 margin: 0; /* hidden by default */
  width: 300px; left: -310px;
  height: 600px;
  background: #fff; 
  padding-right: 50px;
  box-shadow: -3px 0 5px rgba(0,0,0,0.3);
  transition: right 0.3s ease;
  z-index: 1000;
}

.slider-menu-desk ul {
  list-style: none;
  padding: 0;
}

.slider-menu-desk ul li a {
  color: white;
  text-decoration: none;
  display: block;
  padding: 10px 0;
} 


.slider-menu {
  position: fixed; border-radius: 20px;
  top: 0;
  right: -350px; /* hidden by default */
  width: 350px;
  height: 100%;
  background: #fff; 
  padding-right: 50px;
  box-shadow: -3px 0 5px rgba(0,0,0,0.3);
  transition: right 0.6s ease;
  z-index: 1000;
}

.slider-menu ul {
  list-style: none;
  padding: 0;
}

.slider-menu ul li a {
  color: white;
  text-decoration: none;
  display: block;
  padding: 10px 0;
}

.drag-handle {
  position: fixed;
  top: 0;
  right: 0;
  width: 20px;
  height: 100%;
  background: transparent;
  z-index: 999;
  cursor: ew-resize;
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  z-index: 999;
}

.reld_stckouter { position:absolute; width:39px; height:38px;  right: 20px; top: 35px; padding: 5px 6px; border: 1px solid #4a4c59; border-radius: 5px;}
.reload-icon { 
  transition: transform 0.3s ease;
  width: 25px;
}

.positiv_ind { background:rgba(54, 204, 142, 0.2); color:#09d07e; font-size:11px; padding:4px 14px 4px 14px; border-radius:15px; text-transform: uppercase; }
.negetiv_ind { background:rgba(225, 30, 30, 0.2); color:#f42222; font-size:11px; padding:4px 14px 4px 14px; border-radius:15px; text-transform: uppercase; }