/* login page page */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #1a1a1a;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.login-box {
    background-color: #2b2b2b;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 400px;
}

.profile-icon img
{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid #ffd700;
    margin-bottom: 20px;
}

h2 {
    color: #ffd700;
    margin-bottom: 20px;
}

.input-group {
    margin-bottom: 20px;
}

.input-group label {
    color: white;
    display: block;
    text-align: left;
    margin-bottom: 8px;
}

.phone-input {
    display: flex;
    align-items: center;
    background-color: #3b3b3b;
    border-radius: 5px;
    padding: 10px;
}

.phone-input span {
    color: #ffd700;
    margin-right: 10px;
}

.phone-input input {
    width: 100%;
    padding: 10px;
    border: none;
    outline: none;
    background-color: transparent;
    color: #fff;
    font-size: 16px;
}

.input-group input[type="password"] {
    width: 100%;
    padding: 10px;
    background-color: #3b3b3b;
    border: none;
    outline: none;
    border-radius: 5px;
    color: white;
    font-size: 16px;
}

button[type="submit"] {
    width: 100%;
    padding: 12px;
    background-color: #ffd700;
    border: none;
    border-radius: 5px;
    color: #000;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: 10px;
}

button[type="button"] {
    width: 45%;
    padding: 10px;
    background-color: #3b3b3b;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

.account-options {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

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

.contact-options div {
    display: flex;
    align-items: center;
}

.contact-options img {
    width: 30px;
    margin-right: 10px;
}

.contact-options span {
    color: #ffd700;
    font-size: 16px;
}

.whatsapp {
    background-color: #3b3b3b;
    padding: 10px;
    border-radius: 5px;
    width: 100%;
    cursor: pointer;
}

.telegram {
    background-color: #3b3b3b;
    padding: 10px;
    border-radius: 5px;
    width: 48%;
    cursor: pointer;
}




/* register page */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #1a1a1a;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.login-box {
    background-color: #2b2b2b;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    width: 85%;
    max-width: 350px;
}

.profile-icon img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid #ffd700;
    margin-bottom: 15px;
}

h2 {
    color: #ffd700;
    margin-bottom: 15px;
    font-size: 18px;
}

.input-group {
    margin-bottom: 15px;
}

.input-group label {
    color: white;
    display: block;
    text-align: left;
    margin-bottom: 8px;
    font-size: 12px;
}

.phone-input {
    display: flex;
    align-items: center;
    background-color: #3b3b3b;
    border-radius: 5px;
    padding: 8px;
}

.phone-input span {
    color: #ffd700;
    margin-right: 8px;
    font-size: 12px;
}

.phone-input input {
    width: 100%;
    padding: 8px;
    border: none;
    outline: none;
    background-color: transparent;
    color: #fff;
    font-size: 12px;
}

.input-group input[type="password"] {
    width: 100%;
    padding: 8px;
    background-color: #3b3b3b;
    border: none;
    outline: none;
    border-radius: 5px;
    color: white;
    font-size: 12px;
}

button[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #ffd700;
    border: none;
    border-radius: 5px;
    color: #000;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    margin-bottom: 10px;
}

.already-account {
    color: white;
    margin-top: 15px;
    margin-bottom: 5px;
    font-size: 12px;
}

.sign-in-btn {
    width: 100%;
    padding: 10px;
    background-color: #3b3b3b;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    margin-bottom: 15px;
}

.contact-options {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.contact-options div {
    display: flex;
    align-items: center;
}

.contact-options img {
    width: 30px;
    margin-right: 10px;
}

.contact-options span {
    color: #ffd700;
    font-size: 12px;
}

.whatsapp {
    background-color: #3b3b3b;
    padding: 8px;
    border-radius: 5px;
    width: 100%;
    cursor: pointer;
    margin-right: 5px;
}

.telegram {
    background-color: #3b3b3b;
    padding: 8px;
    border-radius: 5px;
    width: 100%;
    cursor: pointer;
    margin-left: 5px;
}




/* reseet password page */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #1a1a1a;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.login-box {
    background-color: #2b2b2b;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 400px;
}

.profile-icon img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid #ffd700;
    margin-bottom: 20px;
}

h2 {
    color: #ffd700;
    margin-bottom: 20px;
}

.input-group {
    margin-bottom: 20px;
}

.label {
    color: white;
}

.phone-input {
    display: flex;
    align-items: center;
    background-color: #3b3b3b;
    border-radius: 5px;
    padding: 10px;
    margin-top: 10px;
}

.phone-input span {
    color: #ffd700;
    margin-right: 10px;
}

.phone-input input {
    width: 100%;
    padding: 10px;
    border: none;
    outline: none;
    background-color: transparent;
    color: #fff;
    font-size: 16px;
}

.input-group label {
    color: #fff;
}

button[type="submit"] {
    width: 100%;
    padding: 12px;
    background-color: #ffd700;
    border: none;
    border-radius: 5px;
    color: #000;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: 10px;
}

p.login-link {
    color: #ffd700;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
}


/* home page1 page css */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #1a1a1a; /* Black background */
    color: white;
}

.header {
    background-color: #ffd700; /* Golden header */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    color: black;
}

.menu-btn {
    background: none;
    border: none;
    font-size: 20px;
    color: black;
    cursor: pointer;
}

.header h1 {
    font-size: 20px;
    font-weight: bold;
}

.header-icons {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-icon {
    background: none;
    border: none;
    font-size: 18px;
    color: black;
    cursor: pointer;
}

.wallet-section {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 18px;
    color: black;
}

.wallet-section i {
    font-size: 20px;
}

.news-ticker {
    background-color: #333;
    color: #ffd700;
    padding: 10px;
    font-size: 14px;
    text-align: center;
}

.user-info {
    background-color: #333; /* Dark background for user info */
    color: #ffd700; /* Golden text */
    padding: 10px;
    border-radius: 8px;
    margin: 20px;
    text-align: center;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    font-size: 16px;
}

.home-container {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Section Titles */
.section-title {
    font-size: 20px;
    color: #ffd700;
    margin-bottom: 10px;
}

/* Result Boxes for Live Results */
.result-box {
    background-color: #333;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    text-align: center;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.result-box h3 {
    color: #ffd700;
    font-size: 18px;
}

.result-box p {
    color: white;
}

/* Game Boxes for Live Games */
.game-box {
    background-color: #444;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    text-align: center;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.game-box h3 {
    color: #ffd700;
    font-size: 18px;
}

.game-box p {
    color: white;
}

/* Upcoming Game Boxes */
.upcoming-box {
    background-color: #555;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    text-align: center;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.upcoming-box h3 {
    color: #ffd700;
    font-size: 18px;
}

.upcoming-box p {
    color: white;
}


/* home page page */

body {
    font-family: Arial, sans-serif;
    background-color: #1a1a1a;
    color: white;
}

.header {
    background-color: #2d2d2d;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app-title {
    font-size: 20px;
    color: gold;
    font-weight: bold;
}

.wallet-section {
    display: flex;
    align-items: center;
    color: gold;
}

.wallet-section i {
    margin-right: 5px;
}

.user-info {
    background-color: #333;
    padding: 15px;
    margin: 10px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.action-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.action-btn {
    background-color: gold;
    color: black;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.offer-banner img {
    width: 100%;
    height: auto;
    margin: 15px 0;
}

.section {
    margin: 20px 10px;
}

.result-box, .game-box {
    background-color: #444;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.game-logo {
    background-color: gold;
    color: black;
    font-weight: bold;
    font-size: 24px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

.result-info h3 {
    color: gold;
}

.play-btn, .wait-btn {
    background-color: gold;
    color: black;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.result-value {
    background-color: gold;
    color: black;
    font-size: 24px;
    padding: 10px;
    border-radius: 50%;
}

.live-announcement {
    background-color: #2d2d2d;
    color: gold;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 8px;
    position: absolute;
    top: -15px;
    left: 50px;
}

.upcoming-games-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/* wallet page */
body {
    font-family: Arial, sans-serif;
    background-color: #1a1a1a;
    color: white;
    font-size: 14px; /* Made the text smaller */
}

.header {
    background-color: #2d2d2d;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app-title {
    font-size: 18px; /* Reduced the font size for the title */
    color: gold;
    font-weight: bold;
}

.wallet-balance {
    display: flex;
    align-items: center;
    color: gold;
    font-size: 16px; /* Reduced wallet balance size */
}

.wallet-balance i {
    margin-right: 5px;
}

.wallet-actions {
    display: flex;
    justify-content: space-around;
    padding: 15px;
    margin: 10px 0;
}

.wallet-action-box {
    background-color: #444;
    padding: 10px; /* Reduced padding for compact design */
    border-radius: 8px;
    width: 40%; /* Reduced width for better presentation */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px; /* Reduced gap between icon and text */
    cursor: pointer;
}

.wallet-action-box i {
    font-size: 24px; /* Reduced icon size */
    color: gold;
}

.action-info h3 {
    color: gold;
    font-size: 16px; /* Made heading smaller */
}

.action-info p {
    color: white;
    font-size: 12px; /* Made paragraph text smaller */
}

.section {
    margin: 15px 10px; /* Reduced margin for more compact layout */
}

.transaction-box {
    background-color: #444;
    padding: 10px; /* Reduced padding for transactions */
    border-radius: 8px;
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* Reduced margin between transaction boxes */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.transaction-box i {
    font-size: 24px; /* Reduced icon size for transactions */
    color: gold;
    margin-right: 10px; /* Adjusted margin for better alignment */
}

.transaction-info h3 {
    color: gold;
    font-size: 16px; /* Reduced transaction heading size */
}

.transaction-info p {
    color: white;
    font-size: 12px; /* Reduced transaction details text size */
}

/*help page*/





body {
    font-family: Arial, sans-serif;
    background-color: #1a1a1a;
    color: white;
    font-size: 14px; /* Kept the smaller text from previous updates */
}

.header {
    background-color: #2d2d2d;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app-title {
    font-size: 18px; /* Reduced the font size for the title */
    color: gold;
    font-weight: bold;
}

.contact-options {
    margin: 15px 10px; /* Reduced margin for more compact sections */
}

.contact-box {
    background-color: #444;
    padding: 10px; /* Reduced padding to make the sections smaller */
    border-radius: 8px;
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* Reduced margin between contact boxes */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.contact-box i {
    font-size: 30px; /* Icons for WhatsApp, Telegram, and Call */
    margin-right: 15px;
}

.contact-box .fab.fa-whatsapp {
    color: #25D366; /* Original WhatsApp green */
}

.contact-box .fab.fa-telegram-plane {
    color: #0088cc; /* Original Telegram blue */
}

.contact-box .fas.fa-phone {
    color: #34b7f1; /* Light blue for the phone icon */
}

.contact-info h3 {
    color: gold;
    font-size: 16px; /* Smaller heading for contact options */
}

.contact-info p {
    color: white;
    font-size: 12px; /* Made the contact numbers a bit smaller */
}

/* bid history page */

body {
    font-family: Arial, sans-serif;
    background-color: #1a1a1a;
    color: white;
    font-size: 14px; /* Kept the smaller text from previous updates */
}

.header {
    background-color: #2d2d2d;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app-title {
    font-size: 18px;
    color: gold;
    font-weight: bold;
}

.wallet-balance {
    display: flex;
    align-items: center;
    color: gold;
}

.wallet-balance i {
    margin-right: 5px;
}

.bid-history {
    margin: 20px 10px;
}

.bid-box {
    background-color: #444;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    flex-direction: column; /* Stack logo and info vertically */
    align-items: center; /* Center the logo */
    margin-bottom: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.game-logo {
    background-color: gold;
    color: black;
    font-weight: bold;
    font-size: 24px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px; /* Space between logo and text */
}

.bid-info h3 {
    color: gold;
    font-size: 16px;
    text-align: center;
}

.bid-info p {
    color: white;
    font-size: 12px;
    text-align: center; /* Align the bid info text in center */
}