* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

body {
  width: 100%;
  height: 100vh;
  background-color: #f0f2f5;
}


.hidden {
  display: none;

  & i {
    transform: rotate(180deg);
  }
}


.dashboard-container {
  width: 100%;
  max-height: 100%;
  height: 100%;
  display: flex;
  position: relative;

  & .side-menu {
    width: 220px;
    height: 100%;
    background-color: #fff;
    max-height: 100%;
    border-right: 1px solid #e0e0e0;
    overflow: hidden;

    & .top-section {
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 20px;
      color: #000;
      border-bottom: 1px solid #e0e0e0;
      font-size: 24px;
    }

    & .side-menu-links {
      padding: 12px 16px;
      display: flex;
      gap: 10px;
      flex-direction: column;
      font-size: 14px;
      overflow: auto;
      scrollbar-width: none;
      box-sizing: border-box;
      height: 100%;
      padding-bottom: 90px;
      transition: all .3s ease-in-out;

      & .links {
        padding: 10px 12px;
        color: #4b6563;
        text-decoration: none;
        transition: all 0.3s ease;
        border-radius: 4px;
        display: flex;
        align-items: center;
        gap: 10px;
        position: relative;


        &:hover {
          background-color: #f0f0f0;
          color: #487fff;
          font-weight: 500;
        }

        & span {
          font-size: 1rem;
          display: grid;
          place-content: center;
        }

        & i {
          position: absolute;
          transform: rotate(90deg);
          right: 15px;
          top: 12px;
        }

      }

      & .dropdown-menu {
        max-height: 0;
        overflow: hidden;
        list-style: none;
        padding-left: 15px;
        transition: max-height .2s ease-in-out, opacity .2s ease-in-out;
        opacity: 0;

        & li {
          display: flex;
          align-items: center;
          gap: 15px;
          padding: 7px 7px;
          border-radius: 8px;
          transition: all .5s ease-in-out;

          & span {
            width: 8px;
            height: 8px;
            border-radius: 50%;
          }

          & .orange {
            background: #ff673d;
          }

          & .light-orange {
            background: #f2c357;
          }

          & .blue {
            background: #173dff;
          }

          & .sky-blue {
            background: #4596b3;
          }

          & a {
            text-decoration: none;
            font-size: 14px;
            color: #4b5563;
          }

          &:hover {
            background-color: #f0f0f0;
          }

          &:hover a {
            color: #487fff;
            font-weight: 500;
          }
        }

        & .dropdown-links.active-link {
          background-color: #487ffff0;
        }

        & .dropdown-links.active-link a {
          font-weight: 500;
          color: #fff;
        }
      }

      & .dropdown-menu.show {
        max-height: 500px;
        display: block;
        overflow: visible;
        opacity: 1;
        display: block;
      }

      & .links.active-link {
        background-color: #487fff;
        font-weight: 500;
        color: #fff;
      }

      & .links.active-link span {
        font-weight: 600;
        color: #fff;
      }

      & .side-menu-group-title {
        margin: 8px 0;
        font-weight: 600;
        color: #6b7280;
        list-style: none;
      }
    }
  }

  /* main content */
  & .main-panel {
    flex: 1;
    background-color: #f0f2f5;
    display: flex;
    flex-direction: column;

    & .top-bar {
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      background-color: #fff;
      border-bottom: 1px solid #e0e0e0;

      & .menu-icon {
        width: 20px;
        display: flex;
        flex-direction: column;
        gap: 3px;
        z-index: 1000;
        visibility: hidden;

        & .bar {
          height: 3px;
          width: 100%;
          border-radius: 10px;
          background: #111827;
          transition: all .2s ease-in-out;
        }

        &.open .bar1 {
          transform: rotate(45deg) translate(3.5px, 5px);
        }

        &.open .bar2 {
          opacity: 0;
        }

        &.open .bar3 {
          transform: rotate(-45deg) translate(3.5px, -5px);
        }
      }

      & .user-nav {
        display: flex;
        align-items: center;
        gap: 20px;

        & .notification-icon {
          width: 40px;
          height: 40px;
          background-color: #f0f2f5;
          display: grid;
          place-content: center;
          cursor: pointer;
          border-radius: 50%;

          & svg {
            width: 24px;
            height: 24px;
            color: #4b5563;
          }
        }

        & .profile-pic {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          overflow: hidden;
          cursor: pointer;

          & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }

    & .main-content {
      flex: 1;
      display: flex;
      flex-direction: column;

      max-height: 100%;
      overflow: auto;
      height: 100%;

      & .section {
        display: none;
      }

      & .section.active {
        display: block;
      }

      & .welcome {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 24px;

        & .page-title {
          font-size: 24px;
          font-weight: bold;
          color: #111827;
        }

        & .search-box {
          display: flex;
          gap: 10px;

          & .input-box {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px 20px;
            background: #f5f6fa;
            border: 1px solid #d1d5d8;
            border-radius: 8px;
            gap: 10px;

            & .icon-card {
              display: grid;
              place-content: center;
            }

            & input {
              font-size: 1rem;
              background: transparent;
              border: none;
              outline: none;
              display: grid;
              place-content: center;
              color: #212528;
            }

            & input::placeholder {
              font-size: 1rem;
              display: grid;
              place-content: center;
            }
          }

          & .search-button {
            color: #487fff;
            background: #bfdcff;
            padding: 6px 12px;
            font-size: 14px;
            border: none;
            outline: none;
            border-radius: 8px;
            transition: all .3s ease-in-out;

            &:hover {
              background: #487fff;
              color: #ffffff;
            }
          }
        }

        & .welcome-text {
          font-size: 16px;
          color: #4b5563;
          font-weight: 400;

          & a {
            color: #487fff;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;

            &:hover {
              color: #0d6efd;
            }
          }
        }
      }

      /* dashboard section */
      & .dashboard-section {
        padding: 15px;

        /* & .welcome {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 24px;

          & .page-title {
            font-size: 24px;
            font-weight: bold;
            color: #111827;
          }

          & .welcome-text {
            font-size: 16px;
            color: #4b5563;
            font-weight: 400;
          }
        } */

        & .kyc-alert {
          width: 100%;
          padding: 16px 48px 16px 16px;
          background-color: #cff4fc;
          border: 1px solid #0ea5e9;
          border-radius: 8px;
          display: flex;
          align-items: center;
          gap: 10px;
          margin-bottom: 1rem;

          & .icon-box {
            margin-right: 5px;

            & i {
              font-size: 24px;
              color: #055160;
            }
          }

          & .alert-title {
            font-size: 1rem;
            color: #055160;
            margin-bottom: 4px;
            font-weight: 600;
          }

          & .alert-message {
            color: #055160;
            font-size: 1rem;

            & a {
              color: #055160;
              text-decoration: underline;
              font-weight: 600;
              transition: color 0.3s ease;

              &:hover {
                color: #0284c7;
              }
            }
          }
        }

        & .warning-alert {
          width: 100%;
          padding: 16px 48px 16px 16px;
          background-color: #fff3cd;
          border: 1px solid #ffc10775;
          border-radius: 8px;
          display: flex;
          align-items: center;
          gap: 10px;
          margin-bottom: 2rem;

          & .moving-text {
            color: #664d03;
            font-size: 1rem;
            display: inline-block;
          }
        }

        & .ticker-wrapper {
          width: 100%;
          padding: 10px 0;
          background-color: #ffffff;
          margin-bottom: 1rem;
          font-weight: 1rem;
          border-top: 1px solid #e0e0e0;
          border-bottom: 1px solid #e0e0e0;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #4b5563;
        }


        & .investment-wrapper {
          width: 100%;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          padding: 1rem 0;
          gap: 20px;

          & .box1 {
            background: linear-gradient(to right, #E6EBFF, #FFFFFF);

            & .icon-box {
              .icon {
                background-color: #467fff;
              }
            }
          }

          & .box2 {
            background: linear-gradient(to right, #F7E9FF, #FFFEFD);

            & .icon-box {
              .icon {
                background-color: #8252e9;
              }
            }
          }

          & .box3 {
            background: linear-gradient(to right, #E8FFF5, #FFFFFF);

            & .icon-box {
              .icon {
                background-color: #45b369;

                & i {
                  font-size: 25px;
                }
              }
            }
          }




          /* 8252e9 */
          & .investment-card {
            padding: 16px 24px;
            border-radius: 8px;
            /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
            border: 1px solid #d1d5db80;
            display: flex;
            align-items: center;
            gap: 10px;

            & .icon-box {
              width: 64px;
              height: 64px;
              background-color: #ffffff80;
              border-radius: 8px;
              display: grid;
              place-content: center;
              margin-right: 10px;

              & .icon {
                width: 40px;
                height: 40px;
                display: grid;
                place-content: center;
                border-radius: 8px;

                & svg,
                & i {
                  font-size: 28px;
                  color: #ffffff;
                }

              }

              & .icon2 {
                background-color: #e30a0a;
              }
            }

            & .details-box {
              & .card-title {
                font-size: 16px;
                color: #4b6563;
                margin-bottom: 5px;
              }

              & .balance {
                font-size: 24px;
                color: #111827;
                font-weight: 600;
                margin: 4px 0;
              }
            }
          }
        }


        /* referrals section */
        & .referrals-link-wrapper {
          width: 100%;
          padding: 24px;
          background-color: #ffffff;
          border: 1px solid #d1d5db80;
          border-radius: 8px;
          margin-bottom: 1rem;

          & label {
            font-size: 14px;
            color: #2a2e33;
            margin-bottom: 40px;
            font-weight: 600;
          }

          & .link-card {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 8px;
            margin-top: 10px;

            & input {
              padding: 9px 20px;
              background-color: #f0f2f5;
              border-top-left-radius: 8px;
              border-bottom-left-radius: 8px;
              font-size: 1rem;
              border: 1px solid #d1d5db80;
              color: #487fff;
              flex: 1;
              outline: none;
              text-overflow: ellipsis;
              height: 100%;
            }

            & input::placeholder {
              color: #111827d2;
              font-size: 14px;
            }

            & button {
              height: 100%;
              border: none;
              outline: none;
              padding: 12px 12px;
              border-top-right-radius: 8px;
              border-bottom-right-radius: 8px;
              color: #ffffff;
              appearance: none;
              background-color: #0d6efd;
            }
          }
        }


        /* chart wrapper */
        & .chat-wrapper {
          width: 100%;
          padding: 4px;
          background-color: #ffffff;
          border-radius: 8px;
          margin-bottom: 1rem;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

          & h2 {
            font-size: 60px;
            color: #111827;
            font-weight: 700;
            margin-bottom: 8px;
          }

          & p {
            padding: 2px 0px;
            color: #212528;
            font-weight: 300;
          }

          & .chart {
            width: 100%;
            height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f0f2f5;
            border-radius: 8px;
            color: #373f46;
            font-size: 14px;
          }
        }


        /* portfolio-performance-wrapper css */
        & .portfolio-performance-wrapper {
          width: 98%;
          border-radius: 8px;
          margin: 24px auto;
          margin-bottom: 1rem;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          display: flex;
          flex-direction: column;
          overflow: hidden;

          & .wrapper-header {
            background-color: #ffffff;
            padding: 14px 24px;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            align-items: center;
            justify-content: space-between;

            & p {
              font-size: 16px;
              color: #4b5563;
              margin-bottom: 16px;
            }

          }

          & .chart-box {
            width: 100%;
            height: 150px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #373f46;
            font-size: 14px;
          }
        }


      }


      /* KYC section */
      & .kyc-section {
        padding: 15px;

        /* & .welcome {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 24px;

          & .page-title {
            font-size: 24px;
            font-weight: bold;
            color: #111827;
          }

          & .welcome-text {
            font-size: 16px;
            color: #4b5563;
            font-weight: 400;

            & a {
              color: #487fff;
              text-decoration: none;
              font-weight: 500;
              transition: color 0.3s ease;

              &:hover {
                color: #0d6efd;
              }
            }
          }
        } */

        & .kyc-form-wrapper {
          width: 100%;
          padding: 24px;
          background-color: #ffffff;
          border-radius: 8px;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;

          & .form-alert-box {
            max-width: 700px;
            width: 100%;
            padding: 16px;
            background-color: #cff4fc;
            border: 1px solid #0ea5e9;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 4px;

            & i {
              font-size: 32px;
              color: #055160;
            }

            & .alert-title {
              font-size: 24px;
              color: #055160;
              font-weight: bold;
            }

            & .alert-message {
              color: #055160;
              font-size: 20px;
              margin-top: 2px;
              text-align: center;
            }
          }

          & .form-container {
            max-width: 700px;
            width: 100%;
            padding: 24px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            border: 1px solid #d1d5db80;

            & h6 {
              font-size: 16px;
              color: #111827;
              font-weight: 600;
              margin-bottom: 16px;
            }

            & .kyc-form {
              width: 100%;

              & label {
                display: block;
                font-size: 14px;
                color: #111827;
                font-weight: 500;
                margin-bottom: 8px;

                & span {
                  color: #dc2626;
                }
              }

              & .captcha-code {
                color: #212528;
              }

              & input,
              & select {
                width: 100%;
                padding: 9px 20px;
                border-radius: 8px;
                border: 1px solid #d1d5db80;
                font-size: 16px;
                color: #111827;
                outline: none;
                margin-bottom: 20px;

                &:focus {
                  border-color: #487fff;
                }
              }

              & input::placeholder {
                font-size: 1rem;
              }

              & .button-group {
                width: 100%;
                display: grid;
                place-content: center;

                & button {
                  padding: 12px 56px;
                  background-color: #0d6efd;
                  color: #ffffff;
                  border-radius: 8px;
                  border: none;
                  cursor: pointer;
                  font-size: 16px;
                  transition: all .3s ease-in-out;

                  &:hover {
                    background-color: #487fff;
                  }
                }
              }

            }
          }



        }
      }



      /* investment plan section */
      & .investment-plan-section {
        padding: 15px;

        /* & .welcome {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 24px;

          & .page-title {
            font-size: 24px;
            font-weight: bold;
            color: #111827;
          }

          & .welcome-text {
            font-size: 16px;
            color: #4b5563;
            font-weight: 400;

            & a {
              color: #487fff;
              text-decoration: none;
              font-weight: 500;
              transition: color 0.3s ease;

              &:hover {
                color: #0d6efd;
              }
            }
          }
        } */

        & .kyc-alert {
          width: 100%;
          padding: 16px 48px 16px 16px;
          background-color: #cff4fc;
          border: 1px solid #84d4f9a9;
          border-radius: 8px;
          display: flex;
          align-items: center;
          gap: 10px;
          margin-bottom: 1rem;

          & .icon-box {
            margin-right: 5px;

            & i {
              font-size: 24px;
              color: #055160;
            }
          }

          & .alert-title {
            font-size: 1rem;
            color: #055160;
            margin-bottom: 4px;
            font-weight: 600;
          }

          & .alert-message {
            color: #055160;
            font-size: 1rem;

            & a {
              color: #055160;
              text-decoration: underline;
              font-weight: 600;
              transition: color 0.3s ease;

              &:hover {
                color: #0284c7;
              }
            }
          }
        }

        & .warning-alert {
          width: 100%;
          padding: 16px 48px 16px 16px;
          background-color: #fff3cd;
          border: 1px solid #ffc10775;
          border-radius: 8px;
          display: flex;
          align-items: center;
          gap: 10px;
          margin-bottom: 2rem;

          & .moving-text {
            color: #664d03;
            font-size: 1rem;
            display: inline-block;
          }
        }

        & .investment-plans-wrapper {
          width: 100%;
          background-color: #ffffff;
          border-radius: 10px;

          & .plans-header {
            padding: 16px 24px;
            border-bottom: 1px solid #e0e0e0;

            & h6 {
              font-size: 18px;
              color: #111827;
            }
          }

          & .plans-box {
            padding: 40px;

            & h4 {
              text-align: center;
              font-size: 36px;
              margin-bottom: 1rem;
            }

            & .plans {
              display: grid;
              grid-template-columns: 1fr 1fr;
              width: 100%;
              gap: 25px;

              & .plans-card {
                width: 100%;
                padding: 24px;
                border-radius: 20px;
                background: #487fff;
                color: #ffffff;
                position: relative;

                & .plan-label {
                  position: absolute;
                  top: 0;
                  right: 0;
                  color: #ffffff;
                  border-bottom-left-radius: 20px;
                  background: #ffffff40;
                  padding: 10px 24px;
                  font-size: 14px;
                }

                & .card-header {
                  width: 100%;
                  display: flex;
                  align-items: center;
                  gap: 15px;

                  & span {
                    width: 72px;
                    height: 72px;
                    background: #ffffff;
                    font-size: 16px;
                    border-radius: 10px;
                    display: grid;
                    place-content: center;
                  }

                  & .header-text {
                    & .start-up {
                      font-size: 1rem;
                    }

                    & h6 {
                      font-size: 24px;
                      font-weight: 600;
                    }
                  }
                }

                & .plan-type {
                  font-size: 1rem;
                  margin: 16px 0 24px;
                }

                & ul {
                  list-style: none;

                  & li {
                    display: flex;
                    align-items: center;
                    gap: 20px;
                    font-size: 18px;
                    margin-bottom: 16px;

                    & span {
                      width: 24px;
                      height: 24px;
                      background: #ffffff;
                      color: #467fff;
                      display: grid;
                      place-content: center;
                      border-radius: 50%;
                    }
                  }
                }

                & button {
                  background: #ffffff;
                  color: #467fff;
                  padding: 15px;
                  border-radius: 10px;
                  margin-top: 8px;
                  width: 100%;
                  border: none;
                  outline: none;
                  font-size: 14px;
                }
              }
            }
          }
        }

      }

      /* running investment section */
      & .running-investment-section {
        padding: 15px;
        height: 100%;

        /* & .welcome {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 24px;

          & .page-title {
            font-size: 24px;
            font-weight: bold;
            color: #111827;
          }

          & .welcome-text {
            font-size: 16px;
            color: #4b5563;
            font-weight: 400;

            & a {
              color: #487fff;
              text-decoration: none;
              font-weight: 500;
              transition: color 0.3s ease;

              &:hover {
                color: #0d6efd;
              }
            }
          }
        } */

        & .running-investment-wrapper {
          width: 100%;
          background: #ffffff;
          padding: 14px 24px;
          border-radius: 10px;

          & .table-wrapper {
            width: 100%;
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid #d1d5db80;

            & table {
              width: 100%;
              border-collapse: collapse;

              & tr {
                border-bottom: 1px solid #d1d5db80;
                background: #f5f6fa;
                text-align: left;

                & th {
                  padding: 16px;
                }
              }
            }

            & .alert-wrapper {
              width: 100%;
              padding: 16px;

              & .warning-alert {
                width: 100%;
                padding: 16px;
                background-color: #fff3cd;
                border: 1px solid #ffc10775;
                border-radius: 8px;
                display: flex;
                align-items: center;
                gap: 10px;
                margin-bottom: 1rem;

                & .moving-text {
                  color: #664d03;
                  font-size: 1rem;
                  display: inline-block;
                  text-align: center;
                  width: 100%;
                }
              }
            }
          }
        }


      }

      /* fund wallet section css */
      & .fund-wallet-section {
        padding: 15px;

        /* & .welcome {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 24px;

          & .page-title {
            font-size: 24px;
            font-weight: bold;
            color: #111827;
          }

          & .welcome-text {
            font-size: 16px;
            color: #4b5563;
            font-weight: 400;

            & a {
              color: #487fff;
              text-decoration: none;
              font-weight: 500;
              transition: color 0.3s ease;

              &:hover {
                color: #0d6efd;
              }
            }
          }
        } */

        & .fund-wallet-wrapper {
          width: 100%;
          padding: 24px;
          background-color: #ffffff;
          border-radius: 8px;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;

          & .wallet-form-wrapper {
            max-width: 700px;
            width: 100%;
            border: 1px solid #d1d5db80;
            border-radius: 10px;
            padding: 14px 24px;

            & h6 {
              font-size: 1rem;
              margin-bottom: 1rem;
              color: #111827;

            }

            & .wallet-form {
              width: 100%;

              & .form-group {
                & label {
                  font-size: 14px;
                  color: #111827;
                  font-weight: 500;
                }

                & input,
                & select {
                  width: 100%;
                  padding: 9px 20px;
                  border-radius: 8px;
                  border: 1px solid #d1d5db80;
                  font-size: 16px;
                  color: #111827;
                  outline: none;
                  margin-bottom: 20px;
                  appearance: none;
                  margin-top: 8px;
                  background: transparent;

                  &:focus {
                    border-color: #487fff;
                  }

                  &:disabled {
                    background: #d1d5db80;
                  }
                }
              }

              & .button-group {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 20px;

                & button {
                  padding: 12px 56px;
                  /* background-color: #0d6efd; */
                  color: #ffffff;
                  border-radius: 8px;
                  border: none;
                  cursor: pointer;
                  font-size: 16px;
                  transition: all .3s ease-in-out;

                  &:hover {
                    background-color: #487fff;
                  }
                }

                & .cancel {
                  color: #dc2626;
                  border: 1px solid #dc2626;
                  background: transparent;
                }

                & .save {
                  color: #fff;
                  background-color: #0d6efd;
                  ;
                }
              }
            }
          }
        }
      }


      /* history section */
      & .history-section {
        padding: 15px;
        height: 100%;

        /* & .welcome {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 24px;

          & .page-title {
            font-size: 24px;
            font-weight: bold;
            color: #111827;
          }

          & .search-box {
            display: flex;
            gap: 10px;

            & .input-box {
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 10px 20px;
              background: #f5f6fa;
              border: 1px solid #d1d5d8;
              border-radius: 8px;
              gap: 10px;

              & .icon-card {
                display: grid;
                place-content: center;
              }

              & input {
                font-size: 1rem;
                background: transparent;
                border: none;
                outline: none;
                display: grid;
                place-content: center;
                color: #212528;
              }

              & input::placeholder {
                font-size: 1rem;
                display: grid;
                place-content: center;
              }
            }

            & .search-button {
              color: #487fff;
              background: #bfdcff;
              padding: 6px 12px;
              font-size: 14px;
              border: none;
              outline: none;
              border-radius: 8px;
              transition: all .3s ease-in-out;

              &:hover {
                background: #487fff;
                color: #ffffff;
              }
            }
          }

          & .welcome-text {
            font-size: 16px;
            color: #4b5563;
            font-weight: 400;

            & a {
              color: #487fff;
              text-decoration: none;
              font-weight: 500;
              transition: color 0.3s ease;

              &:hover {
                color: #0d6efd;
              }
            }
          }
        } */

        & .history-wrapper {
          width: 100%;
          background: #ffffff;
          padding: 14px 24px;
          border-radius: 10px;

          & .table-wrapper {
            width: 100%;
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid #d1d5db80;

            & table {
              width: 100%;
              border-collapse: collapse;

              & tr {
                border-bottom: 1px solid #d1d5db80;
                background: #f5f6fa;
                text-align: left;

                & th {
                  padding: 16px;
                }
              }
            }

            & .alert-wrapper {
              width: 100%;
              padding: 16px;

              & .warning-alert {
                width: 100%;
                padding: 16px;
                background-color: #fff3cd;
                border: 1px solid #ffc10775;
                border-radius: 8px;
                display: flex;
                align-items: center;
                gap: 10px;
                margin-bottom: 1rem;

                & .moving-text {
                  color: #664d03;
                  font-size: 1rem;
                  display: inline-block;
                  text-align: center;
                  width: 100%;
                }
              }
            }
          }
        }


      }

      /* pending section */
      & .pending-section {
        padding: 15px;
        height: 100%;

        /* & .welcome {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 24px;

          & .page-title {
            font-size: 24px;
            font-weight: bold;
            color: #111827;
          }

          & .welcome-text {
            font-size: 16px;
            color: #4b5563;
            font-weight: 400;

            & a {
              color: #487fff;
              text-decoration: none;
              font-weight: 500;
              transition: color 0.3s ease;

              &:hover {
                color: #0d6efd;
              }
            }
          }
        } */

        & .pending-wrapper {
          width: 100%;
          background: #ffffff;
          padding: 14px 24px;
          border-radius: 10px;

          & .table-wrapper {
            width: 100%;
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid #d1d5db80;

            & table {
              width: 100%;
              border-collapse: collapse;

              & tr {
                border-bottom: 1px solid #d1d5db80;
                background: #f5f6fa;
                text-align: left;

                & th {
                  padding: 16px;
                }
              }
            }

            & .alert-wrapper {
              width: 100%;
              padding: 16px;

              & .warning-alert {
                width: 100%;
                padding: 16px;
                background-color: #fff3cd;
                border: 1px solid #ffc10775;
                border-radius: 8px;
                display: flex;
                align-items: center;
                gap: 10px;
                margin-bottom: 1rem;

                & .moving-text {
                  color: #664d03;
                  font-size: 1rem;
                  display: inline-block;
                  text-align: center;
                  width: 100%;
                }
              }
            }
          }
        }


      }

      /* completed-transaction section */
      & .completed-transaction-section {
        padding: 15px;
        height: 100%;

        /* & .welcome {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 24px;

          & .page-title {
            font-size: 24px;
            font-weight: bold;
            color: #111827;
          }

          & .welcome-text {
            font-size: 16px;
            color: #4b5563;
            font-weight: 400;

            & a {
              color: #487fff;
              text-decoration: none;
              font-weight: 500;
              transition: color 0.3s ease;

              &:hover {
                color: #0d6efd;
              }
            }
          }
        } */

        & .completed-transaction-wrapper {
          width: 100%;
          background: #ffffff;
          padding: 14px 24px;
          border-radius: 10px;

          & .table-wrapper {
            width: 100%;
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid #d1d5db80;

            & table {
              width: 100%;
              border-collapse: collapse;

              & tr {
                border-bottom: 1px solid #d1d5db80;
                background: #f5f6fa;
                text-align: left;

                & th {
                  padding: 16px;
                }
              }
            }

            & .alert-wrapper {
              width: 100%;
              padding: 16px;

              & .warning-alert {
                width: 100%;
                padding: 16px;
                background-color: #fff3cd;
                border: 1px solid #ffc10775;
                border-radius: 8px;
                display: flex;
                align-items: center;
                gap: 10px;
                margin-bottom: 1rem;

                & .moving-text {
                  color: #664d03;
                  font-size: 1rem;
                  display: inline-block;
                  text-align: center;
                  width: 100%;
                }
              }
            }
          }
        }


      }

      /* withdraw section css */
      & .withdraw-section {
        padding: 15px;

        /* & .welcome {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 24px;

          & .page-title {
            font-size: 24px;
            font-weight: bold;
            color: #111827;
          }

          & .welcome-text {
            font-size: 16px;
            color: #4b5563;
            font-weight: 400;

            & a {
              color: #487fff;
              text-decoration: none;
              font-weight: 500;
              transition: color 0.3s ease;

              &:hover {
                color: #0d6efd;
              }
            }
          }
        } */

        & .withdraw-wrapper {
          width: 100%;
          padding: 24px;
          background-color: #ffffff;
          border-radius: 8px;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;

          & .wallet-form-wrapper {
            max-width: 700px;
            width: 100%;
            border: 1px solid #d1d5db80;
            border-radius: 10px;
            padding: 14px 24px;

            & .wallet-balance {
              padding: 1rem;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;
              border: 1px solid #c4c8cb;
              background: #e2e3e5;
              border-radius: .375rem;
              margin-bottom: 1rem;

              & h6 {
                font-size: 1rem;
                /* margin-bottom: 1rem; */
                color: #111827b5;
                font-weight: 400;

              }

              & .usd-balance {
                font-size: 1.5rem;
                color: #1e2e51;
                font-weight: 800;

                & span {
                  font-size: .7rem;
                }
              }

              & .bitcoin-balance {
                font-size: 1rem;
                color: #111827;
                font-weight: 500;

                & span {
                  font-size: .7rem;
                }
              }

            }


            & .wallet-form {
              width: 100%;

              & .form-group {
                & label {
                  font-size: 14px;
                  color: #111827;
                  font-weight: 500;
                }

                & input,
                & select {
                  width: 100%;
                  padding: 9px 20px;
                  border-radius: 8px;
                  border: 1px solid #d1d5db80;
                  font-size: 16px;
                  color: #111827;
                  outline: none;
                  margin-bottom: 20px;
                  appearance: none;
                  margin-top: 8px;
                  background: transparent;

                  &:focus {
                    border-color: #487fff;
                  }

                  &:disabled {
                    background: #d1d5db80;
                  }
                }
              }

              & .button-group {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 20px;

                & button {
                  padding: 12px 56px;
                  /* background-color: #0d6efd; */
                  color: #ffffff;
                  border-radius: 8px;
                  border: none;
                  cursor: pointer;
                  font-size: 16px;
                  transition: all .3s ease-in-out;

                  &:hover {
                    background-color: #487fff;
                  }
                }

                & .cancel {
                  color: #dc2626;
                  border: 1px solid #dc2626;
                  background: transparent;
                }

                & .save {
                  color: #fff;
                  background-color: #0d6efd;
                  ;
                }
              }
            }
          }
        }
      }

      /* withdrawal-history section */
      & .withdrawal-history-section {
        padding: 15px;
        height: 100%;

        /* & .welcome {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 24px;

          & .search-box {
            display: flex;
            gap: 10px;

            & .input-box {
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 10px 20px;
              background: #f5f6fa;
              border: 1px solid #d1d5d8;
              border-radius: 8px;
              gap: 10px;

              & .icon-card {
                display: grid;
                place-content: center;
              }

              & input {
                font-size: 1rem;
                background: transparent;
                border: none;
                outline: none;
                display: grid;
                place-content: center;
                color: #212528;
              }

              & input::placeholder {
                font-size: 1rem;
                display: grid;
                place-content: center;
              }
            }

            & .search-button {
              color: #487fff;
              background: #bfdcff;
              padding: 6px 12px;
              font-size: 14px;
              border: none;
              outline: none;
              border-radius: 8px;
              transition: all .3s ease-in-out;

              &:hover {
                background: #487fff;
                color: #ffffff;
              }
            }
          }

          & .page-title {
            font-size: 24px;
            font-weight: bold;
            color: #111827;
          }

          & .welcome-text {
            font-size: 16px;
            color: #4b5563;
            font-weight: 400;

            & a {
              color: #487fff;
              text-decoration: none;
              font-weight: 500;
              transition: color 0.3s ease;

              &:hover {
                color: #0d6efd;
              }
            }
          }
        } */

        & .withdrawal-history-wrapper {
          width: 100%;
          background: #ffffff;
          padding: 14px 24px;
          border-radius: 10px;

          & .table-wrapper {
            width: 100%;
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid #d1d5db80;

            & table {
              width: 100%;
              border-collapse: collapse;

              & tr {
                border-bottom: 1px solid #d1d5db80;
                background: #f5f6fa;
                text-align: left;

                & th {
                  padding: 16px;
                }
              }
            }

            & .alert-wrapper {
              width: 100%;
              padding: 16px;

              & .warning-alert {
                width: 100%;
                padding: 16px;
                background-color: #fff3cd;
                border: 1px solid #ffc10775;
                border-radius: 8px;
                display: flex;
                align-items: center;
                gap: 10px;
                margin-bottom: 1rem;

                & .moving-text {
                  color: #664d03;
                  font-size: 1rem;
                  display: inline-block;
                  text-align: center;
                  width: 100%;
                }
              }
            }
          }
        }


      }

      /* profile section */
      & .profile-section {
        padding: 15px;

        /* & .welcome {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 24px;

          & .page-title {
            font-size: 24px;
            font-weight: bold;
            color: #111827;
          }

          & .welcome-text {
            font-size: 16px;
            color: #4b5563;
            font-weight: 400;

            & a {
              color: #487fff;
              text-decoration: none;
              font-weight: 500;
              transition: color 0.3s ease;

              &:hover {
                color: #0d6efd;
              }
            }
          }
        } */

        & .profile-settings-wrapper {
          display: grid;
          grid-template-columns: 2fr 4fr;
          gap: 20px;

          & .profile-card {
            background: #fff;
            height: 100%;
            background-image: url(user-grid-bg1.png);
            background-repeat: no-repeat;
            border: 1px solid #d1d5db80;
            background-size: 100% 120px;
            border-radius: 20px;
            padding: 20px;

            & .profile-pic {
              border-bottom: 1px solid #d1d5db80;
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;

              & img {
                width: 200px;
                height: 200px;
                border: 3px solid #fff;
                border-radius: 50%;
              }

              & h6 {
                font-size: 24px;
                color: #111827;
                margin-top: 1rem;
                font-weight: 600;
              }

              & .email {
                font-size: 1rem;
                color: #4b5563;
                margin-bottom: 1rem;
              }
            }

            & .profile-details {
              margin-top: 24px;
              color: #111827;

              & h6 {
                font-size: 20px;
                margin-bottom: 1rem;
              }

              & p {
                font-size: 1rem;
                font-weight: 600;
                margin-bottom: 12px;

                & span {
                  font-weight: 400;
                  color: #4b5563;
                  font-size: .9rem;
                  margin-left: 10px;
                }
              }
            }
          }

          & .profile-settings {
            background: #fff;
            height: 100%;
            border-radius: 20px;
            padding: 24px;
            transition: all .2s ease-in-out;

            & .settings-nav {
              width: 100%;
              display: flex;
              gap: 0;
              margin-bottom: 1rem;

              & button {
                padding: 10px 24px;
                border: none;
                border-top: 1px solid #d1d5db80;
                font-size: 1rem;
                color: #4b5563;
                background: transparent;
                cursor: pointer;
                transition: all .2s ease-in-out;
              }

              & .active-btn {
                border-top: 2px solid #0d6efd;
                background: linear-gradient(180deg, rgba(72, 127, 255, 0.12) 0%, rgba(72, 127, 255, 0.03) 100%);
                font-weight: 500;
                color: #0d121d;
              }
            }

            & .profile-contorl.active-control {
              display: block;
            }

            & .profile {
              display: none;
              width: 100%;
              height: 100%;



              & form {
                & .form-group {
                  width: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  gap: 24px;
                  margin-bottom: 20px;

                  & .input-wrapper {
                    width: 100%;

                    & label {
                      font-size: 14px;
                      color: #111827;
                      font-weight: 500;
                    }

                    & input {
                      width: 100%;
                      margin-top: 8px;
                      padding: 9px 20px;
                      border-radius: 8px;
                      border: 1px solid #d1d5db80;
                      outline: none;
                      height: 44px;
                      font-size: 1rem;

                      &:focus {
                        border: 1px solid #0d6dfda9;
                        box-shadow: 0 0 2px #0d6dfd49;
                      }
                    }

                    & input[type="file"] {
                      appearance: none;
                    }
                  }
                }

                & .button-group {
                  width: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: flex-end;
                  gap: 20px;

                  & button {
                    padding: 12px 56px;
                    /* background-color: #0d6efd; */
                    color: #ffffff;
                    border-radius: 8px;
                    border: none;
                    cursor: pointer;
                    font-size: 16px;
                  }

                  & .cancel {
                    color: #dc2626;
                    border: 1px solid #dc2626;
                    background: transparent;
                  }

                  & .save {
                    color: #fff;
                    background-color: #0d6efd;
                    ;
                  }
                }
              }

            }


            & .password {
              display: none;
              width: 100%;

              & form {
                width: 100%;

                & label {
                  font-size: 14px;
                  color: #111827;
                }

                & input {
                  width: 100%;
                  padding: 9px 20px;
                  height: 44px;
                  font-size: 1rem;
                  border: 1px solid #d1d5db80;
                  color: #111827;
                  border-radius: 8px;
                  margin-bottom: 20px;
                  margin-top: 8px;
                  outline: none;
                }

                & .button-group {
                  width: 100%;

                  & button {
                    padding: 9px 12px;
                    color: #ffffff;
                    border-radius: 8px;
                    border: none;
                    cursor: pointer;
                    font-size: 16px;
                  }

                  & .save {
                    color: #fff;
                    background-color: #0d6efd;
                  }
                }
              }
            }

            & .active-section {
              display: block;
            }



          }
        }
      }




    }


  }




  & footer {
    width: 100%;
    height: 60px;
    padding: 22px 24px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #4b5563;
    font-size: 1rem;
    font-weight: 400;
  }
}