@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap);body{background:url(../img/bg.ec7cbf9f.svg) no-repeat 50% fixed;background-size:cover;font-family:Roboto,sans-serif;color:#fff;overflow-x:hidden}.card1{background:url(../img/cardbg.90d84166.svg) no-repeat;width:30vw;height:30vh}.card2{background:#2b2d37;padding:2vw 2vw;border-radius:10px}.smol{background:#343742;font-size:14px;font-weight:400;width:10vw}#card1{background:url(../img/cardbg.90d84166.svg) no-repeat;background-size:cover;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.cardrow{margin-top:5vh;display:grid;gap:27px;grid-template-columns:5fr 6fr}.smolRow{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.text{display:grid;grid-template-columns:7fr 1fr;padding-bottom:1vw}.navbar{display:grid;margin-top:5vh;grid-template-columns:10fr 1fr}.logoutbtn{background:#2b2d37;color:#888c99;-ms-flex-align:center;font-weight:700;-ms-flex-pack:distribute;justify-content:space-around;padding:0 1vw}.logoutbtn,.smol{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;align-items:center;border-radius:5px}.smol{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-line-pack:center;align-content:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;padding:1vw}.redeem{color:#5e9ef9;margin-top:10px}.blueright{width:10px;margin-left:10px}.grid{display:grid;grid-template-columns:6fr 4fr;-webkit-column-gap:27px;-moz-column-gap:27px;column-gap:27px;margin-top:31px}#gridelem{background:#2b2d37;border-radius:10px;padding:26px}.heading{color:#888c99;padding-bottom:5px}.Gridrow{display:grid;border-bottom:1px solid #373a42;font-weight:700}#row1{grid-template-columns:9fr 5fr}#row1,#row2{padding:1.5vw 0}#row2{grid-template-columns:3fr 1fr}#row3,#row4{grid-template-columns:4fr 1fr;padding:1.5vw 0}#row4{border:none}.Gridbuttons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;font-weight:700}.unbind{background:#ff404b;margin-right:10px}.join,.unbind{border-radius:5px;padding:.5rem 2rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.join{font-size:.8vw;background:#707eff}.manage{background:#343742;border-radius:5px;padding:.5rem 2rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:10px;cursor:pointer}.manage:hover{background:#20232c}.extend{background:#fff;color:#000;border-radius:5px;padding:.5rem 2rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}.extend:hover{background:#e3edfc}.edit{border-radius:5px;background:#343742;padding:.5rem 2rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.cardGrid{display:grid;grid-auto-rows:3fr 1fr 1fr}.container{margin:-1vw 8vw}.pizzakhabo{height:5vw}.name{font-weight:700;font-size:1.7vw}.expiry{font-size:1vw;font-weight:500}.expiry>span{color:#b7d5ff}.CreditCard{background:url(../img/cardbg.90d84166.svg) no-repeat;background-size:cover;border-radius:10px;height:70%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:distribute;justify-content:space-around;padding:0 2vw}.card_details,.CreditCard{display:-webkit-box;display:-ms-flexbox;display:flex}.card_details{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.update{background:#343742;color:#5e9ef9;margin-top:3vw;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:1vw;border-radius:4px;font-size:20px;font-weight:600}.Cardname{font-size:25px;font-weight:500}.date>span{color:#b7d5ff}.date>div{margin-top:15px;font-size:20px;font-weight:500}.number{font-size:25px;font-weight:500}.address{font-size:20px;font-weight:500}.content{margin-top:5px}.rewards{font-size:20px;font-weight:500}#email2right{padding-top:20px}.leftemail>.formm{margin-top:-10%;width:140px}.leftemail>.formm>input,.leftemail>.formm>select{height:25px}.btns>button{background-color:#2b2d37;outline:none;border:none;cursor:pointer}@media (max-width:768px){.cardrow{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.grid{display:grid;grid-template-rows:1fr 1fr;grid-template-columns:none}.card2{background:#2b2d37;width:90vw;padding:2vw 2vw;border-radius:10px}#card1{height:22vh}.navbar{margin-top:none}}@media(width:1024px) and (height:1366px){.progress{width:192px!important;height:14vw!important;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}}@media (width:768px) and (height:1024px){.smol{border-radius:5px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-line-pack:center;align-content:center;padding:7vw}.progress,.smol{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.progress{width:148px;height:24vw!important}.pizzakhabo{height:10vw}.name{font-weight:700;font-size:3.7vw}.expiry{font-size:2vw}.cardGrid{display:grid;grid-auto-rows:3fr 1fr 1fr}.navbar{margin-top:none}.container{margin:-1vw 1vw}.CreditCard{background:url(../img/cardbg.90d84166.svg) no-repeat 50% fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;border-radius:10px;height:107%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:distribute;justify-content:space-around;padding:0 2vw}}@media (max-width:500px){.smolRow{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.progress,.smolRow{display:-webkit-box;display:-ms-flexbox;display:flex}.progress{width:200px!important;height:31vw!important;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.container{margin:-1vw 2vw}#gridelem{background:#2b2d37;border-radius:10px;padding:1vw;width:92vw}#row1,#row2,#row3,#row4{grid-template-columns:none;grid-template-rows:1fr 1fr}.GridText{display:-webkit-box;display:-ms-flexbox;display:flex}.Gridbuttons{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.cardGrid{display:grid;grid-auto-rows:9fr 3fr 5fr}.pizzakhabo{height:15vw}.name{font-weight:700;font-size:4.7vw}.expiry{font-size:2vw}.update{background:#343742;color:#5e9ef9;margin-top:7vw;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:4vw}}#myBtn{display:-webkit-box;display:-ms-flexbox;display:flex;cursor:pointer;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.modal{display:none;position:fixed;z-index:1;padding-top:25vh;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.4)}.modal-content{position:relative;background:#2b2d37;color:#fff;margin:auto;padding:0;width:500px;height:400px;border-radius:10px;-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);-webkit-animation-name:animatetop;-webkit-animation-duration:.4s;animation-name:animatetop;animation-duration:.4s}.modal-img-container{height:90px;display:grid;place-items:center}.email{background-color:#343742;width:207px;height:329px}.leftemail{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly}.leftemail>.heading{color:#fff;size:18px;font-weight:700;text-align:center}.leftemail>.formm{width:151px;text-align:left!important;color:#888c99;font-size:14px!important;font-weight:500!important}.leftemail>.formm>input,.leftemail>.formm>select{width:-webkit-fill-available;color:inherit;font-size:inherit;font-weight:inherit;background:#3f434f;border-radius:4px;border-style:none;height:34px;-webkit-padding-start:15px;padding-inline-start:15px;margin-top:7px}.extend-btn{background:#707eff;font-weight:500;width:151px;height:34px;border-radius:4px;display:grid;place-items:center;cursor:pointer}.modal-body{padding:2rem;font-size:14px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.modal-body,.pause-modal{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.pause-modal{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;width:100%;height:330px}.pause-heading{color:#fff;size:18px;font-weight:700;text-align:center}.pause-btnbox{display:-webkit-box;display:-ms-flexbox;display:flex;width:80%;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.pause-btn{background:#ff404b;font-weight:500ś;width:151px;height:34px;border-radius:4px;display:grid;place-items:center;cursor:pointer}.back{background-color:#343742}@media (max-width:767px){.modal{padding-top:5vh}.modal-content{width:90%}.modal-header{padding:30px 2rem}.modal-body{margin-bottom:2rem;padding:2px 2rem}.modal-body ul{-webkit-padding-start:4vw;padding-inline-start:4vw;-webkit-margin-before:0;margin-block-start:0}.modal-body ul li{padding:10px 16px}}.modal-header>.flex>.name{width:unset}.modal-body>.TransactionForm>input,.modal-body>.TransactionForm>select{background:none;border:1px solid #333946;border-radius:4px;color:#9ba2ae;font-size:14px;font-weight:500;padding-inline:16px;width:100%;height:36px;margin-top:10px;margin-bottom:24px}.rightemail{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly}.rightemail>.heading{color:#fff;size:18px;font-weight:700;text-align:center}.Licesnetext{color:#888c99;font-weight:500;text-align:center;padding-inline:27px;font-size:12px}.box{display:inline-block}.progress{height:250px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.progress,.progress>.inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.progress>.inner{position:absolute;color:#fff;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.progress>svg{height:100%;display:block}.Gem{height:3vw}.circletext{margin-top:10px;text-align:center;font-size:20px;font-weight:700}#secondcircletext{color:#b7d5ff;font-size:1vw}@media (max-width:1024px){.cardrow{grid-template-rows:5fr 6fr;grid-template-columns:unset}.progress{height:17vw}.pizzahut{margin-left:10px}.name{font-size:2vw}.expiry{font-size:1.7vw}.smol{width:23vw;font-size:16px}.grid{grid-template-rows:.75fr 1fr;grid-template-columns:unset}.grid_elem2{margin-top:30px;height:40vw;margin-bottom:30px}.join{font-size:1.6vw}.CreditCard{height:80%}.update{padding:2vw}}@media (max-width:768px){#gridelem{width:85vw;margin-left:2vw}.cardGrid{display:grid;padding-top:20px;grid-auto-rows:3fr 1fr 1fr;padding-left:20px}.box{padding-right:20px}.progress{width:180px;height:30vw!important}.Gem{height:5vw}#secondcircletext{font-size:2vw}.name{font-size:3.5vw}.expiry{font-size:2.2vw}.logoutbtn{padding:1vw 3vw}.smol{width:22vw;padding:3vw}.join{padding:.5rem 1.5rem;font-size:1.8vw}.CreditCard{background:url(../img/cardbg.90d84166.svg) no-repeat;-webkit-background-size:cover}}@media (max-width:420px){.box{padding-top:20px;padding-right:0}.expiry{font-size:2.4vw}.card2{border-radius:5px}.smolRow{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.img>img{width:20vw}.smol{width:23vw;font-size:9.5px}.blueright{width:6px}#gridelem{width:90vw;margin-left:0;border-radius:5px}.GridText{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}#row1,#row2,#row3,#row4,.GridText{display:-webkit-box;display:-ms-flexbox;display:flex}#row1,#row2,#row3,#row4{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;grid-template-columns:unset;grid-template-rows:unset}.edit,.extend,.join,.manage,.unbind{font-size:10px;height:20px;padding:.5rem 1.2rem}.content{font-size:12px}.jordan{font-size:8px}.grid_elem2{height:62vw}.CreditCard{height:70%;border-radius:5px}.Cardname{font-size:17px}.address,.update{font-size:15px}.modal-body{margin-bottom:2rem;padding:1rem 1rem}.modal-content{height:365px}.leftemail>.formm{margin-top:-10%;width:140px}.leftemail>.formm>input,.leftemail>.formm>select{height:25px}.back{background-color:#343742;margin-right:10px}.btns{display:-webkit-box;display:-ms-flexbox;display:flex}}