@font-face {font-family: Vazir;src: url('../fonts/Vazir-FD.eot');src: url('../fonts/Vazir-FD.eot?#iefix') format('embedded-opentype'),url('../fonts/Vazir-FD.woff2') format('woff2'),url('../fonts/Vazir-FD.woff') format('woff'),url('../fonts/Vazir-FD.ttf') format('truetype');font-weight: normal;font-display: swap;}
.qr-code{display: table;margin: 40px auto 100px;}
.qr-code p{margin: 0 0 20px;font-size: 24px;text-align: center;font-weight: 700;font-family: Vazir;}
.qr-code input{width: 750px;height: 60px;padding: 0 20px;border: 1px solid #CECDCD;border-radius: 16px;text-align: left;direction: ltr;font-size: 16px;color: #888;font-family: Vazir;margin-top: 40px;}
input:focus-visible,textarea:focus-visible{outline:none}
.qr-btn{display: table;padding: 8px 25px;font-size: 16px;color: #000;border: 2px solid #E8AB2C;background-color: #E8AB2C;border-radius: 18px;margin: 10px auto 30px;cursor: pointer;transition:all .4s ease-in-out 0s;font-family: Vazir;}
.qr-btn:hover {background-color: #000;color: #E8AB2C;}
#canvas{width: 200px;height: 200px;background: #FFF;border: 2px solid #CECDCD;border-radius: 16px;margin: 0 auto;overflow: hidden;}
#canvas img{width: 100%;display: block;}
#ttw{width: 100%;padding: 10px 0;background-color: #DDD;font-size: 13px;color: #000;text-align: center;position: fixed;bottom: 0;left: 0;font-family: Vazir;}
#ttw a{color: red;text-decoration: none;font-family: Vazir;}
@media only screen and (max-width:820px){
    .qr-code {margin: 30px 5% 50px;width: 90%;}
    .qr-code input{width: 90%;padding: 0 5%;}
    .qr-code p{font-size: 18px;}
}