body,html{ height: 100% ; scroll-behavior: smooth;}
body{
margin: 0;
padding: 0;
font-size: 14px;
font-family: 'Poppins', sans-serif;
color: black;
line-height: 1.48;
}
*,p,h1,h2,h3,h4,h5,h6,ul{ margin: 0 }
h1, h2, h3, h4, h5, h6{
font-weight: bold;
}
ul{
padding: 0;
list-style-type: none;
}
a{
color: inherit;
text-decoration: none !important;
}
a:hover,
a:focus{
color: var(--first);
}
.td{ text-decoration: none !important; }
.fw1{ font-weight: 300; }
.fw2{ font-weight: 500; }
.fw3{ font-weight: 700; }
.fw4{ font-weight: 600; }
.fw5{ font-weight: 800; }
.us{ user-select:none; }
.pointer{ cursor:pointer; }
.inline{ display: inline-block; }
.flex{display: flex;}
.jc{ justify-content: center; }
.jcb{ justify-content: space-between; }
.jce{ justify-content: flex-end; }
.ai{ align-items: center; }
.fwrap{flex-wrap: wrap;}
.rel{ position: relative; }
.abs{ position: absolute; }
.trans{ transition:0.3s ease }
.fs10{ font-size: 10px }
.fs11{ font-size: 11px }
.fs12{ font-size: 12px }
.fs13{ font-size: 13px }
.fs14{ font-size: 14px }
.fs16{ font-size: 16px }
.fs17{ font-size: 17px }
.fs18{ font-size: 18px }
.fs19{ font-size: 19px }
.fs20{ font-size: 20px }
.fs22{ font-size: 22px }
.fs24{ font-size: 24px }
.fs26{ font-size: 26px }
.fs28{ font-size: 28px }
.fs15{ font-size: 15px }
.fs30{ font-size: 30px !important}
.fs40{ font-size: 40px !important}
.fs50{ font-size: 50px !important}
.fs45{ font-size: 45px !important}
.br100{ border-radius: 100px !important}
.br10{ border-radius: 10px }
.br5{ border-radius: 5px }
.m0{ margin: 0 !important}
.mb0{ margin-bottom: 0 }
.mt0{ margin-top: 0px }
.m10{margin: 10px 0;}
.m15{margin: 15px 0;}
.m20{margin: 20px 0;}
.mt5{ margin-top: 5px }
.mt10{ margin-top: 10px }
.mt15{ margin-top: 15px }
.mt20{ margin-top: 20px }
.mb5{ margin-bottom: 5px }
.mb10{ margin-bottom: 10px }
.mb15{ margin-bottom: 15px }
.mb20{ margin-bottom: 20px }
.mr5{ margin-right: 5px }
.mr10{ margin-right: 10px }
.mr15{ margin-right: 15px }
.mr20{ margin-right: 20px }
.mb30{ margin-bottom: 30px }
.mb40{ margin-bottom: 40px }
.mt30{ margin-top:30px }
.mt35{ margin-top:35px }
.mt40{ margin-top:40px }
.mt45{ margin-top:45px }
.mt50{ margin-top:50px }
.mb30{ margin-bottom:30px }
.mb40{ margin-bottom:40px }
.mb50{ margin-bottom:50px }
.pt0{ padding-top: 0 }
.ml5{ margin-left: 5px !important }
.ml10{ margin-left: 10px !important }
.ml15{ margin-left: 15px !important }
.ml20{ margin-left: 20px !important }
.ml5{ margin-left: 5px !important }
.ml10{ margin-left: 10px !important }
.ml20{ margin-left: 20px !important }
:root{
--first: #ffbf00;
--second: #8BC34A;
--third: #1aaf1a;
--four: #D81B60;
--five: #1E88E5;
}
.cwhite{ color: white !important; }
.cfirst{ color: var(--first); }
.csecond{ color:var(--second) }
.cfirst2{
color: #bf9004;
}
.w100{ width: 100%; }
.ov{ overflow: hidden; }
.mainul{
display: flex;
justify-content: flex-end;
}
.header{position: relative;box-shadow: 0 8px 13px rgb(0 0 0 / 15%);z-index: 99;}
.logo-main{width: 176px;margin: 21px 0 0;}
.main-link{
display: block;
padding: 17px 19px;
border-right: 1px solid gainsboro;
color: #4f4f4f;
transition: 0.3s ease;
height: 100%;
}
.main-link:hover,
.main-link:focus{
background: #dfdfdf;
color: black;
}
.mainul LI{display: inline-block;margin: 0 -2px;vertical-align: bottom;}
.headIcon{
display: block;
font-size: 21px;
margin: auto;
text-align: center;
margin: 0 0 7px;
transition: 0.3s ease;
}
.main-link:hover .headIcon{
transform: translate(0, -6px);
}
.main-link span{
font-weight: 500;
display: flex;
align-items: center;
}
.headBtn{color: black;}
.logBtn{
background: #ebebeb;
}
.signBtn{
background: #d76700;
color: white;
}
.signBtn:hover,
.signBtn:focus{
background: #c99703;
color: white;
}
.homeSlider{
background-color: #ff7c00 !important;
padding: 100px 0;
color: white;
background: url(../img/sliderback.png) no-repeat;
background-size: cover;
overflow: hidden;
background-position: right;
}
.homeSlider .head{font-size: 62px;}
.homeSlider .desc{margin: 20px 0 50px;max-width: 500px;}
.btn1{background: #3a3a3a;color: white !important;border: none !important;outline: none !important;user-select: none;}
.btn1:hover,
.btn1:focus{background: #000000;color: white !important;}
.btn2{background: #ff6c00;color: rgb(88 37 22) !important;border: none !important;outline: none !important;font-weight: 500;}
.btn2:hover,
.btn2:focus{background: #ffefc1;color: rgb(88 37 22) !important;}
.hslidBtn{
padding: 18px 48px;
font-weight: 500;
font-size: 16px;
}
.hsBox{display: block;text-align: center;width: 260px;padding: 34px 20px;background: oklab(1 0 0 / 0.06);margin: 15px 15px;border-radius: 7px;border: 1px solid lch(90 24.46 81.79 / 0.56);border-bottom: 5px solid lch(90 24.46 81.79 / 0.56);font-size: 18px;transition: 0.3s ease;color: white !important;}
.header{
background: rgba(255,255,255,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(235,235,235,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(235,235,235,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(235,235,235,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(235,235,235,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(235,235,235,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(235,235,235,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ebebeb', GradientType=0 );
}
.hsBox img{height: 70px;display: block;margin: 0 auto 15px;transition: 0.25s ease;}
.hsBox:hover{
background: oklab(1 0 0 / 0.26);
box-shadow: 0 3px 15px hsl(0deg 0% 0% / 20%);
}
.homSlidFlex{
border-radius: 10px;
overflow: hidden;
}
.inflex{ display:inline-flex; }
.hsBox:hover img{
transform: translateY(-5px);
}
.homInfoBox{
background: #3a3a3a;
color: white;
padding: 19px 0;
}
.btnpad1{ padding:10px 20px !important}
.hsStats{margin: 36px 0 50px;}
.singleStat{border-right: 1px solid white;padding: 0 22px;}
.singleStat .val{
font-weight: 400;
font-size: 33px;
line-height: 1.2;
}
.singleStat .txt{
font-size: 17px;
}
.hsStats .singleStat:nth-child(1){
padding-left: 0;
}
.hsStats .singleStat:nth-last-child(1){
border: none;
}
.padder1{
padding: 20px 0px;
}
.bg1, .hsec1Box
{
background: rgba(242,239,237,1);
background: -moz-linear-gradient(left, rgba(242,239,237,1) 0%, rgba(235,233,232,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(242,239,237,1)), color-stop(100%, rgba(235,233,232,1)));
background: -webkit-linear-gradient(left, rgba(242,239,237,1) 0%, rgba(235,233,232,1) 100%);
background: -o-linear-gradient(left, rgba(242,239,237,1) 0%, rgba(235,233,232,1) 100%);
background: -ms-linear-gradient(left, rgba(242,239,237,1) 0%, rgba(235,233,232,1) 100%);
background: linear-gradient(to right, rgba(242,239,237,1) 0%, rgba(235,233,232,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2efed', endColorstr='#ebe9e8', GradientType=1 );
}
.cgray{ color: #545454 }
.hsec1Flex{
}
.hsec1Flex .hsec1Box{width: 440px;display: flex;padding: 17px 25px;font-size: 17px;align-items: center;margin: 24px 23px 0;border-radius: 7px;/* box-shadow: 0 2px 8px rgb(0 0 0 / 10%); */margin-left: 0;}
.hsec1Flex .fa-check{margin-right: 20px;border-radius: 100px;background: var(--first);width: 40px;height: 40px;justify-content: center;}
.lineBtn{
border-bottom: 1px solid;
padding-bottom: 3px;
}
.lineBtn:hover,
.lineBtn:focus{
color: #c39408;
}
.hsec2Box{text-align: center;background: white;padding: 40px 30px;border-radius: 7px;border: 2px solid transparent;transition: 0.3s ease;}
.hsec2Box .imgback{
}
.hsec2Box .imgback img{width: 70px;}
.hsec2Box h2{font-size: 21px;margin: 29px 0 10px;}
.hsec2Btn{
margin: 27px 0 0;
}
.hsec2Box:hover{
border: 2px solid var(--first);
}
.hsec2Box img{ transition:0.25s ease }
.hsec2Box:hover img{
transform: translateY(-10px);
}
.person1{
background: url(../img/person1.png) no-repeat;
background-size: contain;
width: 440px;
height: 350px;
position: absolute;
transform: translate(-30px, -5px);
}
.homRecCont{display: flex;width: 100%;align-items: center;}
.homRecCont .col1,
.homRecCont .col2,
.homRecCont .col3,
.homRecCont .col4,
.homRecCont .col5
{
margin-right: 25px;
}
.homRecCont .col1{width: 16%;}
.homRecCont .col2{width: 21%;}
.homRecCont .col3{width: 16%;}
.homRecCont .col4{width: 18%;}
.homRecCont .col5{width: 21%;}
.homRecCont .data{font-size: 15px;}
.homRecCont .status i{display: inline-flex;align-items: center;justify-content: center;background: var(--first);width: 23px;height: 23px;border-radius: 100px;margin-right: 11px;font-size: 12px;}
.homRecCont .status{
display: flex;
align-items: center;
}
/*
.homRecCont .status{
display: inline-block;
background: #ffe76f;
border-radius: 6px;
padding: 5px 12px;
font-size: 11px;
text-transform: uppercase;
font-weight: 500;
}
*/
.homRecCont .payImg{
width: 88px;
}
.homRecCont .head{
font-size: 14px;
margin: 0 0 14px;
padding: 8px 19px;
color: #545454;
background: rgb(220 220 220 / 39%);
border-radius: 7px;
display: flex !important;
align-items: center;
}
.tabecCont{
margin: 25px 0 0;
background: white;
padding: 40px 40px;
border-radius: 7px;
}
.tabRecRow{
padding: 16px 0;
border-bottom: 1px solid #e5e5e5;
padding-left: 18px;
}
.homRecCont div:nth-last-child(1){
margin-right: 0 !important;
}
.homRecCont .head i{margin-right: 9px;font-size: 16px;}
.tabecCont .homRecCont:nth-last-child(1){
margin-bottom: 0;
}
.tabecCont .tabRecRow:nth-last-child(1){
border: none;
}
.footer{background: #212121 url(../img/footerback.png) no-repeat;color: #ffffff;background-size: cover;padding: 50px 0;}
.footLogo{width: 190px;}
.footSocial a{font-size: 16px;width: 30px;height: 30px;border-radius: 100px;background: hsl(0deg 0% 50.2% / 14.9%);margin-right: 11px;align-items: center;justify-content: center;display: flex;transition: 0.3s ease;}
.footSocial a:hover,
.footSocial a:focus{
background: var(--first);
color: black;
}
.footLink a{
display: inline-block;
margin: 3px 0;
}
.footSocial{
}
.footer .head{
font-size: 19px;
font-weight: 600;
position: relative;
margin: 0 0 27px;
color: #ff7c00;
}
.footer .head::before{
content: "";
display: block;
position: absolute;
width: 60px;
height: 2px;
background: #ff7c00;
bottom: -5px;
}
.paymentsFoot{margin: 40px 0 0;}
.paymentsFoot .cont{background: #3a3a3a;border-radius: 6px;display: inline-flex;align-items: center;justify-content: center;padding: 7px 10px;margin: 0 11px 12px 0;opacity: 0.8;}
.paymentsFoot img{
height: 18px;
}
.btFoot, .bg2{
background: #ff7c00;
}
.block1{background: white;padding: 40px 40px;border-radius: 7px;}
.block2{background: #f1f1f1;padding: 30px 30px;border-radius: 7px;border: 1px solid lightgrey;}
.contLbl{
}
.inpCont{display: block;width: 100%;padding: 12px 13px;outline: none !important;border: 2px solid #dbdbdb;border-radius: 5px;transition: 0.3s ease;margin: 0 0 24px;padding-left: 45px;}
.textarea1{
max-width: 100%;
min-width: 100%;
min-height: 150px;
max-height: 500px;
}
.contactBlock{
}
.contBtn{
padding: 14px 40px;
max-width: 170px;
width: 100%;
}
.inpCont:hover,
.inpCont:focus{
border-color: var(--first);
}
.inpBack{
position: relative;
}
.inpBack i{position: absolute;top: 20px;left: 19px;color: gray;}
.sticky{
position: sticky;
top: 20px;
}
.contSpecBox{
padding: 40px 40px;
background: #fff7de url(../img/btcimg1.png) no-repeat;
margin-left: 30px;
border-radius: 7px;
border: 1px solid #eacf7d;
background-size: 280px;
transition: 0.3s ease;
background-position: 363px 186px;
}
.contSpecBox:hover{
background-position: 343px 166px;
}
.arrowList{
}
.arrowList li{
background: url(../img/arrow1.png) no-repeat 0;
background-size: 21px;
padding: 10px 0;
padding-left: 35px;
}
.moneySlider{
background: url(../img/moneySlider.png) no-repeat 0;
background-size: contain;
width: 660px;
height: 510px;
left: -10px;
top: 54px;
}
.dropdownLi{
position: relative;
}
.dropdownUl {
position: absolute;
background: white;
display: flex;
flex-wrap: wrap;
width: 220px;
border-radius: 7px;
transform: translate(0px, 10px);
z-index: 9;
padding: 10px 0;
box-shadow: 0 5px 7px hsl(19.53deg 100% 16.86% / 18%);
overflow: hidden;
display: none;
}
.dropdownUl a{display: flex;align-items: center;padding: 9px 20px;transition: 0.3s ease;width: 100%;color: #545454;}
.dropdownUl img{height: 19px;margin-right: 12px;}
.dropdownUl li{
width: 100%;
}
.dropdownUl a:hover,
.dropdownUl a:focus{
background: #dfdcdc;
color: #2c2c2c;
}
.copyFoot{
background: #202020;
padding: 10px 0;
color: #898989;
border-top: 1px solid #3c3c3c;
}
.paymentsFoot .cont:hover{
opacity: 1;
}
.topHeadAdBox{
background: #3A3A3A;
padding: 12px 0;
}
.bars{
display: none;
z-index: 10;right: 20px;top: 20px;}
.bars span{
display: block;
width: 20px;
height: 2px;
background: #919191;
margin: 5px 0;
}
.tableBack{
overflow: auto;
padding-bottom: 12px;
}
.cgray2{
color: #a3a3a3;
}
.inp1{width: 100%;padding: 9px 10px;outline: none !important;border: 2px solid #e7e7e7;border-radius: 5px;margin: 0 0 18px;transition: 0.3s ease;}
.inp1:hover,
.inp1:focus{border: 2px solid var(--first);}
.btnpad2{
padding: 13px 10px;
}
.lbl1{
margin: 0 0 6px;
}
.form-check-input{
width: 21px;
height: 21px;
margin-right: 15px;
box-shadow: none !important
}
.form-check-input:checked[type=checkbox]{
background-color: var(--first);
border-color: var(--first) !important;
}
.bg3{
background: #e7e7e7;
}
.logSocialBtn{width: 100%;display: flex;align-items: center;justify-content: center;padding: 13px 13px;color: white !important;font-weight: 400;font-size: 15px;border-radius: 5px;transition: 0.3s ease;}
.social-fb{background: #385899;margin-right: 18px;}
.social-google{
background: #F20000;
}
.social-fb:hover{
background: #24417c;
}
.social-google:hover{background: #bf0303;}
.logregPage .block1{
border: 1px solid #dddddd;
box-shadow: 0 0 12px rgb(0 0 0 / 8%);
}
.logBtnPad{
padding: 12px 23px;
}
.underline{ text-decoration: underline !important; }
.ptcslider{padding: 70px 0;background: #d96400 url(../img/ptcback.png) no-repeat;background-size: cover;color: white;}
.ptcslider h2{
font-size: 56px;
line-height: 1.25;
}
.ptcslider .desc{
margin: 20px 0 40px;
}
.ptcimg1{
background: url(../img/ptcimg1.png) no-repeat;
height: 113px;
width: 100%;
background-size: contain;
max-width: 394px;
}
.ptcsliderimg{
background: url(../img/ptcsliderimg.png) no-repeat;
height: 633px;
width: 560px;
background-size: contain;
transform: translate(-70px, -39px);
}
.partPtcBox{padding: 30px 0;}
.partPtcBox img{
height: 25px;
margin: 0 26px;
}
.ptcAdClickBox{background: rgb(245 145 51);padding: 14px 18px;border-radius: 12px;transform: translate(-121px, 50px);z-index: 1;}
.ptcAdClickBox .top{
}
.ptcAdClickBox .bottom{
font-size: 40px;
line-height: 1;
margin: 6px 0 0;
}
.ptcSec1Box1{background: var(--first);text-align: center;padding: 40px 30px;border-radius: 10px;}
.ptcSec1Box1 a{
background: white;
padding: 9px 20px;
border-radius: 100px;
}
.ptcSec1Box1 p{
margin: 10px 0 40px;
}
.ptcSec1Box1 a:hover{
background: #c97b07;
color: white !important;
}
.ptcS1RightBox{margin: 0px 0px -10px;padding: 30px 29px;border-radius: 8px;margin-left: 10px;}
.ptcS1RightBox .imgBack{margin-right: 22px;transform: translate(0, 4px);}
.ptcS1RightBox .imgBack img{width: 33px;}
.ptcS1RightBox .head{
font-size: 17px;
font-weight: 500;
}
.ptcS1RightBox .desc{
color: #8d8d8d;
margin: 11px 0 0;
}
.ptcStatLand{padding: 22px 0 0;border-top: 2px solid gainsboro;}
.ptcStatLand .head1{
font-size: 15px;
font-weight: 400;
}
.ptcStatLand .data{
font-size: 25px;
margin: 8px 0 0;
}
.ptcSec2Box{padding: 40px 50px;background: white;border-radius: 8px;margin: 0 14px;}
.ptcSec2Box .head{
font-size: 32px;
}
.ptcSec2Box p{
margin: 10px 0 40px;
max-width: 390px;
}
.ptcSec2Box .btnpad1{
padding: 11px 40px;
}
.ptcSec2Box2{
background: #ffbf00;
}
.ptcSec2{
background: #ff7c00 url(../img/emonback.png) no-repeat center;
background-size: cover;
}
.acccDropdowb{
}
.ofop{
object-fit: cover;
object-position: center;
}
.cgreen{ color: var(--third) }
.cred{color: #fb3838;}
.userTopImg{
width: 40px;
height: 40px;
}
.accIconDown{
right: -13px;
top: 23px;
background: #f6f6f6;
padding: 6px;
border: 1px solid #cbcbcb;
border-radius: 100px;
color: darkgrey;
font-size: 9px;
}
.sidebarUl {
list-style: none;
padding: 0;
margin: 0;
background: #fff;
border-radius: 0px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
overflow: hidden;
}
.sidebarUl li {
border-bottom: 1px solid #ececec;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
}
.sidebarUl a {
display: block;
padding: 13px 22px;
color: #444;
width: 100%;
font-size: 15px;
font-weight: 500;
text-decoration: none;
transition: all 0.3s ease;
}
.sidebarUl li:hover {
background: linear-gradient(90deg, #f8f8f8 0%, #f1f1f1 100%);
transform: translateX(3px);
}
.sidebarUl a:hover {
color: #007bff;
}
/* Active State (Optional) */
.sidebarUl li.active a {
color: #007bff;
font-weight: 600;
background: linear-gradient(90deg, #e9f2ff 0%, #d7e9ff 100%);
border-left: 4px solid #007bff;
}
.sidebarUl .head {
font-weight: 700;
font-size: 17px;
margin: 25px 0 10px;
padding: 0 15px;
color: #333;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.leftSidebarCont{
background: white;
padding: 28px 20px;
border-radius: 7px;
border: 1px solid #d7d7d7;
transition: 0.3s ease;
}
.mt0{ margin-top:0 !important }
.adStatMenu{
}
.adStatMenu span{
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 20px;
background: #646464;
border-radius: 7px;
color: white;
margin: 0 2px;
}
.bggreen{
background: var(--third) !important;
}
.bgorange{
background: var(--first) !important;
}
.accRightCont{
background: white;
padding: 20px 20px;
border-radius: 7px;
border: 1px solid #d7d7d7;
border-bottom: 3px solid #e31100;
}
.accProfLeftFlex img{
width: 50px;
height: 50px;
border-radius: 11px;
margin-right: 17px;
}
.sideBtn1{
padding: 9px 11px;
border-radius: 5px;
}
.btn3{
background: #d93939;
color: white !important;
user-select: none;
outline: none;
border: none !important;
}
.btn3:hover,
.btn3:focus{
background: #bf1616;
}
.btn4{border: 1px solid;padding: 3px 11px;border-radius: 25px;background: transparent;}
.btn4:hover,
.btn4:focus{
color: gray;
}
.widget-head{font-size: 19px;border-bottom: 1px solid gainsboro;padding-bottom: 12px;}
.accFlxStat{margin: 30px 0 0;}
.accFlxStat img{width: 50px;margin-right: 15px;}
.accFlxStat .txt1{
}
.accFlxStat .val{
font-size: 22px;
font-weight: 500;
margin: 0 0 11px;
}
.staMiniLink{
font-size: 13px;
color: gray;
}
.h100{
height: 100%;
}
.table tr:hover{
background: #f1f1f1;
}
.table th,
.table th p
{
font-weight: 500;
padding: 9px 4px 6px;
}
.table td,
.table td p
{
font-weight: 400;
font-size: 14px;
}
.memberAccBox{
font-size: 13px;
padding: 2px 7px;
border-radius: 100px;
}
.mem-basic{
background: #dddddd;
}
.mem-one{
background: #ffec67;
}
.mem-two{
background: #83ffba;
}
.mem-three{
background: #714eff;
color: white;
}
.statFlex1{
padding: 10px 0;
border-bottom: 1px solid gainsboro;
}
.tag{
background: #6c6c6c;
padding: 2px 9px;
font-size: 13px;
color: white !important;
border-radius: 100px;
}
.tag1{background: #dbad05;}
.accRightCont .statFlex1:nth-last-child(1) {
border: none;
}
.summflag1{
width: 22px;
margin-right: 7px;
}
.sidebar-head{
width: 100%;
margin: 20px 0 15px;
padding: 14px 28px;
font-size: 18px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #fff;
background: linear-gradient(90deg, #4b3821 0%, #834302 100%);
border: none;
border-radius: 0px;
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: space-between;
cursor: default;
}
.sideUYserBack{text-align: center;}
.personsideimg{height: 90px;width: 90px;border-radius: 100px;}
.sideUYserBack .head{font-size: 21px;margin: 22px 0 11px;font-weight: 500;}
.sideUYserBack .mail{
color: #a7a7a7;
font-style: bold;
font: -webkit-control;
}
.dashflexTop1 i{background: #ece9e8;height: 50px;font-size: 24px;width: 52px;border-radius: 7px;color: #4a4a4a;}
.sidebarUl li:nth-last-child(1) {
border: none !important;
}
.sidebarUl a:hover{
color: black;
}
.sidebarUl .amt{display: flex;align-items: center;justify-content: center;width: 27px;height: 22px;background: #646464;border-radius: 100px;color: white !important;padding: 0;margin: 0 2px;margin-right: 15px;}
.sidebarUl li:hover{
background: #e7e7e7;
}
.sticky{
position: sticky;
top: 20px;
}
.menuMobBack{
display: none;
padding: 12px 23px;
background: white;
margin: 0 0 20px;
color: gray;
}
.sidebarLogo{width: 150px;}
.sideBarCloseBtn{
font-size: 18px;
color: #979797;
padding: 23px;
background: gainsboro;
}
.mobSideTop{
padding-left: 15px;
display: none;
}
.mobDashMenu-show{
left: 0 !important;
}
.padder2{
padding: 50px 0px;
}
.padder3{
padding: 30px 0px;
}
.headTaolLeft{padding: 40px 20px;background: #edebe9;text-align: center;border-radius: 9px;min-height: 350px;}
.headtailcoin{
background: url(../img/headtailcoin.png) no-repeat;
background-size: contain;
height: 200px;
width: 200px;
margin: 0 0 20px;
}
.coinflipmaintxt{
font-weight: bold;
font-size: 37px;
color: #ffe67c;
text-shadow: 0 2px #c97212;
user-select: none;
}
.headtailcoin-flip{
transform: rotateX(0deg);
animation-name: headtailcoin-flip;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-duration: 1s;
}
@keyframes headtailcoin-flip{
0% {
transform: rotateX(0deg);
}
50% {
transform: rotateX(360deg);
}
100% {
transform: rotateX(0deg);
}
}
.coinHtOpt{
background: url(../img/headtailcoin.png) no-repeat;
background-size: contain;
height: 80px;
width: 80px;
margin: auto;
}
.coinHtOpt span{color: white;font-size: 31px;font-weight: 800;text-shadow: 0 2px #874702;}
.coinHBack .txt2{font-size: 16px;margin: 11px 0 0;font-weight: 400;color: #c18414;}
.coinHBack{
text-align: center;
padding: 30px 40px;
border: 2px dashed #e7e7e7;
border-radius: 7px;
cursor: pointer;
user-select: none;
width: 100%;
}
.coinFlipWonTxt{
font-weight: bold;
font-size: 27px;
display: none;
}
.wonFlipTxt{
color: orange;
}
.loseFliptxt{
color: #ff4141;
}
.coinHBack:hover, .coinHBack-active
{
border: 2px solid #ffbf00;
}
.flipScreen ,.flipcoinscreen
{ display: none }
.htarrow{
height: 20px;
opacity: 0.5;
margin: 40px 0 0;
animation-name: htarrow;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease;
}
@keyframes htarrow{
0% {
transform: translate(-20px, 0px);
}
50% {
transform: translate(20px, 0px);
}
100% {
transform: translate(-20px, 0px);
}
}
.selectScreen, .flipcoinscreen
{
padding: 0 50px;
}
.flipanimsample{
transform: rotate(270deg);
width: 100px;
margin: 0 0 20px;
}
.flipCoinBtn{border: 1px solid #ff6a00;padding: 6px 0;background: var(--first);color: #af3f09;transition: 0.25s ease;}
.flipCoinBtn:hover,
.flipCoinBtn:focus{
background: #dda90d;
}
.flipCoinBtn:disabled{background: #efefef;border: 1px solid #cfcfcf;color: #bfbfbf;}
.disableFlip{
display: none;
background: white;
height: 100%;
width: 100%;
left: 0;
top: 0;
z-index: 999;
opacity: 0.4;
}
.coinflipmaintxt{
display: none;
}
.offerBack{background: #ebe9e896;padding: 17px 17px;border-radius: 6px;border: 1px solid lightgrey;margin: 20px 0 0;}
.offerBack img{
}
.offerBtn{
text-align: center;
background: #ff8100;
padding: 8px 4px;
color: white !important;
transition: 0.3s ease;
}
.offerBtn:hover{
background: black !important;
}
.iframeOffers{
width: 100%;
height: 760px;
}
.iframeLink{
display: none;
}
#iframeBlock{
display: none;
}
.clixgridBack{
}
.clixgridCont{display: flex;flex-wrap: wrap;width: 70%;background: url(../img/clixgridback1.jpg);background-size: cover;background-position: center;border: 1px solid #b9b9b9;}
.clixgridbox{
width: 5%;
height: 30px;
border: 1px solid hsl(0deg 0% 0% / 17%);
}
.clixgridbox:hover{
background: rgb(255 255 255 / 43%);
}
.cgblock2{
padding: 25px 20px;
width: 28%;
}
.cgflexouter .visited{
background: #0003;
}
.cgshareopt{
padding: 20px 0 0;
border-top: 2px solid gainsboro;
margin: 20px 0 0;
}
.cgshareopt .flex a{
display: flex;
align-items: center;
justify-content: center;
width: 29px;
height: 29px;
border-radius: 100px;
border: 1px solid black;
margin-left: 13px;
}
.cgshareopt .flex a:hover{
background: var(--first);
color: black!important;
}
.vaultimg{
background: url(../img/vaultimg.png) no-repeat;
background-size: contain;
width: 100%;
height: 320px;
}
.vaultPad{
}
.vaultblock{background: #43464b url(../img/ironbg.jpg);color: white;padding: 30px 48px;border-radius: 6px;background-size: cover;}
.vaultInp:disabled,
.vaultInp
{
width: 100%;
padding: 0 20px;
font-size: 40px;
text-align: center;
border: none !important;
outline: none !important;
border-radius: 7px;
letter-spacing: 10px;
margin: 14px 0 30px;
opacity: 1 !important;
background: #919191 !important;
}
.vaultnmbrBack{
}
.vaultnmbrBack .nmbr{
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
font-size: 22px;
background: white;
color: black;
margin: 7px 7px;
border-radius: 4px;
cursor: pointer;
box-shadow: inset 0 0px 6px black, 0 2px 0 #1e1e1e;
}
.vault2back{
background: url(../img/vault1.png) no-repeat;
background-size: contain;
width: 360px;
height: 300px;
margin: auto;
}
.vaultHandle{
background: url(../img/vaulthandle.png) no-repeat;
background-size: contain;
width: 70px;
height: 70px;
left: 60px;
top: 60px;
}
.vaultinp1{
width: 100%;
text-align: center;
cursor: pointer;
padding: 9px 10px;
font-size: 21px;
border: none;
outline: none;
background: #ededed;
border-radius: 7px;
margin: 0 4px;
color: #2a2a2a;
background: rgba(255,255,255,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(176,176,176,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(176,176,176,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(176,176,176,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(176,176,176,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(176,176,176,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(176,176,176,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#b0b0b0', GradientType=0 );
}
.vaultinp1:hover{
background: #bfbfbf;
}
.vaultselBack{
padding: 0 58px;
position: absolute;
bottom: 90px;
width: 100%;
}
.crackBtn{
right: 60px;
top: 72px;
font-size: 17px;
padding: 5px 18px;
border: none;
outline: none !important;
background: #38ab94;
color: white;
border-radius: 6px;
}
.crackBtn:hover{
background: #1e8772;
}
.handleAnimate{
animation-name: handleAnimate;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 5s;
}
@keyframes handleAnimate{
0% {
transform: rotate(0);
}
50% {
transform: rotate(345deg);
}
100% {
transform: rotate(0);
}
}
.giftsBack{
background: url(../img/giftback.png);
background-size: contain;
background-color: purple;
color: white;
}
.mjback{
}
.advertSlider{
min-height: 560px;
background: gainsboro url(../img/advslidback.png) no-repeat;
background-size: cover;
background-position: center;
}
.advertSlider .inner{
padding: 40px 48px;
background: rgb(42 41 41 / 85%);
border-bottom: 7px solid var(--first);
box-shadow: 0 0 42px rgb(0 0 0 / 20%);
color: white;
}
.ptcAdSlidBtn{
padding: 15px 23px;
}
.advSlidSelect{
padding: 14px 19px;
border: none;
margin: 10px 0 20px;
border: 1px solid #cbcbcb;
outline: none !important;
}
.advSlidSelect:focus{
border: 1px solid var(--first);;
}
.grad1{
background: rgba(255,255,255,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(235,235,235,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(235,235,235,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(235,235,235,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(235,235,235,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(235,235,235,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(235,235,235,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ebebeb', GradientType=0 );
}
.advbox1{padding: 21px 15px;background: rgb(82 106 118 / 8%);border: 1px solid hsl(0deg 0% 77.25%);border-radius: 7px;padding-left: 30px;margin: 20px 0 0;}
.widget-head2{
background: #3A3A3A;
border-radius: 8px;
padding: 13px 21px;
font-size: 22px;
font-weight: 500;
color: #e9e9e9;
}
.advImg1{width: 60px;transition: 0.3s ease;margin-right: 26px;}
.advbox1 .head{
font-size: 18px;
margin: 0 0 15px;
font-weight: 500;
}
.advbox1 .desc{
color: #a3a3a3;
font-size: 13px;
max-width: 250px;
}
.advInp2{
padding: 9px 8px;
margin: 0 0 11px;
outline: none !important;
}
.btnpad3{
padding: 8px 10px;
}
.advbox1:hover .advImg1{
transform: translate(6px, -0px);
}
select{
background-image: url(../img/selectArrow.png);
background-size: 11px;
background-repeat: no-repeat;
background-position: 95%;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}
.widget-head3{
background: #e7e7e7;
border-radius: 8px;
padding: 13px 21px;
font-size: 19px;
font-weight: 500;
color: #2c2c2c;
}
.block3{
background: white;
padding: 19px;
border-radius: 6px;
}
/* PTC Ads start */
.ptcBox{
display: flex;
padding: 14px 18px;
border: 1px solid #dfdfdf;
border-bottom: 3px solid #dfdfdf;
border-radius: 7px;
margin: 0 0 20px;
justify-content: space-between;
transition: 0.25s ease;
}
.ptcBox .img1{
height: 36px;
width: 100%;
margin: 3px 0 0;
filter: grayscale(1);
object-fit: contain;
}
.ptcBox .img1:hover{
filter: none;
}
.ptcBox .title{
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 15px;
font-weight: 500;
color: #303030;
}
.ptcBox .flex{
align-items: center;
}
.ptcBox .desc{
font-size: 12px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2; /* number of lines to show */
line-clamp: 2;
-webkit-box-orient: vertical;
color: #a3a3a3;
padding-right:3px;
}
.ptcBox .amtBack{
background: #4CAF50;
border-radius: 6px;
color: white;
align-items: center;
justify-content: center;
height: 31px;
display: flex;
padding-right:8px;
padding-left:8px;
}
.ptcBox .coin11{
height: 13px;
}
.ptcBox .time{text-align: right;margin: 12px 0 0;}
.ptcBox .inner1{
width: 56px;
margin-right: 18px;
}
.ptcBox .cont1{
}
.ptcBox:hover{
background: #e7e7e7;
}
.ptcvisited{
opacity: 0.5 !important;
background: white !important;
}
.ptcvisited .amtBack{
background: #d3d3d3 !important;
color: #4c4c4c;
}
.fixedPtcCont .amtBack{background: var(--first);color: black;}
.fixedPtcCont .img1{
filter: none;
}
.ptcvisited .img1{
filter: grayscale(1) !important;
}
.adStyle2 .amtBack{background: var(--four);}
.adStyle2 .img1{
filter: grayscale(1);
}
.adStyle2 .coin11{
-webkit-filter: invert(100%);
filter: invert(100%);
}
.adStyle3 .amtBack{background: var(--five);}
.adStyle3 .img1{
filter: grayscale(1);
}
.adStyle3 .coin11{
-webkit-filter: invert(100%);
filter: invert(100%);
}
/* PTC Ads end */
/*........................micro jobs Single start......................*/
.microjobSingle{
}
.microjobSingle .head1{
font-size: 25px;
font-weight: 400;
}
.microjobSingle .desc{
font-size: 15px;
background: #f4f4f4;
margin: 22px -30px;
padding: 40px 30px;
}
.microjobSingle .status{
background: gainsboro;
margin: 3px 0 0;
padding: 4px 10px;
border-radius: 4px;
font-size: 14px;
color: #525050;
margin-left: 10px;
height: 30px;
}
.mjviewFlex1{margin: 20px 0 0;}
.mjviewFlex1 .flex{
margin-right: 30px;
background: #ededed;
padding: 5px 8px;
color: #424242;
border-radius: 5px;
}
.mjviewFlex1 i{
margin-right: 9px;
}
.mjBtn{
padding: 15px 26px;
font-size: 15px;
border-radius: 5px;
font-weight: 500;
background: #4caf50;
color: white !important;
user-select: none;
border: none !important;
outline: none;
padding-left: 20px;
}
.mjBtn:hover{
background: #3c973f;
}
.mjsocial{
display: flex;
}
.mjsocial a{display: flex;align-items: center;justify-content: center;width: 26px;height: 26px;border-radius: 100px;margin-right: 7px;background: #e5e5e5;color: #424242;}
.mjsocial i{
margin: 0 !important;
}
.mjsocial a:hover{
background: var(--first);
color: black !important;
}
.mjviewCommBox{padding: 30px 30px;background: #f4f4f4;margin: 25px 0 0;border-radius: 8px;}
.mjvTxtarea{
margin: 9px 0 10px;
padding: 20px 20px;
max-width: 100%;
min-width: 100px;
min-height: 180px;
max-height: 400px;
outline: none;
border: 1px solid #d9d9d9 !important;
border: none;
border-left: 5px solid gainsboro !important;
transition: 0.3s ease;
}
.mjvTxtarea:focus{
border: 1px solid #4caf50 !important;
border-left: 5px solid #4caf50 !important;
}
.completeBtn{
background: #4caf50;
padding: 10px 20px;
border-radius: 7px;
color: white;
font-weight: 500;
}
.completeBtn-active{background: #b3b3b3 !important;cursor: no-drop;}
.mjvamt{color: #4caf50;}
.completeBtn:hover{
background: #329136;
}
.overtxt{
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
/*.......................micro jobs Single end.................... */
/*......................play games start..........................*/
.gameTopBox{
overflow: hidden;
border-radius: 9px;
height: 410px;
display: block;
position: relative;
}
.gamethumb1{width: 100%;height: 100%;transition: 0.3s ease;}
.gamebtn1{
background: #4CAF50;
padding: 12px 26px;
border-radius: 100px;
font-size: 15px;
font-weight: 500;
color: white !important;
transition: 0.25s ease;
}
.game1inner{bottom: 0;left: 0;right: 0;margin: auto;display: inline-block;color: white;background: #000000bf;padding: 110px 30px 30px;}
.game1Head{
font-size: 25px;
}
.gameicon1{
position: absolute;
right: 40px;
top: -30px;
width: 120px;
border-radius: 10px;
}
.game1inner{
background: rgba(0,0,0,0);
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.82) 78%, rgba(0,0,0,0.82) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(78%, rgba(0,0,0,0.82)), color-stop(100%, rgba(0,0,0,0.82)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.82) 78%, rgba(0,0,0,0.82) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.82) 78%, rgba(0,0,0,0.82) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.82) 78%, rgba(0,0,0,0.82) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.82) 78%, rgba(0,0,0,0.82) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
}
.gamebtn1:hover,
.gamebtn1:focus{
background: #2a8d2e;
}
.gameTopBox:hover .gamethumb1{
transform: scale(1.05);
}
.gameSearBack{}
.gamesearInp{border: none;outline: none;font-size: 15px;padding: 0 19px;width: 280px;border: 1px solid #d93939;border-radius: 100px;margin-right: 12px;}
.gamesearInp:hover,
.gamesearInp:focus{
}
.gameserBtn{border-radius: 100px;border: none;outline: none;padding: 8px 20px;}
.morgamBox{position: relative;text-align: center;margin: 20px 0 0;background: #e7e7e7;border-radius: 8px;overflow: hidden;width: 100%;}
.mgthumb{height: 160px;transition: 0.3s ease;}
.mgname{color: #3e3e3e !important;font-weight: 400;}
.mgInner{padding: 11px 12px;padding-left: 17px;}
.moreGamBtn{
background: #4caf50;
color: white !important;
border-radius: 5px;
padding: 2px 8px;
}
.pagination{background: #e7e7e7;padding: 10px;border-radius: 7px;}
.pagination a{font-size: 14px;display: flex;align-items: center;justify-content: center;padding: 6px 11px;background: white;border-radius: 60px;margin-right: 10px;color: #4a4a4a;}
.pagination a:hover{
background: #cfcfcf;
color: #141414;
}
.pagination .current{
background: var(--first) !important;
color: white !important;
}
.morgamBox:hover img{
transform: scale(1.1);
}
.moreGamBtn:hover{
background: #2a8d2e;
}
.morgamBox:hover{
background: #ddd9d9;
}
.gamecatsearch{
width: 170px;
}
/*....................play games end....................*/
/*....................game single start...................... */
.gameFrame{
width: 100%;
height: 460px;
}
.gamecontrolBack{
}
.gameright .cont{
padding: 5px 10px;
text-align: center;
background: white;
border-radius: 5px;
user-select: none;
cursor: pointer;
border-radius: 6px;
margin-left: 7px;
color: #727272;
}
.gameright .cont p{
font-size: 12px;
}
.gameright .cont:hover{
color: black;
}
.gameBox2{height: 100px;display: block;margin: 20px 0 0;border-radius: 7px;overflow: hidden;}
.gameBox2 .thumb1{
width: 100%;
height: 100%;
}
.gameBox2 .name{
bottom: 0;
z-index: 1;
width: 100%;
color: white;
text-align: center;
padding: 22px 0 8px;
opacity: 0;
transition: 0.3s ease;
}
.gameBox2:hover .name{
opacity: 1;
}
.gameBox2 .name{
background: rgba(0,0,0,0);
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.71) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.71)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.71) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.71) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.71) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.71) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
}
/*.................game single end.........................*/
/*................micro jobs (START)......................*/
/* micro jobs start */
.microjobBox {
display: block;
border: 1px solid #e0e0e0;
border-bottom: 3px solid #e0e0e0;
border-radius: 10px;
margin: 0 0 20px;
transition: all 0.3s ease;
overflow: hidden;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.microjobBox .inner1 {
border-bottom: 1px solid #ddd;
padding: 13px 20px !important;
background: #fafafa;
}
.microjobBox .inner {
padding: 20px;
}
.microjobBox .cat {
background: #f1f3f4;
color: #555;
padding: 4px 10px;
border-radius: 6px;
font-weight: 500;
font-size: 13px;
display: inline-block;
transition: 0.25s ease;
}
.microjobBox:hover .cat {
background: #4caf50;
color: #fff;
}
.microjobBox .title {
font-size: 19px;
margin: 0 0 12px;
color: #2e2e2e;
font-weight: 600;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
transition: color 0.25s ease;
}
.microjobBox:hover .title {
color: #4caf50;
}
.microjobBox .desc {
font-size: 13px;
margin: 0 0 18px;
color: #888;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
}
.microjobBox .amtBackb {
font-size: 16px;
background: #4caf50;
color: #fff;
padding: 4px 10px;
border-radius: 6px;
display: inline-flex;
align-items: center;
transition: 0.25s ease;
}
.microjobBox .amtBackb img {
width: 18px;
margin-right: 8px;
}
.microjobBox .amtBackb:hover {
background: #43a047;
transform: scale(1.05);
}
.microjobBox .posted {
margin: 20px 0 0;
color: #a3a3a3;
display: flex;
align-items: center;
}
.microjobBox .posted img {
border-radius: 50%;
width: 26px;
height: 26px;
margin-right: 8px;
object-fit: cover;
}
.microjobIcon {
font-size: 110px;
top: 78%;
left: 57%;
opacity: 0.08;
user-select: none;
color: black !important;
transition: all 0.3s ease;
position: absolute;
pointer-events: none;
}
.microjobBox:hover .microjobIcon {
transform: translateY(-15px);
opacity: 0.2;
}
.microjobBox:hover,
.microjobBox:focus {
border-color: #4caf50;
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.15);
}
.micjobVisited {
opacity: 0.6;
}
.micjobVisited .amtBackb {
background: #dcdcdc !important;
color: gray;
}
.micjobVisited .inner1 img {
filter: grayscale(1);
}
.micjobVisited .microjobIcon {
transform: none !important;
opacity: 0.12 !important;
}
/* micro jobs end */
/*................micro jobs (END)......................*/
/*................dashlbl1 (START)......................*/
/* ===========================
DASHBOARD INPUT & PROFILE STYLES (Premium)
=========================== */
.dashlbl1 {
margin: 0 0 5px;
font-weight: 500;
color: #6c6c6c;
font-size: 14px;
}
/* Input Field */
.dashinp1 {
width: 100%;
padding: 10px 12px;
border: 1px solid #cdcdcd;
outline: none !important;
border-radius: 6px;
margin: 0 0 20px;
background-color: #fafafa;
color: #333;
font-size: 15px;
background-position: 96%;
background-size: 8px;
transition: all 0.25s ease;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}
/* Input Hover / Focus */
.dashinp1:hover,
.dashinp1:focus {
border: 1px solid var(--first);
background-color: #fffef6;
box-shadow: 0 0 6px rgba(255, 190, 0, 0.2);
}
/* Profile Picture Section */
.dashppFlex {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.dashppFlex img {
width: 86px;
height: 86px;
border-radius: 10px;
border: 2px solid #ffbe00;
padding: 3px;
background: linear-gradient(145deg, #fff, #fffae5);
transition: all 0.25s ease;
}
.dashppFlex img:hover {
transform: scale(1.05);
box-shadow: 0 2px 10px rgba(255, 190, 0, 0.3);
}
/* Divider Line */
.hr1 {
opacity: 0.15;
border: none;
border-top: 1px solid #ddd;
margin: 20px 0;
}
/* Tabs Background */
.profTabBack {
overflow: hidden;
border-radius: 8px;
background: #f4f4f4;
border: 1px solid #e0e0e0;
display: inline-flex;
}
.profTabBack span {
background: #ebebec;
padding: 9px 16px;
cursor: pointer;
user-select: none;
transition: all 0.25s ease;
color: #6d6d6d;
font-weight: 500;
font-size: 14px;
}
.profTabBack span:hover {
background: #e2e2e2;
color: #222;
}
/* Active Tab */
.profTabBack .active {
background: linear-gradient(90deg, #ffbe00, #d06602);
color: #fff !important;
font-weight: 600;
box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.1);
}
/* Textarea */
.textarea1 {
max-width: 100%;
min-width: 100%;
min-height: 120px;
max-height: 500px;
padding: 12px 14px;
border: 1px solid #cdcdcd;
border-radius: 6px;
background-color: #fafafa;
font-size: 15px;
color: #333;
transition: 0.25s ease;
resize: vertical;
}
.textarea1:hover,
.textarea1:focus {
border: 1px solid var(--first);
background-color: #fffef6;
box-shadow: 0 0 6px rgba(255, 190, 0, 0.25);
}
/* Responsive */
@media (max-width: 600px) {
.dashppFlex img {
width: 70px;
height: 70px;
}
.dashinp1 {
font-size: 14px;
}
.profTabBack span {
padding: 8px 12px;
font-size: 13px;
}
}
/*................dashlbl1 (END)......................*/
/*................alerts (START)......................*/
/* ==========================================
ALERT BOX STYLES (Premium Version)
==========================================*/
.alert {
padding: 11px 17px;
background-size: 16px;
background-repeat: no-repeat;
background-position: 11px 15px;
padding-left: 39px;
border-radius: 6px;
font-size: 15px;
font-weight: 500;
line-height: 1.5;
background-color: #fff;
transition: all 0.25s ease;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
/* INFO ALERT */
.alert-info {
color: #1c7688;
border: 1px solid #9fd3de;
background-image: url(../img/alert-info2.png);
background-color: #e8f8fb;
}
.alert-info:hover {
background-color: #def4f8;
border-color: #8fcad5;
}
/* PRIMARY ALERT */
.alert-primary {
color: #4f6fa0;
border: 1px solid #9bb9e7;
background-image: url(../img/alert-primary.png);
background-color: #eef4ff;
}
.alert-primary:hover {
background-color: #e3ecfc;
border-color: #84a7e3;
}
/* SECONDARY ALERT */
.alert-secondary {
color: #5f636b;
border: 1px solid #b9bcc4;
background-image: url(../img/alert-secondary.png);
background-color: #f6f7f9;
}
.alert-secondary:hover {
background-color: #eef0f3;
border-color: #aeb1b8;
}
/* DANGER ALERT */
.alert-danger {
color: #ae444d;
border: 1px solid #d9a3a8;
background-image: url(../img/alert-danger.png);
background-color: #fff2f3;
}
.alert-danger:hover {
background-color: #ffe8e9;
border-color: #ce9398;
}
/* WARNING ALERT */
.alert-warning {
color: #8d6b1a;
border: 1px solid #d8c077;
background-image: url(../img/alert-warning.png);
background-color: #fff8e5;
}
.alert-warning:hover {
background-color: #fff3d4;
border-color: #cdbd6c;
}
/* ==========================================
RESPONSIVE ENHANCEMENTS
==========================================*/
@media (max-width: 600px) {
.alert {
font-size: 14px;
padding: 10px 15px;
padding-left: 38px;
}
}
/* alerts end */
/*................alerts (END)......................*/
/*................badge (START)......................*/
/* badge start */
/* ===============================
BADGE STYLES
==================================*/
.badge {
padding: 8px 12px;
font-size: 13px !important;
font-weight: 500 !important;
border-radius: 6px;
display: inline-block;
line-height: 1;
text-transform: capitalize;
transition: all 0.25s ease;
}
/* Default badge colors */
.badge-info {
background: #e1e1e1;
color: #555;
}
.badge-primary {
background: #d9d9d9;
color: #444;
}
.badge-success {
background: #1aaf1a;
color: #fff;
box-shadow: 0 2px 6px rgba(26, 175, 26, 0.3);
}
.badge-danger {
background: #fb3838;
color: #fff;
box-shadow: 0 2px 6px rgba(251, 56, 56, 0.3);
}
.badge-warning {
background: #dfaf00;
color: #fff;
box-shadow: 0 2px 6px rgba(223, 175, 0, 0.3);
}
/* Hover Effects */
.badge:hover {
opacity: 0.9;
transform: translateY(-1px);
}
/* ===============================
AUTOFILL FIX
==================================*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border: 1px solid var(--first);
-webkit-text-fill-color: #000;
-webkit-box-shadow: 0 0 0px 1000px white inset;
transition: background-color 5000s ease-in-out 0s;
}
/* ===============================
PAGINATION STYLING
==================================*/
.pagination2 {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.pagination2 a {
border-radius: 50%;
border: 1px solid #bdbdbd;
color: gray;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
text-decoration: none;
background: #fff;
transition: all 0.25s ease;
}
.pagination2 a:hover {
border-color: #878787;
color: #000;
background: #f5f5f5;
transform: translateY(-1px);
}
.pagination2 .current {
background: var(--first);
color: #fff;
border-color: var(--first);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}
/* ===============================
TABLE ROW STYLING
==================================*/
.table tr:nth-child(odd) {
background: #f7f7f7;
}
.table tr:nth-child(even) {
background: #fff;
}
.table tr:hover {
background: #f0f0f0;
transition: background 0.2s ease;
}
/*................badge (END)......................*/
/*................depFlex (START)......................*/
/* ===============================
Deposit Section Styling
==================================*/
.depFlex {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.depFlex img {
height: 22px;
transition: transform 0.25s ease;
}
.depFlex img:hover {
transform: scale(1.1);
}
.depFlex input {
display: none;
}
.depFlex label {
padding: 10px 16px;
margin: 0 12px 13px 0;
border-radius: 8px;
border: 1px solid #dfdfdf;
cursor: pointer;
user-select: none;
background: #fff;
transition: all 0.3s ease;
}
.depFlex label:hover,
.debBtnactive {
background: #f5fff5;
border: 1px solid #4caf50 !important;
box-shadow: 0 0 6px rgba(76, 175, 80, 0.2);
}
/* ===============================
Button Styles
==================================*/
.btn5 {
background: #4caf50;
color: #fff !important;
border: none !important;
outline: none !important;
border-radius: 6px;
cursor: pointer;
font-weight: 500;
transition: background 0.3s ease;
}
.btn5:hover,
.btn5:focus {
background: #2e8b3a;
}
/* ===============================
Referral Link Box
==================================*/
.refLinkInp {
width: 100%;
padding: 10px 16px;
font-size: 16px;
background: none;
border: none;
color: #8b4d00;
}
.refLinkBox {
border-radius: 8px;
color: white;
overflow: hidden;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
text-align: center;
padding: 20px;
}
/* Gradient Background */
.refLinkBox, .grad3 {
background: linear-gradient(to bottom, rgba(230,192,39,1) 0%, rgba(248,80,50,1) 100%);
}
.refLinkBox .head {
font-size: 27px;
font-weight: 600;
}
/* Copy Button */
.copyLinkBtn {
background: #f3bc31;
padding: 9px 18px;
border: none;
outline: none;
margin: 6px;
border-radius: 6px;
font-weight: 600;
color: #fff;
transition: background 0.25s ease, transform 0.15s ease;
}
.copyLinkBtn:hover,
.copyLinkBtn:focus {
background: #e5ae23;
transform: translateY(-1px);
}
/* ===============================
Referral Link Display Area
==================================*/
.refLinkFlex {
border: 1px solid white;
margin: 20px 0 0;
color: orange;
max-width: 520px;
border-radius: 8px;
background: #ffe7c6;
box-shadow: 0 3px 12px rgba(163, 42, 10, 0.24);
padding: 16px;
}
/* Banner Link Input */
.rebBanLink {
width: 100%;
padding: 10px 13px;
border: 1px solid #c9c9c9;
background: #f3f3f3;
border-radius: 6px;
outline: none !important;
transition: border-color 0.2s ease;
}
.rebBanLink:focus {
border-color: #ff9800;
}
/* Referral Text Area */
.txtreflink {
max-width: 100%;
min-width: 100%;
max-height: 140px;
min-height: 90px;
overflow: hidden;
resize: none;
padding: 10px;
font-size: 15px;
border-radius: 6px;
border: 1px solid #e0e0e0;
background: #fffaf0;
}
/* ===============================
Registration Background
==================================*/
.regBack1 {
background: url(../img/regBack1.png) no-repeat center;
background-size: 170px;
padding: 43px 48px;
border-radius: 10px;
background-color: #fff;
}
/*................depFlex (END)......................*/
/*................megaphone1 (START)......................*/
/* Megaphone Icon */
.megaphone1 {
right: 100px;
width: 180px;
bottom: -40px;
filter: drop-shadow(0 4px 6px rgba(208, 102, 2, 0.3));
}
/* Membership Table Base */
.memtable {
width: 100%;
text-align: center;
background: #ffffff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(255, 190, 0, 0.15);
}
/* Membership Title */
.memtable .mname {
font-size: 23px;
margin: 0px 0 4px;
font-weight: 700;
color: #d06602;
}
.memtable .desc {
font-weight: 400;
color: #555;
}
/* Table Header */
.memtable .headRow th {
padding: 28px 10px;
background: linear-gradient(90deg, #ffbe00, #d06602);
color: white;
text-transform: uppercase;
letter-spacing: 0.5px;
border-right: 1px solid rgba(255, 255, 255, 0.25);
}
/* Text Columns */
.memtable .txt1 {
text-align: left;
display: flex;
align-items: center;
justify-content: space-between;
color: #333;
font-weight: 500;
}
.memtable .txt2 img {
height: 14px;
filter: brightness(1.1);
}
/* Price Section */
.mempriceBack {
padding: 34px 0;
background: #fffdf5;
}
.memtable td {
padding: 12px 24px;
border-right: 2px solid #efefef;
transition: background 0.3s ease;
}
.memtable td:hover {
background: rgba(255, 190, 0, 0.1);
}
/* Pricing Text */
.memtable .price {
font-size: 44px;
color: #d06602;
font-weight: 600;
}
.memtable .sign {
font-size: 26px;
margin-right: 7px;
color: #a3a3a3;
}
.memtable .amt {
font-size: 39px;
margin-right: 3px;
color: #393f4b;
}
.memtable .time {
font-size: 13px;
color: #6e6e6e;
}
/* Tags */
.memtable .tag {
border-radius: 5px;
margin: 10px 0 0;
display: inline-block;
color: #fff;
padding: 3px 10px;
font-size: 12px;
font-weight: 500;
}
.memtable .tag2 {
background: linear-gradient(90deg, #009688, #26a69a);
}
.memtable .tag3 {
background: linear-gradient(90deg, #ffbe00, #d06602);
}
.memtable .tag4 {
background: linear-gradient(90deg, #7e57c2, #5e35b1);
}
.memtable .tag5 {
background: linear-gradient(90deg, #c2185b, #e91e63);
}
/* Alternate Row Backgrounds */
.memtable tr:nth-child(odd) {
background: #fdf9ef;
}
/* Last Row */
.memtable tr:nth-last-child(1) {
background: #fff8e6;
border-top: 1px solid #d5d5d5;
}
.memtable tr:nth-last-child(1) td {
border-right: 2px solid rgba(0, 0, 0, 0.1);
}
/* Highlighted Column */
.memtable tr td:nth-child(4) {
border-right: 2px solid #ffbe00 !important;
border-left: 3px solid #ffbe00 !important;
background: rgba(255, 190, 2, 0.09);
font-weight: 600;
}
/* Info Tooltip */
.meminfoTop {
opacity: 0.25;
cursor: pointer;
user-select: none;
transition: 0.3s ease;
}
.meminfoTop:hover {
opacity: 0.6;
transform: scale(1.05);
}
.meminfobox {
width: 270px;
text-align: left;
background: #ffffff;
padding: 20px;
left: 95%;
top: 4px;
font-size: 13px;
border-radius: 10px;
border: 1px solid #ebebeb;
color: #747474;
display: none;
user-select: none;
box-shadow: 0 5px 15px rgba(255, 190, 0, 0.2);
}
/* Membership Button */
.memBtn1 {
padding: 10px 51px;
border-radius: 8px;
margin: 20px 0;
width: 100%;
background: linear-gradient(90deg, #ffbe00, #d06602);
color: #fff;
font-weight: 600;
letter-spacing: 0.3px;
transition: 0.3s ease;
}
.memBtn1:hover {
background: linear-gradient(90deg, #d06602, #ffbe02);
box-shadow: 0 6px 12px rgba(208, 102, 2, 0.25);
transform: translateY(-3px);
}
/* Flex Center */
.mempriceBack .flex {
align-items: center;
justify-content: center;
display: flex;
}
/*................megaphone1 (END)......................*/
/*................mempopular (START)......................*/
/* Popular Membership Tag */
.mempopular {
background: linear-gradient(90deg, #ffbe00, #d06602);
left: 0;
right: 0;
margin: auto;
display: inline-block;
padding: 6px 0;
top: -28px;
font-size: 12px;
font-weight: 600;
color: #fff;
border-radius: 9px 9px 0 0;
box-shadow: 0 3px 8px rgba(208, 102, 2, 0.25);
letter-spacing: 0.4px;
}
/* Account Page Wrapper */
.accPage {
padding: 20px 0;
background: #fffdf5;
}
/* Membership Section Scroll Area */
.memBlock {
overflow: auto;
padding-top: 70px;
}
/* Current Member Highlight */
.currMember {
background: rgba(255, 190, 0, 0.1);
border: 1px solid #ffbe00;
border-radius: 8px;
padding: 10px;
}
/* Contest Header Section */
.contestHeader {
text-align: center;
padding: 80px 0 100px;
color: #393F4B;
background: linear-gradient(180deg, #fffbe6, #fffdf8);
position: relative;
z-index: 1;
}
.contestHeader .head {
background: url(../img/ribbon12.png) no-repeat;
background-size: contain;
width: 530px;
height: 180px;
margin: auto;
padding-top: 55px;
color: #d06602;
font-size: 34px;
font-weight: 700;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Contest Padding */
.contestPad {
padding: 70px 0;
background: #fffdf7;
}
/* Trophies */
.trophy1 {
left: -170px;
height: 409px;
bottom: -146px;
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
}
.trophy12 {
right: -130px;
height: 319px;
bottom: -136px;
filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.15));
}
/* Timer Container */
.timerCont {
margin: 40px 0 0;
position: absolute;
left: 0;
right: 0;
transform: translate(0, 10px);
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
/* Timer Values */
.timerCont .time1 {
font-size: 50px;
line-height: 1;
color: #d06602;
font-weight: 600;
}
.timerCont .time2 {
font-size: 16px;
color: #7a7a7a;
}
/* Individual Timer Blocks */
.timerCont .cont {
margin: 0 6px;
padding: 12px 16px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 3px 5px rgba(255, 190, 0, 0.25);
border: 1px solid #ffbe02;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.timerCont .cont:hover {
transform: translateY(-3px);
box-shadow: 0 5px 10px rgba(208, 102, 2, 0.25);
}
/* Seconds Highlight */
.timerCont #seconds {
color: #e15e5e;
font-weight: 600;
}
/* Contest Right Panel */
.contRight {
padding-left: 30px;
}
/* Contest Prize Box */
.contstPrizBox {
text-align: center;
padding: 20px 30px;
border-radius: 10px;
margin: 15px 0 0;
width: 100%;
background: linear-gradient(135deg, #fff7da, #fffae6);
border: 1px solid #ffbe00;
box-shadow: 0 4px 8px rgba(255, 190, 0, 0.25);
transition: all 0.3s ease;
}
.contstPrizBox:hover {
transform: translateY(-4px);
box-shadow: 0 6px 12px rgba(208, 102, 2, 0.25);
}
.hide {
display: none !important;
}
/*................mempopular (END)......................*/
/*................memerCont (START)......................*/
.memerCont {}
/* Membership Section Container */
.memFlex1 {
flex-wrap: wrap;
gap: 20px;
}
/* Main Membership Box */
.memMainBox {
position: relative;
border: 1px solid #ffe082;
padding: 30px 32px;
border-radius: 12px;
overflow: hidden;
margin: 0 0 23px;
background: linear-gradient(135deg, #fff8e1, #fffde7);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.memMainBox:hover {
transform: translateY(-5px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
/* Membership Title */
.memMainBox .name {
font-size: 20px;
font-weight: 600;
color: #d06602;
margin-bottom: 8px;
}
/* Currency Symbol */
.memMainBox .sign {
font-size: 23px;
margin-right: 4px;
color: #ffbe00;
}
/* Membership Price */
.memMainBox .cost {
font-size: 52px;
margin-right: 1px;
font-weight: 600;
color: #d06602;
}
/* Billing Time (e.g. /Month) */
.memMainBox .time {
font-size: 16px;
color: #7c7c7c;
}
/* Membership Features List */
.memlist1 {
margin: 0 0 23px;
text-align: left;
}
.memlist1 li {
align-items: center;
display: flex;
justify-content: space-between;
margin: 8px 0;
background-repeat: no-repeat !important;
background-size: 14px;
padding-left: 26px;
background-position: 0 6px;
color: #484848;
transition: all 0.3s ease;
}
.memlist1 li:hover {
color: #d06602;
transform: translateX(4px);
}
/* Buy Button */
.buymemBtn {
text-align: center;
padding: 12px 22px;
display: inline-block;
border-radius: 8px;
background: linear-gradient(90deg, #ffbe00, #d06602);
width: 100%;
color: #fff !important;
font-weight: 500;
transition: all 0.3s ease;
border: none;
letter-spacing: 0.4px;
}
.buymemBtn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(208, 102, 2, 0.25);
}
/* Amount Alignment */
.memMainBox .amtFlex {
align-items: center;
display: flex;
justify-content: flex-start;
}
/*................memerCont (END)......................*/
/*................memstyle1 (START)......................*/
/* ===============================
Premium Membership Styles
Theme Colors: #ffbe00, #d06602, #ffbe02
================================= */
/* 🟩 Style 1 */
.memstyle1 .name,
.memstyle1 .cost {
color: #ffbe00;
}
.memstyle1 li {
background-image: url(../img/memtick1.png);
}
.memstyle1 .buymemBtn {
background: linear-gradient(90deg, #ffbe00, #d06602);
color: #fff;
border-radius: 6px;
padding: 8px 14px;
font-weight: 600;
box-shadow: 0 4px 12px rgba(255, 190, 0, 0.25);
transition: all 0.3s ease;
}
.memstyle1 .buymemBtn:hover {
background: linear-gradient(90deg, #d06602, #ffbe02);
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(255, 190, 0, 0.35);
}
.memstyle1 {
border: 1px solid #ffbe00;
border-bottom: 2px solid #d06602;
background: rgba(255, 190, 0, 0.07);
border-radius: 8px;
box-shadow: 0 3px 10px rgba(255, 190, 0, 0.1);
transition: all 0.3s ease;
}
.memstyle1:hover {
box-shadow: 0 8px 20px rgba(255, 190, 0, 0.25);
transform: translateY(-3px);
}
/* 🟧 Style 2 */
.memstyle2 .name,
.memstyle2 .cost {
color: #d06602;
}
.memstyle2 li {
background-image: url(../img/memtick2.png);
}
.memstyle2 .buymemBtn {
background: linear-gradient(90deg, #d06602, #ffbe00);
color: #fff;
border-radius: 6px;
padding: 8px 14px;
font-weight: 600;
box-shadow: 0 4px 12px rgba(208, 102, 2, 0.3);
transition: all 0.3s ease;
}
.memstyle2 .buymemBtn:hover {
background: linear-gradient(90deg, #ffbe02, #d06602);
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(208, 102, 2, 0.4);
}
.memstyle2 {
border: 1px solid #d06602;
border-bottom: 2px solid #ffbe00;
background: rgba(255, 190, 0, 0.06);
border-radius: 8px;
box-shadow: 0 3px 10px rgba(208, 102, 2, 0.1);
transition: all 0.3s ease;
}
.memstyle2:hover {
box-shadow: 0 8px 20px rgba(208, 102, 2, 0.25);
transform: translateY(-3px);
}
/* 🟪 Style 3 */
.memstyle3 .name,
.memstyle3 .cost {
color: #7E57C2;
}
.memstyle3 li {
background-image: url(../img/memtick3.png);
}
.memstyle3 .buymemBtn {
background: linear-gradient(90deg, #7E57C2, #d06602);
color: #fff;
border-radius: 6px;
padding: 8px 14px;
font-weight: 600;
box-shadow: 0 4px 12px rgba(126, 87, 194, 0.25);
transition: all 0.3s ease;
}
.memstyle3 .buymemBtn:hover {
background: linear-gradient(90deg, #d06602, #7E57C2);
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(126, 87, 194, 0.35);
}
.memstyle3 {
border: 1px solid #7E57C2;
border-bottom: 2px solid #d06602;
background: rgba(126, 87, 194, 0.07);
border-radius: 8px;
box-shadow: 0 3px 10px rgba(126, 87, 194, 0.1);
transition: all 0.3s ease;
}
.memstyle3:hover {
box-shadow: 0 8px 20px rgba(126, 87, 194, 0.25);
transform: translateY(-3px);
}
/* 🩷 Style 4 */
.memstyle4 .name,
.memstyle4 .cost {
color: #C2185B;
}
.memstyle4 li {
background-image: url(../img/memtick4.png);
}
.memstyle4 .buymemBtn {
background: linear-gradient(90deg, #C2185B, #ffbe00);
color: #fff;
border-radius: 6px;
padding: 8px 14px;
font-weight: 600;
box-shadow: 0 4px 12px rgba(194, 24, 91, 0.25);
transition: all 0.3s ease;
}
.memstyle4 .buymemBtn:hover {
background: linear-gradient(90deg, #ffbe02, #C2185B);
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(194, 24, 91, 0.35);
}
.memstyle4 {
border: 1px solid #C2185B;
border-bottom: 2px solid #ffbe00;
background: rgba(255, 190, 0, 0.07);
border-radius: 8px;
box-shadow: 0 3px 10px rgba(194, 24, 91, 0.1);
transition: all 0.3s ease;
}
.memstyle4:hover {
box-shadow: 0 8px 20px rgba(194, 24, 91, 0.25);
transform: translateY(-3px);
}
/* 🟦 Style 5 */
.memstyle5 .name,
.memstyle5 .cost {
color: #039BE5;
}
.memstyle5 li {
background-image: url(../img/memtick5.png);
}
.memstyle5 .buymemBtn {
background: linear-gradient(90deg, #039BE5, #ffbe00);
color: #fff;
border-radius: 6px;
padding: 8px 14px;
font-weight: 600;
box-shadow: 0 4px 12px rgba(3, 155, 229, 0.25);
transition: all 0.3s ease;
}
.memstyle5 .buymemBtn:hover {
background: linear-gradient(90deg, #ffbe02, #039BE5);
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(3, 155, 229, 0.35);
}
.memstyle5 {
border: 1px solid #039BE5;
border-bottom: 2px solid #ffbe00;
background: rgba(3, 155, 229, 0.07);
border-radius: 8px;
box-shadow: 0 3px 10px rgba(3, 155, 229, 0.1);
transition: all 0.3s ease;
}
.memstyle5:hover {
box-shadow: 0 8px 20px rgba(3, 155, 229, 0.25);
transform: translateY(-3px);
}
/*................memstyle1 (End)......................*/
/*................memstyle6 (START)......................*/
.memstyle6 .name {
color: #d06602;
}
.memstyle6 .cost {
color: #ffbe00;
}
.memstyle6 li {
background-image: url(../img/memtick+.png);
}
.memstyle6 .buymemBtn {
background: linear-gradient(90deg, #ffbe00, #d06602);
color: #fff;
border: none;
border-radius: 6px;
padding: 8px 14px;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 3px 10px rgba(255, 190, 0, 0.3);
}
.memstyle6 .buymemBtn:hover {
background: linear-gradient(90deg, #d06602, #ffbe02);
box-shadow: 0 6px 15px rgba(255, 190, 0, 0.35);
transform: translateY(-3px);
}
.memstyle6 {
border: 1px solid #ffbe00;
border-bottom: 2px solid #d06602;
background: rgba(255, 190, 0, 0.07);
border-radius: 8px;
transition: all 0.3s ease;
box-shadow: 0 3px 10px rgba(255, 190, 0, 0.1);
}
.memstyle6:hover {
box-shadow: 0 8px 20px rgba(255, 190, 0, 0.25);
transform: translateY(-3px);
}
.memMainBox .subtitle {
font-size: 12px;
margin: 2px 0 10px;
color: #707070;
}
.memMainBox .popTag {
background: linear-gradient(90deg, #ffbe00, #ffbe02);
color: #662f00;
width: 160px;
text-align: center;
padding: 6px 0;
top: 24px;
right: -40px;
transform: rotate(45deg);
font-size: 12px;
font-weight: 600;
box-shadow: 0 3px 8px rgba(255, 190, 0, 0.3);
}
.memMainBox:hover .buymemBtn {
transform: translate(0, -4px);
}
.buymemBtn:hover {
box-shadow: 0 7px 8px rgba(255, 190, 0, 0.25);
}
.payBoxContainer {
display: flex;
font-variant: flex-w;
flex-wrap: wrap;
}
.PayBox2 {
padding: 7px 9px;
border: 1px solid rgba(255, 190, 0, 0.5);
border-bottom: 3px solid #ffbe00;
border-radius: 7px;
margin: 0 9px 16px;
transition: 0.25s ease;
display: block;
width: 18%;
background: #fff8e1;
box-shadow: 0 3px 10px rgba(255, 190, 0, 0.1);
}
.PayBox2:hover {
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(255, 190, 0, 0.25);
border-color: #d06602;
}
.payImg2 {}
.payTitle2 {
font-size: 13px;
font-weight: 600;
color: #d06602;
}
.payDesc {
font-size: 11px;
color: #727272;
margin: 7px 0 0;
line-height: 1.3;
}
.payCredFlex {
display: flex;
align-items: center;
justify-content: space-between;
padding: 3px 8px;
background: linear-gradient(90deg, #ffbe00, #d06602);
color: white;
border-radius: 5px;
font-size: 13px;
margin: 10px 0 0;
font-weight: 500;
box-shadow: 0 2px 8px rgba(255, 190, 0, 0.25);
}
.payTimer1 {}
.payMon2 {}
.payImgBack {
text-align: center;
background: rgba(255, 190, 0, 0.1);
margin: 0 0 13px;
border-radius: 6px;
padding: 10px 0;
}
/*................memstyle6 (END)......................*/
@media screen and (max-width: 992px) {
.hide {
display:none;
}
.block992, .bars
{ display: block }
.hide992, .footer .head::before
{ display: none }
.bannAd, .cgblock2
{ width: 100%; }
.tac, .copyFoot
{ text-align: center; }
.footSocial, .paymentsFoot
{ justify-content: center; }
.mb10_{ margin-bottom: 10px }
.mb15_{ margin-bottom: 15px }
.mb20_{ margin-bottom: 20px }
.mb30_{ margin-bottom: 30px }
.mb40_{ margin-bottom: 40px }
.mt10_, .footSocial
{ margin-top: 10px }
.mt15_{ margin-top: 15px }
.mt20_{ margin-top: 20px }
.mt30_{ margin-top: 30px }
.mt40_{ margin-top: 40px }
.fs24_{ font-size:24px !important }
.fs28_{ font-size:28px !important }
.fs30_{ font-size:30px !important }
.fs35_{ font-size:35px !important }
/*................mainul (START)......................*/
.mainul {
padding: 16px 0;
border-top: 1px solid rgba(255, 190, 0, 0.3);
display: none;
background: #fff;
border-radius: 0 0 12px 12px;
box-shadow: 0 2px 10px rgba(255, 190, 0, 0.15);
}
.mainul li {
display: block;
}
.main-link {
display: flex;
align-items: center;
width: 100%;
padding: 10px 14px;
border: none;
color: #444;
font-weight: 500;
border-radius: 8px;
transition: all 0.3s ease;
}
.main-link:hover {
background: linear-gradient(90deg, #ffbe00, #d06602);
color: #fff;
box-shadow: 0 3px 10px rgba(255, 190, 0, 0.25);
}
.menuMobBack {
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(90deg, #ffbe00, #ffbe02);
padding: 10px 16px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(255, 190, 0, 0.25);
}
.headIcon {
margin-right: 18px;
transform: none !important;
color: #d06602;
font-size: 20px;
transition: color 0.3s ease;
}
.main-link:hover .headIcon {
color: #fff;
}
.logo-main {
width: 156px;
margin: 17px 0;
filter: drop-shadow(0 3px 6px rgba(255, 190, 0, 0.4));
}
.headBtn {
margin: 10px 0 0;
background: linear-gradient(90deg, #ffbe00, #d06602);
color: #fff;
padding: 10px 18px;
border-radius: 10px;
border: none;
cursor: pointer;
font-weight: 600;
box-shadow: 0 4px 10px rgba(208, 102, 2, 0.25);
transition: all 0.3s ease;
}
.headBtn:hover {
background: linear-gradient(90deg, #d06602, #ffbe00);
box-shadow: 0 5px 14px rgba(255, 190, 0, 0.4);
}
.homeSlider {
padding: 60px 0 0;
background-position: right;
background: linear-gradient(120deg, #ffbe00, #ffbe02);
border-radius: 25px 25px 0 0;
color: #fff;
box-shadow: 0 6px 18px rgba(255, 190, 0, 0.35);
}
.homeSlider .head {
font-size: 42px;
font-weight: 700;
color: #fff;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.table {
width: max-content;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}
.hsStats {
flex-wrap: wrap;
margin: 18px 0 20px;
display: flex;
gap: 10px;
color: black;
}
.singleStat {
border: 1px solid rgba(255, 190, 0, 0.3) !important;
width: 48%;
padding: 14px 0;
background: #fff;
border-radius: 10px;
text-align: center;
box-shadow: 0 3px 10px rgba(255, 190, 0, 0.1);
transition: all 0.3s ease;
}
.singleStat:hover {
background: linear-gradient(135deg, #ffbe00, #d06602);
color: #fff;
box-shadow: 0 6px 14px rgba(255, 190, 0, 0.3);
}
.singleStat .val {
font-size: 30px;
font-weight: 700;
color: #d06602;
}
.moneySlider{
position: static;
width: 300px;
height: 300px;
margin: 50px auto 0;
}
/*................mainul (START)......................*/
/*................person1 (START)......................*/
.person1 {
position: static;
transform: none;
margin: 60px 0 0;
width: 100%;
}
.regBack1 {
padding: 30px 34px;
background: linear-gradient(145deg, #ffbe00, #d06602);
border-radius: 14px;
box-shadow: 0 4px 12px rgba(208, 102, 2, 0.2);
color: #fff;
}
.hsec1Flex .hsec1Box, .hsec2Box {
margin: 20px 0 0;
background: #fff;
border-radius: 12px;
padding: 20px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hsec1Flex .hsec1Box:hover, .hsec2Box:hover {
transform: translateY(-4px);
box-shadow: 0 5px 18px rgba(255, 190, 0, 0.35);
}
.tabecCont {
padding: 27px 22px;
background: #fff;
border: 1px solid rgba(255, 190, 0, 0.3);
border-radius: 10px;
}
.block1 {
padding: 27px 22px;
background: #fff;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.contSpecBox {
margin: 30px 0 0;
padding: 30px;
background: linear-gradient(120deg, #ffbe00, #ffbe02);
border-radius: 14px;
color: #fff;
box-shadow: 0 4px 12px rgba(255, 190, 0, 0.4);
}
.btnfull {
display: block;
width: 100%;
text-align: center;
justify-content: center;
max-width: 100%;
padding: 12px;
background: linear-gradient(90deg, #ffbe00, #d06602);
color: #fff;
font-weight: 600;
border: none;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 4px 10px rgba(208, 102, 2, 0.3);
transition: all 0.3s ease;
}
.btnfull:hover {
background: linear-gradient(90deg, #d06602, #ffbe00);
box-shadow: 0 6px 16px rgba(255, 190, 0, 0.45);
}
.homRecCont .col1, .homRecCont .col2, .homRecCont .col3, .homRecCont .col4, .homRecCont .col5 {
width: 100%;
}
.tabRecRow {
padding: 10px 18px;
background: #fff;
border-bottom: 1px solid rgba(255, 190, 0, 0.25);
transition: background 0.3s ease;
}
.tabRecRow:hover {
background: rgba(255, 190, 0, 0.08);
}
.homRecCont .data {
font-size: 14px;
color: #444;
}
.homRecCont .head {
font-size: 15px;
font-weight: 600;
color: #d06602;
}
/*................person1 (END)......................*/
/*................Start Premium Footer, Sidebar & PTC Section Style (START)......................*/
/* 🌐 Premium Footer, Sidebar & PTC Section Style */
.footer {
text-align: center;
background: linear-gradient(180deg, #ffffff, #f5f9ff);
padding-top: 25px;
color: #334155;
}
.footer .head {
border-top: 2px solid rgba(0, 123, 255, 0.25);
padding: 24px 0 5px;
margin: 25px 0 20px;
font-weight: 600;
font-size: 16px;
letter-spacing: 0.3px;
color: #0f172a;
text-transform: uppercase;
}
/* 🔹 PTC Slider Section */
.ptcslider {
padding-bottom: 10px;
background: linear-gradient(135deg, #007bff05, #00d4ff10);
border-radius: 12px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.ptcslider:hover {
box-shadow: 0 6px 20px rgba(0, 123, 255, 0.2);
transform: translateY(-2px);
}
.ptcslider h2 {
font-size: 44px;
font-weight: 700;
color: #0f172a;
background: linear-gradient(90deg, #007bff, #00d4ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-transform: capitalize;
letter-spacing: 1px;
}
.ptcsliderimg {
position: static;
width: 100%;
transform: translateY(13px);
margin: 25px 0 0;
height: 360px;
background-position: center;
background-size: cover;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 123, 255, 0.1);
}
/* 🔸 PTC Ad Box */
.ptcAdClickBox {
transform: translate(6px, 70px);
text-align: center;
transition: all 0.3s ease;
}
.ptcAdClickBox:hover {
transform: translate(6px, 65px) scale(1.02);
}
.ptcAdClickBox .bottom {
font-size: 28px;
color: #007bff;
font-weight: 600;
text-shadow: 0 1px 3px rgba(0, 123, 255, 0.25);
}
/* 🔹 Partner Section */
.partPtcBox img {
height: 24px;
margin: 15px 16px;
align-items: center;
filter: drop-shadow(0 0 3px rgba(0, 123, 255, 0.3));
transition: transform 0.3s ease;
}
.partPtcBox img:hover {
transform: scale(1.08);
}
/* 🔸 Section Box */
.ptcSec2Box {
padding: 35px 40px;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.ptcSec2Box:hover {
background: linear-gradient(135deg, #ffffff 80%, #e8f5ff);
}
/* 🔹 Sidebar */
.sidebar-head {
padding: 12px 25px;
background: linear-gradient(135deg, #3d1f11, #df6700);
color: #fff;
font-weight: 600;
border-radius: 6px 6px 0 0;
box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}
.sidebarUl a {
display: block;
padding: 11px 22px;
color: #334155;
font-weight: 500;
border-left: 3px solid transparent;
transition: all 0.3s ease;
}
.sidebarUl a:hover {
background: linear-gradient(90deg, #007bff10, #00d4ff10);
border-left: 3px solid #00d4ff;
color: #007bff;
}
/* 🔸 Mobile Sidebar Top */
.mobSideTop {
display: flex;
background: #ffffff;
border: 1px solid #d7d7d7;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
overflow: hidden;
}
/* 🔹 Account Right Container */
.accRightCont {
border-bottom: 3px solid #dc3545;
overflow-y: auto;
border-radius: 0 0 10px 10px;
background: #ffffff;
box-shadow: inset 0 -3px 10px rgba(0, 123, 255, 0.05);
}
/*................Start Premium Footer, Sidebar & PTC Section Style (END) ......................*/
/*...............Premium Modern Mobile Dashboard & Sidebar Style (Start)........................*/
/* 🔹 Premium Modern Mobile Dashboard & Sidebar Style */
.mobDashMenu {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: -110%;
z-index: 9999;
background: #ffffff;
transition: all 0.4s ease-in-out;
box-shadow: 0 0 60px rgba(0, 0, 0, 0.25);
overflow-y: auto;
border-top-right-radius: 18px;
border-bottom-right-radius: 18px;
}
.mobDashMenu.active {
left: 0;
background: linear-gradient(135deg, #ffffff 70%, #f3f8ff 100%);
box-shadow: 0 0 80px rgba(0, 123, 255, 0.2);
}
/* Sidebar Container */
.leftSidebarCont {
margin: 0;
padding: 18px 20px;
}
/* User Section */
.sideUYserBack {
display: flex;
align-items: center;
text-align: left;
background: linear-gradient(135deg, #3d1f11, #df6700);
border-radius: 12px;
padding: 14px 16px;
color: #fff;
box-shadow: 0 4px 10px rgba(0, 123, 255, 0.25);
transition: all 0.3s ease;
}
.sideUYserBack:hover {
transform: translateY(-3px);
box-shadow: 0 6px 14px rgba(0, 212, 255, 0.35);
}
.personsideimg {
height: 60px;
width: 60px;
margin-right: 14px;
border-radius: 50%;
border: 3px solid rgba(255, 255, 255, 0.8);
box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
transition: transform 0.3s ease;
}
.personsideimg:hover {
transform: scale(1.05);
}
.sideUYserBack .head {
margin: 0 0 6px;
font-size: 17px;
font-weight: 600;
letter-spacing: 0.5px;
}
/* Grid Box Section */
.clixgridbox {
padding: 10px;
border-radius: 12px;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.clixgridbox:hover {
transform: translateY(-4px);
box-shadow: 0 5px 14px rgba(0, 123, 255, 0.15);
}
/* Grid Container */
.clixgridCont {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 15px;
}
/* 🔹 PTC Section */
.ptcBox {
padding: 12px 11px;
border-radius: 10px;
background: #f9fbff;
border: 1px solid #e3e8ef;
transition: all 0.3s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.ptcBox:hover {
background: linear-gradient(135deg, #007bff10, #00d4ff15);
border-color: #00d4ff;
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2);
}
.ptcBox .img1 {
height: 28px;
filter: drop-shadow(0 0 3px rgba(0, 123, 255, 0.4));
transition: transform 0.3s ease;
}
.ptcBox:hover .img1 {
transform: scale(1.1);
}
/*...............Premium Modern Mobile Dashboard & Sidebar Style (END)........................*/
/* ptc media end */
/*...........................game single media start................................*/
.gameright .cont p{ display: none; }
.gameright .cont{
width: 100%;
margin: 10px 3px 0;
}
/*..........................game single media end..................................*/
/*...............Premium Modernized Contest Layout (Start)........................*/
/* 🔹 Premium Modernized Contest Layout */
.contRight {
padding: 0;
background: #f9fbff;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.contRight:hover {
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
/* Header Section */
.contestHeader .head {
width: 100%;
padding: 38px 0 0;
font-size: 28px;
height: 131px;
color: #1e293b;
font-weight: 700;
font-family: "Poppins", "Segoe UI", sans-serif;
text-align: center;
letter-spacing: 0.5px;
background: linear-gradient(135deg, #007bff, #00d4ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
/* Timer Section */
.timerCont .time1 {
font-size: 34px;
font-weight: 600;
color: #007bff;
text-align: center;
letter-spacing: 1px;
text-shadow: 0 0 6px rgba(0, 123, 255, 0.3);
transition: all 0.3s ease;
}
.timerCont .time1:hover {
color: #00d4ff;
text-shadow: 0 0 10px rgba(0, 212, 255, 0.6);
}
/* Contest Header Wrapper */
.contestHeader {
padding: 40px 0 80px;
background: linear-gradient(180deg, #ffffff, #f3f8ff);
border-radius: 12px;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}
/* Timer Container */
.timerCont {
margin: 20px 0 0;
text-align: center;
}
/* Widget Head */
.widget-head2 {
display: block;
font-weight: 600;
color: #1e293b;
font-size: 18px;
text-align: left;
}
/* Dropdown and Icon Styles */
.accIconDown {
right: 18px;
color: #007bff;
font-size: 20px;
transition: transform 0.3s ease, color 0.3s ease;
}
.accIconDown:hover {
color: #00d4ff;
transform: rotate(180deg);
}
.dropdownUl {
width: 100%;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: all 0.3s ease;
}
/*...............Premium Modernized Contest Layout (END)........................*/
} /* media 992 */