@media screen and (min-width: 320px) and (max-width: 1200px) {

    /* login page css */
    .page-container {
        width: 100%;
    }

    .outlinebox {
        width: 370px;
        gap: 20px;
        padding: 4px;
        border-radius: 10px;
    }

    .login_form {
        width: 100%;
    }

    .content {
        gap: 10px 10px;
        grid-template-columns: 90px 1fr;
    }

    .content label {
        font-size: 13.5px;
        letter-spacing: 2px;
        font-weight: 600;
    }

    .content input {
        width: 100%;
        font-size: 13px !important;
        padding: 0px 3px !important;
        height: 23px !important;
        border-radius: 2px !important;
    }

    .remember input {
        width: 11px !important;
        height: 11px !important;
    }

    .loginbtn {
        width: 88%;
    }

    .remember label {
        font-size: 11px;
        color: #fff;
        letter-spacing: 0px;
        font-weight: normal;
    }

    .login-box {
        padding: 10px 8px 15px 10px;
        gap: 3px 20px;
        border-radius: 10px;
    }

    /* home page css */


    .sidebar {
        left: -10px;
        top: 40%;
        width: 80px;
    }

    .sidebar.active {
        left: 39px;
    }

    .winner_list img {
        width: 20px !important;
    }

    .jackpot-text img {
        height: 16px !important;
        width: auto !important;
        max-width: max-content;
    }

    .count_updown {
        font-size: clamp(16px, 2vw, 32px) !important;
        letter-spacing: 0px;
    }

    .winnerlist {
        margin-left: 5px;
    }

    .winner_list span {
        font-size: clamp(14px, 2vw, 16px);
    }

    .topheader {
        gap: 0px;
    }

    .playerid {
        padding: 6.5px 0 0 12px !important;
        font-size: 10px !important;
    }


    .gridcolsss .playerid {
        gap: 9px;
    }

    .playerid.custome2s {
        position: relative;
        top: 0px !important;
    }

    .playerid.custome3s {
        position: relative;
        top: 0px !important;
    }

    .footersec {
        grid-template-columns: 34% 66%;
    }

    .playerid img {
        width: 16px;
    }



    .verm {
        font-size: 10px;
        padding: 0px;
    }

    .content-tab {
        padding: 20px;
        height: calc(100vh - 20px);
        padding-left: 70px;
    }

    .grid_bottom:first-child {
        padding-left: 45px;
    }

    .grid_bottom {
        display: grid;
        padding-right: 40px;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        margin-top: -6px;
        gap: 10px;
    }

    .th-dots img {
        height: 125px;
    }

    .rightmenu {
        right: -10px;
        top: 45%;
    }

    footer .footersec {
        height: 88px !important;
        align-items: end;
    }

    .leftbottom {
        background-size: 100%;
        width: 100%;
        background-repeat: no-repeat;
        height: 88px;
    }

    .card_box {
        max-width: 180px !important;
        margin: -15px -10px 0 -10px;
    }

    .card_box.twogame {
        width: auto;
    }

    .card11 .gamecard img {
        height: 110px !important;
        width: auto;
    }

    .gamecard.game-launch-btn .heartshape {
        bottom: 0;
    }

    .col.card11 {
        margin: 0 -24px 0 0;
    }

    .gamecard.game-launch-btn .heart_icon {
        width: 25px;
        left: 35px;
        bottom: 5px;
    }


    .playgameborder {
        left: -18px;
        top: -50px;
    }

    .content-tab .menugridall {
        margin-left: 0px;
        width: 100%;
        display: grid;
        align-items: center;
        gap: 9px;
        grid-template-columns: 110px 20px 1fr !important;
        z-index: 1;
        height: calc(100vh - 180px);
    }

    .fullscreen-active .content-tab .menugridall {
        grid-template-columns: 115px 20px 1fr;
    }

    .fullscreen-active .card_box {
        width: 180px;
    }

    .fullscreen-active .manbannergame {
        width: 100%;
        height: 218px;
    }





    .responsive-iframe iframe {
        width: 100% !important;
    }

    .verm {
        font-size: 7px;
        padding: 0px;
        position: relative;
        top: 12px;
    }

    .allgameslider .owl-dots .owl-dot {
        width: 8px;
        height: 8px;
        margin: 0 4px;
    }

    .allgameslider .owl-dots .owl-dot.active {
        width: 12px !important;
        height: 12px !important;
    }

    .updownarrow {
        position: absolute;
        right: 8px;
        top: 20px;
        background: none;
        outline: none;
        border: none;
    }

    .updownarrow img {
        width: 24px;
    }

    .rightbottom.active {
        transform: translateY(-60px);
    }

    .soundinfo img {
        max-width: 55px;
    }


    .login121s {
        position: absolute;
        width: 138px;
        right: 0px;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 17px;
    }

    .logoutbtns {
        gap: 0px;
        padding: 5px 20px;
    }

    .soundlogout {
        gap: 0;
        padding: 10px 0;
    }

    .toggle-btn {
        top: 50%;
        left: 7%;
        transform: translate(-50%, -37%);
        width: 27px;
        height: 200px;
    }

    .toggle-btn.active {
        left: 100px;
    }

    .grid_bottom button img {
        width: 70px;
    }

    .progressbar img {
        width: 80%;
    }

    .infobook img {
        width: 45px;
    }

    .btn-close-custome img {
        width: 40px;
    }

    .modal-dialog.modal-dialog-centered.custome-modal-lg {
        max-width: 65% !important;
    }

    .goldenlegalogo {
        width: 180px;
        top: 12px;
    }

    .coment2o img {
        width: 80px;
    }

    .golden_info {
        text-align: center;
        padding: 0 16px 18px 17px;
        width: 100%;
        height: calc(100vh - 170px);
        margin-top: 0px;
    }

    .progressbar {
        top: 63px !important;
    }

    .cartoon_slid_sec .owl-nav .owl-next img {
        width: 50px;
    }

    .cartoon_slid_sec .owl-nav .owl-prev img {
        width: 50px;
    }

    .btn-close-custome {
        right: -4px;
        top: -14px;
    }

    .sizewinner {
        height: 22px;
    }

    .winner_list {
        height: 21px;
        gap: 3px !important;
    }

    .card_box span {
        width: 66px;
        top: 22px;
    }

    .heart_icon {
        width: 25px;
        left: 26px;
        bottom: 20px;
    }


    .content.flex_diraction {
        gap: 4px;
    }

    .game_name {
        top: 0px;
        left: 4px;
    }

    .rightbottom.active .updownarrow {
        top: 40px;
    }

    .info_icon img {
        width: 20px;
    }

    .rightbottom {}

    .rightbottom {
        width: 72%;
        left: 29%;
        transform: translateY(30px);
    }

    .progress-container {
        position: absolute;
        bottom: 90px !important;
        width: 75% !important;
    }

    .fullscreen-active .progress-container {
        bottom: 30px !important;
    }

    .manbannergame {
        width: auto;
        height: 260px !important;
    }

    .shortgameban {
        height: 106px;
        width: auto;
    }

    .login-box::before {
        padding: 1px;
        border-radius: 5px;
    }

    .outlinebox::before {
        padding: 1px;
        border-radius: 10px;
    }

    .card-title {
        font-size: clamp(15px, 2vw, 16px);
        line-height: 1.1;
        margin-bottom: 10px;
    }

    .clubCard {
        padding: 15px 20px 10px;
    }

    .agree-row label {
        font-size: 13px;
    }

    .field-row input {
        padding: 10px 35px 10px 20px;
        font-size: 15px;
    }

    .sweepstakes-rules {
        padding: 20px 20px 10px;
    }

    .heading_red {
        font-size: clamp(16px, 4vw, 18px);
        margin-left: 0%;
    }

    .purchase_nec {
        padding: 2px 15px 15px 15px;
        overflow-y: scroll;
    }

    .purchase_nec p {
        font-size: 13px;
    }

    .nav.custom-list {
        font-size: 12px;
    }

    .purchase_nec h5 {
        font-size: 14px;
    }

    .thanks_agree_btn .btn img {
        width: 150px;
    }

    .grid_col {
        gap: 6px;
    }

    .vibclublogo img {
        width: 210px;
    }

    .btn-closess {
        width: 50px;
        height: 50px;
        right: 40px;
        top: 30px;
    }

    .btn-closess img {
        width: 100%;
    }

    .btn-send img {
        width: 90px;
    }

    .goldenbookinfo.active {
        padding: 0 !important;
    }

    .h4,
    h4 {
        font-size: calc(1rem + 0.2vw);
    }

    .h3,
    h3 {
        font-size: calc(1rem + .3vw);
    }

    .goldenbookinfo p {
        font-size: 16px;
    }

    .page-container {
        width: 84% !important;
    }


    .fullscreen-active .logocenter img {
        margin: 0 !important;
        width: 180px;
    }


    .logocenter img {
        margin: 0 !important;
        width: 140px;
    }

    .logoform {
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding-bottom: 80px;
    }

    .fullscreen-active .logoform {
        align-items: center;
        justify-content: center;
        gap: 20px;
        padding-bottom: 0px;
    }

    #progressText {
        top: 1px !important;
        font-size: 16px !important;
    }

    .progress-bar {
        height: 18px !important;
    }

    .progress-container {
        height: 24px !important;
    }

    .home_bg {
        left: 0;
        right: 0;
        bottom: 0;
    }

    .login_bg {
        height: calc(100vh - 0px);
    }

    .downloadbtn {
        left: 10px;
        bottom: 80px;
        width: 80px;
    }

    .facebookbtn {
        right: 10px;
        bottom: 80px;
        width: 80px;
    }

    .fullscreen-active .downloadbtn {
        bottom: 30px;
    }

    .fullscreen-active .facebookbtn {
        bottom: 30px;
    }

    .page-container {
        position: relative;
        transition: transform 0.3s ease;
        height: 100dvh;
        will-change: transform;
    }

    .login_form.active {
        position: relative;
        z-index: 10;
    }

    .fullscreen-active .page-container {
        width: 100% !important;
        max-width: 100%;
        height: 100dvh;
    }

    .onbording .logocenter {
        top: 36% !important;
    }

    .fullscreen-active .onbording .logocenter {
        top: 50% !important;
    }

    .bar-container {
        margin-bottom: 0px !important;
    }

    .coin-depth {
        top: -27px !important;
        width: 90px !important;
        height: 90px !important;
    }

    .coin-text {
        bottom: 1px !important;
        width: 60px !important;
        font-size: 36px !important;
        -webkit-text-stroke: 1px rgb(36 134 221) !important;
    }

    .fish_bottomtext {
        height: 19px;
        border: 2px solid transparent;
        font-size: 11px;
        line-height: 15px;
        padding-left: 10px;
    }

    .heartshape {
        bottom: 15px;
        padding-left: 25px;
    }

    /* .fullscreen-active .card_box {
    width: 380px !important;
}
.fullscreen-active .manbannergame {
    width: auto;
    height: 610px;
} */


    .gamecard.game-launch-btn .heart_icon img {
        height: auto !important;
    }

    .card_box.twogame .gridgames2 {
        grid-template-rows: repeat(2, 115px) !important;
    }

    .game-card-full,
    .card_box:not(.twogame) {
        width: 134px;
        height: 255px;
    }

    .registerforms {
        width: 80%;
    }

    .card-title2 {
        font-size: clamp(12px, 3vw, 13px) !important;
    }

    .card_box.twogame span img {
        width: 60px !important;
        height: auto !important;
    }

    .card_box.twogame span {
        width: 66px;
        top: 2px;
    }

    .h2,
    h2 {
        font-size: calc(1.325rem + -0.1vw);
    }

    .idpassword {
        margin: 6px 0;
        padding: 10px !important;
    }

    .svg_check {
        height: 50px;
        width: 50px;
    }

    .svg_check {
        height: 50px;
        width: 50px;
        margin-bottom: 6px !important;
    }

    .regisss121 {
        font-size: 8px;
    }

    .registerbtn img {
        width: 130px;
    }

    .googlebtn {
        color: #fff;
        font-size: 12px;
    }
}


@media screen and (min-width: 1201px) and (max-width: 1430px) {
    .content label {
        font-size: 26px;
    }

    .remember label {
        font-size: 18px;
    }

    .content input[type="text"],
    input[type="password"] {
        font-size: 22px;
    }

    .login_form {
        width: 730px;
    }

    .playerid {
        padding: 11px 0 0 30px !important;
        font-size: clamp(14px, 2vw, 15.5px);
    }

    .playerid.custome3s {
        top: 12px;
    }

    .playerid.custome2s {
        top: 6px;
    }


}