/*
====================================
Medium Screen - Others
====================================
*/
@media screen and (min-width: 992px) and (max-width: 1199px) {

    html {
        font-size: 40%;
    }
}

/*
====================================
Small Screen - Tablate
====================================
*/
@media screen and (min-width: 768px) and (max-width: 991px) {

    html {
        font-size: 50%;
    }

    .container {
        max-width: 60rem;
        width: 60rem;
        padding-left: 15px;
        padding-right: 15px;
    }

    .header_main {
        display: block;
    }

        .header_main > div {
            width: 100%;
        }

    .header_left ul {
        justify-content: space-between;
    }

    .main_part {
        display: block;
    }

        .main_part > div {
            width: 100%;
        }

    .best_item ul {
        display: flex;
        align-items: center;
        justify-content: space-between;
        grid-gap: 1rem;
    }

        .best_item ul li {
            display: block;
            text-align: center;
            background: rgba(62, 76, 116, 0.24);
            backdrop-filter: blur(2px);
            padding: 2rem 2rem 2rem;
            border-radius: 1.2rem;
        }

            .best_item ul li img {
                display: block;
                margin: 0 auto 1.5rem;
            }

    .best_cnt p {
        display: none;
    }

    .header_right ul {
        justify-content: space-between;
        margin-top: 2.5rem;
    }

    .best_cnt .faq_btn {
        display: none;
    }

    .main_right {
        width: 100%;
        margin-top: 3.2rem;
    }

    .right_leftinner {
        display: block;
    }

    .right_part {
        padding: 0;
        display: block;
        border: 0.2rem solid #1B57F1;
        background: rgba(36, 48, 80, 0.40);
        box-shadow: 0.7703016400337219px 1.5406032800674438px 1.5406032800674438px 0px rgba(243, 243, 243, 0.11) inset, 0px 3.0812065601348877px 3.0812065601348877px 0px rgba(0, 0, 0, 0.11);
        backdrop-filter: blur(2.3109049797058105px);
    }

        .right_part .play_btn span,
        .right_part .play_btn span {
            color: #FFF;
            border-top: 0.2rem solid rgba(134, 189, 255, 0.44);
            background: radial-gradient(75.50% 150.00% at 47.14% -48.75%, #86C5FF 0%, #618DFF 47.12%, #1B57F1 100%);
            box-shadow: 0px 7.23944616317749px 12.065741539001465px 0px rgba(22, 30, 50, 0.09);
        }

        .right_part .hash_number span,
        .right_part .hash_number span {
            background: radial-gradient(249.31% 420.33% at 363.54% -201.25%, #86C5FF 0%, #618DFF 47.12%, #1B57F1 100%);
            color: #FFF;
        }

    .games_logo {
        padding: 3.2rem 2rem 3.2rem;
    }

    .right_part > div {
        width: 100%;
        overflow: hidden;
    }

    .hash_number {
        left: calc(100% - 5rem);
    }

    .deposit_cnt p {
        text-align: left !important;
        margin-left: 2rem;
        margin-bottom: 2rem;
    }

    .right_innerright {
        padding: 2.4rem 2rem 3.2rem;
        display: block;
    }

        .right_innerright > div {
            width: 100%;
        }

    .play_btn span {
        width: 100%;
        display: block;
        text-align: center;
    }

    .right_innerright ul {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 3.2rem;
    }

        .right_innerright ul li {
            padding: 0 0.8rem;
        }

    .topBox_title .nav-tabs .nav-link {
        width: 48%;
    }

    .about_bottom {
        flex-wrap: wrap;
    }

        .about_bottom > div {
            width: 50%;
            margin: 2rem 0;
        }

    .contact_item {
        margin-top: 2.6rem;
    }

    .footer_main {
        flex-direction: column-reverse;
    }

        .footer_main p {
            margin-top: 2rem;
        }

    .right_part .deposit_itemcard {
        border-color: #1C58F1;
        width: 100%;
        border-radius: 0px;
    }

    .deposit_cnt {
        width: 100%;
    }

    .games_logo {
        width: 40%;
    }
}

/*
====================================
Small Screen - Mobile
====================================
*/
@media screen and (max-width: 767px) {

    html {
        font-size: 50%;
    }

    .container {
        max-width: 60rem;
        width: 60rem;
        padding-left: 15px;
        padding-right: 15px;
    }

    .header_main {
        display: block;
    }

        .header_main > div {
            width: 100%;
        }

    .header_left ul {
        justify-content: space-between;
    }

    .main_part {
        display: block;
    }

        .main_part > div {
            width: 100%;
        }

    .best_item ul {
        display: flex;
        align-items: center;
        justify-content: space-between;
        grid-gap: 1rem;
    }

        .best_item ul li {
            display: block;
            text-align: center;
            background: rgba(62, 76, 116, 0.24);
            backdrop-filter: blur(2px);
            padding: 2rem 2rem 2rem;
            border-radius: 1.2rem;
        }

            .best_item ul li img {
                display: block;
                margin: 0 auto 1.5rem;
            }

    .best_cnt p {
        display: none;
    }

    .header_right ul {
        justify-content: space-between;
        margin-top: 2.5rem;
    }

    .best_cnt .faq_btn {
        display: none;
    }

    .main_right {
        width: 100%;
        margin-top: 3.2rem;
    }

    .right_leftinner {
        display: block;
    }

    .right_part {
        padding: 0;
        display: block;
        border: 0.2rem solid #1B57F1;
        background: rgba(36, 48, 80, 0.40);
        box-shadow: 0.7703016400337219px 1.5406032800674438px 1.5406032800674438px 0px rgba(243, 243, 243, 0.11) inset, 0px 3.0812065601348877px 3.0812065601348877px 0px rgba(0, 0, 0, 0.11);
        backdrop-filter: blur(2.3109049797058105px);
    }

        .right_part .play_btn span,
        .right_part .play_btn span {
            color: #FFF;
            border-top: 0.2rem solid rgba(134, 189, 255, 0.44);
            background: radial-gradient(75.50% 150.00% at 47.14% -48.75%, #86C5FF 0%, #618DFF 47.12%, #1B57F1 100%);
            box-shadow: 0px 7.23944616317749px 12.065741539001465px 0px rgba(22, 30, 50, 0.09);
        }

        .right_part .hash_number span,
        .right_part .hash_number span {
            background: radial-gradient(249.31% 420.33% at 363.54% -201.25%, #86C5FF 0%, #618DFF 47.12%, #1B57F1 100%);
            color: #FFF;
        }

    .games_logo {
        padding: 3.2rem 2rem 3.2rem;
    }

    .right_part > div {
        width: 100%;
        overflow: hidden;
    }

    .hash_number {
        left: calc(100% - 5rem);
    }

    .deposit_cnt p {
        text-align: left !important;
        margin-left: 2rem;
        margin-bottom: 2rem;
    }

    .right_innerright {
        padding: 2.4rem 2rem 3.2rem;
        display: block;
    }

        .right_innerright > div {
            width: 100%;
        }

    .play_btn span {
        width: 100%;
        display: block;
        text-align: center;
    }

    .right_innerright ul {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 3.2rem;
    }

        .right_innerright ul li {
            padding: 0 0.8rem;
        }

    .topBox_title .nav-tabs .nav-link {
        width: 48%;
    }

    .about_bottom {
        flex-wrap: wrap;
    }

        .about_bottom > div {
            width: 50%;
            margin: 2rem 0;
        }

    .contact_item {
        margin-top: 2.6rem;
    }

    .footer_main {
        flex-direction: column-reverse;
    }

        .footer_main p {
            margin-top: 2rem;
        }

    .right_part .deposit_itemcard {
        border-color: #1C58F1;
    }

    .right_part .deposit_itemcard {
        border-color: #1C58F1;
        width: 100%;
        border-radius: 0px;
    }

    .deposit_cnt {
        width: 100%;
    }

    .games_logo {
        width: 40%;
    }
}

@media screen and (max-width: 500px) {

    .container {
        max-width: 100%;
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .header_left ul li {
        padding-right: 2rem;
    }


    .header-area {
        padding: 3.5rem 0;
    }

    .contact_item p {
        width: 100%;
    }

    .best_box {
        padding: 4rem 2rem 3.2rem;
    }

    .best_item ul li {
        padding: 2rem 0;
    }
}