:root {
        /* backgroud */
        --color-1:
            #1a0306        ;
        --color-2:
            #2b070d        ;
        --color-3:
            #4a0d15        ;
        --color-4:
            #6a121d        ;
        /* color widget */
        --color-5:
            #e7b24a        ;
        --color-6:
            #ffd778        ;
        --color-7:
            #c7852e        ;
        --color-8:
            #7f1b28        ;
        --color-9:
            #f1cf88        ;
        /* color font*/
        --black:
            #000000        ;
        --white:
            #ffffff        ;
        --light:
            #d5d5d5        ;
        /* button */
        --red-1:
            #e63a2f        ;
        --red-2:
            #8d0f18        ;
        --green-1:
            #09c509        ;
        --green-2:
            #057e05        ;

        --text-light-color: #f9e6c5c2;
        --text-light-color-hover: #fff1d6;

        --transparent-1: #25060be8;

        --gradient-1: radial-gradient(circle at center, var(--color-3), var(--color-2));
        --gradient-2: linear-gradient(to bottom, var(--color-7), var(--color-5));
        --gradient-3: linear-gradient(to bottom, var(--red-1), var(--red-2));
        --gradient-4: linear-gradient(to bottom, var(--color-4), var(--color-2));
        --gradient-5: linear-gradient(to bottom, var(--green-1), var(--green-2));
        --gradient-6: radial-gradient(circle at center, var(--color-7), var(--color-5));
    }

    /**** endof custom colors ****/



    /**** begin custom background colors ****/
    .bg-color-1 {
        background-color: var(--color-1) !important;
    }

    .bg-color-2 {
        background-color: var(--color-2) !important;
    }

    .bg-color-3 {
        background-color: var(--color-3) !important;
    }

    .bg-color-4 {
        background-color: var(--color-4) !important;
    }

    .bg-color-5 {
        background-color: var(--color-5) !important;
    }

    .bg-color-6 {
        background-color: var(--color-6) !important;
    }

    .bg-color-7 {
        background-color: var(--color-7) !important;
    }

    .bg-color-8 {
        background-color: var(--color-8) !important;
    }

    .bg-color-9 {
        background-color: var(--color-9) !important;
    }

    .bg-black {
        background-color: var(--black) !important;
    }

    .bg-white {
        background-color: var(--white) !important;
    }

    .bg-gradient-1 {
        background: var(--gradient-1) !important;
    }

    .bg-gradient-2 {
        background: var(--gradient-2) !important;
    }

    .bg-gradient-3 {
        background: var(--gradient-3) !important;
    }

    .bg-gradient-4 {
        background: var(--gradient-4) !important;
    }

    .bg-gradient-5 {
        background: var(--gradient-5) !important;
    }

    .bg-gradient-6 {
        background: var(--gradient-6) !important;
    }

    /**** endof custom background colors ****/



    /**** begin custom text colors ****/
    .text-black {
        color: var(--black);
    }

    .text-white {
        color: var(--white);
    }

    .text-light {
        color: var(--text-light-color) !important;
    }

    .text-gold {
        color: var(--color-6) !important;
    }

    .text-yellow {
        color: var(--color-7);
    }

    /**** endof custom text colors ****/

    .navbar {
        color: white;
        text-transform: uppercase;
        font-weight: bolder;
    }

    /**** begin layout style ****/
    * {
        font-family: 'Rajdhani', sans-serif;
    }

    body {
        width: 100%;
        background-color: var(--color-1);
        background-image: url(/img/default.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position: center center;

    }

    body.hide-scroll {
        overflow-y: hidden;
    }

    body a {
        text-decoration: none;
    }

    .btn,
    button,
    button:focus,
    button:hover {
        border: none !important;
        box-shadow: none !important;
        outline: 0 !important;
    }

    hr.border-dashed {
        border-top: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-width: 3px;
        border-style: dashed;
    }

    header,
    section,
    footer {
        display: block;
        position: relative;
    }

    header {
        position: sticky;
        top: 0;
        z-index: 9;
    }

    /**** endof layout style ****/
    /**** begin default style ****/
    .container {
        max-width: 1170px !important;
    }

    input[type="text"],
    input[type="text"]:focus,
    input[type="password"],
    input[type="password"]:focus {
        box-shadow: none !important;
        outline: 0 !important;
    }

    .text-copyright {
        color: var(--white);
        font-size: 14px;
    }

    .text-justify {
        text-align: justify;
    }

    /**** endof default style ****/



    /**** begin components style ****/
    .btn-popup-form {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 32px;
        height: 32px;
        background-color: var(--white);

        color: var(--color-1);
        font-size: 18px;
        line-height: 1;
    }

    .btn-download {
        display: flex;
        position: relative;
        justify-content: center;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        background-image: var(--gradient-5);
    }

    .btn-download i {
        display: block;
        width: 14px;
        height: 14px;
        line-height: 1;
    }

    .btn-download span:last-child {
        font-weight: 600;
    }


    .card-infobar,
    .card-form {
        border-radius: 12px;
    }

    .card-infobar>.card-body,
    .card-form>.card-body {
        display: block;
        position: relative;
        border-radius: 12px;
        z-index: 1;
    }

    .card-infobar>.card-body::before,
    .card-form>.card-body::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: auto;
        height: 8px;
        background-color: var(--color-4);
        border-radius: 12px 12px 0 0;
        z-index: -1;
    }

    .card-infobar>.card-body>.card-title,
    .card-form>.card-body>.card-title {
        display: inline-block;
        position: relative;
        padding: 10px 12px 8px;
        background-color: var(--color-4);
        border-radius: 12px 0 20px 0;
        color: var(--color-1);
        font-size: 20px;
        font-weight: 700;
    }

    .card-infobar>.card-body>.card-title::before,
    .card-form>.card-body>.card-title::before {
        content: "";
        position: absolute;
        top: 0;
        right: -10px;
        bottom: 0;
        width: 25px;
        height: auto;
        background-color: var(--color-4);
        border-radius: 0 0 12px 0;
        transform: skewX(-25deg);
        z-index: -1;
    }

    .card-support {
        display: block;
        position: relative;
        padding: 1rem;
        border-radius: 8px;
    }

    .card-support .card-title {
        margin-bottom: 5px;
        font-weight: 500;
    }

    .card-support .card-sub_title {
        font-size: 14px;
        font-weight: 300;
    }

    .card-support .card-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 50px;
        background-image: var(--gradient-2);
        border-radius: 50%;
        color: var(--gold);
        font-size: 30px;
        line-height: 1;
    }

    .card-support .card-icon .icon {
        display: block;
        position: relative;
        margin: 0;
        padding: 0;
        width: 30px;
        height: 30px;
    }

    .card-support .card-info {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
        font-size: 50px;
        font-weight: 700;
        font-style: italic;
    }

    .card-support .card-info small {
        font-size: 10px;
    }

    .card-content input {
        font-weight: 700;
        font-size: 16px;
    }


    .contact-box {
        display: block;
        position: relative;
    }

    .contact-box .contact {
        display: block;
        position: relative;
        text-decoration: none;
    }

    .contact-box .contact .contact-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 35px;
        height: 35px;
        background-color: var(--color-6);
        border-radius: 50%;
        color: var(--color-1);
        font-size: 22px;
        line-height: 1;
    }

    .contact-box .contact .contact-icon .icon {
        display: block;
        position: relative;
        margin: 0;
        padding: 0;
        width: 22px;
        height: 22px;
        line-height: 1;
    }

    .contact-box .contact .contact-title {
        text-transform: uppercase;
        font-size: 14px;
    }

    .contact-box .contact .contact-number {
        font-size: 14px;
    }

    .contact-box hr {
        margin: 12.5px 0;
        border-top: 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 1px solid var(--color-9);
    }


    .content-bar.border-top-bottom {
        padding: 15px 0;
        border-top: 1px solid var(--color-4);
        border-bottom: 1px solid var(--color-4);
    }


    .hamburger-lines {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        margin-top: -24px;
        height: 22px;
        width: 28px;
        z-index: 19;
    }

    .hamburger-lines .line {
        display: block;
        height: 3px;
        width: 100%;
        border-radius: 10px;
        background: var(--white);
    }

    .hamburger-lines .line1 {
        transform-origin: 0% 0%;
        transition: transform 0.4s ease-in-out;
    }

    .hamburger-lines .line2 {
        transition: transform 0.2s ease-in-out;
    }

    .hamburger-lines .line3 {
        transform-origin: 0% 100%;
        transition: transform 0.4s ease-in-out;
    }

    .checkbox {
        position: relative;
        display: block;
        top: 0;
        left: 0;
        margin: 0;
        height: 28px;
        width: 28px;
        cursor: pointer;
        opacity: 0;
        z-index: 99;
    }

    .checkbox:checked~.menu-header-container {
        transform: translateX(0);
    }

    .checkbox:checked~.hamburger-lines .line1 {
        transform: rotate(45deg);
    }

    .checkbox:checked~.hamburger-lines .line2 {
        transform: scaleY(0);
    }

    .checkbox:checked~.hamburger-lines .line3 {
        transform: rotate(-45deg);
    }

    .footer-fixed-navbar {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        height: 65px;
        border-top: 5px solid var(--color-5);
        z-index: 999;
    }

    .footer-fixed-navbar .footer-menu {
        display: flex;
        align-items: center;
        flex-direction: row;
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        list-style: none;
    }

    .footer-fixed-navbar .footer-menu>.menu-item {
        width: 20%;
        height: 100%;
        border-left: 1px solid var(--color-1);
        border-right: 1px solid var(--color-4);
    }

    .footer-fixed-navbar .footer-menu.footer-menu--guest {
        justify-content: center;
    }

    .footer-fixed-navbar .footer-menu.footer-menu--guest>.menu-item {
        width: 33.3333%;
        max-width: 150px;
        text-align: center;
    }

    .footer-fixed-navbar .footer-menu>.menu-item:first-child {
        border-left: 0;
    }

    .footer-fixed-navbar .footer-menu>.menu-item:last-child {
        border-right: 0;
    }

    .footer-fixed-navbar .footer-menu>.menu-item>.menu-link {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height: 100%;
        color: var(--white);
        text-decoration: none;
    }

    .footer-fixed-navbar .footer-menu>.menu-item>.menu-link>.menu-icon {
        margin-bottom: 5px;
        width: 20px;
        height: 20px;
        color: var(--color-5);
        font-size: 22px;
    }

    .footer-fixed-navbar .footer-menu>.menu-item>.menu-link>.menu-text {
        font-size: 12px;
    }

    .form-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.75);
        transition: transform .5s ease-in-out;
        transform: translateX(-150%);
        z-index: 9999;
    }

    .form-wrapper.show {
        transform: translateX(0);
    }

    .form-wrapper .btn-close-popup-form {
        position: absolute;
        top: 15px;
        left: 15px;
        font-size: 32px;
        color: var(--white);
    }

    .form-login {
        display: block;
        position: relative;
        padding: 20px;
        max-width: 300px;
        background-color: var(--color-2);
        border-radius: 12px;
    }

    .form-login .input-group .input-group-text,
    .form-login .input-group .form-control {
        background: var(--white) !important;
        border-color: var(--color-4) !important;
        color: var(--black);
        font-weight: 700;
    }

    .form-login .input-group .input-group-text {
        background: var(--color-2) !important;
        color: var(--light);
        border-right: 0;
    }

    .form-login .input-group .form-control {
        border-left: 0;
    }

    .form-login .input-group .form-control::placeholder {
        color: var(--light);
        font-weight: 700;
    }

    .form-login .btn {
        width: 100%;
        font-weight: 700;
        text-transform: uppercase;
    }

    .form-login .btn.btn-login {
        background-image: var(--gradient-2);
        color: var(--color-2);
    }

    .form-button .btn-login {
        width: 100%;
        height: 40px;
        border-radius: 3px;
        font-weight: 700;
        font-size: 20px;
        text-transform: uppercase;
        text-align: center;
        background-image: var(--gradient-2);
        color: var(--color-2);
        border: 2px double #000;
    }

    .form-button .btn-login-singaplay {
        width: 100%;
        height: 42px;
        border-radius: 6px;
        border: 2px solid #ffd36a;
        position: relative;
        overflow: hidden;
        text-align: center;
        font-weight: 800;
        font-size: 20px;
        letter-spacing: 4px;
        color: #fff5d6;
        background: linear-gradient(180deg, #ff4f56 0%, #bc1227 55%, #7f0816 100%);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35), 0 0 12px rgba(255, 79, 86, 0.45);
        animation: loginPulse 1.8s ease-in-out infinite;
    }

    .form-button .btn-login-singaplay,
    .form-button .btn-daftar-singaplay {
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }

    .form-button .btn-daftar-singaplay {
        margin-top: 8px;
    }

    .form-daftar .sp-login-wrap {
        max-width: 100%;
    }

    .form-daftar .sp-login-input {
        display: flex;
        align-items: center;
        height: 56px;
        padding: 0 10px 0 0;
        border-radius: 30px;
        border: 4px solid #ff0000;
        background: #d9d9d9;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
        transition: box-shadow .2s ease, transform .2s ease;
    }

    .form-daftar .sp-login-input:focus-within {
        box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.65);
        transform: translateY(-1px);
    }

    .form-daftar .sp-login-icon {
        flex: 0 0 50px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        border-radius: 26px;
        background: #c10000;
        color: #ffe100;
        font-size: 23px;
    }

    .form-daftar .sp-login-input .form-control {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        color: #555 !important;
        font-weight: 500;
        font-size: 32px;
        font-family: "Segoe UI", Arial, sans-serif;
        padding: 0 !important;
        height: 100%;
        line-height: 1;
    }

    .form-daftar .sp-login-input .form-control::placeholder {
        color: #5f6772;
        text-transform: none;
    }

    .form-daftar .sp-pass-toggle {
        border: 0;
        background: transparent;
        color: #ff0000;
        font-size: 34px;
        line-height: 1;
        padding: 0 10px 0 4px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .form-daftar .sp-login-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 6px 4px 0;
        color: #fff;
        font-size: 32px;
        font-weight: 700;
    }

    .form-daftar .sp-login-meta-right {
        color: #fff;
        text-decoration: none;
    }

    .form-daftar .sp-login-meta-right:hover {
        color: #ffd778;
    }

    @media only screen and (max-width: 576px) {
        .form-daftar .sp-login-input {
            height: 50px;
            border-width: 3px;
            border-radius: 26px;
        }

        .form-daftar .sp-login-icon {
            flex-basis: 44px;
            margin-right: 10px;
            font-size: 20px;
        }

        .form-daftar .sp-login-input .form-control {
            font-size: 16px;
        }

        .form-daftar .sp-pass-toggle {
            font-size: 26px;
        }

        .form-daftar .sp-login-meta {
            font-size: 12px;
        }
    }

    .form-button .btn-login-singaplay::before {
        content: "";
        position: absolute;
        top: 0;
        left: -30%;
        width: 24%;
        height: 100%;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
        transform: skewX(-20deg);
        animation: loginShine 2.2s linear infinite;
    }

    .singaplay-btn-fx {
        position: relative;
        overflow: hidden;
        animation: loginPulse 1.8s ease-in-out infinite;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    }

    .singaplay-btn-fx::before {
        content: "";
        position: absolute;
        top: 0;
        left: -30%;
        width: 24%;
        height: 100%;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
        transform: skewX(-20deg);
        animation: loginShine 2.2s linear infinite;
        pointer-events: none;
    }

    @keyframes loginPulse {
        0% {
            transform: translateY(0);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35), 0 0 10px rgba(255, 79, 86, 0.35);
        }
        50% {
            transform: translateY(-1px);
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4), 0 0 16px rgba(255, 79, 86, 0.65);
        }
        100% {
            transform: translateY(0);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35), 0 0 10px rgba(255, 79, 86, 0.35);
        }
    }

    @keyframes loginShine {
        0% {
            left: -35%;
        }
        100% {
            left: 120%;
        }
    }

    .form-login .btn.btn-daftar {
        background-image: var(--gradient-3);
        color: var(--white);
    }

    .form-user-desktop {
        display: none;
    }

    .form-user-desktop .btn {
        width: 100px;
    }

    .form-user-desktop .user-saldo {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 8px;
        background-color: var(--light);
        border-radius: 8px;
    }

    .form-user-desktop .user-saldo .saldo-icon {
        height: 20px;
        font-size: 16px;
        color: #000;
    }

    .form-user-desktop .user-saldo .saldo-value {
        padding: 0 10px;
        font-size: 14px;
        color: #000;
        font-weight: 700;
    }

    .form-user-mobile {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 300px;
        height: auto;
        background-color: var(--color-3);
    }

    .form-user-mobile .form-header {
        display: block;
        position: relative;
        padding: 20px 15px;
        border-bottom: 2px solid var(--color-5);
    }

    .form-user-mobile .form-header .btn {
        padding: 4px 0;
        width: 100px;
        height: 32px;
    }

    .form-user-mobile .form-header .btn-close-popup-form {
        position: relative;
        top: unset;
        left: unset;
        width: 32px;
        height: 32px;
        font-size: 32px;
        color: var(--white);
        z-index: 2;
    }

    .form-user-mobile .form-header .btn-close-popup-form i {
        width: 32px;
        height: 32px;
        color: #000;
    }

    .form-user-mobile .form-header .text-welcome {
        font-size: 20px;
    }

    .form-user-mobile .form-header .user-saldo {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 8px;
        background-color: var(--light);
        border-radius: 8px;
    }

    .form-user-mobile .form-header .user-saldo .saldo-icon {
        width: 23px;
        height: 23px;
        font-size: 22px;
        color: #000;
    }

    .form-user-mobile .form-header .user-saldo .saldo-value {
        font-weight: 700;
    }

    .form-user-mobile .form-body {
        display: block;
        position: relative;
        padding: 12.5px 20px;
    }

    .form-user-mobile .form-body .user-menu {
        display: block;
        position: relative;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .form-user-mobile .form-body .user-menu>.menu-item {
        padding: 12.5px 0;
        border-top: 2px solid var(--color-4);
        border-bottom: 2px solid var(--color-1);
    }

    .form-user-mobile .form-body .user-menu>.menu-item:first-child {
        border-top: 0;
    }

    .form-user-mobile .form-body .user-menu>.menu-item:last-child {
        border-bottom: 0;
    }

    .form-user-mobile .form-body .user-menu>.menu-item>.menu-link {
        display: flex;
        align-items: center;
        color: var(--white);
        font-size: 16px;
        font-weight: 600;
        text-decoration: none;
    }

    .form-user-mobile .form-body .user-menu>.menu-item>.menu-link>.nav-icon {
        margin-right: 10px;
        width: 24px;
        height: 24px;
        color: var(--color-6);
    }

    .form-user-mobile .form-body .user-menu>.menu-item>.menu-link>.nav-icon>i {
        font-size: 20px;
    }

    .form-user-mobile .form-footer {
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        height: auto;
    }

    .form-user-mobile .form-footer .btn {
        padding: 8px 0;
        border: 0;
        border-radius: 0;
    }

    .form-user-mobile .form-footer .btn .fi {
        width: 16px;
        height: 16px;
    }

    .form-input-wrapper {
        display: flex;
        align-items: center;
        position: relative;
        background-color: var(--black);
        border: 0px solid var(--color-2);
        border-radius: 5px;
    }

    .form-input-wrapper .form-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 45px;
        height: 35px;
        background-color: none;
        border-right: 0px solid var(--color-4);
        border-radius: 5px 0 0 5px;
        color: var(--color-3);
        text-align: center;
        font-weight: 700;
    }

    .form-input-wrapper .form-input {
        display: block;
        position: relative;
        padding: 8px 10px;
        width: 100%;
        height: 35px;
        background-color: transparent;
        border: 0 !important;
        border-radius: 0 5px 5px 0;
        box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.05);
        font-size: 16px;
        font-weight: 700;
        outline: 0 !important;
    }

    .game-wrapper {
        display: block;
        position: relative;
        background-image: radial-gradient(circle at center, var(--color-3), var(--color-1));
        border-radius: 20px;
        overflow: hidden;
    }

    .game-wrapper::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        height: 10px;
        background-image: var(--gradient-6);
        border-radius: 20px;
    }

    .game-wrapper .game-wrapper-title {
        display: block;
        position: relative;
        margin: 0 auto;
        padding: 8px 0;
        width: 160px;
        background-image: var(--gradient-2);
        border-radius: 0 0 30px 30px;
        color: var(--color-1);
        font-size: 24px;
        font-weight: 700 !important;
        line-height: 1;
        letter-spacing: 3px;
        text-align: center;
        text-transform: uppercase;
        z-index: 1;
    }

    .game-wrapper .game-wrapper-title::before,
    .game-wrapper .game-wrapper-title::after {
        content: "";
        position: absolute;
        top: 0;
        left: -10px;
        bottom: 0;
        width: 40px;
        height: auto;
        background-image: var(--gradient-2);
        border-radius: 0 0 0 12px;
        transform: skewX(25deg);
        z-index: -1;
    }

    .game-wrapper .game-wrapper-title::after {
        left: auto;
        right: -10px;
        border-radius: 0 0 12px 0;
        transform: skewX(-25deg);
    }

    .game-wrapper .title-separator {
        display: block;
        position: relative;
        width: auto;
        height: 10px;
        z-index: 1;
    }

    .game-wrapper .title-separator.left {
        margin-right: 50px;
        background-image: linear-gradient(to right, var(--color-5), var(--color-7));
    }

    .game-wrapper .title-separator.right {
        margin-left: 50px;
        background-image: linear-gradient(to right, var(--color-7), var(--color-5));
    }

    .game-wrapper .title-separator.left::before,
    .game-wrapper .title-separator.left::after {
        content: "";
        position: absolute;
        top: 0;
        right: -10px;
        bottom: 0;
        width: 15px;
        height: auto;
        background-color: var(--color-7);
        transform: skewX(25deg);
        z-index: -1;
    }

    .game-wrapper .title-separator.left::after {
        right: -25px;
        width: 8px;
    }

    .game-wrapper .title-separator.right::before,
    .game-wrapper .title-separator.right::after {
        content: "";
        position: absolute;
        top: 0;
        left: -10px;
        bottom: 0;
        width: 15px;
        height: auto;
        background-color: var(--color-7);
        transform: skewX(-25deg);
        z-index: -1;
    }

    .game-wrapper .title-separator.right::after {
        left: -25px;
        width: 8px;
    }

    .game-list .game-item {
        display: block;
        position: relative;
        width: 100%;
        max-width: 200px;
        height: auto;
        background-color: var(--color-6);
        border-radius: 12px;
    }

    .game-list .game-item img {
        border-radius: 12px;
    }

    .game-list .game-item .game-title {
        display: block;
        position: relative;
        margin: 0 auto;
        padding: 5px 10px;
        width: 100%;
        color: var(--color-1);
        font-weight: 600;
        font-size: 14px;
        text-align: center;
        text-decoration: none;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .game-list .game-item .game-link {
        display: none;
        justify-content: center;
        align-items: center;
        position: absolute;
        inset: 0;
        width: auto;
        height: auto;
        background-color: rgba(0, 0, 0, 0.75);
        border-radius: 12px;
    }

    .game-list .game-item:hover .game-link {
        display: flex;
    }

    .game-list .game-item .game-link .btn-play {
        display: block;
        position: relative;
        padding: 5px 30px;
        background-image: linear-gradient(to right, var(--color-7), var(--color-5));
        border-radius: 50px;
        color: var(--white);
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 1.25px;
        text-decoration: none;
        text-transform: uppercase;
    }


    .icon-box-info {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .icon-box-info .icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 50px;
        background-image: var(--gradient-2);
        border-radius: 50%;
        color: var(--black);
        font-size: 30px;
        line-height: 1;
    }

    .icon-box-info .icon .fi {
        display: block;
        position: relative;
        margin: 0;
        padding: 0;
        width: 30px;
        height: 30px;
    }

    .icon-box-info .icon .fi.fi-lg {
        width: 35px;
        height: 35px;
        font-size: 35px !important;
    }


    .icon-browser {
        display: block;
        position: relative;
        width: 40px;
        height: 40px;
        filter: grayscale(1);
    }

    .icon-browser:hover {
        filter: grayscale(0);
    }


    .icon-bank {
        display: block;
        position: relative;
        padding: 5px;
        width: 70px;
        background-color: var(--white);
        border-radius: 8px;
    }


    .logo-wrapper {
        display: block;
        position: relative;
    }

    .logo-wrapper .logo-box {
        display: block;
        position: relative;
    }

    .logo-wrapper .logo-box img {
        display: block;
        position: relative;
        width: 100%;
        height: 50px;
    }


    .modal .modal-dialog .modal-content {
        border-radius: 12px;
        overflow: hidden;
    }

    .modal .modal-dialog .modal-content .modal-header,
    .modal .modal-dialog .modal-content .modal-header img {
        border-radius: 10px 10px 0 0;
    }

    .modal .modal-dialog .modal-content .modal-header .close-modal {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 15px;
        right: 15px;
        width: 30px;
        height: 30px;
        background-color: var(--white);
        border-radius: 50px;
        color: var(--red-1);
        font-size: 25px;
        font-weight: 700;
    }

    .modal .modal-dialog .modal-content .modal-header .close-modal .fi {
        display: block;
        width: 25px;
        height: 25px;
    }

    .modal .modal-dialog .modal-content .modal-body {
        border-radius: 0 0 10px 10px;
    }


    .menu-header-container {
        display: block;
        position: fixed;
        inset: 0;
        width: auto;
        height: auto;
        background-color: rgba(0, 0, 0, 0.75);
        transition: transform 0.5s ease-in-out;
        transform: translateX(150%);
    }

    .menu-header-container .menu-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 120px;
        height: auto;
        background-color: var(--color-2);
    }

    .menu-header {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 0;
        margin: 0;
        padding: 0;
        list-style: none !important;
    }

    .menu-header .menu-item>.menu-link {
        display: block;
        justify-content: center;
        align-items: center;
        padding: 5px;
        flex-direction: column;
        text-decoration: none;
    }

    .menu-header .menu-item>.menu-link>.nav-icon {
        display: block;
        position: relative;
        margin: 0 auto;
        width: 25px;
        height: 25px;
        transition: all .15s ease-in-out;
    }

    .menu-header .menu-item.active>.menu-link>.nav-icon {
        filter: brightness(50%) sepia(100) saturate(100) hue-rotate(35deg);
    }

    .menu-header .menu-item:hover>.menu-link>.nav-icon {
        filter: brightness(50%) sepia(100) saturate(100) hue-rotate(35deg);
        transform: scale(1.25);
    }

    .menu-header .menu-item>.menu-link>.nav-text {
        color: var(--white);
        font-weight: 500;
        font-size: 14px;
        text-transform: uppercase;
    }

    .menu-header .menu-item.active>.menu-link>.nav-text,
    .menu-header .menu-item:hover>.menu-link>.nav-text {
        color: var(--color-9);
        font-size: 14px;
        font-weight: 500;
    }

    .menu-header .menu-item>.nav-dropdown {
        display: none;
        margin: 0;
        padding: 0;
        list-style: none !important;
        z-index: 10;
    }

    .menu-header .menu-item>.nav-dropdown.nav-dropdown-mobile {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        right: 120px;
        bottom: 0;
        padding: 15px;
        width: auto;
        height: auto;
        background-color: var(--color-1);
        overflow-y: hidden;
        overflow-y: scroll;
        transform: translateX(150%);
        transition: all .25s ease-in-out;
    }

    .menu-header .menu-item>.nav-dropdown.nav-dropdown-mobile.show {
        transform: translateX(0);
        margin-bottom: 6.8vh;
        z-index: 999;
    }

    .navbar-footer {
        width: 100%;
        text-align: center;
    }

    .navbar-footer .nav-item {
        margin-right: 10px;
        padding-right: 10px;
        border-right: 1px solid var(--text-light-color-hover);
    }

    .navbar-footer .nav-item:last-child {
        margin: 0;
        padding: 0;
        border-right: 0;
    }

    .navbar-footer .nav-item>.nav-link {
        padding: 0;
        font-size: 1.2vh;
        font-weight: 600;
        line-height: 1;
    }

    .navbar-footer .nav-item>.nav-link:hover {
        color: var(--color-9) !important;
        display: block;
        font-weight: 500;
    }

    .notifbar-wrapper {
        display: block;
        position: relative;
        padding-top: 8px;
    }

    .notifbar-wrapper::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: auto;
        height: 8px;
        background-image: var(--gradient-6);
    }

    .notifbar {
        display: block;
        position: relative;
        border-radius: 0 0 12px 12px;
        padding: 3px;
    }

    .notifbar::before,
    .notifbar::after {
        content: "";
        position: absolute;
        top: 0;
        left: -10px;
        bottom: 0;
        width: 40px;
        height: auto;
        background-color: var(--color-5);
        border-radius: 0 0 0 12px;
        transform: skewX(25deg);
        z-index: -1;
    }

    .notifbar::after {
        left: auto;
        right: -10px;
        border-radius: 0 0 12px 0;
        transform: skewX(-25deg);
    }

    .notifbar .icon-box {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-right: 5px;
    }

    .notifbar .icon-box .icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 35px;
        height: 35px;
        background-image: var(--gradient-1);
        border-radius: 50px;
        color: var(--white);
        font-size: 14px;
        line-height: 1;
    }

    .notifbar .icon-box .icon .fi {
        line-height: 1;
    }

    .notifbar .icon-box .text {
        font-weight: 700;
        color: var(--black);
    }

    .notifbar .marquee-bar {
        display: flex;
        align-items: center;
        position: relative;
        padding: 5px;
        height: 35px;
        background-color: #ffd21f;
        border-radius: 50px;

    }

    .notifbar .marquee-bar marquee {
        display: block;
        border-radius: 50px;
        line-height: 1;
        font-weight: 800;
        color: #2a1200;

    }



    .page-title {
        display: block;
        position: relative;
        margin-bottom: 15px;
        padding-bottom: 10px;
        font-size: 20px;
        font-weight: 600;
    }

    .page-title::before,
    .page-title::after {
        content: "";
        position: absolute;
        bottom: 0;
        height: 3px;
        background-color: var(--color-6);
        border-radius: 50px;
    }

    .page-title::before {
        left: 0;
        width: 10px;
    }

    .page-title::after {
        left: 15px;
        width: 40px;
    }


    .promo-box {
        display: block;
        position: relative;
        padding: 3px;
        background-image: var(--gradient-6);
        border-radius: 12px;
    }

    .promo-box img {
        display: block;
        position: relative;
        border-radius: 10px;
    }

    .promo-box .btn-popup-promo {
        display: flex;
        align-items: center;
        gap: 8px;
        position: absolute;
        bottom: 3px;
        right: 3px;
        background-image: var(--gradient-2);
        border-radius: 20px 0 10px 0;
        color: var(--color-1);
        font-size: 14px;
        font-weight: 700;
        z-index: 1;
    }

    .promo-box .btn-popup-promo .fi {
        display: block;
        width: 14px;
        height: 14px;
    }

    .promo-box .btn-popup-promo::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -10px;
        width: 30px;
        height: auto;
        background-image: var(--gradient-2);
        border-radius: 10px 0 0 0;
        transform: skewX(-15deg);
        z-index: -1;
    }


    .provider-wrapper {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
        gap: 6px;
        position: relative;
        margin: 10px 0 12px;
    }

    .provider-wrapper .provider-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 42px;
        background-image: var(--gradient-1);
        border-radius: 6px;
        padding: 3px 4px;
        overflow: hidden;
    }

    .provider-wrapper .provider-icon img {
        display: block;
        width: 100%;
        max-width: 70px;
        height: 24px;
        object-fit: contain;
        filter: grayscale(1);
        transition: filter .25s ease;
    }

    .provider-wrapper .provider-icon img:hover {
        filter: grayscale(0);
    }

    .provider-wrapper .provider-list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .provider-wrapper .provider-list .provider-item {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 100px;
        height: 50px;
        background-image: var(--gradient-1);
        border-radius: 8px;
    }

    .provider-wrapper .provider-list .provider-item img {
        display: block;
        width: 10vh;
        height: auto;
        max-height: 60px;
        aspect-ratio: 4/3;
        filter: grayscale(1);
        object-fit: contain;
    }

    .provider-wrapper .provider-list .provider-item img:hover {
        filter: grayscale(0);
    }

    .bank-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        align-items: stretch;
    }

    .bank-card {
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        min-height: 48px;
        padding: 6px 10px;
        border-radius: 10px;
        background: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.55);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    }

    .bank-card::after {
        content: "";
        position: absolute;
        top: 6px;
        right: 6px;
        width: 12px;
        height: 12px;
        background: #2eff2e;
        border: 2px solid #ffffff;
        border-radius: 50%;
        box-shadow: 0 0 8px rgba(46, 255, 46, 0.7);
    }

    .bank-card img {
        width: 100%;
        max-width: 120px;
        height: 28px;
        object-fit: contain;
        display: block;
    }

    @media only screen and (max-width: 576px) {
        .provider-wrapper {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 5px;
            margin-bottom: 78px;
        }

        .provider-wrapper .provider-icon {
            min-height: 38px;
            padding: 3px;
        }

        .provider-wrapper .provider-icon img {
            max-width: 62px;
            height: 20px;
        }

        .bank-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 6px;
        }

        .bank-card {
            min-height: 44px;
            padding: 4px;
        }

        .bank-card img {
            max-width: 110px;
            height: 24px;
        }

        .bank-card::after {
            top: 5px;
            right: 5px;
            width: 10px;
            height: 10px;
        }
    }


    .splide__progress {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: auto;
        height: auto;
    }

    .splide__progress__bar {
        background-color: var(--color-6);
    }

    /**** endof components style ****/
    /*amp pop image*/
    .custom-lightbox {
        background:
            rgba(0,0,0,0.7)        ;
        width: 100%;
        height: 100%;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 90;
    }

    .custom-lightbox img {
        max-width: 120vh;
        min-width: 10vh;
        min-height: 20vh;

        z-index: 90;
    }


    .custom-lightbox h1 {
        color: white;
    }

    /**** begin responsive style ****/

    @media only screen and (min-width:375px) {

        .logo-wrapper .logo-box img {
            display: block;
            position: relative;
            max-width: 180px;
            max-height: 50px;
        }


    }

    @media (min-width: 993px) {

        .btn-popup-form,
        .checkbox,
        .hamburger-lines {
            display: none;
        }

        .form-wrapper {
            display: block;
            position: relative;
            background-color: transparent;
            transform: translate(0);
            z-index: 1;
            color: var(--white);
        }

        .form-login {
            padding: 0;
            max-width: 100%;
            background-color: transparent;
            border-radius: 0;
        }

        .form-login .input-group .form-control {
            max-width: 120px;
            font-weight: 700;
        }

        .form-login .btn {
            width: 70px;
        }

        .game-wrapper .game-wrapper-title {
            padding: 10px;
            width: 200px;
            font-size: 32px;
            letter-spacing: 3px;
        }

        header {
            position: relative;
        }

        .header-menu {
            border-top: 8px solid var(--color-4);
        }

        .icon-box-info .icon {
            width: 65px;
            height: 65px;
            font-size: 40px;
        }

        .icon-box-info .icon .fi {
            width: 40px;
            height: 40px;
        }

        .icon-box-info .icon .fi.fi-lg {
            width: 45px !important;
            height: 45px !important;
            font-size: 45px !important;
        }

        .icon-bank {
            max-width: 90px;
            background-color: var(--color-2);
        }

        .logo-wrapper {
            margin-bottom: -20px;
            margin-left: 30px;
            max-width: 230px;
            background-color: var(--color-4);
            border-radius: 0 0 50px 50px;
            z-index: 1;
        }

        .logo-wrapper::before,
        .logo-wrapper::after {
            content: "";
            position: absolute;
            top: 0;
            left: -10px;
            bottom: 0;
            width: 40px;
            height: auto;
            background-color: var(--color-4);
            border-radius: 0 0 0 12px;
            transform: skewX(25deg);
            z-index: -1;
        }

        .logo-wrapper::after {
            left: auto;
            right: -10px;
            border-radius: 0 0 12px 0;
            transform: skewX(-25deg);
        }

        .logo-wrapper .logo-box::before,
        .logo-wrapper .logo-box::after {
            content: "";
            display: block;
            position: absolute;
            top: 10px;
            left: -30px;
            bottom: 10px;
            width: 7px;
            height: auto;
            background-color: var(--color-6);
            transform: skewX(25deg);
        }

        .logo-wrapper .logo-box::after {
            left: auto;
            right: -30px;
            transform: skewX(-25deg);
        }

        .menu-header-container {
            position: relative;
            padding: 0;
            width: 100%;
            background: transparent;
            transform: translate(0);
        }

        .menu-header-container .menu-wrapper {
            display: block;
            position: relative;
            width: 100%;
            background-color: transparent;
        }

        .menu-header {
            flex-direction: row;
            flex-wrap: nowrap;
            gap: 0;
            margin-top: 0;
        }

        .menu-header .menu-item>.menu-link {
            min-width: 80px;
            padding: 12.5px 5px;
        }

        .menu-header .menu-item:hover {
            background: var(--color-2) radial-gradient(circle at center, var(--color-3), transparent);
        }

        .menu-header .menu-item>.menu-link>.nav-icon {
            margin-bottom: 3px;
            width: 30px;
            height: 30px;
        }

        .menu-header .menu-item>.menu-link>.nav-text {
            font-size: 14px;
        }

        .menu-header .menu-item:hover>.nav-dropdown {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            padding: 20px 15px 15px;
            width: 100%;
            min-height: 100px;
            background-color: var(--transparent-1);
            border-radius: 0 0 12px 12px;
        }

        .menu-header .menu-item:hover>.nav-dropdown>.item {
            flex-basis: 25%;
            padding: 10px;
        }

        .menu-tab-wrapper .menu-tab>.tab-link>.tab-text {
            font-size: 16px;
            font-weight: 700;
        }

        .navbar-footer .nav-item>.nav-link {
            font-size: 14px;
        }

        .notifbar .icon-box {
            margin-right: 10px;
        }
    }

    @media (min-width: 1200px) {}

    /**** endof responsive style ****/
    /*
* ==========================================
* RTP SLot
* ==========================================
*/
    .slot {
        display: block;
        margin-bottom: 10vh;
        ;
    }

    .slot ul {
        list-style: none;
        ;
    }

    .slot li {
        font-family: Arial;
        font-size: 0px;
    }

    .slot li:before {
        padding: 5px 5px 5px 5px;
        background-color: transparent;
        border-radius: 30%;
        content: "";
        display: inline-block;
        margin-right: 10px;
        margin-bottom: 2px;
        height: 10px;
        width: 10px;
    }

    .slot h2 {
        font-size: 24px;
        text-align: center;
        color: #FC0;
    }

    .slot .slot-sidebar {
        padding-right: 10px;
        padding-left: 0;
        margin-top: 5px;
        background-color: black;
        float: none !important;
        width: 100% !important;
        flex: none !important;
        max-width: 100% !important;
        padding-right: 0 !important;
    }

    .btn-provider img {
        filter: brightness(1) invert(0);
    }

    .btn-provider:hover img {
        filter: brightness(1) invert(0);
    }

    .slot-sidebar-nav {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: nowrap;
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
    }

    .slot-sidebar-nav>li {
        border-bottom: 1px solid #0092b1;
        width: 100%;
        position: relative;
        display: block;
        border-bottom: none;
    }

    .slot-sidebar-nav>li>a {
        color: #fff;
        font-size: 13px;
        padding: 7px 10px;
        display: block;
        background-color: black;
    }

    .btn-provider {
        text-align: center;
        display: block;
    }

    .enter {
        display: none;
    }

    .btn-provider span {
        position: unset;
    }

    .slot .active {
        background-color: #C90;
    }

    .slot .content {
        float: none;
        width: 100%;
        padding: 0;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .wrapper1 {
        width: 100%;
        padding: 0;
        white-space: nowrap;
        overflow: hidden;
        position: relative;
        z-index: 0;
    }

    .card1 {
        float: left;
        width: 16.666666666666%;
        border: none;
        text-align: center;
        position: relative;
        background: transparent;
    }

    .card-content1 {
        margin: 7px;
        color: #fff;
        font-size: 12px;
        border: none;
        overflow: hidden;
        position: relative;
        background: black;
        border-radius: 25px;
        padding-bottom: 10px;
    }

    .percent {
        height: 30px;
        display: flex;
        overflow: hidden;
        line-height: 0;
        font-size: 0.75rem;
        background-color: #e9ecef;
        /* border-radius: .25rem; */
        position: relative;
        z-index: 1;
        border-radius: 18px;
        width: 90%;
        margin: 0 auto;
    }

    .percent p {
        z-index: 15;
        position: absolute;
        text-align: center;
        width: 100%;
        font-size: 14px;
        font-weight: bold;
        transform: translateY(14px);
        color: black;
    }

    .percent-bar {
        /* background-color: #ffc107; */
        background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
        background-size: 1rem 1rem;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-pack: center;
        justify-content: center;
        overflow: hidden;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        /* background-color: #007bff; */
        transition: width 0.6s ease;
        -webkit-animation: progress-bar-stripes 1s linear infinite;
        animation: progress-bar-stripes 1s linear infinite;
        /* animation: ; */
        z-index: 10;
    }

    .yellow {
        background-color: #ffc107;
    }

    .green {
        background-color: #28a745;
    }

    .red {
        background-color: #dc3545;
    }

    .hover-btn {
        position: absolute;
        opacity: 0;
        background-color: rgba(0, 0, 0, 0.9);
        transition: all 0.1s ease-in-out;
        z-index: 10;
        width: 100%;
        height: 87%;
    }

    .maintenance {
        position: absolute;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 10;
        width: 100%;
        height: 100%;
        color: white;
        text-align: center;
        margin: -6px;
    }

    .maintenance p {
        position: relative;
        top: 40%;
        font-size: 13px;
    }

    .slot .play-btn {
        font-size: 15px;
        text-decoration: none;
        color: white;
        text-align: center;
        align-items: center;
        /* width: 100%; */
        margin-top: 42%;
        padding: 8px;
        display: block;
        margin-left: 30px;
        margin-right: 30px;
        margin: 42% 30px 42% 30px;
        background: linear-gradient(to right, #6b5100 0%, #dca600 100%);
        border-radius: 18px;
        transition: all 0.3s ease;
    }

    .slot .play-btn:hover {
        color: #000;
        background: linear-gradient(to left, #dca600 0%, #6b5100 100%);
    }

    .img-zoom {
        width: 95% !important;
        transition: all 0.45s ease-in-out;
        border-radius: 20px;
    }

    .ygg-img {
        border: 5px solid #2f2f2f;
    }

    .hover-btn:hover {
        opacity: 100%;
    }

    .hover-btn:hover~.img-zoom {
        /* transform: scale(1.2); */
        position: relative;
    }

    .long {
        display: none;
    }

    .short {
        display: none;
    }

    .next-btn {
        width: 15%;
    }

    .mySlides {
        display: none;
    }

    .next-btn {
        background-color: #292a2b;
        border: none;
        color: #fff;
    }

    @media (min-width: 576px) {
        .container {
            max-width: 540px;
        }
    }

    @media (min-width: 768px) {
        .container {
            max-width: 720px;
        }
    }

    @media (min-width: 992px) {
        .container {
            max-width: 960px;
        }
    }

    @media (min-width: 1200px) {
        .container {
            max-width: 1140px;
        }
    }

    @media (max-width: 992px) {
        .slot-sidebar-nav {
            flex-wrap: nowrap;
        }

        .slot-sidebar {
            float: none !important;
            width: 100% !important;
            flex: none !important;
            max-width: 100% !important;
            padding-right: 0 !important;
        }

        .content {
            float: none !important;
            width: 100% !important;
            flex: none !important;
            max-width: 100% !important;
        }

        .card1 {
            width: 33.3% !important;
        }

        .hover-btn {
            display: none;
        }

        .hover-btn:hover~.img-zoom {
            transform: scale(1);
            position: relative;
        }

        .btn-provider {
            text-align: center;
            display: block;
        }

        .enter {
            display: block;
        }

        .btn-provider span {
            position: unset;
        }

        .btn-provider i {
            margin: 0;
        }

        .slot-sidebar-nav li {
            border-bottom: none;
        }

        .slot-sidebar-nav li a p {
            font-size: 5px;
        }

        .img-zoom {
            height: auto;
        }

        .slot-sidebar-nav li a img {
            height: 17.5px !important;
        }

        .maintenance p {
            font-size: 5px;
        }
    }

    /*Multicarousel RTP*/
    .MultiCarousel {
        float: left;
        overflow: hidden;
        padding: 15px;
        margin-top: -10px;
        width: 100%;
        position: relative;
    }

    .MultiCarousel .MultiCarousel-inner {
        transition: 1s ease all;
        float: left;
    }

    .MultiCarousel .MultiCarousel-inner .item {
        float: left;
    }

    .MultiCarousel .MultiCarousel-inner img {
        padding: 0px 5px;
    }

    .MultiCarousel .MultiCarousel-inner .item>div {
        text-align: center;
        padding: 10px;
        margin: 10px;
        background: #f1f1f1;
        color: #666;
    }

    .MultiCarousel .leftLst,
    .MultiCarousel .rightLst {
        position: absolute;
        border-radius: 50%;
        top: calc(50% - 20px);
    }

    .MultiCarousel .leftLst {
        left: 0;
        background: var(--color-4);
        color: var(--light);
    }

    .MultiCarousel .rightLst {
        right: 0;
        background: var(--color-4);
        color: var(--light);
    }

    .MultiCarousel .leftLst.over,
    .MultiCarousel .rightLst.over {
        pointer-events: none;
        background: var(--color-3);
    }

    @media (min-width: 993px) {
        .footer-fixed-navbar {
            display: none;
        }
    }

    /*--floatclose--*/
    .close-icon {
        display: block;
        box-sizing: border-box;
        width: 20px;
        height: 20px;
        border-width: 3px;
        border-style: solid;
        border-color: red;
        border-radius: 100%;
        background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%, white 56%, transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%, white 56%, transparent 56%, transparent 100%);
        background-color: red;
        box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
        transition: all 0.3s ease;
    }

    /*--small big--*/
    .mobile1 {
        width: auto;
        height: auto;
        display: block;
    }

    .desktop1 {
        width: auto;
        height: auto;
        display: none;
    }

    @media only screen and (min-width: 768px) {
        .mobile1 {
            width: auto;
            height: auto;
            display: none;
        }

        .desktop1 {
            width: auto;
            height: auto;
            display: inline;
        }
 


   
    .myfloat{position:fixed;float:left;bottom:60px;left:10px;z-index:100;}.myfloatr{position:fixed;float:right;bottom:60px;right:10px;z-index:100;}.mobile {width: auto; height: auto;bottom:60px;display: block;}.desktop {width: auto;height: auto;display: none;}@media only screen and (min-width: 768px) {.mobile {width: auto;bottom:60px;height: auto;display: none;}.desktop {width: auto;height: auto;display: inline;}}