body,html{ height: 100% ; scroll-behavior: smooth;}
body{
margin: 0;
padding: 0;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
color: #FCFFFF;
line-height: 1.48;
background: #252831;
}
*,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: #b2b2b2;
}
.td{ text-decoration: none !important; }
.fw1{ font-weight: 300; }
.fw2{ font-weight: 400; }
.fw3{ font-weight: 700; }
.fw4{ font-weight: 600; }
.fw5{ font-weight: 800; }
br, .us{ user-select: none !important; }
.pointer{ cursor: pointer !important; }
.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; }
.fs11{ font-size: 11px !important}
.fs12{ font-size: 12px !important}
.fs13{ font-size: 13px !important }
.fs14{ font-size: 14px !important}
.fs16{ font-size: 16px !important}
.fs17{ font-size: 17px !important}
.fs18{ font-size: 18px !important}
.fs19{ font-size: 19px !important}
.fs20{ font-size: 20px !important}
.fs22{ font-size: 22px !important}
.fs24{ font-size: 24px !important}
.fs26{ font-size: 26px !important}
.fs28{ font-size: 28px !important}
.fs30{ font-size: 30px !important}
.fs35{ font-size:35px !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 }
.mt40{ margin-top: 40px }
.ml5{ margin-left: 5px !important }
.ml10{ margin-left: 10px !important }
.ml20{ margin-left: 15px !important }
.ml20{ margin-left: 20px !important }
:root{
--first: #2E2E38;
--second: #cf2372;
}
.cwhite{ color: white !important; }
.cfirst{ color: var(--first); }
.csecond{ color: var(--second); }
.w100{ width: 100%; }
.cgray{ color: #7F828B }
.bg1{
background: var(--first);
}
.inflex{ display:inline-flex; }
.dashboardContainer{
height: 100%;
padding: 15px 0;
}
.dashMainFlex{
height: 100%;
padding: 15px;
}
.leftsidebar{
padding: 30px 40px;
border-radius: 7px;
overflow: auto;
width: 290px;
}
.dashlogo{
width: 150px;
opacity: 0.3;
}
.sideListCont{
margin: 40px 0 0;
}
.sideBarLink{
display: block;
color: #999a9c !important;
display: flex;
align-items: center;
transition: 0.3s ease;
justify-content: space-between;
padding: 9px 18px;
margin: 0 0 10px;
border-radius: 7px;
}
.sideBarLink:hover,
.sideBarLink:focus{
background: #3c3c4a;
}
.sideListCont li{
}
.sideBarLink img{
height: 19px;
margin-right: 22px;
opacity: 0.45;
}
.btn1{
background: var(--second);
text-align: center;
border-radius: 6px;
color: white !important;
outline: none !important;
border: none !important;
cursor: pointer;
user-select: none;
transition: 0.3s ease;
}
.btn1:hover,
.btn1:focus{
background: #af0854;
}
.btn2{
background: #343844;
text-align: center;
border-radius: 6px;
color: #bbbbbb !important;
outline: none !important;
border: none !important;
cursor: pointer;
user-select: none;
transition: 0.25s ease;
}
.btn2:hover,
.btn2:focus{
background: #434854;
}
.btn2-active{
}
.sideBtn1{
width: 80%;
padding: 11px 20px;
margin: 30px 0 0;
}
.sideBtn1:hover{
transform: scale(1.03);
}
.activeLink{
color: white !important;
}
.activeLink img{
opacity: 1 !important;
}
.sideListCont .num{background: #484850;color: #bbbbbb;opacity: 1;padding: 6px;height: 23px;width: 23px;font-size: 14px;display: flex;align-items: center;justify-content: center;border-radius: 4px;}
.sideBottomBox{
}
.cgrya2, .cgray2{
color: #75757e;
}
.leftsidebar .dash{
background: white;
opacity: 0.1;
height: 2px;
width: 40px;
margin: 30px 0 30px;
}
.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 }
.bg1userDetBox{
padding: 17px 30px;
border-radius: 7px;
}
.dashTopLinks{
}
.dashTopLinks li{
display: inline-block;
}
.dashTopLinks a{
color: #7F828B;
font-weight: 500;
margin-right: 30px;
position: relative;
}
.dashTopLinks a:hover{
color: #bbbec5;
}
.dashTopLinks a:hover::before{
content: "";
display: block;
width: 50px;
height: 4px;
background: #cf2372;
position: absolute;
bottom: -27px;
left: 0;
right: 0;
margin: auto;
}
.rightsidebar{
width: 82%;
margin-left: 14px;
}
.userBack{
}
.userBackInner{
}
.userBackInner .name{
font-weight: 300;
font-size: 18px;
margin-right: 7px;
color: #9ca1af;
}
.userBackInner img{
border-radius: 100px;
height: 40px;
width: 40px;
object-fit: cover;
margin: 0 14px;
}
.userBackInner i{
}
.us{ user-select:none; }
.pointer{ cursor:pointer; }
.themeModBack i{
}
.bg1userDetBox .dash{
width: 2px;
opacity: 0.11;
background: #ffffff;
height: 15px;
margin: 0 20px;
}
.dropdown{
position: relative;
padding: 0 13px;
border-radius: 7px;
}
.drop-active{
background: #373741;
}
.dropdown-body{
position: absolute;
width: 100%;
background: #373741;
border-radius: 7px;
padding: 9px 0;
transform: translateY(21px);
display: none;
box-shadow: 0 0 32px rgb(0 0 0 / 24%);
z-index: 999;
left: 0;
}
.dropdown-body i{
margin-right: 10px;
}
.dropdown-body a{
display: block;
padding: 8px 20px;
color: #d5d5d5;
font-size: 14px;
border-bottom: 1px solid #4c4c4c;
transition: 0.3s ease;
}
.dropdown-body li:nth-last-child(1) a {
border: none !important;
}
.dropdown-body a:hover{
background: #464652;
}
.block1{
/* background: var(--first); */
padding: 20px 29px;
border-radius: 7px;
}
.heading1{
font-size: 21px;
font-weight: 600;
color: #a6a6b2;
}
.btnpad1{
padding: 6px 14px;
}
.amtBox{
padding: 20px 20px;
/* border: 2px solid #44444e; */
border-radius: 7px;
background: #373741;
height: 100%;
overflow: hidden;
}
.amtBox .head{
font-size: 17px;
font-weight: 600;
color: #959595;
}
.amtBox .amt{
font-size: 42px;
line-height: 1;
margin: 6px 0 30px;
}
.addBtnAmt{
font-size: 13px;
color: #c1c1c1 !important;
opacity: 0.5;
}
.addBtnAmt i{
}
.trans{ transition:0.25s ease }
.transTxt{
}
.addBtnAmt:hover{
color: white !important;
opacity: 0.6;
}
.flagAmt{
width: 40px;
height: 40px;
right: 20px;
transition: 0.25s ease;
/* filter: grayscale(1); */
}
.amtBox:hover .flagAmt{
filter: grayscale(0);
}
.trxBlock{
display: flex;
width: 100%;
background: #373741;
padding: 8px 15px;
border-radius: 10px;
}
.trx_sent .trxPerImg{
background: #43A047;
}
.trx_rec .trxPerImg{
background: #ad4a4a;
transform: rotate(180deg);
}
.trxPerImg{
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 100px;
}
.trxPerImg img{
width: 14px;
}
.trxTable .trxid{
color: #7F828B;
letter-spacing: 2px;
}
.trxTable .date{
font-size: 16px;
margin: 0 0 2px;
font-weight: 600;
color: #bfbfbf;
}
.trxTable .curr{
padding: 6px 11px;
background: #2e2e38;
border-radius: 7px;
text-align: center;
margin-right: 20px;
}
.trxTable .amt{
padding: 6px 11px;
background: #2e2e38;
border-radius: 7px;
text-align: center;
margin-right: 20px;
}
.trxTable .status{
background: #2e2e38;
padding: 6px 11px;
font-weight: 600;
border-radius: 5px;
text-align: center;
font-size: 13px;
}
.dateTrxCox{}
.w100{ width: 100% }
.trxTable{
}
.trxTable .tabCol1{
}
.trxTable .tabCol2{
width: 12%;
}
.trxTable .tabCol3{
width: 12%;
}
.trxTable .tabCol4{
width: 12%;
}.trxTable .tabCol5{
width: 7%;
}
.trxBtn1{background: #31313a;height: 32px;width: 32px;color: #8d8d8d;}
.trxBack{
margin-bottom: 10px;
transition: 0.3s ease;
display: block;
padding: 9px 10px;
border-radius: 9px;
}
.leftInner{
padding: 30px 20px;
position: sticky;
top: 0;
}
.trxBoxBack .stats{
font-size: 14px;
color: #858282;
}
.trxBoxBack .amt2{
background: #33333c;
display: flex;
align-items: center;
justify-content: center;
width: 120px;
max-width: 80px;
border-radius: 100px;
margin-left: -8px;
margin-right: 20px;
position: relative;
}
.trxBack:hover,
.trxBack:focus{
background: #3c3c4a;
}
.trxBack .status-comp{
}
.trxBack .status-pend{
color: #c38d5e;
}
.trxBack .status-error{
color: #d95454;
}
.leftInner .dash{
margin: 30px 0;
width: 41px;
height: 3px;
background: #45454e;
margin-left: 14px;
}
body::-webkit-scrollbar {
width: 10px;
}
body::-webkit-scrollbar-track {
background: #3b3b42;
}
body::-webkit-scrollbar-thumb {
background: #5e5e7c;
}
body::-webkit-scrollbar-thumb:hover {
background: #555;
}
.line1{
margin: 0 27px;
height: 3px !important;
opacity: 0.05;
background: white;
}
.line2{
height: 3px !important;
opacity: 0.05;
background: white;
}
.cardSample{
padding: 15px 19px;
display: block;
height: 100%;
border-radius: 7px;
border: 3px dashed #40404c;
display: flex;
flex-direction: column;
justify-content: center;
}
.cardTop{
width: 100%;
}
.mcard{
height: 32px;
}
.cardHovTxt{
font-size: 19px;
color: #60606e;
font-weight: 600;
transition: 0.3s ease;
}
.cardSample:hover{
border: 3px dashed #6d6d76;
}
.cardSample:hover .cardHovTxt{
color: #9d9db3;
}
.cardSample:hover i{
transform: translateX(5px);
}
.boxcardSample{
height: 16px;
border-radius: 4px;
width: 48px;
margin: 23px 0 0;
}
.cardSampBtm{
width: 114px !important;
margin: 38px 0 0 !important;
}
.boxcardSample{
background: #33333e;
height: 18px;
width: 51px;
}
.cardSampBtm{
}
.cardSampBtm2{
width: 21px;
}
.bars{
display: none;
font-size: 20px;
right: 10px;
top: 19px;
z-index: 99;
color: #53535a;
}
.themeimg{
width: 23px;
opacity: 0.5;
}
.themeimg:hover{
opacity: 0.8;
}
.inp1{
width: 100%;
padding: 4px 12px;
font-size: 24px;
background-color: transparent;
border: 1px solid #565c6c;
border-radius: 5px;
color: #b5b5b5;
outline: none !important;
font-weight: 600;
outline: none !important;
}
.inp1:hover,
.inp1:focus{
border: 1px solid var(--second);
box-shadow: none;
}
.payCurrFlex span{
}
.payCurrFlex{
border-radius: 7px;
overflow: hidden;
width: 100%;
}
.payCurrFlex .currOpt{
padding: 11px 20px;
background: #383840;
border-right: 1px solid #323232;
transition: 0.25s ease;
color: #9898b1;
width: 100%;
text-align: center;
}
.payCurrFlex input{
display: none;
}
.payCurrFlex .currActive{
background: var(--second) !important;
border-color: var(--second) !important;
color: white !important;
}
.payCurrFlex .currOpt:hover{
background: #51515c;
color: white;
}
.lbl1{
color: #7F828B;
}
.payOpSingle{
cursor: pointer;
user-select: none;
margin-right: 30px;
display: flex;
align-items: center;
}
.methodRadio{
width: 15px;
height: 15px;
background: #383840;
border-radius: 100px;
margin-right: 13px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.payOpSingle img{
height: 26px;
}
.payOptFlex .activeMethod .methodRadio::before{
content: "";
position: absolute;
display: block;
width: 12px;
height: 12px;
background: #cf2372;
border-radius: 100px;
}
.payOpSingle input{
display: none;
}
.underLink{
text-decoration: underline !important;
}
.btnpad3{
padding: 13px 20px;
}
.underLink:hover{
color: var(--second);
}
.payOpSingle .fa-check{
color: #313138;
font-size: 18px;
margin-right: 10px;
}
.activeMethod .fa-check{
color: var(--second);
}
.btnpad2{
padding: 8px 15px;
min-height: 38px;
}
.filterFlex{
}
.inp2{
padding: 7px 12px;
background: transparent;
border: 1px solid #4c505e;
margin-right: 12px;
border-radius: 6px;
color: #bfb7b7;
outline: none !important;
}
.inp2:hover,
.inp2:focus{
border: 1px solid var(--second);
}
.filderbtn{
padding: 0 11px;
}
#filterForm{
display: none;
}
::-moz-selection {
color: white;
background: rgb(128 128 128 / 15%);
}
::selection {
color: white;
background: rgb(128 128 128 / 15%);
}
.cardListSingle{
padding: 16px 20px;
border-bottom: 2px solid #30323b;
border-top: 2px solid #30323b;
transition: 0.3s ease;
}
.cardListSingle .cc{
height: 59px;
margin-right: 25px;
}
.cardNameTop{
font-size: 20px;
color: #a2a6b1;
font-weight: 600;
}
.cardNameTop .name{
}
.cardNameTop .blackstar{
width: 60px;
margin: 0 14px 0 29px;
opacity: 0.6;
}
.cardNameTop .digit4{
letter-spacing: 2px;
}
.cardListSingle .pname{
font-size: 16px;
margin: 6px 0 0;
color: #a2a6b1;
}
.cardListSingle:hover{
background: #32353e;
}
.inviteBlock1{
padding: 40px 49px;
background: #32353e;
border-bottom: 3px solid var(--second);
margin-bottom: 0;
border-radius: 9px;
}
.inviteBlock1 .head{
font-size: 53px;
line-height: 1.1;
letter-spacing: -2px;
color: #9ca1af;
}
.inviteBlock1 .desc{
margin: 20px 0 30px;
font-size: 16px;
color: #9ca1af;
}
.RefLinkFlex{
border: 2px solid var(--second);
border-radius: 8px;
overflow: hidden;
padding: 7px;
}
.reflink{
width: 100%;
padding: 9px 10px;
background: none;
border: none;
color: white;
outline: none !important;
}
.refLinkBtn{
width: 120px;
}
.refShareFlex a{
padding: 15px 20px;
background: #32353e;
transition: 0.3s ease;
width: 100%;
color: #9095a7;
text-align: center;
}
.refShareFlex i{
margin-right: 7px;
}
.refShareFlex{
border-radius: 7px;
overflow: hidden;
width: 100%;
}
.refShareFlex a:hover{
background: var(--second);
color: white;
}
.megaphone{
background: url(../img/megaphone.png) no-repeat;
width: 270px;
background-size: contain;
height: 265px;
transform: translate(40px, 24px);
}
.refDetBox{
padding: 30px 30px;
border: 2px solid #32353e;
border-radius: 7px;
}
.refDetBox h2{
font-size: 18px;
margin: 0 0 13px;
font-weight: 500;
color: #9ca1af;
}
.refDetBox p{
color: #9ca1af;
}
.refDetBox img{
width: 80px;
margin-right: 30px;
}
.pagination-main{
display: flex;
align-items: center;
}
.pagination-main .single{
display: flex;
align-items: center;
justify-content: center;
padding: 5px 7px;
background: #31313a;
border-radius: 7px;
width: 30px;
margin-right: 10px;
height: 30px;
color: #9c9c9d;
}
.pagination-main .single:hover{
background: #40404a;
color: #cfcfcf;
}
.pagination-main .active{
background: var(--second) !important;
color: white !important;
}
.sideFooter{
max-width: 190px;
line-height: 1.8;
}
.alert{
padding: 12px 20px;
padding-left: 44px;
border: none;
background-repeat: no-repeat !important;
background-size: 14px !important;
background-position: 15px center !important;
border-radius: 7px;
display: flex;
justify-content: space-between;
}
.alert-info{
background: #31567c url(../img/alert-info.png);
color: #a9c3dd;
}
.alert-primary{
background: #3c414a url(../img/alert-primary.png);
color: #a9c3dd;
}
.alert-success{
background: #537044 url(../img/alert-success.png);
color: #ccd7c6;
}
.alert-danger{
background: #763939 url(../img/alert-danger.png);
color: #dbbebe;
}
.alert-warning{
background: #765c10 url(../img/alert-warning.png);
color: #e5d19a;
}
.closeAlertBtn{
cursor: pointer;
user-select: none;
color: white;
opacity: 0.4;
}
.closeAlertBtn:hover{
opacity: 0.9;
}
.emptyBox{
opacity: 0.1;
width: 90px;
}
.errorHead{
font-size: 22px;
margin: 23px 0 11px;
color: #a6a6b2;
}
.amtBox .backShade{
position: absolute;
font-weight: 800;
font-size: 58px;
opacity: 0.4;
color: #252831;
letter-spacing: -5px;
right: 18px;
bottom: -7px;
}
.earnRefBox{
background: #32353e;
padding: 16px 20px;
border-radius: 7px;
color: #9a9fad;
}
.earnRefBox span{
color: #aeb2c3;
font-weight: 700;
}
.refTable{
color: #747881;
}
.pt0{ padding-top: 0 }
.pb0{ padding-bottom: 0 }
.refTabSingle{
display: flex;
border-bottom: 1px solid #30323b;
padding: 16px 0;
}
.refTabSingle .no{
display: flex;
align-items: center;
justify-content: center;
width: 33px;
height: 33px;
background: #32353e;
border-radius: 7px;
margin-right: 20px;
border-radius: 100px;
}
.refTabSingle .email{
margin-right: 30px;
width: 34%;
}
.refTabSingle .date{
}
.refTabSingle .earn{
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #3b3e48;
background: #292d36;
padding: 0 9px;
border-radius: 7px;
color: #9c9fab;
width: 150px;
}
.border-block{
padding: 20px 20px;
border: 2px solid #333640;
border-radius: 7px;
border-top: 8px solid #333640;
}
.cardInp{
padding: 12px 19px;
}
.form-select option{
background: #252831;
}
.cardSel1{margin: 0 -10px;}
.cardSelOpton{
padding: 15px 10px;
cursor: pointer;
user-select: none;
width: 100%;
text-align: center;
background: #343844;
transition: 0.25s ease;
color: #afb1b7;
margin: 0 10px;
border-radius: 7px;
}
.cardSelOpton input{
display: none;
}
.cardSelOpton:hover,
.cardSelOpton:focus{
background: #424654;
}
.cardSel1 .active{
background: var(--second);
color: white !important;
}
.btnpad4{
padding: 13px 45px;
}
.btnpad5{
padding: 13px 20px;
}
.stepsCont{
border: 2px solid #343844;
padding: 10px 0 15px;
margin: 0 0 40px;
border-radius: 7px;
}
.stepBox{
text-align: center;
width: 100%;
opacity: 0.3;
position: relative;
}
.stepImg{
height: 50px;
}
.stepTick{
width: 50px;
height: 50px;
margin: 20px auto 15px;
border-radius: 100px;
background: #343844;
color: #555f64;
font-size: 19px;
position: relative;
}
.stepTxt{
color: #7F828B;
font-size: 12px;
}
.stepsDotted{
background: #3d6034;
color: white;
}
.stepsDotted{
content: '';
position: absolute;
display: block;
border: 2px dashed #4b5062;
width: 42%;
height: 0px;
right: 80%;
background: transparent;
top: 47px;
}
.stepsCont .stepBox:nth-child(1) .stepsDotted {
display: none;
}
.stepsCont .active{
opacity: 1;
}
.stepsCont .active .stepTick{
background: green;
color: white !important;
}
.stepsCont .active .stepsDotted{
border-color: green;
}
.stepsCont .active .stepTxt{color: #999da9;}
.cardPackBox{
padding: 30px 30px;
background: #32353e;
border-radius: 7px;
color: #7f838d;
position: relative;
margin: 0 0 23px;
overflow: hidden;
}
.cardPackBox .packName{color: #99a3ab;font-weight: 500;font-size: 19px;margin: 0 0 12px;}
.cardPackBox .fee{
font-size: 48px;
font-weight: 600;
line-height: 1;
margin: 18px 0 6px;
color: #95979d;
}
.cardPackBox .fee2{
font-size: 20px;
margin: 0 0 40px;
}
.cardPackBox .desc{
border-top: 1px solid #434650;
padding: 12px 0;
}
.cardFinlBoxOuter{
padding: 19px 30px 17px;
background: #292c36;
border-radius: 7px;
margin: 20px 0 0;
border: 1px solid #424650;
}
.cardFinlBoxOuter .row{
margin: 24px 0;
}
.cardFinlBoxOuter .inp1{
font-size: 16px;
padding: 7px 13px;
}
.cardFinlBoxOuter p{
color: #a7a7a7;
}
.cardBackBtn{
background: none;
outline: none !important;
border: none !important;
color: #6a6b6c;
font-size: 19px;
}
.cardBackBtn i{
height: 30px;
width: 30px;
border: 1px solid;
font-size: 12px;
border-radius: 100px;
}
.cardBackBtn:hover{
color: #918a8a;
}
.cardNormalBtn{
margin: 17px 0 0;
}
.monthlyCont{
}
.monthlyCont .cardPackBox{
padding: 24px 26px;
position: relative;
overflow: hidden;
}
.monthlyCont .desc{
border: none;
margin: 6px 0 0;
padding-bottom: 15px;
font-size: 13px;
border-bottom: 2px solid #3f4350;
}
.monthlyCont .packName{
color: #99a3ab;
font-weight: 500;
font-size: 19px;
}
.monthFlex{
margin: 20px 0 23px;
border-radius: 6px;
overflow: hidden;
}
.monthFlex .w100{
padding: 11px 15px;
background: rgb(0 0 0 / 12%);
line-height: 1.25;
}
.monthFlex .amt1{
font-size: 19px;
font-weight: 600;
color: #99a3ab;
}
.monthFlex .amt2{
font-size: 13px;
margin: 4px 0 0;
}
.ribbon{
background: #453e6a;
color: white;
width: 210px;
padding: 45px 17px 9px;
text-align: center;
line-height: 1;
transform: rotate(43deg);
right: -88px;
top: -31px;
transition: 0.3s ease;
}
.ribbon .top{
font-size: 26px;
font-weight: 500;
}
.ribbon .bottom{
font-size: 12px;
}
.monthlyCont .cardPackBox:hover .ribbon{
right: -83px;
top: -26px;
}
.memPoints li{
font-size: 13px;
}
.memPoints li{
display: flex;
padding-left: 20px;
position: relative;
}
.memPoints li::before{
content: '';
position: absolute;
width: 7px;
height: 7px;
background: #484c5a;
border-radius: 100px;
top: 7px;
left: 0;
}
.oneTimBox{
padding: 18px 20px;
border-radius: 7px;
background: #32353e;
margin: 0 0 20px;
color: #7f838d;
}
.oneTimBox .amt{
font-size: 33px;
font-weight: 500;
margin: 6px 0 0;
}
.oneTimBox .icon{
height: 30px;
opacity: 0.13;
}
.oneTimBox .price{
width: 60%;
color: #a1a5af;
}
.oneTimBedge{
font-size: 17px;
}
.otBtnFlex{
align-items: center;
padding: 16px 0 0;
border-top: 1px solid #3e4044;
margin: 17px 0 0;
}
.oneTimBox .cont{
line-height: 1;
}
.cgray3{
color: #c6c9d1;
}
.oneTimBox button{
width: 40%;
font-size: 14px;
}
.cvNmbr{
color: #656d85;
}
.badge{
padding: 6px 10px;
border-radius: 4px;
font-weight: 600;
}
.badge-info{
background: #31567c;
color: #a9c3dd;
}
.badge-primary{
background: #3c414a;
color: #a9c3dd;
}
.badge-success{
background: #537044;
color: #ccd7c6;
}
.badge-danger{
background: #763939;
color: #dbbebe;
}
.badge-warning{
background: #765c10;
color: #e5d19a;
}
.trxCol{
display: flex;
align-items: center;
justify-content: space-between;
margin: 9px 0;
}
.trxCol span{
width: 50%;
}
.cardBox1{
padding: 35px 35px;
background-color: #32353e;
border-radius: 7px;
text-shadow: 0 1px rgb(0 0 0 / 72%);
background-image: url(../img/mapcard.png);
background-repeat: no-repeat;
background-size: 660px;
background-position: 130px -30px;
box-shadow: 0 0 12px rgb(11 12 16 / 12%);
}
.cardBox1 .mcImg{
height: 34px;
opacity: 0.12;
}
.cardBox1 .cnum{font-size: 30px !important;font-weight: 500;letter-spacing: 2px;}
.cardBox1 .val1{
font-size: 15px;
text-shadow: 0 1px rgb(0 0 0 / 72%);
}
.cardBox1 .val2{
color: #adb2c1;
font-size: 17px;
}
.cardBox1 .flex1{
margin: 0 0 50px;
line-height: 1.15;
}
.cardOptFlex .icon{
}
.cardOptFlex button{
text-align: center;
display: block;
padding: 10px 10px;
border-radius: 7px;
transition: 0.25s ease;
background: transparent;
border: none;
outline: none !important;
}
.cardOptFlex button:hover{
background: #1e2028;
}
.cardOptFlex i{
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 50px;
border-radius: 100px;
font-size: 19px;
background: #32353e;
margin: 0px auto 10px;
color: #828591;
transition: 0.25s ease;
}
.cardOptFlex .txt{
font-size: 13px;
color: #8b8f9b;
}
.cardOptFlex button:hover i
{
background: var(--second);
color: white;
}
.cardOptFlex button:hover .txt
{
color: #cacdd7;
}
.ccDelBtn{
color: #D32F2F;
border-radius: 100px;
border: none;
outline: none;
padding: 7px 15px;
font-weight: 600;
min-height: 40px;
background: #32353e;
border: 1px solid #D32F2F;
background: transparent;
}
.ccDelBtn:hover{
background: #D32F2F;
color: white !important;
}
.ccHidNmbr img{
width: 12px;
margin: 0 6px;
}
.ccHidNmbr{
margin: 0 5px;
}
.modal-content{
background: #252831;
}
.modal-header .btn-close{
background-image: url(../img/crossImg.png);
opacity: 0.3;
width: 7px;
height: 7px;
transform: translate(-12px, 0);
}
.modal-header .btn-close:hover{
opacity: 0.8;
}
.modal-title{
font-weight: 500;
color: #8a8e9b;
}
.modal-header,
.modal-footer
{
border-color: #3f424c;
}
.modal-body{
color: #7F828B
}
.form-select{
background-image: url(../img/dropArrow.png);
background-size: 13px;
}
.accMenu{
position: sticky;
top: 20px;
padding: 13px 20px;
background: #292c36;
border-radius: 7px;
}
.accMenu li{
}
.accMenu a{
padding: 10px 15px;
background: #2f3340;
margin: 11px 0;
border-radius: 7px;
font-size: 14px;
color: #999da9;
transition: 0.25s ease;
display: flex;
align-items: center;
}
.accMenu a:hover{
background: #3b4154;
color: #a7abb5;
}
.accMenu i{
margin-right: 15px;
color: gray;
}
.logLogo{
width: 170px;
}
.logregBox{
padding: 60px 0;
}
.inppad1{
font-size: 16px;
padding: 10px 15px;
}
.logregBox .inp1{
margin: 0 0 20px;
}
.logBtnBox a{
width: 100%;
display: block;
text-align: center;
padding: 11px 9px;
background: #383c46;
border-radius: 7px;
display: flex;
margin: 0 0 13px;
align-items: center;
justify-content: center;
color: white;
transition: 0.25s ease;
}
.logBtnBox i{
margin-right: 10px;
}
.logBtnBox .google{
background: #EA4335;
}
.logBtnBox .facebook{
background: #3B5997;
}
.logBtnBox .twitter{
background: #1D9BF0;
}
.logBtnBox .google:hover{
background: #cd2f22;
}
.logBtnBox .facebook:hover{
background: #234895;
}
.logBtnBox .twitter:hover{
background: #0674bf;
}
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(--second);
-webkit-text-fill-color: #b5b5b5;
-webkit-box-shadow: 0 0 0px 1000px transparent inset;
transition: background-color 5000s ease-in-out 0s;
}
.passBack{
}
.showPassBtn{
display: flex;
font-size: 12px;
align-items: center;
justify-content: center;
right: 14px;
top: 10px;
color: #b5b5b5;
background: #323642;
border-radius: 100px;
width: 25px;
height: 25px;
}
.showPassBtn-active{
background: #1e2128;
}
.accMenu .active a{
background: var(--second);
color: white
}
.accMenu .active i{
color: white !important
}
.table{
}
.table th{
}
.table td{
color: #a7a7a7;
background: transparent;
border-color: #494b52;
font-size: 14px;
}
.dropdown-menu{
background: #4e525c;
color: #bcc0cb;
font-size: 13px;
}
.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover
{
background: #3a3d42;
}
.datepicker table tr td.day:hover, .datepicker table tr td.focused
{background: #3a3d42;color: white;}
.datepicker-dropdown.datepicker-orient-top:after
{
border-top: 6px solid #4e525c;
}
.datepicker table tr td.active.active, .datepicker table tr td.active.highlighted.active, .datepicker table tr td.active.highlighted:active, .datepicker table tr td.active:active
{
background-color: var(--second);
border-color: var(--second);
}
.datepicker table tr td.active.active.focus, .datepicker table tr td.active.active:focus, .datepicker table tr td.active.active:hover, .datepicker table tr td.active.highlighted.active.focus, .datepicker table tr td.active.highlighted.active:focus, .datepicker table tr td.active.highlighted.active:hover, .datepicker table tr td.active.highlighted:active.focus, .datepicker table tr td.active.highlighted:active:focus, .datepicker table tr td.active.highlighted:active:hover, .datepicker table tr td.active:active.focus, .datepicker table tr td.active:active:focus, .datepicker table tr td.active:active:hover
{
background-color: var(--second);
border-color: var(--second);
}
.form-check-input[type=checkbox]
{
border-radius: 0.25em;
background: #494e5c;
height: 20px;
width: 20px;
}
.form-check-input:checked{
background-color: var(--second);
border-color: var(--second);
}
.form-check-input:focus{
box-shadow: none !important;
}
.form-check{
border: 1px solid #565c6c;
padding: 7px 31px;
border-radius: 7px;
}
.form-check-input:focus{
border: none !important;
}
.fileInp{
background: #252831;
color: #72788b !important;
border: 1px solid #565c6c !important;
font-size: 15px;
}
.fileInp:focus{
background: #50586e;
box-shadow: none !important;
}
/* landing page START */
.homeHeader{
position: fixed;
width: 100%;
left: 0;
top: 0;
padding: 40px 0;
z-index: 10;
transition: 0.3s ease;
}
.homeLogo{
width: 160px;
}
.mainUl{
text-align: right;
}
.mainUl li{
display: inline-block;
}
.main-link{
display: block;
margin-right: 20px;
color: #b2b2b2;
transition: 0.3s ease;
font-size: 16px;
}
.main-link:hover{
color: #fff;
}
.headBtn{
padding: 8px 26px;
font-size: 16px;
}
.logBtn{
margin-right: 20px;
}
.heroHome {
padding: 200px 0 40px;
text-align: center;
background: url(../img/back1.png) no-repeat center;
background-size: 72%;
min-height: 690px;
}
.heroHome .head{
font-size: 74px;
min-height: 190px;
}
.heroHome p{
margin: 25px auto 50px;
max-width: 510px;
}
.heroBtn{
padding: 14px 56px;
margin: 0 12px;
}
.homeBlock1{
padding: 50px 50px;
background: var(--first);
border-radius: 10px;
transition: 0.3s ease;
border-top: 4px solid #3a3a46;
box-shadow: 0 7px 32px #14151a24;
}
.homeHead1{
font-size: 47px;
color: #a0a3af;
letter-spacing: -1px;
}
.btSlid{
padding: 90px 0 0;
}
.padder1{
padding: 70px 0
}
.homeHead2{
font-size: 42px;
/* color: #82848f; */
}
.list1{
}
.list1 li{
display: flex;
align-items: center;
margin: 0 0 20px;
}
.list1 .icon{
display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 60px;
border-radius: 9px;
background: #3e3e4c;
margin-right: 28px;
}
.list1 .icon img{
width: 31px;
}
.topSubTxt{
padding: 4px 23px;
background: rgb(152 152 169 / 7%);
display: inline-block;
border-radius: 100px;
margin: 0 0 17px;
color: #87898f;
}
.linkBtn{
border-bottom: 2px solid;
padding: 0 0 3px;
}
.borderTop{
border-top: 2px solid #343742;
}
.arrowList{
}
.arrowList li{
background: url(../img/arrow11.png) no-repeat 0;
background-size: 22px;
padding-left: 41px;
}
.btnFlex1 a{
padding: 13px 40px;
margin: 0 12px;
}
.footLogo{
width: 164px;
}
.footer{
padding: 47px 0;
font-size: 14px;
}
.footLinks{
}
.footLinks a{
color: #7F828B;
margin: 0;
display: inline-block;
margin: 0 0 4px;
}
.footHead{
font-size: 20px;
font-weight: 600;
margin: 0 0 20px;
}
.footLinks a:hover{
color: var(--second);
}
.footSocial a{
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 34px;
font-size: 20px;
background: #2e2e38;
transition: 0.3s ease;
margin-right: 13px;
}
.footSocial a:hover{
background: var(--second);
color: white;
}
.iphone1{
background: url(../img/iphone1.png) no-repeat;
background-size: contain;
height: 770px;
width: 540px;
display: block;
transform: translate(30px, -20px);
}
.ov{ overflow: hidden; }
.btfooter{
background: #252831 url(../img/cardsBack1.png);
background-size: cover;
}
.card1{
background-size: contain;
background: url(../img/card1.png) no-repeat;
width: 490px;
height: 390px;
background-size: contain;
left: -170px;
}
.card2{
background-size: contain;
background: url(../img/card2.png) no-repeat;
width: 490px;
height: 390px;
background-size: contain;
right: -170px;
}
.card3{
background: url(../img/card3.png) no-repeat;
width: 340px;
height: 260px;
background-size: contain;
top: 23px;
left: 34px;
}
.cardarrow{
bottom: 10px;
right: 30px;
width: 70px;
transition: 0.3s ease;
}
.cardarrow:hover{
transform: scale(1.1);
}
.bgTop{
}
.typed-cursor{
display: none;
}
.moneyimg{
height: 120px;
margin-right: 30px;
}
.canUseCont{
}
.canUseCont .inner{
background: #2e2e38;
padding: 22px 40px;
max-width: 940px;
margin: auto;
border-radius: 10px;
}
.canUseCont img{
height: 26px;
margin-left: 40px;
}
.safeimg{
width: 380px;
}
.homeSec1{
margin-bottom: 80px;
}
.inpContact{
width: 100%;
padding: 12px 24px;
border: none;
background: var(--first);
border-radius: 7px;
margin: 0 0 29px;
outline: none !important;
}
.txtarea2{
min-width: 100%;
max-width: 100%;
min-height: 180px;
max-height: 500px;
}
.inpContact:hover,
.inpContact:focus{
border: 1px solid var(--second);
}
.contactContainer{
padding: 20px 0 100px;
}
.faqBack{
background: var(--first);
margin: 0 0 28px;
border-radius: 7px;
overflow: hidden;
}
.faqQuestion{
font-size: 18px;
font-weight: 600;
padding: 15px 22px;
color: #95979b;
}
.faqAnswer{
padding: 20px 30px;
color: #7F828B;
font-size: 16px;
border-top: 2px solid #343844;
display: none;
}
.faqContBack{
padding-left: 80px;
}
.faqArrow{
font-size: 13px;
color: #5d5d66;
}
.faqQuestion:hover{
background: #3b3b44;
}
.fs15{ font-size:15px !important }
.sticky{
position: sticky;
top: 50px;
}
.priceCont{
}
.priceBox{
text-align: center;
background: var(--first);
padding: 40px 40px;
border-radius: 7px;
border-top: 4px solid #ffffff0d;
box-shadow: 0 7px 32px #14151a24;
margin: 0 9px;
transition: 0.3s ease;
}
.priceImgBack{
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
margin: auto;
border-radius: 100px;
background: #00000012;
/* border: 4px solid lab(100 0 0 / 0.05); */
box-shadow: 0 -2px 0 rgb(255 255 255 / 12%);
}
.priceImgBack img{
width: 50px;
}
.priceBox .amt{
margin: 25px 0 20px;
color: var(--second);
font-weight: 700;
}
.priceBox .sign{
font-size: 34px;
transform: translate(0, -12px);
display: inline-block;
}
.priceBox .cost{
font-size: 60px;
line-height: 1;
}
.priceLine{
margin: 30px 0;
background: #787891 !important;
}
.priceBox .name{
font-size: 23px;
font-weight: 700;
color: #a9a9b1;
}
.priceList1{
margin: 30px 0 40px;
}
.btnprice{
}
.priceList1 i{
margin-right: 18px;
font-size: 14px;
}
.priceList1 li{
margin: 14px 0;
display: flex;
align-items: center;
color: #8b8b99;
font-size: 16px;
}
.priceBtn2{
font-size: 15px;
padding: 10px 10px;
}
.priceBox2{
background: var(--second);
color: white;
}
.priceBox2 *{
color: white !important;
}
.priceBox2 hr{
background: white !important;
}
.priceBox2 .priceImgBack{}
.priceBox2 img{
opacity: 1;
}
.priceBox2 .priceBtn2{
background: #c11664;
}
.priceBox2 .priceBtn2:hover{
background: #81063e;
}
.pt0{ padding-top:0 }
.pb0{ padding-bottom:0 }
.priceBox:hover{
transform: scale(1.05);
background: #3e3e4c;
}
.priceBox2:hover{
background: #b3145d;
}
.featBox{
text-align: center;
padding: 30px 50px;
background: #2e2e38;
border-radius: 7px;
margin: 10px 0;
}
.featIconBack{
display: flex;
width: 90px;
height: 90px;
align-items: center;
justify-content: center;
border-radius: 100px;
margin: 0 auto 0;
background: #2b2b34;
}
.featIconBack img{
width: 50px;
}
.featBox .title{
font-size: 23px;
margin: 20px 0 20px;
}
.featBox p{
color: #7F828B;
font-size: 15px;
}
.featCont{
/* border-bottom: 1px solid #3b3f4a; */
padding-bottom: 0;
}
.header_fixed{
padding: 18px 0;
background: #1d2028;
}
.menyBars{
display: none;
right: 20px;
top: 0;
}
.menyBars span{
display: block;
background: #525252;
width: 20px;
height: 3px;
margin: 5px 0;
}
/* landing page END */
.container{
max-width: 1200px;
}
/* Chat box START */
.appTop{height: 100%;overflow-y: auto;}
.appBottom{
display: flex;
background: #2f323a;
border-radius: 11px;
overflow: hidden;
box-shadow: 0 2px 0 rgb(0 0 0 / 15%);
}
.userMsgBox{
display: flex;
justify-content: flex-end;
margin: 0 0 20px;
}
.userMsgBox .msg{background: #2f323a;padding: 16px 24px;border-radius: 13px;margin-right: 12px;max-width: 1190px;color: #dddddd;white-space: pre-line;box-shadow: 0 2px 0 rgb(0 0 0 / 15%);}
.userMsgBox .img{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 42px;
height: 42px;
background: #353942;
border-radius: 13px;
box-shadow: 0 2px 0 rgb(0 0 0 / 15%);
}
.userMsgBox img{
filter: invert(1);
width: 25px;
}
.chatPage{
padding: 24px 20px;
height: 100%;
font-size: 16px;
}
.robotMsgBox{
display: flex;
justify-content: flex-start;
margin: 0 0 20px;
}
.robotMsgBox .msg{
background: #2f323a;
padding: 16px 24px;
border-radius: 13px;
margin-left: 12px;
max-width: 1190px;
color: #dddddd;
white-space: pre-line;
box-shadow: 0 2px 0 rgb(0 0 0 / 15%);
}
.robotMsgBox .img{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 42px;
height: 42px;
background: var(--second);
border-radius: 13px;
box-shadow: 0 2px 0 rgb(0 0 0 / 15%);
}
.robotMsgBox img{
filter: invert(1);
width: 25px;
}
.appBtnBox{
display: flex;
width: 100%;
}
.inpChatTxt{
width: 100%;
padding: 17px 20px 8px;
background: none;
border: none !important;
outline: none !important;
color: white;
height: 70px;
overflow-y: auto;
resize: none;
}
.chatBtn{
background: none;
border: none !important;
outline: none !important;
padding: 0 14px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.45;
transition: 0.3s ease;
}
.chatBtn img{
filter: invert(1);
width: 29px;
}
.chatBtn:hover{
background: #1e2128;
opacity: 1;
}
.chatPage .inner{
max-width: 1300px;
margin: auto;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.appTop::-webkit-scrollbar {
display: none;
}
.appTop {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.startBox{
text-align: right;
max-width: 650px;
float: right;
}
.startOpt{
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
.chatOption{
cursor: pointer;
padding: 8px 17px;
display: inline-block;
background: #2f323a;
border-radius: 100px;
color: #b9b9b9;
margin-left: 13px;
margin-top: 22px;
border: 1px solid #424242;
transition: 0.3s ease;
font-size: 15px;
box-shadow: 0 2px 0 rgb(0 0 0 / 15%);
}
.chatOption:hover{
background: #3a3e48;
}
/* Chat box END */
.homeHead1{
font-size: 30px !important;
}
@media screen and (max-width: 992px) {
.block992, .trxCol, .trxCol span
{ display: block; }
.hide992, .dashTopLinks a:hover::before, .tabCol5
{ display: none; }
.sideBtn1, .oneTimBox button, .trxCol span
{ width: 100% }
.jcb992
{ justify-content: space-between }
.tac
{ text-align:center }
.jc992
{ justify-content:center }
.leftInner{
padding: 10px 6px;
}
.leftInner .dash{
width: auto;
height: 2px;
opacity: 0.5;
}
.dashTopLinks{
display: flex;
overflow-x: auto;
padding-bottom: 7px;
}
.dashTopLinks li{
min-width: fit-content;
}
.mb10_{ margin-bottom: 10px }
.mb15_{ margin-bottom: 15px }
.mb20_{ margin-bottom: 20px }
.mb30_{ margin-bottom: 30px }
.mb40_{ margin-bottom: 40px }
.mt10_{ margin-top: 10px }
.mt15_{ margin-top: 15px }
.mt20_{ margin-top: 20px }
.mt30_{ margin-top: 30px }
.mt40_{ margin-top: 40px }
.dashTopLinks a{
background: #373741;
padding: 5px 12px;
display: block;
margin-right: 11px;
border-radius: 7px;
}
.cardSelOpton{
margin: 6px 0;
}
.themeimg{
width: 27px;
opacity: 0.5;
}
.themei
.userBackInner img{
margin-right: 0;
}
.block1{
padding: 20px 10px;
}
.trxCol{
font-size: 16px;
}
.heading1 {
font-size: 25px;
}
.cardBox1{
padding: 24px 29px;
}
.bg1userDetBox{
padding: 17px 12px;
}
.mobCol{
padding: 14px 20px;
background: #20222a;
position: fixed;
top: 0;
z-index: 999;
left: 0;
}
.dashboardContainer{
padding-top: 90px;
}
.dropdown{
padding: 7px 13px;
}
.userBackInner .name {
font-size: 20px;
}
.inviteBlock1 .head{
font-size: 37px;
}
.themeModBack i{
font-size: 30px;
}
.inp2{
width: 100%;
margin: 9px 0;
}
.btnfull, .actionDropdown
{
width: 100%;
display: block;
text-align: center;
}
.filderbtn {
padding: 10px 10px;
}
.actionDropdown{
padding: 0;
}
.cnameBack .flex{
justify-content: center;
}
.actionBtn {
background: transparent;
border: 1px solid #3d404a !important;
}
.inviteBlock1{
padding: 30px 30px;
}
.megaphone{
transform: scale(0.9);
margin: 40px auto 0;
}
.refShareFlex a{
width: 100%;
display: block;
border-bottom: 1px solid #5c606c;
}
.refDetBox img{
width: 61px;
margin-right: 22px;
}
.refDetBox{
padding: 22px 20px;
}
.refTabSingle {
flex-wrap: wrap;
}
.refTabSingle .earn{
width: 100%;
margin: 10px 0 0;
padding: 8px 0;
}
.refTabSingle .email{
width: initial;
}
.cardSel1{
margin: 0 !important;
}
.cardBox1 .cnum{
font-size: 27px !important;
}
.logRegPage{
padding: 0 10px;
}
/* landing page media START */
.block992, .menyBars
{ display: block }
.hide992,
{ display: none }
.headBtnFlex,.headBtn
{ width: 100%; }
.tac
{ text-align:center }
body{
font-size: 15px !important;
}
.mainUl{padding: 23px 0 0;}
.mainUl li{
display: block;
}
.main-link{
display: block;
margin: 0;
padding: 6px 10px;
text-align: center;
}
.homeHeader{
padding: 18px 0;
background: #1d2028;
}
.headBtnFlex {
margin: 30px 0 0;
}
.heroHome .head{
font-size: 40px;
display: block;
line-height: 1.5;
min-height: 120px;
}
.heroBtn{margin: 15px 0;padding: 9px 19px;}
.heroHome{
padding: 110px 0 130px;
min-height: initial;
}
.homeLogo {
width: 150px;
}
.footLogo {
width: 130px;
}
.fs20_ { font-size: 20px }
.fs22_ { font-size: 22px }
.fs24_ { font-size: 24px }
.homeHead1{
font-size: 37px;
}
.landPartBox img{
text-align: center;
margin: 0;
height: 24px;
margin: 12px 15px;
}
.landPartBox{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.canUseCont .inner{
padding: 26px 30px;
}
.featBox{
padding: 29px 30px;
margin: 8px 0;
}
.padder1 {
padding: 30px 0;
}
.priceBox{
margin: 9px 0;
transform: none !important;
padding: 24px 20px;
}
.safeimg{
position: relative;
width: 82%;
transform: none;
}
.homeBlock1{
padding: 26px 23px;
}
.card3{
position: static;
width: 100%;
transform: none;
}
.faqContBack{
padding: 50px 0 0;
}
.faqQuestion{
font-size: 16px;
padding: 13px 16px;
}
.faqAnswer{
padding: 16px 22px;
font-size: 14px;
}
.btfooter .btnfull{
margin: 19px 0;
}
.footHead{
margin: 28px 0 10px;
border-top: 1px solid #3c3f48;
padding: 25px 0;
}
.footSocial{
justify-content: center;
}
.fs20_{ font-size:20px !important }
.homeHead1{
font-size: 28px !important;
line-height: 1.6;
display: block;
text-align: center;
}
.homeHead1 img{
display: none;
}
.card2{
transform: rotate(31deg);
width: 300px;
left: 0;
right: 0;
margin: auto;
transition: none;
height: 210px;
bottom: -90px;
}
/* landing page media END */
.featBox .title {
font-size: 19px;
}
} /* media 992 */
.pricinglet{
background: var(--first);
padding: 40px 50px;
font-size: 15px;
border-radius: 17px;
}
.pricing2Cont{
padding: 60px 0;
}
.pricReBox{
padding: 20px 20px;
background: #252831;
border-radius: 10px;
margin: 20px 0 0;
}
.pricReBox .head{
font-size: 16px;
font-weight: 500;
margin: 13px 0 0;
color: #7F828B;
}
.pricReBox .amt{
font-size: 30px;
}
.btnpric2{
padding: 4px 9px;
font-size: 14px;
}
.pricing2Cont .head1{
font-size: 23px;
margin: 40px 0 13px;
}
.pricinRight{
padding: 50px 0 0 50px;
}
.pricinRight .head2{
margin: 0 0 20px;
}
.price2MainBo{
width: 100%;
padding: 30px 30px;
background: var(--first);
border-right: 1px solid #3a3a48;
}
.price2MainBo .name{
font-size: 16px;
margin: 0 0 9px;
}
.price2MainBo .sign{
font-size: 27px;
color: #7F828B;
margin-right: 4px;
}
.price2MainBo .cost{
font-size: 30px;
margin-right: 9px;
}
.price2MainBo .time{
font-size: 16px;
color: #7F828B;
}
.listpri2{
margin: 30px 0 30px;
}
.listpri2 i{
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
background: #252831;
margin-right: 12px;
border-radius: 8px;
font-size: 9px;
}
.listpri2 li{
display: flex;
margin: 0 0 14px;
font-size: 14px;
}
.pr2Btn{
padding: 12px 19px;
font-size: 13px;
width: 100%;
font-weight: 600;
}
.price2Flex{
display: inline-flex;
width: 100%;
margin: 60px 0 0;
}
.price2Flex .amtFlex{
align-items: center;
}
.price2Flex .price2MainBo:nth-last-child(1){
border: none !important;
border-radius: 0 12px 12px 0;
}
.price2Flex .price2MainBo:nth-child(1){
border-radius: 12px 0 0 12px;
}
.modpriceBox{
background: var(--second);
color: white;
transform: scale(1.06);
border-radius: 12px;
}
.modpriceBox li i{
background: rgb(255 255 255 / 22%);
color: white;
}
.modpriceBox .time,
.modpriceBox .sign
{
color: white !important;
}
.modpriceBox .pr2Btn
{
background: var(--first);
}
.modpriceBox .pr2Btn:hover{
background: #181824;
}
.pricRigBottom{
margin: 70px 0 0;
}
.btn4{
border: 1px solid;
padding: 12px 13px;
}
.btn4:hover,
.btn4:focus{
color: white;
}
.pricRigBottom .btn4{
padding: 17px 50px;
color: #9b9b9b;
border: 1px solid #4a4a4a;
}
.pricRigBottom .btn4:hover,
.pricRigBottom .btn4:focus{
background: var(--second);
color: white !important;
}