@import url(https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap);*{box-sizing:border-box;margin:0;padding:0}a{text-decoration:none}ul{list-style:none}button,input{border:none;outline:none}body{font-family:Space Grotesk,sans-serif}#app{height:100vh;justify-content:center;width:100%}#app,#app .container{align-items:center;display:flex}#app .container{box-shadow:0 14px 28px #00000040,0 10px 10px #00000038;height:90vh;justify-content:space-between;margin:0 auto;padding-right:200px;width:80%}#app .container .leftside .bg-main-mobile{display:none}#app .container .leftside .bg-main-desktop{height:90vh}#app .container .leftside .bg-main-desktop img{height:inherit;width:inherit}#app .container .leftside{position:relative}#app .container .leftside .bg-card-back{bottom:100px;box-shadow:0 14px 28px #00000040,0 10px 10px #00000038;left:170px;position:absolute;width:400px}#app .container .leftside .bg-card-back .content{height:100%;position:relative;width:100%}#app .container .leftside .bg-card-back .content img{height:inherit;width:inherit}#app .container .leftside .bg-card-back .content h3{color:#fff;position:absolute;right:40px;top:95px}#app .container .leftside .card-box{left:100px;position:absolute;top:0;top:130px}#app .container .leftside .card-box .card{position:relative;width:400px}#app .container .leftside .card-box .card img{width:inherit}#app .container .leftside .card-box .card .card-details{position:absolute;top:0}#app .container .leftside .card-box .card .card-details .logo{padding:30px 0 0 30px}#app .container .leftside .card-box .card .card-details{width:100%}#app .container .leftside .card-box .card .card-details .card-num{align-items:center;color:#fff;display:flex;font-size:20px;justify-content:center;margin:30px auto 0;width:90%}#app .container .leftside .card-box .card .card-details .card-num h3{font-size:30px;font-weight:500}#app .container .leftside .card-box .card .card-details .user-details{align-items:center;color:#fff;display:flex;justify-content:space-between;margin:0 auto;padding-top:20px;width:85%}#app .container .leftside .card-box .card .card-details .user-details h4{font-weight:400}#app .container .rightside #confirmation-number .user-info .input-box{display:flex;flex-direction:column;row-gap:5px}#app .container .rightside #confirmation-number .user-info .input-box label{color:#21092f;font-size:14px;font-weight:500}#app .container .rightside #confirmation-number .user-info .input-box input{border:1px solid #dedddf;border-radius:10px;color:#21092f;font-size:18px;padding:10px;width:300px}#app .container .rightside #confirmation-number .user-info .input-box input:focus{border:1px solid;border-image:linear-gradient(90deg,#6448fe,#600594);border-image-slice:1}#app .container .rightside #confirmation-number .user-info .input-box span{color:#ff5252;display:none;font-size:14px}#app .container .rightside #confirmation-number .user-info .input-box input::placeholder{color:#8e8593;font-size:14px}#app .container .rightside #confirmation-number .user-info .input-box{padding-bottom:30px}#app .container .rightside #confirmation-number .date .input-box label{color:#21092f;display:inline-block;font-size:14px;font-weight:500;padding-bottom:5px}#app .container .rightside #confirmation-number .date .input-box input{border:1px solid #dedddf;border-radius:10px;color:#21092f;font-size:18px;padding:10px;width:150px}#app .container .rightside #confirmation-number .date .input-box input::placeholder{color:#8e8593;font-size:14px}#app .container .rightside #confirmation-number .date .input-box .date-input{margin-right:10px;width:70px}#app .container .rightside #confirmation-number .date .cvc{display:flex;flex-direction:column}#app .container .rightside #confirmation-number .date{align-items:center;display:flex;justify-content:space-between}#app .container .rightside #confirmation-number .date .input-box span{color:#ff5252;display:none;font-size:14px}#app .container .rightside #confirmation-number .confirm{padding-top:30px}#app .container .rightside #confirmation-number .confirm button{background-color:#21092f;border-radius:10px;color:#fff;cursor:pointer;font-size:18px;font-weight:500;height:50px;transition:all .5s ease-in-out;width:100%}#app .container .rightside #confirmation-number .confirm button:hover{background-color:#600594}#complete .complete-container{align-items:center;display:flex;flex-direction:column;justify-content:center}#complete .complete-container .complete-text{padding:30px 0;text-align:center}#complete .complete-container .complete-text h2{color:#21092f;font-size:35px}#complete .complete-container .complete-text p{color:#8e8593;font-size:18px;padding:10px 0 20px}#complete .complete-container .continue{width:100%}#complete .complete-container .continue button{background-color:#21092f;border-radius:10px;color:#fff;cursor:pointer;font-size:18px;font-weight:500;height:50px;transition:all .5s ease-in-out;width:100%}#complete .complete-container .continue button:hover{background-color:#600594}#complete{display:none}@media screen and (min-width:375px) and (max-width:768px){#app{display:block;width:100%}#app .container{flex-direction:column;height:inherit;justify-content:normal;padding-right:0;width:inherit}#app .container .rightside{padding-top:150px;width:100%}#app .container .leftside{width:100%}#app .container .leftside .bg-main-desktop{display:none}#app .container .leftside .bg-main-mobile{display:block;width:100%}#app .container .leftside .bg-main-mobile img{width:100%}#app .container .leftside .bg-card-back{left:150px;top:30px}#app .container .leftside .bg-card-back .content h3{top:120px}#app .container .leftside .card-box{left:20px;top:180px;z-index:111}#app .container .leftside .card-box .card{width:inherit}#app .container .rightside #confirmation-number{display:flex;flex-direction:column;justify-content:center;padding:0 30px}#app .container .rightside #confirmation-number .date{justify-content:start}#app .container .rightside #confirmation-number .date .input-box input{width:200px}#app .container .rightside #confirmation-number .date .input-box .date-input{width:140px}#app .container .rightside #confirmation-number .user-info .input-box input{width:90%}#app .container .rightside #confirmation-number .confirm{width:100%}#app .container .rightside #confirmation-number .confirm button{width:90%}#app .container .rightside #complete .complete-container{padding:0 30px}}
/*# sourceMappingURL=main.e25c48f9.css.map*/