/* Existing Styles from Your File */
/* body {
    margin: 0;
    background: #1a73e8 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120" preserveAspectRatio="none"><path d="M0 0L60 10C120 20 240 40 360 45C480 50 600 40 720 30C840 20 960 10 1080 15C1200 20 1320 40 1380 50L1440 60V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0V0Z" fill="rgba(255,255,255,0.5)"/></svg>') no-repeat top center;
    background-size: 100% auto;
    background-position: top;
    height: 100vh;
} */
body {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #333; /* Adjusted for readability */
    background: #fff;
    height: 100vh;
}

.help-popup {
    position: fixed;
    right: 20px;
    bottom: 20%;
    transform: translateY(50%);
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.3s;
}

.help-popup:hover {
    background-color: #FFC107;
}

.help-popup i {
    font-size: 20px;
}

/* Get Started Section */
.get-started {
    background-color: #f8f9fa;
    padding: 50px 0;
}

.section-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
}


.crypto-table {
    width: 100%;
    padding: 0 10px;
}

.crypto-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    flex-wrap: nowrap;
}

.crypto-row.table-header {
    font-weight: bold;
    background-color: #f5f5f5;
}

.crypto-row > div {
    flex: 1;
    text-align: center;
    padding: 0 5px;
    min-width: 0;
}

.crypto-row .d-flex {
    justify-content: center;
    flex: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.crypto-icon {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.chart-container {
    flex: 1;
    min-width: 60px;
}

.trade-btn {
    flex: 0.8;
    padding: 5px 10px;
    font-size: 14px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
}

.price-change.positive {
    color: green;
}

.price-change.negative {
    color: red;
}

.crypto-row.table-header > div {
    color: #333;
}

.crypto-row .d-flex,
.crypto-row > div:nth-child(2),
.crypto-row > div:nth-child(5) {
    color: #333;
}

@media (max-width: 768px) {
    .crypto-row {
        flex-wrap: nowrap;
        padding: 5px 0;
    }

    .crypto-row > div {
        display: none;
    }

    .crypto-row .d-flex,
    .crypto-row > div:nth-child(2),
    .crypto-row > div:last-child {
        display: block;
        flex: 1;
        text-align: center;
    }

    .crypto-row .d-flex {
        flex: 2;
    }

    .crypto-row > div:nth-child(2) {
        flex: 1;
    }

    .crypto-row > div:last-child {
        flex: 1;
        text-align: center;
    }

    .chart-container,
    .crypto-row > div:nth-child(4),
    .crypto-row > div:nth-child(5) {
        display: none;
    }

    .crypto-row.table-header > div {
        display: none;
    }

    .crypto-row.table-header > div:nth-child(1),
    .crypto-row.table-header > div:nth-child(2),
    .crypto-row.table-header > div:last-child {
        display: block;
        flex: 1;
        text-align: center;
    }

    .crypto-row.table-header > div:nth-child(1) {
        flex: 2;
    }

    .crypto-row.table-header > div:nth-child(2) {
        flex: 1;
    }

    .crypto-row.table-header > div:last-child {
        flex: 1;
    }

    .trade-btn {
        padding: 5px;
        font-size: 12px;
    }
}

.reset-card, .verification-card, .login-card, .register-card {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    color: #343a40;
}

.x-application-logo {
    display: block;
    margin: 0 auto 20px;
    width: 80px;
    height: 80px;
}

.content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.form-control:focus {
    background-color: transparent;
    border-color: rgba(156, 156, 156, 0.8);
    box-shadow: none;
}

.form-control::placeholder {
    color: rgba(0, 0, 0, 0.5);
}

.form-control {
    padding: 12px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    border-color: #ced4da;
    color: #495057 !important;
}

.btn-custom {
    background-color: #007bff;
    border-color: #006ee4;
    color: white;
    padding: 12px 20px;
    width: 100%;
    border-radius: 4px;
    font-size: 16px;
    transition: all ease 0.3s;
}

.btn-custom:hover {
    background-color: #0056b3;
    border-color: #004085;
}

.custom-bg {
    background-color: #007bff !important;
    border-color: #006ee4 !important;
    color: white !important;
}

.custom-card {
    background-color: #006ee4 !important;
    color: white !important;
}

a {
    color: #007BFF;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.x-label {
    color: #333;
}

.text-message, .text-instruction {
    font-size: 1rem;
    color: #333;
}

.logout-link {
    text-decoration: underline;
    color: #007BFF;
}

.logout-link:hover {
    text-decoration: none;
}

.drop-zone {
    border: 2px dashed #6c757d;
    border-radius: 5px;
    padding: 20px;
    text-align: center;
    color: #000000;
    cursor: pointer;
}

.drop-zone.dragover {
    border-color: #198754;
    color: #198754;
}

/* New Styles for Remaining Elements */


/* Container Fluid */
.container-fluid.content-inner {
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    margin-top: 20px;
}

/* Alerts */
.alert {
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    font-size: 14px;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

.alert .btn-close {
    padding: 0;
    background: none;
    border: none;
    font-size: 16px;
    line-height: 1;
    opacity: 0.6;
}

.alert .btn-close:hover {
    opacity: 1;
}

/* Balance Cards Container */
.balance-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Consistent gap between cards */
    justify-content: center;
    max-width: 1200px; /* Consistent container width */
    margin: 0 auto 20px auto; /* Add bottom margin to separate from step cards */
}

/* Balance Card */
.balance-card {
    display: block;
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    width: 220px; /* Fixed width for equality */

}

.balance-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Space between icon, name, and balance */
    height: 100%; /* Ensure content fills card */
}

.balance-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
    background: #f8f9fa;
}

/* Icon Styling for Balance Card */
.balance-card img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Text Styling for Balance Card */
.balance-card h4 {
    font-size: 15px;
    font-weight: bold;
    margin: 0; /* Remove margin for inline alignment */
}

.balance-card p {
    font-size: 15px;
    font-weight: 500;
    margin: 0; /* Remove margin for inline alignment */
}

/* Step Cards Container */
.row.justify-content-center {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping for consistency */
    gap: 20px; /* Match balance-inline gap */
    justify-content: center;
    max-width: 1200px; /* Consistent container width */
    margin: 0 auto; /* Center with no overlap */
}

/* Step Card */
.step-card {
    display: block;
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    position: relative;
    width: 220px; /* Match balance-card width exactly */
    height: 100px; /* Match balance-card height */
}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
    background: #f8f9fa;
}

.step-number {
    position: absolute;
    top: -10px;
    left: 10px;
    background: #d9e2f3;
    color: #333;
    font-weight: 700;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 50%;
}

.step-icon {
    font-size: 24px; /* Match balance-card icon size */
    color: #007bff;
    margin-bottom: 5px;
}

.step-card h4 {
    font-size: 15px; /* Match balance-card h4 */
    font-weight: bold;
    margin-bottom: 0;
}

.step-card p {
    font-size: 12px;
    color: #666;
    margin-bottom: 0;
}
/* Card General Styles */
.card {
    background: #fff;
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-bottom: 20px;
}

.card-header {
    background: #007bff !important;
    color: #fff !important;
    padding: 15px 20px !important;
    border-bottom: none !important;
}

.card-header h4 {
    font-size: 18px;
    margin: 0;
}

.card-header p {
    font-size: 14px;
    margin: 5px 0 0;
}

.card-body {
    padding: 20px;
}

/* Crypto Content */
.crypto-content {
    padding: 0;
}

/* TradingView Chart Container */
#tradingview-candlestick-chart {
    margin-bottom: 20px;
}

.table-dark {
    background: #343a40;
    color: #fff;
    border-radius: 8px;
}

.table-dark th,
.table-dark td {
    border-color: #454d55;
    padding: 12px;
    font-size: 14px;
}

/* Withdraw Section Specific Styles */
main {
    flex: 1;
    padding: 0;
}

h2.text-center {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.text-center.mb-4 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.text-center.mb-4 h5 {
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    color: #666;
}

.text-center.mb-4 h4 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: #007bff;
}

/* Navigation Pills */
.nav-pills {
    background: #fff;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.nav-pills .nav-link {
    background: #e9ecef;
    color: #333;
    border-radius: 20px;
    padding: 8px 15px;
    margin: 0 5px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.nav-pills .nav-link.active {
    background: #007bff;
    color: #fff;
}

.nav-pills .nav-link:hover:not(.active) {
    background: #dee2e6;
}

/* Container Deposit */
.ContainerDeposit {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    padding: 20px;
}

/* Tab Content */
.tab-content {
    padding: 0;
}

.tab-pane {
    padding: 0;
}

/* Card for Forms */
.content-container {
    background: #fff;
    border: none;
    box-shadow: none; /* Shadow handled by ContainerDeposit */
    padding: 20px;
}

/* Form Elements */
.form-label {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 5px;
}

.form-select,
.form-control {
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: #fff;
    color: #495057;
    font-size: 14px;
}

.form-control:focus,
.form-select:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

.input-group-text {
    background: #f8f9fa;
    border-color: #ced4da;
    color: #495057;
    font-size: 14px;
}

.text-danger {
    font-size: 12px;
    margin-top: 5px;
}

/* Submit Button */
.btn-equal {
    background: #007bff;
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 4px;
    transition: background 0.3s ease;
    width: auto;
}

.btn-equal:hover {
    background: #0056b3;
}
/* Fixed Size News Section */
#crypto-news-section {
    width: 100%;
    max-width: 800px;  /* Adjust as needed */
    height: 200px;      /* Fixed height */
    margin: 20px auto;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 10px;
    overflow: hidden;   /* Prevents scrolling */
}

/* News Container */
.news-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px;
}

/* News Card Styling */
.news-card {
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    transform: translateX(-100%); /* Start position */
    opacity: 0;
    animation: slide-in 0.8s ease-out forwards;
}

/* Slide-in Animation */
@keyframes slide-in {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Apply a delay to each card */
.news-card:nth-child(1) { animation-delay: 0.2s; }
.news-card:nth-child(2) { animation-delay: 0.4s; }
.news-card:nth-child(3) { animation-delay: 0.6s; }
.news-card:nth-child(4) { animation-delay: 0.8s; }
.news-card:nth-child(5) { animation-delay: 1s; }

/* Responsive Fix for Mobile */
@media (max-width: 768px) {
    #crypto-news-section {
        width: 95%;
        padding: 10px;
        margin: 10px auto;
        height: auto; /* Let height adjust for smaller screens */
    }

    .news-container {
        gap: 10px;
    }
}



.news-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 100%;
    height: 100%;
}

.news-card h4 {
    font-size: 18px;
    font-weight: bold;
    color: #007bff; /* Blue like step-card */
    margin-bottom: 5px;
}

.news-card p {
    font-size: 14px;
    color: #666;
    margin-bottom: 0;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .container-fluid.content-inner {
        padding: 15px;
    }

    .get-started {
        padding: 30px 0;
    }

    .row.justify-content-center {
        flex-wrap: wrap; /* Allow wrapping on small screens */
        gap: 15px;
    }

    .step-card {
        margin-bottom: 15px;
        padding: 15px;
    }

    .step-icon {
        font-size: 30px;
    }

    .step-card h4 {
        font-size: 14px;
    }

    .step-card p {
        font-size: 11px;
    }

    .balance-display {
        flex-direction: column;
        padding: 10px;
    }

    .balance-display h3 {
        font-size: 16px;
        margin-bottom: 5px;
    }

    .balance-display h2 {
        font-size: 20px;
    }

    h2.text-center {
        font-size: 20px;
    }

    .text-center.mb-4 h5 {
        font-size: 14px;
    }

    .text-center.mb-4 h4 {
        font-size: 18px;
    }

    .nav-pills {
        padding: 5px;
    }

    .nav-pills .nav-link {
        padding: 6px 12px;
        font-size: 12px;
        margin: 5px 0;
    }

    .ContainerDeposit {
        padding: 15px;
    }

    .balance-inline {
        flex-direction: column;
        align-items: center;
    }

    .balance-card {
        width: 90%;
        max-width: 300px;
    }

    .balance-content {
        gap: 6px;
    }

    .balance-icon {
        width: 24px;
        height: 24px;
    }

    .balance-card h4 {
        font-size: 15px;
    }

    .balance-card p {
        font-size: 15px; /* Slightly smaller but still larger than original */
    }
}

@media (max-width: 576px) {
    .balance-display h3 {
        font-size: 14px;
    }

    .balance-display h2 {
        font-size: 18px;
    }

    h2.text-center {
        font-size: 18px;
    }

    .text-center.mb-4 h5 {
        font-size: 12px;
    }

    .text-center.mb-4 h4 {
        font-size: 16px;
    }

    .card-header h4 {
        font-size: 16px;
    }

    .card-header p {
        font-size: 12px;
    }

    .balance-inline {
        gap: 8px;
        padding: 6px;
    }

    .balance-card {
        padding: 6px;
    }

    .balance-content {
        gap: 4px;
    }

    .balance-icon {
        width: 24px;
        height: 24px;
    }

    .balance-card h4 {
        font-size: 15px;
    }

    .balance-card p {
        font-size: 15px; /* Adjusted for small screens */
    }

}