/* Typography */
@font-face {
    font-family: 'Inter 18pt';
    src: url('../fonts/Inter18pt-SemiBold.woff2') format('woff2'),
        url('../fonts/Inter18pt-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt';
    src: url('../fonts/Inter18pt-Regular.woff2') format('woff2'),
        url('../fonts/Inter18pt-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



/* End typography */

:root{
  --white: #ffffff;
  --of-white:#CCC;
  --black: #000;
  --light-black:#110424;
  --mid-black:#0F0314;
  --purple: #210D29;
  --artyclick-amber:#FFB901;
  --ash:#D6D6D6;
  --green:#27FF01;
  --blue:#6C44FF;
  --bordar-color:#322740;
  --light-purple:#6937AF;
  --red:#FF0105;
  --purple-elipse:rgba(105, 55, 175, 0.71);
  --jaguar:#0F0314;
  --haiti:#210D29;
  --light-jaguar:#1D0731;
  --bright-purple:#911ABC;
  --off-purple:#2a1a44;
  --bordar-btm:#3C0C4D; 

  --inter: 'Inter 18pt', sans-serif;

}
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

html { overflow-x: hidden; }

body { background-color: var(--black); color: var(--white); overflow: hidden; font-family: var(--inter); font-size: 1.111vw; font-weight: 400; line-height: normal;text-transform: capitalize;}

ul{list-style: none;}

a{text-decoration: none; display: inline;}

img{max-width: 100%; font-style: italic;}

.main-wrap{min-height: 100%; overflow: hidden; position: relative; overflow-x: hidden;}

header, section, main, footer {width: 100%; display: flex; align-items: center; justify-content: center;  flex-flow: column; position: relative;}

.wrapper{width: 100%; max-width: 84.5em; padding-inline: 20px;}
/* Global style */
h1, h2, h3, h4, h5, h6{font-family: var(--inter);font-weight: 400;}

h1{ /*font-size: 60px;*/ font-size: 3.89em; font-family: var(--inter);font-weight: 600;font-style: normal;line-height: 113.2%;letter-spacing: .02em;} 
h2{ /*font-size: 48;*/ font-size: 3em; font-family: var(--inter);font-weight: 600;font-style: normal;}
h3{font-size: 1.25em;font-family: var(--inter);font-weight: 600;font-style: normal;}

p{font-size: 1em;font-family: var(--inter);font-weight: normal;font-style: normal;}
span, em, dfn{display: inline-block;}

.lead-text{font-size: 20px; line-height: 38px; color: var(--black);}
.small-text{font-size: 16px; line-height: 28px;}

dfn, address, em{font-style: normal;}
label, input[type="submit"]{cursor: pointer;}
button:focus{outline: none;}
.btn{-webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; transition: all .4s ease-in-out; text-align: center;  display: inline-flex; align-items: center; justify-content: center; color: var(--white);font-size: 1em;line-height: 113.793%;font-weight: 600;width: 100%;min-height: 2.75em;position: relative;padding: 0.75em 0.75em;text-transform: uppercase;}
.btn::after{position: absolute;left: 0;top: 0;content: "";width: 0.606em; height: 2.563em;background-image: url(../svgs/btn-svg.svg);background-repeat: no-repeat;background-position: center;background-size: contain;}
.btn::before{position: absolute;right: 0;bottom: 0;content: "";width: 3.013em; height: 0.623em;background-image: url(../svgs/btn-svg-btm.svg);background-repeat: no-repeat;background-position: center;background-size: contain;}
.btn.black-btn{background-color: var(--black);border: 1.517px solid #D6D6D6;}
.btn.yellow-btn{background-color: var(--artyclick-amber);border: 1.517px;border-color: #FFF3B5;color: var(--black);}
.btn.green-btn{background-color: var(--green); border: 1.096px solid #B7FFB5;}
.btn.blue-btn{background-color: var(--blue); border: 1.096px solid #CBB5FF;}
.btn.red-btn{background-color: var(--red);border: 1.096px solid #FFB5B6;}
.btn.purple-btn{background-color: var(--bright-purple);}

.mobi{display: none;}
.desk{display: block;}

/* Flex style */

.flex{display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-flow: row wrap;}
/* End Flex style */



/* Start Home Style */
/* Start heder section */
.main-header-section{padding-block: 1.1em;}
.header-inner{width: 100%;justify-content: space-between;align-items: center;position: relative; z-index: 22;}
.header-logo-wrap{width: 7.5em;min-height: 2.344em;display: flex;justify-content: space-between;}
.header-logo{width: 100%;margin-top: .2em;}
.header-logo img{width: 100%;}
.hamber-gar{width: 1.5em;}
.hamber-gar img{width: 100%;}
.nav-wrap{width: calc(100% - 7.5em);justify-content: flex-end;align-items: center;}
.main-nav{width: calc(100% - 9.75em);padding-right: 2em;}
.main-nav ul{width: 100%; display:flex; justify-content: flex-end;gap: 1.75em;}
.main-nav ul li {display: flex;}
.main-nav ul li a{color: var(--white);font-family: var(--inter);font-weight: 400;text-transform: uppercase;letter-spacing: .051em;}
.nav-btn{width: 9.75em;}
.nav-btn .btn::before{background-image: url(../svgs/ash-btm.svg);}
.nav-btn .btn::after{background-image: url(../svgs/ash.svg);}

/* End heder section */
/* Start hero section */
.hero-section{padding-block: 7em 5em;position: relative;}
.hero-absolute-element-wrap{width: 100%;height: 100%; position: absolute;top: 0;left: 0;}
.hero-absolute-element{position: absolute;}
.hero-absolute-element.one { top: 5.5%; left: 10%; transform: rotate(65.965deg); width: 5.302em; height: 4.402em; }
.hero-absolute-element.two { top: 2%; right: 9%; transform: rotate(-1.035deg); width: 8.302em; height: 4.402em; }
.hero-absolute-element.three { top: 12%; right: 8.5%; transform: rotate(-1.035deg); width: 3em; height: 4.402em; }
.hero-absolute-element.four { top: 22.5%; right: 26.1%; transform: rotate(-3.035deg); width: 4em; height: 4.402em; }
.hero-absolute-element.five { top: 16.9%; left: 46.2%; transform: rotate(-65.035deg); width: 5em; height: 4.402em; }
.hero-absolute-element.six { top: 25.9%; left: 27.2%; transform: rotate(-26.035deg); width: 5.5em; height: 4.402em; }
.hero-absolute-element.seven { top: 35.2%; left: 43.9%; transform: rotate(-106.035deg); width: 2.5em; height: 4.402em; }
.hero-absolute-element.eight { top: 35.5%; left: 54.1%; transform: rotate(-9.035deg); width: 3em; height: 4.402em; }
.hero-elipese { position: absolute; left: 35%; top: 19%; width: 28.375em; height: 16.938em; border-radius: 62.375; background-color: var(--purple-elipse); filter: blur(15.178em); }
.hero-inner{width: 100%;justify-content: center;align-items: center;}
.hero-content-wrap{width: 55.875em;justify-content: center;padding-bottom: 7.625em;}
.hero-content{width: 100%;margin-bottom: 2em;margin-top: .3em;display: flex ; flex-flow: row wrap; justify-content: center;}
.hero-content h1{max-width: 14em; text-align: center;text-transform: capitalize;padding-bottom: 0.267em;}
.hero-content h1 span{color: var(--artyclick-amber);}
.hero-content h1 em{position: relative;}
.hero-content em::before { position: absolute; top: 3%; left: 12.5%; content: ""; width: 0.6em; height: 0.4em; background-image: url(../svgs/text-absolute.svg); background-repeat: no-repeat; background-position: center; background-size: contain; }
.hero-content p{text-align: center;line-height: 150%;text-transform: capitalize;}
.hero-btn-wrap {width: 9.75em;}
.hero-slider-wrap{width: 100%;overflow: hidden;}
.slider-item-wrap{width: 100%;}
.slider-item{width: 100%;}
.slider-item img{width: 100%;}
/* End hero section */
/* Start offer section */
.offer-section{padding-block: 4.9em;}
.offer-inner{width: 100%;justify-content: center;}
.offer-content-wrap{width: 41.188em;margin-bottom: 4em;}
.offer-content-wrap h2{text-align: center;    padding-bottom: 0.22em;}
.offer-content-wrap h2 span{color: var(--artyclick-amber);}
.offer-content-wrap p{text-align: center;text-transform: capitalize;line-height: 150%;}
.offer-card-wrap{width: 100%;display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;gap: 2em;}
.offer-card-item{width: 100%;transition: .35s ease-in-out;}
.offer-card-thum-wrap{width: 100%;position: relative;margin-bottom: 1em;}
.offer-thum{width: 100%;}
.offer-thum img{width: 100%;}
.offer-btn-wrap{position: absolute;top: 2%;left: 3%;width: 4.375em;min-height: 1.5em;border: 1px solid var(--artyclick-amber);background-color: var(--light-purple);}
.offer-btn-wrap a{font-size: 0.75em;color: var(--white);font-weight: 600;line-height: 200%;text-transform: capitalize;text-align: center;display: block;position: relative;}
.offer-btn-wrap a::after { position: absolute; left: -.1em; top: -.1em; content: ""; background-image: url(../svgs/knif-yello.svg); width: 0.875em; height: 2em; background-repeat: no-repeat; background-position: center; background-size: contain;} 
.offer-btn-wrap a::before { position: absolute; right: -.1em; bottom: -.1em; content: ""; background-image: url(../svgs/knif-yello.svg); width: 0.875em; height: 2em; transform: rotate(-180deg); background-repeat: no-repeat; background-position: center; background-size: contain;} 
.offer-card-content-wrap{width: 100%; display: flex;flex-flow: row wrap; justify-content: space-between;gap: 1em;}
.offer-card-item:hover{color: var(--bright-purple);}
.card-content{width: 80%;transition: .35s ease-in;}
.card-content h3{padding-bottom: 0.3em;}
.card-content p{font-size: 0.875em;line-height: 128.571%;text-transform: capitalize;}
.card-content-thum{width: 14%;min-height: 2.75em;position: relative;}
.card-content-thum a{position: relative;display: flex;}
.card-content-thum a::after{position: absolute;top: 0;left: 0;width: 100%;height: 100%; content: " ";background-image: url(../svgs/card-purple-aro.svg);background-repeat: no-repeat;background-position: center;background-size: 100% 100%;opacity: 0;transition: .35s ease-in-out;}
.offer-card-item:hover .card-content-thum a::after{opacity: 1;}
.offer-card-item:hover .card-content-thum img{opacity: 0;}
.card-content-thum a img{width: 100%;opacity: 1;transition: .35s ease-in-out;}
/* End offer section */
/* Start avilable secction */
.avilable-section{padding-block: 5.5em;height: 100%; background-image: url(../img/free-fire.jpg);background-repeat: no-repeat;background-size: cover;background-position: center center;position: relative;}
.avilable-section::after{position: absolute;left: 0;top: 0;content: ""; width: 100%;height: 100%;background-color: var(--purple);opacity: 95%;}
.avilable-inner{width: 100%;position: relative;z-index: 1;justify-content: center;}
.avilable-content-wrap{width: 41.188em;display: flex;flex-flow: row wrap;justify-content: center;margin-bottom: 4em;}
.avilable-content-wrap h2{width: 8.146em;text-align: center;text-transform: capitalize;padding-bottom: 0.333em;}
.avilable-content-wrap h2 span{color: var(--artyclick-amber);}
.avilable-content-wrap p{text-align: center;text-transform: capitalize;}
.avilable-card-item-wrap{width: 100%;display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 2em;}
.avilable-card-item{width: 100%;display: flex;flex-flow: nowrap;gap: 1em;align-items: center;border: 1px solid var(--bright-purple);padding: 0.75em;background-color: var(--light-black);}
.avilable-card-thum{width: 8.563em;height: 100%;}
.avilable-card-thum img{width: 100%;height: 100%;}
.avilable-card-content{width: calc(100% - 8.563em);}
.avilable-card-content h4{font-size: 1em; font-weight: 600;padding-bottom: 0.5em;}
.avilable-card-content p{max-width: 86%; font-size: 0.75em;color: var(--of-white);line-height: 150%;padding-bottom: 1em;}
.avilable-card-btn{width: 9.5em;}
/* End avilable secction */
/* Start latest order section */
.latest-order-section{padding-block: 5.5em;border-bottom: 1px solid var(--light-purple);}
.latest-order-inner{width: 100%;justify-content: space-between;}
.latest-order-content-wrap{width: 40%;position: relative;display: flex;flex-flow: row wrap;gap: 4.438em;}
.latest-order-content-wrap::after { width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-image: url(../img/group-image.png);background-repeat: no-repeat;background-size: 92% 130%;background-position: center;content: "";opacity: 0;}
.latest-order-content{width: 100%;}
.latest-order-content h2{max-width: 8em;padding-bottom: 0.333em;}
.latest-order-content span{color: var(--artyclick-amber);}
.order-card-item-wrap{width: 47%;background-color: var(--mid-black);padding: 1.5em;display: flex;flex-flow: row wrap;gap: 0.75em;}
.order-card-item{width: 100%;padding: 0.75em;background-color: var(--purple);display: flex ; flex-flow: row wrap; justify-content: space-between;}
.order-card-item-content-wrap{width: 15.5em;display: flex ; flex-flow: nowrap;align-items: center;}
.order-card-item-thum{width: 4.5em;height: 100%;margin-right: 1em;}
.order-card-item-thum img{width: 100%;height: 100%;}
.order-card-item-content{width: calc(100% - 5em);}
.order-card-item-content h3{padding-bottom: 0.333em;}
.order-card-item-content span{color: var(--of-white);}
.order-card-item-btn-wrap{width: 7.125em;display: flex ; flex-flow: row wrap; align-content: space-between;}
.order-card-item-btn-wrap span{font-size: 0.625em;color: var(--ash);text-align: right;width: 100%;}
.order-card-item-btn { width: 100%; }
.order-card-item-btn .btn{font-size: 0.85em;color: var(--black);}
.order-card-item-btn .btn::after{height: 31px;}
.latest-order-thum { width: 100%; height: 100%; }
.latest-order-thum figure{width: 100%;}
.latest-order-thum figure img{width: 100%;}
/* Start latest order section */
/* Start footer section */
.main-footer-section{padding: 5.5em 0 2em 0;}
.footer-inner{width: 100%;}
.footer-content-wrap { width: 75%; display: flex;flex-flow: row wrap;gap: 7.75em; }
.footer-content{width: 30%;}
.footer-content h3{color: var(--bright-purple);padding-bottom: 0.667em;}
.footer-content p{padding-bottom: 1.5em;}
.footer-support-links{width: 100%;}
.footer-support-links ul{display: flex;flex-flow: row wrap;gap: 0.75em;}
.footer-social-link-wrap{width: 100%;display: flex;flex-flow: row wrap;gap: 0.75em;}
.footer-social-link{width: 2em;height: 2em;position: relative;transition: .35s ease-in-out;}
.footer-social-link a img{width: 100%;}
.footer-absolute-element {position: absolute;top: 0;left: 0;opacity: 0;}
.footer-social-link:hover .footer-absolute-element{opacity: 1;transition: 0.35s ease-in-out;}

.footer-bottom-content{width: 25%;display: flex ; align-items: end;}
.footer-bottom-content p{text-align: right;}
/* End footer section */
/* End Home Style */
/* Start topup section */
.topup-scetion{padding-block: 5.5em;border-bottom: 1px solid var(--bordar-btm);position: relative;}
.topup-inner{width: 100%;position: relative;}
.topup-card-form-wrap{width: 100%;}
.topup-wrap .avilable-card-item{margin-bottom: 2em;}
.topup-wrap .avilable-card-thum{width: 7.188em;}
.topup-wrap .avilable-card-content h4{font-size: 1.5em;padding-bottom: 0.167em;line-height: 100%;}
.topup-wrap .avilable-card-content p{font-size: 1em;padding-bottom: 0;}
.topup-card-wrap {width: 100%;flex-flow: row wrap;gap: 2em;align-items: flex-start;}
.topup-card-item-wrap{width: 64%;display: flex;flex-flow: row wrap;padding: 1.5em;border: 1px solid var(--bordar-color);background-color:var(--jaguar);}
.topup-card-content { width: 100%; display: flex ; flex-flow: row wrap; gap: 0.75em; align-items: center;padding-bottom: 1em;border-bottom: 1px solid var(--bordar-color);margin-bottom: 1.5em;} 
.topup-card-content figure{width: 2em;height: 2em;}
.topup-card-content figure img{width: 100%;}
.topup-card-content h3{font-size: 1.25em;line-height: 120%;}
.uid-topup-wrap{width: 100%;}
.grid-wrap { width: 100%; display: grid; grid-template-columns:1fr 1fr 1fr; row-gap: 1.288em;column-gap: 1.25em;}
.grid-item {width: 100%; background: var(--purple); border: 1px solid transparent;padding: 1.13em 1em; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: 0.35s ease-in-out; }
.grid-card-content { width: 80%; display: flex ; gap: .5em; align-items: center; }
.grid-item.active {border-color: var(--light-purple);}
.grid-item:hover { border-color: var(--light-purple);}
.grid-item:hover .price{color: var(--light-purple);}
.title { font-size: 0.75em; color: var(--of-white); }
.price { font-weight: 600; font-size: 0.875em; color: var(--white); transition: .35s ease-in-out;} 
.grid-item input[type="radio"] { display: none; }
.circle { width: 1.125em; height: 1.125em; border-radius: 50%; border: 1px solid var(--ash); display: inline-block; position: relative; transition: .35s ease-in-out;}
.grid-item input[type="radio"]:checked + .circle { border-color:var(--bordar-color); }
.grid-item .circle::after { content: ""; width: 100%; height: 100%;background-color: var(--bright-purple); border-radius: 50%; position: absolute; top: 0; left: 0; opacity: 0; transition: .35s ease-in-out;}
.grid-item input[type="radio"]:checked + .circle::after {opacity: 1;}
.topup-payment-wrap { width: 33.562%; display: flex;flex-flow: row wrap;gap: 2em;}
.account-information{width: 100%;padding: 1.5em;background-color: var(--jaguar);border: 1px solid var(--bordar-color);}
.account-content-item {width: 100%; padding-bottom:1em; display: flex ; flex-flow: row wrap; align-items: center; gap: 0.75em;border-bottom: 1px solid var(--bordar-color);margin-bottom: 1.5em;}
.account-content-item figure{width: 2em;height: 2em;}
.account-content-item figure img{width: 100%;}
.account-content-item h3{font-size: 1.25em;}
.account-information h4{font-size: 0.875em;line-height: 114.286%;color: var(--of-white);padding-bottom: 0.857em;}
.account-information input{width: 100%; padding: 1.15em 1.143em; font-size: 0.875em;background-color: var(--purple);border: none;margin-bottom:1em; color: var(--of-white);}
/* .account-information input::placeholder{color: var(--of-white);} */
.account-information-btn{width: 100%;margin-bottom: 1em;}
.account-information-btn a{font-size: 0.875em;text-transform: capitalize;padding-block: 1.15em;}
.user-id{width: 100%;display: flex;gap: 0.5em;align-items: center;}
.user-id img{width: 1em;height: 1em;}
.user-id span{font-size: 0.625em;color: var(--red);line-height: 160%;}
.payment-method{width: 100%;padding: 1.5em;background-color: var(--jaguar);border: 1px solid var(--bordar-color);}
.payment-method h4{font-size: 0.875em;line-height: 114.286%;font-weight: 400; color: #CCCCCC; padding-bottom: 0.875em;}
.payment-item-wrap{width: 100%;display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 0 .75em;margin-bottom: 1.5em;}
.payment-item{width: 100%;height: 100%;}
.payment-item img{width: 100%; height: 100%; border: 3px solid transparent; transition: .35s ease-in-out;}

.payment-item label{width: 100%; display: flex;}
.payment-item label input{opacity: 0; visibility: hidden; position: absolute; top: 0; left: 0; width: 0; height: 0; margin: 0; padding: 0;}
.payment-item label input:checked + img {border: 3px solid #911ABC;}
.topup-circle-num{width: 2.286em; height: 2.286em; display: flex; align-items: center; justify-content: center; font-size: 0.875em; border-radius: 50%; background-color: var(--white); border: 1px solid #BA6FEF; font-family: var(--inter); color: var(--black);}

.payment-btn-wrap{width: 100%; display: flex; flex-direction: column; gap: .75em;} 
.payment-btn-content{width: 100%;display: flex;justify-content: space-between;}
.payment-btn-content h3{font-size: 0.875em; font-weight: 400; color: #CCCCCC;}
.payment-btn-content span{font-size: 0.875em;font-weight: 600;color: var(--bright-purple);}
.payment-btn{width: 100%;}
.payment-btn a{padding-block: 1.25em;font-size: 0.875em;}
/* End topup section */
/* Start account section */
.account-section{padding-block: 5.5em;position: relative;border-bottom: 1px solid var(--bordar-btm);}
.account-inner{width: 100%;position: relative;z-index: 2;}
.account-item-wrap{width: 100%;gap: 2em;margin-bottom: 2em;}
.add-mony-wrap{width: 49.5%;padding: 1em;border: 1px solid var(--bordar-color);background-color: var(--jaguar);align-items: flex-end;}
.account-item{width: 80%;gap: 0.813em;align-items: center;}
.account-item-thum{width: 6.938em;height: 6.938em;}
.account-item-thum img{width: 100%;height: 100%;}
.account-item-user{width: 50%}
.account-item-user h4{font-size: 0.875em;font-weight: 400;line-height: 128.571%;}
.account-item-user h3{font-size: 2.25em;font-weight: 600;line-height: 100%;color: var(--light-purple);padding-bottom: 0.444em;}
.account-item-user span{font-size: 0.75em;line-height: 150%;color: var(--of-white);}
.add-mony-btn{width: 7.69em;min-height: 2em;}
.add-mony-btn a{font-size: 0.875em;}
.account-card-wrap{width: 48%;display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 2em;}
.account-card{background: linear-gradient(304deg, #0E0217 31.64%, #16082B 96.76%);padding: 1em;display: flex;align-content: space-between;flex-flow: row wrap;}
.account-card span{width: 100%;}
.account-card h3{width: 100%;}
.user-information{width: 100%;padding: 1.5em; background: linear-gradient(304deg, #0E0217 31.64%, #16082B 96.76%);}
.user-information-tytle{width: 100%;gap: 0.75em;padding-bottom: 1em;border-bottom: 1px solid var(--bordar-color);margin-bottom: 1.125em;}
.user-information-tytle figure{width: 1.5em;}
.user-information-tytle img{width: 100%;}
.user-info-wrap{width: 100%;display: grid;grid-template-columns: 1fr 1fr;gap: 2em;}
.user-info{width: 100%;}
.user-info h4{font-size: 0.875em;font-weight: 400;line-height: 128.571%;padding-bottom: 0.857em;}
.user-info{width: 100%;position: relative;}
.user-info input{width: 100%;background-color: var(--light-jaguar);border: none;padding: 0.875em;font-size: 1em;color: var(--white);position: relative;}
.info-edit-thum { position: absolute; right: 2.5%; top: 50%; transform: translateY(-50%); width: 1.25em; height: 1.25em; }
.info-edit-thum img{width: 100%;}
/* End account section */
/* Start contuct us section */
.contuct-us-section{padding-block: 5.5em;position: relative;border-bottom: 1px solid var(--bordar-btm);}
.shape-absolute-element{position: absolute;left: 0;top: -12%;width: 75%;height: 75%;}
.contuct-us-inner{width: 100%;position: relative;z-index: 3;justify-content: space-between;}
.contuct-content-wrap{width: 43.5%;}
.contuct-content-wrap h2{padding-bottom: 0.333em;}
.contuct-content-wrap span{color: var(--light-purple);}
.contuct-content-wrap p{font-weight: 400;}
.contuct-item-wrap{width: 46%;display: grid;grid-template-columns: 1fr 1fr;gap: 1.25em;}
.contuct-item{width: 100%;border-radius: 0.75em;padding: 0.81em;background: linear-gradient(304deg, #0E0217 31.64%, #16082B 96.76%);}
.contuct-item a{width: 100%;display: flex;flex-flow: row wrap;}
.contuct-item-thum{width: 2.75em;height: 2.75em;}
.contuct-item-content{width: calc(100% - 2.75em);padding-left: 1em;}
.contuct-item-content h3{font-size: 1.25em;color: var(--white);line-height: 120%;padding-bottom: 0.3em;}
.contuct-item-content p{font-size: 0.875em;color: var(--white);line-height: 128.571%;padding-bottom: 0.3em;}
.contuct-item:last-child{grid-column: span 2;}
/* End contuct us section */

/* Start login Style */
.login-section{padding-block: 5.5em;}
.login-section-inner{width: 100%; display: flex; flex-direction: column; align-items: center;}

.login-card{width: 100%; max-width: 30.375em; position: relative; border-radius: .75em; background-color: var(--black);}
.card-border { position: absolute; inset: 0; border-radius: .75em; padding: 1px; background: -o-linear-gradient(135deg, #5E3A84 0%, rgba(17, 17, 17, .9) 114%); background: linear-gradient(135deg, #5E3A84 0%, rgba(17, 17, 17, .9) 114%); -webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--white))) content-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--white))); -webkit-mask: linear-gradient(var(--white) 0 0) content-box, linear-gradient(var(--white) 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.login-card-inner{width: 100%; position: relative; z-index: 1; padding: 2.75em 2em; display: flex; flex-direction: column; gap: 2em;}
.login-card{width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center;}

.login-card-title{width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1em;}
.login-card-title h3{font-size: 2em; line-height: 1; font-family: var(--inter); color: #911ABC;}
.login-card-title p{font-size: 0.813em; color: #CCCCCC;}

.login-card-input-row-wrap{width: 100%; display: flex; flex-direction: column; gap: 1.5em;}
.login-card-input-row{width: 100%; display: flex; flex-direction: column; gap: .75em; align-items: flex-start;}
.login-card-input-row label{color: var(--white); font-family: var(--inter); font-size: 1em; font-style: normal; font-weight: 400; line-height:  112.5%;}
.login-card-input-row input{font-size: 0.875em; padding: 1em; color: var(--white); border-radius: .5em; border: 1px solid #290843; font-family: var(--inter); background-color: transparent; outline: none; width: 100%; transition: .35s ease-in-out;}
.login-card-input-row input:focus{ background: #1D0731;}
.login-card-input-row input::placeholder{color: #999999;}
.login-card-input-row .login-card-btn{width: 100%; color: var(--white); text-align: center; font-style: normal; font-weight: 700; border: 1px solid #911ABC; background-color: #911ABC; font-size: 1em; border-radius: .5em; text-align: center; padding: .75em 1em; transition: .35s ease-in-out; } 
.login-card-input-row .login-card-btn:hover{background-color: transparent;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.login-credentials-wrap{width: 100%; display: flex; flex-direction: column; gap: 2em;}
.login-credentials-title{width: 100%; text-align: center; position: relative;}
.login-credentials-title:after{position: absolute; top: 60%; left: 0; width: 100%; height: 1px; content: ''; background-color: #282828; transform: translateY(-50%);}
.login-credentials-title span{color: #999; text-align: center; font-family: var(--inter); font-size: .75em; font-style: normal; font-weight: 400; line-height:  133.333%; padding-inline: 1.25em; background-color: var(--black); position: relative; z-index: 1;}
.login-credentials-google{width: 100%; display: flex;}

.login-credentials-google a{width: 100%; display: flex; align-items: center; text-align: center; font-size: 1em; padding: 0.875em 1em; border-radius: .5em; border: 1px solid #290843; gap: 0.625em; color: var(--white); font-family: var(--inter); font-weight: 400; line-height:  128.571%; justify-content: center; transition: .35s ease-in-out;}
.login-credentials-google a:hover{background-color: #1D0731;}
.login-credentials-google a img{width: 1.25em;}
.login-credentials-google a span{font-size: 0.875em;}

.login-credentials { width: 100%; text-align: center; display: flex ; justify-content: center; }
.login-credentials span{color: var(--white); text-align: center; font-family: var(--inter); font-size: .75em; font-style: normal; font-weight: 400; line-height: 133.333%;}
.login-credentials span a{color: var(--white); text-decoration: underline;}
.login-credentials span a.login-text{color: #911ABC; text-decoration: none;}

.login-card-input-wrap{width: 100%; display: flex; flex-direction: column;}
.login-card-input-step{width: 100%;}
.login-card-input-step h4{color: var(--white); font-family: var(--inter); font-size: 1.5em; font-style: normal; font-weight: 600; line-height: 75%; margin-bottom: 1.333em; text-align: left;}

.login-card-input-step.step-2{display: none;}

.back-step-btn{position: absolute; cursor: pointer; top: 1.5em; left: 1.5em; display: flex; width: 2em; height: 2em; position: absolute; display: none;}
.back-step-btn img{width: 100%;}
.login-card-input-row input.input-error{border-color: #ff0000;}
/* End login Style */

/* Start payment-section */
.payment-section{padding-block: 5em;}
.payment-section-inner{width: 100%; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1;}
.payment-card{width: 100%; max-width: 39.375em; background-color: var(--white); border-radius: .75em; border: 1px solid #5E3A84; padding: 2em; display: flex; flex-direction: column; position: relative; gap: 1em;} 
.payment-card-back{position: absolute; top: 1.5em; left: 1.5em; width: 2em; height: 2em; display: flex;}
.payment-card-back img{width: 100%;}
.payment-card form{width: 100%; display: flex; flex-direction: column; gap: 1em;}
.payment-card-logo{width: 100%; display: flex; justify-content: center;}
.payment-card-logo img{height: 4em;}

.payment-card-top-box{width: 100%; display: flex; flex-direction: column; border-radius: .75em; padding: 2em; background-color: #E2136E; gap: 1.25em;}
.payment-card-top-box-text{width: 100%; display: flex; justify-content: space-between; padding-bottom: 1.25em; border-bottom: 1px solid var(--white);}
.payment-card-top-box-text span{color: var(--white); font-family: var(--inter); font-size: 1.5em; font-style: normal; line-height: 100%; text-transform: capitalize;}
.payment-card-top-box-text span.payment-card-balance{font-weight: 700;}
.payment-card-top-box-input-wrap{width: 100%; display: flex; flex-direction: column; gap: 1em;}
.payment-card-top-box-input-wrap label{color: var(--white); font-family: var(--inter); font-size: 1em; font-style: normal; font-weight: 500; line-height:  150%; text-transform: capitalize;}
.payment-card-top-box-input-wrap input{width: 100%; color: #666; font-family: var(--inter); font-size: 1em; font-style: normal; font-weight: 400; line-height: 150%; text-transform: capitalize; padding: 0.625em 1em; border-radius: 0.375em; background: var(--white); border: none; outline: none;}

.payment-card-list-wrap{width: 100%; display: flex; flex-direction: column; border-radius: .75em; border: 1px solid #CCC; background: #E6E6E6; padding: 1.5em;}
.payment-card-list-wrap h6{color: var(--black); font-family: var(--inter); font-size: 1em; font-style: normal; font-weight: 700; line-height: 150%; text-transform: capitalize;}

.payment-card-list-wrap ul{display: flex; flex-direction: column; width: 100%; counter-reset: item; margin-top: .75em;}
.payment-card-list-wrap ul li{border-top: 1px solid #9F9F9F; padding-block: 0.625em; font-size: 0.835em; color: #333; font-family: var(--inter); font-style: normal; font-weight: 500; line-height:  171.429%; text-transform: capitalize; position: relative;  counter-increment: item; display: flex; gap: .25em; align-items: center;} 
.payment-card-list-wrap ul li:last-child{padding-bottom: 0;}
.payment-card-list-wrap ul li::before { content: counter(item) ". "; position: relative; left: 0; }
.payment-card-list-wrap ul li span{display: inline;}
.payment-card-list-wrap ul li span a{color: #E2136E; font-weight: 700;}
.payment-card-list-wrap ul li .copy-btn{margin-block: -0.299em; display: inline-flex;}
.copy-btn{cursor: pointer; font-size: 1em; border-radius: 1.796em;
background: #E8BDD3; padding: 0.599em 1.048em; gap: 0.449em; display: flex; line-height: 1; align-items: center;}
.copy-btn img{width: 1.198em; height: 1.198em;}
.copy-btn span{font-size: 0.898em;}

.payment-card-verify{width: 100%; display: flex;}
.payment-card-verify input{width: 100%; display: flex; text-align: center; justify-content: center; color: var(--white); font-family: var(--inter); font-size: 1em; font-style: normal; font-weight: 700; line-height:  150%; text-transform: uppercase; padding: 0.625em; border-radius: 0.375em; background: #E2136E; transition: .35s ease-in-out; border: 1px solid #E2136E; outline: none;}
.payment-card-verify input:hover{background-color: transparent; color: #E2136E;}


.nagad .payment-card-top-box{background-color: #ED1C24;}
.nagad .payment-card-list-wrap ul li span a{color: #ED1C24;}
.nagad .payment-card-verify input{background: #ED1C24;  border-color: #ED1C24; outline: none;}
.nagad .payment-card-verify input:hover{color: #ED1C24;}

.roket .payment-card-top-box{background-color: #8B3392;}
.roket .payment-card-list-wrap ul li span a{color: #8B3392;}
.roket .payment-card-verify input{background: #8B3392;  border-color: #8B3392; outline: none;}
.roket .payment-card-verify input:hover{color: #8B3392;}

/* End payment-section */


/* ==== Responsive Style ==== */


@media only screen and (min-width: 320px) and (max-width: 767px) {
    body{font-size: 4.267vw;}
    .mobi{display: block;}
    .desk{display: none;}


    h1{font-size: 2em;line-height:  112.5%;}
    h2{font-size: 1.5em;}
    h3{}
    p{font-size: 0.75em;}

    /* Start Home Style */
    /* header section */
    .header-logo-wrap{width: 100%;display: flex;flex-flow: row wrap;align-items: center;}
    .header-logo { width: 100%; display: flex ; flex-direction: row; justify-content: space-between; align-items: center; margin: 0;}
    .header-logo .logo{ width: 5.875em; }
    .nav-wrap{display: none;}
    .nav-btn.mobi{width: 8em;}
    .nav-btn.mobi a{font-size: .85em;}
    /* header section */
    /* hero section */
    .hero-section{padding-block: 5.5em 2.75em;}
    .hero-absolute-element.one{width: 2.302em; height: 2.402em;}
    .hero-absolute-element.two{right: 13%;width: 3.302em;
    height: 3.402em;}
    .hero-absolute-element.three {top: 10%; right: 12%; width: 1.5em; height: 1.5em;} 
    .hero-absolute-element.four{opacity: 0;}  
    .hero-absolute-element.five {top: 42.9%; left: 46.2%; transform: rotate(-70.035deg); width: 2em; height: 2em;}       
    .hero-absolute-element.six{opacity: 0;}    
    .hero-absolute-element.seven {top: 54.2%;left: 10.9%; transform: rotate(-31.035deg); width: 2.5em; height: 2.5em;}    
    .hero-absolute-element.eight {top: 51.5%; left: 82.1%; transform: rotate(-6.035deg); width: 2em; height: 2.402em;}   
    .hero-content-wrap{width: 100%;padding-bottom: 2.75em;}
    .hero-content h1{padding-bottom: 0.75em;}
    .hero-content p{max-width: 35em; font-size: 0.875em;line-height:  142.857%;}
    /* hero section */
    /* offer section */
    .offer-section{padding-block: 3em;}
    .offer-content-wrap{width: 100%;margin-bottom: 2em;display: flex;flex-flow: row wrap;justify-content: center;}
    .offer-card-wrap{grid-template-columns: 1fr 1fr;gap: 1em;}
    .card-content h3{font-size: 0.75em;}
    .card-content p{font-size: 0.5em;}
    .offer-card-content-wrap{gap: .5em;}
    /* offer section */
    /* avilable-section */
    .avilable-section{padding-block: 3em;}
    .avilable-content-wrap{width: 100%;margin-bottom: 2em;display: flex ; flex-flow: row wrap; justify-content: center;}
    .avilable-card-item-wrap{grid-template-columns: 1fr;gap: 1em;}
    .avilable-card-item {padding: 0.5em;}
    .avilable-card-content h4{font-size: 0.75em;}
    .avilable-card-content p{font-size: 0.5em;max-width: 100%;}
    .avilable-card-btn{width: 5.75em;}
    .avilable-card-btn a{font-size: 0.75em;}
    .avilable-card-btn .btn::after{height: 1.5em;}
    /* avilable-section */
    /* latest-order-section */
    .latest-order-section{padding-block: 3em;}
    .latest-order-content-wrap{width: 100%;margin-bottom: 1.25em;}
    .latest-order-content-wrap::after{opacity: 1;}
    .latest-order-content h2{padding-bottom: 0.667em;}
    .latest-order-content p{max-width: 30em; padding-bottom: 2em;} 
    .order-card-item-wrap{width: 100%;padding: 0;}
    .order-card-item{padding: 0.375em;}
    .order-card-item-thum { width: 3.375em;margin-right: 0.75em;}
    .order-card-item-content-wrap { width: 14.9em;}
    .order-card-item-content{width: calc(100% - 3.375em);}
    .order-card-item-content h3{font-size: 0.875em;}
    .order-card-item-content span{font-size: 0.625em;}
    .order-card-item-btn-wrap{width: 5.25em;}
    .order-card-item-btn-wrap span{font-size: 0.5em;}
    .order-card-item-btn .btn{font-size: 0.625em;}
    /* latest-order-section */
    /* End Home Style */
    /* footer section */
    .main-footer-section{padding-block: 3em 2em;}
    .footer-content-wrap{width: 100%;gap: 2em;}
    .footer-content{ width: 100%; }
    .footer-social-link-wrap{margin-bottom: 4em;}
    .footer-bottom-content{ width: 100%;display: flex;justify-content: center;}
    .footer-bottom-content p{max-width: 20.1em; text-align: center;}
    /* footer section */
    /* contuct us section  */
    .contuct-content-wrap{width: 100%; margin-bottom: 2em;}  
    .contuct-content-wrap p{font-size: 0.75em;}  
    .contuct-item-wrap{width: 100%;grid-template-columns: 1fr;}   
    .contuct-item:last-child { grid-column: auto;} 
    /* contuct us section  */
    /* start topup section */
    .topup-scetion { padding-block: 2.5em;}
    .topup-wrap .avilable-card-thum{width: 5.125em; }    
    .topup-wrap .avilable-card-content h4{font-size: 1em;}    
    .topup-wrap .avilable-card-content p{font-size: 0.75em;}    
    .topup-card-item-wrap{width: 100%;padding: 0.75em;}    
    .topup-card-content figure{width: 1.5em; height: 1.5em; }   
    .topup-card-content h3{font-size: 0.875em;}   
    .uid-topup-wrap{height: 27.25em; overflow-y: scroll;} 
    .grid-wrap{grid-template-columns: 1fr; gap: .75em;}   
    .topup-payment-wrap { width: 100%;}    
    .account-content-item figure { width: 1.5em; height: 1.5em; }    
    .topup-card-content { margin-bottom: 1em; }
    .account-content-item h3 { font-size: 0.875em; }  
    .account-information{padding: .75em;}
    .payment-method{padding: .75em;}
    .payment-method .account-content-item { margin-bottom: 1.5em; }
    .account-information h4, .payment-method h4 { font-size: 0.75em;}
    .payment-item-wrap{gap: .5em;}
    /* end topup section */
    /* start account setting */
    .add-mony-wrap { width: 100%; padding: 0.75em;align-items: center;}
    .account-item { width: 100%;}    
    .account-item-thum { width: 6.625em; }    
    .account-item-user h4 {font-size: 0.625em;}    
    .account-item-user h3{font-size: 1.5em;padding-bottom: 0.333em;}    
    .account-item-user { width: 61.49%; }   
    .account-item-user span {padding-bottom: 0.667em;}   
    .account-item-user-btn.mobi {width: 8.143em;}    
    .account-item-user-btn a{font-size: 0.7em;padding: 0.643em;}
    .account-item-wrap{margin-bottom: 1em;gap: 1em;}
    .account-card-wrap {width: 100%;gap: 1em;}    
    .account-card{padding: 0.75em;} 
    .account-card span{font-size: 0.625em;padding-bottom: 1em;}   
    .account-card h3{font-size: 0.875em; }   
    .user-information{padding: 0.75em;} 
    .user-information-tytle figure{width: 1em;}
    .user-information-tytle h4{font-size: 0.875em;} 
    .user-info-wrap{grid-template-columns: 1fr;gap: 1em;}    
   .user-info h4{font-size: 0.75em;}     
   .user-info input{font-size: 0.875em;}    
   .topup-circle-num{font-size: 0.625em;}
    /* end account setting */

    /* Start Login Style */
    .login-section { padding-block: 2.5em; }
    .login-card-inner { padding: 2em 1.5em; gap: 1.5em;}
    .login-card-title h3 { font-size: 1.5em;}
    .login-card-title p { font-size: 0.625em;}
    .login-card-input-row-wrap{gap: 1em;}
    .login-card-input-row label{font-size: .75em;}
    .login-card-input-row input { font-size: 0.75em;}
    .login-credentials-wrap { gap: 1.5em; }
    .login-credentials-title span { font-size: 0.517em;}
    .login-credentials-google a {padding: 0.5em 1em;}
    .login-credentials-google a span { font-size: 0.603em; }
    .login-credentials-google a img { width: 0.862em; }
    .login-credentials span { font-size: .5em;}
    .login-card-input-step h4 {font-size: 1em;}
    .login-card-input-row .login-card-btn{font-size: .75em;}
    /* End Login Style */

    /* Start payment-section */
    .payment-section { padding-block: 2em; }
    .payment-card{padding: .75em;}
    .payment-card-top-box { padding: 1em .75em; border-radius: .5em; gap: .75em; }
    .payment-card-top-box-text span { font-size: 1em;}
    .payment-card-top-box-input-wrap label { font-size: .75em;}
    .payment-card-top-box-input-wrap input {font-size: .75em;}
    .payment-card-top-box-input-wrap { gap: .5em; }
    .payment-card-top-box-text { padding-bottom: 0.75em;}

    .payment-card-list-wrap { padding: 1em .75em; border-radius: .5em;}
    .payment-card-list-wrap h6 { font-size: .875em;}
    .payment-card-list-wrap ul li { padding-block: 0.5em; font-size: 0.75em; line-height: 155%; display: inline; }
    .payment-card-verify input{font-size: .875em;}
    .payment-card form { gap: .75em; }
    /* End payment-section */

}







@media only screen and (min-width: 320px) and (max-width: 374px) {

    /* Start Home Style */
    .hero-content h1{font-size: 1.5em;}
    .hero-content p { font-size: 0.8em;}
    .hero-elipese { position: absolute; left: 11%; top: 13%; width: 20.375em; height: 20.938em;}
    .card-content { width: 79%;}
    .avilable-card-content h4 { font-size: 0.7em; }
    .avilable-card-thum { width: 5.563em; }
    .order-card-item-content-wrap { width: 10.9em; }
    /* End Home Style */


}


@media only screen and (min-width: 481px) and (max-width: 767px) {


    /* Start Home Style */
    .hero-elipese {position: absolute; left: 0%; top: 13%; width: 25.375em; height: 31.938em;}
    .avilable-card-item{justify-content: space-between;gap: 0;}
    .avilable-card-content{width: 37%;}
    .avilable-content-wrap p { max-width: 32em;}
    /* End Home Style */


}


@media only screen and (min-width: 768px) and (max-width: 991px) {
    body{font-size: 1.951vw;}

    h2{font-size: 2em;}
    h3{font-size: 1em;}
    /* Start Home Style */
    .main-nav ul li a {font-size: .95em;}
    .hero-elipese{left: 33%;top: 28%; width: 39.375em;}
    .hero-content h1{font-size: 2.5em;}
    .hero-content p { max-width: 40em;}
    .card-content p { font-size: 0.6em;}
    .offer-card-wrap{gap: 1em;}
    .card-content { width: 76%;}
    .avilable-card-item-wrap {grid-template-columns: 1fr 1fr;gap: 1em;}
    .order-card-item-wrap { width: 60%;}
    .latest-order-inner{align-items: center;}
    .order-card-item-content span { font-size: .9em; }
    .footer-content { width: 31%; }
    .footer-content-wrap{gap: 4.75em;}
    .footer-content p{font-size: .8em;}
    .footer-bottom-content{align-items: center;}
    .footer-bottom-content p { font-size: .8em; }
    /* End Home Style */   
    /* Start contuct section */
    .contuct-us-inner{justify-content: center;}
    .contuct-content-wrap {width: 60%;margin-bottom: 2em;}
    .contuct-content-wrap h2 { text-align: center;}
    .contuct-item-wrap{width: 100%;}
    /* End contuct section */
    .topup-card-item-wrap { width: 100%;}
    .topup-payment-wrap { width: 100%;}
    .add-mony-wrap { width: 100%;}
    .account-card-wrap{width: 100%;min-height: 8.563em;}
}


@media only screen and (min-width: 992px) and (max-width: 1024px) {
    h2{font-size: 3em;}
    h4{font-size: 1.5em;}
    p{font-size: 1.5em;}
    /* Start Home Style */
    h1{font-size: 5em;}
    .hero-content p { max-width: 40em; font-size: 1.5em;}
    .hero-elipese { position: absolute; left: 31%; top: 31%; width: 27.375em; height: 25.938em;}
    .card-content { width: 75%;}
    .card-content p { font-size: 1em;}
    .avilable-card-item-wrap{grid-template-columns: 1fr 1fr;} 
    .avilable-card-content h4 { font-size: 1.5em;}
    .avilable-card-content p {font-size: 1em;}


    /* End Home Style */

}


@media only screen and (min-width: 1025px) and (max-width: 1425px){
.topup-card-wrap{gap: 1.5em;}    
.account-item { width: 78%;}
}

/*	Retina media query.
	Overrides styles for devices with a
	device-pixel-ratio of 2+, such as iPhone 4.
-----------------------------------------------    */

@media
	only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (min-device-pixel-ratio: 2) {


}