@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: 3px 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: 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: 9.5px 0 0 12px;
        font-size: 12px;
    }

    .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%;
    }

    .footersec {
        height: 98px;
    }

    .card_box {
        width: 145px;
        margin: -15px 9px 0 0;
    }

    .card_box.twogame {
        width: auto;
    }

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



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

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

    .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(-40px);
    }

    .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: 60px;
    }

    .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: 70px;
        top: -13px;
    }

 .heart_icon {
    width: 23px;
    left: 4px;
    bottom: -2px;
}



    .content.flex_diraction {
        gap: 15px;
    }

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

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

    .info_icon img {
        width: 20px;
    }

    .rightbottom {
        transform: translateY(8.5%);
    }

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

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

    .manbannergame {
        width: auto;
        height: 218px;
    }

    .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 70px;
    }

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

    .field-row input {
        padding: 0px 35px 0 20px;
        font-size: 13px;
    }

    .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: 180px;
    }

    .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%;
        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: 1px;
}

}


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

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

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

    .login_form {
        width: 730px;
    }
}