:root {
    --primary-color: #00ff42;
    --light_primary-color: #ff00000d;
    /* --dark_primary-color: #4c384b; */
    --dark_primary-color: #f0f8ff;
    --border_new_primary: #cfaa3ab8;
    --secondary-color: #dc0100;
    --txt-white: #fff;
    --txt-black: #000;
    --border-color: #ebebeb;
    --body-bg: #fff;
    --bs-green: #4bbf73;
    --bs-red: #d9534f;
    --dark-bg: #f8f8f8;
    --light-bg: #fff;
    --primary-bg: rgb(74 130 187 / 52%);
    --header_BGGG: #000000;

    --imge___before: #85744b;
    --light-black: #000;


}

.modal.fade.show {
    background-color: #000000cc;
    backdrop-filter: blur(5px);
}

.main-header {
    background: var(--txt-black);
}

.main-container {
    max-width: 1200px;
    width: 100%;
    margin: auto;
    padding: 0 15px;
}

.for_set_card {
    position: relative !important;
    z-index: 1 !important;
    padding: 0px !important;
    height: 120px;
    gap: 0 !important;
}

.for_set_card::after {
    position: absolute;
    content: "";
    background-image: url('../../../../uploads/engine_layer.png');
    height: 100%;
    width: 100%;
    z-index: -1;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;

}

.for_bg_new {
    position: relative;
    background-color: #000;
    z-index: 1;
}

/* .for_bg_new::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/main_bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    overflow: hidden;
    opacity: .3;
} */

.hedaing_main {
    color: var(--txt-black);
    font-size: 15px;
    font-weight: 300;
}

.value_txt {
    color: var(--txt-white);
    font-size: 16px;
    font-weight: 600;
    opacity: .7;
}

.for_shadow {
    width: 50% !important;
    border: none;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.2);
    position: relative !important;
}


.for_background {
    box-shadow: none !important;
    background-color: var(--light-bg);
    padding: 20px 0px;
}

.v-card__actions .refresh__Icon i {
    color: var(--primary-color) !important;


}

.myaccountbtn i {
    color: black;
}

.period-number {
    color: var(--primary-color);
}

.tab_row {
    padding: 20px;
    text-align: center;
    align-items: center;
    justify-content: center !important;
    margin: 15px 1px;
    border-radius: 10px;
    background: linear-gradient(145deg, #111c29, #070d14);
    border: 1px solid rgb(0 255 66);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}


.tab_row h2 {
    font-family: monospace;
    color: var(--txt-white);
    padding-bottom: 6px;
}

.mainrow {
    flex-direction: column;
}

.card__qr__sc {
    text-align: center;
}

.card__qr__sc img {
    height: 200px !important;
    border: 1px solid #fff;
    max-width: 200px !important;
    margin: 0 auto 20px;
    width: 100%;
}

.tab_style {
    font-size: 18px;
    color: var(--txt-white);
    font-weight: 500 !important;
}

.tab_style:focus {
    outline: none;
}

.bg_color_sec {
    /* background-color: var(--dark-bg) !important; */
    padding: 20px;
}

.coloumn_bg {
    border-radius: 10px;
    /* border: 1px solid var(--border-color); */
    /* padding: 20px; */
    height: 100%;
    padding-bottom: 70px;
}

/* //table css */

table {
    border-collapse: collapse;
    width: 100% !important;
    border: none !important;
}

table tr {
    border: none !important;
    white-space: nowrap !important;
    position: relative !important;
    transition: all 0.5s ease-in-out !important;
    background-color: transparent !important;
}


table th {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    padding: 15px 15px !important;
    border: none !important;
    border-bottom: 1px solid #06aeef1c !important;
    white-space: nowrap !important;
    /* background-color: var(--primary-color); */
    text-align: center;

}

table td {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    border: none !important;
    padding: 15px 15px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #05d737 !important;
    white-space: nowrap !important;
}

table tbody tr:last-child td {
    border-bottom: 0.7px solid #dddddd52 !important;
}

table thead {
    background: linear-gradient(145deg, #08da3c, #11c33f, #005e18);
    color: #fff;
}

.img_height {
    background-color: transparent !important;
}

.table_card_margin {
    margin: 30px 0px;
}

.table-responsive {
    overflow-y: auto;
}

.table_class {
    padding: 0 30px;
}

/* //end */

.padding_class {
    padding: 20px;
    margin-top: 20px;
    position: relative;
}

.img_h5 span {
    color: var(--primary-color);
}

.hover_btn:hover {
    background-color: var(--primary-color) !important;
    color: var(--txt-white) !important;
}




/* //main  button */
.button_color {
    background-color: var(--primary-color);
    color: var(--txt-black);
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--primary-color);
    white-space: nowrap;
    cursor: pointer;
    text-transform: capitalize;
}

.button_color:hover {
    color: var(--primary-color);
    background-color: transparent;
    border: 1px solid var(--primary-color);
}

.button_color:focus {
    outline: none;
    box-shadow: none;
}

.button_color:focus-visible {
    outline: none;
    box-shadow: none;
}

.secondary_btn {
    background-color: var(--primary-color);
    color: var(--txt-white);
    padding: 4px 35px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--primary-color);
    white-space: nowrap;
    cursor: pointer;
}

.secondary_btn:hover {
    color: var(--primary-color);
    background-color: transparent;
}

.secondary_btn:focus {
    outline: none;
    box-shadow: none;
}

.secondary_btn:focus-visible {
    outline: none;
    box-shadow: none;
}

.text_align {
    text-align: end;
}


/* //footer navigation */


.search_item {
    padding-left: 10px !important;
}

.new_card_flex {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.modal {
    z-index: 99999 !important;
}

.modal-body {
    padding: 20px !important;
}

.modal-content {
    border: none !important;
    /* background-color: #000;
    box-shadow: 0px 0px 6px #4f4f4f; */
    /* background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .035), transparent 38%), linear-gradient(145deg, #111c28 0%, #09111a 55%, #050b12 100%); */
    /* border: 1px solid #fff !important; */
    box-shadow: 0 30px 80px rgba(0, 0, 0, .80), 0 0 35px rgba(212, 175, 55, .10), inset 0 1px 0 rgba(255, 255, 255, .06);
    border-radius: 15px;
    background: #fff;
    overflow: hidden;
}
.modal-header {
    justify-content: center;
    /* clip-path: polygon(50% 100%, 100% 0%, 0% 0%, 53% 101%); */
    padding: 10px 0;
    padding-bottom: 30px;
    position: relative;

    min-height: 120px;

    padding: 22px 20px 48px;

    text-align: center;

    overflow: hidden;

    color: #071019;

    /* background:
        linear-gradient(
            145deg,
            #806017 0%,
            #c69b29 24%,
            #ffe477 50%,
            #d2a52f 72%,
            #76550d 100%
        ); */

    /* box-shadow:
        0 8px 25px rgba(212,175,55,.20),
        inset 0 2px 0 rgba(255,255,255,.65),
        inset 0 -10px 20px rgba(85,55,0,.20); */
        border: none;
}
.modal-header::after {

    content: "";

    position: absolute;

    left: -5%;
    right: -5%;

    bottom: -60px;

    height: 90px;

    background: #fff;

    border-radius:
        50% 50% 0 0 /
        100% 100% 0 0;

    transform: rotate(-2deg);

    z-index: 2;
}
.modal-header::before {

    content: "";

    position: absolute;

    top: -30px;
    left: -160px;

    width: 230px;
    height: 65px;

    background:
        rgba(255,255,255,.25);

    filter: blur(22px);

    transform: rotate(-25deg);

    animation: goldLight 4s ease-in-out infinite;

    z-index: 1;
}

@keyframes goldLight {

    0% {
        left: -160px;
        opacity: .05;
    }

    45% {
        left: 80%;
        opacity: .38;
    }

    100% {
        left: 110%;
        opacity: .05;
    }
}


.main_f{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.h2_heading_Color{
    margin: 0;
}

.modal-input {

    background: #615f5f;
    color: white;
    border: 1px solid grey !important;
}

.for_set_modal {
    width: 420px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: auto !important;
}

.modal-title {
    color: var(--txt-white);
    font-size: 20px;
    font-weight: 600;
}

.confirm_btn {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 30px;
}

.back_link {
    display: inline-flex;
    align-items: center;
    gap: 20px;
}

.back_link i {
    color: var(--txt-white);
    font-size: 18px;
}

.back_link h5 {
    color: var(--txt-white);
    font-size: 18px;
}

.copy-cls {
    color: var(--primary-color);
}

.info_alert {
    color: #dfa700;
    background-color: #fff5d9;
    border: 1px solid #ffc107;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
    text-align: start;
}


.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--txt-white);
    /* text-shadow: 0 1px 0 #fff; */
    /* opacity: 0.5; */
}

.modal-footer {
    border-top: 1px solid var(--border-color) !important;
    display: flex;
    justify-content: center;
}

.btn_width {
    width: 50% !important;
}

.form_center {
    margin-top: 30px;
}

.flex_topheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--primary-color);
    padding-bottom: 10px;
    color: var(--txt-black);
}

.recharge_btns {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

form {
    margin-bottom: 0px;
}

.amount-number {
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 3px 10px;
}

input:focus {
    outline: none;
}

.mobile_margin {
    margin: 0;
}


.link_flex {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.confirm-btn {
    background-color: var(--primary-color);
}

.form-control {
    display: block;
    width: 100%;
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1.5;
    background-clip: padding-box;
    border: 1px solid #7c7c7c;
    border-radius: 5px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    background: #525252;
    color: white;
}

.form-control:focus-visible {
    outline: none;

}

.button_new {
    background: linear-gradient(145deg, #08dd3d, #036b1d);
    color: white;
    font-size: 17px;
    padding: 16px 20px;
    border-radius: 7px;
    margin-left: 15px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .3s linear;
}

.button_new:hover {
    background-color: transparent;
    color:#fff;
}

.button_new:focus {
    outline: none;
}

.form-control:focus {
    box-shadow: none;
    border-color: var(--primary-color) !important;
}

.promotion-code {
    margin-top: 15px;
}

.promotion-code h6 {
    font-size: 16px;
    font-weight: 500;
    color: var(--primary-color);
}


.permotion_card {
    padding: 10px;
    border: none;
    /* border: 1px solid var(--border-color); */
    background-color: var(--dark-bg);
    text-align: center;
    align-items: center;
}


.permotion_card p {
    color: var(--primary-color);
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 0px;
}

.card .card-body {
    padding: 20px;
}

.header_btns {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.dropdown_btns {
    display: flex;
    flex-wrap: wrap;
}

.privacy_policy p {
    font-size: 15px;
    color: #ffffffc1;
}

.privacy_policy h1 {
    font-size: 25px;
    color: var(--primary-color);
    font-weight: 500;
}

.privacy_container {
    padding: 0px 170px;
}


.profile_cards {
  background: linear-gradient(145deg, #111c29, #070d14);
    border: 1px solid rgb(0 255 66);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 18px 38px;
    height: 100%;
    position: relative;
    z-index: 1;
    margin-top: 14px;
    color: #fff;

}


.user_title {
    font-size: 18px;
    font-weight: 400;
}


.flex_data {
    display: flex;
    gap: 20px;
    width: 100%;
}


.user_data .user_data_title {
    color: var(--primary-color);
}


.user_data span {
    font-size: 14px;
    font-weight: 300;
}

.aacordion_link {
    margin-top: 30px;
}

.img_bg_accordion {
    display: inline-flex;
    background:linear-gradient(145deg, #08dd3d, #036b1d);
    padding: 10px 10px;
    border-radius: 50%;
    cursor: pointer;
    margin-right: 15px;
    width: 50px;
    height: 50px;
    text-align: center;
    align-items: center;
    justify-content: center;
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);

}

.section1 {
    margin: 0 !important;
}

.section {
    margin-bottom: 120px;
}

.section2 {
    margin-bottom: 20px;
}

.ratio {
    color: var(--txt-white);
}

.section3 {
    position: relative;
    z-index: 1;
    margin: 0 !important;
}

.section3::after {
    position: absolute;
    content: "";
    background-image: url("../img/background.jpeg");
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    /* background-repeat: no-repeat; */
    background-size: cover;
    filter: brightness(0.5);
}

.section4 {
    position: relative;
    z-index: 1;
}

.section4::after {
    position: absolute;
    content: "";
    background-image: url("../img/background.jpeg");
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    /* background-repeat: no-repeat; */
    background-size: cover;
    filter: brightness(0.5);
}

.header_row {
    padding: 0px 20px;
}

.icon_accordion {
    color: var(--txt-white);
    font-size: 20px;
}

/* .red_button{
    background-color: #f44336;
    padding: 12px 15px;
    border-radius: 50px;
    color: white;
} */

/* .green_button {
    background-color: #4caf50;
    padding: 12px 15px;
    border-radius: 50px;
    color: white;
}

.purple_button {
    background-color: #9c27b1;
    padding: 12px 15px;
    border-radius: 50px;
    color: white;
} */

.flex_items_table {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}


.tg-btn-1 {
    display: inline-block;
    /* font-family: var(--tg-heading-font-family); */
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
    padding: 14px 49px;
    font-size: 15px;
    letter-spacing: 0.8px;
    position: relative;
    overflow: hidden;
    justify-content: center;
    text-align: center;
    min-width: 195px;
    z-index: 1;
    margin-top: 30px;
}

.tg-btn-1:focus {
    color: black;
    outline: none;
}

.tg-btn-1 svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.tg-btn-1 .cls-1 {
    /* fill: #45f882; */
    fill: var(--light_primary-color);
    stroke: var(--primary-color);
    stroke-width: 1.5px;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

.theme--light.v-table tbody tr:hover:not(.v-datatable__expand-row) {
    background-color: #ffde5a0f !important;
}

.tg-btn-1 .cls-2 {
    fill: var(--primary-color);
}

.tg-btn-1:hover .cls-1 {
    fill: var(--primary-color);
}

.tg-btn-1:hover span {
    color: #fff;
}

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

.amount-input {
    background: #585858 !important;
    color: white;
    border: 1px solid grey;
}

.amount-input::placeholder {
    color: white !important;
}

.for-image {
    position: relative;
    z-index: 1;
}

.for-image::after {

    position: absolute;
    content: "";
    background-image: url("../img/background.jpeg");
    height: 100%;
    width: 100%;
    background-size: cover;
    top: 0;
    background-position: center;
    left: 0;
    z-index: -1;
}

.for_bg {
    background: linear-gradient(145deg, #111c29, #070d14);
    border: 1px solid rgb(0 255 66);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    /* box-shadow: 5px 5px 15px #d1d9e691, -5px -5px 15px #fff0; */
    border-radius: 15px;
    margin-bottom: 30px;
}

.for_bg .card__qr__sc .qr {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* //red button */
.red_button {
    position: relative;
    padding: 10px 22px;
    border-radius: 50px;
    border: none;
    color: #fff;
    cursor: pointer;
    background-color: #f44336;
    transition: all 0.2s ease;
}

.red_button:active {
    transform: scale(0.96);
}

.red_button:before,
.red_button:after {
    position: absolute;
    content: "";
    width: 150%;
    left: 50%;
    height: 100%;
    transform: translateX(-50%);
    z-index: -1000;
    background-repeat: no-repeat;
}

.red_button:hover:before {
    top: -70%;
    background-image: radial-gradient(circle, #f44336 20%, transparent 20%),
        radial-gradient(circle, transparent 20%, #f44336 20%, transparent 30%),
        radial-gradient(circle, #f44336 20%, transparent 20%),
        radial-gradient(circle, #f44336 20%, transparent 20%),
        radial-gradient(circle, transparent 10%, #f44336 15%, transparent 20%),
        radial-gradient(circle, #f44336 20%, transparent 20%),
        radial-gradient(circle, #f44336 20%, transparent 20%),
        radial-gradient(circle, #f44336 20%, transparent 20%),
        radial-gradient(circle, #f44336 20%, transparent 20%);
    background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
        10% 10%, 18% 18%;
    background-position: 50% 120%;
    animation: greentopBubbles 0.6s ease;
}

.red_button:hover::after {
    bottom: -70%;
    background-image: radial-gradient(circle, #f44336 20%, transparent 20%),
        radial-gradient(circle, #f44336 20%, transparent 20%),
        radial-gradient(circle, transparent 10%, #f44336 15%, transparent 20%),
        radial-gradient(circle, #f44336 20%, transparent 20%),
        radial-gradient(circle, #f44336 20%, transparent 20%),
        radial-gradient(circle, #f44336 20%, transparent 20%),
        radial-gradient(circle, #f44336 20%, transparent 20%);
    background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
    background-position: 50% 0%;
    animation: greenbottomBubbles 0.6s ease;
}

/* //green button */

.green_button {
    position: relative;
    padding: 10px 22px;
    border-radius: 50px;
    border: none;
    color: #fff;
    cursor: pointer;
    background-color: #4caf50;
    transition: all 0.2s ease;
}

.green_button:active {
    transform: scale(0.96);
}

.green_button:before,
.green_button:after {
    position: absolute;
    content: "";
    width: 150%;
    left: 50%;
    height: 100%;
    transform: translateX(-50%);
    z-index: -1000;
    background-repeat: no-repeat;
}

.green_button:hover:before {
    top: -70%;
    background-image: radial-gradient(circle, #4caf50 20%, transparent 20%),
        radial-gradient(circle, transparent 20%, #4caf50 20%, transparent 30%),
        radial-gradient(circle, #4caf50 20%, transparent 20%),
        radial-gradient(circle, #4caf50 20%, transparent 20%),
        radial-gradient(circle, transparent 10%, #4caf50 15%, transparent 20%),
        radial-gradient(circle, #4caf50 20%, transparent 20%),
        radial-gradient(circle, #4caf50 20%, transparent 20%),
        radial-gradient(circle, #4caf50 20%, transparent 20%),
        radial-gradient(circle, #4caf50 20%, transparent 20%);
    background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
        10% 10%, 18% 18%;
    background-position: 50% 120%;
    animation: greentopBubbles 0.6s ease;
}

.green_button:hover::after {
    bottom: -70%;
    background-image: radial-gradient(circle, #4caf50 20%, transparent 20%),
        radial-gradient(circle, #4caf50 20%, transparent 20%),
        radial-gradient(circle, transparent 10%, #4caf50 15%, transparent 20%),
        radial-gradient(circle, #4caf50 20%, transparent 20%),
        radial-gradient(circle, #4caf50 20%, transparent 20%),
        radial-gradient(circle, #4caf50 20%, transparent 20%),
        radial-gradient(circle, #4caf50 20%, transparent 20%);
    background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
    background-position: 50% 0%;
    animation: greenbottomBubbles 0.6s ease;
}


/* //purple button */

.purple_button {
    position: relative;
    padding: 10px 22px;
    border-radius: 50px;
    border: none;
    color: #fff;
    cursor: pointer;
    background-color: #9c27b1;
    transition: all 0.2s ease;
}

.purple_button:active {
    transform: scale(0.96);
}

.purple_button:before,
.purple_button:after {
    position: absolute;
    content: "";
    width: 150%;
    left: 50%;
    height: 100%;
    transform: translateX(-50%);
    z-index: -1000;
    background-repeat: no-repeat;
}

.purple_button:hover:before {
    top: -70%;
    background-image: radial-gradient(circle, #9c27b1 20%, transparent 20%),
        radial-gradient(circle, transparent 20%, #9c27b1 20%, transparent 30%),
        radial-gradient(circle, #9c27b1 20%, transparent 20%),
        radial-gradient(circle, #9c27b1 20%, transparent 20%),
        radial-gradient(circle, transparent 10%, #9c27b1 15%, transparent 20%),
        radial-gradient(circle, #9c27b1 20%, transparent 20%),
        radial-gradient(circle, #9c27b1 20%, transparent 20%),
        radial-gradient(circle, #9c27b1 20%, transparent 20%),
        radial-gradient(circle, #9c27b1 20%, transparent 20%);
    background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
        10% 10%, 18% 18%;
    background-position: 50% 120%;
    animation: greentopBubbles 0.6s ease;
}

.purple_button:hover::after {
    bottom: -70%;
    background-image: radial-gradient(circle, #9c27b1 20%, transparent 20%),
        radial-gradient(circle, #9c27b1 20%, transparent 20%),
        radial-gradient(circle, transparent 10%, #9c27b1 15%, transparent 20%),
        radial-gradient(circle, #9c27b1 20%, transparent 20%),
        radial-gradient(circle, #9c27b1 20%, transparent 20%),
        radial-gradient(circle, #9c27b1 20%, transparent 20%),
        radial-gradient(circle, #9c27b1 20%, transparent 20%);
    background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
    background-position: 50% 0%;
    animation: greenbottomBubbles 0.6s ease;
}

@keyframes greentopBubbles {
    0% {
        background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,
            40% 90%, 55% 90%, 70% 90%;
    }

    50% {
        background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,
            50% 50%, 65% 20%, 90% 30%;
    }

    100% {
        background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,
            50% 40%, 65% 10%, 90% 20%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}

@keyframes greenbottomBubbles {
    0% {
        background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,
            70% -10%, 70% 0%;
    }

    50% {
        background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,
            105% 0%;
    }

    100% {
        background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,
            110% 10%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}

/* //new style */

.coustom_container {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 0 100px;
}

.slider_bg {
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /* padding: 160px 0px; */
    width: 100%;
    height: 100%;
}

.slider_bg .inner_text p {
    color: var(--txt-black);
    font-size: 20px;
    font-weight: 500;
}

.slider_bg .inner_text h1 {
    font-size: 55px;
    font-weight: 600;
    color: var(--txt-black);
    padding: 20px 0px;
    line-height: 40px;
}

.slider_bg .inner_text .slider_price {
    color: var(--txt-black);
    font-size: 15px;
    padding: 10px 0px 40px 0px;
}

.slider_bg .inner_text .slider_price span {
    color: var(--primary-color);
}

.shop_btn {
    padding: 15px 20px;
    text-decoration: none;
    color: var(--txt-white);
    font-size: 15px;
    border-radius: 5px;
    font-weight: 500;
    background-color: var(--primary-color);
}


.addredd_Sec {
    display: flex;
    align-items: center;
}

.addredd_Sec .location {
    border-right: 2px solid var(--border-color);
    padding: 10px;
}

.addredd_Sec .location label {
    color: var(--txt-white);
    font-size: 14px;
    opacity: .7;
}

.addredd_Sec .location p {
    color: var(--txt-white);
    white-space: nowrap;
    font-size: 14px;
}

.addredd_Sec .contact_box {
    padding: 10px;
}

.addredd_Sec .contact_box label {
    color: var(--txt-white);
    font-size: 14px;
    opacity: .7;
}

.addredd_Sec .contact_box p {
    color: var(--txt-white);
    font-size: 14px;
    white-space: nowrap;
}

.header-card {
    padding: 10px 0px;
}

.header-card .flex_end {
    display: flex;
    justify-content: flex-end;
}

.shop_btn:hover {
    color: var(--secondary-color);
}

.slider_1 {
    background-image: url("../img/jwellery.png");
    height: 100%;
}

.slider_2 {
    background-image: url("../img/coming.png");
    height: 100%;
}

.slider_3 {
    background-image: url("../img/diamond1.png");
    height: 100%;
}

.owl-carousel-new {
    margin: 0 !important;
    height: 400px !important;
}

.home_slider {
    height: 400px;
}

.second-content {
    position: relative;
    z-index: 1;
    padding: 30px 0px;
}

.second-content::after {
    position: absolute;
    content: "";
    background-image: url("../img/background.jpeg");
    height: 100%;
    width: 100%;
    background-size: cover;
    top: 0;
    background-position: center;
    left: 0;
    z-index: -1;
}


.content_top_home .heading {
    text-align: center;
}

.content_top_home .heading h3 {
    font-size: 38px;
    font-family: monospace;
    font-weight: 400;
    margin-bottom: 40px;
    color: white;
}

.content_top_home .inner-info {
    padding: 35px 52px;
    border-radius: 10px;
    position: relative;
    z-index: 1;
    border: 0;
    color: var(--txt-black);
    background-color: var(--light-black);
    /* border: 1px solid var(--border_new_primary); */
    box-shadow: 0px 0px 6px #4f4f4f;

}

/* .content_top_home .inner-info::after{
    position: absolute;
    content: "";
    background-image:url('../../../../uploads/background.jpeg');
    top:0;
    left: 0;
    height: 100%;
    width: 100%;
     z-index: -1;
 
} */

header .header_row .img-responsive {
    height: 65px;
    width: auto;
}

.content_top_home .inner-info .info_main h3 {
    font-weight: 600;
    color: var(--txt-white);
}

.content_top_home .inner-info .info_main p {
    font-size: 12px;
    font-weight: 300;
    color: var(--txt-white);
}

.content_top_home .inner-info .info_main .card {
    background: transparent;
    border: none;
    border-right: 1px solid var(--primary-color);
    border-radius: 0 !important;
    padding: 10px;
}

.content_top_home .inner-info .info_main .card ul {
    padding-left: 15px;
    margin: 0;
}

.content_top_home .inner-info .info_main .card ul li {
    list-style-type: disclosure-closed;
    font-size: 20px;
    font-weight: 500;
    text-transform: capitalize;
    color: var(--txt-white);


}

.content_top_home .inner-info .info_main .card ul li::marker {
    color: var(--primary-color);
    font-size: 20px;
    font-weight: 500;
    text-transform: capitalize;
}

.content_top_home .inner-info .info_main input {
    background-color: var(--light_primary-color);
    border: 1px solid #767267;
    border-radius: 10px;
    font-size: 14px;
    padding: 6px 15px;
    width: 100%;
    color: var(--txt-white);
}

.content_top_home .inner-info .info_main i {
    background-color: var(--primary-color);
    font-size: 17px;
    padding: 9px 20px;
    border-radius: 10px;
    margin-left: 15px;
    cursor: pointer;
    color: var(--txt-white);
    border: 1px solid var(--primary-color);
    transition: all 0.3s linear;
}

.content_top_home .inner-info .info_main i:hover {
    background: none;
    color: var(--primary-color);

}

.content_top_home .card_img {
    background: var(--light-black);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    position: relative;
    /* border: 1px solid var(--lig/); */

}

.corner_cards1 {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}

.corner_cards2 {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: rotate(180deg);
    z-index: -1;
}

.corner_cards3 {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotateY(180deg);
    z-index: -1;
}

.corner_cards4 {
    position: absolute;
    bottom: 0;
    right: 0;
    top: 0;
    right: 0;
    transform: rotateX(180deg);
    z-index: -1;
}

.corner_cards img {
    height: 76px;
    width: auto;
}

.content_top_home .card_img .foranimation {
    height: 126px;
    width: auto;
    animation: scale-in-center 3s linear infinite alternate-reverse both;
}

@keyframes scale-in-center {
    0% {
        transform: scale(.9);
    }

    100% {
        transform: scale(1.1);
    }
}

.content_top_home .card_img {
    position: relative;
    z-index: 1;
    overflow: hidden;
    box-shadow: 0px 0px 6px #4f4f4f;
}

.content_top_home .card_img::after {
    content: "";
    position: absolute;
    top: -90px;
    left: -80px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: var(--imge___before);
    z-index: -1;
}

.content_top_home .card_img::before {
    content: "";
    position: absolute;
    bottom: -90px;
    right: -80px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: var(--imge___before);
    z-index: -1;
}

.content_top_home .bottom-sec {
    padding: 40px 0;
    /* border-top: 1px solid var(--border_new_primary); */
}

.content_top_home .bottom-sec .card {
    padding: 32px 18px;
    border: none;
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
    background: var(--light-black);
    /* border: 1px solid var(--border_new_primary); */
    /* box-shadow: 5px 5px 15px #d1d9e6, -5px -5px 15px #fff; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    flex-direction: row;
    color: var(--txt-black);
    transition: all .3s linear;
    box-shadow: 0px 0px 6px #4f4f4f;
}

.content_top_home .bottom-sec .card:hover .for_line {
    width: 5px;
    opacity: 1;
    transform: translate(-102px, -60px) skew(345deg, 354deg);
}

.content_top_home .bottom-sec .card:hover .for_line::after {
    transform: translate(8px, 0px);
}

.content_top_home .bottom-sec .card:hover .for_line::before {
    transform: translate(15px, 0px);
}

.content_top_home .bottom-sec .card i {
    font-size: 18px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--dark_primary-color);
    border-radius: 50%;
    color: var(--primary-color);
    margin-left: 14px;
}

.content_top_home .bottom-sec .card .for_line {
    position: absolute;
    z-index: -1;
    width: 6px;
    height: 100%;
    background-color: var(--border_new_primary);
    top: 50%;
    left: 50%;
    transition: all .2s linear;
    opacity: 0;
    /* border: none;
    border-right: 1px dashed transparent !important;
    outline: 1px solid var(--border_new_primary); */
    transform: translate(-172px, -60px) skew(345deg, 354deg);
}

.content_top_home .bottom-sec .card .for_line::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 101%;
    background-color: var(--border_new_primary);
    top: 1px;
    left: 0;
    transition: all .4s linear;
}

.profile-icon:hover {
    color: white !important;
}

.myaccountbtn:hover {
    color: #000 !important;

}

.content_top_home .bottom-sec .card .for_line::before {
    content: "";
    position: absolute;
    width: 2px;
    height: 101%;
    background-color: var(--border_new_primary);
    top: 1px;
    left: 0;
    transition: all .5s linear;

}

.content_top_home .bottom-sec .card .inner_info h5 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
    color: black;
    white-space: nowrap;

}

.content_top_home .bottom-sec .card .inner_info h2 {
    font-size: 16px;
    font-weight: 500;
    color: var(--txt-black);
    margin: 0;
}

.for_card_data {
    background: var(--primary-color) !important;
    padding: 8px 29px !important;
    border-radius: 40px 0px 0px 40px !important;
    position: relative !important;
    width: 200px;
    right: 0 !important;

}

.rechrge-page {
    position: relative;
    z-index: 1;
}

.rechrge-page::after {
    position: absolute;
    content: "";
    background-image: url("../img/background.jpeg");
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    /* background-repeat: no-repeat; */
    background-size: cover;
    filter: brightness(0.5);
}

@media (max-width:992px) {
    .for_card_data {
        width: 167px;
        padding: 8px 14px !important;
    }
}

/* new dc--- */



/*Recharge Page Start*/

.recharge-top {
    display: flex;
    align-items: center;
    /* height: 70px !important; */
    width: 100% !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    background: #585858 !important;
    box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%),
        0 1px 10px 0 rgb(0 0 0 / 12%) !important;
    transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    justify-content: space-between !important;
    color: #fff !important;
    padding: 20px 0px !important;
}

.recharge-top .dropdown_btns {
    margin-left: 20px;
}

.recharge-top .TOP_LINK__SD {
    padding: 10px 10px;
    font-size: 14px;
}


.bbm__card_inner .permotion_card {
    background-color: #2d2922 !important;
    border: 1px solid var(--border_new_primary);
    border-radius: 10px;
    color: #fff;
}

.bbm__card_inner {
    background: var(--light-black);
    border-radius: 10px;
    /* height: 100%; */
    width: 100%;
    position: relative;
    border: none !important;
    color: var(--txt-white);
    margin-bottom: 40px;
    box-shadow: 0px 0px 6px #4f4f4f;
    ;
}

.top_copy_bar {
    position: relative;
}

.top_copy_bar i {
    position: absolute;
    right: 0;

}

.top_copy_bar i:hover {
    background: none;

}

.bbm__card_inner .list-group .list-group-item {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--border_new_primary);
    font-size: 14px;
}

.bbm__card_inner .list-group .list-group-item:last-child {
    border-bottom: 0 !important;
}

.top_sec {
    padding: 0px 0px 10px 0px;
    border-bottom: 1px solid #d9a927;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top_sec p {
    margin-bottom: 0;
}



.bbm__card_inner .permotion_card .form-control {
    background-color: transparent !important;
}


.pagination {
    justify-content: center;
    margin: 20px 0;
    display: -webkit-box;
}

.pagination a {
    color: #fff;
    background-color: #2d2922;
    padding: 8px 10px;
    font-size: 15px;
    /* padding: 10px 15px; */
    border: 1px solid var(--primary-color);
}

.pagination .active a {
    background-color: var(--primary-color) !important;
    color: #000 !important;
    border-color: transparent !important;
}

.bbm__card_inner .card-body .form-control {
    padding: 10px 20px;
    background-color: transparent;
    color: var(--txt-white);
    font-size: 15px;
    border: 1px solid #05d737;
}

.bbm__card_inner .card-body .form-control .otp {
    padding-right: 100px;
}

.bbm__card_inner .card-body .form-control::placeholder {
    color: var(--txt-white) !important;
}

.form-control::placeholder {
    color: var(--txt-white) !important;

}


.bbm__card_inner table td a {
    color: #000;
    background-color: var(--primary-color);
    padding: 5px 15px;
    border-radius: 7px;
}


.div#qrcode img {
    height: 200px;
}


.danger_alert {
    margin-top: 20px;
}

.danger_alert p {
    color: #fff;
}


.add__bank_card .mt__title {
    margin-top: 20px;
    margin-bottom: 20px;
}


.add__bank_card {
    max-width: 600px;
    width: 100%;
    margin: 50px auto 0;
    box-shadow: unset;
    border: 1px solid #dddddd52;
}



.add__bank_card .tab-btn {
    width: 100%;
    display: block;
    background-color: var(--primary-color);
    padding: 10px 0;
    text-align: center;
    color: var(--txt-black);
    border: 1px solid var(--primary-color);
    border-radius: 7px;
    outline: unset !important;
    box-shadow: unset !important;
    cursor: pointer;
}


.add__bank_card label {
    font-size: 14px;
    margin-bottom: 5px;
    color: #777575;
    text-transform: capitalize;
}

.add__bank_card .form-control {
    padding: 10px 10px;
}

.add__bank_card .bank-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.add__bank_card .bank-btn .btn {
    background-color: var(--primary-color);
    padding: 10px 30px;
    border: 1px solid transparent;
    color: var(--txt-black);
    transition: all 0.4s linear;
    text-transform: capitalize;
        font-family: var(--tg-heading-font-family);
}


.add__bank_card .bank-btn .btn:hover{
    background-color: transparent;
    color: var(--primary-color);
    border-color: currentColor;
}

.form___payment{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.form___payment .form-check{
    width: 100%;
    padding-left: 0;
}


.form___payment label{
    cursor: pointer;
    width: 100%;
    padding: 6px 20px 6px 30px;
    border: 1px solid grey;
    background: #585858;
    border-radius: 10px;
    overflow: hidden;


}

.form___payment .form-check__upi{
    margin-left: 30px;
}























/* //breakpoints */

@media(max-width: 1200px) {
    .coustom_container {
        padding: 0 70px;
    }
}

@media(max-width: 992px) {
    .coustom_container {
        padding: 0 30px;
    }

    .privacy_container {
        padding: 0px 100px;
    }

    .content_top_home .bottom-sec .card i {
        padding: 10px 15px !important;
        width: 35px;
        height: 35px;
        font-size: 14px;
        margin-left: 7px;
    }
}

@media(max-width: 768px) {

    .content_top_home .bottom-sec .card i {
        margin-left: 16px;
    }

    .home_slider {
        height: 300px;
    }

    .coustom_container {
        padding: 0 18px;
    }

    .table-responsive {
        border: none !important;
    }

    .privacy_container {
        padding: 0px 0px;
    }

    .text_align {
        text-align: left;
        margin-top: 10px;
    }

    .card .card-body {
        padding: 15px;
    }

    .privacy_policy h1 {
        font-size: 20px;
    }

    .add__bank_card {
        border-color: transparent !important;
    }
}

@media(max-width: 576px) {
    .swiper-button-prev {
        font-size: 14px;
    }

    .home_slider {
        height: 200px;
    }

    .for_card_data {
        width: 200px;
    }

    .content_top_home .bottom-sec .card i {
        margin-left: 40px;
        width: 56px;
        height: 56px;
        font-size: 18px;
    }

    .coustom_container {
        padding: 0 15px;
    }

    .slider_bg .inner_text h1 {
        font-size: 40px;
        line-height: 45px;
    }

    .button_new {
        padding: 10px 13px;
    }

    .red_button {
        padding: 8px 15px;
    }

    .purple_button {
        padding: 8px 15px;
    }

    .green_button {
        padding: 8px 15px;
    }


    .bg_color_sec {
        padding: 0px;
    }

    .icon_accordion {
        font-size: 15px;
    }

    .img_bg_accordion {
        padding: 5px 5px;
        width: 38px;
        height: 38px;
    }

    .img_bg {
        padding: 8px 9px;
    }

    .img_bg i {
        font-size: 15px;
    }

    .user_logo {
        height: 60px !important;
    }

    .user_data .user_data_title {
        font-size: 15px;
    }

    .user_data span {
        font-size: 14px;
    }

    .user_title {
        font-size: 15px;
    }

    .right_sec span {
        font-size: 14px;
    }

    .privacy_policy p {
        font-size: 14px;
    }

    .privacy_policy h1 {
        font-size: 18px;
    }

    .promotion-code h6 {
        font-size: 15px;
    }

    .permotion_card h5 {
        font-size: 15px;
    }

    .permotion_card p {
        font-size: 15px;
    }

    .permotion_card {
        margin-top: 10px;
    }

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

    .for_display .new_div {
        width: 100% !important;
    }

    .for_shadow {
        width: 100% !important;
    }

    .text_align {
        text-align: end;
    }

    .footer_nav .nav-item i {
        font-size: 18px;
    }

    .new_card_flex {
        display: block;
    }

    .v-card__actions {
        margin-top: 15px;
    }

    .tab_style {
        font-size: 16px;
    }

    .for_set_modal {
        width: 370px !important;
    }

    .qr {
        display: flex;
        justify-content: center;
    }

    .qr img {
        width: 50%;
    }



    .promotion-code {
        margin-top: 10px;
    }

    .top_sec {
        margin-bottom: 20px;
    }

    .header_btns {
        display: block;
    }

    .dropdown_btns {
        margin-top: 15px;
    }
}

@media(max-width: 480px) {
    .image-right img {
        width: 100%;
    }


    .privacy_policy h1 {
        font-size: 16px;
    }

    .btn_width {
        width: 100% !important;
    }

    .alert_box {
        margin-bottom: 20px;
    }

    .flex_topheader {
        display: block;
    }

    .mobile_margin {
        margin-top: 10px;
    }

    .button_color {
        font-size: 12px;
        padding: 5px 8px;
    }

    .secondary_btn {
        font-size: 12px;
        padding: 11px 8px;
    }

    .form-control {
        padding: 5px 8px;
        font-size: 13px;
    }

    .top_sec {
        display: block;
    }

    button.otp-btn {
        padding: 7px 10px;
        font-size: 12px;
    }
}

@media(max-width: 385px) {
    .for_set_modal {
        width: 320px !important;
    }

    .content_top_home .bottom-sec .card i {
        margin-left: 14px;
        width: 40px;
        height: 40px;
        font-size: 15px;
    }

    .for_card_data {
        width: 180px;
    }
}



.custom_container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0 100px;

}

@media(max-width: 1200px) {
    .custom_container {
        padding: 0 50px;
    }

    #logo {
        text-align: start;
    }
}

@media(max-width: 992px) {
    .custom_container {
        padding: 0 30px;
    }
}

@media(max-width: 768px) {
    .content_top_home .inner-info {
        margin-top: 20px;
        padding: 15px 20px;
    }

    .second-container {
        width: initial !important;
        margin: 0px 10px !important;
    }

    .content_top_home .inner-info .info_main .card {
        margin-bottom: 15px;
        border-right: 0;
    }

    .content_top_home .for-driction {
        flex-direction: column-reverse;
    }

    .content_top_home .card_bbn_img {
        display: none !important;
    }

    .custom_container {
        padding: 0 18px;
    }
}

.arrow_icon {
    position: absolute;
    top: 16px;
}

@media(max-width: 576px) {
    .custom_container {
        padding: 0 15px;
    }

    .content_top_home .inner-info .info_main input {
        padding-right: 55px;
    }

    .content_top_home .inner-info .info_main i {
        padding: 9px 12px;
    }
}

.recharge-main {
    position: relative;
    z-index: 1;
}

.recharge-main::after {
    position: absolute;
    content: "";
    background-image: url("../img/background.jpeg");
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    /* background-repeat: no-repeat; */
    background-size: cover;
    filter: brightness(0.5);
}

@media (max-width:576px) {
    .main_f {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}
.modal_xvalue {
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: right;
    margin-top: 10px;
    flex-wrap: wrap;
}
}

/* Default Buttons */
.trx .v-btn {
    /* background: #101c2b;
    border: 1px solid rgba(212, 175, 55, 0.25); */
    color: #d4af37;
    transition: all 0.25s ease;
    
}

/* ACTIVE BUTTON */
/* .v-btn--active,
.v-btn.active_color {
    background: linear-gradient(
        145deg,
        #ffe477,
        #d4af37 55%,
        #9a7015
    );

    border-color: #ffe477;
    color: #071019;

    box-shadow:
        0 5px 0 #73510b,
        0 0 18px rgba(212,175,55,.35),
        inset 0 2px 0 rgba(255,255,255,.65);

    transform: translateY(-2px);
} */

/* HOVER BUTTON */
.trx .v-btn:hover {
    transform: translateY(-2px);

    color: #fff !important;

    border-color: #d4af37;

    /* box-shadow:
        0 6px 0 #070b10,
        0 0 12px rgba(212,175,55,.18);
         background: linear-gradient(
        145deg,
        #ffe477,
        #d4af37 55%,
        #9a7015
    ) !important; */
    opacity: 1;
}

/* Active button hover - active color hi rahe */
.trx .v-btn.v-btn--active:hover,
.trx .v-btn.active_color:hover {
    background: linear-gradient(
        145deg,
        #ffe477,
        #d4af37 55%,
        #9a7015
    );

    color: #071019;

    border-color: #ffe477;

    box-shadow:
        0 5px 0 #73510b,
        0 0 18px rgba(212,175,55,.35),
        inset 0 2px 0 rgba(255,255,255,.65);
}

.add_no{
    width:50% !important;
}
.no_h{
    width:50% !important;
}