@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {box-sizing: border-box;padding: 0;margin: 0;}
body {font-family: "Manrope", sans-serif;line-height: 1.4;}
.desktopview {display: block;padding: 100px 50px;text-align: center;width: auto;max-width: 100%;margin: 30px auto;background: #da4755;}
.desktopview p {color: white;font-size: 26px;} 
/* .phoneUI{display: none;} */
.phoneUI {display: none;margin: auto;/* background-color: #f2f2f2; */}
@media screen and (min-width:300px) and (max-width : 600px) {
    .desktopview {display: none;}
    .phoneUI {display: block;}
    body{background-color: #fcfff1;background-size: cover;background-attachment: fixed;}
    body.gradient-bg{background: linear-gradient(262deg, #68aa0f, #2da11d);        background-color: #fcfff1;
        background-size: cover;
        background-attachment: fixed;}
} 
/* bootstrap-required-css */
.mb-3 {
    margin-bottom: 1rem !important;
}
.mb-2 {
    margin-bottom: .5rem !important;
}
.me-2 {
    margin-right: .5rem !important;
}
.position-relative {
    position: relative !important;
}
.d-flex{display: flex !important;}
.flex-wrap{flex-wrap: wrap !important;}
.img-thumbnail {
    padding: .25rem;
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    max-width: 100%;
    height: auto;
}
img, svg {
    vertical-align: middle;
}
#previewPhotos div button{
    position: absolute;
    right: 0;
    top: 0;
    padding: 2px 6px;
    z-index: 10;
    font-size: 12px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    background-color: #dc3545;
    border: 1px solid #dc3545;
    color: white;
  text-align: center;
    text-decoration: none;
    vertical-align: middle;
}
/* bootstrap-required-css */
.header {position: relative;display: flex;padding: 10px 5px 15px 5px;background: linear-gradient(262deg, #68aa0f, #2da11d);flex-wrap: wrap;text-align: center;justify-content: center;border-radius: 0 0 40px 40px;border-bottom: 8px solid #00000024;} 
.header .app-logo {width: 75px;background: white; border-radius: 10px;padding: 5px;margin-bottom: 8px;}  
.header .app-logo img {width: 100%;}  .header .app-name {width: 100%;padding-left: 5px;}  
.header .app-name h1 {font-size: 5.5vw;color: white;}  
.header .app-name p {font-size: 4.5vw;color: rgb(255, 255, 255);margin-bottom: 5px;}  
.main {padding: 20px 15px 25px 15px;}  
.btn-1 {display: inline-block;background: linear-gradient(262deg, #68aa0f, #2da11d);color: white;padding: 10px 30px;border: none;border-radius: 35px;font-size: 14px;font-weight: 700;font-family: 'Manrope';}  
.camera-area { background-color: white;box-shadow: 0px 5px 15px 0 rgb(0 0 0 / 15%);width: 140px;margin: 15px 0 20px 0;border-radius: 10px;height: 140px;}  
.camera-area video {display: block;margin: auto;width: 140px;height: 140px;border-radius: 10px;}  
.camera-controls {display: flex;gap: 10px;margin-bottom: 15px;}  
.camera-controls button {background-color: #3f7800;border: transparent;padding: 10px 10px;display: flex;justify-content: center;align-items: center;border-radius: 10px;color: white;font-size: 13px;} 
.camera-controls button span{color: white;} 
.camera-controls button.btn-capture {background-color: #282727;}  
.camera-controls button svg {height: 16px;width: 16px;stroke: white;fill: white; margin-right: 5px;}  
.content-card {background-color: white;padding: 15px;border-radius: 15px;box-shadow: 0px 5px 15px 0 rgb(0 0 0 / 15%);}  
.app-heading {margin-bottom: 10px;}  
.app-heading .heading {margin-bottom: 0;font-size: 18px;color: #141414;}  
.form-group {margin-bottom: 10px;}  
.form-group:last-of-type {margin-bottom: 0;}  
.form-group label {display: block;width: 100%;margin-bottom: 5px;font-size: 14px;font-weight: 500;color: #373737;}  
.form-group label sup{color: red;font-weight: 600;}
.form-group .form-input {display: block;width: 100%;border-radius: 5px;background-color: transparent;border: 1px solid #0000002e;padding: 10px;position: relative;}  
.form-group .form-input.form-select{appearance: none;  -webkit-appearance: none;    background-color: #fff;background-image: url("../images/arrow-down.svg");background-repeat: no-repeat;background-position: right 10px center;background-size: 14px 12px;    padding: 10px 30px 10px 10px;}
.form-group .form-input.form-select::before{position: absolute;content: '';height: 10px;width: 10px;right: 0;background-color: black;}
.center-btn {display: block;margin: 5px auto;}  
.captured-photos-wrapper {display: flex;gap: 5px;margin-bottom: 20px;overflow: auto;}  
.captured-photos-wrapper .captured-photo {position: relative;}  
.captured-photos-wrapper .captured-photo canvas,  
.captured-photos-wrapper .captured-photo img {height: 70px;width: 70px;border-radius: 8px;border: 1px solid rgba(0, 0, 0, 0.13);}
.remove-image-btn {position: absolute;border: none;height: 100%;width: 100%;background-color: transparent;border-radius: 8px;display: flex;justify-content: center;align-items: center;left: 0;top: 0;}
.remove-image-btn svg {height: 30px;width: 30px;}
.thank-you-card {text-align: center;padding-bottom: 50px;}
.thank-you-card .tyc-icon {margin: 0 auto 10px auto;display: flex;justify-content: center;}
.tyc-icon img {width: 120px;}
.thank-you-card h2 {font-size: 40px;color: #1b8300;margin-bottom: 10px;}
.thank-you-card p {font-size: 20px;margin-bottom:  5px;} 
.thank-you-card p.sec-id {font-size:14px;margin-bottom:  25px;} 
.thank-you-card p.sec-id span{font-weight: 500;font-family: 'Poppins';background: #f4f4f4;line-height: 1;padding: 2px 5px;border-radius: 5px;color: #db0c20;}
/* .first-screen {background: linear-gradient(262deg, #68aa0f, #2da11d);position: relative;height:80vh;min-height: auto;} */
.first-screen {background: transparent;position: relative;height:auto;min-height: auto;}
.first-screen .header {background-color: transparent;border-bottom: 0;padding: 10px 10px 5px 10px;}
.first-screen .header .app-logo {width: 95px; margin-bottom:8px;}
.first-screen .header .app-name{padding-left: 0;}
.first-screen .header .app-name h1 {font-size: 6.6vw;margin-bottom: 0px;}
.first-screen .header .app-name p {    font-size: 4.2vw;
    font-weight: 500;
    margin-bottom: 0px;
    font-family: 'Poppins';}
.first-screen-buttons {position: relative;z-index: 1;} 
.first-screen .main{padding: 10px 15px 25px 15px;}
.btn-2 {display: flex;margin: 0 auto 0px auto;background-color: #bdff71;padding: 15px 20px;text-decoration: none;align-items: center;font-size: 16px;border-radius: 12px;font-weight: 600;color: #000000;}
.btn-3 {display: flex;margin: 0 auto 0px auto;background-color: white;padding: 15px 20px;text-decoration: none;align-items: center;font-size: 16px;border-radius: 12px;font-weight: 600;color: #000000;background-color: #ffe757;}
.btn-2.bg-4 {  background-color: white;}
.btn-2 svg,
.btn-3 svg {height: 20px;width: 20px;margin-right: 10px;}
.abs-footer-img {position: fixed;bottom: 0;width: 100%;}
.or {text-align: center;padding:5px 10px;position: relative;}
.or p {color: white;font-size: 20px;display: block;width: max-content;max-width: 100%;margin: auto;background: #4fa615;padding: 0px 4px;position: relative;z-index: 1;}
.or::before {height: 1px;width: 70%;content: '';position: absolute;background-color: white;left: 0;top: 20px;opacity: 0.4;right: 0;margin: auto;}
.instruction-card {background-color: #ffeeea;padding: 15px;border-radius: 15px;margin-bottom: 20px;border: 1px solid #ffcec3;}
.instruction-card .app-heading {margin-bottom: 0;}
.instruction-card .app-heading .heading {font-size: 15px;display: flex;align-items: center;}
.instruction-card .app-heading .heading svg {margin-left: 6px;fill: #da4755;transition: all 0.4s;}
.ordered-list {padding-left: 15px;height: 0px;overflow: hidden;opacity: 0;transition: all 0.4s;}
.ordered-list li {font-size: 12px;margin-bottom: 8px;padding-left: 5px;font-family: "Poppins";font-weight: 400;color: #373737;}
.ordered-list li::marker {font-weight: 600;color: #e63142;} 
.instruction-card.active .app-heading .heading svg {transform: rotate(180deg);transition: all 0.4s;}
.instruction-card.active .ordered-list {height: auto;opacity: 1;transition: all 0.3s;}
.instruction-card.active .app-heading {margin-bottom: 10px;}
.back-btn{ display: flex ;text-decoration: none;align-items: center;gap: 8px;margin: auto;width: max-content;max-width: 100%; padding: 10px 12px;border-radius: 10px;font-size: 14px;line-height: 1;background-color: #d7ffcc;color: #156800;font-weight: 600; }
.back-btn:hover,
.back-btn:active { border-radius: 10px;color: #d7ffcc;background-color: #156800;}





/* spinner */
.spinner-border {
	 --bs-spinner-width: 2rem;
	 --bs-spinner-height: 2rem;
	 --bs-spinner-vertical-align: -0.125em;
	 --bs-spinner-border-width: 0.25em;
	 --bs-spinner-animation-speed: 0.75s;
	 --bs-spinner-animation-name: spinner-border;
	 border: var(--bs-spinner-border-width) solid white;
	 border-right-color: transparent;
}
 .spinner-grow, .spinner-border {
	 display: inline-block;
	 width: 2rem;
	 height: 2rem;
	 vertical-align: -0.125em;
	 border-radius: 50%;
	 animation: 0.75s linear infinite spinner-border;
}

/* uploaded-photo */
  .photo-search-form{position: relative;margin-bottom: 10px;}
                    .photo-search-form button {
    background-color: #3f7800;
    border: transparent;
    padding: 10px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0 5px 5px 0;
    color: white;
    font-size: 13px;
}
.photo-search-form button  svg{margin-right: 5px;}
 .photo-search-form  .form-group{width: calc(100% - 80px);}
 .photo-search-form .form-group .form-input{border-radius: 5px 0 0 5px;border-right: 0;}
  .photo-search-form .form-group .form-input:active,
  .photo-search-form .form-group .form-input:focus,
  .photo-search-form .form-group .form-input:focus-visible,
  .photo-search-form .form-group .form-input:focus-within{box-shadow: none;border: 1px solid #00000075;border-right: 0;outline: 0;}
 .uploaded-photos {display: flex;justify-content: start;gap: 10px;flex-wrap: wrap;}
 .uploaded-photos .single-photo{position: relative;}
 .uploaded-photos .single-photo a{display: block;}
 .uploaded-photos .single-photo a img{width: 100%; max-width: 100%;
    height: 160px;
border-radius: 10px;
    border: 1px solid #00000017;} 
 @keyframes spinner-border {
	 to {
		 transform: rotate(360deg) 
		/* rtl:ignore */
		;
	}
}
 @keyframes spinner-grow {
	 0% {
		 transform: scale(0);
	}
	 50% {
		 opacity: 1;
		 transform: none;
	}
}