@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');
:root
{
--mainColor :#2c3e50;
--whiteColor:#fff
}

html,body
{
    overflow-x: hidden !important;
    position: relative;
}
*{
box-sizing: border-box;
   font-family: 'Cairo', sans-serif;
}
        .edit-page {
            padding: 40px 0;
        }
li
{
  list-style: none !important
}
        .card {
            border: none;
            border-radius: var(--border-radius);
            overflow: hidden;
            transition: var(--transition);
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow);
        }

        .card-body {
            padding: 2.5rem;
        }

        h2 {
            color: var(--dark);
            font-weight: 800;
            margin-bottom: 1.5rem;
            position: relative;
            padding-bottom: 15px;
        }

        h2:after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 60px;
            height: 4px;
            background: var(--primary);
            border-radius: 2px;
        }

        .text-primary {
            color: var(--primary) !important;
            font-weight: 600;
        }

        .form-label {
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--dark);
            display: block;
        }

        .form-control, .form-select {
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            padding: 12px 20px;
            transition: var(--transition);
            background-color: #fff;
        }

        .form-control:focus, .form-select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            border: none;
            border-radius: 12px;
            padding: 12px 30px;
            font-weight: 600;
            transition: var(--transition);
            box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(67, 97, 238, 0.4);
            background: linear-gradient(135deg, var(--primary-dark) 0%, var(--secondary) 100%);
        }

        /* Avatar Styles */
        .avatar-section {
            text-align: center;
            margin-bottom: 2rem;
            padding: 20px 0;
            border-bottom: 1px solid #eaeaea;
        }

        .avatar-container {
            position: relative;
            display: inline-block;
            margin-bottom: 15px;
        }

        .avatar-img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid #fff;
            box-shadow: var(--shadow);
        }

        .avatar-overlay {
            position: absolute;
            bottom: 5px;
            right: 5px;
            background: var(--primary);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
        }

        .avatar-overlay:hover {
            background: var(--primary-dark);
            transform: scale(1.1);
        }

        .avatar-text {
            color: var(--gray);
            font-size: 0.9rem;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .card-body {
                padding: 1.5rem;
            }

            .avatar-img {
                width: 100px;
                height: 100px;
            }
        }@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');
:root
{
--mainColor :#2c3e50;
--whiteColor:#fff
}
body{
margin:0px;
padding: 0px;
background-color: white !important;
/*! overflow-x: hidden */
}

*{
box-sizing: border-box;
   font-family: 'Cairo', sans-serif;
}

      body {
          background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
          min-height: 100vh;
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      }
:root {
       --primary: #2a57ff;
       --primary-dark: #1a3cc0;
       --accent: #00ff9d;
       --dark: #0f172a;
       --darker: #0a0e1a;
       --light: #f8fafc;
       --gray: #94a3b8;
       --primary-gradient: linear-gradient(135deg, #6e8efb, #a777e3);
       --secondary-gradient: linear-gradient(135deg, #3494e6, #ec6ead);
       --glass-bg: rgba(255, 255, 255, 0.15);
       --glass-border: rgba(255, 255, 255, 0.18);

   }

   body {
       background-color: #f8f9fa;
       color: #212529;
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       overflow-x: hidden;
       background: linear-gradient(to left, #0e0c2e, #02010d);
   }


.container
{
  max-width: 90% !important;
}
   /* External Sidebar styling */
   #external-sidebar {
       width: 250px;
       /*! min-height: 100vh; */
       background: var(--dark);
       /*! background: linear-gradient(180deg, var(--dark) 0%, var(--darker) 100%); */
       color: white;
       box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
       position: fixed;
       right: 0;
       top: 0;
       z-index: 1000;
   }

   #external-sidebar .sidebar-header {
       padding: 20px;
       /*! background: #0e0c2e30; */
       /*! border-bottom: 1px solid rgba(255, 255, 255, 0.1); */
       text-align: center;
   }

   #external-sidebar ul.components {
       padding: 20px 0;
       background: #02010d80;
       border-radius: 10px;
   }

   #external-sidebar ul li a {
       padding: 11px 25px;
       display: block;
       color: #fff;
       text-decoration: none;
       transition: all 0.3s;
       font-size: 14px;
       text-align: right;
       direction: rtl;
       border-bottom: 1px solid #ffffff0d;
       margin: 0px 5px;
       margin-right: 0;
   }

   #external-sidebar ul li a:hover {
       color: white;
       background: rgba(255, 255, 255, 0.1);
   }

   #external-sidebar ul li a.active {
       color: white;
       /*! background: linear-gradient(135deg, #0d0c2d29, #2c005842); */
       font-size: ;
   }

   #external-sidebar ul li a i {
       margin-left: 5px;
       font-size: 1.2em;
       color: #291eae;
   }

   /* Main content area */
   #main-content {
       flex: 1;
       margin-right: 250px;
       min-height: 100vh;
       transition: all 0.3s;
       text-align: right;
   }

   .navbar {
       background: #fff0;
       /*! box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
       position: relative;
   }

   .card {
       border-radius: 12px;
       border: none;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
       transition: transform 0.2s;
   }

   .card:hover {
       transform: translateY(-5px);
   }

   .crypto-card {
       border-top: 4px solid var(--primary);
   }

   .price-up {
       color: #00c853;
   }

   .price-down {
       color: #ff3d00;
   }

   .btn-primary {
       background-color: var(--primary);
       border: none;
       padding: 10px 20px;
       border-radius: 8px;
   }

   .btn-primary:hover {
       background-color: var(--primary-dark);
   }

   .stats-icon {
       width: 50px;
       height: 50px;
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.5rem;
       background: rgba(42, 87, 255, 0.1);
       color: var(--primary);
   }

   .crypto-badge {
       padding: 5px 10px;
       border-radius: 6px;
       font-weight: 600;
       font-size: 0.8rem;
   }

   .market-table th {
       font-weight: 600;
       color: var(--gray);
       border-top: none;
   }

   .market-table td {
       padding: 1rem 0.5rem;
       vertical-align: middle;
   }

   /* Crypto color classes */
   .btc-color {
       color: #f7931a;
   }

   .eth-color {
       color: #627eea;
   }

   .bnb-color {
       color: #f0b90b;
   }

   .ada-color {
       color: #0033ad;
   }

   /* Chart placeholder styling */
   .chart-placeholder {
       background: linear-gradient(45deg, #f8f9fa, #e9ecef);
       border-radius: 12px;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       color: var(--gray);
       font-weight: 600;
   }

   /* Responsive adjustments */
   @media (max-width: 992px) {
       #external-sidebar {
           width: 80px;
           overflow: hidden;
       }

       #external-sidebar .sidebar-header h3 {
           display: none;
       }

       #external-sidebar ul li a span {
           display: none;
       }

       #external-sidebar ul li a i {
           margin-right: 0;
           font-size: 1.5em;
       }

       #main-content {
           margin-left: 80px;
       }

       #external-sidebar .sidebar-header {
           padding: 20px 15px;
       }
   }

   @media (max-width: 768px) {
       #external-sidebar {
           width: 0;
           overflow: hidden;
       }

       #main-content {
           margin-left: 0;
       }

       #external-sidebar.active {
           width: 250px;
           overflow-y: auto;
       }

       #external-sidebar.active .sidebar-header h3 {
           display: block;
       }

       #external-sidebar.active ul li a span {
           display: inline;
       }

       #external-sidebar.active ul li a i {
           margin-right: 10px;
           font-size: 1.2em;
       }
   }
   .wallet-card {
              /*! background: var(--primary-gradient); */
              border-radius: 20px;
              padding: 25px;
              color: white;
              margin-bottom: 25px;
              box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
              backdrop-filter: blur(10px);
              border: 1px solid var(--glass-border);
              position: relative;
              overflow: hidden;
              transition: transform 0.3s ease;
              text-align: right;
          }

          .wallet-card:hover {
              transform: translateY(-5px);
          }

          .wallet-card::before {
              content: '';
              position: absolute;
              top: -50%;
              right: -50%;
              width: 200%;
              height: 200%;
              background: var(--secondary-gradient);
              opacity: 0.2;
              z-index: 0;
              transform: rotate(-15deg);
          }

          .wallet-card h4 {
              font-weight: 600;
              position: relative;
              z-index: 1;
          }

          .wallet-balance {
              font-size: 2.5rem;
              font-weight: 700;
              margin: 15px 0;
              text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
              position: relative;
              z-index: 1;
          }

          .action-btn {
              border-radius: 50px;
              padding: 10px 20px;
              font-weight: 600;
              box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
              transition: all 0.3s ease;
              position: relative;
              z-index: 1;
              border: none;
              color: white !important;
          }

          .action-btn:hover {
              transform: translateY(-3px);
              box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
          }

          .btn-primary {
              background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
          }

          .btn-success {
              background: #ffffff2e;
              border: unset;
          }

          .btn-warning {
              background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
          }

          .transaction-card {
              background: white;
              border-radius: 15px;
              padding: 15px;
              margin-bottom: 15px;
              box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
              transition: all 0.3s ease;
              border-left: 4px solid transparent;
          }

          .transaction-card:hover {
              transform: translateX(-5px);
              box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
          }

          .transaction-income {
              color: #2ecc71;
              font-weight: 700;
          }

          .transaction-expense {
              color: #e74c3c;
              font-weight: 700;
          }

          .transaction-card .bi {
              font-size: 1.5rem;
              margin-left: 15px;
              padding: 10px;
              border-radius: 12px;
              background: rgba(0, 0, 0, 0.05);
          }

          .transaction-income .bi {
              background: rgba(46, 204, 113, 0.15);
              color: #2ecc71;
          }

          .transaction-expense .bi {
              background: rgba(231, 76, 60, 0.15);
              color: #e74c3c;
          }

          h5 {
              font-weight: 700;
              color: #eee;
              margin-top: 25px;
              margin-bottom: 20px;
              padding-bottom: 0;
              /*! border-bottom: 2px solid rgba(255, 255, 255, 0.1); */
              text-align: right;
              margin-top: 4px;
              font-size: 18px !important;
              font-weight: normal;
          }

          /* Animation for transactions */
          @keyframes fadeIn {
              from { opacity: 0; transform: translateY(10px); }
              to { opacity: 1; transform: translateY(0); }
          }

          .transaction-card {
              animation: fadeIn 0.5s ease forwards;
              justify-content: end;
              flex-direction: row-reverse;
          }

          .transaction-card:nth-child(2) { animation-delay: 0.1s; }
          .transaction-card:nth-child(3) { animation-delay: 0.2s; }
          .transaction-card:nth-child(4) { animation-delay: 0.3s; }
          .transaction-list {
            max-width: 100%;
            margin: 2rem auto;
          }

          .transaction-card {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(145deg, #ffffff0a, #f8f9fa08);
            border-radius: 15px;
            padding: 1rem 1.5rem;
            margin-bottom: 1rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            transition: transform 0.2s, box-shadow 0.2s;
            color: white;
            text-align: right;
          }

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

          .transaction-info {
            display: flex;
            align-items: center;
            gap: 1rem;
          }

          .transaction-info i {
            font-size: 1.8rem;
          }

          .transaction-income i {
            color: #2ecc71;
          }

          .transaction-expense i {
            color: #e74c3c;
          }

          .transaction-details strong {
            display: block;
            font-size: 1rem;
            color: #fff;
            direction: rtl;
          }

          .transaction-details small {
            color: #7f8c8d;
          }

          .transaction-amount {
            font-weight: bold;
            font-size: 1.1rem;
          }

          .transaction-income .transaction-amount {
            color: #2ecc71;
          }

          .transaction-expense .transaction-amount {
            color: #e74c3c;
          }
          .profile-card {
            max-width: 900px;
            margin: 3rem auto;
            background: #ffffff;
            border-radius: 20px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            padding: 2rem;
          }
          .profile-image {
            width: 130px;
            height: 130px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid #4e73df;
          }
          .profile-info h3 {
            font-weight: bold;
            color: #2c3e50;
          }
          .profile-info p {
            color: #7f8c8d;
            margin-bottom: 0.5rem;
          }
          .btn-profile {
            border-radius: 50px;
            padding: 0.5rem 1.5rem;
            font-weight: 500;
          }
          .activity-card {
            background: #f9f9f9;
            border-radius: 15px;
            padding: 1rem;
            margin-bottom: 1rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            transition: transform 0.2s, box-shadow 0.2s;
          }
          .activity-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
          }
          .activity-card i {
            font-size: 1.5rem;
            margin-left: 1rem;
          }    .card {
            border: none;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            transition: transform 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
        }

        h3 {
            color: #fff;
            font-weight: 700;
            padding-bottom: 10px;
            border-bottom: 2px solid #6e8efb;
            display: inline-block;
        }

        .form-label {
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 8px;
            text-align: right;
            display: block;
        }

        .form-control, .form-select {
            border-radius: 12px;
            padding: 12px 16px;
            border: 2px solid #eef2f8;
            transition: all 0.3s ease;
            background-color: #f8fafc;
        }

        .form-control:focus, .form-select:focus {
            border-color: #6e8efb;
            box-shadow: 0 0 0 3px rgba(110, 142, 251, 0.2);
            background-color: #fff;
        }

        .input-group button {
            border-radius: 0 12px 12px 0;
            background: linear-gradient(135deg, #6e8efb, #a777e3);
            color: white;
            border: none;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .input-group button:hover {
            background: linear-gradient(135deg, #5d7ce0, #9666d3);
            transform: translateY(-2px);
        }

        .input-group input {
            border-radius: 12px 0 0 12px;
        }

        .btn-primary {
            background: linear-gradient(135deg, #6e8efb, #a777e3);
            border: none;
            border-radius: 50px;
            padding: 12px 35px;
            font-weight: 600;
            box-shadow: 0 4px 15px rgba(110, 142, 251, 0.3);
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #5d7ce0, #9666d3);
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(110, 142, 251, 0.4);
        }

        .currency-icon {
            width: 24px;
            height: 24px;
            margin-left: 10px;
            border-radius: 50%;
        }

        .form-select {
            /*! background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236e8efb' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); */
            background-position: left 0.75rem center;
            background-size: 16px 12px;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .card {
            animation: fadeIn 0.5s ease forwards;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }
        .chart-space {
          padding: 20px 0;
          background: #0a0e17;
          border-radius: 16px;
          margin: 20px 0;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        }

        .chart-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20px;
          padding: 0 15px;
        }

        .chart-title {
          color: #eaecef;
          font-weight: 600;
          font-size: 1.5rem;
          margin: 0;
        }

        .timeframe-selector {
          display: flex;
          background: #1a1f2e;
          border-radius: 12px;
          padding: 4px;
        }

        .timeframe-btn {
          background: transparent;
          border: none;
          color: #6c7282;
          padding: 8px 16px;
          border-radius: 8px;
          cursor: pointer;
          font-weight: 500;
          transition: all 0.2s ease;
        }

        .timeframe-btn:hover {
          color: #eaecef;
          background: #2a3145;
        }

        .timeframe-btn.active {
          color: #eaecef;
          background: #3a7fff;
        }

        .price-info-bar {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 15px;
          background: #1a1f2e;
          padding: 15px;
          border-radius: 12px;
          margin-bottom: 20px;
        }

        .price-item {
          display: flex;
          flex-direction: column;
        }

        .price-item .label {
          color: #6c7282;
          font-size: 0.85rem;
          margin-bottom: 4px;
        }

        .price-item .value {
          color: #eaecef;
          font-weight: 600;
          font-size: 1.1rem;
        }

        .chart-container {
          width: 99%;
          /*! height: 450px; */
          border-radius: 12px;
          overflow: hidden;
          /*! margin-right: 950px !important; */
        }      .crypto-chart {
                /*! background: #0f172a; */
                border-radius: 16px;
                padding: 20px;
                margin: 20px 0;
                /*! box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); */
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
              }

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

              .chart-header h2 {
                color: #e2e8f0;
                margin: 0;
                font-size: 1.5rem;
                font-weight: 600;
              }

              .timeframe-info {
                display: flex;
                align-items: center;
                gap: 12px;
              }

              .timeframe-badge {
                background: #3b82f6;
                color: white;
                padding: 4px 12px;
                border-radius: 20px;
                font-weight: 500;
                font-size: 0.875rem;
              }

              .last-update {
                color: #94a3b8;
                font-size: 0.875rem;
              }

              .price-info-bar {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 16px;
                background: #1e293b;
                padding: 16px;
                border-radius: 12px;
                margin-bottom: 20px;
              }

              .price-metric {
                display: flex;
                flex-direction: column;
              }

              .price-metric .label {
                color: #94a3b8;
                font-size: 0.875rem;
                margin-bottom: 4px;
              }

              .price-metric .value {
                color: #e2e8f0;
                font-weight: 600;
                font-size: 1.125rem;
              }

              .chart {
                width: 100%;
                height: 450px;
                border-radius: 12px;
                overflow: hidden;
                background: #1e293b;
              }

              .chart-footer {
                display: flex;
                justify-content: space-between;
                margin-top: 20px;
                gap: 20px;
              }

              .candle-info {
                background: #1e293b;
                padding: 16px;
                border-radius: 12px;
                flex: 1;
              }

              .candle-info h4 {
                color: #e2e8f0;
                margin: 0 0 12px 0;
                font-size: 1rem;
              }

              .candle-details {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
              }

              .detail {
                display: flex;
                justify-content: space-between;
                color: #94a3b8;
              }

              .time-remaining {
                background: #1e293b;
                padding: 16px;
                border-radius: 12px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                min-width: 200px;
              }

              .time-remaining span:first-child {
                color: #94a3b8;
                margin-bottom: 8px;
              }

              #time-remaining {
                color: #3b82f6;
                font-weight: 600;
                font-size: 1.25rem;
                margin-bottom: 8px;
              }
section{
  width: 100% !important
}
              .candle-progress {
                width: 100%;
                background: #334155;
                height: 6px;
                border-radius: 3px;
                overflow: hidden;
              }

              .progress-bar {
                height: 100%;
                background: #3b82f6;
                border-radius: 3px;
                width: 0%;
                transition: width 0.5s ease;
              }

              .positive {
                color: #10b981 !important;
              }

              .negative {
                color: #ef4444 !important;
              }
              .login-card {
                /*! background: #ffffff0f; */
                /*! border: 1px solid rgba(0,0,0,0.05); */
                transition: transform 0.3s ease, box-shadow 0.3s ease;
                color: white;
                box-shadow: unset !important;
              }

              .login-card:hover {
                transform: translateY(-4px);
                box-shadow: 0 12px 28px rgba(0,0,0,0.12);
              }

              .forgot-link {
                color: var(--bs-primary);
                font-size: 0.9rem;
                transition: color 0.3s ease;
              }

              .forgot-link:hover {
                color: #0a58ca;
                text-decoration: underline;
              }

              input.form-control {
                border-left: none;
                box-shadow: none !important;
              }

              .input-group-text {
                border-right: none;
                border-color: #ddd;
              }

              .btn-primary {
                font-weight: 600;
                font-size: 1rem;
              }

              .btn-outline-primary:hover {
                background: var(--bs-primary);
                color: #fff;
              }
input
{
    text-align: right
}  .register-card {
  /*! background: #ffffff0f; */
  /*! border: 1px solid rgba(0,0,0,0.05); */
  /*! transition: transform 0.3s ease, box-shadow 0.3s ease; */
  color: white;
  margin-top: 60px !important;

  box-shadow: unset !important;
  }

  .register-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
  }

  input.form-control {
    border-left: none;
    box-shadow: none !important;
    height: 46px !important;
    border: unset !important;
    margin-bottom: 18px;
    color: white !important;
  }

  .input-group-text {
    border-right: none;
    border-color: #ddd;
  }

  .btn-primary {
    font-weight: 600;
    font-size: 1rem;
  }

  .btn-outline-primary:hover {
    background: var(--bs-primary);
    color: #fff;
  }

  .err-msg {
    color: red;
    font-size: 0.9rem;
    text-align: center;
  }
        .edit-page {
            padding: 40px 0;
        }

        .card {
            border: none;
            border-radius: var(--border-radius);
            overflow: hidden;
            transition: var(--transition);
            background: #ffffff08;
            border-radius: 10px;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow);
        }

        .card-body {
            padding: 2.5rem;
        }

        h2 {
            color: var(--dark);
            font-weight: 800;
            margin-bottom: 1.5rem;
            position: relative;
            padding-bottom: 15px;
        }

        h2:after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 60px;
            height: 4px;
            background: var(--primary);
            border-radius: 2px;
        }

        .text-primary {
            color: var(--primary) !important;
            font-weight: 600;
        }

        .form-label {
            font-weight: 600;
            margin-bottom: 8px;
            color: #f7f8f9;
            display: block;
        }

        .form-control, .form-select {
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            padding: 12px 20px;
            background-color: #ffffff3d !important;
            width: 100%;
            text-align: right;
            border: unset;
            /*! color: white; */
        }

        .form-control:focus, .form-select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            border: none;
            border-radius: 12px;
            padding: 12px 30px;
            font-weight: 600;
            transition: var(--transition);
            box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(67, 97, 238, 0.4);
            background: linear-gradient(135deg, var(--primary-dark) 0%, var(--secondary) 100%);
        }

        /* Avatar Styles */
        .avatar-section {
            text-align: center;
            margin-bottom: 0;
            /*! padding: 20px 0; */
            border-bottom: 1px solid #eaeaea29;
            padding-bottom: 4px;
        }

        .avatar-container {
            position: relative;
            display: inline-block;
            margin-bottom: 15px;
        }

        .avatar-img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid #fff;
            box-shadow: var(--shadow);
        }

        .avatar-overlay {
            position: absolute;
            bottom: 5px;
            right: 5px;
            background: var(--primary);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
        }

        .avatar-overlay:hover {
            background: var(--primary-dark);
            transform: scale(1.1);
        }

        .avatar-text {
            color: var(--gray);
            font-size: 0.9rem;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .card-body {
                padding: 1.5rem;
            }

            .avatar-img {
                width: 100px;
                height: 100px;
            }
        }
        .verify-card {
                  max-width: 550px;
                  margin: 50px auto;
                  padding: 30px;
                  background: #ffffff0a;
                  border-radius: 20px;
                  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
                  color: white !important;
                  text-align: right;
              }
              .preview-container {
                  text-align: center;
                  margin: 20px 0;
              }
              .preview-img {
                  width: 250px;
                  height: auto;
                  border-radius: 10px;
                  border: 2px dashed #ccc;
                  object-fit: cover;
                  display: none;
                  margin: 10px auto;
              }
        /* Modern File Upload Styles */
        .upload-section {
            margin-bottom: 2rem;
        }

        .upload-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: #fff;
            /*! display: flex; */
            align-items: start;
            text-align: right;
            direction: rtl;
        }

        .upload-title i {
            margin-left: 8px;
            color: var(--primary);
        }

        .upload-container {
            display: flex;
            gap: 20px;
            margin-bottom: 1.5rem;
        }

        @media (max-width: 768px) {
            .upload-container {
                flex-direction: column;
            }
        }

        .upload-box {
            flex: 1;
            border: 2px dashed #d1d9e6;
            border-radius: 12px;
            padding: 25px;
            text-align: center;
            transition: var(--transition);
            background: #fafbfc0a;
            cursor: pointer;
            position: relative;
        }

        .upload-box:hover {
            border-color: var(--primary);
            background: rgba(67, 97, 238, 0.03);
        }

        .upload-box.active {
            border-color: var(--success);
            background: rgba(46, 196, 182, 0.05);
        }

        .upload-icon {
            font-size: 2.5rem;
            color: var(--primary);
            margin-bottom: 15px;
        }

        .upload-text {
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--dark);
        }

        .upload-subtext {
            font-size: 0.85rem;
            color: var(--gray);
            margin-bottom: 15px;
        }

        .upload-btn {
            display: inline-block;
            background: var(--primary);
            color: white;
            padding: 8px 20px;
            border-radius: 30px;
            font-size: 0.9rem;
            font-weight: 500;
            transition: var(--transition);
        }

        .upload-box:hover .upload-btn {
            background: var(--primary-dark);
        }

        .upload-input {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            opacity: 0;
            cursor: pointer;
        }

        .preview-container {
            display: flex;
            gap: 20px;
            margin-top: 1.5rem;
        }

        @media (max-width: 768px) {
            .preview-container {
                flex-direction: column;
            }
        }

        .preview-card {
            flex: 1;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            display: none;
        }

        .preview-img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            display: block;
        }

        .preview-label {
            display: block;
            text-align: center;
            padding: 10px;
            background: var(--light);
            font-weight: 600;
            font-size: 0.9rem;
            color: black;
        }

        .note-text {
            background: #fff9e6;
            border-left: 4px solid var(--warning);
            padding: 15px;
            border-radius: 8px;
            font-size: 0.9rem;
            margin-top: 20px;
            color: black;
            direction: rtl;
        }

        .requirements {
            margin-top: 20px;
            padding: 15px;
            background: #f8f9fa0a;
            border-radius: 12px;
            font-size: 0.9rem;
            text-align: right !important;
            direction: rtl;
            margin-bottom: 16px;
        }

        .requirements-title {
            font-weight: 600;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }

        .requirements-title i {
            margin-left: 8px;
            color: var(--primary);
        }

        .requirements-list {
            padding-right: 20px;
            margin: 0;
        }

        .requirements-list li {
            margin-bottom: 8px;
            color: var(--gray);
        }

            .panel {
              background: var(--card);
              border-radius: 14px;
              padding: 22px;
              box-shadow: 0 6px 20px rgba(0,0,0,0.45);
              border: 1px solid rgba(255,255,255,0.03);
              text-align: right;
            }

            .form-control, .form-select {
              background: var(--input);
              border: none;
              color: #e6eef8;
              border-radius: 10px;
              padding: 14px 16px;
              box-shadow: none;
            }

            .form-control::placeholder { color: rgba(230,238,248,0.35); }

            .address-box {
              display:flex;
              gap:10px;
              align-items:center;
              padding:10px;
              background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
              border-radius:10px;
              color: white !important;
            }

            .btn-accent {
              background: linear-gradient(135deg, #0d0c2d, #2c0058);
              color:#fff;
              border: none;
              font-weight:600;
              border-radius: 12px;
              padding: 10px 20px;
              box-shadow: 0 6px 18px rgba(212,175,55,0.12);
            }
            .btn-accent:active { transform: translateY(1px); }

            .small-muted { color: var(--muted); font-size: 0.9rem; }

            .note {
              color: var(--muted);
              font-size: 0.88rem;
              margin-top: 12px;
            }

            .alert-min {
              color: var(--danger);
              font-weight:600;
              margin-top:10px;
              font-size:0.95rem;
            }

            /* right panel (receive amount) */
            .receipt {
              background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
              border-radius: 12px;
              padding: 16px;
              min-width: 220px;
              text-align: right;
              border:1px solid rgba(255,255,255,0.02);
            }
            .receipt .amount {
              font-size: 1.4rem;
              font-weight:700;
            }
            .fee { font-size: 0.85rem; color: var(--muted); }

            /* responsive layout */
            @media (min-width: 992px) {
              .main-grid { /*! display: grid; */ grid-template-columns: 1fr 300px; gap: 20px; align-items:start; text-align: right;direction: rtl;background: #ffffff0f;padding: 20px;border-radius: 10px;}
            }

            /* copy toast */
            .copied-toast {
              position: fixed;
              left: 20px;
              bottom: 20px;
              background: rgba(0,0,0,0.6);
              color: #fff;
              padding: 10px 14px;
              border-radius: 8px;
              display:none;
              z-index: 9999;
            }
.panel h4
{
   text-align: right !important;
    display: block !important;
}
.main-grid p, .main-grid label{
    color: white
}
.main-grid input, .main-grid select{
    background: #ffffff24 !important;
    color: black
}
.carddzt
{
    background: #ffffff0a;
    text-align: center;
    color: white;
    direction: rtl;
}.address-box {
  position: relative;
}
.copy-toast {
  position: absolute;
  bottom: -36px;
  left: 10px;
  background: #22c55e;
  color: #042018;
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(34,197,94,0.16);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
  z-index: 50;
  font-weight: 600;
}
.copy-toast.show {
  opacity: 1;
  transform: translateY(0);
}
.form-control[readonly] {
  cursor: pointer;
}    .deposit-confirmation {
      max-width: 500px;
      margin: 0 auto;
      background: linear-gradient(135deg, #1a1f2d 0%, #131722 100%);
      border-radius: 20px;
      padding: 30px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.1);
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .confirmation-header {
      text-align: center;
      margin-bottom: 25px;
    }

    .success-icon {
      width: 70px;
      height: 70px;
      margin: 0 auto 15px;
      background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .success-icon svg {
      width: 35px;
      height: 35px;
      color: white;
    }

    .confirmation-header h3 {
      color: #fff;
      margin: 0 0 15px;
      font-weight: 600;
      font-size: 1.5rem;
    }

    .instruction-text {
      color: #9aa0a6;
      line-height: 1.6;
      margin: 0;
      font-size: 0.95rem;
    }

    .qr-section {
      display: flex;
      justify-content: center;
      margin-bottom: 25px;
    }

    .qr-container {
      position: relative;
      background: white;
      padding: 15px;
      border-radius: 12px;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    .qr-container img {
      width: 180px;
      height: 180px;
      border-radius: 8px;
    }

    .scan-text {
      margin-top: 10px;
      color: #1a1f2d;
      font-weight: 500;
      font-size: 0.9rem;
    }

    .transaction-details {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin-bottom: 25px;
    }

    .detail-chip {
      display: flex;
      align-items: center;
      background: rgba(255, 255, 255, 0.1);
      padding: 10px 15px;
      border-radius: 30px;
      backdrop-filter: blur(10px);
    }

    .detail-chip .label {
      color: #9aa0a6;
      margin-left: 8px;
      font-size: 0.9rem;
    }

    .detail-chip .value {
      color: #fff;
      font-weight: 500;
    }

    .network {
      border: 1px solid rgba(0, 186, 255, 0.3);
    }

    .amount {
      border: 1px solid rgba(0, 200, 83, 0.3);
    }

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

    .file-upload-wrapper {
      margin-bottom: 20px;
    }

    .file-input {
      width: 0.1px;
      height: 0.1px;
      opacity: 0;
      overflow: hidden;
      position: absolute;
      z-index: -1;
    }

    .upload-label {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 25px;
      border: 2px dashed rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.03);
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .upload-label:hover {
      border-color: rgba(0, 186, 255, 0.5);
      background: rgba(0, 186, 255, 0.05);
    }

    .upload-icon {
      margin-bottom: 10px;
    }

    .upload-icon svg {
      width: 30px;
      height: 30px;
      color: rgba(255, 255, 255, 0.5);
    }

    .upload-text {
      color: #fff;
      font-weight: 500;
    }

    .file-name {
      text-align: center;
      margin-top: 10px;
      color: #9aa0a6;
      font-size: 0.85rem;
    }

    .submit-button {
      width: 100%;
      padding: 15px;
      border: none;
      border-radius: 12px;
      background: linear-gradient(135deg, #0d0c2d, #2c0058);
      color: white;
      font-weight: 600;
      font-size: 1rem;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 5px 15px rgba(0, 114, 255, 0.3);
    }

    .submit-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 114, 255, 0.4);
    }

    .submit-button:active {
      transform: translateY(0);
    }

    /* Responsive adjustments */
    @media (max-width: 576px) {
      .deposit-confirmation {
        padding: 20px;
        border-radius: 16px;
      }

      .transaction-details {
        flex-direction: column;
        align-items: center;
      }

      .detail-chip {
        width: 100%;
        justify-content: center;
      }
    }.success-alert {
  width: 100%;
  max-width: 500px;
  margin: 20px auto;
  /*! background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%); */
  color: white;
  border-radius: 12px;
  padding: 1px;
  /*! box-shadow: 0 10px 30px rgba(76, 175, 80, 0.3); */
  /*! animation: slideIn 0.5s ease-out; */
  text-align: center !important;
}

.success-alert::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 12px 12px 0 0;
}

.alert-content {
  /*! display: flex; */
  align-items: center;
  background: white;
  padding: 18px 20px;
  border-radius: 12px;
  position: relative;
  text-align: center;
}

.alert-icon {
  margin-left: 15px;
  flex-shrink: 0;
  width: 42px;
  height: 31px;
  /*! display: flex; */
  align-items: center;
  justify-content: center;
  /*! background: #4CAF50; */
  /*! border-radius: 50%; */
  color: #1ca464;
  margin: auto;
}

.alert-text {
  flex-grow: 1;
  color: #333;
}

.alert-title {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 4px;
  color: #2E7D32;
}

.alert-message {
  font-size: 14px;
  margin: 0;
  color: #555;
}

.alert-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #888;
  margin-right: 5px;
  transition: color 0.2s;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.alert-close:hover {
  background: #f5f5f5;
  color: #333;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.crypto-chart {
  border-radius: 16px;
  padding: 0 13px;
  margin: 20px 0;
  /*! box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-direction: row-reverse
}

.chart-header h2 {
  color: #e2e8f0;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  text-align: right;
}

.timeframe-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: auto;
}

.timeframe-badge {
  background: #3b82f6;
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 500;
  font-size: 0.875rem;
}

.last-update {
  color: #94a3b8;
  font-size: 0.875rem;
}

.price-info-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  background: #1e293b;
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 20px;
}

.price-metric {
  display: flex;
  flex-direction: column;
  text-align: right;
}

.price-metric .label {
  color: #94a3b8;
  font-size: 0.875rem;
  margin-bottom: 4px;
  direction: rtl;
}

.price-metric .value {
  color: #e2e8f0;
  font-weight: 600;
  font-size: 1.125rem;
}

.chart {
  width: 100%;
  height: 600px;
  border-radius: 12px;
  overflow: hidden;
  background: #1e293b;
}

.chart-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  gap: 20px;
}

.candle-info {
  background: #1e293b;
  padding: 16px;
  border-radius: 12px;
  flex: 1;
  margin: 5px 0;
}

.candle-info h4 {
  color: #e2e8f0;
  margin: 0 0 12px 0;
  font-size: 1rem;
}

.candle-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  justify-content: e;
  margin: a;
}

.detail {
  display: flex;
  justify-content: space-between;
  color: #94a3b8;
  flex-direction: row-reverse;
}

.time-remaining {
  background: #1e293b;
  padding: 16px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 200px;
}

.time-remaining span:first-child {
  color: #94a3b8;
  margin-bottom: 8px;
}

#time-remaining {
  color: #3b82f6;
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: 8px;
}

.candle-progress {
  width: 100%;
  background: #334155;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: #3b82f6;
  border-radius: 3px;
  width: 0%;
  transition: width 0.5s ease;
}

.positive {
  color: #10b981 !important;
}

.negative {
  color: #ef4444 !important;
}
.skip-btn {
  position: absolute;
  top: 15px;
  left: 20px;
  font-size: 14px;
  color: #ccc;
  cursor: pointer;
}
.logo {
  margin-top: 40px;
  font-size: 22px;
  font-weight: bold;
}
.logo span {
  color: #00b3ff;
}
.illustration img {
  max-width: 220px;
  margin: 40px auto;
}
.btn-custom {
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
}
.wlco{
    text-align: center;
    width: 100%;
    margin-top: 60px;
}
.wlco h1{
    color: white;
}
.wlco ul{
    display: block;
    text-align: center;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0
}
.wlco a {
  position: relative;
  display: block;
  text-align: center;
  background: #081526; /* inner background */
  padding: 10px;
  margin: 10px 0;
  color: white;
  font-size: 13px;
  border-radius: 20px;
  z-index: 1;
  overflow: hidden;
  transition: 0.3s;
}

/* ✨ gradient border effect */
.wlco a::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px; /* thickness of border */
  border-radius: 34px;
  background: linear-gradient(135deg, #10b981, #3b82f6, #a855f7);
  background-size: 300% 300%;
  animation: borderFlow 5s linear infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}

/* 🌀 subtle animation */
@keyframes borderFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 🌑 first child with dimmer gradient */
.wlco a:nth-child(1) {
  background: #08152600; /* same as yours */
}

.wlco a:nth-child(1)::before {
  background: linear-gradient(135deg, #7eadf0, #430086);
  animation: none; /* no animation for first child */
}

.preloader
{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left:0 ;
background-color: #060617;
z-index: 99999999999999999999;

}
.preloaders
{
text-align: center;
margin: 250px 0;
}
@media (min-width: 768px) {
    .container{
    }

  #external-sidebar {
    right: 0 !important;
  }
  #sidebarToggle {
  }
  #main-content {
    margin-right: 250px;
  }
}  #external-sidebar {
    width: 308px;
    background: linear-gradient(to left, #0e0c2e, #02010d);
    color: white;
    position: absolute;
    right: -303px !important; /* مخفي خارج الشاشة */
    top: 0;
    transition: right 0.3s ease-in-out;
    z-index: 1000;
    padding-bottom: 40px !important;
  }

  #external-sidebar.sidebar-open {
    right: 0 !important; /* يظهر */
  }


@media (max-width: 600px) {
    #sidebarToggle
    {
        /*! position:absolute; */
        top:11px;
        left:15px;
        z-index: 999999999999999999999;
        background: linear-gradient(135deg, #2b2a5e, #2c0058);
        color: white;
        border: unset;
    }
    .navbar {
        padding: 0 !important;
    }
    #external-sidebar a span
    {
        display: block !important;
    }
    .userspace
    {
      display: block !important;
      text-align: center !important;
    }
    .chart-container
    {
        width: 100% !important;
    }
    .chart-container .tv-lightweight-charts{
        width: 100% !important;
    }
}
.actives a{
    background: #f43c3c !important;
    /*! border: 1px solid  !important; */
    padding: 6px !important;
    text-align: center !important;
    margin: 0px 10px !important;
    border-radius: 10px;
    display: block;
    font-size: 14px;
    color: white;
}
.social-icons .icon-box {
  width: 30px;
  height: 30px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  transition: transform .2s ease, box-shadow .2s ease;
  margin: 5px;
  padding: 17px !important;
}
.social-icons .icon-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}
/* Custom brand colors */
.youtube   { background: #ff0000; color: #fff; }
.instagram { background: linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4); color: #fff; }
.facebook  { background: #1877f2; color: #fff; }
.twitter   { background: #000;    color: #fff; } /* X/Twitter black */
.threads   { background: #eee;    color: #000 !important; }
.aboutus {
  /*! background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); */
  overflow: hidden;
  color: white;
  margin-bottom: 190px;
}

.section-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: #222;
  position: relative;
}

.section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  margin-top: 10px;
  border-radius: 2px;
}

.about-content p {
  font-size: 1.1rem;
  line-height: 1.7;
}

.about-img-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
}

.about-img-wrapper img {
  transition: transform 0.6s ease;
}

.about-img-wrapper:hover img {
  transform: scale(1.05);
}
.promo-card{
  max-width: 760px;
  margin: 18px auto;
  background: var(--card-bg);
  border-radius: 22px;
  box-shadow: 0 14px 35px rgba(10,20,40,0.18);
  overflow: hidden;
  background: #ffffff1a;
  direction: rtl;
}

.promo-top{
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 34px 24px 0;
}

.promo-top img{
  width: 320px; /* adjust as needed */
  max-width: 86%;
  height: auto;
  display:block;
}

.promo-body{
  padding: 16px 36px 28px;
  text-align: right;
}

.promo-title{
  font-weight:700;
  font-size: 28px;
  color: var(--primary-dark);
  margin-top: 6px;
  line-height:1.1;
}

.promo-sub{
  display:block;
  font-weight:500;
  font-size:18px;
  color: var(--muted);
  margin-top:6px;
  margin-bottom: 14px;
}

.divider{
  width: 88%;
  height: 1px;
  background: rgba(22,36,59,0.06);
  margin: 0 auto 14px;
}

.rules{
  text-align: right;
  direction: rtl;
  padding: 10px 6px;
}

.rules h6{
  font-weight:700;
  margin-bottom:8px;
  color: var(--primary-dark);
  font-size:18px;
}

.rules ol{
  padding-left: 14px;
  margin: 0 0 10px;
  list-style: none;
}

.rules ol li{
  position: relative;
  padding: 10px 10px 10px 36px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: transparent;
  color: #334155;
  font-size: 15px;
  text-align: right;
}

/* small bullet number circle on the left (visual on RTL layout becomes left) */
.rules ol li::before{
  content: counter(item);
  counter-increment: item;
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width:28px;
  height:28px;
  line-height:28px;
  text-align:center;
  border-radius:50%;
  background: var(--primary-dark);
  color: #fff;
  font-weight:600;
  font-size:14px;
}
.rules ol{counter-reset: item;}

.bullet-list{
  text-align: right;
  margin-top:10px;
  font-size:15px;
  color:#334155;
}

.note{
  font-size:13px;
  color: #475569;
  margin-top:10px;
  text-align: right;
}

.cta-wrap{
  padding: 22px 36px 36px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.btn-cta{
  background: var(--primary-dark);
  color:#fff;
  border-radius: 18px;
  padding: 12px 36px;
  font-size: 14px;
  font-weight:600;
  box-shadow: 0 8px 18px rgba(22,36,59,0.18);
  border: none;
}

/* smaller screens */
@media (max-width:576px){
    video
    {
        height: 100% !important;
    }
    .promo-body
    {
        padding: 10px 10px;
        text-align: right
    }
    .chart-footer
    {
        display: block;
        margin: 10px 0 !important;

    }
    #sidebarToggle
    {
        /*! display: none */
    }
    .crypto-chart
    {
        /*! margin-top: 80px */
    }
  .promo-card{ margin: 10px; border-radius: 16px;}
  .promo-title{ font-size:22px;}
  .promo-sub{ font-size:15px;}
  .promo-top img{ width: 260px;}
  .btn-cta{ padding:10px 22px; font-size:16px;}
}
.userspace p{
    display: block !important;;
    text-align: center !important;
    direction: rtl;
}
#sidebarToggle{
    /*! position: absolute!important; */
    margin-top: 9px;
    margin-right: 20px;
    background: #280252;
    color: white;
    border: unset;
    float: right;
    margin-left: auto;
}

.navbar{
    padding: 0 !important;
}
.wlco
{
    margin-top:80px !important;
}
.wlco img{
    margin: 20px 0;
    width: 50%
}
.asr
{
    text-align: center;
    margin-top: 40px
}
.asr a{
    background: white;
    padding: 8px 126px;
    border-radius: 10px;
    color: white;
}
.asr .but
{
    background: #18915e;
}
.asr .sell{
    background: #ce2828;
}
#external-sidebar {
  position: fixed;
  top: 0;
  right: -300px;
  width: 286px;
  height: 100vh;
  background: #0e0c2e;
  color: white;
  transition: right 0.3s ease;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: -3px 0 10px rgba(0,0,0,0.4);
  padding: 12px;
  z-index: 98888888888888888;
}
#external-sidebar.sidebar-open {
  right: 0;
}
#sidebarBack {
  position: absolute;
  top: 8px;
  right: 15px;
  background: transparent;
  color: white;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
}
.social-icons .icon-box i {
  font-size: 20px;
  color: white;
  transition: 0.2s;
}
.social-icons .icon-box:hover i {
  color: #38bdf8;
  transform: scale(1.1);
}
.share-space
{
    text-align: center;
    justify-content: center;
    margin-top: 20px !important;
}
.share-space .btn{
    padding: 5px 10px;
    margin: 0px 5px !important;
}
a:hover{
  text-decoration: none;
}
.phone-box {
  display: flex;
  align-items: center;
  background: #0d1330;
  border: 1px solid #1f2a44;
  border-radius: 10px;
  overflow: hidden;
  height: 45px;
  transition: 0.3s;
}

.country-select {
  background: #434253;
  border: none;
  color: #fff;
  font-size: 14px;
  padding: 0 10px;
  height: 100%;
  appearance: none;
  border-left: 1px solid #626a7d;
  cursor: pointer;
  border-radius: 0 !important;
}

.country-select option {
  background: #0d1330;
  color: #fff;
  padding: 6px;
}

.phone-input {
  flex: 1;
  border: none;
  outline: none;
  background: #444356;
  color: #fff;
  padding: 0 12px;
  font-size: 15px;
  height: 100%;
}

.phone-input::placeholder {
  color: #94a3b8;
}

.phone-box:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 8px rgba(59,130,246,0.4);
}