*{
    margin: 0;
    padding: 0;
    font-family: "Saira", sans-serif;
}


p,button{
    margin: 0;
    font-family: "Saira", sans-serif !important;
}

:root{
    --aqua: #37E0EB;
    --light_aq: #A7B6B8;
    --dark_aq: #0E2D32;
    --extra_dark_aq: #041B1F;
    --dark_blue: #0F161C;
    --white: #ffffff;
    --black: #000000;
    --brdr: #153C42;

    /* for fonts */
    --ft_12: 12px;
    --ft_14: 14px;
    --ft_16: 16px;
    --ft_18: 18px;
    --ft_22: 22px;
}
.aqua{
    color: var(--aqua);
}
.light_aq{
    color: var(--light_aq);
}
.dark_aq{
    color: var(--dark_aq);
}
.extra_dark_aq{
    color: var(--extra_dark_aq);
}
.dark_blue{
    color: var(--dark_blue);
}
.whitee{
    color: var(--white) !important;
}
.blackk{
    color: var(--black);
}


body{
    background: linear-gradient(0deg, var(--black), var(--extra_dark_aq) );
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    min-height: 100vh;
}


button{
    cursor: pointer !important;
}
nav {
    line-height: 22px !important;
    height: 70px !important;
}

.top_nav {
    background: none !important;
    box-shadow: none;
    /* border-bottom: 1px solid var(--dark_aq) !important; */
    display: flex;
    justify-content: space-between;
    padding: 0px 100px;
    align-items: center;
}

.h_left, .h_right {
    display: flex;
    justify-content: center;
    gap: 1rem;
    align-items: center;
    font-size: var(--ft_18);
    color: var(--white);
    font-weight: 600;
}

.a_logo {
    width: auto;
    height: 35px;
    display: flex;
    align-items: center;
    font-size: var(--ft_14);
    gap: 1rem;
    color: var(--light_aq);
}
.btn_tp {
    border: 2px solid var(--brdr);
    padding: 5px 10px;
    border-radius: 5px;
    display: flex;
    gap: 0.5rem;
    align-content: center;
    align-items: center;
    min-width: 40px;
    max-height: 40px;
    justify-content: center;
    font-size: var(--ft_18);
    font-weight: 600;
    background: var(--extra_dark_aq);
    color: var(--aqua);
}

.icon_sq{
    width: 40px;
    height: 40px;
    padding: 10px;
    border-radius: 100px;
}
.btn_tp >img {
    width: auto;
    height: var(--ft_16);
}

.profile_log{
    width: 48px;
    height: 48px;
    border-radius: 100px;
    border: 2px solid var(--aqua);
}
.users_nm{
    color: var(--aqua);
    font-style: italic;
    font-size: var(--ft_18);
    font-weight: bold;

    width: 140px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.greet{
    width: 140px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden; 
    font-size: var(--ft_14);
}


/* cards */
.top_c{
    position: absolute;
    top: 5%;
    right: 5%;
    background: var(--dark_aq);
    padding: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
}
.top_c >a{
    display: flex;
    align-items: center;
    justify-content: center;
}
.top_c >a >img{
    height: 20px;
    width: 20px;
}


.body_area{
    margin: 10px 20px;
}
.mt_10per{
    margin-top: 10%;
}
.mt_5per{
    margin-top: 5%;
}
.card_img_main{
    width: 100%;
    border-radius: 20px;
}

.cardd{
    position: relative;
    border-radius: 20px;
    border: 2px solid var(--aqua);
    display: flex;
    width: 100%;
    height: 100%;
}
.btm_c{    
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10px;
    background: linear-gradient(360deg, var(--black), var(--black), transparent);
    border-radius: 0px 0px 20px 20px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-bottom: 20px;
    width: 100%
}

.ttl_bg{
    font-size: var(--ft_18);
    font-weight: 600;
    color: var(--white);
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    max-width: 250px;
}
.ttl_bg2{
    font-size: var(--ft_22);
}
.desc{
    font-size: var(--ft_16);
    font-weight: 400;
    color: var(--light_aq);
     margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden; 
}

.playicon{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.displ_lr{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.swiper-wrapper{
    box-sizing: inherit !important;
}
.swiper-pagination{
    position: static !important;
    margin-top: 5% !important;
}


.swiper-pagination-bullet{
    background: var(--light_aq) !important;
}
.swiper-pagination-bullet-active{
    background: var(--aqua) !important;
}



.main_ttl{
    font-size: var(--ft_22);
    font-weight: 400;
    color: var(--white);
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin: 0;
}
.main_ttl >p{
    font-style: italic;
    font-weight: bold;
    color: var(--aqua);
    background: url(../images/title_bg.svg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    padding: 0px 0px 5px 0px;
    text-transform: uppercase;
}


.view_more{
    color: var(--light_aq);
    font-size: var(--ft_16);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.view_more >img{
    background: var(--dark_aq);
    border: 1px solid var(--aqua);
    border-radius: 50px;
}

.view_more_btn{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--aqua);
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--dark_aq);
    padding: 7px;
}
.view_more_btn >img{
    width: auto;
    height: var(--ft_12);
}

.d_flx2{
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5%;
}

.card2{
    position: relative;
    margin-top: 10%;
}

.card2_main_img{
    width: 90%;
    height: 220px;
    margin-left: 10%;
    border-radius: 10px;
    object-fit: cover;
    object-position: top;
}
.positon_trend{
    font-size: 80px;
    font-weight: bold;
    color: var(--white);
    position: absolute;
    bottom: -12%;
    background: -webkit-linear-gradient(#ffffff, #ffffff, #000000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.top_img_card2{
    position: relative;
}

.colmn{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.brdr_none{
    border: none;
}


.scrolled {
    background: linear-gradient(180deg, var(--extra_dark_aq), transparent) ! IMPORTANT;
}

/* Featured Games */
.featured_games{
    background: var(--dark_aq);
    padding: var(--ft_18);

    background: url(../images/featured.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}


.card22{
    border: 2px solid var(--extra_dark_aq);
    padding: 10px;
    background: var(--dark_blue);
    border-radius: 10px;
}
.card22 > .top_img_card2 > img{
    width: 100%;
    height: 180px;
    margin-left: 0 !important;
}

.max_wdth{
    max-width: 65%;
}



.footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px;
    gap: 1rem;
    font-size: var(--ft_14);
    color: var(--light_aq);
    line-height: 22px;
    text-align: center;
    background: linear-gradient(45deg, var(--dark_aq), var(--extra_dark_aq) );
}

.footer >img{
    width: auto;
    height: 30px;
    margin: 20px 0px;
}
.footer> ul{
    color: var(--light_aq);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: var(--ft_14);
    width: 100%;
}

.footer > hr{
    width: 100%;
    border: 1px solid var(--dark_aq);
}



.nav_detail{
    height: auto !important;
}
.detail_banner{
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: cover;
    object-position: center;
}
.top_info{
    position: relative;
}



.img_blr{
    position: absolute;
    bottom: 0;
    background: linear-gradient(360deg, #031417, #072024ab, transparent);
    height: 120px;
    width: 100%;
}

.game_info_d{
    display: flex;
    gap: 1rem;
    align-items: center;
    position: relative;
}
.icon_sq100{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 2px solid var(--brdr);
}


.game_info_nm{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

.star_rating{
    display: flex;
    gap: 0.5rem;
    color: var(--light_aq);
    font-size: var(--ft_14);
}


.game_more_inf{
    display: flex;
    gap: 1rem;
    align-items: center;
}
.categ, .status_com{
    background: var(--dark_aq);
    color: var(--aqua);
    font-size: var(--ft_16);
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 5px;
    min-width: 70px;
    text-align: center;
}
.complte_stats{
    font-size: var(--ft_18);
    font-style: italic;
    color: var(--white);
    margin: 0px 5px;
    font-weight: 700;
}

.column_area{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0px 10px;
    margin-top: -5%;
}


hr{
    width: 100%;
    border: 1px solid var(--dark_aq);
}

.play_now{
    height: 48px;
    background: var(--aqua);
    color: var(--dark_aq);
    border-radius: 50px;
    border: 1px solid var(--brdr);
    font-size: var(--ft_16);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    margin: 10px 0px;
    width: 100%;
}
.play_now:focus{
    background: var(--aqua);
    color: var(--dark_aq);
}
.play_now >img{
    width: auto;
    height: var(--ft_16);
}

.taks_item{
    background: var(--dark_blue);
    border: 2px solid var(--brdr);
    padding: 10px 14px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.task_count{
    background: var(--extra_dark_aq);
    border: 1px solid var(--aqua);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: var(--aqua);
    font-size: var(--ft_16);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.ttl_sm{
    font-size: var(--ft_16);
    font-weight: 600;
    color: var(--white);
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    max-width: 250px;
}

.d_flex{
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
    align-items: flex-start;
}

.roww{
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.Tasks_rem{
    display: flex;
    gap: 1rem;
    flex-direction: column;
    margin-top: -2%;
    margin-bottom: 5%;
}
.taks_item >img{
    width: 30px;
    height: 30px;
}

.not_played{
    filter: brightness(0.4);
}

.steps_compl{
    color: var(--light_aq);
    font-size: var(--ft_16);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: -3%;
    margin-bottom: 10%;
}

.completed_btn, .completed_btn:focus{
    background: var(--brdr);
    color: var(--aqua);
}

.current_task{
    border: 2px solid var(--aqua);
    background: var(--brdr);
}

.your_rank{
    border: 2px solid var(--aqua);
    background: var(--brdr);
}
.your_rank >.d_flex  > .task_count {
    background: var(--extra_dark_aq);
}

.profile_top{
    background: var(--dark_aq);
    padding: 14px;
    border-radius: 10px;
    margin-top: 12%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--white);
    gap: 1rem;
}

.profile_sq{
    width: auto;
    height: 90px;
    border-radius: 10px;
}

.user_data, .user_inf{
    display: flex;
    align-items: center;
    gap: 1rem;
}
.user_inf {
    flex-direction: column;
    align-items: flex-start;
}

.Edit_btn{
    background: var(--brdr);
    color: var(--aqua);
    padding: 10px 20px;
    border-radius: 20px;
    font-size: var(--ft_14);
    display: flex;
    gap: 0.5rem;
    align-items: center;
    min-width: 100px;
    padding: 10px;
    justify-content: center;
}
.Edit_btn >img{
    width: auto;
    height: var(--ft_14);
}


.earnings{
    background: var(--brdr);
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    color: var(--white);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: var(--ft_16);
    font-weight: 500;
    text-align: center;
}

.earnings >.desc{
    font-size: var(--ft_14);
}
.gap{
    gap: 1rem;
    margin-bottom: 0;
}

.round{
    border-radius: 50px;
    height: 40px;
}

.redeem_btn{
    background: var(--extra_dark_aq);
    border: 2px solid var(--aqua);
    min-height: 48px;
    border-radius: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 5px;

}

.redeem_bt{
    background: var(--aqua);
    border-radius: 50px;
    padding: 10px;
    font-size: var(--ft_14);
    font-weight: 600;
    color: var(--extra_dark_aq);
    min-width: 140px;
    border: none;
}
.redeem_bt:focus{
    background: var(--aqua);
    color: var(--extra_dark_aq);
}
.brd_none{
    border: none;
    padding-left: 20px;
    background: none;
}
.pdng0{
    padding: 0 !important;
}
.tabs{
    background: var(--extra_dark_aq) !important;
    
}
.tabs .tab a{
    color: var(--aqua) !important;
    text-transform: capitalize !important;
    opacity: 0.7 !important;
}

.tabs .indicator{
    background-color: var(--aqua) !important;
}

.tabs .tab a:hover, .tabs .tab a.active {
    color: var(--aqua) !important;
    opacity: 1 !important;
}

.tabs .tab a:focus, .tabs .tab a:focus.active {
    background-color: var(--dark_aq) !important;
}


.flex_gap{
    display: flex;
    justify-content: space-between;
    color: var(--light_aq);
}

.top_head{
    margin: 20px 0px;
    padding-left: 7%;
    padding-right: 5%;
}

.taks_inprogress{
    background: var(--dark_blue);
    border: 2px solid var(--brdr);
    padding: 10px 14px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.taks_inprogress >.taks_item{
    background: none;
    border: none;
    padding: 0;
    border-radius: 0;
}


.taks_item > .d_flex >.d_flex > .desc{
    font-size: var(--ft_12);
}

.progress{
    margin: 0 !important;
    background: var(--brdr) !important;
}
.progress .determinate{
    background: var(--aqua) !important;
}
.status_info{
    margin: 0;
    color: var(--light_aq);
    font-size: var(--ft_14);
    font-weight: 500;
}
.status_info span{
    color: var(--aqua);
    font-size: var(--ft_16);
    font-weight: 600;
}

.remaing_task_msg{
    background: var(--brdr);
    padding: 5px 10px;
    font-size: var(--ft_14);
    text-align: center;
    font-weight: 500;
    color: var(--white);
    border-radius: 10px;
}
.remaing_task_msg >span{
    color: var(--aqua);
}

.in_progress_b{
    border: 2px solid #EFD47B;
}
.in_progress{
    background: #263E39;
    color: #EFD47B;
    padding: 5px;
    border-radius: 10px;
    margin-right: 5px;
}
.max_width_70{
    max-width: 180px;
    -webkit-line-clamp: 1;
}
.complted_b{
    border: 2px solid #7BEFC2;
}
.complted_task{
    background: #183E3F;
    color: #7BEFC2;
    padding: 5px;
    border-radius: 10px;
    margin-right: 5px;
}

.edit_prfle {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    height: 80vh;
    justify-content: center;
}
.user_img_ed {
    position: relative;
}
.user_img_edit {
    width: 140px;
    height: 140px;
    border-radius: 20px;
    border: 2px solid var(--brdr);
}
.edit_ic {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--extra_dark_aq);
    border: 2px solid var(--brdr);
    /* padding: 5px; */
    position: absolute;
    bottom: 10px;
    right: 5px;
    object-fit: none;
    cursor: pointer;
}

.input_name {
    background: var(--dark_aq) !important;
    border: 1px solid var(--brdr) !important;
    border-radius: 5px !important;
    height: 48px !important;
    color: var(--white) !important;
    padding-left: 10px !important;
    width: 97% !important;
}

.mrgn0{
    margin: 0;
}

.body_area22{
    display: flex;
    justify-content: center;
}
.cointainr{
    width: 480px;
}




/* loader */
.loader{
    height: 100vh;
    position: fixed;
    z-index: 999999999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    top: 0;
    background: var(--dark_aq);
    overflow: hidden;
}
.loader >img{
    width: auto;
    height: 200px;
}


/* leaderboard */
.leaderboard_top {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 20%;
}
.user_rn {
    background: url(../images/ldr_bg.svg);
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-size: cover;
    color: var(--white);
    gap: 1rem;
    width: 25%;
    position: relative;



}

.user_rn >img {
    margin-top: -20%;
    width: auto;
    height: 100px;
    border-radius: 50%;
    border: 2px solid var(--aqua);
}


.user_rn >span {
    position: absolute;
    top: -42%;
    right: 0px;
    justify-content: center;
    font-size: 60px;
    font-weight: bold;
    color: var(--white);
    background: -webkit-linear-gradient(#ffffff, #ffffff, #000000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.3;
}
.user_rn >p {
    font-size: var(--ft_16);
    font-weight: 600;
}
.flag {
    width: auto !important;
    height: 20px !important; 
    border-radius: 0px !important;
    margin-top: 0px !important;
    border: none !important;
}



.rn2 {
    margin-top: 15%;
}
.rn1 {
    margin-top: 0%;
}
.rn3 {
    margin-top: 20%;
}
.mt_none{
    margin-top: 0;
}
.mb_none{
    margin-bottom: 0;
}
.ldr_img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--aqua);
}
.brdr_none{
    border: none;
    background: var(--brdr);
}


.modal.bottom-sheet {
    max-height: 75% !important;
    background: linear-gradient(0deg, var(--black), var(--brdr) );
}

.modal_text {
    padding: 24px !important;
}

.modal_text >ul >li {
    font-size: var(--ft_16);
    color: var(--light_aq);
    margin-bottom: 18px;
    list-style-type: decimal !important;
    margin-left: 15px;
}

.flt_50{
    filter: brightness(50);
}

.modal-trigger{
    font-size: var(--ft_14) !important;
    font-weight: 600;
}


.img_sq{
    width: 100% !important;
    height: 190px !important;
}
.card_list{
    display: grid !important;
    grid-template-columns: 1.5fr 2fr;
    gap: 1rem;
    margin: 0;
    border: 2px solid var(--brdr);
    background: var(--extra_dark_aq);
}


.mrgin_top{
    margin-top: var(--ft_22);
    margin-bottom: 10%;
}



.category_gm{
    background: var(--dark_aq);
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    width: 45%;
}

iframe{
    border: none;
}
.center_align{
    align-items: center;
    gap: 2rem;
}

.gif_colr_chnge{
    filter: contrast(20);
}

.modal-close{
    color: var(--light_aq);
}

@media only screen and (max-width: 600px) {
    .top_nav {
        padding: 0px 10px;
    }
    .cointainr{
        width: 100%;
    }
}
@media only screen and (max-width: 940px) {
    .top_nav {
        padding: 0px 10px;
    }
    .cointainr{
        width: 100%;
    }
}


.card2{
    display: block;
  text-decoration: none;
  color: inherit;
}
.card2.card22 {
  display: block;
  text-decoration: none;
  color: inherit;
}

.brdr_10{
    border-radius: 10px;
}