/* BASIC CSS START FROM HERE */
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica,
    Segoe UI, Arial, Roboto, PingFang SC, miui, Hiragino Sans GB,
    Microsoft Yahei, sans-serif;
}
:root {
  --btn-color: #36274c;

  /* --btn-color: #695a7e; */
  --common-light-color: #333;
  --icon--for-dashboard: 40px;
}
img {
  width: 100%;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
}
/* BASIC CSS ENDS FROM HERE */

/* HEADER SECTION START FROM HRER */
.logo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.header {
  border-bottom: 1px solid #e8e8e8;
  background: #eeeaea;
}
.header-area-flex {
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.login-sign-up-btn-area {
  display: flex;
  align-items: center;
  gap: 10px;
}
.user--btn {
  background: var(--btn-color);
  border: none;
  padding: 12px 22px;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 13px;
  color: #fff;
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

/* Hover Effect */
.user--btn:hover {
  background: linear-gradient(135deg, #ff7a18, #ff4d4d);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* Active / Click Effect */
.user--btn:active {
  transform: scale(0.96);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

/* HEADER SECTION START FROM HRER */
/* RECHARGE SECTION START FROM HERE */
.recharge--section {
  padding: 14px;
}
.recharge--area {
  display: flex;
  justify-content: space-around;
  -webkit-box-shadow: 0px 0px 0px 10px rgba(232, 244, 252, 1);
  padding: 10px;
}
.recharge--area {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 20px 0;
}

.recharge--col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.recharge--col img {
  width: 40px;
  height: 40px;
  margin-bottom: 5px;
  /* background: var(--btn-color); */
  /* border-radius: 50%; */
}

.recharge-area-text {
  font-size: 14px;
  color: #333;
  text-align: center;
}

/* RECHARGE SECTION START FROM HERE */
/* VERTICAL SLIDER SECTION START FROM HERE */
.vertical-slider-section {
  padding: 5px 10px;
  cursor: pointer;
  background: var(--btn-color);
}

.slide-up-img {
  width: 30px;
  margin-bottom: -7px;
  margin-right: 5px;
}

.slider-container {
  width: 100%;
  height: 80px; /* height barano holo */
  overflow: hidden;
  position: relative;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 6px;
  /* -webkit-box-shadow: 0px 0px 0px 10px rgba(232, 244, 252, 1); */
}

.slider {
  display: flex;
  flex-direction: column;
  animation: slideUp 20s linear infinite; /* time ektu barano holo */
}

.slide {
  height: 80px; /* container er height er sathe match */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

.user {
  color: #f44336;
  font-weight: bold;
}

.status {
  color: gray;
}

.amount {
  color: #333;
  font-weight: bold;
}

@keyframes slideUp {
  0% {
    transform: translateY(0);
  }

  /* প্রতিটি slide height = 80px ধরে */
  5% {
    transform: translateY(-80px);
  }
  10% {
    transform: translateY(-80px);
  }

  15% {
    transform: translateY(-160px);
  }
  20% {
    transform: translateY(-160px);
  }

  25% {
    transform: translateY(-240px);
  }
  30% {
    transform: translateY(-240px);
  }

  35% {
    transform: translateY(-320px);
  }
  40% {
    transform: translateY(-320px);
  }

  45% {
    transform: translateY(-400px);
  }
  50% {
    transform: translateY(-400px);
  }

  55% {
    transform: translateY(-480px);
  }
  60% {
    transform: translateY(-480px);
  }

  65% {
    transform: translateY(-560px);
  }
  70% {
    transform: translateY(-560px);
  }

  75% {
    transform: translateY(-640px);
  }
  80% {
    transform: translateY(-640px);
  }

  85% {
    transform: translateY(-720px);
  }
  90% {
    transform: translateY(-720px);
  }

  95% {
    transform: translateY(-800px);
  }
  100% {
    transform: translateY(0); /* jump back */
  }
}

/* VERTICAL SLIDER SECTION ENDS FROM HERE */
/* BLOG SECTION START FROM HERE */
.blog-section {
  padding: 15px;
}
.readmore__btn {
  background: var(--btn-color);
  color: #fff;
  font-size: 14px;
  padding: 10px 20px;
  margin-top: 20px;
  cursor: pointer;
  border: none;
  letter-spacing: 0.3px;
}
.heading-primary {
  font-weight: 500;
  font-size: 25px;
  padding: 20px 0;
}
.blog-area img {
  width: 100%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.blog-area {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-bottom: 100px;
}
.blog-col {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  /* border: 2px solid #bab7b7; */
  position: relative;
  border-radius: 10px;
}
.blog-col:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.position-box-span {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  background: red;

  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 14px;
}
.blog-content {
  padding: 20px 10px;
}
.blog-content h2 {
  font-weight: normal;
  font-size: 18px;
  margin-bottom: 10px;
}
.blog-content p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}
/* BLOG SECTION ENDS FROM HERE */
/* FOOTER SECTION START FROM HRER */
.sticky-footer {
  background-color: #f1f1f1;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px 15px;
  background: var(--btn-color);
  margin-top: 200px;
}
.footer-section {
  padding: 20px 15px;
  text-align: center;
  margin-top: 20px;
}
.footer-area {
  display: flex;
  justify-content: space-between;
  text-align: center;
  /* background: var(--btn-color); */
}

.home-col {
  text-align: center;
}
.footer-area i {
  font-size: 30px;
  margin-bottom: 10px;
}
.footer-area p {
  font-size: 14px;
  color: #fff;
}
.footer-area i {
  color: #fff;
}
.footer-icon {
  width: 30px;
}
/* FOOTER SECTION ENDS FROM HRER */
/* DEPOSIT SECTION START FROM HERE */
.deposit-section {
  padding: 15px;
  background: var(--btn-color);
  border-bottom: 1px solid #e8e8e8;
}
.left-chevron {
  width: 40px;
  background: #fff;
}
.deposit-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.coins-png {
  width: 40px;
  background: #fff;
}
.deposit-title {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #fff;
}
.payment-method {
  padding: 20px 15px;
}
.payment-method-title {
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 20px;
}
.deposit--img {
  width: 40px;
  margin-bottom: 10px;
}
.deposit-content {
  border: 1px solid #07cf43;
  display: inline-block;
  padding: 10px 40px;
  border-radius: 8px;
  margin-top: 10px;
  position: relative;
}
.deposit--img-checked {
  position: absolute;
  width: 30px;
  right: 0;
  bottom: 0;
}
.deposit-content p {
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.3px;
}
.payment-method-col {
  /* box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.2); */
  box-shadow: 0 4px 8px 0 rgba(224, 221, 221, 0.2);
  padding: 10px;
}
.payment-method-title {
  font-weight: 400;
  font-size: 20px;
  margin-top: 10px;
}
.payment-method-col {
  transition: 0.3s;
}
.payment-method-col:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.payment-amount-col {
  padding: 10px;
}
.payment-amout-area {
  display: flex;
  align-items: center;
  gap: 10px;
}
.payment-amount-input {
  width: 100%;
  padding: 20px;
  font-size: 30px;
  border: 1px solid #f7f1f1;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 10px;
  outline: none;
}
.payment-amount-input::placeholder {
  text-transform: capitalize;
  font-size: 14px;
  letter-spacing: 0.3px;
}
.payment-amout-area p {
  text-transform: uppercase;
}
.amount-content li {
  padding: 5px 0;
  /* margin-bottom: 40px; */
}
.amount-content {
  margin-bottom: 30px;
}
.deposit-now--btn {
  background: var(--btn-color);
  width: 100%;
  padding: 20px;
  border: none;
  border-radius: 10px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.3px;
  cursor: pointer;
  color: #fff;
}
.deposit-area i {
  color: #fff;
  font-size: 20px;
}
/* DEPOSIT SECTION START FROM HERE */
/* WITHDRAL SECTON START FROM HERE */
.withdral-section {
  padding: 15px;
  background: var(--btn-color);
  border-bottom: 1px solid #e8e8e8;
}
.withdral-currency-icon {
  width: 40px;
}
.withdral-col {
  box-shadow: 0 4px 8px 0 rgba(224, 221, 221, 0.2);
  padding: 15px;
  transition: 0.3s;
}
.withdral-position-relative {
  position: relative;
  border: 1px solid #07cf43;
  display: inline-block;
  padding: 15px 20px;
  border-radius: 10px;
}
.withdral-icon-position {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 25px;
}
.withdral-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.walet-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.walet-content h2 {
  margin-left: 10px;
  font-size: 18px;
  font-weight: 500;
}
.wallet--title {
  margin-bottom: 10px;
  font-weight: normal;
  font-size: 20px;
}
.withdral--checked-icon {
  width: 25px;
}
.walet-content-inner-flex {
  display: flex;
  align-items: center;
}
.withdral-input-inner-flex {
  display: flex;
  align-items: center;
  gap: 10px;
}
.withdral-input {
  width: 100%;
  outline: none;
  font-size: 20px;
  padding: 20px 15px;
  border: none;
}
.withdral-input::placeholder {
  text-align: end;
}
.withdral-password-input {
  width: 100%;

  outline: none;
  font-size: 20px;
  padding: 20px 15px;
  border: none;
}
.withdral-password-input::placeholder {
  font-size: 20px;
}
.password--title {
  font-weight: normal;
}
.ok--btn {
  width: 100%;
  padding: 20px;
  border: none;
  background: var(--btn-color);
  cursor: pointer;
  color: #fff;
  border-radius: 10px;
  font-size: 20px;
}
.withdral-col:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
/* WITHDRAL SECTON ENDS FROM HERE */

/* TEAMS SECTION START FROM HERE */
.teams-section {
  padding: 15px;
  border-bottom: 1px solid #e8e8e8;
  background: var(--btn-color);
}
.teams-header i {
  font-size: 20px;
  color: #fff;
}
.teams-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.teams-area-section {
  padding: 20px 15px;
  background: var(--btn-color);
  opacity: 0.9;
}
.teams-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #fff;
}
.teams-amount {
  font-size: 30px;
  font-weight: 500;
  margin-bottom: 20px;
  color: #fff;
}
.teams-flex-area {
  display: flex;
  justify-content: center;
  gap: 50px;
}
.teams-col {
  text-align: center;
  padding: 20px 0;
}
.teams-col p {
  font-size: 20px;
  /* font-weight: bold; */
  font-weight: 500;
  margin-bottom: 5px;
  color: #fff;
}
.teams-col h3 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 5px;
  color: #fff;
}
/* \-------------- */
:root {
  --accent: #0b74ff;
  --muted: #6b7280;
  --bg: #ffffff;
  --card: #f8fafc;
}

.custom-tabs {
  /* max-width: 700px; */
  margin: 24px auto;
  background: var(--card);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(11, 20, 40, 0.06);
  overflow: hidden;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial;
}

.custom-tabs-list {
  display: flex;
  gap: 6px;
  padding: 10px;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0.4)
  );
}

.custom-tabs-tab {
  flex: 1;
  text-align: center;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  color: var(--muted);
  border: 2px solid transparent;
  transition: all 160ms ease;
}

.custom-tabs-tab[aria-selected="true"] {
  background: var(--btn-color);
  color: #fff;
  border-color: rgba(11, 116, 255, 0.12);
  box-shadow: 0 4px 10px rgba(11, 20, 40, 0.06);
  transform: translateY(-2px);
}

.custom-tabs-tab:focus {
  outline: 3px solid rgba(11, 116, 255, 0.12);
  outline-offset: 2px;
}

.custom-tabs-panels {
  padding: 18px;
}

.custom-tabs-panel {
  display: none;
  animation: custom-tabs-fade 0.18s ease;
}

.custom-tabs-panel.active {
  display: block;
}

@keyframes custom-tabs-fade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 420px) {
  .custom-tabs-tab {
    font-size: 14px;
    padding: 10px 8px;
  }
  .custom-tabs {
    margin: 12px;
  }
}
/* TEAMS SECTION ENDS FROM HERE */
/* INVITATION SECTIONS START FROM HERE */
.invitation-header {
  padding: 15px;
  background: var(--btn-color);
}
.scaner-section--invitation {
  background: #f7f7f7f7;
}
.invitation-icon {
  width: 40px;
  background: #fff;
}
.invitation-flex-area i {
  font-size: 20px;
  color: #fff;
}
.invitation-flex-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.invitation-title {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #fff;
}
.scaner-img {
  width: 200px;
}
.invitation-header-title {
  font-size: 20px;
  margin-bottom: 15px;
}
.invitation-number {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-bottom: 30px;
}
.scaner---area {
  display: flex;
  flex-direction: column;
  justify-self: center;
  padding: 20px 0;
}
.invitation-content {
  padding-bottom: 20px;
  text-align: center;
}
.invitation-copy-section {
  padding: 15px;
}
.invitation-inner-flex-area {
  display: flex;
  justify-content: space-between;
  background: var(--btn-color);
  padding: 20px 15px;
}
.invitation-inner-flex-area p {
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.3px;
}
.invitation-links-area {
  background: #f7f7f7f7;
  padding: 20px 15px;
}
/* INVITATION SECTIONS ENDS FROM HERE */
/* DEPOSIT 2 SECTION START FROM HERE */
.deposit2-scaner-section {
  padding: 15px;
}
.scaner__area {
  max-width: 400px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #000;
  padding: 15px 20px;
  color: black;
}
.left-chevron-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.deposit2-header-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #fff;
}
.coins {
  width: 40px;
  background: #fff;
}
.deposit2-number {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #fff;
}
.network-text {
  font-size: 18px;
  margin-bottom: 10px;
  color: #fff;
}
.alert-deposit-text {
  font-size: 16px;
  background: #ffebeb;
  border-radius: 5px;
  padding: 5px;
  margin-bottom: 10px;
}
.on-time-address {
  font-size: 16px;
  margin-bottom: 10px;
  color: #fff;
}
.deposit2-content {
  text-align: center;
  padding: 10px 0;
}
.scaner-img-area {
  text-align: center;
  margin-bottom: 30px;
}
.deposit2-code-copy-area {
  text-align: center;
}
.deposit2-code-copy-area p {
  font-size: 14px;
  margin-bottom: 10px;
}
.deposit2-code-copy-area span {
  background: #f7f7f7f7;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 14px;
  letter-spacing: 0.3px;
  margin-left: 10px;
  color: #000;
}
.user-tips-area {
  /* padding: 15px; */
  border-radius: 8px;
  margin-top: 20px;
}
.tips-list li {
  list-style: decimal !important;
  background: #fff;
  padding: 10px 15px;
}
.tips__title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #fff;
}
::marker {
  color: #fff;
}
.deposit2-code-copy-area p {
  color: #fff;
}
.deposit--method {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.deposit-content {
  position: relative;
  border: 2px solid #ccc;
  border-radius: 8px;
  padding: 12px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: 0.3s;
  user-select: none;
}

.deposit-content input {
  display: none;
}

.deposit-content p {
  margin: 0;
  font-weight: 500;
  text-transform: uppercase;
}

.deposit-content .deposit--img-checked {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  opacity: 0;
  transition: 0.3s;
}

/* Active state when radio is checked */
.deposit-content input:checked + .deposit--img ~ p,
.deposit-content input:checked ~ p {
  font-weight: 600;
  color: #2e7d32;
}

.deposit-content input:checked ~ .deposit--img-checked {
  opacity: 1;
}

.deposit-content input:checked ~ * {
  /* highlight card */
  border-color: #4caf50;
}
.payment-method-amount-area {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 10px;
}
.payment__method--title {
  text-transform: uppercase;
  font-size: 20px;
}
.custom-input_payment-area {
  width: 100%;
  padding: 10px 20px;
  font-size: 40px;
}
.custom-input_payment-area::placeholder {
  text-transform: capitalize;
  font-size: 14px;
}
.payment-method-custom-text-area {
  padding: 20px 0;
}
.payment-method-custom-text-area li {
  padding: 10px 0;
}
.main__payment--btn {
  background: var(--btn-color);
  color: #fff;
  width: 100%;
  padding: 15px;
  font-size: 16px;
  cursor: pointer;
  letter-spacing: 0.3px;
}
/* DEPOSIT 2 SECTION ENDS FROM HERE */

/* SERVICE SECTION STARTFROM HERE */
.service-section {
  padding: 15px;
}
.service-area {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 100px;
}
.service-img {
  width: 100%;
}
.section-title {
  text-align: center;
  padding: 30px 0;
}
.section-title h2 {
  font-size: 50px;
  font-weight: normal;
  margin-bottom: 10px;
}
.section-title p {
  font-size: 20px;
  color: #999;
}
.service-inner-flex {
  background: var(--btn-color);
  display: flex;
  justify-content: space-between;
  padding: 20px;
  margin: 5px;
}
.service-inner-flex p,
i {
  color: #fff;
  font-size: 20px;
}
.service-img {
  animation: slideUpdown 3s ease-in-out infinite;
}
@keyframes slideUpdown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}
/* SERVICE SECTION STARTFROM HERE */

/* HELP SECTION START FROM HERE */
.help-section-header {
  padding: 15px;
  background: var(--btn-color);
}
.help-section-flex {
  display: flex;
  justify-content: space-between;
}
.help-header {
  color: #fff;
}
.help-section {
  padding: 15px;
  margin-bottom: 100px;
}
.descriptiopn-header {
  text-align: center;
  padding: 20px 0;
  font-weight: 400;
}
.des-box {
  padding: 10px 0;
  line-height: 1.7;
  border-bottom: 1px solid #d4c9c9;
}
.title--bg {
  background: var(--btn-color);
  display: inline-block;
  color: #fff;
  padding: 5px 20px;
  font-size: 20px;
}
/* HELP SECTION START FROM HERE */

/* MENU SECTION START FROM HERE */
.menu-section {
  padding: 40px 15px;
  margin-bottom: 100px;
}
.menu-main-title {
  text-align: center;
  font-size: 30px;
  background: #fff;
  margin-bottom: 20px;
  background: var(--btn-color);
  color: #fff;
  padding: 20px 0;
  letter-spacing: 0.3px;
  font-weight: 400;
}
/* tabs css start  from here */
.vip-tabs-root {
  font-family: Arial, sans-serif;
}

.vip-tabs-list {
  display: flex;
  gap: 5px;
  border-bottom: 2px solid #ccc;
  /* padding-bottom: 30px; */
  padding: 20px 0;
  /* background: var(--btn-color); */
  background: #f7f7f7f7;
  align-items: center;
}

.vip-tab {
  padding: 15px 30px;
  border: 1px solid #ccbdbd;
  background: #f5f5f5;
  cursor: pointer;
  margin-right: 5px;
  border-radius: 5px 5px 0 0;
}

.vip-tab[aria-selected="true"] {
  background: var(--btn-color);
  color: #fff;
  font-weight: bold;
}

.vip-tab-panel {
  display: none;
  padding: 15px;
  border: 1px solid #ccc;
  border-top: none;
}

.vip-tab-panel.active {
  display: block;
}

/* tabs css start  from here */
.vip--small-img {
  width: 40px;
}
.amazon--img {
  width: 100px;
}
.all-content-users-area {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  gap: 10px;
}
.all-content-users-mini-img {
  text-align: center;
  margin-bottom: 20px;
}
.brand--card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.brand--card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
.bran-content {
  padding: 20px 10xp;
  text-align: center;
}
.bran-content p:first-child {
  font-size: 20px;
  margin: 15px 0;
}
.commission--text {
  color: #999;
  font-size: 12px;
  margin-bottom: 10px;
  letter-spacing: 0.3px;
}
.commission--text span {
  color: rgb(79, 184, 79);
  font-weight: 700;
}
.vip-panel--2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
/* MENU SECTION ENDS FROM HERE */
/* MENU 2 SECTION START FROM HERE */
.menu--2-section {
  background: var(--btn-color);
  padding: 15px;
}
.menu-2-title {
  font-size: 30px;
  color: #fff;
}
.menu--2--img {
  width: 40px;
}
.menu--2-section-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.menu--2-title {
  font-size: 20px;
}
.menu--2-ballance--section {
  padding: 15px;
  margin-bottom: 100px;
}
.ballance-title-area {
  text-align: center;
  padding: 20px 0;
}
.menu--2-main--ballance-title {
  font-size: 25px;
  margin-bottom: 10px;
  color: #555;
}
.menu--2-main-ballance {
  font-size: 30px;
  margin-bottom: 10px;
  font-weight: normal;
  color: #555;
  letter-spacing: 0.3px;
}
.ballance-details-area {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: #fff;
  max-width: 600px;
  margin: 0 auto;
  row-gap: 20px;
  padding: 20px 20px;
  box-shadow: 0 8px 25px rgba(18, 75, 101, 0.25), 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
}
.ballance-details-col {
  text-align: center;
  border-bottom: 1px solid #bcb7b7;
}
.ballance-details-col p {
  font-size: 12px;
  font-weight: 200;
  color: #888;
  margin-bottom: 20px;
}
.menu-2-btn-area {
  text-align: center;
  padding: 20px 0;
}
.menu-2-btn {
  display: inline-block;
  padding: 15px 28px;
  font-size: 16px;
  color: #fff;
  background: var(--btn-color);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
}

/* hover effect */
.menu-2-btn:hover {
  background: linear-gradient(135deg, #36274c, #124b65);
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* active (press) effect */
.menu-2-btn:active {
  transform: translateY(1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

/* subtle ripple animation */
.menu-2-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
}

.menu-2-btn:hover::after {
  width: 220%;
  height: 220%;
  opacity: 0;
}
.menu-2-hint {
  padding: 10px 0;
}
div .menu-2-hint p {
  margin-bottom: 10px;
  color: #333;
}
/* MENU 2 SECTION ENDS FROM HERE */
/* RECORD SECTION START DROM HERE */
.record--section {
  padding: 15px;
  background: var(--btn-color);
}
.record-header-flex {
  display: flex;
  justify-content: space-between;
}
.record-section-title {
  font-size: 30px;
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.my-tab-component {
  width: 100%;
  margin: 20px 0;
}

.my-tab-nav {
  list-style: none;
  display: flex;
  justify-content: space-around;
  /* border-bottom: 2px solid #ddd; */
  padding: 0;
  margin: 0 0 10px;
}

.my-tab-item {
  padding: 10px 20px;
  cursor: pointer;
  background: #f4f4f4;
  border: 1px solid #ddd;
  border-bottom: none;
  margin-right: 5px;
  border-radius: 6px 6px 0 0;
  transition: all 0.3s ease;
}

.my-tab-item.active {
  background: var(--btn-color);
  color: #fff;
}

.my-tab-pane {
  display: none;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 0 6px 6px 6px;
  background: #fff;
}

.my-tab-pane.active {
  display: block;
  margin-bottom: 120px;
}
.incomplete-sm-img {
  width: 100px;
  border: 1px solid #e5dddd;
}
.incomplete-area {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 5px 5px;
  border: 1px solid #f3efef89;
}

.incomplete-products {
  font-size: 16px;
  margin-bottom: 10px;
}

.incomplete-content-col {
  width: 100%;
}
.inner-flex {
  display: flex;
  justify-content: space-between;
  width: 100% !important;
}
.incomplete-title {
  margin-bottom: 10px;
  font-size: 14px;
  text-transform: capitalize !important;
}
.incomplete-price {
  font-size: 16px;
  text-transform: uppercase;
}

.incomplete-percentage {
  font-size: 20px;
  color: #777;
}
.order-title {
  font-weight: normal;
  margin-bottom: 20px;
}
.complete-order-description-flex {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
}
.expended-income {
  font-size: 20px;
  color: #4c2730bc;
  background: var(--btn-color);
  color: #fff;
  padding: 10px 20px;
  border-radius: 10px;
}
.box-shadow {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  background: #fff;
  padding: 15px;
}
.complete-order-area {
  border: 2px solid #e7e3e3;
  padding: 10px;
  margin: 17px 0;
}
/* RECORD SECTION START DROM HERE */

/* DASHBOARD SECTION START FROM HERE */
.dashboard-section {
  padding: 15px;
}
.app-container {
  font-family: Arial, sans-serif;
  background: #f8f9fa;
  padding: 20px;
}

/* Profile Page Wrapper */
.profile-page {
  max-width: 1200px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 20px;
}

/* Profile Header */
.profile-header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 15px;
  margin-bottom: 20px;
  background: var(--btn-color);
  padding: 10px;
}

.profile-avatar {
  flex-shrink: 0;
  margin-right: 15px;
}

.profile-avatar img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #eee;
}

.profile-info {
  flex: 1;
}

.profile-username {
  display: flex;
  align-items: center;
  font-size: 28px;
  font-weight: 500;
  color: #fff;
}

.profile-username img {
  margin-left: 8px;
  height: 20px;
}

.profile-code {
  font-size: 14px;
  color: #fff;
  margin-top: 10px;
}

/* Account Summary */
.account-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f1f3f5;
  border-radius: 10px;
  padding: 15px;
  margin-top: 10px;
}

.account-left {
  flex: 1;
}

.account-title {
  font-size: 14px;
  font-weight: bold;
  color: #555;
  margin-bottom: 10px;
}

.account-balance p:first-child {
  font-size: 14px;
  color: #888;
  margin: 0;
  margin-bottom: 10px;
}

.account-balance p:last-child {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

/* Action Buttons */
.account-right {
  display: flex;
  gap: 15px;
}

.action {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 13px;
  cursor: pointer;
  padding: 10px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: 0.3s;
}

.action img {
  width: 30px;
  margin-bottom: 6px;
}

.action:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.deposit {
  color: #28a745;
}

.withdraw {
  color: #dc3545;
}

/* Responsive */
/* --------- */
.custom-menu {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  max-width: 1200px;
  margin: 20px auto;
  font-family: Arial, sans-serif;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: 0.3s ease;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:hover {
  background: #f9f9f9;
  transform: translateX(3px);
}

.menu-icon {
  width: 28px;
  height: 28px;
  margin-right: 14px;
  object-fit: contain;
}

.menu-title {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: #333;
}

.menu-arrow {
  font-size: 20px;
  color: #bbb;
  transition: color 0.3s;
}

.menu-item:hover .menu-arrow {
  color: #007bff;
}
.custom-font-awsome-icon {
  color: #0000007d;
  margin-right: 5px;
}
.dashboard-profile-section {
  margin-bottom: 120px;
}
/* ---- */
/* Container */
.custom-right-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  padding: 18px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);

  margin: 20px auto;
  font-family: Arial, sans-serif;
}

/* Each Item */
.custom-item {
  background: #f9f9f9;
  border-radius: 10px;
  padding: 16px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.custom-item:hover {
  background: #eef5ff;
  transform: translateY(-3px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

/* Icons */
.custom-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  object-fit: contain;
}

/* Text */
.custom-text {
  font-size: 18px;
  font-weight: 500;
  color: var(--common-light-color);
  margin-top: 10px;
}

/* Responsive */
.icon--for-dashboard {
  width: 40px;
}
/* DASHBOARD SECTION ENDS FROM HERE */
/* profile-header-section starts*/
.profile-header-section {
  padding: 15px;
  background: var(--btn-color);
}

.profile__title {
  color: #fff;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.profile-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.profile--user-icon {
  width: 40px;
  background: #fff;
  padding: 5px;
}
/* - */
/* Container */
.unique-filesblock {
  display: flex;
  align-items: center;
  gap: 15px;

  border-radius: 12px;
  padding: 16px;
  max-width: 350px;
  transition: all 0.3s ease;
}

.unique-filesblock:hover {
  border-color: #4f46e5;
  background: #f3f4ff;
}

/* Avatar Image */
.unique-avatarstyle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #4f46e5;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

.unique-avatarstyle:hover {
  transform: scale(1.05);
}

/* Hidden Input */
.unique-inputfiles {
  display: none;
}

/* Upload Button */
.unique-upload-btn {
  background: var(--btn-color);
  color: #fff;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s ease, transform 0.2s ease;
}

.unique-upload-btn:hover {
  background: #4338ca;
  transform: translateY(-2px);
}
.personal-avatar-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.personal-avatar-section {
  padding: 15px;
}
.avatar--title {
  font-size: 25px;
  color: #333;
}
/* profile-header-section  ends*/
/* DEPOSIT RECORD SECTION START FROM HERE  */
.depositrecord-header {
  background: var(--btn-color);
  padding: 15px;
}
.depositheader-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.DepositRecord-title {
  font-size: 30px;
  color: #fff;
  letter-spacing: 0.3px;
  font-weight: 500;
}
.purse--icon {
  width: 40px;
}
/* Transaction List Container */
.txn-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px;

  margin: 0 auto;
  background: #f8f9fa;
  border-radius: 12px;
}

/* Single Item */
.txn-item {
  background: #fff;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
}

.txn-item:hover {
  transform: translateY(-3px);
}

/* Top Section */
.txn-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.txn-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.txn-title {
  font-weight: 500;
  font-size: 15px;
  color: #333;
}

.txn-status {
  font-weight: 500;
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 6px;
}

.txn-status.success {
  background: #dcfce7;
  color: #16a34a;
}

.txn-status.initiate {
  background: #fff7ed;
  color: #d97706;
}

/* Extra info (icon + date) */
.txn-extra {
  display: flex;
  align-items: center;
  gap: 6px;
}

.txn-icon {
  width: 20px;
  height: 20px;
}

.txn-date {
  font-size: 18px;
  letter-spacing: 0.3px;
  color: #666;
}

/* Bottom Section */
.txn-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #eee;
  padding-top: 8px;
  margin-top: 8px;
}

.txn-id {
  font-size: 18px;
  color: #444;
}

.txn-amount {
  font-weight: 500;
  font-size: 18px;
  color: #333;
}
.fa-clock {
  color: var(--btn-color);
  font-size: 16px;
}
.fa-sack-dollar {
  color: green;
  margin-right: 5px;
}

/* DEPOSIT RECORD SECTION ENDS FROM HERE  */
/* WITHDWRAL RECORD SECTION START FROM HERE */
.withdralrecords-section {
  padding: 15px;
  background: var(--btn-color);
}
.withdralrecords--title {
  color: #fff;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.withdralrecords-section-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.withdralrecords__img {
  width: 40px;
}
/* WITHDWRAL RECORD SECTION ENDS FROM HERE */

/* SETTING SECTION START FROM HERE */
.setting-section {
  background: var(--btn-color);
  padding: 15px;
}
.setting-section-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Setting Item */
.custom-setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 14px 18px;
  border-radius: 10px;
  cursor: pointer;
  margin: 12px auto;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.custom-setting-icon {
  font-weight: bold;
}
.custom-setting-title {
  font-size: 25px;
  color: #333;
  letter-spacing: 0.3px;
}
/* Modal hidden */
.language-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.language-content {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  width: 280px;
  text-align: center;
}
.language-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.language-content ul li {
  padding: 10px;
  margin: 6px 0;
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
}
.language-content ul li:hover {
  background: #f0f0f0;
}
.custom-fa-arrow-right-long {
  color: #333;
}
.logout-title-btn-area {
  text-align: center;
  padding: 20px 10px;
}
.logout-title-btn {
  background: var(--btn-color);
  color: #fff;
  padding: 10px 20px;
  cursor: pointer;
}
/* SETTING SECTION ENDS FROM HERE */

/* LOGIN SECTION START FROM HRRE */
.login-section {
  padding: 40px 15px;
}
.my-language-selector {
  position: relative;
  display: inline-block;
  font-family: Arial, sans-serif;
}

.my-select-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #3a3333db;
  padding: 15px 42px;
  border-radius: 6px;
  cursor: pointer;
  background: #fff;
  min-width: 140px;
  transition: all 0.3s;
}

.my-select-toggle:hover {
  background: #f5f5f5;
}

.my-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.my-left img {
  width: 24px;
  height: 16px;
  object-fit: cover;
  border-radius: 3px;
}

.my-country-name {
  font-size: 14px;
  font-weight: 500;
}

.my-right .my-arrow {
  font-size: 14px;
  transition: transform 0.3s;
}

.my-dropdown-list {
  list-style: none;
  position: absolute;
  top: 110%;
  left: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
  display: none;
  z-index: 100;
}

.my-dropdown-list li {
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.3s;
}

.my-dropdown-list li:hover {
  background: #f2f2f2;
}

.my-language-selector.open .my-dropdown-list {
  display: block;
  animation: fadeIn 0.2s ease-in-out;
}

.my-language-selector.open .my-arrow {
  transform: rotate(180deg);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.language-content-area-flex {
  display: flex;
  justify-content: center;
}
/* LOGIN CODE START FROM HERE */

.loginarea {
  max-width: 500px;
  margin: 0 auto;
}
.main-login-title {
  text-align: center;
  margin-bottom: 20px;
  font-weight: 500;
}

.contents {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.innertransition {
  transition: all 0.3s ease;
}

.loginblock {
  display: flex;
  flex-direction: column;
}

.inputsarea {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 15px;
  padding: 8px 10px;
  height: 50px;
  width: 100%;
}

.inputsarea .lefticon img {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.input-cunstomer {
  border: none;
  outline: none;
  flex: 1;
  font-size: 14px;
  background: transparent;
}
.input-cunstomer::placeholder {
  font-size: 13px;
}
.groups {
  display: flex;
  /* align-items: center; */
  justify-content: space-between;
}

.validcodes img {
  height: 47px;
  width: 100px;
  border-radius: 6px;
  margin-left: 10px;
  margin-top: 2px;
}

.pwdsomeopration {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 15px 0;
}

.leftfonts {
  display: flex;
  gap: 10px;
}

.pwdrember img {
  width: 20px;
  margin-right: 8px;
}

.rightfonts {
  font-size: 14px;
  color: #555;
}

.bottombtn {
  background: var(--btn-color);
  color: #fff;
  text-align: center;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  margin-bottom: 15px;
  transition: background 0.3s;
}

.bottombtn:hover {
  background: transparent;
  color: #333;
  box-shadow: 0 0 0 1px #333;
}

.wras {
  display: flex;
  justify-content: space-between;
}

.looklook {
  font-size: 14px;
  color: #333;
  cursor: pointer;
}
.custom-input-design {
}
/* LOGIN CODE START FROM HERE */
/* LOGIN SECTION START FROM HRRE */










.wallet--header-section {
  background: var(--btn-color);
  padding: 15px;
}
.wallet-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wallet--title {
  font-size: 30px;
  font-weight: normal;
  color: #fff;
}

.wallet--icon {
  width: 40px;
  background: #fff;
  border-radius: 50%;
}
.wallet-details-section {
  padding: 15px;
}
.currency__btn {
  background: var(--btn-color);
  color: #fff;
  padding: 15px 20px;
  border-radius: 5px;
  cursor: pointer;
  text-transform: capitalize;
  letter-spacing: 0.3px;
}
/* parent container */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-family: Arial, sans-serif;
}

/* each card */
.cards .cards-item {
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  width: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-top: 20px;
  background: #36274c;
  border: 1px solid var(--btn-color);
}

.cards .cards-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* content wrapper */
.cards .conts {
  padding: 40px 20px;
}

/* top section */
.cards .topsc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

/* image + name */
.cards .cardname {
  display: flex;
  align-items: center;
  gap: 20px;
}

.cards .cardname img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #eee;
}

.cards .names {
  display: flex;
  flex-direction: column;
}

.cards .names .tops {
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 16px;
  color: #fff;
}

.cards .names .bottoms {
  font-size: 15px;
  font-weight: bold;
  color: #fff;
}

/* dots menu */
.cards .rightdots {
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}

.cards .rightdots .dots {
  width: 5px;
  height: 5px;
  background: #fff !important;
  border-radius: 50%;
}

/* bottom content */
.cards .bottomc {
  margin-top: 12px;
  font-size: 15px;
  color: #fff;
  word-break: break-all;
  text-align: center;
}
/* dots menu */
.cards .rightdots {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}

.cards .rightdots .dots {
  width: 5px;
  height: 5px;
  background: #333;
  border-radius: 50%;
}

/* hidden delete menu */
.cards .delete-menu {
  display: none;
  position: absolute;
  top: -20px;
  right: 10px;
  /* background: #fff; */
  border: 2px solid #ddd;
  border-radius: 6px;
  padding: 5px;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
}

.cards .delete-menu .delete-btn {
  background: var(--btn-color);
  border: none;
  color: #fff;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

/* show on active */
.cards .rightdots.active .delete-menu {
  display: block;
}