html {overflow-x: hidden;scroll-behavior: smooth;}
* {    padding: 0;
    margin: 0;
    font-family: 'Barlow',sans-serif;
    position: relative;
    transition: 0.4s;
    box-sizing: border-box;}
body {           background: white;
    overflow-x: hidden;
    background-size: cover;
    background-position: top;
    background-attachment: fixed;
}
a {text-decoration:none;color:unset;}
div,h1,h2,h3,h4,p,i,a {position:relative;transition:0.4s;   
    }

:root {
	--color:#185ba6;
	--color2:#021314;
	--color3:#ffffff;
	
}







::placeholder {font-style:italic;}


.card_loader_back {   z-index: 100000;
   
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
}
.loader2 {              background: #ffffff;
    width: -webkit-fill-available;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}
.loader2 img{   
                          width: 130px;
    margin: 88px auto 0px;
    display: block;
    border-radius: 0px;
    max-height: 130px;
    border: 0px solid transparent;
    z-index: 6;
}
.loader2 h2 {   text-align: center;
    color: #000000;
    font-size: 18px;
    text-transform: uppercase;
}

	
.load1,.load2 {}
.load1 {
    width: 27px;
    height: 27px;
    border-radius: 29px;
    
    bottom: 0;    text-align: center;
	animation-delay:0s;
	}
	

.load2 {
    width: 27px;
    height: 27px;
    border-radius: 29px;
    text-align: center;
    bottom: 0;
		animation-delay:0.2s
	}

.load1,.load2 {          position: relative;
    display: grid;
    margin: 1px;
    animation: bounce 1s ease-in-out infinite alternate;
    background: #2196f3;
    align-items: center;
    text-align: center;
    padding: 3px;
    font-size: 12px;
    font-family: sans-serif;
    font-weight: 600;
    border-radius: 4px;
}

.load1 {animation-delay:0s;}
.load2 {animation-delay:0.2s;}

.load1:after,.load2:after {
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    background: linear-gradient(
180deg
, black, transparent);
    top: -3px;
    left: 12px;
}
@keyframes bounce {
	0% {transform: translate(0, 0);
    height: 27px;
    box-shadow: 0px 22px 10px 0px #6d6d6d4f;
}
	30% {height: 27px;
    box-shadow: 0px 0px 0px 0px #6d6d6d4f;
}
	100% {transform: translate(0, -20px) ;height:27px;}
}
@-webkit-keyframes bounce {
	0% {transform: translate(0, 0);
    height: 27px;
    box-shadow: 0px 22px 10px 0px #6d6d6d4f;
}
	30% {height: 27px;
    box-shadow: 0px 0px 0px 0px #6d6d6d4f;
}
	100% {transform: translate(0, -20px) ;height:27px;}
}

.circle_loader {    width: 70px;
    height: 70px;
    margin: 65px auto 0px;
    border-radius: 100px;
    position: relative;
    border: 20px solid #2196f3;
    border-bottom: 20px solid #eeeeee;
    animation: circle_loadera 1s linear infinite ;
    -webkit-animation: circle_loadera 1s linear infinite ;
	}
	
	
@keyframes circle_loadera {
	0% {transform:rotate(0deg);}
	100% {transform:rotate(360deg);}
	
}
@-webkit-keyframes circle_loadera {
	0% {transform:rotate(0deg);}
	100% {transform:rotate(360deg);}
	
}

.circle_loader2 {                    position: absolute;
    border: 3px dotted #2388d9;
    border-bottom: 2px solid #ffffff;
    top: 63px;
    width: 169px;
    height: 169px;
    z-index: 5;
    left: 50%;
    transform: translate(-50%);
    border-radius: 200px;
    animation: circle_loadera2 1s linear infinite;
    -webkit-animation: circle_loadera2 1s linear infinite;}

		
	
@keyframes circle_loadera2 {
	0% {transform:translate(-50%) rotate(0deg) ;}
	100% {transform:translate(-50%) rotate(360deg) ;}
	
}	
@-webkit-keyframes circle_loadera2 {
	0% {transform:translate(-50%) rotate(0deg) ;}
	100% {transform:translate(-50%) rotate(360deg) ;}
	
}



.back_btn {    background: black;
    width: fit-content;
    font-size: 15px;
    color: white;
    padding: 10px 20px;
    margin: 10px;}

.qr_row {          width: -webkit-fill-available;
    border: 0px solid red;
    max-width: 800px;
    margin: 0px auto;
    background: white;
    padding: 1rem 2rem;}
	
.qr_row h1{    font-size: 2rem;
    text-align: center;
    padding: 1rem;}

.sub_title {    text-align: center;
    font-size: 1rem;
    padding: 1rem;}


.qr_row form{}
.qr_row form p{    padding: 0px 10px;
    font-size: 13px;
    margin-top: 10px;}
.qr_row form input[type=color]{
	    height: 50px;
}
.qr_row form input{    width: -webkit-fill-available;
    border: 1px solid #bbbbbb;
    padding: 10px;
    margin: 10px;
    border-radius: 4px;}
.button_download{    background: #319431;
    margin: 1rem;
    color: white;
    padding: 12px;
    font-size: 22px;
    border: 0px;
    width: -webkit-fill-available;
    border-radius: 3px;}

.qr_row h3 {    font-size: 16px;
    text-align: center;
    margin-top: 20px;}
	
.radio_grid {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    text-align: center;
    width: fit-content;
    margin: 10px 0px;
}
.radio_grid .radio_info{       background: #ffffff;
    margin: 10px;
    padding: 5px 0px;
    font-size: 14px;
    border-radius: 5px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    user-select: none;}
.radio_grid .radio_info input{}
.radio_grid .radio_info span{}


#canvas {        text-align: center;
    padding: 2rem;
    border: 2px solid #F44336;
    border-radius: 20px;
    width: fit-content;
    margin: 0 auto;}
	
	.block-2 {    width: 48%;
    display: inline-block;}
	
	#showPreviewLogo {    width: 100px;
    max-height: 100px;
    border: 1px solid #d0d0d0;
    padding: 4px;
    margin: 10px auto;
    display: block;
    border-radius: 5px;}
	
	
	details {    background: #efefef;}
	summary {    background: #000000;
    color: white;
    padding: 10px;
    margin: 10px;cursor:pointer;}
	
	.google_review {    border: 0px solid red;}
	
	.review_logo {       width: 82%;
    margin: 10px auto;
    display: block;}
	
	.g_star {       display: flex;
    color: #ffa500;
    font-size: 22px;
    width: fit-content;
    margin: 10px auto;
    align-items: anchor-center;}
	
	.g_star i{    font-size: 35px;
    margin: 10px 3px;}
	
	.re_title {       font-size: 4rem;
    font-weight: 500;
    text-align: center;
    color: gray;}
	.re_title img{     width: 150px;
    margin: 10px auto;
    display: inline-block;
    vertical-align: baseline;}
	
	.g_scan {    width: 100px;
    margin: 0 auto;
    display: block;}
	.g_credit {    font-size: 19px !important;
    color: #000000;
    font-weight: 600;}