@import url(https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap);
        #loader-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
        }
        
        #loader {
            display: block;
            position: relative;
            left: 50%;
            top: 50%;
            width: 150px;
            height: 150px;
            margin: -75px 0 0 -75px;
            border-radius: 50%;
            border: 3px solid transparent;
            background: url(../images/logo.png) no-repeat;
            background-size: cover;
        }
        
        .loaded #loader {
            opacity: 0;
            -webkit-transition: all .3s ease-out;
            transition: all .3s ease-out;
        }
        
        .loaded #loader-wrapper {
            visibility: hidden;
            -webkit-transform: translateY(-100%);
            -ms-transform: translateY(-100%);
            transform: translateY(-100%);
            -webkit-transition: all .3s 1s ease-out;
            transition: all .3s 1s ease-out;
        }
        
        body {
            background: #f2f2f2;
            font-size: 16px;
            font-weight: 400;
            font-family: Lato, sans-serif;
        }
        
        h3 {
            font-size: 32px;
            font-weight: 700;
            line-height: normal;
            color: #3162a3;
            margin-bottom: 0;
            /* padding: 40px 0 30px; */
        }
        
        .header-wrapper .navbar-brand {
            width: 50px;
            margin: 0;
        }
        
        .header-wrapper ul {
            flex-flow: row wrap;
            width: 100%;
            justify-content: space-between;
        }
        
        .header-wrapper ul li {
            padding: 0 0;
        }
        
        .header-wrapper ul li:last-child {
            padding-right: 0;
        }
        
        .header-wrapper .navbar {
            padding: 0;
        }
        
        .footer-menu {
            padding: 10px 0px;
            box-shadow: 2px 0px 0px rgba(24, 1, 1, 0.16);
            margin: 0;
            justify-content: center;
            display: inline-flex;
            position: fixed;
            bottom: 0px;
            width: 100%;
            background-color: #fff;
            z-index: 10;
            left: 0;
            right: 0;
        }
        
        .footer-menu li .nav-link {
            color: #404040;
            font-size: 14px;
            line-height: 15px;
        }
        
        footer {
            max-width: 460px;
            text-align: center;
            margin: 0 auto;
        }
        
        .intro-block-container .carousel-item img.logo {
            display: block;
            margin: 0 auto 15px;
            max-width: 90px;
            height: auto;
            padding-bottom: 30px;
        }
        
        .intro-block-container .carousel-item {
            text-align: center;
        }
        
        .carousel-indicators li::after,
        .carousel-indicators li::before {
            width: 10px;
            height: 10px;
            border-radius: 50%
        }
        
        .carousel-indicators li {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #fff;
            border: 1px solid #666;
        }
        
        .carousel-indicators .active {
            background: #3162a3;
            border: 1px solid #3162a3;
        }
        
        .intro-block-container .carousel-inner {
            height: 500px;
        }
        
        .intro-block-container h4 {
            color: #404040;
            font-size: 16px;
            font-weight: 700;
            text-align: center;
            padding-bottom: 5px;
            display: block;
            max-width: 65%;
            padding-top: 10px;
            width: 100%;
            margin: 0 auto;
        }
        
        .intro-block-container p {
            color: #666;
            max-width: 65%;
            margin: 0 auto;
            font-size: 16px;
            line-height: 20px;
            display: block;
            padding-bottom: 24px;
        }
        
        .about-container {
            text-align: center;
        }
        
        .about-container h3 {
            color: #3162a3;
            font-weight: 700;
            font-size: 32px;
            line-height: normal;
            letter-spacing: .08px;
            margin-bottom: 0;
            padding: 40px 0 30px;
        }
        
        .about-container p.desc {
            color: #666;
            max-width: 65%;
            margin: 0 auto;
            font-size: 16px;
            line-height: 20px;
            display: block;
            padding-top: 24px;
            padding-bottom: 0;
        }
        
        .about-container p {
            color: #666;
            max-width: 65%;
            margin: 0 auto;
            font-size: 16px;
            line-height: 20px;
            display: block;
            padding-bottom: 24px;
        }
        
        .aboutus-list h4 {
            font-size: 20px;
            font-weight: 700;
            line-height: normal;
            padding-top: 15px;
        }
        
        .aboutus-info .aboutus-list:first-child h4 {
            padding: 0;
            position: relative;
            top: -20px;
            margin-bottom: 0;
        }
        
        .aboutus-info .aboutus-list:first-child p {
            position: relative;
            top: -15px;
        }
        
        .aboutus-list {
            padding-bottom: 50px;
        }
        
        .privacy-container {
            text-align: center;
            padding-bottom: 20px;
        }
        
        .privacy-container h3 {
            color: #3162a3;
            font-weight: 700;
            font-size: 32px;
            line-height: normal;
            letter-spacing: .08px;
            margin-bottom: 0;
            padding: 40px 0 30px;
        }
        
        .privacy-container p.desc {
            color: #666;
            max-width: 100%;
            margin: 0 auto;
            font-size: 16px;
            display: block;
            padding-top: 24px;
            padding-bottom: 0;
            text-align: left;
        }
        
        .faq-container {
            padding: 0 0 20px;
        }
        
        .faq-container h3 {
            color: #3162a3;
            font-weight: 700;
            font-size: 32px;
            line-height: normal;
            letter-spacing: .08px;
            margin-bottom: 0;
            padding: 40px 0 30px;
            text-align: center;
        }
        
        .faq-container p {
            color: #666;
            max-width: 65%;
            margin: 0 auto;
            font-size: 14px;
            line-height: 20px;
            display: block;
            padding-top: 24px;
            padding-bottom: 0;
            text-align: left;
        }
        
        .faq-container ul {
            padding: 0;
            list-style: none;
            margin: 0;
        }
        
        .faq-container img {
            margin: 0 auto;
            text-align: center;
            display: block;
        }
        
        .faq-container ul li h3 {
            color: #000;
            text-align: left;
            max-width: 65%;
            padding: 0 0 15px;
        }
        
        .faq-container ul li h4 {
            color: #666;
            text-align: left;
            max-width: 65%;
            margin: 0 auto;
            padding: 0 0 15px;
            font-size: 18px;
        }
        
        .faq-container img {
            margin: 0 auto;
            text-align: center;
        }
        
        .faq-container li p {
            padding-top: 0;
            padding-bottom: 15px;
        }
        
        .faq-list {
            padding-top: 30px;
        }
        
        .contact-container {
            text-align: center;
            padding-bottom: 20px;
        }
        
        .contact-container h3 {
            color: #3162a3;
            font-weight: 700;
            font-size: 32px;
            line-height: normal;
            letter-spacing: .08px;
            margin-bottom: 0;
            padding: 40px 0 30px;
        }
        
        .contact-container label.control-label {
            color: #404040;
            font-size: 16px;
            font-weight: 700;
            max-width: 60%;
            text-align: left;
            margin: 0 auto;
            padding-bottom: 5px;
            display: block;
        }
        
        .contact-container textarea.form-control {
            max-width: 60%;
            margin: 0 auto;
            border-width: 0 0 0 2px;
            border-radius: 0;
            padding: 8px 15px 0;
            line-height: normal;
            resize: none;
            border-color: #707070;
            vertical-align: middle;
            box-shadow: none;
            outline: 0;
        }
        /* safir .form-btn */
        
        .form-btn {
            padding-top: 10px;
        }
        
        .btn.btn-send {
            background: #3162a3;
            color: #fff;
            border: transparent;
        }
        
        .signup-social-icons ul {
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
            align-items: center;
            max-width: 200px;
            padding: 0;
            list-style: none;
            margin: 0 auto;
        }
        
        .signup-social-icons {
            padding-top: 30px;
        }
        
        .signup-social-icons ul li {
            flex: 1 0 33%;
            max-width: 33%;
            justify-content: center;
            text-align: center;
        }
        
        .signup-social-icons ul img {
            max-width: 56px;
            height: auto;
        }
        
        .user-signup-container {
            text-align: center;
            /* height: 100vh; */
        }
        
        .signup-banner {
            margin-bottom: 30px;
        }
        
        .user-signup-container input {
            border-width: 0 0 1px 0;
            max-width: 300px;
            margin: 0 auto;
            display: block;
            text-align: center;
        }
        
        .user-profile-container {
            text-align: center;
        }
        
        .user-reached img {
            padding-bottom: 30px;
        }
        
        .user-reached p {
            margin-bottom: 0;
            color: #666;
            font-size: 16px;
        }
        
        .tap-to-chek-container {
            text-align: center;
            /* position: relative; */
        }
        
        .tap-to-chek-container input[type=file] {
            position: absolute;
            opacity: 0;
            top: 6px;
            left: 0;
            max-width: 108px;
            margin: 0 auto;
            text-align: center;
            display: block;
            right: 0;
            cursor: pointer;
            padding: 40px;
        }
        
        .tap-to-chek-container a .img-fluid {
            max-width: 140px;
        }
        
        .tap-to-chek-container p {
            color: #3162a3;
            font-size: 16px;
        }
        
        .tap-to-banner::after {
            content: "";
            position: absolute;
            background: url(../images/tap-overlay.svg) no-repeat;
            background-size: cover;
            width: 100%;
            height: 100px;
            z-index: -1;
            bottom: 0;
            /* display: block; */
            left: 0;
        }
        
        .tap-to-banner .img-fluid {
            position: relative;
            top: 100px;
        }
        
        .tap-to-banner svg {
            position: relative;
        }
        
        .grant-permission-container {
            text-align: center;
        }
        
        .grant-permission-container h4 {
            padding-top: 30px;
            color: #404040;
            font-size: 16px;
            font-weight: 700;
            text-align: center;
            padding-bottom: 5px;
            display: block;
            max-width: 65%;
            width: 100%;
            margin: 0 auto;
        }
        
        .grant-permission-container .btn-send {
            max-width: 150px;
            width: 100%;
            display: block;
            margin: 0 auto;
        }
        /* safir a.terms-of-use */
        
        a.terms-of-use {
            margin: 0 auto;
            text-align: center;
            display: block;
            color: #3162a3;
            text-decoration: underline;
            padding-top: 10px;
        }
        
        .redeem-container {
            margin: 0 auto;
            text-align: center;
            position: relative;
            padding-top: 50px;
            background: #f2f2f2;
        }
        
        section.redeem-section {
            /* margin: 40px 0; */
            background: #f4f4f4;
        }
        
        .redeem-banner {
            max-width: 40%
        }
        
        .redeem-icon {
            /* position: absolute; */
            top: -53px;
            max-width: 200px;
            margin: 0 auto;
            text-align: center;
            display: block;
            left: 36%;
            z-index: 1;
        }
        
        .offer-block {
            max-width: 360px;
            margin: 0 auto;
            padding-bottom: 30px;
        }
        
        .offer-block h4 {
            color: #404040;
            font-size: 18px;
            font-weight: 600;
        }
        
        .offer-block p {
            color: #666;
            font-size: 16px;
            font-weight: 400;
        }
        
        .product-page {
            background: #fff;
            max-width: 500px;
            border-radius: 2px;
            margin: 36px auto;
            box-shadow: 0 3px 6px rgb(41 0 0 / 16%);
            position: relative;
            text-align: center;
        }
        
        .product-pages-container {
            background: #f4f4f4;
            padding: 30px;
        }
        
        .product-icon {
            position: absolute;
            top: -65px;
            max-width: 160px;
            left: 33%
        }
        
        .product-desc {
            padding-top: 80px;
        }
        
        .product-desc h4 {
            font-size: 18px;
            font-weight: 700;
            line-height: normal;
            margin-bottom: 5px;
        }
        
        .product-desc p {
            font-size: 16px;
            color: #666;
            line-height: normal;
            font-weight: 400;
            padding-bottom: 30px;
        }
        
        .product-banner img {
            padding-bottom: 30px;
        }
        
        .product-footer {
            display: flex;
            flex-flow: row wrap;
            align-items: center;
            padding-bottom: 15px;
        }
        
        .product-footer a {
            flex: 1 0 50%;
            max-width: 50%;
            text-align: left;
            padding: 0 15px;
        }
        
        .product-footer a:last-child img {
            max-width: 60px;
        }
        
        .product-footer a:last-child {
            text-align: right;
        }
        
        .product-page.page-four .product-desc,
        .product-page.page-three .product-desc {
            text-align: left;
            padding: 0 30px;
        }
        
        .product-page.page-three .product-desc h4 {
            padding-top: 30px;
        }
        
        .product-page.page-four p {
            text-align: left;
            padding-top: 30px;
        }
        
        .product-page.page-two .product-desc h4 {
            margin-bottom: 40px;
        }
        
        .product-page.page-two ul {
            list-style: none;
            padding: 0;
        }
        
        .product-page.page-two .counters {
            max-width: 460px;
            margin: 0 auto;
        }
        
        .product-info {
            display: flex;
            flex-flow: row wrap;
            padding-bottom: 20px;
        }
        
        .source-info {
            flex: 1 0 75%;
            max-width: 75%;
            text-align: left;
            padding-left: 15px;
        }
        
        .product-page.page-two .product-desc .check-info h4,
        .product-page.page-two .product-desc .source-info h4 {
            padding-bottom: 0;
            margin-bottom: 0;
        }
        
        .product-page.page-two .product-desc .check-info p,
        .product-page.page-two .product-desc .source-info p {
            padding-bottom: 0;
        }
        
        .check-info {
            flex: 1 0 25%;
            max-width: 25%;
            justify-content: flex-end;
            text-align: left;
        }
        
        .product-page.page-two .product-desc .check-info h4 {
            color: #666;
            font-weight: 400;
            font-size: 16px;
            text-align: left;
        }
        
        .counters ul {
            counter-reset: my-sec-counter;
        }
        
        .counters li:before {
            counter-increment: my-sec-counter;
            content: ".";
            display: flex;
            text-align: left;
            margin-right: 15px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #2196f3;
            color: #fff;
            font-size: 16px;
            position: relative;
            top: 15px;
            text-align: center;
        }
        
        .counters li:after {
            content: "";
            border-left: 2px solid #2196f3;
            display: flex;
            height: 130px;
            position: absolute;
            top: 24px;
            left: 4px;
        }
        
        .counters ul li:last-child:after {
            height: auto;
        }
        
        .counters ul li {
            position: relative;
        }
        
        .user-chek-container {
            text-align: center;
        }
        
        .user-actions ul {
            display: flex;
            list-style: none;
            max-width: 400px;
            flex-flow: row wrap;
            justify-content: space-between;
            text-align: center;
            margin: 0 auto;
            padding: 0;
        }
        
        .user-actions {
            padding-top: 30px;
        }
        
        a.user-member {
            color: #000;
        }
        
        .user-banner {
            margin-bottom: 30px;
        }
        
        .feedback-container {
            text-align: center;
            padding: 30px;
            height: 100vh;
            display: flex;
            flex-flow: column;
            align-items: center;
        }
        
        section.user-profile-block {
            padding: 30px;
            /* height: 100vh; */
        }
        
        button#pagi {
            background: 0 0;
            border: none;
        }
        
        .pagi {
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
        }
        
        .pagi a img {
            max-width: 62px;
        }
        
        #product-data .row .head {
            flex: 1 0 100%;
            max-width: 100%
        }
        
        table.table.table-borderless.table-responsive {
            display: table;
        }
        
        a.to-back {
            padding-bottom: 20px;
            display: block;
        }
        
        @media screen and (max-width:768px) {
            .intro-block-container .carousel-item:first-child img.logo {
                padding-bottom: 0;
            }
            body {
                box-shadow: none;
            }
            .footer-menu {
                display: flex;
                margin-bottom: 0;
            }
            footer {
                padding-bottom: 15px;
            }
            .aboutus-list h4 {
                font-size: 16px;
            }
            .about-container h3,
            .contact-container h3,
            .faq-container h3,
            .privacy-container h3 {
                font-size: 20px;
            }
            .about-container p,
            .about-container p.desc,
            .privacy-container p.desc {
                font-size: 14px;
                max-width: 90%
            }
            .faq-container ul li h3,
            .faq-container ul li h4 {
                /* max-width: 90%; */
                font-size: 16px;
            }
            .faq-container p {
                font-size: 14px;
                max-width: 90%
            }
            .product-pages-container .product-icon {
                max-width: 80px;
                top: -36px;
            }
            body .product-desc h4 {
                font-size: 16px;
            }
            .product-desc p {
                font-size: 14px;
            }
            .product-page.page-two .counters {
                max-width: 100%;
                padding: 0 15px;
            }
            .product-page.page-two .product-desc .check-info h4 {
                font-size: 14px;
            }
            body .product-page.page-four .product-desc,
            body .product-page.page-three .product-desc {
                text-align: left;
                padding: 80px 30px 0;
            }
            .check-info,
            .source-info {
                flex: 1 0 50%;
                max-width: 50%
            }
            .redeem-banner {
                max-width: 100%
            }
            body .tap-to-banner::after {
                content: "";
                background: url(../images/tap-overlay.svg) no-repeat;
                background-size: cover;
                width: 100%;
                height: 190px;
                display: block;
                background-position: -70px 110px;
            }
            .tap-to-banner svg {
                width: 220px;
                height: 190px;
                top: -30px;
            }
        }
        
        .user-banner .img-fluid {
            max-width: 50%
        }
        
        .user-actions {
            padding-bottom: 50px;
        }
        
        body {
            /* height: 100% */
        }
        
        div#wrapper {
            padding: 0 15px;
        }
        
        section.user-chek {
            height: 100%
        }
        
        .faq-container img {
            max-width: 80%
        }
        
        .privacy-container ul {
            padding: 0;
            list-style: none;
            margin-top: 0;
        }
        
        .privacy-container h4 {
            color: #000;
            text-align: left;
            max-width: 100%;
            margin: 0 auto;
            font-weight: 700;
            font-size: 25px;
            letter-spacing: .08px;
            padding-top: 20px;
            margin-bottom: 0;
        }
        
        .privacy-container .privacy-contact-info p.desc {
            padding-top: 0;
        }
        
        .privacy-container .privacy-contact-info h4 {
            margin-bottom: 24px;
        }
        
        .privacy-container li {
            color: #666;
            max-width: 100%;
            margin: 0 auto;
            font-size: 14px;
            display: block;
            padding-top: 0;
            padding-bottom: 0;
            text-align: left;
        }
        
        .privacy-container.terms p.desc {
            max-width: 100%
        }
        
        .privacy-container.terms li {
            max-width: 100%;
            font-size: 16px;
        }
        
        .privacy-container ul li ul {
            padding: 0 15px 0;
        }
        
        .privacy-container.terms li p.desc {
            padding-top: 10px;
        }
        
        .privacy-container.terms li ul li p.desc {
            padding-top: 0;
            padding-bottom: 0;
        }
        
        .privacy-container.terms li ul li {
            margin-bottom: 0;
        }
        
        .intro-block-container {
            position: relative;
        }
        
        .about-img {
            max-width: 30%
        }
        
        @media screen and (max-width:767px) {
            body .about-img {
                max-width: 60%
            }
            body.tap-to-check-page #wrapper {
                padding: 0;
            }
            body.tap-to-check-page #wrapper .header-wrapper ul {
                padding: 0 15px;
            }
        }
        
        @media screen and (max-width:991px) and (min-width:768px) {
            body.tap-to-check-page .tap-to-banner::after {
                height: 180px;
                display: block;
                background-position: center 15px;
            }
            body.tap-to-check-page {
                max-width: 100%
            }
            body.tap-to-check-page #wrapper {
                padding: 0 0;
            }
            body.tap-to-check-page #wrapper .header-wrapper ul {
                padding: 0 15px;
            }
        }
        
        @media screen and (max-width:767px) {
            .intro-block-container: before {
                content: "";
                background: url(../images/intro-bg.png) no-repeat;
                background-size: cover;
                width: 100%;
                z-index: 1;
                height: 100%;
                display: block;
                position: absolute;
            }
            canvas#qr-canvas {
                width: 100%;
                height: 85vh;
            }
        }
        
        @media screen and (min-width:991px) {
            canvas#qr-canvas {
                width: 50vw;
                height: 89vh;
            }
        }
        /***profile user******/
        
        .user-info {
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
        }
        
        .user-info p {
            margin-bottom: 0;
            font-size: 14px;
            color: #666;
        }
        
        .user-image {
            padding-bottom: 40px;
        }
        
        .user-info-left h4 {
            font-weight: 600;
            font-size: 16px;
            margin-bottom: 0;
            color: #000;
            line-height: 20px;
        }
        
        .user-profile-block {
            display: flex;
            align-items: center;
            border-bottom: 1px solid #ccc;
            margin-bottom: 15px;
        }
        
        .user-form {
            padding-top: 50px;
            display: block;
            height: 100%;
        }
        
        .profile-data {
            padding-left: 10px;
        }
        
        .profile-data .form-control {
            border: none;
            outline: none;
            box-shadow: none;
            border-radius: 0;
            padding: 0;
            line-height: normal;
            font-size: 14px;
        }
        
        .profile-data label {
            color: #999;
            font-size: 16px;
        }
        
        .user-profile-block: last-child {
            border-bottom: 0;
        }
        
        .logout-btn {
            margin: 0 auto;
            text-align: center;
            padding-top: 50px;
            padding-bottom: 50px;
        }
        
        button.btn.btn-logout {
            background: transparent;
            border: 1px solid #ccc;
            padding: 10px 36px;
            border-radius: 0;
            font-size: 16px;
            color: #404040;
            line-height: normal;
        }
        
        div#userImg img {
            border-radius: 50px;
        }
        /* safir's code */
        
        .main {
            display: flex;
            flex-flow: row wrap;
            width: 100%;
            justify-content: center;
        }
        
        .column {
            flex-basis: 1 10px;
            width: calc(100% / 3 - 10px);
            margin: 5px;
            padding: 0;
        }
        
        figure img {
            position: relative;
            overflow: hidden;
            margin: 0;
        }
        
        figure img::before {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 2;
            display: block;
            content: '';
            border-radius: 100%;
            transform: translate(-50%, -50%);
            opacity: 0;
        }
        
        figure img:hover {
            filter: grayscale(1.5);
            animation: bloom ease-in-out .75s forwards;
        }
        
        figure:hover::before {
            animation: circle .75s;
        }
        
        @keyframes bloom {
            0% {
                filter: grayscale(.8);
            }
            40% {
                filter: grayscale(.5);
            }
            100% {
                filter: grayscale(0);
            }
        }
        
        @keyframes circle {
            0% {
                opacity: .5;
            }
            40% {
                opacity: 1;
            }
            100% {
                width: 200%;
                height: 200%;
                opacity: 0;
            }
        }
        
        .prefix__cls-3 {
            fill: rgb(26, 78, 248) !important;
        }
        
        .tap-to-banner {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
        }