@font-face {
    font-family: ProximaNova;
    src: url('../fonts/ProximaNova-Regular.woff') format("opentype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: ProximaNova;
    src: url('../fonts/ProximaNova-Medium.woff') format("opentype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: ProximaNova;
    src: url('../fonts/ProximaNova-Semibold.woff') format("opentype");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: ProximaNovaBold;
    src: url('../fonts/ProximaNova-Bold.woff') format("opentype");
    font-weight: 700;
    font-style: normal;
}

:root {
    --text-color: #5d615d;
    --primary-color: #00870e;
}

button:focus,
select:focus {
    outline: none;
    cursor: pointer;
}

input:focus, .form-control:focus, select:focus, .form-box input:focus, .form-box textarea:focus {
    outline: 1px solid #00870E;
    accent-color: #00870e;
}

input::placeholder, textarea::placeholder {
    color: #6B6B6B;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 22.4px;
    letter-spacing: 0.08em;
}
/* .form-group {

} */
.form-control, .form-control option {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 22.4px;
    letter-spacing: 0.08em;
}

    .form-control:focus {
        border-color: #00870E; /* Custom outline */
        box-shadow: none !important; /* Override Bootstrap's default shadow */
    }
/* Remove focus styles for checkboxes */
input[type="checkbox"]:focus {
    outline: none; /* Remove outline */
    box-shadow: none; /* Remove shadow */
    border: none; /* Remove border */
}

/* Remove visual effects when the checkbox is checked */
input[type="checkbox"]:checked {
    outline: none; /* No outline */
    box-shadow: none; /* No shadow */
    border: none; /* No border */
    background-color: transparent; /* No background color */
}

/* For Bootstrap select components */
.custom-select:focus {
    outline: 2px solid #00870E !important; /* Custom outline */
    box-shadow: none !important; /* Remove shadow */
}

a, .item-text {
    text-decoration: none;
}

.pointer {
    cursor: pointer;
}

.no-border {
    border: none;
}

.form-check input[type="checkbox"] {
    width: fit-content;
}

/* Chrome, Safari, Edge, and Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.centered-screen {
    width: 100vw;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

html {
    max-width: 3500px;
    margin: 0 auto;
}

body {
    font-family: ProximaNova !important;
    background-color: #f5f5f5;
    color: var(--text-color);
    min-height: 100dvh;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
}

.font-bold {
    font-family: ProximaNovaBold !important;
}

.body > aside,
.body > #main {
    padding-top: 94px !important;
}

#main {
    padding-left: 1rem;
    padding-right: 1rem;
}

.desktop-hidden {
    display: none;
}

#state-marquee {
    overflow: hidden;
    /* width: 95vw; */
    /* border: solid 2px; */
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

header {
    border-bottom: 1px solid #e9e9eb;
    position: fixed;
    width: 100vw;
    top: 0;
    z-index: 50;
}

#mobile-menu {
    left: 0;
    width: 100vw;
    overflow: hidden;
}

    #mobile-menu button {
        background-color: transparent;
        display: flex;
        flex-direction: column;
        gap: 1px;
        align-items: center;
        justify-content: center;
        outline: none;
        border: none;
        width: fit-content;
        height: fit-content;
    }

    #mobile-menu a {
        display: flex;
        flex-direction: column;
        gap: 0px;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        word-break: normal;
        white-space: nowrap;
    }

.w-20 {
    width: 100%;
    flex-basis: 20%;
    margin-left: 0.2rem;
    margin-right: 0.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

#mobile-menu img {
    height: 20px;
    width: 20px;
    object-fit: contain;
}

#mobile-menu a span,
#mobile-menu button span {
    margin-top: 0;
    font-weight: 600;
    font-size: 12px;
    line-height: 19.2px;
    text-align: center;
    color: #112811;
}

#mobile-menu .mobile-menu-container {
    width: 16.67%;
}


#sidebar {
    z-index: 49;
    position: fixed;
    width: 19%;
    overflow-y: scroll;
    top: 0;
    bottom: 0;
    overflow-x: hidden;
    transition: 0.5s;
    padding: 16px;
    padding-top: 5.5rem;
    padding-bottom: 5rem;
    /* left: -1000px; */
}

#main {
    position: relative;
    padding-top: 5.5rem;
    transition: 0.5s;
    /* flex: 1; */
    width: 81%;
    left: 19%;
    background-color: #f5f5f5;
    /* margin-left: 250px; */
}

#sidebar .ad {
    border-radius: 20px;
    margin-bottom: 12px;
    display: block;
    width: 100%;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f5f5f5;
    border: 1px solid #e9e9eb;
    padding: 8px;
    border-radius: 50px;
    margin-bottom: 12px;
    text-decoration: none;
}

    .sidebar-item .filter-theme-categories {
        padding: 0.4rem;
        border-radius: 2rem;
        font-size: 0.75rem;
        cursor: pointer;
    }

.sidebar-active {
    background: linear-gradient(90deg, #F2F8F4 0%, #DFEAE2 100%);
    /* border: 1px solid #00870E; */
    border-color: #00870E;
}

.active .item-text {
    color: #00870E;
}

.active .active-span {
    background-color: white;
}

.sidebar-item .item-text {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    text-align: left;
    color: var(--text-color);
    text-decoration: none;
}

.sidebar-item img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.sidebar-item .item-icon {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #ededed;
}

    .sidebar-item .item-icon i {
        font-size: 14px;
        color: #778298;
    }

/* Dropdown styling */
.dropdown-offline-game {
    flex-direction: column;
    padding-left: 20px; /* Indent dropdown items */
}

.dropdown-offline-games {
    display: none;
    flex-direction: column;
    padding-left: 20px; /* Indent dropdown items */
}

    .dropdown-offline-games a {
        padding: 5px;
        font-size: 14px;
        color: #333;
        text-decoration: none;
        display: block;
        transition: color 0.3s;
    }

        .dropdown-offline-games a:hover {
            color: #007bff;
        }

    /* Animation for sliding down */
    .dropdown-offline-games.show {
        display: flex;
        animation: slideDown 0.3s ease forwards;
    }

@keyframes slideDown {
    from {
        max-height: 0;
        opacity: 0;
    }

    to {
        max-height: 500px; /* Adjust as needed */
        opacity: 1;
    }
}

.sidebar-item .item-icon.active i {
    transform: rotate(90deg);
    transition: transform 0.3s ease;
}

.sidebar-item .w-50 img {
    margin-right: 0.3rem;
}


.winners-item {
    background-color: #fff;
    border-radius: 16px;
    border: 1px solid #e9e9eb;
    width: 100%;
    gap: 10px;
    padding: 12px;
    display: flex;
    align-items: center;
    flex-direction: row;
    min-width: 280px;
    margin-right: 10px;
}

    .winners-item img {
        max-height: 76px;
        border-radius: 11px;
    }

    .winners-item > div {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .winners-item h4 {
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
        text-align: left;
        color: #021902;
        margin: 0;
    }

    .winners-item p {
        font-size: 12px;
        font-weight: 400;
        line-height: 15px;
        text-align: left;
        color: var(--text-color);
        margin: 0;
    }

    .winners-item .location {
        display: flex;
        gap: 10px;
        align-items: center;
    }

        .winners-item .location img {
            width: 10px;
            height: 10px;
            border: 1px solid #ededed;
            border-radius: 3px;
        }

        .winners-item .location p {
            font-size: 12px;
            font-weight: 500;
            line-height: 15px;
            text-align: left;
            margin: 0;
            flex: 1;
        }

        .winners-item .location span {
            font-size: 12px;
            font-weight: 400;
            line-height: 18px;
            text-align: left;
        }

    .winners-item .bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .winners-item .bottom p {
            font-size: 12px;
            font-weight: 700;
            line-height: 18px;
            text-align: left;
            color: var(--primary-color);
            flex: 1;
        }

        .winners-item .bottom span {
            font-size: 10px;
            font-weight: 600;
            line-height: 12px;
            color: #fff;
            text-align: center;
            border: 0.5px solid #26f03b;
            background: var(--primary-color);
            padding: 6px 16px;
            gap: 8px;
            border-radius: 52px;
        }

.toogle-button-group {
    display: flex;
}

    .toogle-button-group button {
        background-color: transparent;
        outline: none;
        border: none;
        gap: 9px;
        justify-content: center;
        align-items: center;
        display: flex;
        font-size: 12px;
    }

nav .toogle-button-group {
    border: 1px solid #ededed;
    border-radius: 22px;
    padding: 4px;
}

    nav .toogle-button-group button.active {
        border: 1px solid #ededed;
        border-radius: 22px;
        background-color: #f0f2f2;
    }

nav input {
    background-color: transparent;
    border: none;
    font-size: 12px;
}

nav .auth-form {
    width: fit-content;
    gap: 8px;
}

.navbar-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: fit-content;
}

.currency-circle {
    background-color: #b5dcb9;
    color: #00870e;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: flex;
    font-size: 14px;
    font-weight: 700;
    line-height: 0;
}

.circular {
    border: 1px solid #ededed;
    border-radius: 22px;
    background-color: #f0f2f2;
    padding: 5px 16px;
    align-items: center;
    display: flex;
    gap: 5px;
}

.circular-primary {
    border: 1px solid #ededed;
    border-radius: 22px;
    padding: 5px 16px;
    align-items: center;
    display: flex;
    gap: 5px;
}

.circular span {
    font-size: 12px;
}

.circular.pass {
    padding: 0;
    padding-left: 16px;
}

    .circular.pass button {
        border-radius: 22px;
        outline: none;
        font-size: 12px;
        border: none;
        padding: 10px 25px;
    }

.button-primary {
    background-color: var(--primary-color);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 24px;
}

.button-warning {
    background-color: #FFC107;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 24px;
}

.online-signin {
    outline: none;
    display: flex;
    font-size: 12px;
    width: 80%;
    justify-content: space-between;
    align-items: center;
}

.circular-btn {
    width: 100%;
    border: .2px solid #ccc;
    outline: none;
}
/* .main-footer-outer {
    background: pink;
    border: solid 3px;
    width: 100%;
    padding-left: 19%;
} */
footer {
    position: relative;
    width: 100%;
    background-image: url("../images/footer-new.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 3rem;
    border-radius: 24px 24px 0 0;
    padding: 3.5rem 1.5rem;
    padding-bottom: 0;
    color: #fff;
}

    footer ul li a {
        text-decoration: none;
        color: #D7D9DC;
    }

        footer ul li a:hover {
            text-decoration: underline;
            color: #fff;
        }

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.footer-top-box h4 {
    font-weight: 600;
    font-size: 1rem;
    padding-bottom: 3px;
}

.footer-top-box li {
    font-weight: 500;
    font-size: .875rem;
    color: #D7D9DC;
    text-decoration: none;
    list-style-type: none;
    text-align: left;
    padding-left: 0;
    flex-wrap: nowrap;
    padding-top: 5px;
    white-space: nowrap;
}

.footer-top-box ul {
    padding: 0;
}

.footer-top-box .underline {
    width: fit-content;
    text-decoration: underline;
}

.flex-between {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-start {
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
}

.social-outer .social-inner {
    column-gap: 7px;
}

.social-inner img {
    height: 2em;
    width: 2em;
    padding: 5px;
    border-radius: 100%;
    background-color: #fff;
}

.payment-method-outer {
    border: 1px dashed #A3D5A8;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 12px;
    width: 100%;
    padding: 1rem .8rem;
    margin: 1rem 0;
    background-color: #FFFFFF1A;
}

.payment-method-inner .pay-two {
    width: fit-content;
    height: 2.5rem;
    justify-content: center;
    column-gap: 1rem;
}

    .payment-method-inner .pay-two img {
        object-fit: contain;
        width: 100%;
        height: 2.5rem;
    }

.payment-method-inner h3 {
    font-size: 1.125rem;
    font-weight: bold;
}

.footer-bottom-outer {
    margin: 2rem 0;
}

.payment-method-inner .pay-three {
    display: flex;
    column-gap: .6rem;
}

.pay-three img {
    height: 1rem;
    width: 1rem;
}

.f-card-outer {
    display: flex;
    column-gap: .25rem;
    background-color: #fff;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 15px;
    border-radius: 50px;
}

    .f-card-outer h6 {
        font-size: .87rem;
        font-weight: 500;
        color: #020202;
        line-height: 21px;
    }

.footer-bottom-outer .footer-bottom {
    column-gap: 5rem;
}

.footer-bottom-left p {
    width: 95%;
}

.footer-bottom p {
    font-weight: 500;
    font-size: .75rem;
    color: #D7D9DC;
    margin-top: .5rem;
    line-height: 21px;
}

.footer-bottom-left-img img {
    width: 10em;
}

.footer-bottom-right-img {
    column-gap: 1.5rem;
}

    .footer-bottom-right-img img {
        height: 3em;
    }

.footer-bottom-right-img, .footer-bottom-left-img {
    margin-bottom: 1rem;
}


.footer-bottom-left, .footer-bottom-right {
    width: 50%;
}

.footer-bottom .flex-between {
    align-items: start;
}

.footer-copy h6 {
    color: #d7d9dcc9;
    font-size: .75rem;
    text-align: center;
}

.footer-copy {
    border-top: .5px solid #a3d5a883;
    padding: 1rem;
}

button {
    border: none;
    outline: none;
}

    button:focus {
        outline: none;
    }

.history-g .desktop-hidden {
    display: none;
}

.mission-right, .vision-left {
    height: 20em;
}

    .mission-right img, .mission-left img {
        height: 100%;
    }

.vision-left {
    margin-left: 1rem;
}

/* Home css START */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    padding: 0;
}

#sidebar a {
    text-decoration: none;
}

#edit-select {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    font-size: 1rem;
}

.text-green {
    color: #249C4E;
}

.text-heading {
    color: #020202;
}

.text-paragraph {
    color: #6B6B6B;
}

.flex-itc {
    display: flex;
    align-items: center;
}

.flex-itc-gap {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.flex-itc-juc {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-itc-jub {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gap-1 {
    gap: 1rem;
}

.gap-0\.5 {
    gap: 0.5rem;
}

.gap-2 {
    gap: 2rem;
}

.header-two {
    width: fit-content;
    font-size: 1.7rem;
    font-weight: 700;
    color: black;
}

.bg-gray {
    background-color: #F5F5F5;
}

/* MARQUEE */
.marquee-container {
    position: relative;
    /*  height: 11rem;*/
    margin-top: 1.3rem;
    margin-bottom: 1.3rem;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
}

.slider-container {
    overflow: hidden;
    width: 100%;
    max-width: 100vw; /* Adjust as needed */
    position: relative;
}

.slider {
    display: flex;
    animation: slide 17s linear infinite;
}

    .slider .card {
        width: 50%; /* Adjust the width to fit the duplicated content */
    }

.card {
    min-width: 150px;
    flex-shrink: 0;
    border-radius: 10px;
    text-align: center;
}

@keyframes slide {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.filter-container {
    margin-top: 0.1rem;
}

.filter-category {
    display: flex;
    border-radius: 54px;
    padding: 0.3rem 0.5rem;
}

.filter-categories {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.5rem 2.3rem;
    border-radius: 2rem;
    font-size: 14px;
    cursor: pointer;
}

.all-filter-category, .lw-all-filter-category {
    background-color: #F0F2F2;
    border: solid 1px #E9E9E9;
    font-weight: 600;
    color: #171A1A;
}

.search-input-container {
    border-radius: 54px;
    padding: 0 0.2rem 0 0.8rem;
}

.search-input {
    max-width: 19rem;
    padding: 0.8rem 0.6rem 0.8rem 0.4rem;
    outline: none;
    border-radius: 54px;
    border: none;
}

.online-games-section, .offline-games-section {
    margin-top: 1.5rem;
    border: solid 1px #E9E9EB;
    padding: 1.4rem;
    border-radius: 1.4rem;
}

    .online-games-section .controls, .offline-games-section .controls {
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.25rem;
        background-color: #F5F5F5;
        border: solid 1px #E9E9EB;
        border-radius: 100%;
    }

        .online-games-section .controls img, .offline-games-section .controls img {
            width: 75%;
        }

.online-game-item-container {
    margin-top: 0.4rem;
    display: flex;
    gap: 0.73rem;
}

.online-game-item {
    width: 25%;
    border: solid 2px;
    display: flex;
    gap: 0.4rem;
    border: solid 1px #E9E9EB;
    padding: 1rem;
    border-radius: 1rem;
}

    .online-game-item .players {
        margin-top: 0.3rem;
    }

    .online-game-item button {
        margin-top: 0.3rem;
    }

    .online-game-item .image {
        background-color: black;
        padding: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40%;
        border-radius: 0.5rem;
        object-fit: cover;
    }

        .online-game-item .image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

    .online-game-item .content {
        width: 60%
    }

    .online-game-item .players, .online-game-item button {
        width: 100%;
        margin-top: 0.5rem;
    }

    .online-game-item h3 {
        font-size: 1rem;
        color: black;
    }

    .online-game-item h4, h5 {
        font-size: 12px;
    }

/* OFFLINE GAMES SECTION */
.offline-games-section {
    margin-top: 2rem;
}

.offline-game-item-container {
    display: flex;
    gap: 0.73rem;
    margin-top: 1.3rem;
}

.padding {
    padding: 1rem;
}

.padding-sm {
    padding: 0.6rem;
}

.wallet-card {
    width: 100%;
    border: solid 1px #D6DADA;
    border-radius: 1rem;
    box-shadow: 2px 2px 12px 0px #E4E3E3E5;
}

.offline-game-card {
    width: 25%;
    border: solid 1px #D6DADA;
    border-radius: 1rem;
    box-shadow: 2px 2px 12px 0px #E4E3E3E5;
}

    .offline-game-card .header {
        padding-top: 1rem;
    }

#mega-draw .bottom-line {
    border-bottom: dashed 2px #00870E;
}

#monthly-draw .bottom-line, #scratch-and-win .bottom-line, #state-mega-puzzle .bottom-line {
    border-bottom: dashed 2px #222622;
}

#mega-draw {
    background: url(../images/carousels/homepage/mega-draw-bg-1.png), url(../images/carousels/homepage/mega-draw-bg-2.png);
    background-position: center, center;
    background-size: cover, cover;
    background-repeat: no-repeat;
}

#monthly-draw {
    background: url(../images/carousels/homepage/monthly-draw-bg-1.png), url(../images/carousels/homepage/monthly-draw-bg-2.png);
    background-position: center, center;
    background-size: cover, cover;
    background-repeat: no-repeat;
}

#scratch-and-win {
    background: url(../images/carousels/homepage/mega-draw-bg-1.png), url(../images/carousels/homepage/scratch-and-win-bg-1.png);
    background-position: center, center;
    background-size: cover, cover;
    background-repeat: no-repeat;
}

#state-mega-puzzle {
    background: url(../images/carousels/homepage/state-mega-puzzle-bg-1.png), url(../images/carousels/homepage/state-mega-puzzle-bg-2.png);
    background-position: center, center;
    background-size: cover, cover;
    background-repeat: no-repeat;
}

.offline-game-card h2 {
    color: black;
    font-size: 1.25rem;
    font-weight: 500;
    padding: 0;
    margin: 0;
}

.offline-game-card .image {
    width: 100%;
    margin-top: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: contain;
}

    .offline-game-card .image img {
        margin: 0 auto;
        object-fit: contain;
        background-repeat: no-repeat;
    }

.next-draw-container {
    gap: 0.5rem;
    margin-top: 1rem;
    height: fit-content;
}

    .next-draw-container .w-50 {
        height: fit-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;
        background-color: white;
        padding: 0.4rem 0.6rem;
        margin: 0;
        border: solid 1px #E3E1E1;
        border-radius: 0.5rem;
    }

        .next-draw-container .w-50 h3 {
            margin: 0;
            padding: 0;
            font-size: 0.75rem;
            color: #5D615D;
            text-align: center;
        }

        .next-draw-container .w-50 p {
            margin: 0;
            padding: 0;
            font-size: 0.875rem;
            color: #222622;
            text-align: center;
        }

.offline-game-card .line {
    margin: 0.7rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.offline-game-card .price {
    margin-top: 0.2rem;
}

    .offline-game-card .price h4 {
        font-size: 1rem;
        font-weight: 500;
    }

    .offline-game-card .price h3 {
        font-size: 0.875rem;
        font-weight: 700;
    }

.offline-game-card button {
    margin-top: 1.3rem;
    padding: 0.6rem;
    font-size: 1rem;
    font-weight: 500;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* CHECK RESULTS */
.check-results-container, .mega-japa-results-container {
    z-index: 1;
    background: url(../images/carousels/homepage/check-results-bg.png);
    background-position: center, center;
    background-size: cover, cover;
    background-repeat: no-repeat;
    color: black;
    margin-top: 2rem;
    width: 100%;
    padding: 4rem 2.8rem;
    border: solid 2px #E7E7E7;
    border-radius: 1.5rem;
    overflow: hidden;
}

    .check-results-container .basis-40 {
        flex-basis: 40%;
    }

    .check-results-container .basis-60 {
        flex-basis: 60%;
    }

    .check-results-container h2 {
        font-size: 2.5rem;
        font-weight: bold;
    }

    .check-results-container p {
        margin-top: 0.6rem;
        font-size: 1rem;
        font-weight: 500;
    }

.check-results-form {
    z-index: 3;
    width: 55%;
    height: 23rem;
    background-color: white;
    padding: 1rem 2.8rem;
    border: dashed 2px #00870E;
    border-radius: 1.5rem;
}

#mobile-check-results-container .check-results-form {
    height: 100%;
}

.check-results-form h4, .check-results-form h3 {
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
}

.check-results-form select {
    background-color: white;
    width: 50%;
    margin: 1rem auto;
    padding: 0.6rem;
    border: solid 1.42px #E9E9EB;
    border-radius: 2rem;
}

.check-results-form .input-container {
    width: 50%;
    margin-top: 0.5rem;
}

.check-results-form input {
    width: 100%;
    margin-top: 0.4rem;
    padding: 0.5rem;
    outline-color: #00870E;
    border: solid 1px #E9E9EB;
    border-radius: 2rem;
}

.check-results-form .button-container {
    margin-top: 2rem;
}

.claim-button-container, .check-button-container {
    height: 50px;
    width: 146px;
}

.check-results-form .button-container .check-button, .check-results-form .button-container .claim-button,
.mega-japa-results-container .button-container .check-button {
    background-color: #00870E;
    border-radius: 0.35rem;
    font-size: 1rem;
    box-shadow: 2px 2px 4px 0px #F5D29B;
}

.check-results-form .button-container .claim-button {
    background-color: #00870E99;
}

.check-results-form .button-container .main-button, .mega-japa-results-container .button-container .main-button {
    width: 100%;
    border-left: dashed 1px black;
}

.check-results-container .design-1 {
    z-index: 2;
    top: 0;
    left: 0;
}

.check-results-container .design-2 {
    z-index: 2;
    top: 0;
    right: 0;
}

.check-results-container .design-3 {
    z-index: 2;
    bottom: 0;
    left: 20%;
}

.check-results-container .design-4 {
    z-index: 2;
    position: absolute;
    top: -5%;
    left: 20%;
    transform: rotate(180deg);
}

/* LATEST WINNING */
.lw-custom-table {
    margin: 1rem 0; /* Adds margin around the entire table */
}

    .lw-custom-table table {
        border-collapse: separate;
        border-spacing: 0 0.5rem; /* Space between rows */
        width: calc(100% - 2rem);
        margin: 0 auto;
    }

    .lw-custom-table thead tr th {
        padding-left: 0;
        font-size: 0.75rem;
    }

    .lw-custom-table tbody tr {
        overflow: hidden; /* Ensures border radius displays */
    }

        .lw-custom-table tbody tr td {
            border: 1px solid #E2E0E0; /* Adds the border */
            padding: 0.9rem 0;
            border-right: none;
            border-left: none;
            margin: 0 0 0 0;
        }

        .lw-custom-table tbody tr h4 {
            position: relative;
            top: 0.1rem;
            font-size: 0.875rem;
            font-weight: 500;
            margin: 0;
            padding: 0;
        }

        .lw-custom-table tbody tr .text-container {
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }

        .lw-custom-table tbody tr .text-center {
            justify-content: center;
        }

        .lw-custom-table tbody tr .text-right {
            justify-content: right;
        }

        .lw-custom-table tbody tr .image {
            display: flex;
            align-items: center;
            width: fit-content;
            height: fit-content;
        }

.border-left {
    padding-left: 1rem;
    border: 1px solid #E2E0E0;
    border-top-left-radius: 2rem;
    border-bottom-left-radius: 2rem;
}

.border-right {
    padding-right: 1rem;
    border-right: 1px solid #E2E0E0;
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem;
}

tr .just-mobile-border {
    border-right: 0 !important;
    padding-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.lw-custom-table thead th {
    border: none;
    padding: 0.75rem;
    text-align: left;
}

.mega-japa-results-container {
    background-image: url(../images/mega-japa-bg-1.png);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.4rem;
}

    .mega-japa-results-container .green-bg {
        position: absolute;
        bottom: 0;
        right: 0;
    }

.arrow-image {
    z-index: 1;
    position: relative;
    width: 25%;
}

.top-players, .mega-japa {
    z-index: 1;
    position: relative;
    width: 37.5%;
}

.mega-japa {
    padding: 0 1rem;
}

.mega-japa-image-container img {
    margin: auto;
}

.mega-japa-image-container .top-players h2 {
    font-size: 2rem;
    font-weight: 600;
}

.mega-japa-image-container .top-players-container {
    margin-top: 0.6rem;
    border: 1px dashed #A3D5A8;
    backdrop-filter: blur(11px);
    border-radius: 1rem;
    padding: 0.6rem;
}

.mega-japa-image-container .player-container {
    width: 100%;
    display: flex;
    padding: 0.4rem 0.7rem;
    border-radius: 2rem;
}

.mega-japa-image-container .green {
    background: linear-gradient(90deg, #F2F8F4 0%, #DFEAE2 100%);
    border: 1px solid #52D852;
}

.mega-japa-image-container .white {
    background-color: transparent;
    border: 1px solid #E2E0E0;
}

.mega-japa-image-container .player-container img {
    width: 2rem;
    height: 2rem;
    border-radius: 100%;
}

.mega-japa-image-container .name h3 {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 21px;
    text-align: left;
    color: #020202;
}

.mega-japa-image-container .name p, .mega-japa-image-container .rank {
    font-size: 0.625rem;
}

.mega-japa-image-container .location {
    font-size: 1rem;
}

.mega-japa-image-container .rank {
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    bottom: 0.2rem;
}

.mega-japa-card {
    width: 100%;
    background-color: #F5F5F5;
    padding: 1rem 0.6rem;
    border-radius: 0.75rem;
    border: 1.5px solid #A3D5A8;
}

.mega-japa-image-container .mega-japa p {
    width: 95%;
    text-align: center;
    font-size: 1.25rem;
}

.mega-japa-card h1 {
    font-weight: 600;
    font-size: 3.563rem;
}

.mega-japa-card h4 {
    color: #5D615D;
    font-size: 0.75rem;
}

.mega-japa-card h3 {
    color: #00870E;
    font-size: 1.125rem;
}

.mega-japa-card h2 {
    color: #00870E;
    font-size: 1.75rem;
    text-align: center;
}

.mega-japa-card .image-container {
    width: 100%;
    height: 10rem;
    object-fit: cover;
}

    .mega-japa-card .image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 0.5rem;
    }

.mega-japa-card .time h4 {
    font-size: 0.75rem;
    color: #5D615D;
}

.mega-japa-card .time h2 {
    font-size: 1rem;
    color: #222622;
}

.mega-japa-carousel-container {
    margin-top: 0.3rem;
    padding: 1rem;
    overflow: hidden;
}

#mega-japa-carousel .carousel-control-prev,
#online-see-all-carousel .carousel-control-prev {
    left: -0.5rem;
}

#mega-japa-carousel .carousel-control-next,
#online-see-all-carousel .carousel-control-next {
    right: -0.5rem;
}

/* SEE-ALL STYLING */
#online-see-all-carousel .carousel-item, #offline-games-banner {
    width: 100%;
    border-radius: 1rem;
    background-size: cover;
    object-fit: cover;
    padding: 0;
}

    #online-see-all-carousel .carousel-item img, #offline-games-banner img {
        width: 100%;
        max-height: 20rem;
        border-radius: 1rem;
        background-size: cover;
        padding: 0;
        margin: 0;
    }

.all-games-prev-icon {
    filter: invert(60%);
}

.all-games-item-container {
    gap: 0.3rem;
    justify-content: space-between;
}

.all-games-item {
    width: 19%;
    background-color: #D9F4DC;
    ;
    border: 1px solid #A3E4AA;
    padding: 0;
    gap: 0;
    flex-direction: column;
}

.all-games-item .image {
    position: relative;
    height: 11.688rem;
    width: 100%;
    border-radius: 1rem;
    border: solid 2px;
}

.all-games-item .content {
    padding: 0.6rem;
}

.all-games-item .content h2 {
    color: var(--Background, #021902);
    font-size: 1rem;
    font-weight: 600;
    line-height: 30px;
    text-align: left;
}

/* Add blur effect on hover */
.all-games-item:hover .image img {
    filter: blur(4px); /* Apply blur effect */
    transition: filter 0.3s ease; /* Smooth blur transition */
}

/* Exclude play button container from blur */
.all-games-item:hover .play-button-container,
.all-games-item:hover .play-button-container img {
    filter: none; /* No blur on the play button */
}

/* Initial hidden state for play button container */
.play-button-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease; /* Smooth opacity transition */
    pointer-events: none; /* Prevent interaction when hidden */
}

.play-button {
    width: 64px;
    height: 64px;
    background-color: #00870E;
    border-radius: 100%;
    padding: 20px 22px 20px 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 0px 0px #0C6F16;
    cursor: pointer;
}

    .play-button img {
        width: 20px;
        margin: 0 auto;
        height: 20px;
        cursor: pointer;
    }

/* Hover effect: Show play button */
.all-games-item:hover .play-button-container {
    opacity: 1; /* Make visible */
    pointer-events: auto; /* Allow interaction */
}

/* Home css END */


/* About START */
.about-banner, .faq-banner, .contact-banner, .privacy-banner-inner {
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
}

    .about-banner-inner img, .contact-banner-inner img, .privacy-banner-inner img {
        width: fit-content;
        width: 100%;
        max-width: 100%;
    }

.about-main h2 {
    font-size: 3rem;
    font-weight: 600;
    color: #222622;
    text-align: center;
    padding-bottom: .5rem;
    border-bottom: .5px solid #E9E9EB;
}

.about-body p {
    font-size: .9rem;
    font-weight: 400;
    color: #6B6B6B;
}

.about-body h3 {
    font-size: 1.5rem;
    padding-bottom: .1rem;
    font-weight: 700;
    color: #222622;
}

.about-main p {
    padding-top: .3rem;
}

.about-body {
    margin: 1.5rem auto;
    border-radius: 24px;
    overflow: hidden;
}

.about-body-inner {
    padding: 1rem;
}

.about-mission, .about-vision {
    margin: 1rem auto;
}

.about-vision {
    margin-top: 0;
    margin-bottom: 2.5rem;
}

.vision-right p {
    width: 75%;
}

.about-mission .mission-inner, .about-vision .vision-inner {
    column-gap: 6rem;
}

.mission-left, .mission-right, .vision-left, .vision-right {
    width: 50%
}

.about-aside {
    margin-bottom: 1rem;
}

.about-top-box {
    width: 100%;
    cursor: pointer;
}

.about-top-full, .about-bottom-full {
    background-color: #E9E9EB;
    border-radius: 12px;
    padding: 1rem .8rem;
}

.about-top-box-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.about-top-full img, .about-bottom-full img {
    width: 3.5em;
}

.about-top-box .icon, .about-bottom-box .icon {
    height: 1rem;
}

.about-bottom .about-bottom-top {
    column-gap: 1rem;
}

.about-bottom .flex-between {
    align-items: stretch;
}

.split {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    row-gap: 1rem;
}

    .split .about-top-full .flex-start, .about-bottom-full .flex-start {
        column-gap: .3rem;
    }

.about-top-full .flex-start {
    width: 50%;
}

.about-top-box .flex-between, .about-bottom-box .flex-between {
    align-items: center;
}

.about-bottom h6 {
    font-weight: 600;
    color: #222622;
    font-size: .9rem;
}

.split .about-top-full {
    display: flex;
}

.about-bottom-bottom {
    margin-top: 1rem;
}

.about-bottom-box {
    column-gap: 1rem;
}

.about-bottom-full {
    width: 50%;
}
/* About END */






/* Contact START */
.contact-banner {
    width: 100%;
    overflow: hidden;
}

.contact-body {
    color: #222622;
}

.contact-banner-inner img {
    width: fit-content;
    max-width: 100%;
}

.contact-body {
    margin: 1.5rem auto;
    border-radius: 24px;
    overflow: hidden;
}

.contact-body-inner {
    padding: 1rem;
}

.contact-main h2 {
    font-size: 3rem;
    font-weight: 600;
    color: #222622;
}

.contact-main-head {
    text-align: center;
    padding-bottom: .5rem;
    border-bottom: .5px solid #E9E9EB;
    margin-bottom: 1rem;
}

    .contact-main-head h2 {
        padding-top: .5rem;
    }

.contact-body p {
    font-size: .9rem;
    font-weight: 400;
    color: #6B6B6B;
}

.contact-body h3 {
    font-size: 1.5rem;
    padding-bottom: .1rem;
    font-weight: 700;
    color: #222622;
}

.contact-container {
    margin-top: 2.5rem;
    background-color: #F9F9F9;
    width: 100%;
    border-radius: 20px;
    padding: 2.5rem 2rem;
    column-gap: 1.5rem;
}

.contact-question {
    width: 40%;
}

.contact-form {
    width: 60%;
}

    .contact-form form {
        margin-top: 1.4rem;
    }

    .contact-form h6 {
        font-size: 24px;
        font-weight: 500;
        line-height: 28.8px;
        color: #222622;
    }

    .contact-form h3 {
        font-size: 30px;
        font-weight: bold;
        line-height: 48px;
        color: #222622;
    }

.contact-question {
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid #E9E9EB;
}

.contact-question-inner .email, .contact-question-inner .call, .contact-question-inner .locate {
    text-align: center;
}

.contact-question-inner .email {
    padding: 1rem 0;
    border-bottom: 1px solid #E9E9EB;
}

.contact-question h4 {
    font-size: 1.2rem;
}

.contact-question p {
    margin-top: rem;
    margin-bottom: 0.5rem;
    color: #222622;
}

.question-para {
    line-height: 1.3em;
}

.callandlocate {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #E9E9EB;
}

.contact-question-inner .callandlocate {
    justify-content: center;
    column-gap: 5rem;
}

.callandlocate .call, .callandlocate .locate {
    width: fit-content;
}

.map-outer img {
    width: 100%;
    margin-top: 1rem;
}

.contact-question-inner .email img, .contact-question-inner .call img, .contact-question-inner .locate img {
    height: 3.5em;
    margin-bottom: .3rem;
}

.contact-question-inner .email p, .contact-question-inner .call p, .contact-question-inner .locate p {
    padding: 0;
    line-height: 19px;
    white-space: nowrap;
}

.read-faq h5 {
    font-size: .9rem;
    text-decoration: underline;
}

a {
    text-decoration: none;
}

.contact-question-inner a {
    color: #222622;
}

.contact-main .contact-container {
    align-items: flex-start;
}

.form-box input {
    height: 2.5rem;
    border-radius: 12px;
    width: 100%;
    border: 1px solid #9195a5b9;
    outline: none;
    background: transparent;
    padding: .5rem;
}

.form-box {
    margin-bottom: .5rem;
}

    .form-box label {
        color: #222622;
        font-weight: 400;
        font-size: .85rem;
        line-height: 0;
    }

    .form-box textarea {
        height: 8.5rem;
        border-radius: 12px;
        width: 100%;
        border: 1px solid #9195a5b9;
        outline: none;
        background: transparent;
        padding: .5rem;
    }

.contact-form .form-box textarea::placeholder {
    font-size: 0.875rem;
}

.form-sub {
    display: flex;
    align-items: center;
    column-gap: .5rem;
    justify-content: start;
}

    .form-sub input {
        width: fit-content;
    }

    .form-sub p {
        margin: 0;
        width: fit-content;
    }

form .submit-btn {
    position: relative;
    background-color: #00870E;
    color: #fff;
    width: 100%;
    padding: .7rem 9rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1.5rem auto 0 auto;
}

form .submit-btn-disabled {
    position: relative;
    background-color: gray;
    color: #fff;
    width: 100%;
    padding: .7rem 9rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1.5rem auto 0 auto;
}
/* Contact END */



/* Download START */
.download-banner {
    width: 100%;
    margin: auto;
    overflow: hidden;
}

.download-banner-inner img {
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    margin: auto;
    margin-bottom: 3rem;
}

.download-banner .download-button-div-1 {
    position: absolute;
    inset: 0;
    border: solid 4px purple;
}

#download-banner-image-container {
    position: relative;
    z-index: 20;
    width: 100%;
    height: fit-content;
    margin-bottom: 2.5rem;
}

#download-banner-image-container-mobile {
    display: none;
}

.download-page-container {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.download-button-container {
    background: white;
    position: relative;
    top: 28%;
    left: 24%;
    width: 20.87rem;
    max-width: 20.387rem;
    padding: 1.6rem 1.4rem 1.6rem 1.4rem;
    /* width: 326.19px; */
    border-radius: 24px;
    border: 1px solid #213221;
}

    .download-button-container h3 {
        width: 138.58px;
        height: 19px;
        font-size: 16px;
        font-weight: 500;
        line-height: 19.49px;
        text-align: left;
        text-decoration-skip-ink: none;
        color: #011701;
    }

.download-image-button-container {
    margin-top: 0.7rem;
    display: flex;
    align-items: start;
    gap: 0.9rem;
}

    .download-image-button-container .qr-code img {
        width: 117.52px;
        height: 117.82px;
    }

    .download-image-button-container .buttons {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
    }

        .download-image-button-container .buttons button {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            width: 151px;
            height: 48px;
            border-radius: 8px;
            background: #00870E;
            cursor: pointer;
        }

            .download-image-button-container .buttons button:hover {
                opacity: 90%;
            }

            .download-image-button-container .buttons button img {
                width: 24px;
                height: 24px;
                margin: 0;
            }

            .download-image-button-container .buttons button span {
                font-size: 16px;
                font-weight: 700;
                line-height: 24px;
                text-align: left;
                color: #F1F1F1;
                margin: 0;
            }

/* Download END */


/* Earn START */

.main-banner {
    background-color: #0B6C01;
    border-radius: 24px;
    padding: 1.5rem 3rem 0rem 3rem;
}

    .main-banner .main-banner-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .main-banner h3 {
        width: 80%;
        color: #fff;
        text-transform: uppercase;
        font-size: 2.5rem;
        line-height: 2.5rem;
        font-weight: bold;
    }

.main-banner-para {
    color: #ECF0EC;
    font-size: 1.3rem;
}

.main-banner button {
    background-color: #fff;
    padding: 10px 20px;
    color: #011701;
    font-size: .9rem;
    margin: 10px 0;
}

.main-banner-terms {
    color: #ECF0EC;
    width: fit-content;
    font-size: .8rem;
    letter-spacing: .05em;
    padding-top: 10px;
    border-bottom: .5px solid #ECF0EC;
}

.main-earn-btn {
    margin: 2rem auto;
    padding: 10px;
    width: fit-content;
}

    .main-earn-btn .active {
        background-color: #00870E;
        color: #fff;
        width: 50%;
    }

.main-earn-buttons .toogle-button-group {
    border: 0;
    width: 25%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px;
    border-radius: 50px;
    /* height: 2.5rem; */
}

.main-earn-buttons .main-earn-link {
    padding: 10px 0px;
    height: 100%;
    width: 50%;
}

.refer-outer {
    width: 100%;
    padding: 1.5rem 1rem;
    border-radius: 24px;
    display: flex;
    column-gap: 16px;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 3rem;
}

.refer-left-outer, .refer-right-outer {
    width: 50%;
    background-color: #F5F5F5;
    border: 1px solid #E9E9EB;
    border-radius: 20px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.refer-left, .refer-right {
    width: 100%;
}

.flex-between {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-start {
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
}

.refer-head-text {
    color: #020202;
    width: 100%;
}

    .refer-head-text h3 {
        font-size: 1.3rem;
        font-weight: 700;
        color: #000;
        padding-top: 5px;
        /* line-height: 0.1em; */
    }

    .refer-head-text .flex-between {
        color: #020202;
    }

.refer-head-img {
    height: 4.5em;
    margin-right: 7px;
}

.refer-head-left .flex-start {
    row-gap: 7px;
}

.refer-head-text .flex-between p, .refer-head-text .flex-between h3 {
    font-size: .8rem;
}

#referral-input {
    width: 100%;
    outline: none;
    background-color: transparent;
    border: none;
}

.referral-link-inner {
    position: relative;
    padding: 4px 7px;
    margin: 7px auto;
    color: #020202;
}

    .referral-link-inner input::placeholder {
        color: rgb(180, 180, 180);
    }

.referral-link-text {
    font-size: 1rem;
    font-weight: 500;
    padding: 7px 0 0px 0;
    color: #020202;
}

.referral-link-inner img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 5px;
}

.social-outer .social-inner {
    column-gap: 7px;
}

.social-inner img {
    height: 2em;
    width: 2em;
    padding: 5px;
    border-radius: 100%;
    background-color: #fff;
}

.refer-btn button {
    background-color: #00870E;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: .9rem;
    padding: 10px 0;
    color: #fff;
    margin-top: 1rem;
}

.exclusive-btn button {
    border: 1px solid #dddddd;
    width: 100%;
    padding: 7px 0;
    display: flex;
    margin-top: 2px;
    justify-content: space-evenly;
    font-size: .9rem;
    font-weight: 500;
    background-color: transparent;
}

    .exclusive-btn button span {
        font-weight: 600;
        font-size: .9rem;
    }

.exclusive-para {
    font-size: .9rem;
    font-weight: 600;
    padding: 3px 0;
    display: flex;
    column-gap: 5px;
    color: #020202;
}
/* Earn END */


/* Faq START */
.faq-banner {
    width: 100%;
    overflow: hidden;
}

.faq-banner-inner img {
    width: fit-content;
    max-width: 100%;
}

.faq-body {
    margin: 1.5rem auto;
    border-radius: 24px;
    overflow: hidden;
}

.faq-body-inner {
    padding: 1rem;
}

.faq-main h2 {
    font-size: 3rem;
    font-weight: 600;
    color: #222622;
}

.faq-main-head {
    text-align: center;
    padding-bottom: 2.2rem;
    border-bottom: .5px solid #E9E9EB;
}

    .faq-main-head p {
        line-height: 0;
        color: #5D615D;
    }

.faq-body p {
    font-size: .9rem;
    font-weight: 400;
    color: #6B6B6B;
}

.faq-body h3 {
    font-size: 1.5rem;
    padding-bottom: .1rem;
    font-weight: 700;
    color: #222622;
}

.faq-main p {
    padding-top: .3rem;
}

.faq {
    padding-top: 2rem;
}

    .faq .faq-inner {
        align-items: flex-start;
        column-gap: 2rem;
    }

.faq-aside {
    width: 23%;
}

.faq-aside-info {
    width: 100%;
}

.faq-group img {
    height: 1.5em;
    width: 1.5em;
    border-radius: 100%;
    padding: 5px;
}

.faq-aside h3 {
    padding: 0;
    font-size: 1rem;
    padding: 6px 0;
}

.faq-aside-head {
    margin-bottom: .7rem;
    /* border-bottom: 2px solid; */
    /* border-image: linear-gradient(to right, #FFFFFF, #00870E) 1; */
}

.faq-card-header button {
    border: none;
    outline: none;
    width: 100%;
    text-align: left;
    background-color: transparent;
}

.faq-card-header {
    padding: 1rem 0;
    cursor: pointer;
}

.faq-toggle {
    padding: 0rem 0rem .5rem 0rem;
    border-top: .5px solid #DFEAE2;
}

.faq-card-header h5 {
    font-size: 1rem;
    /* font-weight: 700;*/
}

.faq-card {
    border-radius: 12px;
    overflow: hidden;
    padding: 0 1rem;
    /* border:.5px solid #DFEAE2; */
    background-color: #F9F9F9;
    margin-bottom: 1rem;
    border: 1px solid;
    border-image-source: linear-gradient(90deg, #F2F8F4 0%, #DFEAE2 100%);
}

#faqAccordion button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px; /* Adjust the gap between the title and the toggling icon */
    /* width: 100%;*/
    text-align: left; /* Ensure text alignment looks correct */
    background: none; /* Remove default button background */
    border: none; /* Remove default button border */
    cursor: pointer; /* Pointer cursor for better UX */
    margin-right: -20px;
}
    /* Default state: Plus (+) when the card is collapsed */
    /* Default state: Plus (+) when collapsed */
    #faqAccordion button[aria-expanded="false"]::after {
        content: '+';
        float: right;
        font-weight: bold;
        background: #F5F5F5;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: 100%;
        border: 0.5px solid lightgreen;
        cursor: pointer;
    }

    /* Expanded state: Minus (-) when open */
    #faqAccordion button[aria-expanded="true"]::after {
        content: '-';
        float: right;
        font-weight: bold;
        background: #F5F5F5;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: 100%;
        border: 0.5px solid lightgreen;
        cursor: pointer;
    }


/* Faq END */

/* Marquee START */
.marquee {
    overflow: hidden;
    gap: 10px;
    display: flex;
    position: absolute;
}
/* Marquee END */

/* Modal START */
.modal {
    overflow-y: auto;
}
/* Semi-transparent blurred backdrop */
.modal-backdrop.show {
    background-color: rgba(237, 237, 237, 0.76); /* #EDEDEDC2 */
    backdrop-filter: blur(32px);
}

/* Center the modal */
.modal-dialog-centered {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

#selectAccountTypeModal .modal-content {
    max-width: 402px;
}

/* Style modal content */
.modal-content {
    background-color: #fff;
    border-radius: 1rem;
    /* padding: 20px;*/
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.modal-content, .modal-body, .modal-header {
    border: none;
}

    .modal-body input {
        accent-color: #00870E;
    }

        .modal-body input::placeholder {
            font-size: 14px;
            font-weight: 400;
            line-height: 22.4px;
            letter-spacing: 0.08em;
        }

/* Styling for OTP input fields */
.otp-inputs input {
    width: 15%;
    height: 60px;
    margin: 0 0.6rem;
    text-align: center;
    font-size: 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid #E9E9EB;
}


/* ACCOUNT TYPE MODAL */
.modal-header h5 {
    color: #2B2B32;
    text-align: center;
    font-size: 18px;
}

.modal-header img {
    width: 11rem;
    display: block;
}

.modal-header button {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.modal-admin form button, .admin button {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.modal-website form button, .modal-website button {
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.813rem;
    cursor: pointer;
}

/* Add right padding to the select */

#userRegistrationForm .form-group input, #distributorRegistrationForm .form-group input, #signInModal .form-group input,
#forgotPasswordModal .form-group input, #resetPasswordModal input {
    border-radius: 0.75rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    color: #6B6B6B;
    font-size: 0.875rem;
}

    #userRegistrationForm .form-group input::placeholder, #distributorRegistrationForm .form-group input::placeholder,
    #signInModal .form-group input::placeholder, #forgotPasswordModal .form-group input::placeholder, #resetPasswordModal input::placeholder {
        letter-spacing: 0.08em;
        color: #6B6B6B;
    }

    #userRegistrationForm .form-group input::placeholder,
    #distributorRegistrationForm .form-group input::placeholder, .form-check label, .font-sm {
        font-size: 1rem;
        margin-top: 2.5px;
    }

.form-group select {
    font-size: 0.75rem;
    border-radius: 0.75rem;
    appearance: none;
    padding-right: 2rem;
    appearance: none;
    background-image: url(../icons/arrow.svg);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 0.6rem;
}

.modal-body .form-group label {
    font-size: 1rem;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    color: #343437;
    padding-bottom: 0.3rem;
}

.font-base, #font-base {
    font-size: 1rem;
}

#forgot-password-image {
    width: 3.125rem;
}

.email-input {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="%23999"><path d="M2 4h12v8H2z"/><path d="M2 4l6 4 6-4"/></svg>');
    background-repeat: no-repeat;
    background-position: 10px center; /* Position the icon inside the input */
    background-size: 16px 16px;
    padding-left: 35px; /* Add space to accommodate the icon */
    border: 1px solid #ddd; /* Style the input border */
    border-radius: 4px;
}

    .email-input::placeholder {
        color: #999;
    }
/* Modal END */

/* Offline-games START */
.offline-games-container {
    background-color: white;
    width: 100%;
    padding: 2rem 2rem;
    margin: 2rem auto;
    border-radius: 1.5rem;
}

iframe, .rules-image {
    width: 75%;
    margin: 0 auto;
    max-height: 850px;
    margin-top: 0.5rem;
    border-radius: 1rem;
    overflow: hidden;
    border: none;
}

.desc-container {
    padding: 2rem 1.5rem;
    background-color: #F5F5F5;
    border-radius: 1rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

    .desc-container .image-container {
        background-color: black;
        padding: 0.3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40%;
        max-height: 12.5rem;
        border-radius: 0.5rem;
        object-fit: cover;
    }

    .desc-container .header h2 {
        font-family: Proxima Nova;
        font-size: 2.5rem;
        font-weight: 600;
        line-height: 48px;
        text-align: left;
        color: #222622;
    }

    .desc-container .header p {
        margin-top: 0.5rem;
        font-size: 1rem;
        color: #6B6B6B;
    }

    .desc-container button {
        margin-top: 1.8rem;
        font-size: 500;
        font-size: 1rem;
        padding: 0.6rem 1rem;
    }

.instruction-container {
    margin-top: 1rem;
}

.sub-rule-container h3 {
    margin-top: 3rem;
    color: #020202;
    font-size: 600;
    font-size: 1.75rem;
}

.sub-rule-container ul {
    list-style-type: disc;
    padding-left: 2rem;
    color: #6B6B6B;
}

.sub-rule-container #red-underline {
    color: #CF2828;
    text-decoration: underline;
}

ul li::marker {
    color: #00870E;
    font-size: 1.5rem;
}

.red-container {
    color: #CF2828;
    font-size: 600;
}

#scratch-and-win-image {
    max-height: 31.25rem;
    margin-top: 3rem;
    border: none;
}

    #scratch-and-win-image img {
        width: 100%;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
        background-size: contain;
        border: none;
        border-radius: 1rem;
    }

#agents {
    width: 75%;
    margin: 0 auto;
}

    #agents ul {
        padding-left: 0;
    }

        #agents ul li {
            list-style-type: none;
            padding: 0.3rem;
            margin: 0.3rem;
            color: #6B6B6B;
            border-bottom: solid 1px #E9E9EB;
        }

    #agents .circle {
        width: 1rem;
        height: 1rem;
        background-color: #00870E;
        border-radius: 100%;
    }

    #agents ul li::marker {
        font-size: 3rem;
    }

    #agents ul li h3 {
        padding-left: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: #020202;
        padding: 0.3rem;
        margin: 0.3rem;
    }

    #agents ul li p {
        padding: 0.3rem;
        margin: 0.3rem;
    }

#mega-draw-image {
    max-height: 16.875rem;
    object-fit: cover;
    background-size: cover;
}

    #mega-draw-image img {
        width: 800px;
        height: 270px;
        object-fit: contain;
        background-size: contain;
        border-radius: 1rem;
    }

#mega-draw-table {
    background-color: #F9F9F9;
    border: 2px solid #E9E9EB;
}

    #mega-draw-table td {
        background-color: white;
    }
/* Offline-games END */

/* Privacy START */
.privacy-banner {
    width: 100%;
    overflow: hidden;
}

.privacy-body {
    color: #222622;
}

button {
    outline: none;
}

.privacy-banner-inner img {
    width: fit-content;
    max-width: 100%;
}

.privacy-body {
    margin: 1.5rem auto;
    border-radius: 24px;
    overflow: hidden;
}

.privacy-main {
    padding: 1rem 1.8rem;
}

    .privacy-main h2 {
        font-size: 3rem;
        font-weight: 600;
        color: #222622;
    }

.privacy-main-head {
    text-align: left;
    padding-bottom: .5rem;
    border-bottom: .5px solid #E9E9EB;
    margin-bottom: 1rem;
}

.privacy-body p, .privacy-body li {
    font-size: .9rem;
    font-weight: 400;
    color: #6B6B6B;
}

.privacy-body h3 {
    font-size: 2.5rem;
    padding-bottom: 0.6rem;
    font-weight: 700;
    color: #222622;
}

ol > li {
    list-style-type: upper-alpha;
    list-style: upper-alpha;
    padding-left: 0;
    margin-top: .8rem;
}

.privacy-main-btns {
    column-gap: 1rem;
}

    .privacy-main-btns .circular {
        padding: 0.7rem 0.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap: .5rem;
        background-color: #fff;
        color: #5D615D;
    }

    .privacy-main-btns .active {
        background-color: #EDEDED;
        font-weight: 600;
        color: #171A1A;
    }

    .privacy-main-btns img {
        height: 1.3em;
    }

.terms-outer {
    margin-top: 1rem;
}

.privacy-main .hidden {
    display: none;
    margin-top: 1rem;
}

.terms-head {
    border-bottom: 1px solid #E9E9EB;
    padding-bottom: 2rem;
}

.terms-list-head ul {
    padding-left: 0rem;
}

.terms-body ol {
    padding-left: 2rem;
}

    .terms-body ol > li::marker {
        font-size: 1.5rem;
        font-weight: 700;
        color: #222622;
        padding-right: .5rem;
    }

.terms-list-head li {
    position: relative;
    padding-left: 20px; /* Space for the custom bullet */
    line-height: 1.5;
    list-style-type: none;
    padding-top: 1rem;
}

    .terms-list-head li::before {
        content: '•'; /* Custom bullet character */
        position: absolute; /* Position bullet independently */
        left: 0; /* Align with the left edge of the list */
        top: 0rem; /* Adjust vertical alignment */
        color: #00870E; /* Bullet color */
        font-size: 2rem; /* Bullet size */
    }

.terms-list-head p {
    margin-top: 0.5rem;
}

.terms-list-head h3 {
    font-size: 1.5rem;
    text-transform: uppercase;
    padding-bottom: 0;
    line-height: .9em;
}

.conditions-break {
    padding: 1rem .5rem;
}

.privacy-main-btns {
    margin-bottom: 2rem;
}

    .privacy-main-btns button:focus {
        outline: none;
    }
/* Privacy END */



/* Dashboard  */

/* index */
.main-dash-top, .main-dash-bottom {
    background-color: #fff;
    border-radius: 16px;
    padding: 1rem;
}

    .main-dash-top .main-dash-top-inner {
        column-gap: 1rem;
        align-items: stretch;
    }

.main-dash-top-box {
    border: 1px solid #E9E9EB;
    border-radius: 12px;
    width: 33%;
    padding: 1rem;
}

.head h6 {
    font-size: 12px;
    color: #6B6B6B;
}

.main-dash-top-head {
    font-size: 1.25rem;
    margin: .5rem 0;
}

.avail-b-deposit button {
    width: fit-content;
    font-size: 0.75rem;
}

.circular-green {
    background-color: #B5DCB9;
    color: #00870E;
}

.avail-b-deposit {
    margin-top: 1.5rem;
    column-gap: .5rem;
    color: #171A1A;
}

    .avail-b-deposit img {
        width: 1.5em;
    }

.main-dash-bottom {
    margin: 1.3rem 0 2rem 0;
}

.main-d-head-right button, .tb-b-prev, .tb-b-next {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: .2rem;
    font-size: 0.85rem;
    color: #6B6B6B;
    background-color: transparent;
}

.main-d-head-right button {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 0.75rem;
}

.main-d-head-right .form-group {
    margin: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

.main-d-head-right .form-control {
    margin: 0;
    font-size: 12px;
    width: 120px;
    padding: 8px 16px;
    border: 1px solid #E9E9EB;
    border-radius: 40px;
    letter-spacing: normal;
}

    .main-d-head-right .form-control option {
        position: relative;
        border: solid 6px;
    }

.main-d-head {
    width: 100%;
}

    .main-d-head .main-d-head-right {
        width: fit-content;
        column-gap: .5rem;
    }

    .main-d-head h3 {
        font-size: 1.5rem;
    }

.main-d-table {
    margin: 1.5rem 0;
}

    .main-d-table table {
        width: 100%;
        text-align: center;
        color: #6B6B6B;
        border-collapse: separate;
        border-spacing: 0 4px;
    }

.mud-table-root {
    width: 100%;
    text-align: center;
    color: #6B6B6B;
    margin-left: 12px;
}

.main-d-table-container thead th {
    font-size: 0.75rem;
    font-weight: 500;
    padding-bottom: .5rem;
}

tbody tr td {
    padding: 10px 0;
    font-size: .87rem;
}

.table-green {
    color: #00870E;
}

.table-red {
    color: #EB1414;
}

.main-d-table-container tbody tr {
    overflow: hidden; /* Ensures border radius displays */
}

    .main-d-table-container tbody tr td {
        border: 1px solid #E2E0E0; /* Adds the border */
        padding: 0.9rem 0;
        border-right: none;
        border-left: none;
        margin: 0 0 0 0;
    }

.border-left {
    padding-left: 1rem;
    border: 1px solid #E2E0E0;
    border-top-left-radius: 2rem;
    border-bottom-left-radius: 2rem;
}

.border-right {
    padding-right: 1rem;
    border-right: 1px solid #E2E0E0;
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem;
}

.table-bottom .tb-right {
    width: fit-content;
}

div .tb-btn {
    font-size: 0.87rem;
    font-weight: 400;
    color: #6B6B6B;
}

.tb-right .tb-btn-outer {
    column-gap: .3rem;
}

.table-bottom .tb-right {
    column-gap: 1.3rem;
}

.tb-btn-outer .circular {
    padding: 3px 15px;
}

.tb-b-next {
    color: #020202;
}

.tb-left h6 {
    color: #6B6B6B;
    font-size: 0.87rem;
}

.table-bottom .tb-left {
    column-gap: .5rem;
}

#rows-id {
    width: fit-content;
    color: #6B6B6B;
    background-color: #F5F5F5;
    font-size: 0.87rem;
    font-weight: 400;
    padding: 3px 7px;
    border: 1px solid #E9E9EB;
}

.deposit-amt-inner {
    cursor: pointer;
    border: none;
    background-color: #F5F5F5;
    overflow: hidden;
    border-radius: 24px;
    position: relative;
}

    .deposit-amt-inner button {
        border: none;
        font-weight: 600;
        font-size: 12px;
    }

    .deposit-amt-inner .deposit-nav-link-2 {
        background-color: #00870E;
        color: #fff;
        font-weight: 500;
        border-radius: 24px;
    }

.deposit-nav-link {
    width: 50%;
    position: relative;
    padding: .75rem 1.25rem;
    background: transparent;
}

.deposit-amt .circular {
    padding: 0;
}

.deposit-amt-inner .flex-start {
    column-gap: .3rem;
}

.deposit-nav-link .naira-icon {
    background-color: #B5DCB9;
    height: 2em;
    width: 2em;
    padding: 2px;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 7px;
}

.deposit-amt-inner .flex-start img {
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* width: 100%;
    height: 100%;*/
}

.deposit-nav-link .naira-drop {
    width: 2.5em;
}

.deposit-nav-link h5 {
    font-size: 12px;
    font-weight: 600;
    margin-left: 1rem;
}

.user-notif {
    width: fit-content;
    cursor: pointer;
    column-gap: 1rem;
}

    .user-notif .circular {
        padding: inherit 1.25rem;
        border-radius: 24px;
        background-color: transparent;
    }

.aside-header {
    font-size: 1.3rem;
    color: #6B6B6B;
    margin: 1rem .5rem;
    font-weight: 500;
}

.user img {
    width: 2rem;
    height: 2rem;
    border-radius: 100%
}

.user h4 {
    color: #020202;
    font-size: 0.8rem;
    font-weight: 600;
}

.user-info span {
    font-weight: 600;
    width: fit-content;
    height: 20px;
}

.user-info #profile-span {
    height: 100%;
}

.user-info img {
    width: 12px;
    margin-left: -10px;
    cursor: pointer;
}

.user-info {
    color: #020202;
    font-size: 12px;
}

.user-box .user {
    column-gap: .5rem;
}

.bell {
    width: 1.3rem;
}

.chat {
    width: 2.7rem;
}

.dash-nav-inner {
    column-gap: .5rem;
}

.dashboard-body h1, .dashboard-body h2, .dashboard-body h3, .dashboard-body h4 {
    color: #020202;
    font-weight: 600;
}

.dashboard-body input, .dashboard-body select {
    border: 1px solid #9195A5;
    border-radius: 12px;
    width: 100%;
    padding: 7px 15px;
    outline: none;
    color: #6B6B6B;
    background-color: transparent;
    font-size: 0.87rem;
}


/* Profile dash */
#profile-form input {
    color: #6B6B6B;
    padding-left: 10px;
}

    #profile-form input::placeholder {
        color: #6B6B6B;
    }

#profile-form img {
    background-color: transparent;
    /*left: 90%;*/
}

#profile-form .submit-btn {
    color: #fff;
}

#profile-form select, .withdraw-form select {
    padding: 0px 0.8rem;
}

#profile-form option:disabled {
    font-size: 0.875rem;
    color: #6B6B6B;
}

.profile-outer {
    margin: auto 1.5rem;
    border-radius: 16px;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}

.profile-head h3 {
    font-size: 1.5rem;
    font-weight: 700;
    padding: .7rem 1rem;
}

.profile-head {
    border-bottom: 1px solid #E9E9EB;
}

.profile-info {
    padding: 1rem;
    border: .5px solid #E9E9EB;
    border-radius: 16px;
    width: 60%;
    max-width: 35rem;
    margin: 1.5rem auto;
}

    .profile-info h5 {
        font-size: 1rem;
        padding: .8rem 0;
        font-weight: 500;
        color: #6B6B6B;
    }

    .profile-info .profile-bio {
        align-items: flex-end;
    }

.image-outer {
    height: 7.25rem;
    width: 7.25rem;
    border-radius: 100%;
    overflow: hidden;
    cursor: pointer;
}

    .image-outer img {
        position: relative;
        width: 100%;
        height: 100%;
    }

.bio-imageandbtn {
    column-gap: 1rem;
}

    .bio-imageandbtn button {
        background-color: #2792EF;
        font-size: .75rem;
        font-weight: 600;
        line-height: 18px;
        color: #fff;
        padding: 12px 26px;
    }

.profile-bio .user-info {
    width: fit-content;
    align-items: flex-end;
    column-gap: .5rem;
}

    .profile-bio .user-info h4 {
        font-size: 1rem;
        font-weight: 400;
    }

    .profile-bio .user-info p {
        font-size: 0.87rem;
    }

    .profile-bio .user-info img {
        margin: 0;
    }

.profile-info .ver-tag {
    font-size: 1.2rem;
    font-weight: 600;
    column-gap: .5rem;
}

.ver-tag img {
    height: 2rem;
    width: 2rem;
}

input, select {
    border: 1px solid #9195A5;
    border-radius: 12px;
    width: 100%;
    padding: 7px 15px;
    outline: none;
    color: #6B6B6B;
}

.form-box {
    width: 50%;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: flex-start;
    position: relative;
}

.profile-form .flex-between {
    column-gap: 1.7rem;
}

.form-box label {
    line-height: .5rem;
    font-size: .87rem;
    font-weight: 500;
    color: #343437;
}

.profile-form {
    margin-top: 2rem;
}

    .profile-form > div {
        margin-bottom: .5rem;
    }

.form-box-inner {
    position: relative;
    width: 100%;
}

    .form-box-inner input {
        position: relative;
    }

    .form-box-inner img {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 90%;
    }

.profile-form .submit-btn {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    font-size: 1rem;
    font-weight: 600;
    color: #6B6B6B;
    padding: 12px 25px;
}



/* Deposit dash */
.deposit-outer {
    margin: auto 1.5rem;
    border-radius: 16px;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}

.deposit-head h3 {
    font-size: 1.5rem;
    font-weight: 700;
    padding: .7rem 1rem;
}

.deposit-head {
    border-bottom: 1px solid #E9E9EB;
}

.deposit-info, .deposit-guide {
    padding: 1rem;
    border: .5px solid #E9E9EB;
    border-radius: 16px;
    width: 50%;
    margin: 1.5rem auto;
}

.deposit .deposit-guide {
    border: none;
    padding-left: 0;
    margin-bottom: 0;
}

.deposit-info h5 {
    font-size: 1rem;
    padding: .8rem 0;
    font-weight: 500;
}


.form-box {
    width: 100%;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: flex-start;
    position: relative;
}

    .form-box label {
        line-height: .5rem;
        font-size: .87rem;
        font-weight: 500;
        color: #343437;
    }

.deposit-form .form-box {
    margin-bottom: 1rem;
}

.form-box-inner {
    position: relative;
    width: 100%;
}

    .form-box-inner input {
        padding-left: 2rem;
    }

        .form-box-inner input::placeholder {
            color: #00870E;
            font-size: 0.87rem;
        }

    .form-box-inner img {
        position: absolute;
        width: 1.3em;
        height: 1.3em;
        top: 50%;
        transform: translateY(-50%);
        padding: 5px;
        background-color: #B5DCB9;
        border-radius: 100%;
        left: 7px;
    }


.deposit-form .submit-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 50px;
    color: #fff;
    padding: 10px 25px;
    background-color: #00870E;
    margin-top: 2rem;
}


.deposit-form .submit-btn-disabled {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 50px;
    color: #fff;
    padding: 10px 25px;
    background-color: gray;
    margin-top: 2rem;
}

.deposit-guide h3 {
    font-size: 1.5rem;
    font-weight: 600;
    padding-bottom: 5px;
    border-bottom: 1px solid #00870E;
    width: fit-content;
    margin-bottom: .9rem;
}

.deposit-guide-list h4 {
    font-size: 1.2rem;
    line-height: 21.6px;
}

.deposit-guide-list p {
    font-size: 0.87rem;
    line-height: 21px;
    padding: 5px 0;
    color: #6B6B6B;
    font-weight: 400;
}

.deposit-guide ul {
    list-style: disc;
    color: #00870E;
}

.deposit-guide-list-outer {
    margin-left: 1rem;
}




/* Withdaw dash*/
.withdraw-tab .hidden {
    display: none;
}

.withdraw-outer {
    /*margin: auto 1.5rem;*/
    border-radius: 16px;
    margin-bottom: 2rem;
}

.withdraw-head h3 {
    font-size: 1.5rem;
    font-weight: 700;
    padding: .8rem 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.withdraw-head {
    border-bottom: 1px solid #E9E9EB;
}

.withdraw-info, .withdraw-guide {
    padding: 1rem;
    border: .5px solid #E9E9EB;
    border-radius: 16px;
    width: 50%;
    margin: 1.5rem auto;
}

.withdraw .withdraw-guide {
    border: none;
    padding-left: 0;
    margin-bottom: 0;
}

.withdraw-info h5 {
    font-size: 1rem;
    padding: .8rem 0;
    font-weight: 500;
}


.form-box {
    width: 100%;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: flex-start;
    position: relative;
}

    .form-box label {
        line-height: .5rem;
        font-size: .87rem;
        font-weight: 400;
        color: #343437;
    }

.withdraw-form .form-box {
    margin-bottom: 1rem;
}

.form-box-inner {
    position: relative;
    width: 100%;
}

    .form-box-inner input {
        padding-left: 2rem;
    }

.new-acount input {
    padding-left: .8rem;
}

.form-box-inner input::placeholder {
    color: #00870E;
    font-size: 0.87rem;
}

.new-acount input::placeholder {
    color: #6B6B6B;
}

.form-box-inner img {
    position: absolute;
    width: 1.3em;
    height: 1.3em;
    top: 50%;
    transform: translateY(-50%);
    padding: 5px;
    background-color: #B5DCB9;
    border-radius: 100%;
    left: 7px;
}


.withdraw-form .submit-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 50px;
    color: #fff;
    padding: 10px 25px;
    background-color: #00870E;
    margin-top: 2rem;
}

.withdraw-form .submit-btn-disabled {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 50px;
    color: #fff;
    padding: 10px 25px;
    background-color: gray;
    margin-top: 2rem;
}

.withdraw-guide h3 {
    font-size: 1.5rem;
    font-weight: 600;
    padding-bottom: 5px;
    border-bottom: 1px solid #00870E;
    width: fit-content;
    margin-bottom: .9rem;
}

.withdraw-guide-list h4 {
    font-size: 1.2rem;
    line-height: 21.6px;
}

.withdraw-guide-list p {
    font-size: 0.87rem;
    line-height: 21px;
    padding: 5px 0;
    color: #6B6B6B;
    font-weight: 400;
}

.withdraw-guide ul {
    list-style: disc;
    color: #6B6B6B;
}

.withdraw-guide li::marker {
    color: #00870E;
}

.withdraw-guide-list-outer {
    margin-left: 1rem;
}

.withdraw .withdraw-container {
    align-items: flex-start;
}

.withdraw-container .withdraw-tab-btn {
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: flex-start;
    padding: 1rem .8rem;
    row-gap: 1rem;
}

.withdraw-tab-btn button {
    width: 100%;
    background-color: transparent;
    font-weight: 500;
    font-size: 0.75rem;
    padding: 8px;
    display: flex;
    justify-content: start;
    column-gap: .5rem;
    align-items: center;
    color: #6B6B6B;
}

.withdraw-tab-btn .active {
    font-weight: 700;
    color: #020202;
    border: 1px solid #00870E;
    background-color: #DFEAE2;
}

.withdraw-container .withdraw-tab {
    border-left: 1px solid #E9E9EB;
    width: 100%;
}

.form-box-radio .radio-label {
    font-weight: 500;
    font-size: 1.2rem;
    color: #000;
    display: flex;
    justify-content: start;
    align-items: center;
    column-gap: .5rem;
}

.radio-label input {
    width: fit-content;
}

input[type="radio"] {
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 1rem;
    height: 1rem;
    border: 1px solid #6B6B6B;
    border-radius: 100%;
    outline: none;
    cursor: pointer;
}

#selectAccountTypeModal input[type="radio"] {
    width: 0.75rem;
    height: 0.75rem;
}

input[type='radio']:checked {
    background-color: #00870E;
}

.form-box-radio {
    margin-bottom: .8rem;
}

.withdraw-form h5 {
    font-weight: 500;
    font-size: 1rem;
    color: #000000;
    padding: .2rem 0;
}



/* Withdraw end */


/* transaction */
div .transaction-body {
    width: 90%;
}

.transact-head h3 {
    font-size: 1rem;
}

.transact-head .main-d-head-right {
    width: fit-content;
    column-gap: .5rem;
}

    .transact-head .main-d-head-right .circular {
        font-size: 0.8rem;
        color: #6B6B6B;
    }

.transact-head {
    padding-bottom: 1rem;
    border-bottom: 1px solid #E9E9EB;
}

.transaction-body table {
    width: 100%;
}

.transaction-body .tb-left .circular {
    width: fit-content;
}

.transaction-body .table-bottom-outer {
    margin-top: 1rem;
}

.dashboard-body td button {
    cursor: pointer;
    /*background-color: transparent;
	color: #6B6B6B;*/
    border-radius: 50px;
    border: 1px solid #e9e9eb;
    padding: 2px 7px;
}

.hidden {
    display: none;
}

/* gaminh-history */
.gaming-history select {
    width: fit-content;
    border-radius: 50px;
    border: 1px solid #e9e9eb;
    padding: 8px 10px;
}

/* earning */
.earning-body .dash-earning-total {
    color: #6B6B6B;
    text-align: right;
    padding-right: 3rem;
    margin-bottom: -1rem;
    margin-top: 1rem;
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
}

    .earning-body .dash-earning-total span {
        color: #00870E;
    }

.earning-body .earning-search {
    overflow: hidden;
    border: 1px solid #e9e9eb;
    background-color: transparent;
    padding: 7px 15px;
    position: relative;
}

.earning-search input {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 0.87rem;
    border: none;
    padding-left: 1rem;
}

.earning-search img {
    height: 1rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: .5rem;
}

.giftbox img {
    width: 2rem;
    height: 2rem;
}

/* Dashboard end */

/* Dashboard Notification Start */
.notification-details-container {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .notification-details-container h2 {
        font-size: 1.125rem;
        font-weight: 500;
    }

    .notification-details-container #notification-search-container, #login-report-search-container {
        border: 1px solid #EDEDED;
        width: 18rem;
    }

        .notification-details-container #notification-search-container input {
            width: 100%;
            padding-left: 0.4rem;
            border: none;
        }

#notification-container #notification-filter {
    margin-top: 1.6rem;
    width: 100%;
    gap: 0.5rem;
}

    #notification-container #notification-filter .notification-amount {
        background-color: #EAEAEA;
        width: 1.875rem;
        height: 0.938rem;
        color: #020202;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2.5rem;
    }

    #notification-container #notification-filter .all-filter-category .notification-amount {
        background-color: #F48080;
        color: #020202;
        font-size: 500;
    }

    #notification-container #notification-filter .filter-categories {
        flex-basis: 33%;
        border: 1px solid #E9E9EB;
    }

#notification-container .notifications-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.4rem auto;
    padding: 0.8rem 0;
    border-bottom: 1px solid #E9E9EB;
}

#notification-container .no-border {
    border: none;
}

#notification-container .notifications-container .circle {
    width: 8px;
    height: 8px;
    background-color: #00870E;
    border-radius: 100%
}

#notification-container .notifications-container .circleopen {
    width: 8px;
    height: 8px;
    background-color: #9a9a9a;
    border-radius: 100%
}

#notification-container .notifications-container .trash {
    width: 25px;
    height: 25px;
    background-color: #FAC3C3;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    cursor: pointer;
}

#notification-container .notifications-container h3 {
    font-size: 0.875rem;
    font-weight: 500;
    color: #020202;
}

#notification-container .notifications-container span {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: #6B6B6B;
}
/* Dashboard Notification End */

/* Dashboard Security Start */
#security-container .withdraw-tab {
    height: 100dvh;
}

.security-modal-container {
    width: 90%;
    max-width: 35rem;
    margin: 4rem auto;
    padding: 2rem 1.6rem;
    border: 1px solid #E9E9EB;
    border-radius: 1rem;
}

    .security-modal-container label {
        color: #020202;
        font-size: 1rem;
        font-weight: 500;
        line-height: 24px;
    }

    .security-modal-container input {
        padding: 0.8rem 0.5rem;
    }

    .security-modal-container button {
        padding: 0.8rem 0.5rem;
        font-size: 1rem;
        font-weight: 600;
        text-align: center;
    }

.btn-modal-container button {
    padding: 0.8rem 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
}

#otp-resend {
    float: right;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 18px;
    text-align: right;
    color: #00870E;
}
/* Dashboard Security End */

/* Dashboard Login Report Start */
.login-stats-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 1.2rem;
}

.stat-container {
    width: 100%;
    flex-basis: 33%;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 1rem 0.8rem;
    border: 1px solid #E9E9EB;
    border-radius: 0.75rem;
    box-shadow: 4px 4px 16px 0px #D4DBDB40;
}

    .stat-container .image-container {
        width: 100%;
        max-width: 3.5rem;
        height: 3.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.5rem;
    }

    .stat-container .purple {
        background: #F2E8F6;
        border: 1px solid #CD96E7;
    }

    .stat-container .green {
        background: #E3F7ED;
        border: 1px solid #96E79E
    }

    .stat-container .red {
        background: #FEE7EB;
        border: 1px solid #E796A3;
    }

    .stat-container h3 {
        width: 100%;
        color: #6B6B6B;
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 21px;
    }

    .stat-container h2 {
        margin-top: 0.2rem;
        font-size: 1.375rem;
        font-weight: 700;
        line-height: 33px;
    }

    .stat-container .purple-text {
        color: #923EB9;
    }

    .stat-container .green-text {
        color: #00870E;
    }

    .stat-container .red-text {
        color: #F73757;
    }

    .stat-container .progress {
        height: 6px;
    }

        .stat-container .progress .purple {
            background-color: #923EB9;
        }

        .stat-container .progress .green {
            background-color: #00870E;
        }

        .stat-container .progress .red {
            background-color: #F73757;
        }

.login-report-details-container {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #E9E9EB;
}

    .login-report-details-container h3 {
        font-size: 1.5rem;
        font-weight: 600;
        line-height: 36px;
    }

#login-report-search-container input {
    width: 18rem;
    border: none;
}

.login-report-table .withdraw-info {
    padding: 0.2rem 1rem;
    border-radius: 16px;
    border: none;
    width: 100%;
    margin: 1.5rem auto;
}

.login-report-table td button {
    background: #00870E;
    color: white;
}
/* Dashboard Login Report End */
#transactionModal .close {
    width: 100%;
    text-align: left;
}

#transactionModal .modal-header {
    background: linear-gradient(90deg, #F2F8F4 0%, #DFEAE2 100%);
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

#transactionModal .modal-body-content {
    margin: 1rem;
    padding: 1.5rem 1rem;
    border: 1px solid #E9E9EB;
    border-radius: 1rem;
    background: #FFFFFF;
}

    #transactionModal .modal-body-content h3 {
        font-size: 1rem;
        font-weight: 500;
        line-height: 18px;
        text-align: left;
        color: #020202;
        padding-bottom: 1rem;
        border-bottom: 1px solid #E9E9EB;
    }

    #transactionModal .modal-body-content .no-border {
        border: none !important;
    }

    #transactionModal .modal-body-content .details-container {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.7rem 0;
        border-bottom: 1px solid #E9E9EB;
    }

        #transactionModal .modal-body-content .details-container h4 {
            font-size: 1rem;
            font-weight: 400;
        }

        #transactionModal .modal-body-content .details-container .medium {
            font-weight: 500;
        }

        #transactionModal .modal-body-content .details-container button {
            background-color: #E4EEE7;
            color: #00870E;
            border-radius: 1rem;
            padding: 0.2rem 0.5rem;
        }

.search-inpu:focus, .search-input:focus {
    outline: none !important;
    border: none;
}


.mega-japa-page-container iframe {
    position: relative;
    width: 560px;
    height: 100%;
    min-height: 50rem; /* Ensures a minimum height for the iframe */
    margin: auto;
    border-radius: 8.95px;
}

#mega-japa-page-controls {
    z-index: 1;
    left: 1.0rem;
    position: absolute;
    background: #00870E;
    width: 26.86px;
    height: 26.86px;
    padding: -6px 8.4px 0px 8.39px;
    gap: 0px;
    border-radius: 100%;
    margin-top: 3px;
}

#mega-japa-page-controls-menu {
    z-index: 1;
    right: 0.2rem;
    left: auto;
    position: absolute;
    background: #00870E;
    width: 26.86px;
    height: 26.86px;
    padding: -6px 8.4px 0px 8.39px;
    gap: 0px;
    border-radius: 100%;
    margin-top: 3px;
}


#mega-japa-page-controls img {
   /* width: 5.88px;*/
    height: 20.07px;
    filter: invert(1) brightness(2);
}
#mega-japa-page-controls-menu img {
    width: 14.88px;
    height: 15.07px;
    filter: invert(1) brightness(2);
}

.flex-itc-jucg {
    display: initial;
    align-items: center;
    justify-content: center;
}

/* Mobile (up to 767px) */
@media (max-width: 767px) {
    /* Styles for mobile devices */
    /* MEGA JAPA PAGE */
    .mega-japa-page-container {
        width: 98%;
        height: 100%;
        margin: auto;
        padding: -1rem -1rem;
    }

    .mega-japa-page-container iframe {
        position: relative;
        height: 100%;
        margin: auto;
        min-height: 100dvh;
        padding-bottom: 2px;
        width: 100vw;
        padding-top: 3rem;
    }

   
}

/* Tablet (768px to 1024px) */
@media (min-width: 768px) and (max-width: 1024px) { /* Styles for tablets */
    /* MEGA JAPA PAGE */
    .mega-japa-page-container {
        background: url(../images/mega-japa-bg.png), url(../images/mega-japa-2.png);
        background-position: center, center;
        background-size: cover, cover;
        background-repeat: no-repeat;
        width: 98%;
        /* height: 100%;*/
        margin: auto;
        padding: 1rem 1rem;
        border: 1px solid #D6DADA;
        border-radius: 1.5rem;
        box-shadow: 2px 2px 12px 0px #E4E3E3E5;
    }

    .mega-japa-page-container iframe {
        position: relative;
        min-width: 660px;
        min-height: 100dvh;
        height: 100%;
        margin: auto;
        padding-top: 3rem;
    }
   
}

/* Desktop (1025px and above) */
@media (min-width: 1025px) { /* Styles for desktops */
    
    /* MEGA JAPA PAGE */
    .mega-japa-page-container {
        background: url(../images/mega-japa-bg.png), url(../images/mega-japa-2.png);
        background-position: center, center;
        background-size: cover, cover;
        background-repeat: no-repeat;
        width: 98%;
        min-height: 40vh;
        margin: auto;
        padding: 1rem 1rem;
        border: 1px solid #D6DADA;
        border-radius: 1.5rem;
        box-shadow: 2px 2px 12px 0px #E4E3E3E5;
    }

        .mega-japa-page-container iframe {
            position: relative;
            width: 560px;
            min-height: 90dvh;
            margin: auto;
        }
   
}





/* MEGA JAPA PAGE */

.sub-nav {
    display: none;
    position: absolute;
    top: 100%; /* Positions it below the user-box */
    left: 0;
    margin-top: 0.2rem;
    background-color: #fff;
    padding: 5px 0px;
    border: 1px solid #E9E9EB;
    box-shadow: 0px 4px 10px 0px #00000014;
    border-radius: 8px;
    overflow: hidden;
    z-index: 10;
    width: 200px;
}

    .sub-nav .a-container {
        display: flex;
        align-items: center;
        padding: 0px 15px;
    }

        .sub-nav .a-container:hover {
            background-color: #fafafa;
        }

    .sub-nav a {
        display: block;
        padding: 5px 3px;
        text-decoration: none;
        color: #6B6B6B;
        transition: background-color 0.3s ease;
    }

#depositSubNav {
    margin-top: 0.2rem;
    padding: 7px 5px;
}

    #depositSubNav .border-b {
        border-bottom: solid 1px #E9E9EB;
    }

    #depositSubNav .deposit-text-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 5px;
    }

        #depositSubNav .deposit-text-container h3 {
            font-size: 12px;
            font-weight: 400;
            line-height: 18px;
            color: #6B6B6B;
        }

        #depositSubNav .deposit-text-container h4 {
            font-size: 12px;
            font-weight: 600;
            line-height: 18px;
            color: #020202;
        }

/* Show the sub-nav when it is active */
.sub-nav.active {
    display: block;
}

/* Optional hidden class for better toggling */
.hidden {
    display: none;
}

.bg-menu-gradient {
    background: linear-gradient(179.34deg, rgba(0, 135, 14, 0.6) 0.59%, rgba(255, 255, 255, 0) 99.46%);
    border-top: 1px solid #00870E;
}

@media (min-width: 500px) and (max-width: 900px) {
    .download-button-container {
        padding: 2rem 1.4rem 3rem 1.4rem !important;
    }

    .download-image-button-container .qr-code {
        width: 50vw;
        display: flex;
        flex-shrink: 0;
        flex-basis: 50%;
    }

    .qr-code img {
        width: 100% !important;
        height: 15rem !important;
        object-fit: cover;
    }

    .download-image-button-container .buttons {
        width: 50vw;
        flex-basis: 50%;
    }

        .download-image-button-container .buttons button {
            width: 100% !important;
        }
}

@media (max-width: 900px) {
    #sidebar {
        left: -100%; /* Start off-screen */
        width: 250px;
        transition: left 0.3s ease-in-out;
        overflow-x: hidden;
    }

    .sub-nav {
        left: -9rem;
    }

    #depositSubNav {
        left: 0;
    }

    .mission-right, .vision-left {
        height: 13em;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .mission-right img, .vision-left img {
            max-height: 100%;
        }

    .about-vision {
        margin-bottom: 1.8rem;
    }

    .about-mission {
        margin: 1.8rem 0;
    }

        .about-mission img {
            padding-top: 1rem;
        }

    .desktop-hidden {
        display: block;
    }

    .history-g .desktop-hidden {
        display: block;
    }

    .mobile-hidden {
        display: none !important;
    }

    body .body {
        display: block !important;
        overflow-x: hidden;
    }

    .navbar-brand img {
        width: 78px;
        height: 32px;
    }

    body .body {
        position: relative;
    }

    .body #sidebar {
        position: fixed;
        display: hidden;
        z-index: 49;
        top: 0;
        padding: 0;
        padding-bottom: 50rem;
    }

    #main {
        transition: margin-left 0.3s ease-in-out;
        position: relative;
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
    }

    #body-main {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }

    #sidebar {
        width: 32%;
    }

    #main {
        /* flex: 1; */
        width: 100%;
        left: 0;
        /* margin-left: 250px; */
    }

    .online-signin {
        width: fit-content;
        display: flex;
        align-items: stretch;
        column-gap: .7rem;
    }

    #state-marquee {
        width: 100vw;
    }

    .footer-hide {
        display: none;
    }

    footer {
        background-image: url("../images/footer-mobile-svg.svg");
        /* background-position: center; */
        width: 100%;
        left: 0;
        margin: 2rem 0 5.2rem 0;
        border-radius: 0;
        padding: 1rem 1.5rem 4rem 1.5rem;
    }

    .footer-top {
        display: block;
        text-align: center;
    }

    .footer-top-box li {
        text-align: center;
    }
    /* .footer-top-box li:not(:last-child) {
		border-right: 2px solid #e9e9eba8;
		padding-right: 5px;
	} */
    .footer-top-box .underline {
        width: fit-content;
        text-decoration: none;
    }

    .footer-top-box .social-inner {
        width: 80%;
        justify-content: center;
        margin: 0 auto;
    }

    .payment-method-inner {
        display: block;
        text-align: center;
    }

        .payment-method-inner h3 {
            font-size: 1.2rem;
            padding-bottom: .3rem;
        }

    .footer-bottom {
        display: block;
        margin: 0 auto;
        text-align: center;
    }


    .footer-bottom-left p {
        width: 100%;
    }


    .footer-bottom-left-img img {
        width: 12em;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .footer-bottom-right-img {
        column-gap: 1.5rem;
    }

        .footer-bottom-right-img img {
            height: 3em;
        }


    .footer-bottom-left, .footer-bottom-right {
        width: 100%;
    }

    .footer-bottom .flex-between {
        align-items: center;
    }

    .footer-copy h6 {
        color: #d7d9dcc9;
        font-size: .65rem;
        text-align: center;
    }

    .footer-copy {
        padding: 1rem 0 2.5rem 0;
    }

    .footer-bottom-left .footer-bottom-left-img {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .footer-bottom-right-img {
        justify-content: center;
    }

    .footer-top-box ul {
        display: flex;
        margin: 0 auto .5rem auto;
        justify-content: center;
        align-items: center;
        column-gap: 1.5rem;
    }

    .footer-top > *:nth-child(4) ul {
        flex-wrap: wrap;
    }

    .footer-top-box h4 {
        padding-bottom: .3rem;
        margin-top: 1rem;
    }

    /* Home css START */
    .filter-container {
        padding-right: 0.4rem;
        padding-left: 0.4rem;
    }

    .search-input-container {
        width: 2.4rem;
        height: 2.4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

        .search-input-container img {
            margin: 0 auto;
        }

    .search-input {
        display: none;
    }

        .search-input::placeholder {
            display: none;
            font-size: 0;
            width: fit-content;
        }
    /* .filter-container {

    } */
    .filter-category {
        flex-basis: 80%;
        padding: 0.2rem 0.4rem;
    }

    .online-game-item {
        width: 100%;
        flex-direction: column;
        gap: 0.4rem;
        border: solid 1px #E9E9EB;
        padding: 0.5rem;
        border-radius: 1rem;
    }

    .filter-categories {
        flex-basis: 33.3%;
        padding: 0.4rem;
    }

    .online-games-section, .offline-games-section {
        padding: 1rem 0.7rem;
    }

    .header-container {
        gap: 0.3rem;
    }

    .header-two {
        font-size: 1.2rem;
    }

    .online-games-section .controls, .offline-games-section .controls {
        width: 1.5rem;
        height: 1.5rem;
    }

    .online-game-item-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.3rem;
    }

    .online-game-item .content {
        width: 100%;
    }

    .online-game-item {
        width: 100%;
        flex-direction: column;
        gap: 0.4rem;
        border: solid 1px #E9E9EB;
        padding: 0.5rem;
        border-radius: 1rem;
    }

        .online-game-item .image {
            width: 100%;
            border: solid 1px;
        }

    .offline-game-card {
        width: 47%;
    }

    .online-game-item .image {
        width: 100%;
        height: 5rem;
        border: solid 1px;
    }

    .online-game-item h3 {
        font-size: 0.875rem;
        font-weight: 500;
    }

    .online-game-item .content {
        width: 100%
    }

    .offline-game-item-container {
        flex-wrap: wrap;
        position: relative;
        overflow: hidden;
        gap: 0.75rem;
    }

    .offline-game-card .header {
        padding-top: 1rem;
        gap: 0.3rem;
    }

    .offline-game-card h2 {
        font-size: 0.9rem;
    }

    .offline-game-card .image {
        margin-top: 0rem;
    }

        .offline-game-card .image img {
            width: 65px;
            padding-top: 0.2rem;
            margin: 0 auto;
            object-fit: contain;
            background-repeat: no-repeat;
        }

    #state-mega-img {
        width: 78px;
    }

    .offline-game-card .line {
        margin: 0.5rem 0;
    }

    .offline-game-card .price h4 {
        font-size: 0.75rem;
        font-weight: 500;
    }

    .offline-game-card .price h3 {
        font-size: 0.625rem;
    }

    .offline-game-card button {
        margin-top: 0.4rem;
        padding: 0.3rem;
        font-size: 0.604rem;
    }

    .next-draw-container .w-50 {
        padding: 0.3rem 0rem;
    }

        .next-draw-container .w-50 h3 {
            font-size: 0.5rem;
        }

        .next-draw-container .w-50 p {
            font-size: 0.528rem;
        }

    .padding {
        padding: 0.4rem 0.5rem;
    }

    .results-container {
        flex-direction: column;
    }

    .lw-filter-container {
        width: 100%;
        display: flex;
    }

    .lw-filter-category {
        flex-basis: 100%;
        width: 100%;
        display: flex;
        gap: 0.2rem;
        border-radius: 54px;
        padding: 0.2rem 0.2rem;
    }

    .filter-categories {
        flex-shrink: 0;
        flex-basis: 33.3%;
        padding: 0.4rem;
    }

    .lw-filter-categories {
        flex-basis: 33.3%;
        gap: 0.2rem;
        padding: 0.4rem 0rem;
        font-size: 9px;
    }

    .lw-all-filter-category img {
        width: 16px;
    }

    .table td .text-container {
        display: flex;
        align-items: center;
        gap: 8px; /* Adjust spacing as needed */
        flex-wrap: nowrap; /* Prevents line wrapping */
        margin-right: 1rem;
    }

    .table td h4 {
        margin: 0; /* Removes default spacing */
        white-space: nowrap; /* Prevents line breaks */
    }

    .table td .image {
        flex-shrink: 0; /* Keeps image from resizing */
    }

    .mega-japa-results-container {
        padding: 0.8rem 0.7rem;
    }

    .top-players, .mega-japa {
        width: 100%;
    }

        .mega-japa h1, .top-players h2 {
            font-size: 1.5rem;
        }

    .mega-japa-card .time h2 {
        font-size: 0.75rem;
    }

    .border-right .text-container {
        justify-content: start;
    }

    .remove-td {
        display: none;
    }

    .lw-custom-table tbody tr #index {
        background-color: #F4F4F4;
    }

    .lw-custom-table tbody tr h4 {
        position: relative;
        top: 0.1rem;
        font-size: 0.7rem;
        font-weight: 500;
        margin: 0;
        padding: 0;
    }
    /* CHECK RESULTS */
    .check-results-container, .mega-japa-results-container {
        z-index: 1;
        width: 100%;
        margin: 2rem auto;
        margin-bottom: 6.5rem;
        padding: 3rem 1rem;
    }

        .check-results-container .cancel {
            top: 0;
            right: 0.4rem;
        }

        .check-results-container h2 {
            z-index: 3;
            margin-top: 1rem;
            text-align: center;
            font-size: 1.438rem;
        }

        .check-results-container p {
            z-index: 3;
            width: 100%;
            margin-top: 0.6rem;
            font-size: 0.875rem;
        }

    .check-results-form {
        z-index: 3;
        width: 100%;
        margin-top: 1.3rem;
        padding: 1.4rem 0.3rem;
    }

        .check-results-form h4, .check-results-form h3 {
            font-size: 1.25rem;
            font-weight: 600;
            text-align: center;
        }

        .check-results-form select {
            width: 85%;
            margin: 1rem auto;
            padding: 0.6rem;
        }

        .check-results-form .input-container {
            width: 85%;
            margin: 0 auto;
            margin-top: 0.5rem;
        }

            .check-results-form .input-container h3 {
                font-size: 1rem;
            }

        .check-results-form input {
            width: 100%;
            margin-top: 0.4rem;
            padding: 0.5rem;
        }

    .check-results-container #design-2 {
        bottom: 0;
        right: -1rem;
        height: fit-content;
        z-index: 2;
    }

    .check-results-container #design-3 {
        top: 0;
        right: -1rem;
        height: fit-content;
        z-index: 2;
    }

    #main .latest-winning-page {
        margin-top: 0rem;
        margin-bottom: 6.5rem;
    }

    #online-see-all-carousel .carousel-item img, #offline-games-banner img {
        height: 8rem;
    }

    .all-games-item-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: start;
        gap: 0.6rem;
        margin-top: 1rem;
    }

    .all-games-item {
        width: 33%;
        flex-basis: 31%;
        padding: 0;
        border-radius: 8px;
        gap: 0;
    }

        .all-games-item .image {
            width: 100%;
        }

        .all-games-item .image {
            height: 5.938rem;
            margin-bottom: 0;
        }

        .all-games-item .content {
            border-radius: 5px;
            margin: 0rem;
            padding: 0.2rem;
            padding-top: 0rem;
        }

            .all-games-item .content .header {
                padding: 0;
                margin: 0;
            }

            .all-games-item .content h2 {
                font-size: 0.625rem;
                padding: 0;
                margin: 0;
            }

    .offline-game-card .line {
        margin: 0.7rem auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .all-games-item .content .alert-mark {
        width: 0.524rem;
    }

    .all-games-item .content .all-games-line {
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .all-games-item .content .all-games-line img {
            width: 80%;
            margin: 0 auto;
        }

    .all-games-item .players {
        padding-top: 0.3rem;
    }

        .all-games-item .players h4 {
            font-size: 10px;
        }

        .all-games-item .players h5 {
            font-size: 8px;
        }

    .desc-container button {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 1.8rem;
        font-size: 500;
        font-size: 0.75rem;
        padding: 0.6rem 1rem;
    }
    /* Home css END */

    /* About START */
    body .body {
        display: block !important;
        overflow-x: hidden;
    }

    .about-banner, .faq-banner, .contact-banner, .privacy-banner-inner {
        border-radius: 16px;
    }

    .about-main h2 {
        font-size: 2rem;
    }

    .about-body p {
        font-size: 1rem;
        text-align: center;
    }

    .about-body h3 {
        text-align: center;
    }

    .about-mission .mission-inner, .about-vision .vision-inner {
        column-gap: 0;
    }

    .mission-left, .mission-right, .vision-left, .vision-right {
        width: 100%;
    }

        .vision-right p {
            width: 100%;
        }

    .vision-left {
        margin-left: 0;
    }

    .about-body-inner .mission-inner, .about-body-inner .vision-inner {
        display: block;
    }

    .about-aside {
        margin-bottom: 1rem;
    }

    .about-top-box-col {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        column-gap: .5rem;
    }

    .about-bottom .about-bottom-top {
        align-items: flex-start;
        flex-direction: column;
        justify-content: start;
        row-gap: 1rem;
    }

    .about-bottom .about-bottom-box {
        flex-direction: column;
        row-gap: 1rem;
    }

    .about-top-full img, .about-bottom-full img {
        height: 3em;
        width: 3em;
    }

    .about-top-full h6, .about-bottom-full h6 {
        width: 80%;
    }

    /* ACCOUNT */
    #account-menubar span, #account-menubar a {
        text-decoration: none;
    }

    .account-container {
        background-color: white;
        padding: 2rem 1.5rem;
        margin-bottom: 6.5rem;
        border-radius: 1rem;
        text-decoration: none;
    }

    .account-image-container {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 100%;
    }

        .account-image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            background-size: cover;
            border-radius: 100%;
        }

    .account-details-container h4 {
        color: black;
        font-size: 0.875rem;
    }

    .account-details-container .id-container h4 {
        color: #020202;
        font-size: 0.75rem;
    }

    .account-button-container .account-button {
        width: 50%;
        flex-basis: 50%;
        padding: 0.5rem;
        text-align: center;
        font-size: 0.975rem;
    }

    .account-button-container .button-orange {
        background-color: #D4721E;
        color: white;
    }

    .account-info-container .info-container {
        flex-basis: 33%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

        .account-info-container .info-container h4 {
            color: #020202;
            font-size: 0.875rem;
        }

        .account-info-container .info-container h5 {
            margin-top: 0.2rem;
            color: #6B6B6B;
            font-size: 0.625rem;
        }

    .account-info-container .info-border-left {
        border-left: solid 1px #E9E9EB;
    }

    #transactionModal .modal-body {
        padding: 1rem 0rem;
    }

    #transactionModal .modal-body-content .details-container h4 {
        font-size: 0.75rem;
    }
    /* About END */



    /* Contact START */
    .contact-main h2 {
        font-size: 2rem;
    }

    .contact-body p {
        font-size: 1rem;
        text-align: center;
    }

    .contact-body h3 {
        text-align: center;
    }

    .contact-main .contact-container {
        display: block;
    }

    .contact-form, .contact-question {
        width: 100%;
    }

    .contact-container {
        border-radius: 0px;
        padding: 0rem;
        column-gap: 0rem;
    }

    .contact-question {
        padding: 1rem 0;
        border-radius: 0;
        padding-top: 0;
        border: none;
    }

        .contact-question .question-para, .contact-question h3 {
            text-align: left;
        }

    .contact-question-inner .callandlocate {
        justify-content: center;
        column-gap: 3rem;
    }

    .contact-question-inner .email img, .contact-question-inner .call img, .contact-question-inner .locate img {
        height: 3em;
        margin-bottom: .5rem;
    }

    .contact-question .email p, .contact-question .callandlocate p {
        padding-top: .5rem;
    }

    .contact-form {
        padding-top: 1rem;
        background-color: #fff;
        padding-left: 0rem;
        padding-right: 0rem;
    }

    .contact-form-inner h3 {
        text-align: left;
        padding-bottom: 1rem;
    }

    .form-sub p {
        font-size: .8rem;
    }

    form .submit-btn {
        margin: 2rem auto 0 auto;
    }
    /* Contact END */


    /* Download START */
    .download-mobile {
        display: block;
    }

    #download-banner-image-container-mobile {
        display: block;
        position: relative;
        z-index: 20;
        width: 100%;
        height: fit-content;
        margin-bottom: 2.5rem;
    }

        #download-banner-image-container-mobile .download-page-container {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

    .download-button-container {
        background: white;
        position: relative;
        top: -9%;
        left: 0%;
        width: 100%;
        max-width: 90vw;
        padding: 1rem 1.4rem 1rem 1.4rem;
        /* width: 326.19px; */
        border-radius: 24px;
        border: none;
    }

        .download-button-container h3 {
            width: 138.58px;
            height: 19px;
            font-size: 16px;
            font-weight: 500;
            line-height: 19.49px;
            text-align: left;
            text-decoration-skip-ink: none;
            color: #011701;
        }

    .download-image-button-container {
        margin-top: 0.7rem;
        display: flex;
        align-items: start;
        gap: 0.9rem;
    }

        .download-image-button-container .qr-code img {
            width: 117.52px;
            height: 117.82px;
        }

        .download-image-button-container .buttons {
            display: flex;
            flex-direction: column;
            gap: 0.8rem;
        }

            .download-image-button-container .buttons button {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0.4rem;
                width: 125px;
                height: 48px;
                border-radius: 8px;
                background: #00870E;
                cursor: pointer;
            }

                .download-image-button-container .buttons button:hover {
                    opacity: 90%;
                }

                .download-image-button-container .buttons button img {
                    width: 24px;
                    height: 24px;
                    margin: 0;
                }

                .download-image-button-container .buttons button span {
                    font-size: 16px;
                    font-weight: 700;
                    line-height: 24px;
                    text-align: left;
                    color: #F1F1F1;
                    margin: 0;
                }

    #download-banner-image-container {
        display: none;
    }
    /* Download END */


    /* Earn START */
    #main .main-banner {
        background-color: #0B6C01;
        border-radius: 20px;
        padding: 1.3rem 1.5rem 0 1.5rem;
        text-align: center;
        width: fit-content;
        margin: 0 auto;
        max-width: 90vw;
    }

    body .body {
        display: block !important;
        overflow-x: hidden;
    }

    .main-banner .main-banner-inner {
        display: block;
    }

    .main-banner h3 {
        width: 80%;
        margin: 0 auto;
        text-align: center;
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .main-banner-para {
        font-size: .8rem;
    }

    .main-banner button {
        margin: 10px auto;
    }

    .main-banner-terms {
        font-size: .7rem;
        padding-top: 5px;
        margin: 0 auto;
    }

    .main-banner-right .earn-banner-img {
        max-width: 90%;
        width: 90%;
        margin: 0 auto;
    }

    .earn-banner-img img {
        width: 100%;
    }

    .main-earn-buttons .toogle-button-group {
        width: 80%;
    }

    .main-earn-buttons .main-earn-link {
        padding: 10px 12px;
    }

    .refer-outer {
        padding: 1rem;
        display: block;
        margin-bottom: 3rem;
    }

    .refer-left-outer, .refer-right-outer {
        width: 100%;
    }

    .refer-right-outer {
        margin-top: 1rem;
    }

    .refer-head-img {
        height: 3.5em;
    }



    .referral-link-inner {
        padding: 4px 5px;
    }

        .referral-link-inner input::placeholder {
            color: rgb(180, 180, 180);
            font-size: .7rem;
        }

        .referral-link-inner img {
            background-color: #F5F5F5;
            height: 1.5em;
            width: 1.5em;
            padding: 5px;
            border-radius: 100%;
        }

    .exclusive-btn button {
        border: 1px solid #dddddd;
        width: 100%;
        padding: 7px 0;
        display: flex;
        margin-top: 2px;
        justify-content: space-evenly;
        font-size: .9rem;
        font-weight: 500;
        background-color: transparent;
    }

        .exclusive-btn button span {
            font-weight: 600;
            font-size: .9rem;
        }

    .exclusive-para {
        font-size: .9rem;
        font-weight: 600;
        padding: 3px 0;
        display: flex;
        column-gap: 5px;
        color: #020202;
    }
    /* Earn END */


    /* Faq START */
    .faq-main h2 {
        font-size: 1.75rem;
    }

    .faq-body p {
        font-size: 0.875rem;
        text-align: left;
    }

    .faq-body h3 {
        text-align: center;
    }

    .faq-main-head {
        border-bottom: none;
    }

        .faq-main-head p {
            line-height: normal;
        }

    .faq .faq-inner {
        display: block;
    }

    .faq-aside {
        width: 100%;
    }

    .faq-aside-info {
        margin-top: 1.5rem;
    }

    .faq-line img {
        width: 150%;
    }

    .faq-card {
        padding: 0 0.5rem;
        /* display: flex;
        align-items: center;
        justify-content: space-between; */
    }

        .faq-card .faq-card-header h5 {
            /* border: 3px solid red; */
            width: 100%;
            font-weight: 500;
            font-size: 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

    #faqAccordion button[aria-expanded="false"]::after {
        content: '+';
        float: right;
        font-weight: bold;
        background: #F5F5F5;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        /* border: 0.5px solid;
        border-image-source: linear-gradient(90deg, #F2F8F4 0%, #DFEAE2 100%); */
        cursor: pointer;
    }

    /* Expanded state: Minus (-) when open */
    #faqAccordion button[aria-expanded="true"]::after {
        content: '-';
        float: right;
        font-weight: bold;
        background: #F5F5F5;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        /* border: 0.5px solid;
        border-image-source: linear-gradient(90deg, #F2F8F4 0%, #DFEAE2 100%); */
        cursor: pointer;
    }
    /* Faq END */

    /* Marquee START */
    /* Marquee END */

    /* Modal START */
    .modal-content {
        width: 94%;
        margin: 0 auto;
    }
    /*.otp-inputs input {
        width: 50%;
        height: 50px;
        font-size: 1.7rem;
    }*/

    .otp-inputs input {
        width: 15%;
        height: 50px;
        margin: 0 0.2rem;
        text-align: center;
        font-size: 1.1rem;
        border-radius: 0.75rem;
        border: 1px solid #E9E9EB;
    }
    /* Modal END */

    /* Offline-games START */
    .offline-games-container {
        background-color: white;
        width: 100%;
        padding: 1rem;
        margin: 2rem auto;
        border-radius: 1.5rem;
    }

    .desc-container {
        padding: 1rem;
        flex-direction: column;
        gap: 1rem;
    }

        .desc-container .image-container {
            width: 100%;
            min-height: 12.25rem;
            border-radius: 1rem;
        }

        .desc-container .header h2 {
            font-size: 1.5rem;
        }

        .desc-container .header p {
            font-size: 0.875rem;
        }

    iframe {
        width: 100%;
        max-height: 700px;
        margin-top: 0.5rem;
        border-radius: 8px;
    }

    .sub-rule-container h3 {
        font-size: 1.5rem;
    }

    .rules-image {
        width: 100%;
        height: 13rem;
        border-radius: 8px;
    }

    #mega-draw-image {
        width: 100%;
        height: 7rem;
        border-radius: 7px;
    }

        .rules-image img, #mega-draw-image img {
            width: 100%;
            height: 100%;
            border-radius: 8px;
            object-fit: contain;
        }

    #scratch-and-win-image img {
        width: 100%;
        border-radius: 8px;
    }

    #agents {
        width: 100%;
    }

    .no-wrap {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Offline-games END */

    /* Privacy START */
    .privacy-main {
        padding: 1rem 1rem;
    }

    .privacy-body h3 {
        font-size: 1.5rem;
        padding-bottom: 0.6rem;
        font-weight: 700;
        color: #222622;
    }

    .privacy-main h2 {
        font-size: 2rem;
    }

    .privacy-body p {
        font-size: 1rem;
    }

    .privacy-main-head {
        display: none;
    }

    .privacy-main .privacy-main-btns {
        flex-direction: column;
        row-gap: .3rem;
    }

    .terms-head {
        border-bottom: none;
        padding-bottom: 0.4rem;
    }

    .terms-head, .conditions-break {
        text-align: center;
    }

    .terms-list-head h3 {
        font-size: 1.3rem;
    }

    .terms-body ol > li::marker {
        font-size: 1.2rem;
    }

    .terms-body ol {
        padding-left: 1.5rem;
    }

    .payment-method-inner .pay-three {
        padding: .8rem;
        justify-content: center;
    }

    .f-card-outer h6 {
        font-size: 0.76rem;
    }





    /* Privacy END */

    /* Dashboard Responsiveness */
    .deposit-nav-link {
        width: fit-content;
        padding: 7px;
    }

        .deposit-nav-link h5 {
            margin-left: 2rem;
        }

    .deposit-nav-link-2 {
        padding: .5rem;
    }

    .deposit-amt .deposit-amt-inner {
        justify-content: flex-start;
    }

    .deposit-amt-inner .deposit-amt-inner img {
        padding: 3px;
    }

    .deposit-nav-link .naira-drop {
        padding: 1px;
        width: fit-content;
    }

    .deposit-amt-inner .naira-drop img {
        width: 1.3rem;
    }

    .deposit-nav-link-2 img {
        height: 1rem;
        width: 1rem;
    }

    .user-notif .circular {
        padding: 5px;
    }

    .deposit-amt .circular {
        padding: 5px;
        border: 1px solid #249c4e27;
    }

        .deposit-amt .circular .flex-between {
            width: fit-content;
        }

    .main-dash-top .main-dash-top-inner .main-dash-top-box {
        min-width: 100%;
    }

    .main-dash-top .main-dash-top-inner {
        justify-content: start;
        gap: .7rem;
        flex-wrap: wrap;
    }

    .avail-b-deposit {
        flex-direction: column;
        row-gap: .2rem;
        justify-content: start;
        align-items: flex-start;
        margin-top: 1rem;
    }

        .avail-b-deposit button {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

    .main-d-head h3 {
        font-size: 1.25rem;
    }

    .main-d-head {
        flex-direction: column;
        align-items: flex-start;
        row-gap: .7rem;
    }

        .main-d-head .main-d-head-right, .main-d-head .main-d-head-right button {
            width: 100%;
        }

    .main-d-table table thead {
        display: none;
    }

    .dashboard-body .mobile-td-btn {
        border: none;
    }

    .mobile-table-flex {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
        width: 100%;
    }

    tbody tr td {
        font-size: 0.625rem;
    }

    tbody tr .table-bold {
        font-size: 0.75rem;
        font-weight: 600;
        color: #020202;
    }

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

    tbody tr .table-green {
        color: #0B6C01;
    }

    tbody tr .table-red {
        color: #CF2828;
    }

    .main-d-table {
        padding: 0;
    }
    /* .table-bottom-outer{
		margin-bottom: 10rem;
	} */
    body .dashboard-body {
        padding-bottom: 5rem;
    }

    .table-bottom .tb-right {
        column-gap: .3rem;
    }

    .main-d-table-container tbody tr td {
        height: 3.3rem;
        padding: 0;
        max-height: 3.3rem;
    }

    .main-d-table-container tbody tr > *:nth-child(4) {
        display: flex;
        /* justify-content: center;*/
    }


    /* profile-mobile */
    .profile-info {
        width: 100%;
        border: none;
    }

        .profile-info h5 {
            font-size: 0.75rem;
        }

    .image-outer {
        height: 4rem;
        width: 4rem;
    }

        .image-outer img {
            object-fit: contain;
        }

    .bio-imageandbtn button {
        font-size: 0.625rem;
        padding: 5px 14px;
    }

    .user-info h4 {
        font-size: 0.7rem;
        font-weight: 400;
        line-height: 21px;
    }

    .ver-spacing {
        margin-top: 1rem;
    }

    .profile-info .ver-tag {
        font-size: 1rem;
    }

    .ver-tag img {
        height: 1.5rem;
        width: 1.5rem;
    }

    .ver-spacing .desktop-hidden {
        display: flex;
        align-items: flex-end;
    }

    .user-info img {
        margin-left: 5px;
    }

    .profile-info {
        margin: 0 auto;
    }

    .profile-data .profile-form .flex-between {
        flex-direction: column;
    }

    .profile-form {
        margin-top: 1.5rem;
    }

        .profile-form .submit-btn {
            width: 100%;
        }

    .profile-outer, .deposit-outer, .withdraw-outer {
        margin: auto .5rem;
        margin-bottom: 1.2rem;
    }

    .deposit-head, .withdraw-head {
        border-bottom: none;
    }

        .deposit-head h3, .withdraw-head h3 {
            padding: .7rem;
            padding-bottom: 0;
            font-size: 1.13rem;
        }

    .deposit-info, .deposit-guide, .withdraw-info, .withdraw-guide {
        margin: 0 auto;
        width: 95%;
    }

        .deposit-guide h3, .withdraw-guide h3 {
            width: 100%;
            text-align: center;
            font-size: 1.25rem;
            margin-top: .5rem;
        }

    .deposit-guide-list h4 {
        font-size: 0.87rem;
    }

    .deposit-guide-list p, .withdraw-guide-list-outer li {
        font-size: 0.7rem;
        line-height: 18px;
        margin-top: -5px;
    }

    .withdraw-guide-list-outer li {
        margin-top: 0;
    }

    .deposit-guide-list-outer, .withdraw-guide-list-outer {
        margin-left: 1.5rem;
    }

    .deposit-guide {
        padding-bottom: 0;
    }

    .withdraw-container .withdraw-tab-btn {
        width: 100%;
        flex-direction: row;
        column-gap: .5rem;
    }

    .withdraw .withdraw-container {
        flex-direction: column;
    }

    .withdraw-tab-btn button {
        justify-content: center;
    }

    .withdraw-form h5 {
        text-align: center;
        padding: .1rem 0 .3rem 0;
        font-size: 0.87rem;
    }

    .form-box-radio .radio-label {
        font-size: 1rem;
    }

    .form-box-radio {
        margin-bottom: 1rem;
    }

    .tab-btns {
        overflow-x: auto;
        border-left: 1rem solid transparent;
        border-right: 1rem solid transparent;
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }

        .tab-btns::-webkit-scrollbar {
            display: none;
        }

        .tab-btns .withdraw-btn {
            min-width: fit-content;
            font-size: 0.7rem;
            padding: 5px 10px;
        }

    .transact-head {
        border-bottom: none;
    }

    .transaction-body .withdraw-info {
        border: none;
        padding: 0;
    }

    .transact-head h3 {
        font-size: 0.87rem;
    }

    .transaction-body .main-d-head-right .filter-btn {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
    }

    .transaction-body .main-d-head-right button {
        font-size: 0.7rem;
        width: fit-content;
        padding: 5px !important;
    }

    .transaction-body .main-d-head {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .transaction-body .transact-head {
        padding-bottom: 0;
    }

    .main-d-head .main-d-head-right, .main-d-head .main-d-head-right button {
        width: fit-content;
    }

    div .transaction-body {
        width: 95%;
        margin: 0 auto;
    }

    .history-g .main-d-head {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .history-g .main-d-head-right button.circular {
        padding: 5px;
    }

    .history-g .main-d-head {
        padding: 1rem;
        padding-bottom: 0;
    }

    .history-g h3 {
        font-size: 1.25rem;
    }
    /* .history-g .withdraw .withdraw-container{
		margin: 0 !important;
		padding: 0 !important;
	} */
    .history-g .withdraw-info, .gaming-g .withdraw-info {
        border: none;
        padding-right: 0;
        padding-top: 0;
    }

    .history-g .main-d-table-container tbody tr > *:nth-child(4) {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .gaming-g .withdraw .withdraw-container {
        margin-top: -.5rem;
    }

    .earning-body .dash-earning-total {
        margin: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0 1rem .5rem .7rem;
        font-size: 0.75rem;
    }

    .gaming-g .withdraw-info, .withdraw-guide {
        padding: 1rem .3rem;
    }


    /* Dashboard Notification */
    #notification-container .withdraw-head h3 {
        font-size: 1.125rem;
        font-weight: 600;
        padding: 0rem;
        padding-bottom: 0.4rem;
    }

    #notification-container #notification-search-container .search-input {
        display: block;
        color: black;
    }

    #notification-container #notification-search-container .search-input {
        display: block;
        color: black;
    }

    .withdraw-head {
        border-bottom: none;
    }

    .notification-details-container {
        margin-top: 0.6rem;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 0.3rem;
    }

        .notification-details-container #notification-search-container, #login-report-search-container {
            width: 100%;
            justify-content: start;
            padding-left: 0.4rem;
        }

            .notification-details-container #notification-search-container input {
                display: inline-block;
            }

                .notification-details-container #notification-search-container input::placeholder {
                    display: flex;
                    height: 100%;
                    width: 100%;
                }

    #notification-filter {
        overflow-x: scroll;
        justify-content: start;
    }

        #notification-filter .filter-categories {
            flex-shrink: 0;
        }

    #notification-container .notifications-container .circle {
        width: 0.75rem;
        height: 0.75rem;
    }

    #notification-container .notifications-container span {
        display: block;
    }

    #notification-container .notifications-container .trash {
        flex-shrink: 0;
    }
    /* Dashboard Notification */


    /* Dashboard Security */
    #security-container .withdraw-tab {
        height: 100%;
    }

    #security-container .withdraw-tab-btn {
        background-color: #F5F5F5;
        width: 90%;
        padding: 0.4rem;
        margin: 2rem auto;
        margin-top: 0.8rem;
        border-radius: 72px;
    }

    .security-modal-container {
        width: 100%;
        max-width: 35rem;
        margin: 0rem auto;
        padding: 0rem 1rem;
        padding-bottom: 1rem;
        border: none;
        border-radius: 1rem;
    }

        .security-modal-container label {
            color: #020202;
            font-size: 1rem;
            font-weight: 500;
            line-height: 24px;
        }

        .security-modal-container input {
            padding: 0.8rem 0.5rem;
        }
    /* Dashboard Security */

    /* Dashboard Login-Report */
    #login-report-container .withdraw-head h3 {
        border-bottom: solid 1px #E9E9EB;
        padding-bottom: 1rem;
    }
    /* Dashboard Login-Report */


    /* Dashboard Login Report Start */
    .login-stats-container {
        flex-direction: column;
    }

    .login-report-details-container h3 {
        font-size: 1rem;
        font-weight: 500;
        line-height: 36px;
    }

    #login-report-search-container input {
        width: 18rem;
        border: none;
    }

    .login-report-table .withdraw-info {
        padding: 0.2rem 1rem;
        border-radius: 16px;
        border: none;
        width: 100%;
        margin: 1.5rem auto;
    }

    .login-report-table td button {
        background: #00870E;
        color: white;
    }

    .login-report-table .transaction-body {
        width: 100%;
        padding: 0;
    }

    #dubai {
        width: 20%;
    }

    .offline-game-card .line img {
        object-fit: cover;
        width: 90%;
    }

    .contact-question-inner .callandlocate {
        justify-content: center;
        column-gap: 3rem;
    }

    .contact-question h4 {
        font-size: 1rem;
    }

    .contact-question-inner .email img, .contact-question-inner .call img, .contact-question-inner .locate img {
        height: 3em;
        margin-bottom: .5rem;
    }

    .contact-question .email p, .contact-question .callandlocate p {
        padding-top: .5rem;
        font-size: 0.75rem;
    }
   

    .slider {
        display: flex;
        animation: slide 4.5s linear infinite;
    }
}

.navbar > .container, .navbar > .container-fluid {
    flex-wrap: nowrap;
}


@media (max-width: 330px) {
    #sidebar {
        padding-top: 3.5rem;
        display: flex;
        justify-content: center;
    }

    .download-button-container {
        top: -7.5%;
        padding: 0.7rem 1.4rem 0.7rem 1.4rem;
    }

    .download-image-button-container .buttons button {
        /* width: 151px; */
        height: 45px;
    }

        .download-image-button-container .buttons button:hover {
            opacity: 90%;
        }

        .download-image-button-container .buttons button img {
            width: 22px;
            height: 22px;
            margin: 0;
        }

        .download-image-button-container .buttons button span {
            font-size: 13px;
            font-weight: 700;
            line-height: 24px;
            text-align: left;
            color: #F1F1F1;
            margin: 0;
        }

    .navbar {
        padding-right: 0rem;
        padding-left: 0rem;
    }

    .navbar-brand {
        font-size: 1rem;
    }

    .deposit-amt .circular {
        padding: 3px;
    }

    .user img {
        width: 1.25rem;
        height: 1.25rem;
        border-radius: 100%;
    }

    .see-all-button {
        font-size: 10px;
        padding: 0rem 0.2rem;
        width: 3rem;
        border-radius: 0.8rem;
        display: flex;
        justify-content: center;
    }

    .offline-game-card h2 {
        font-size: 12px;
        padding-right: 4rem;
    }

    @media (min-width: 1800px ) {
        .download-button-container {
            left: 20.5%;
        }
    }

    @media (min-width: 2500px ) {
        .download-button-container {
            left: 18%;
        }
    }

    @media (min-width: 4000px ) {
        .download-button-container {
            left: 17%;
        }
    }

    .offline-game-card .line {
        width: 80%;
        /* border: 3px solid; */
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .offline-game-card .line img {
            object-fit: cover;
            width: 90%;
        }

    .f-card-outer {
        column-gap: 0rem;
    }

    #transactionModal .modal-body-content .details-container h4 {
        font-size: 0.65rem;
    }

    #transactionModal .modal-body {
        padding: 1rem 0rem;
    }

    #transactionModal .modal-body-content {
        padding: 1.5rem 0.5rem;
    }

        #transactionModal .modal-body-content .details-container {
            padding: 1rem 0rem;
        }
}

@media screen and (min-width: 910px) and (max-width: 1300px) {

    .desktop-hidden {
        display: none !important;
    }

    #mobile-menu {
        display: flex !important;
    }

    .footer-hide {
        display: none;
    }

    #sidebar {
        left: -100%; /* Start off-screen */
        width: 250px;
    }

    #main {
        /* flex: 1; */
        width: 100%;
        left: 0;
        /* margin-left: 250px; */
    }

    footer {
        width: 100%;
        margin: 0;
        left: 0;
        border-radius: 0;
        margin-top: 3rem;
        padding: 1.8rem 1rem;
    }

        footer .footer-hide {
            display: block;
        }

        footer .pay-two {
            display: flex;
        }
}

@media (min-width: 1300px ) {
    .desktop-hidden {
        display: none !important;
    }
    .check-results-container h2 {
        font-size: 3rem;
    }
}

@media (min-width: 1500px ) {
    .desktop-hidden {
        display: none !important;
    }
    footer {
        width: 100%;
    }

    #main {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}
/* @media (min-width: 1800px ) {
    .check-results-container h2 {
        font-size: 3.5rem;
    }
    .sidebar-item {
        padding: 14px 8px;
    }
    .sidebar-item .item-text {
        font-size: 1.2rem;
    }
    .toogle-button-group button,  .circular, .button-primary {
        font-size: 14px;
    }
    #main-carousel .carousel-item > img {
        max-height: 500px !important;
        height: 260px;
    }
    .header-two {
        font-size: 2.2rem;
    }
    .online-games-section .controls, .offline-games-section .controls {
        width: 2.5rem;
        height: 2.5rem;
    }
    .online-game-item {
        padding-top: 3rem 1rem;
    }
    .online-game-item .image {
        height: 6rem;
    }
     .online-game-item button {
        margin-top:1rem;
    }
    .offline-game-item-container {
        gap: 2rem;
    }
    .offline-game-card {
        padding-top: 0rem;
    } 
    .offline-game-card h2, .about-body h3  {
        font-size: 1.6rem;
    }
    .offline-game-card .price h3, h4 {
        font-size: 1.2rem;
        font-weight: 700;
    }
    .offline-game-card button {
        margin-top: 2rem;
        font-size: 1.2rem;
    }
    .next-draw-container .w-50 h3, .next-draw-container .w-50 p,
    .faq-main p {
        font-size: 1rem;
    }
    #edit-select {
        height: 50px;
        font-size: 1.3rem;
        border-radius: 1rem;
    }
    .check-results-form {
        height: 24rem;
    }
    .check-results-form input {
        font-size: 1.2rem;
        padding: 0.9rem;
    }
    .check-results-form input::placeholder {
        font-size: 1.2rem;
    }
    .filter-categories {
        font-size: 1rem;
    }
    .lw-custom-table tbody tr h4, .lw-custom-table thead tr th  {
        font-size: 1.2rem;
    }
    .all-games-item .image {
        height: 14rem;
    }
    .all-games-item .content h2, .faq-card-header h5 {
        font-size: 1.2rem;
    }
    .online-game-item h4, h5 {
        font-size: 14px;
    }
    .offline-game-card .image img {
        width: 45%;
    }
    #online-see-all-carousel .carousel-item img, #offline-games-banner img {
        max-height: 25rem;
    }
    .desc-container .image-container {
        height: 13rem;
        max-height: 13rem;
    }
    .desc-container .header h2 {
        font-size: 3rem;
    }
    .desc-container .header p, .instruction-container p,  .sub-rule-container ul, .red-container,
    #agents ul li p {
        font-size: 1.3rem;
    }
    .desc-container button {
        font-size: 1.2rem;
        padding: 0.8rem 1rem;
    }
    iframe, .rules-image {
        width: 60%;
        max-height: 32.625rem;
        height: 25.625rem;
    }
    .sub-rule-container h3 {
        font-size: 1.9rem;
    }
    .main-earn-buttons .main-earn-link {
		padding: 13px 0px;
	}
    #agents ul li h3 {
        font-size: 1.5rem;
    }
    .main-banner {
        padding-left: 4rem;
        padding-right: 4rem;
    }
    .main-banner h3 {
        font-size: 2.8rem;
        margin-bottom: 0.4rem;
    }
    .refer-btn button {
        font-size: 1rem;
        padding: 14px 0;
    }
    .footer-top-box h4, .refer-head-text h3 {
        font-size: 1.4rem;
    }
    .footer-top-box li, .refer-head-text .flex-between p, .exclusive-para, .main-banner-terms,
    .about-body p {
        font-size: 1rem;
    }
    
} */
@media (min-width: 3500px) {
    header {
        position: relative;
        width: 100%;
    }

    #sidebar {
        width: 11.5%;
        height: 60.4%;
    }
}


.password-toggle-icon {
    position: absolute;
    /* top: 47%; */
    right: 25px;
    transform: translateY(-50%);
    margin-top: -1.3rem;
}

.loginpassword-toggle-icon {
    position: absolute;
    /* top: 47%; */
    right: 25px;
    transform: translateY(-50%);
    margin-top: 1rem;
}

.settingpassword-toggle-icon {
    position: absolute;
    /* top: 47%; */
    right: 25px;
    /* transform: translateY(-50%); */
    margin-top: 1.5rem;
}