/***********************************************
## CoinReward @2023
## Developed by- Rayhan Molla
***********************************************/
/***********************************************
## import google fonts
***********************************************/
@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400;500;600;700;800&display=swap');
/***********************************************
## import bootstrap icon
***********************************************/
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");


.wow {
animation-duration: 1.8s !important;
}



/***********************************************
## Preloader##
***********************************************/
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999999;
background: #202948;
}
.spinner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
.bounce {
display: flex;
justify-content: center;
align-items: flex-end;
margin-top: 20px;
}

.bounce1, .bounce2, .bounce3 {
width: 18px;
height: 18px;
background-color: var(--green-dark);
border-radius: 50%;
margin: 0 5px;
animation: bounce 0.6s infinite alternate;

}
#countdown {
            font-size: 24px;
            font-weight: bold;
            color: #FF5733; /* Change this to your preferred color */
        }
.bounce1 {
animation-delay: 0s;
}

.bounce2 {
animation-delay: 0.2s;
}

.bounce3 {
animation-delay: 0.4s;
}

@keyframes bounce {
from {
transform: translateY(0);
}
to {
transform: translateY(-20px);
}
}

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/***********************************************
## Body Start##
***********************************************/
body {
font-family: 'Baloo Bhai 2', sans-serif;
font-size: 16px;
font-weight: normal;
color: #a9a9ca;
position: relative;
background: #141524;
box-shadow: 1px 1px 1px #000;
}
body::after {
content: "";
width: 100%;
min-height: 100vh;
height: 100%;
background-size: cover;
background-attachment: fixed;
position: fixed;
top: 0;
left: 0;
z-index: -1;

}
body::-webkit-scrollbar, .chat-messages::-webkit-scrollbar {
width: 0em;
}

body::-moz-scrollbar, .chat-messages::-moz-scrollbar {
width: 0.5em;
}

body::-o-scrollbar, .chat-messages::-o-scrollbar {
width: 0.5em;
}

body::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px var(--black);
}

body::-webkit-scrollbar-thumb {
background-color: var(--green);
outline: 1px solid var(--black);
}
/***********************************************
## Global Css##
***********************************************/

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

@media(max-width: 568px){
.main-header-container img{
width: 150px
}

}
@media(max-width: 420px){
.main-header-container img{
width: 120px
}
}
@media(max-width: 350px){
.main-header-container img{
width: 100px
}
}



@-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}

@-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}

@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

.sidebar-menu .submenu li a,
.sidebar-menu .dropdown-toggle {
padding: 10px 15px 10px 67px;
}
/***********************************************
## Table Style##
***********************************************/
.log_table {
overflow-x: scroll;
scrollbar-width: none;
}
table {
border-collapse: separate;
}
tbody, td, tfoot, th, thead, tr {
border-color: inherit;
border-style: none;
display: flex;
justify-content: center;
align-items: center;
border-radius: 15px;
width: 100%;
}
th, td {
min-width: 180px;
}
table th {
color: var(--green);
padding: 10px 0;
}
table td {
color: var(--white);
border: none;
}
tbody {
flex-direction: column;
}
tbody tr {
    border-bottom: 1px solid var(--border-color);
    padding: 5px 0;
}


/***********************************************
## Pai Na Start##
***********************************************/


.form-control:disabled,
.form-control[readonly] {
background-color: var(--blue);
opacity: 1;
}
.form-label, label {
padding: 5px 0 5px 6px;
font-weight: 600;
color: #fff;
}

.navbar-nav .total-balance {
color: var(--green) !important;
font-weight: 500 !important;
}
.navbar-nav a.nav-link.middle_navbar-link {
border: none;
color: #d1d1d1;
font-weight: 400;
font-size: 16px;
/*gap: 4px;*/
}
/*body .navbar-nav>li.nav-item.active-nav-link,*/
/*body .navbar-nav>li.nav-item:hover {*/

/* border-radius: 4px !important;*/
/*}*/



/*body .navbar-nav>li.nav-item:hover a {*/
/* color: #fff !important;*/
/*}*/




/*body .desktop-links li.nav-item:hover,*/
/*body .desktop-links li.nav-item.active-nav-link {*/
/* background: var(--green) !important;*/
/*}*/

/*body .desktop-links li.nav-item:hover a,*/
/*body .desktop-links li.nav-item.active-nav-link a {*/
/* color: #000 !important;*/
/*}*/
/* New Code Add */
/*#navbarNav ul a.nav-link.middle_navbar-link .head-icon {*/
/* font-size: 16px;*/
/* position: relative;*/
/* top: 15px; */
/*}*/
/*#navbarNav ul a.nav-link.middle_navbar-link:hover .head-icon,*/
/*#navbarNav ul .nav-item:hover .head-icon,*/
/*#navbarNav ul .nav-item:hover .head-icon,*/
/*#navbarNav ul a.nav-link.middle_navbar-link:hover .head-icon {*/
/* top: 0 */
/*}*/

/*#navbarNav .nav-item.active-nav-link .head-icon{*/
/* top: 0 !important */
/*}*/

/*body .desktop-links li.nav-item:hover .head-icon{*/
/* top: 0 !important */
/*}*/


.navbar-toggler:focus {
background: transparent;
box-shadow: none;
}

span.navbar-toggler-icon.fas {
color: var(--white);
background: var(--green-dark);
border-radius: 14px;
padding-top: 15px;
width: 3.5em;
height: 2.5em;
}
/* start header */
header.header {
display: flex;
justify-content: start;
align-items: flex-start;
margin-top: 140px

}

.header.header h4 {
font-size: 2.5rem;
color: #fff;
font-weight: 400;
font-family: 'Suez One', serif;
text-align: center;
margin-bottom: 2.5rem;
}

header.header .coins {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
flex-wrap: wrap;
height: 100%;
}

header.header .coins .coin {
border-radius: 10px;
font-weight: 600;
min-width: 139px;
background: #20243b;
margin-bottom: 7px;
display: flex;
justify-content: space-around;
align-items: center;
padding: 8px 17px;
color: var(--green);
font-size: 1.2rem;
}

header.header .coins .coin img {
height: 30px;
width: 30px;
}


.bg-images {
height: 260px;
}


/***********************************************
## Pai Na End##
***********************************************/

/***********************************************
## main content styles
***********************************************/
.coinreward {
position: relative;
}
.main_content {
--webkit-backdrop-filter: var(--webkit-backdrop-filter);
backdrop-filter: var(--blur-filter);
margin-left: 12rem;
margin-right: 18.5rem;
height: 100%;
}
.chat_close .main_content {
margin-right: 0 !important;
}
.crown_icon i {
    display: inline-block;
    background-color: var(--green);
    padding: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    }
/***********************************************
## NavBar##
***********************************************/

#desktop-nav {
z-index: 99999;
}
.navbar-expand-lg {
-webkit-backdrop-filter: var(--blur-filter);
backdrop-filter: var(--blur-filter);
background-color: var(--header-bg);
border-bottom: 1px solid rgb(47, 48, 67);
padding: 8px 0px;
flex-wrap: nowrap;
justify-content: flex-start;
position: sticky;
top: 0px;
left: 0px;
width: 100%;
min-height: 70px;
}
#navbarNav li.support a.icon,
#navbarNav li.chat .icon {
border: 1px #ffffff;
background-color: #4E5369;
display: flex;
justify-content: center;
align-items: center;
width: 45px;
height: 45px;
padding: 10px;
-webkit-border-radius: 3rem;
-moz-border-radius: 3rem;
-ms-border-radius: 3rem;
-o-border-radius: 3rem;
border-radius: 3rem;
}
#navbarNav div.support a i,
#navbarNav li.chat a i {
font-size: 23px;
color: #FFF;
}

#navbarNav .chat_message .message {
font-size: 15px;
padding: 15px;
}
#navbarNav .chat_message .message i {
color: var(--green);
font-size: 10px;
}
/* navbar brand */
.brand_content {
display: flex;
line-height: 0;
}

.brand_content svg {
height: 34px;
width: 35px;
align-self: center;
margin-right: 8px;
}

.brand_content svg path {
fill: var(--green-dark, #ffff);
}


.brand_content-text h3 {
color: #ddd;
font-size: 1.5rem;
font-weight: 900;
}

.brand_content-text p {
font-size: 0.8rem;
color: #fff;app
}
.button{
width: 200px;

}

.widget-wrapper {
border: 1px solid var(--border-color);
background-color:var(--theme-bg);
padding: 5px 25px;
margin: 0 10px;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
}

.widget-wrapper .icon {
font-size: 22px;
color: var(--green);
}
.widget-wrapper .head {
font-size: 14px;
font-weight: 700;
color: #fff;
}
.widget-wrapper .title {
font-size: 10px;
font-weight: 600;
}

/*.main-nav-link{*/
/* margin-left:10px ;*/

/*}*/
@media screen and (max-width:551px) {
.navbar-expand-lg {
flex-wrap: wrap;
padding: 0px;
}

.bg-images {
height: 25px;
}

.push-order {
order: 1 !important;
}
}
@media screen and (max-width:771px) {

div#navbarNav {
padding: 1px;
margin: 0;
border-radius: 2px;
}


}
/* navbar profile info */
@media screen and (min-width: 412px) {
.balance a span {
background-color: #141523;
padding: 10px;
}
}


@media screen and (max-width: 413px) {
.balance a span {
background-color: var(--theme-bg);
padding: 8px;
}
}


.balance a span:first-child {
margin-right: 1.5px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.balance:hover span i {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-ms-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
.balance a span:last-child {
color: #fff;
font-weight: 700;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
/* header profile info */
#navbarNav .user_profile a:after {
display: none !important;
}
#navbarNav .user_profile .user_data {
background-color: var(--theme-bg);
border-radius: 3rem;
-webkit-border-radius: 3rem;
-moz-border-radius: 3rem;
-ms-border-radius: 3rem;
-o-border-radius: 3rem;
height: 45px;
}
#navbarNav .user_data .info {
padding: 0 0 0 15px;
}
#navbarNav .user_data .info .username {
font-size: 18px;
}
/* navbar dropdown profile info*/
#navbarNav .profile_info {
border: 1px solid var(--border-color);
background: var(--webkit-dropdown-bg);
background: var(--dropdown-bg);
background-color: rgb(30, 30, 48);
padding: 10px;
left: -82px;
top: 72px;
min-width: 300px;
z-index: 999;
}
#navbarNav .profile_info .profile_avatar {
background: var(--theme-bg);
padding: 7px;
margin-bottom: 18px;
}
#navbarNav .profile_info li a {
color: #fff;
padding: 3px 0 5px 3px;
}
#navbarNav .profile_info li a:hover {
background: transparent;
color: var(--green) !important;
}
#navbarNav .profile_info li:hover a i {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: 1s ease;
-moz-transition: 1s ease;
-ms-transition: 1s ease;
-o-transition: 1s ease;
transition: 1s ease;
}
#navbarNav ul li a .user-image img,
#navbarNav .profile_avatar img {
max-width: 50px;
width: 50px;
height: 50px;
max-height: 50px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
overflow: hidden;
}
#navbarNav .user_profile .user_data img
#navbarNav .profile_avatar img {
width: 58px;
height: 58px;
}
#navbarNav .profile_info .username,
#navbarNav .profile_info .total-balance {
white-space: nowrap;
width: 188px;
overflow: hidden;
text-overflow: ellipsis;
}
#navbarNav li.support a.icon,
#navbarNav li.chat .icon {
border: 1px solid var(--border-color);
background-color: var(--theme-bg);
display: flex;
justify-content: center;
align-items: center;
width: 45px;
height: 45px;
padding: 10px;
-webkit-border-radius: 3rem;
-moz-border-radius: 3rem;
-ms-border-radius: 3rem;
-o-border-radius: 3rem;
border-radius: 3rem;
}

#navbarNav .chat_message {
background-color: var(--theme-bg);
-webkit-border-radius: 3rem;
-moz-border-radius: 3rem;
-ms-border-radius: 3rem;
-o-border-radius: 3rem;
border-radius: 3rem;
height: 45px;
display: flex;
align-items: center;
}
#navbarNav .chat_message .message {
font-size: 15px;
padding: 15px;
}
#navbarNav .chat_message .message i {
color: var(--green);
font-size: 10px;
}
#navbarNav .chat_message.close_chat {
display: none;
}
/* mobile nav styles */
#mobile-nav li.nav-item {
padding: 10px 10px 5px 10px;
min-width: 70px;
width: 100%;
}
#mobile-nav .nav-item .head-icon i {
font-size: 19px;
}
#mobile-nav .nav-item.active-nav-link .head-icon svg,
#mobile-nav .nav-item:hover .head-icon svg {
color: var(--green-dark);
}
#mobile-nav .nav-item.active-nav-link .head-icon i,
#mobile-nav .nav-item:hover .head-icon i {
color: var(--green-dark);
}
#mobile-nav .nav-item.active-nav-link .head-title,
#mobile-nav .nav-item:hover .head-title {
color: var(--green-dark);
}
#mobile-nav .nav-item .head-title {
font-size: 12px;
}

#mobile-nav li.nav-item.earn {
position: relative;
width: 70px;
margin: 0 7px;
/*background: var(--black);*/
}
#mobile-nav li.nav-item.earn .nav-link {
width: 70px;
height: 70px;
position: absolute;
right: 0;
left: 0;
bottom: 5px;
/*background: -webkit-linear-gradient(180deg,#01d676 0,#3b807b 100%);*/
background: linear-gradient(180deg, #01d676 0, #007e45 100%);
color: #fff;
box-shadow: 0 1px 14px rgba(1,214,118,0.29);
}
a.nav-link.middle_navbar-link:hover:not([role="tab"]),
#mobile-nav li.nav-item.earn .nav-link:hover {
background: -webkit-linear-gradient(180deg,#01d676 0,#3b807b 100%) !important;
background: linear-gradient(180deg,#01d676 0,#3b807b 100%) !important;
color: #fff !important;
}
a.nav-link.middle_navbar-link:hover:not([role="tab"]) .head-icon i,
#mobile-nav li.nav-item.earn .nav-link .head-icon i {
color: #fff;
}






/* End Navbar */

/***********************************************
## user profile image styles
***********************************************/
.user-images .user-image {
    height: 0px;
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
    margin: 5px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    overflow: hidden;
}

.col-3.user-image input {
    display: none;
}
.col-3.user-image label {
    width: 100%;
    height: 100%;
    padding: 0;
}
.default_img.img-fluid {
    width: 55px;
    height: 55px;
    margin: 0 auto;
    cursor: pointer;
}

.col-3.user-image input:checked + img {
    transform: scale(1);
    border: 4px solid #fff;
    width: 60px;
    height: 60px;
    background: #fff;
    padding: 0;
    border-radius: 50%;
    margin: 0;
}

.profile-avater .user-images .user-image button {
outline: none;
border: none;
}
.profile-avater .user-images .user-image button img {
width: 60px;
height: 60px;
object-fit: contain;
}
/***********************************************
## User dashboard styles
***********************************************/
.app_content {
width: 100%;
}
/***********************************************
## SideBar##
***********************************************/
.sidebar_nav {
    border: 1px solid var(--border-color);
    padding-top: 50px;
    width: 12rem;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
}

/*.sidebar_nav.opened {*/
/*    display: block;*/
/*    -webkit-backdrop-filter: blur(10px);*/
/*    backdrop-filter: blur(10px);*/
/*    visibility: visible;*/
/*    z-index: 99;*/
/*}*/

.left_sidebar {
width: 100%;
}
.left_sidebar .inner_sidebar {
    width: 100%; 
    height: 100vh; 
    padding: 10px;
    
}
.left_sidebar .inner_sidebar li:hover i {
color: var(--green) !important;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: transform 1s ease;
-moz-transition: transform 1s ease;
-ms-transition: transform 1s ease;
-o-transition: transform 1s ease;
transition: transform 1s ease;
}

.left_sidebar .inner_sidebar li:hover a {
color: var(--green) !important;;
}

.left_sidebar .inner_sidebar ul li a {
display: block;
padding: 8px;
color: #fff;
font-weight: 600;
text-decoration: none;
}

.left_sidebar .inner_sidebar ul li a span {
display: inline-block;
margin-left: 2px;
display: inline-block;
margin-left: 14px;
font-size: 16px;
}

.left_sidebar .inner_sidebar ul {
list-style: none;
padding: 44px 0;
width: 100%;
}
.left_sidebar .inner_sidebar ul li {
margin-bottom: 15px;
}
.left_sidebar .inner_sidebar ul li.active {
background: -webkit-linear-gradient(261deg,rgba(1, 214, 118, 0.045) 0,rgba(1, 214, 118, 0.325) 100%);
background: linear-gradient(261deg,rgba(1, 214, 118, 0.045) 0,rgba(1, 214, 118, 0.325) 100%);
border-radius: 8px;
}
.left_sidebar .inner_sidebar ul li.active a, .left_sidebar .inner_sidebar ul li.active i {
    color: var(--green) !important;
}


/******************************************************
## live last offer styles
******************************************************/
.content_header {
position: sticky;
top: 77px;
min-height: 70px;
z-index: 9999;
}
#last_offers {

overflow: auto hidden;
scrollbar-width: none;

}
#last_offers>div>div {
display: flex;
justify-content: flex-start;
align-items: flex-start;
/*padding: 6px 4px;*/
}
.offer-wrapper {
display: flex;
justify-content: space-around;
align-items: center;
flex-flow: row;
margin-right: 10px;
min-height: 50px;
min-width: 200px;
/*background: -webkit-linear-gradient(138.39deg,hsla(0,0%,100%,.2) -7.57%,hsla(0,0%,100%,0) 107.25%);*/
/*background: linear-gradient(138.39deg,hsla(0,0%,100%,.2) -7.57%,hsla(0,0%,100%,0) 107.25%);*/
background:#222339;
border: 1px solid var(--border-color);
padding: 6px;
border-radius: 15px;
}
.offer-wrapper div {
display: flex;
flex-flow: column;
justify-content: center;
}
.offer_stat-footer {
margin: 0 13px 0 10px;
}
.offer_stat-footer {
font-size: 14px;
}
.offer_stat-footer h6 {
white-space: nowrap;
width: 80px;
overflow: hidden;
text-overflow: ellipsis;
}
.offer_stat-footer p {
margin: 0;
font-size: 11px;
white-space: nowrap;
width: 70px;
overflow: hidden;
text-overflow: ellipsis;
}
.offer_stat-header img {
height: 40px;
width: 40px;
border-radius: 50%;
}
div#last_offers .offer-amount {
width: min-content;
background: #21e41526;
color: var(--green);
font-size: 13px;
font-weight: 500;
padding: 10px;
border-radius: 15px;
}
div#last_offers .offer-amount p{
color: var(--green-dark) !important;
}
#last_offers .top-offer-wrapper .offer-wrapper-inner span.title {
color: #fff !important;
font-size: 12px !important
}
#last_offers .top-offer-wrapper .offer-wrapper-inner span.value {
color: var(--green) !important;
font-size: 12px !important;
font-weight: 500;
}
#last_offers .top-offer-wrapper:hover>.offer-wrapper-inner {
display: block !important;
border-radius: 15px
}
.top-offer-wrapper {
position: relative;
-webkit-backdrop-filter: var(--blur-filter);
backdrop-filter: var(--blur-filter);
background-color: var(--header-bg);
}
.top-offer-wrapper .offer-wrapper-inner {
position: absolute !important;
margin: 0 !important;
top: 29px !important;
left: 50px !important;
right: 0 !important;
width: 100% !important;
height: 55px;
display: none;
justify-content: center;
padding: 4px 10px;
z-index: 9999999999 !important;
background: #0b0a16 !important;
}
#last_offers .top-offer-wrapper .offer-wrapper-inner span.title {
color: #fff !important;
font-size: 12px !important
}
#last_offers .top-offer-wrapper .offer-wrapper-inner span.value {
color: var(--green) !important;
font-size: 12px !important;
font-weight: 500;
}
#last_offers .top-offer-wrapper:hover>.offer-wrapper-inner {
display: block !important;
border-radius: 15px
}
/******************************************************
## Mobile Nav Item##
******************************************************/
a.nav-link.main-nav-link{
display:flex;
justify-content: center;
flex-direction: column;
}
a.nav-link.middle_navbar-link:hover:not([role="tab"]) {
/*color: #bb8900 !important;*/
background: transparent !important;
}
@media(max-width:460px) {
a.nav-link.main-nav-link {
padding: 1px 5px !important;
}
}
a.nav-link {
font-size: 16px;
color: var(--white);
background: transparent;
margin-right: 8px;
border-radius: 10px;

display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
transition: background 0.2s ease-in;
-webkit-transition: background 0.2s ease-in;
-moz-transition: background 0.2s ease-in;
-ms-transition: background 0.2s ease-in;
}

a.nav-link:not([class*="middle_navbar-link"]) {
/*box-shadow: 1px 1px 3px 1px #C7C7C7;*/
/*background: rgb(1, 72, 82);*/

}
a.nav-link.up:not([class*="middle_navbar-link"]) {

background: var(--black);
margin-right:10px;
}
a.nav-link.in:not([class*="middle_navbar-link"]) {
background:#1BC98E;

}

a.nav-link:hover:not([role="tab"]) {
background-color: #2db971;
color: var(--white) !important;
}

a.me-3.nav-link.nav-support {
border: none;
background: transparent;
box-shadow: none;
}
/******************************************************
## welcome page Content Style
******************************************************/
.call-to-action #typer {
font-size: 3.5rem;
font-weight: 700;
color: #fff;
}
.call-to-action a.call-btn {
font-size: 20px;
font-weight: 600;
padding: 10px 45px;
}

.call-to-action a.call-btn:hover {
border: 2px solid var(--green-dark);
color: var(--green-dark);
background: transparent;
}

.call-to-action h4 {
font-size: 3.5rem !important;
color: #fff;
font-weight: 600 !important;
font-family: sans-serif !important;
text-align: center;
margin-bottom: 20px;

}

.call-to-action h4 span {
color: #2EC856
}
.call-to-action.text-center a.btn {
background: transparent;
display: inline-block;
text-align: center;
margin: 15px 0;
font-weight: 600;
padding: 5px 16px;
color: #fff;
border-radius: 6px;
border: 1px solid #fff;
font-size: 1.1rem;
}

#how_to h1 {
color: var(--green) !important;
font-weight: 900;
}

.how-to-box {
position: relative;
background: var(--black);
text-align: center;
font-size: 19px;
min-height: 250px;
font-weight: 400;
margin: 35px 0px;
border-radius: 10px;
border: 10px solid #222339;
box-shadow: 0 -1px 5px 0px var(--black);
transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
}

.how-to-box:hover {
transform: scale(1.04);
-moz-transform: scale(1.04);
-o-transform: scale(1.04);
-webkit-transform: scale(1.04);
}

.how-to-box .content {
box-shadow: 0 -1px 5px 0px var(--green-dark);
border-radius: 11px;
height: auto;
padding: 4px 0px;
min-height: 222px;
}

.how-to-box .content .head {
display: flex;
justify-content: flex-start;
align-items: center;
font-weight: 900;
font-size: 3rem;
padding-left: 15px;
}

.how-to-box h3.text {
color: var(--green) !important;
text-transform: capitalize;
font-weight: 900;
margin-left: 15px;
margin-top: 10px;
}

.how-to-box .content .body .body-box {
display: flex;
justify-content: space-around;
align-items: stretch;
box-shadow: 0 0 4px 2px var(--green);
margin: 15px;
border-radius: 16px;
height: 42px;
}

.how-to-box .content .body .body-box img {
height: 100%;
border-radius: 15px;
margin: 2px 0px;
}

.how-to-box .content .body p:not([class="box-button"]) {
font-size: 1.3rem;
font-weight: 600;
align-self: flex-start;
}

.how-to-box .content .body p.box-button {
box-shadow: 0 0 4px var(--green);
width: auto;
padding: 4px 10px;
height: auto;
align-self: center;
background: var(--black);
border-radius: 23px;
color: var(--green) !important;
font-weight: 600;
margin: 0px 25px;
}

.how-to-box .content .body p.box-button span {
color: var(--white) !important;
}

.how-to-box svg {
height: 108px;
width: 80px;
margin-top: 15px;
margin-bottom: 5px;
}
.col-8 .how-to-box {
min-height: 250px;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
}

.col-8 .how-to-box svg path,
section#parners h3 svg path {
fill: var(--green);
}

/* Content Style Start */
/*Dekte Hobe*/
.row .col-1 {
overflow: hidden;
}

.col-1 .row-img {
height: 100%;
display: flex;
flex-flow: column;
width: 65px;
justify-content: space-around;
align-items: center;
}



/******************************************************
## Home Page Style Content Style
******************************************************/
.popover {
-webkit-backdrop-filter: var(--blur-filter);
backdrop-filter: var(--blur-filter);
background: var(--webkit-dropdown-bg) !important;
background: var(--dropdown-bg) !important;
color: #fff;
border: 1px solid #fff;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
}
.popover-body {
font-size: 14px;
padding: 10px;
color: #fff;
}

.switch {
position: relative;
display: inline-block;
width: 50px;
height: 25px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
-moz-transition: .4s;
-ms-transition: .4s;
-o-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 19px;
width: 19px;
left: 3px;
bottom: 3px;
background-color: white;
-webkit-transition: .4s;
-moz-transition: .4s;
-ms-transition: .4s;
-o-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: var(--green);
}
input:focus + .slider {
box-shadow: 0 0 1px var(--green);
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
-moz-transform: translateX(26px);
-o-transform: translateX(26px);
transform: translateX(26px);
}
.slider.round {
-webkit-border-radius: 34px;
-moz-border-radius: 34px;
-ms-border-radius: 34px;
-o-border-radius: 34px;
border-radius: 34px;
}
.slider.round:before {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
/******************************************************
## Offer Style
******************************************************/
.offer_partner,
.survey_partner,
.video_partner {
min-width: 130px;
max-width: 130px;
/*height: 220px;*/
height: 170px;
margin-right: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
.offer {
position: relative;
display: block;
max-width: 380px;
background-color: var(--theme-bg);
margin-right: 10px;
padding: 10px;
border: 3px solid var(--border-color);
}
.featureds-offer{
position: relative;
display: block;
max-width: 130px;
background-color: var(--theme-bg);
margin-right: 10px;
padding: 10px;
}
.offer.lock {
cursor: pointer;
}
.offer.lock .lock_info {
position: absolute;
top: 7px;
right: 7px;
z-index: 999999;
}
.offer.lock .lock_info button {
width: 25px;
height: 25px;
background: #e75dff;
opacity: 1;
cursor: pointer;
}
.offer.lock .lock_info i {
font-size: 15px;
}
.offer:hover {
border: 2px solid #ff007f;
}
#offer_partners .offer,
#survey_partners .offer,
#video_partners .offer {
max-width: 100%;
width: 100%;
height: 100%;
padding: 0 !important;
background-color: transparent;
}
/*.offer_header {*/
/*position: relative;*/
/*}*/
.offer_partner .offer_header,
.survey_partner .offer_header,
.video_partner .offer_header {
height: 100%;
}
.offer_badge {
position: absolute;
top: 7px;
right: 7px;
}
.badge.new {
background: var(--green);
}
.badge.hot {
background: #fa007d;
}
.badge.offer_bonus {
background: rgba(1,214,118,0.2);
color: #01d676;
}
.offer_partner .offer_image,
.survey_partner .offer_image,
.video_partner .offer_image {
display: flex;
align-items: center;
justify-content: center;
max-height: 40px;
position: absolute;
top: 42%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}

.offer_image img {
width: 100%;
aspect-ratio: 2/2;
object-fit: contain;
box-shadow: 0px 0px 1px white;
}
.offer_banner img{
    width: 100%;
    object-fit: contain;
    box-shadow: 0px 0px 1px white;
}
#offer_partners .offer_image img,
#survey_partners .offer_image img,
#video_partners .offer_image img {
width: 80%;
aspect-ratio: 2/3;
box-shadow: none;
}
/*#offer_partners .offer_image .custom{*/
/* height:40;*/
/* width:30;*/
/*}*/

#offer_partners .offer_footer,
#survey_partners .offer_footer,
#video_partners .offer_footer {
z-index: 99999999;
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.offer .name {
font-size: 14px;
}
.featureds-offer .name{
    font-size: 14px; 
}
.offer_footer .name p {
font-weight: 500;
}
.offer .details,.featureds-offer .details {
font-size: 10px;
}

.offer .name, .offer .details {
white-space: nowrap;
/*width: 105px;*/
overflow: hidden;
text-overflow: ellipsis;
}
.featureds-offer .name, .featureds-offer .details {
    white-space: nowrap;
    /*width: 105px;*/
    overflow: hidden;
    text-overflow: ellipsis;
    }
.currency {
font-size: 12px;
}
.currency span {
font-size: 10px;
}
.offertype.game {
background: linear-gradient(180deg, #01d676 0, #007e45 100%);
font-size: 9px;
font-weight: 500;
}
.offer_footer .ratings i {
/*color: #ffd000;*/
color: #00ff5c;

margin: 2px;
font-size: 12px;
}
.hasRatings .offer_footer .ratings {
display: block;
}
.ratingsHide .offer_footer .ratings {
display: none;
}
.offer .overlay {
opacity: 0;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 999;
text-align: center;
vertical-align: middle;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
-webkit-filter: none !important;
filter: none !important;
}
.offer .overlay i {
background-color: var(--green);
color: #fff;
display: inline-block;
height: 32px;
width: 32px;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.offer.lock .overlay i {
background-color: transparent;
font-size: 30px;
}
.offer .overlay p {
margin-top: 15px;
margin-bottom: 0;
color: #fff;
font-weight: bold;
font-size: 12px;
}
.offer.lock .overlay,
.offer:hover .overlay {
opacity: 1 !important;
}
/*Custom Offer*/
.offer_partner .custom_offer{
display: flex;
align-items: center;
justify-content: center;
max-height: 120px;
position: absolute;
top: 42%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}

/* Home Page Style End */









































/* call to action */














/* login page */
/*.login-form {*/
/*margin-top: 130px !important;*/
/*box-shadow: 0 0 5px 0 #C7C7C7;*/
/*transition: all 0.2s ease-out;*/
/*-o-transition: all 0.2s ease-out;*/
/*-webkit-transition: all 0.2s ease-out;*/
/*-moz-transition: all 0.2s ease-out;*/
/*border-radius:15px;*/
/*}*/

.form-group .forget-pass,p .remember-pass,.send-again{
   color: var(--green); 
}
.panel, .card, .card-box {
background: var(--theme-bg);
padding: 20px;
border-radius: 14px;
color: var(--white) !important;
font-size: 1rem;
font-weight: 650;
border:none;

}

/*.panel-header {*/
/*border-bottom: 1px solid #C7C7C7;*/
/*}*/

.panel-header h3 {
color: var(--white);
font-size: 2rem;
font-weight: 600;
text-transform: capitalize;
}

.card-header {
padding: .5rem 1rem;
margin-bottom: 0;
background-color: transparent;
border-bottom: 1px solid var(--green-dark);
}

.panel.c-white {
margin-bottom: 50px;
}

.input-group>.form-control,
.input-group>.form-select {
position: relative;
flex: 1 1 auto;
height: 40px;
min-width: 0;
color: var(--white);
border: none !important;
padding: 0 1rem !important;
width: calc(100% - 2rem) !important;
margin-top: 0.75rem !important;
border-radius: 5px !important;
}


.form-control {
color: var(--white);
background-color: var(--blue);
border: none;
padding: 10px;
display: block;
}
.pass-box{
position: relative;
}
.eye-icon {
  position: absolute;
  right: 10px;
  margin-top: -30px;
  cursor:pointer;
  transform: translateY(-10%);
  font-size: 17px;
   /* Default color when password is hidden */
        }
.form-control:focus {
box-shadow: none;
border: none;
color: var(--white) !important;
background: var(--bs-dark);
}

.multi-btn.btn-primary {
color: black;
border: none;
padding: 10px 29px;
background: var(--green-dark);

}




.panel a {
color: var(--green);
text-decoration: none;
}

.form-group {
margin: 29px 0;

}
.btn-primary {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border-radius: 8px;
    background-color: var(--green-dark);
    border: none;
    transition: background-color 0.3s ease;
}

/*button.btn.btn-primary {*/
/*background: var(--green-dark);*/
/*}*/
.multi-btn{
border-radius: .25rem;
}

.form-label {
margin-bottom: 0px;
padding: 4px;
}



.btn-link {
font-weight: 400;
color: var(--white);
text-decoration: none;
}

[class*="-warning"] {
color: var(--white) !important;
background-color: #ffc10754 !important;
border-color: #ffc10785 !important;
}

/* [class*="-info"] {
color: var(--white) !important;
background-color: #0dcaf042 !important;
border-color: #0dcaf04f !important;
} */

.panel-footer a {
color: var(--white) !important;
}
Deksi

section#chat {
position: fixed;
right: 5px;
top: 62px;
height: 100%;
z-index: 99;
background: var(--black);
padding: 9px;
width: 0px;
transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
}

section#chat.show {
width: 265px;
padding: 0px;
}

button#toggle-chat {
position: absolute;
left: -38px;
top: 3%;
font-size: 17px;
padding: 10px 1px;
border: none;
background: var(--green-dark);
color: var(--white);
border-radius: 4px;
}



.chat-user-image img {
width: 30px;
border-radius: 25px;
}

.chat-message p {
padding-top: 0px;
word-wrap: break-word;
border-left: 2px solid;
margin: 0px;
}

.chat-wrapper {
height: 80vh;
overflow: auto;
}

.chat-button {
background: var(--white);
padding: 15px 5px;
display: flex;
margin: 0px;
}

.left-side-bar {
width: 214px;
height: 100vh;
z-index: 1000;
background: var(--blue);
}

.user-info-dropdown .dropdown-toggle .user-icon {
width: 35px;
height: 35px;
}

div.header {
background: var(--blue);
}

span.user-name {
color: var(--white) !important;
}

.dropdown-menu.dropdown-menu-right.dropdown-menu-icon-list.show {
background: var(--black);
}

a.dropdown-item {
color: var(--white);
}

.menu-icon.fas.fa-list {
color: var(--white);
cursor: pointer;
}

ul#accordion-menu {
padding-left: 0px;
}

@media screen and (max-width:551px) {
.main-container {
margin-left: 0px !important;
}
}

a.btn.offer-btn {
color: var(--green-dark);
font-size: 18px;
font-weight: 800;
background: var(--white);
margin-right: 7px;
}

.left-side-bar a {
color: var(--white);
text-decoration: none;
font-size: 1.2rem;
display: block;
margin: 5px 0;
background: var(--black);
}

.main-container {
margin-left: 218px;
}

table th {
color: var(--green);
}

table td {
color: var(--white);
}

/***********************************************
## app dashboard styles
***********************************************/
.coinreward {
position: relative;
}
.app_content {
width: 100%;
}
.dashboard {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
min-height: 100vh;
overflow: hidden;
}
.section-title button,
.section-title .button {
background-color: transparent;
border: 1px solid var(--green-dark);
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-ms-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.section-title button:hover,
.section-title .button:hover {
background-color: transparent;
border: 1px solid var(--green-dark);

}

/* .dashboard-app {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 2;
-webkit-flex-grow: 2;
-ms-flex-positive: 2;
flex-grow: 2;
margin-top: 0px;
}

.dashboard-content {
-webkit-box-flex: 2;
-webkit-flex-grow: 2;
-ms-flex-positive: 2;
flex-grow: 2;
padding: 25px;
}

.dashboard-nav {
min-width: 238px;
position: fixed;
left: 0;
top: 0;
bottom: 0;
overflow: auto;
background-color: var(--black);
} */

.dashboard-compact .dashboard-nav {
display: none;
}

.dashboard-nav header {
min-height: 84px;
padding: 8px 27px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}

.dashboard-nav header .menu-toggle {
display: none;
margin-right: auto;
}

.dashboard-nav a {
color: var(--green);
}

.dashboard-nav a:hover {
text-decoration: none;
}

.dashboard-nav {
background-color: var(--black);
border-right: 2px solid var(--black);
}

.dashboard-nav a {
color: var(--white);
text-decoration: none;
}

.brand-logo {
font-family: "Nunito", sans-serif;
font-weight: bold;
font-size: 20px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
color: var(--green);
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}

.brand-logo:focus,
.brand-logo:active,
.brand-logo:hover {
color: var(--white);
text-decoration: none;
}

.brand-logo i {
color: var(--white);
font-size: 27px;
margin-right: 10px;
}

.dashboard-nav-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}

.dashboard-nav-item {
min-height: 56px;
padding: 8px 20px 8px 70px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
letter-spacing: 0.02em;
transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
}

.dashboard-nav-item i {
width: 36px;
font-size: 19px;
margin-left: -40px;
}

.dashboard-nav-item:hover {
background: var(--black);
}


.dashboard-nav-dropdown {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}

.dashboard-nav-dropdown.show {
background: var(--blue);
}

.dashboard-nav-dropdown.show>.dashboard-nav-dropdown-toggle {
font-weight: bold;
}

.dashboard-nav-dropdown.show>.dashboard-nav-dropdown-toggle:after {
-webkit-transform: none;
-o-transform: none;
transform: none;
}

.dashboard-nav-dropdown.show>.dashboard-nav-dropdown-menu {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}

.dashboard-nav-dropdown-toggle:after {
content: "";
margin-left: auto;
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid var(--black);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}

.dashboard-nav .dashboard-nav-dropdown-toggle:after {
border-top-color: var(--black);
}

.dashboard-nav-dropdown-menu {
display: none;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}

.dashboard-nav-dropdown-item {
min-height: 40px;
padding: 8px 20px 8px 70px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
}

.dashboard-nav-dropdown-item:hover {
background: var(--black);
}

.menu-toggle {
position: relative;
width: 42px;
height: 42px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
color: var(--green);
}

.menu-toggle:hover,
.menu-toggle:active,
.menu-toggle:focus {
text-decoration: none;
color: var(--green-dark);
}

.menu-toggle i {
font-size: 46px;
color: var(--white);
}

.dashboard-toolbar {
min-height: 60px;
background: var(--blue);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 8px 27px;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 999;
}

.dash-toolbar-links {
display: flex;
flex-flow: row;
margin-left: 12px;
justify-content: space-around;
flex-wrap: wrap;
}

a.dash-nav-link {
background: transparent;
color: var(--white);
text-decoration: none;
padding: 5px 15px;
font-size: 18px;
font-weight: 400;
margin: 5px;
border: none !important;
}

.nav-item-divider {
height: 1px;
margin: 1rem 0;
overflow: hidden;
background-color: var(--blue);
}

.upper-auth-links {

align-items: center;
}


@media (min-width: 992px) {
.dashboard-app {
margin-left: 238px;
}

.dashboard-compact .dashboard-app {
margin-left: 0;
}

.navbar-expand-lg .navbar-nav .dropdown-menu {
position: absolute;
left: -79px;
}
}


@media (max-width: 768px) {
.dashboard-content {
padding: 15px 0px;
}
}

@media (max-width: 992px) {
.dashboard-nav {
display: none;
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 1070;
}
}




#desktop-nav .desktop-links {
display: none !important;
margin-right: 70px;
}

#desktop-nav .guest-auth-links {
flex-direction: row;
}


.upper-auth-links {
flex-direction: row !important;
}
/*Mobile Nav Style*/
/* @media (max-width: 1200px) {*/
/* #navbarNav .support, #open_button, #close_button, #navbarNav .chat_message, .sidebar_nav, .chat_content {*/
/* display: none;*/
/* visibility: hidden;*/
/* }*/

/*}*/


/* navbar profile info */


.balance:hover span i {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: .50s ease-in-out;
-moz-transition: .50s ease-in-out;
-ms-transition: .50s ease-in-out;
-o-transition: .50s ease-in-out;
transition: .50s ease-in-out;
}

/* header profile info */
#navbarNav .user_profile a:after {
display: none !important;
}
#navbarNav .user_profile .user_data {
background-color: var(--theme-bg);
border-radius: 3rem;
-webkit-border-radius: 3rem;
-moz-border-radius: 3rem;
-ms-border-radius: 3rem;
-o-border-radius: 3rem;
height: 45px;
}
#navbarNav .user_data .info {
padding: 0 0 0 15px;
}
#navbarNav .user_data .info .username {
font-size: 18px;
}
/* navbar dropdown profile info*/

#navbarNav .profile_info .profile_avatar {
background: var(--theme-bg);
padding: 7px;
margin-bottom: 18px;
}

#navbarNav .profile_info li a:hover {
background: transparent;
color: var(--green) !important;
}
#navbarNav .profile_info li:hover a i {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: 1s ease;
-moz-transition: 1s ease;
-ms-transition: 1s ease;
-o-transition: 1s ease;
transition: 1s ease;
}
#navbarNav ul li a .user-image img,
#navbarNav .profile_avatar img {
max-width: 50px;
width: 50px;
height: 50px;
max-height: 50px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
overflow: hidden;
}
#navbarNav .user_profile .user_data img
#navbarNav .profile_avatar img {
width: 58px;
height: 58px;
}

#navbarNav div.support a.icon,
#navbarNav div.chat .icon {
border: 1px solid var(--border-color);
background-color: var(--theme-bg);
display: flex;
justify-content: center;
align-items: center;
width: 45px;
height: 45px;
padding: 10px;
-webkit-border-radius: 3rem;
-moz-border-radius: 3rem;
-ms-border-radius: 3rem;
-o-border-radius: 3rem;
border-radius: 3rem;
}



#navbarNav .chat_message .message {
font-size: 15px;
padding: 15px;
}
#navbarNav .chat_message .message i {
color: var(--green);
font-size: 10px;
}
#navbarNav .chat_message.close_chat {
display: none;
}

/*#mobile-nav .nav-item.active-nav-link,*/
/*#mobile-nav .nav-item:hover {*/
/* background: -webkit-linear-gradient(180deg,rgba(1, 214, 118, 0.045) 0,rgba(1, 214, 118, 0.325) 100%);*/
/* background: linear-gradient(180deg,rgba(1, 214, 118, 0.045) 0,rgba(1, 214, 118, 0.325) 100%);*/
/*}*/


/*#mobile-nav .nav-item.active-nav-link .head-title,*/
/*#mobile-nav .nav-item:hover .head-title {*/
/* color: #fff;*/
/*}*/

/*a.nav-link.middle_navbar-link:hover:not([role="tab"]),*/
/*#mobile-nav li.nav-item.earn .nav-link:hover {*/
/* background: -webkit-linear-gradient(180deg,#01d676 0,#3b807b 100%) !important;*/
/* background: linear-gradient(180deg,#01d676 0,#3b807b 100%) !important;*/
/* color: #fff !important;*/
/*}*/
a.nav-link.middle_navbar-link:hover:not([role="tab"]) .head-icon i,
#mobile-nav li.nav-item.earn .nav-link .head-icon i {
color: #fff;
}


@media(max-width:460px){
a.nav-link.main-nav-link{
padding: 1px 5px !important;
}
}

a.nav-link.middle_navbar-link .head-icon{
display: block;
font-size: 16px;
}
a.nav-link.middle_navbar-link .head-title{
display: block;
font-size: 1rem;
position: relative;
}


a.main-nav-link.active-nav-link .head-title::after{
content: "";
display: block;
position: absolute;
bottom: -2px;
border: 1px solid yellow;
width: 100%;
}


a.nav-link.middle_navbar-link:hover:not([role="tab"]) {
/*color: #bb8900 !important;*/
background: transparent !important;
}

.navbar-toggler:focus {
background: transparent;
box-shadow: none;
}

span.navbar-toggler-icon.fas {
color: var(--white);
background: var(--green-dark);
border-radius: 14px;
padding-top: 15px;
width: 3.5em;
height: 2.5em;
}



a.main-nav-link {
border-radius: 8px;

}


a.nav-link:hover:not([role="tab"]) {
background-color: var(--green-dark);
color: var(--white) !important;
box-shadow: none;
transition: 0.9s all ease-in-out;
}

a.me-3.nav-link.nav-support {
border: none;
background: transparent;
box-shadow: none;
}





@media (: max-width: 992px) {
.dashboard-nav header .menu-toggle {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}

@media (min-width: 992px) {
.dashboard-toolbar {
left: 238px;
}

.dashboard-compact .dashboard-toolbar {
left: 0;
}


#navbarNav {
width: 100%;
display: flex;
align-items: center;
}

}

/* user dashboard page */
p.code.border.border-info.p-2.ref-url {
background: var(--black);
cursor: pointer;
}


/* /user home dashboard */
#user-home svg path {
fill: var(--green-dark);
}

#user-home svg {
width: 28px;
}

#user-home h3.panel-text {
color: var(--green) !important;
font-size: 2rem;
font-weight: 900;
}

#user-home .col-12.offer-header {
display: flex;
justify-content: center;
align-items: center;
min-height: 200px;
overflow: hidden;
}

.nav-tabs {
padding-bottom: 15px;
border-bottom: transparent;
}

.nav-tabs .nav-link {
margin: 0 5px;
padding: 3px 15px !important;
color: var(--green);
font-size: 1.3rem;
border: 2px solid transparent;
border-radius: 6px;
box-shadow: none !important;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
border-color: transparent;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
color: var(--color-light);
background-color: transparent;
border-block-width: 2px;
border-radius: 0px;
border-color: transparent;
border-bottom-color: var(--green);
}


/* main dashboard */
.dashboard-content {
margin-top: 0;
padding: 0;
}

/*.modal-content.bg--dark, .modal-content {*/
/* background: #090810 !important;*/
/* color: #fff !important;*/
/*}*/

/* withdraw */
img.card-img-top {
height: 150px;
width: 150px;
border-radius: 6px;
background: #fff;
}

li.list-group-item {
color: #fff;
}

.panel.dash-offer {
border: none !important;
box-shadow: none;
padding: 50px;
}


/*New Work For Offerwalls*/
.full-width {
grid-column: 1 / -1;
}

.slide-btn-wraper {
display: flex;
justify-content: end;
}


.slide-btn {
background: #16202F;
-webkit-border-radius: 10;
-moz-border-radius: 10;
border-radius: 5px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 4px;
text-decoration: none;
border: none;
}

.offerwallslist {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 120px));
grid-gap: 10px;
grid-column-start: 2;
}
.heading-prev-next{
display: flex;
align-items: center;
justify-content: space-between;
}



/*offerwallsposition*/

.offerwallsposition {
text-align: center;
width: 100%;
position: relative;
}

.offerwallsposition a {
display: block;
position: relative;
color: #fff;
}

.offerwallsposition a img {
height: 180px;
width: 100%;
border-radius: 8px;
}

.offerwallsposition a:hover .overlay {
opacity: 1;
}

.offerwallsposition .overlay {
transition: all 0.5s;
opacity: 0;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(24, 229, 121, 0.4);
z-index: 999;
text-align: center;
vertical-align: middle;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

.offerwallsposition .overlay i {
display: inline-block;
height: 32px;
width: 32px;
font-size: 12px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(24, 229, 121, 0.5);
}

.offerwallsposition .overlay p {
margin: 0;
color: #fff;
font-weight: bold;
font-size: 12px;
}

.offer-partners {
font-size: 22px;
font-weight: 600;
}

.offer-partners.offer,
.offer-partners.survey {
margin-top: 20px;
font-weight: 600;
margin-bottom: 4px;
}
.offer-partners.offer+p,
.offer-partners.survey+p
{
color: #fff;
font-weight: 400;
}

.offer-partners.videos {
margin-top: 24px;
margin-bottom: 4px;
}



/*Offerwall locked*/

.offer-locked {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 888;

}

.offer-locked i.lock {
color: #fff;
font-size: 20px;
}

.offer-locked i.info-icon {
position: absolute;
right: 5px;
top: 5px;
font-size: 14px;
cursor: default;
z-index: 10001;
}

.offer-locked i.info-icon:hover+.actual-info {
display: block;
}

.offer-locked .actual-info {
color: #fff !important;
font-size: 12px;
text-align: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
background-color: rgba(0, 0, 0, 0.7) !important;
z-index: 10000;
top: 50;
line-height: 82px;
}

.dropdown-menu-dark {
background: #0b0a16 !important
}





div#last_offers .top-offer-wrapper .offer-wrapper-inner>p {
margin-bottom: 10px
}

div#last_offers .top-offer-wrapper .offer-wrapper-inner>p span.title {
color: #fff !important;
font-size: 12px !important
}

div#last_offers .top-offer-wrapper .offer-wrapper-inner>p span.value {
color: var(--green) !important;
font-size: 14px !important;
font-weight: 500;
}

div#last_offers .top-offer-wrapper:hover>.offer-wrapper-inner {
display: block !important;
border-radius: 8px
}

.letter-image {
width: 50px;
height: 50px;
border-radius: 50%;
background: #0d1021;
/*color: var(--green);*/
font-size: 30px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center
}
.offer_stat-header{
width: 50px;
height: 50px;
}



.offerwalls-detail-circle {
display: inline-block;
margin-left: 10px;
}

.offerwalls-detail-circle i {
font-size: 16px;
}

.popover-header {
color: #fff;
font-size: 13px;
border-radius: 0;
}

.popover-body {
font-size: 14px;
padding: 10px;
color: #fff;
}



.popover {
color: #fff;
background: #0b0a16;
}

.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after, .bs-popover-end>.popover-arrow::after {
border-right-color: var(--green);
}


.btn-custom-primary-green {
background: #18e579;
color: #fff;
}

.text-left{
text-align: left !important;
}

/*amr Code*/
/***********************************************
## navbar styles
*#**********************************************/
/***********************************************
## left sidebar styles
***********************************************/
@media (min-width: 992px)
#navbarNav{
width: 100%;
display: flex;
align-items: center;
}
/* navbar brand */
.brand_content {
display: flex;
line-height: 0;
}


/***********Button******/
/* navbar guest-auth-links */
.reg_log_buttons {
display: flex;
width: 200px;
gap: 3px;
--b: 2px;
--h: 2.7em;
-webkit-border-radius: 3rem;
-moz-border-radius: 3rem;
-ms-border-radius: 3rem;
-o-border-radius: 3rem;
border-radius: 3rem;
}
.reg_log_buttons button {
--_c: var(--green-dark);
flex: calc(1.10 + var(--_s, 0));
min-width: 0;
font-size: 15px;
font-weight: bold;
height: var(--h);
cursor: pointer;
color: var(--_c);
border: var(--b) solid var(--_c);
background: conic-gradient(at calc(100% - 1.3*var(--b)) 0,var(--_c) 209deg, #0000 211deg) border-box;
clip-path: polygon(0 0,100% 0,calc(100% - 0.577*var(--h)) 100%,0 100%);
padding: 0 calc(0.280*var(--h)) 0 0;
margin: 0 calc(-0.280*var(--h)) 0 0;
box-sizing: border-box;
-webkit-transition: flex .4s;
-moz-transition: flex .4s;
-ms-transition: flex .4s;
-o-transition: flex .4s;
transition: flex .4s;
}
.reg_log_buttons button:first-child {
border-top-left-radius: 3rem;
border-bottom-left-radius: 3rem;
}
.reg_log_buttons button:last-child {
border-top-right-radius: 3rem;
border-bottom-right-radius: 3rem;
}
.reg_log_buttons button + button {
--_c: #eb1b75;
flex: calc(0.80 + var(--_s, 0));
background: conic-gradient(from -90deg at calc(1.3*var(--b)) 100%,var(--_c) 119deg, #0000 121deg) border-box;
clip-path: polygon(calc(0.577*var(--h)) 0,100% 0,100% 100%,0 100%);
margin: 0 0 0 calc(-0.250*var(--h));
padding: 0 0 0 calc(0.350*var(--h));
}
.reg_log_buttons button:focus-visible {
outline-offset: calc(-2*var(--b));
outline: calc(var(--b)/2) solid #000;
background: none;
clip-path: none;
margin: 0;
padding: 0;
}
.reg_log_buttons button:focus-visible + button {
background: none;
clip-path: none;
margin: 0;
padding: 0;
}
.reg_log_buttons button:has(+ button:focus-visible) {
background: none;
clip-path: none;
margin: 0;
padding: 0;
}
/*.reg_log_buttons button:hover, button:active:not(:focus-visible) {*/
/*--_s: .50;*/
/*}*/
/*.reg_log_buttons button:hover {*/
/*box-shadow: inset 0 0 0 100vmax var(--_c);*/
/*color: #fff;*/
/*}*/
/**Navbar icon**/



/* modal styles */
.modal {
-webkit-backdrop-filter: var(--blur-filter);
backdrop-filter: var(--blur-filter);
padding: 4rem 0 5rem 0;

}
.modal_header .close-button button {
background-color: transparent;
border: none;
outline: none;
}
.modal_header .close-button button i {
font-size: 25px;
color: #fff;
}
.modal-content {
border: 1px solid var(--border-color);
background: var(--webkit-dropdown-bg);
background: var(--dropdown-bg);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
}
/*.modal_body .profile_img,*/
/*.modal_body .profile_img img {*/
/*width: 115px;*/
/*}*/
.modal_body .avater_button button {
font-size: 12px;
}
.modal_body .info .list .item {
padding: 7px 0;
border-bottom: 1px solid rgba(211, 206, 206, 0.216);
}
.modal_body .info .list .item span:first-child {
color: #fff;
}
.modal_body .info .list .item span:last-child {
color: #ccd;
}
.modal_body .info .copyButton {
background-color: transparent;
outline: none;
border: none;
}
.modal_body .info .copyButton i {
color: var(--green);
}
.modal_body .btn-success {
background-color: var(--green-dark);
}

/***********************************************
## footer styles
***********************************************/
.footer {
border-top: 1px solid var(--border-color);
background-color: var(--theme-bg);
position: relative;
}
.footer::after {
content: "";
/*background-color:rgb(22, 23, 36);*/
background-image: url('../images/backgrounds/footer_bg2.jpg');
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.1;
}
.footer .widget .title {
font-size: 22px;
}
.copyright-area p {
font-size: 10px;
}
.footer-link svg {
width: 15px;
height: 15px;
}
.footer-link svg path {
fill: var(--white);
}
.footer_coins-box {
background: var(--black);
text-align: center;
padding: 15px;
margin: 25px;
border-radius: 5px;
}
footer.footer.pb-5 {
margin-top: 0px;
padding-top: 25px;
text-align: center;
padding-bottom: 0px !important;
}

.links-group {
display: flex;
flex-flow: column;
text-align: left;
}

a.footer-link {
color: var(--white);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
}
@media (max-width: 530px) {
.footer .widget .title {
font-size: 18px;
}
a.footer-link {
font-size: 12px;
}
}
@media (max-width: 480px) {
.footer-link svg {
width: 12px;
height: 12px;
}
.footer .widget .title {
font-size: 12px;
}
a.footer-link {
font-size: 9px;
}
.text-center.info p {
font-size: 8px;
}
}
.copy_info p {
font-size: 13px;
color: var(--gray);
}


.copy-right p {
text-align: center;
margin-top: 20px;
color: var(--white) !important;
}

.widget svg {
height: 150px;
width: 150px;
}

.widget svg path {
fill: var(--green-dark)
}
/***********************************************
## chat content styles
***********************************************/
.chat_content {
background-color: var(--theme-bg);
backdrop-filter: var(--blur-filter);
border: 1px solid var(--border-color);
width: 18.5rem;
height: 100%;
position: fixed;
top: 0;
right: 0;
padding: 50px 0 0 0;
}
.chat_open #toggleBtn i.open,
.chat_close #toggleBtn i.close,
.chat_close .chat_content,
.chat_close #navbarNav .chat_message {
display: none !important;
}
.desktop_chat .chat_body {
width: 100%;
height: 100vh;
overflow: scroll;
scrollbar-width: none;
padding-bottom: 8.5rem;
}
.chat_body::-webkit-scrollbar {
display: none;
}

.chat_messages .message .user {
line-height: 1;
}
.chat_messages .message .user_img img {
max-height: 28px;
height: 28px;
max-width: 28px;
width: 28px;
}
.chat_messages .message {
-webkit-border-radius: 10px 10px 10px 0;
-moz-border-radius: 10px 10px 10px 0;
-ms-border-radius: 10px 10px 10px 0;
-o-border-radius: 10px 10px 10px 0;
border-radius: 10px 10px 10px 0;
background-color:#222339;
}
.chat_messages .user .username {
color: #00fa43 !important;
font-size: 16px;
}
.chat_messages .message .time {
font-size: 10px;
}
.chat_messages .message .message_data {
font-size: 14px;
}
.chat_messages .message .g_id {
font-size: 10px;
-webkit-border-radius: 3rem;
-moz-border-radius: 3rem;
-ms-border-radius: 3rem;
-o-border-radius: 3rem;
border-radius: 3rem;
}
.chat_messages .message .g_id.admin {
background-color: #0f8748;
padding: 1px 6px;
color: #fff;
}
.chat_messages .message .g_id.mod {
background-color: rgb(42 85 142);
padding: 1px 6px;
color: rgb(213 218 224);
}
.chat_footer {
background: #222339;
padding: 10px;
}
.chat_footer form {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
width: 100%;
}
.chat_footer input, .chat_footer {
display: flex;
align-items: center;
}
.chat_footer input, .chat_footer .input {
width: 100%;
}
.chat_footer input, .chat_footer input::placeholder {
color: #fff;
}
.chat_footer input, .chat_footer .submit {
background-color: var(--theme-bg);
width: 43px;
height: 43px;
color: #fff;
-webkit-border-radius: 3rem;
-moz-border-radius: 3rem;
-ms-border-radius: 3rem;
-o-border-radius: 3rem;
border-radius: 3rem;
}
.chat_footer .unauth {
position: relative;
padding: 0;
}
.chat_footer .unauth input, .chat_footer .unauth button {
opacity: 0.1;
}
.chat_footer .not_login {
background-color: var(--header-bg);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
-webkit-border-radius: 3rem;
-moz-border-radius: 3rem;
-ms-border-radius: 3rem;
-o-border-radius: 3rem;
border-radius: 3rem;
}
.chat_footer .not_login .message {
font-size: 12px;
color: #fff !important;
}
.chat_footer .not_login i {
color: var(--green-dark);
}



















/*Footer Page Style*/
#faq .content {
background: var(--black);
padding: 15px;
border-radius: 5px;
box-shadow: 0 0 4px var(--green);
}

#faq .content .question {
color: var(--green) !important;
font-size: 2rem;
font-weight: 700;
}

/* preview image */
header.header .img-wrapper img {
width: 100%;
height: 400px;
}

/* benefits section */
section#benefits h2 {
font-weight: 600;
}

.benf_box {
text-align: center;
padding: 15px;
margin: 15px 0;
border-radius: 5px;
min-height: 160px;
font-size: 1rem;
font-weight: 600;
display: flex;
justify-content: space-between;
flex-flow: column;
align-items: center;
color: var(--green);
background: #101824;
}

.benf_box p {
color: #fff;
}

.benf_box svg {
height: 30px;
width: 44px;
margin: 0 0 15px 0;
}

.benf_box svg path {
fill: var(--green);
}

.footer_coins-box {
background: var(--black);
text-align: center;
padding: 15px;
margin: 25px;
border-radius: 5px;
}
/*********************************************************
## Profile styles
*********************************************************/
.dropdown-bg {
-webkit-background: var(--webkit-dropdown-bg);
background: var(--dropdown-bg);
}
.my_profile .profile-card {
border: 1px solid var(--border-color);
background-color: var(--theme-bg);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
}
.my_profile .statistics .title i {
font-size: 19px;
}
.my_profile .statistics-data .icon {
display: flex;
justify-content: center;
align-items: center;
width: 45px;
height: 45px;
background-color: rgb(22 100 79);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
.my_profile .statistics-data .icon i {
color: rgb(1 214 118);
font-size: 23px;
}
.my_profile .statistics-data .info span {
font-size: 14px;
color: #ccd;
}
.profile_image img {
max-width: 125px;
width: 125px;
max-height: 125px;
height: 125px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.container{
max-width: 1200px;
margin: 0 auto;
}
.cashout{
 max-width: 1520px;
margin: 0 auto;   
}
.pen {
    width: 15px;
    height: 15px;
    display: inline-block;
    line-height: 1em;
    flex-shrink: 0;
    color: var(--green);
    vertical-align: middle;
    fill: none;
    cursor: pointer;
}
.copyButton {
    background-color: transparent;
    outline: none;
    border: none;
}
.copyButton i{
    color: #00fa43;
}
 /* Slider Container */
 .slider_cash {
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* Track for sliding images */
.slidetrack {
    display: flex;
    animation: scroll 120s linear infinite;
    width: calc(250px * 18);
}

/* Individual slides */
.slide {
    width: 150px;
    margin-right: 20px;
    flex-shrink: 0;
}

/* Images inside slides */
.slide img {
    max-width: 100%;
    display: block;
    animation-play-state: paused;
}

/* Animation for the slider */
@keyframes scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-250px * 8)); /* Moves the width of 8 slides */
        }
    }
.user-image,.profile_image,.profile_img{
    border-color: var(--brand);
    border-width:2px;
    border-style: solid;
    border-radius: 50%;
}

/* Optional Styling for centering the content */
.partner-img {
    display: flex;
    align-items: center;
}
/*.icon {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    width: 40px;*/
/*    height: 40px;*/
/*}*/

.pen {
    width: 24px;
    height: 24px;
}

.profile-setting p {
    font-size: 16px;
}

button a {
    display: inline-block;
    color: inherit;
}

/*button.btn {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    gap: 10px;*/
/*}*/

.profile-setting {
    margin-left: 10px;
}

h3 {
    font-size: 20px;
}
.start-box {
            background-color: #fff;
            border-radius: 10px;
            transition: transform 0.3s ease;
        }

        .start-box:hover {
            transform: translateY(-10px);
        }

        .box-shadow {
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        }

        .step {
            padding: 20px;
        }

        .step h3 {
            color: #2c3e50;
            margin-bottom: 10px;
        }

        .step h6 {
            color: #7f8c8d;
        }

        .image img {
            max-width: 100%;
            height: auto;
            animation: fadeInUp 1.5s ease;
        }

        /* Counter Animation */
        .counter {
            font-size: 2.5rem;
            font-weight: bold;
            color: #fff;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
            animation: scaleIn 1s ease infinite alternate;
        }

        /* Animations */
        @keyframes fadeIn {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeInUp {
            0% {
                opacity: 0;
                transform: translateY(30px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes scaleIn {
            0% {
                transform: scale(1);
            }
            100% {
                transform: scale(1.1);
            }
        }

        /* Responsive Styling */
        @media (max-width: 992px) {
            section.how-to-start h2 {
                font-size: 2rem;
            }

            .counter {
                width: 50px;
                height: 50px;
                font-size: 2rem;
            }
        }

        @media (max-width: 576px) {
            section.how-to-start h2 {
                font-size: 1.75rem;
            }

            .counter {
                width: 40px;
                height: 40px;
                font-size: 1.5rem;
            }
        }
        
        /* Fullscreen preloader */
        /*#preloader {*/
        /*    position: fixed;*/
        /*    top: 0;*/
        /*    left: 0;*/
        /*    width: 100%;*/
        /*    height: 100%;*/
        /*    background-color: #2c3e50;*/
        /*    display: flex;*/
        /*    justify-content: center;*/
        /*    align-items: center;*/
        /*    z-index: 9999;*/
        /*}*/

        /* Dots container */
        /*.dots {*/
        /*    display: flex;*/
        /*    justify-content: space-between;*/
        /*    width: 80px;*/
        /*}*/

        /* Each dot */
        /*.dot {*/
        /*    width: 15px;*/
        /*    height: 15px;*/
        /*    background-color: #3498db;*/
        /*    border-radius: 50%;*/
        /*    animation: bounce 0.6s infinite alternate;*/
        /*}*/

        /* Different delays for each dot */
        /*.dot:nth-child(2) {*/
        /*    animation-delay: 0.2s;*/
        /*}*/

        /*.dot:nth-child(3) {*/
        /*    animation-delay: 0.4s;*/
        /*}*/

        /* Bounce animation */
        /*@keyframes bounce {*/
        /*    to {*/
        /*        transform: translateY(-20px);*/
        /*        opacity: 0.8;*/
        /*    }*/
        /*}*/

  .chat_footer {
        position: sticky;
        bottom: 0;
        }
td span.text-white.rounded.bg-dark.px-1 {
    background: #e3e349 !important;
    color: #000 !important;
    font-size: 1rem;
    /* font-weight: 400; */
}

/*td span.text-white.rounded.bg-success.px-1 {*/
/*    background: #224034 !important;*/
/*}*/
td {
    font-weight: 400 !important;
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #01ae60;
    border-color: #01ae60;
}

.page-link {
    position: relative;
    display: block;
    color: #fff;
    text-decoration: none;
    background-color: #1d1e30;
    border: 1px solid #1d1e30;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.page-item.disabled .page-link {
    color: #fff;
    pointer-events: none;
    background-color: #121020;
    border-color: #000;
    cursor: not-allowed;
}

button.page-link:hover, button.page-link:active {
    background: #0b0a16;
    border: #121020;
    color: #fff;
    box-shadow:none;
}

#changeAvatarModal .modal-content {
    position: fixed;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #1e1e30;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem;
    outline: 0;
    top: 9rem;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    max-height: 410px;
    /* min-height: 450px; */
    max-width: 520px;
    margin: 0 auto;
    z-index: 999999;
}
.modal-backdrop.fade.show {
    display: none;
}
.top_3 .user_card {
        -webkit-border-radius: 15px 15px 0 0;
        border-radius: 15px 15px 0 0;
    }
    .top_3 .topOne {
        width: 200px;
        height: 183px;
    }
    .top_3 .second, .top_3 .third {
        width: 190px;
        height: 155px;
        margin-bottom: -29px;
    }
    @media (max-width: 740px) {
        .top_3 .topOne {
            width: 160px;
        }
        .top_3 .second, .top_3 .third {
            width: 150px;
        }
    }
    @media (max-width: 600px) {
        .top_3 .topOne {
            width: 140px;
        }
        .top_3 .second, .top_3 .third {
            width: 130px;
            height: 154px;
        }
        .top_3 .box {
            padding: 0 !important;
        }
    }
    @media (max-width: 485px) {
        .leaderboard {
            padding: 0 !important;
        }
        .top_3 .topOne {
            width: 130px;
        }
        .top_3 .second, .top_3 .third {
            width: 120px;
        }
    }
    .top_3 .user_image {
        width: 75px;
        height: 75px;
        top: -67px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    .top_3 .topOne .user_image {
        width: 80px;
        height: 80px;
    }
    .topOne .details {
        padding-top: 5.1rem;
    }
    .top_3 .details .username, .top_3 .details span {
        width: 98px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .top_3 .star_icon {
        width: 30px;
        top: 5px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    .top_3 .crown_icon {
        top: -85px;
        right: 30px;
        width: 45px;
        transform: rotate(28deg);
    }
    @media (max-width: 740px) {
        .top_3 .crown_icon {
            top: -90px;
            right: 5px;
            width: 50px;
        }
    }
    @media (max-width: 485px) {
        .top_3 .crown_icon {
            top: -87px;
            right: 0px;
            width: 43px;
        }
    }
    .rank_data .you_earned .currency_icon {
        height: 12px;
    }
    .rank_data .user_info {
        width: 300px;
    }
    @media (max-width: 900px) {
        .rank_data .user_info {
            width: 250px;
        }
    }
    @media (max-width: 550px) {
        .rank_data .user_info {
            width: 200px;
        }
    }
    .rank_data .user_info .username h3 {
        width: 100px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .rank_data .completed_offers {
        width: 200px;
    }
    .rank_data .border_bottom:last-of-type {
        -webkit-border-bottom: 0;
        border-bottom: 0;
        padding-bottom: 0 !important;
    }
    .rank_data .rank_user .count_box {
        width: 35px;
        height: 35px;
    }
    .rank_data .rank_user .user_img img {
        width: 35px;
        height: 35px;
    }
    .currency_icon {
    height: 25px;
}
/*button {*/
/*    background-color: transparent;*/
/*    outline: none;*/
/*    border: none;*/
/*}*/
 #popup {
            display: none; 
            position: fixed; 
            top: 0; 
            left: 0; 
            right: 0; 
            bottom: 0; 
            background: rgba(0, 0, 0, 0.7); 
            color: white; 
            text-align: center; 
            padding-top: 100px;
            z-index: 9999;
        }

        .popup {
            padding: 20px; 
            border-radius: 8px; 
            max-width: 600px;
            max-height:400px;
            background:rgb(30, 30, 48);
            margin: 0 auto;
        }

        .popupbtn {
            background-color: #FF6347; 
            color: white; 
            border: none; 
            padding: 10px 20px; 
            border-radius: 5px; 
            cursor: pointer;
        }

        .popupbtn:hover {
            background-color: #FF4500;
        }

        a {
            color: #1E90FF;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }
        .email-link {
            color: #FF6347; /* Change email link color to Tomato */
        }

        .email-link:hover {
            color: #FF4500; /* Darker shade on hover */
        }
        .icon {
            margin-right: 8px;
            margin-left: 3px;/* Space between icon and text */
        }
        .Offery {
    background: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%);
        }
        .ShusiAds {
    background: linear-gradient(-20deg, #ff6a00 0%, #ffcc00 100%);
        }
        .Taskwall {
    background: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%);
        }
        .Revto {
    background: linear-gradient(230deg, #ffc480, #ff763b);
        }
        .Bit {
    background: linear-gradient(-20deg, #28a745 0%, #17a2b8 100%);
        }
        .Rediant {
    background: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%);
        }
        .Up {
    background: linear-gradient(230deg, #0e4cfd, #6a8eff);
        }
        .Tplayed {
    background: linear-gradient(135deg, #00C9A7, #0082C8);
        }
    /*    .Prime {*/
    /*background: linear-gradient(-20deg, #8e2de2 0%, #4a00e0 100%);*/
    /*    }*/
        .Prime {
    background: linear-gradient(-20deg, #008080 0%, #000080 100%);
        }