body{
    
        background: 
        radial-gradient(
            at 10% 90%, 
            rgba(0, 0, 0, 0.05) 0%, 
            transparent 50%
        ),
        linear-gradient(
            to right, 
            #000000 0%, /* Pure Black on the left */
            #000000 50%, /* Deep Charcoal in the middle */
            #404040 100% /* Dark Gray on the far right */
        );
    }

    .logo-img {

        height: 50px;

    }

    .offcanvas-custom {

        width: 350px !important;

        background: linear-gradient(180deg, #111 0%, #000 100%);

        backdrop-filter: blur(20px);

        border-left: 1px solid rgba(255,255,255,0.1);

        padding: 20px;

    }



    .menu-grid {

        display: grid;

        grid-template-columns: repeat(3, 1fr);

        gap: 10px;

    }

    .menu-grid a{

        font-weight: 400;

        line-height: 1.5;

        letter-spacing: 0.00938em;

        text-transform: uppercase;

        font-size: 10px;

    }



    .menu-item {

        background: rgba(255,255,255,0.06);

        border: 1px solid rgba(255,255,255,0.15);

        border-radius: 8px;

        padding: 12px;

        text-align: center;

        font-size: 12px;

        color: white;

        display: flex;

        flex-direction: column;

        align-items: center;

        transition: .2s;

    }

    .menu-item:hover , .menu-item.active {

        background: rgba(0,230,118,0.15);

        border-color: #00e676;

    }



    .menu-item img {

        width: 30px;

        height: 30px;

        object-fit: contain;

        margin-bottom: 6px;

    }



    .btn-login-custom {

        background-color: #00b569; /* Green */

        color: #fff;

        font-weight: 600;

        border: none;

        transition: 0.2s;

        border-radius: 5px;

    }



    .btn-login-custom:hover {

        background-color: #00a05d;

        color: #fff;

    }



    .btn-register-custom {

        background-color: #2b2b2b; /* Dark */

        color: #fff;

        font-weight: 600;

        border: none;

        transition: 0.2s;

        border-radius: 5px;

    }



    .btn-register-custom:hover {

        background-color: #3a3a3a;

        color: #fff;

    }

    .btn-flag-custom {

        background: #fff; /* red */

        width: 36px;

        height: 36px;

        border-radius: 50%;

        transition: 0.2s;

    }

    .btn-flag-custom:hover {

        filter: brightness(1.1);

    }

    .btn-bg-custom{

        padding: 4px;

        background: rgb(13, 180, 128);

    }

    .btn-bg-custom a{

        color: #fff;

    }

    .dropdown-toggle::after {

        display: none !important;

    }

    .logo-img{

        display: none;

    }

    .sticky-top{

        padding-top: 14px;

        padding-bottom: 14px;

    }



    .swiper-button-next:after, .swiper-button-prev:after{

        font-size: 20px;

        color: white;

    }

    .grid-item {

        border-radius: 5px;

        overflow: hidden;

    }

    .block-body{

        padding: 16px 24px 10px 24px;

    }

    .form-check-label a {

        color: #32b283;

        text-decoration: none;

    }



    .form-check-label a:hover {

        text-decoration: underline;

    }

    .modal-content {

        background: #000000;

        border-radius: 10px;

        color: #fff;

        overflow: hidden;

    }

    .modal-header-block{

        background: linear-gradient(90deg, rgba(191, 191, 191, 0.35) 0%, rgba(89, 89, 89, 0.35) 100%);

    }



    .form-control{

        background: transparent;

        border-color: #ced4da;

        color: white;

    }

    .form-control::placeholder {

        color: #707070 !important;

    }

    .form-control:focus {

        background: transparent;

        border-color: #32b283;

        box-shadow: none;

        color: #32b283;

    }





    .modal-logo {

        display: flex;

        justify-content: center;

        align-items: center;

        margin-bottom: 15px;

    }



    .modal-logo img {

        height: 60px;

    }



    .country-code {

        background: #111;

        color: #fff;

        border: 1px solid #333;

    }



    .btn-submit {

        background: #32b283;

        border: none;

        font-weight: bold;

        width: 100%;

        border-radius: 6px;

    }



    .btn-submit:hover {

        background: #32b283;

    }



    .modal-bg{

        background: linear-gradient(90deg, rgba(191, 191, 191, 0.35) 0%, rgba(89, 89, 89, 0.35) 100%);

        width: 100%;

        height: fit-content;

        border-radius: 8px;

    }





    

    @media (max-width: 992px) {
        .play-icon {
            font-size: 38px !important;
        }
        .overlay-img {
            height: 25px !important;
        }
        .block-body{

            padding: 16px 20px 10px 20px;

        }

        .sticky-top{

            padding-top: 0;

            padding-bottom: 0;

        }

        .d-lg-flex {

            display: flex !important;

        }

        .btn-flag-dropdown{

            display: none !important;

        }

        .logo-img{

            display: unset !important;

        }

        sidebar-left{

            display: none !important;

        }

        .active.main-content ,.navbar.active,.main-content,.navbar{

            margin-left: 0px !important; /* match expanded sidebar width */

        }

        .grid-block-3{

            display: grid;

            grid-template-columns: 1fr 1fr 1fr 1fr !important;

            gap: 10px !important;

        }

        .grid-block-6{

            display: grid;

            grid-template-columns: 1fr 1fr 1fr 1fr !important;

            gap: 10px !important;

        }

    }

    @media (max-width: 768px) {

        .form-check-label {

            font-size: 12px;

        }

        .grid-block-3{

            display: grid;

            grid-template-columns: 1fr 1fr 1fr !important;

            gap: 10px !important;

        }

        .grid-block-6{

            display: grid;

            grid-template-columns: 1fr 1fr 1fr !important;

            gap: 10px !important;

        }

    }

    @media (max-width: 500px) {

        .logo-img {

            height: 35px;

        }

        .btn-login-custom, .btn-register-custom{

            padding: 5px 10px !important;

            font-size: 12px;

        }

        .btn-menu-custom{

            font-size:20px;

            padding:0px;

        }

        .grid-block-3{

            display: grid;

            grid-template-columns: 1fr 1fr!important;

            gap: 10px !important;

        }

        .grid-block-6{

            display: grid;

            grid-template-columns: 1fr 1fr !important;

            gap: 10px !important;

        }

    }

    @media (max-width: 375px) {

        .menu-grid a {

            font-size: 10px;

        }

        .menu-item img{

            width: 25px;

            height: 25px;

            margin-bottom: 2px;

        }

        .logo-img {

            height: 30px;

        }

        .btn-login-custom, .btn-register-custom{

            padding: 3px 8px !important;

            font-size: 10px;

        }

        .btn-menu-custom{

            font-size:15px;

            padding:0px;

        }

        .form-check-label {

            font-size: 10px;

        }

    }

    .navbar-bg{

        background: #161d3191;

        backdrop-filter: blur(10px);

    }

    selection {

        display: flex;

        height: 100%;

    }

    sidebar-left {

        display: flex;

        height: 100%;

        position: fixed;

        top: 0;

        z-index: 1021;

    }

    .dev-sidebar{

        background: linear-gradient(to right, rgba(0, 0, 0, 0.85) 30%, rgb(30, 30, 30));

        height: 100%;

        width: 100px;

        flex-direction: column;

        gap: 16px;

        padding-top: 20px;

        position: relative;

        transition: width 0.5s;

        display: flex;

    }

    .active .dev-sidebar{

        background: linear-gradient(to right, rgba(0, 0, 0, 0.85) 30%, rgb(30, 30, 30));

        height: 100%;

        width: 300px;

        flex-direction: column;

        gap: 16px;

        padding-top: 10px;

        position: relative;

        transition: width 0.5s;

        display: flex;

    }

    .css-leftimg {

        width: 80px;

    }

    .active .css-leftimg {

        width: 120px;

    }

    centent {

        height: 100%;

        overflow: hidden;

        width: 100%;

    }

    .active .css-show-hide {

        top :0;

    }

    .css-show-hide {

        position: absolute;

        right: -12px;

        height: 25px;

        top :-10px;

        width: 25px;

        cursor: pointer;

        background: rgb(13, 180, 128);

        border-radius: 50%;

        /* padding: 4px; */

        z-index: 99999;

        transition: transform 0.3s;

        transform: rotate(180deg);

    }
    .css-show-hide i {
        padding-left: 7px;
        color: white;
    }

    svg{

        stroke: white;

        fill: white;

    }

    .active.main-content ,.navbar.active {

        margin-left: 300px; /* match expanded sidebar width */

        transition: margin-left 0.5s;

    }

    .main-content,.navbar  {

        margin-left: 100px; /* match collapsed sidebar width */

        transition: margin-left 0.5s;

    }

    .css-item {

        display: flex;

        -webkit-box-align: center;

        align-items: center;

        padding-left: 24px;

        padding-right: 24px;

        gap: 12px;

        cursor: pointer;

        padding-top: 16px;

        color: white;

    }

    .css-name-item {

        display: none;

    }

    .css-item:hover ,.css-item.onactive{

        color: rgb(13, 180, 128);

    }

    .active .css-name-item {

        margin: 0px;

        line-height: 1.5;

        letter-spacing: 0.00938em;

        font-size: 12px;

        font-weight: 700;

        text-transform: uppercase;

        min-width: 90px;

        display: flex;

    }

    .block-menu-items {

        position: absolute;

        top: 70px;

        transform: translateX(-50%);

        left: 50%; 

        transition: left 0.5s, transform 0.5s;

    }

    .active .block-menu-items {

        position: absolute;

        top: 70px;

        left: 50%; 

        transform: translateX(-50%);

        transition: left 0.5s, transform 0.5s;

        width: 100%;

    }

    .notification-container {

        width: 100%;

        overflow: hidden;

        padding: 5px 10px;

        border-radius: 8px;

    }



    .notification-inner {

        display: flex;

        align-items: center;

        gap: 15px;

    }



    .notification-icon {

        height: 30px;

        flex-shrink: 0;

    }



    /* Marquee */

    .notification-marquee {

        overflow: hidden;

        position: relative;

    }



    .marquee-content {

        display: inline-block;

        white-space: nowrap;

        animation: marquee 15s linear infinite;

    }



    /* Pause on hover */

    .notification-marquee:hover .marquee-content {

        animation-play-state: paused;

    }



    /* Marquee keyframes */

    @keyframes marquee {

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

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

    }



    .notification-marquee p {

        margin: 0;

        font-size: 18px;

        color: rgb(255, 138, 0);

    }



    /* Custom style for the dark navigation bar container */

    .nav-bar-bg {

        background-color: rgba(255, 255, 255, 0.15) !important; /* Specific dark gray/black from the image */

    }



    /* Custom style for the active, highlighted button */

    .btn-game.active {

        background-color: #1abc9c !important; /* Bright teal/green */

    }



    /* Custom style for inactive buttons */

    .btn-game {

        background-color: transparent !important;

    }

    .btn-game:hover {

        background-color: #1abc9c !important; /* Light hover effect */

    }



    /* Container for horizontal scrolling on small screens */

    .scroll-container {

        overflow-x: auto;

        white-space: nowrap; /* Prevents items from wrapping */

        -webkit-overflow-scrolling: touch; /* Smoother iOS scrolling */

    }

    

    /* Custom scrollbar to match the dark theme */

    .scroll-container::-webkit-scrollbar {

        display: none;

    }

    .btn-item{

        color: white;

        text-decoration: none;

        padding: 5px 10px;

    }

    .grid-block-3{

        display: grid;

        grid-template-columns: 1fr 1fr 1fr;

        gap: 20px;

    }

    .grid-block-6{

        display: grid;

        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;

        gap: 20px;

    }









  .grid-item {
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .main-img {
        transition: transform 0.5s ease, filter 0.3s ease;
    }

    .overlay-img {
        position: absolute;
        top: 10px;
        left: 10px;
        width: auto;
        height: 35px;
        z-index: 5;
        border-radius: 6px;
    }

    .play-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 48px;
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 10;
    }

    /* Hover effects */
    .grid-item:hover .overlay-img{
        opacity: 0;
    }
    .grid-item:hover .main-img {
        transform: scale(1.1);
        filter: brightness(40%);
    }

    .grid-item:hover .play-icon {
        opacity: 1;
    }






/* footer */

    .provider-container 

    {

        width: 100%;

        margin-left: auto;

        box-sizing: border-box;

        margin-right: auto;

        display: block;

        padding-left: 16px;

        padding-right: 16px;

    }



    .provider-item-container {

        box-sizing: border-box;

        display: flex;

        flex-flow: wrap;

        width: 100%;

    }



    .provider-item {

        box-sizing: border-box;

        margin: 8px 0px;

        flex-direction: row;

        flex-basis: 25%;

        -webkit-box-flex: 0;

        flex-grow: 0;

        max-width: 25%;

        display: flex;

        -webkit-box-pack: center;

        justify-content: center;

        -webkit-box-align: center;

        align-items: center;

        padding: 1.6px;

    }



    @media (min-width: 600px) {

        .provider-item {

            flex-basis: 16.6667%;

            -webkit-box-flex: 0;

            flex-grow: 0;

            max-width: 16.6667%;

        }

    }



    @media (min-width: 0px) {

        .img-provider-logo {

            height: 30px;

            filter: none;

        }

    }

    .img-provider-logo {

        width: 100%;

        object-fit: contain;

        transition: 0.5s;

        cursor: pointer;

    }

    .copyrifght-text {

        margin: 0px;

        font-weight: 400;

        line-height: 1.5;

        letter-spacing: 0.00938em;

        font-size: 14px;

        color: grey;

    }

/* footer */