@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Meow+Script&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Marcellus&display=swap');

:root {
	--color1: #9F0E30;
	--color2: #FEF8E4;
	--color3: #F7E5CF;
	--color4: #9B0D2E;
	--color5: #FFF7D9;
	--color6: #005818;
	--formcard: 56px;
	--pm: 23px;
	--inputgap: 9px;
}

a,
a:hover {
	color: inherit;
	text-decoration: none;
}

button:active,
button:focus,
input:active,
input:focus,
textarea:active,
textarea:focus,
select:active,
select:focus {
	outline: 0;
}

body {
	padding: 0;
	margin: 0;
}


.payment_wrap_inner {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	/* gap: 5%; */
	/* background-image: linear-gradient(var(--sky), var(--dark-blue)); */
	/* border-bottom: 1px solid #ffffff4d; */
}

.payment_wrap_inner .payment_lt {
	width: 90%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 50px;
	padding: 0 80px;
}

.payment_wrap_inner .payment_lt img {
	width: 200px;
}

.payment_wrap_inner .payment_lt ul {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 25px;
	margin: 0;
	padding: 0;
}

.payment_wrap_inner .payment_lt ul label {
	margin: 0;
	/* border: 1px solid var(--color3); */
	padding: 24px;
	/* border-radius: 16px; */
	/* background: #9b1535; */
	/* box-shadow: 3px 4px 15px #850b28; */
	/* overflow: hidden; */
	border-radius: 16px;
	padding-bottom: 54px;
}

.radio_head {
	display: inline-block;
	width: 100%;
	font-size: 24px;
	color: var(--sky);
	position: relative;
	z-index: 1;
}

.radio_amount {
	display: inline-block;
	width: auto;
	color: var(--color3);
	border: 1px solid var(--color3);
	border-radius: 50px;
	padding: 12px 24px 5px;
	margin-top: 15px;
	font-size: 24px;
	position: relative;
	z-index: 1;
}

.radio_inner_head {
	display: inline-block;
	width: 100%;
	margin-top: 17px;
	color: white;
	font-weight: 400;
	font-size: 15px;
	position: relative;
	z-index: 1;
}

.payment_wrap_inner .payment_lt ul label ul {
	grid-template-columns: 1fr;
	gap: 9px;
	padding-left: 21px;
	margin-top: 10px;
	position: relative;
	z-index: 1;
}

.payment_wrap_inner .payment_lt ul label ul li {
	color: white;
	font-size: 14px;
}

.payment_wrap_inner .payment_rt {
	width: 30%;
	background: #8b0d2a;
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: center;
	padding: 0 50px;
}

.payment_wrap_inner .payment_rt h2 {
	margin-top: 0;
	font-size: 47px;
	font-weight: 600;
	margin-bottom: 0;
	color: var(--color2);
}

.payment_wrap_inner .payment_rt h4 {
	margin-top: 8px;
	font-size: 21px;
	color: var(--color3);
}

.payment_wrap_inner .payment_rt a {
	color: white !important;
	font-size: 18px;
	border: 1px solid white;
	border-radius: 50px;
	padding: 12px 30px;
	margin-top: 15px;
	display: inline-block;
}

.con {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 22px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default checkbox */
.con input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
	display: none;
}

/* Create a custom checkbox */
.radio {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	color: white;
	border-radius: 16px;
	background-color: #eeeeee00;
	border-radius: 16px;
	background-image: linear-gradient(180deg, var(--black), var(--dark-blue));
	/* box-shadow: 3px 4px 15px #850b28; */
	/* border: 1px solid #ffffff; */
}

/* On mouse-over, add a grey background color */
.con:hover input~.radio {
	background-image: linear-gradient(180deg, var(--black), var(--dark-blue));
	box-shadow: -1px -1px 24px #ffffff85;
}

/* When the checkbox is checked, add a blue background */
.con input:checked~.radio {
	/* background-color: #2196f3a8; */
	background-image: linear-gradient(180deg, var(--black), var(--dark-blue));
	box-shadow: -1px -1px 24px #ffffff85;
	/* border: 1px solid var(--color3); */
	/* transform: scale(1.08); */
}

/* Create the radio/indicator (hidden when not checked) */
.radio:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the radio when checked */
/* .con input:checked~.radio:after {
	display: block;
} */

/* Style the radio/indicator */
/* .con .radio:after {
	left: 9px;
	top: 5px;
	width: 7px;
	height: 17px;
	border: solid white;
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	display: none;
} */
.doc-modal,
.info-modal {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	background: #00000085;
	z-index: 4;
	backdrop-filter: blur(10px);
	display: none;
}

.doc-modal-inner,
.info-modal-inner {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	/* padding: 100px 0; */
	/* overflow: auto; */
	padding: 0;
}

.doc-down-box,
.info-box {
	display: none;
	width: 1200px;
	/* max-height: 80vh; */
	background-image: linear-gradient(180deg, var(--black), var(--dark-blue));
	/* overflow: auto; */
	/* padding-bottom: 14px; */
	border-radius: 25px;
	overflow: hidden;
}

.info-box {
	padding: 35px;
	border-radius: 25px;
}

.info-box h4 {
	border-bottom: 1px solid;
	padding-bottom: 24px;
}

.btm-mnu {
	position: absolute;
	left: 50%;
	bottom: 25px;
	margin-bottom: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	transform: translateX(-50%);
}

.btm-mnu a {
	font-size: 14px;
	border: 1px solid #ffffff;
	padding: 0px 16px;
	border-radius: 50px;
	display: flex;
	align-items: center;
	height: 35px;
	line-height: 34px;
	background: transparent;
	box-shadow: 2px 9px 25px #4b00124f;
	cursor: pointer;
}

.doc-down-inner {
	display: unset;
	/* align-items: center; */
	/* gap: 40px; */
	/* flex-wrap: wrap; */
	/* justify-content: center; */
	width: 100%;
	/* background: #00000099; */
	/* max-height: 80vh; */
}

.frm-grp {
	/* width: 100%; */
	display: inline-block;
	padding: var(--inputgap);
}

.frm-grp input, .frm-grp select {
	width: 100%;
	height: 56px;
	padding: 3px 15px;
	border-radius: 14px;
	border: 0;
	display: inline-block;
	border: 1px solid #ffffff;
	/* background-color: #71001b; */
	color: white;
}

.doc-down-inner h4 {
	color: var(--sky);
	padding: 0 var(--pm);
	text-align: left;
	width: 100%;
	margin: 0;
	border-bottom: 1px solid;
	font-size: 1.5rem;
	height: 8vh;
	/* background: linear-gradient(179deg, var(--black), var(--dark-blue)); */
	/* background-clip: text; */
	/* -webkit-background-clip: text; */
	/* -webkit-text-fill-color: transparent; */
	display: flex;
	align-items: center;
}

.doc-down-inner-flds {
	/* overflow: auto; */
	height: 72vh;
	padding: 0;
	padding-bottom: 0;
	/* margin-top: 14px !important; */
	padding-top: 0;
}

.frm-grp p {
	color: white;
	font-family: "Montserrat", sans-serif;
	overflow-x: hidden;
	font-size: 16px;
	margin-bottom: 5px;
}

.member-file-label {
	height: 56px;
	padding: 0 15px;
	border-radius: 50px;
	color: white;
	/* border: 1px solid #4a443f; */
	/* background-color: #211e1d; */
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.02);
	width: 100%;
	line-height: 56px;
	padding: 0 15px;
	border-radius: 14px;
	border: 1px solid #f9f9f9;
	/* background-color: #71001b; */
}

.cus-check {
	display: block;
	position: relative;
	padding-left: 28px;
	margin-bottom: 0;
	cursor: pointer;
	font-size: 14px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	color: white;
	line-height: 18px;
}

/* Hide the browser's default checkbox */
.cus-check input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom checkbox */
.cus-check .radio {
	position: absolute;
	top: 0;
	left: 0;
	height: 18px;
	width: 18px;
	background-color: transparent;
	border-radius: 5px;
	border: 1px solid #ffffff78;
}

/* On mouse-over, add a grey background color */
.cus-check:hover input~.radio {
	border: 1px solid #fff;
}

/* When the checkbox is checked, add a blue background */
.cus-check input:checked~.checkmark {
	background-color: transparent;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.cus-check input:checked~.radio:after {
	display: block;
}

/* Style the checkmark/indicator */
.cus-check .radio:after {
	left: 2px;
	top: 2px;
	width: 12px;
	height: 12px;
	background: #ffa060;
	/* border-width: 0 3px 3px 0; */
	/* -webkit-transform: rotate(45deg); */
	-ms-transform: rotate(45deg);
	/* transform: rotate(45deg); */
	border-radius: 4px;
}



.all-check {
	border-bottom: 1px solid white;
	padding-bottom: 11px;
}


.sub-check {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 15px;
}

.sub-check .cus-check {
	width: max-content;
}

.play-cls {
	position: absolute;
	right: 30px;
	top: 30px;
	background: white;
	border: 0;
	border-radius: 50px;
	width: 45px;
	height: 45px;
	font-size: 19px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer !important;
}

.frm-grp input::placeholder {
	color: white;
}

.frm-btm-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: center;
}

.frm-btm-wrap a {
	border: 0;
	border-radius: 50px;
	padding: 16px 30px;
	background: #550014;
	color: white;
}

.confirm_wrap {
	background: var(--color1);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	gap: 80px;
}

.confirm_lt {
	width: 29%;
}

.confirm_lt img {
	width: 100%;
}

.confirm_rt {
	width: 45%;
}

.confirm_rt h2 {
	color: var(--color2);
	font-size: 54px;
	font-weight: 800;
	margin-bottom: 25px;
}

.confirm_rt p {
	margin-bottom: 0;
	color: var(--color3);
	font-size: 24px;
}

.form-card::-webkit-scrollbar {
	width: 5px;
}

/* Track */
.form-card::-webkit-scrollbar-track {
	background: var(--sky);
}

/* Handle */
.form-card::-webkit-scrollbar-thumb:hover {
	background: var(--blue);
}

.form-card::-webkit-scrollbar-thumb {
	background: var(--blue);
}

.payment_top {
	display: flex;
	align-items: center;
	gap: 30px;
}

.payment_top img {}

.payment_top h3 {
	font-size: 81px;
	font-weight: 250;
	line-height: auto;
	letter-spacing: 0;
	letter-spacing: 0.01em;
	color: white;
	text-transform: uppercase;
	position: relative;
	padding-left: 0px;
	padding-top: 5px;
	margin: 0;
}

.payment_top h3 span {
	font-weight: 500;
	/* background-image: linear-gradient(235.28deg, #fff93b -1.14%, #fbff7d 40.74%, #fff133 68.06%, #baba00 94.29%); */
	-webkit-background-clip: text;
	-webkit-text-fill-color: #000000b8;
	background-clip: text;
	position: relative;
	z-index: 3;
	filter: blur(0px);
}

.payment_top h3 span.shdw {
	position: absolute;
	left: 0;
	top: 0;
	-webkit-text-fill-color: black;
	background-image: linear-gradient(235.28deg, #fff93b -1.14%, #fbff7d 40.74%, #fff133 68.06%, #baba00 94.29%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: blur(0px);
}

.elg_ul {
	padding-left: 21px;
	display: grid;
	gap: 9px;
	margin-top: 10px;
}

.elg_ul li {
	border: 0;
	list-style: circle;
	font-size: 14px;
}

.payment_wrap {
	background-image: linear-gradient(var(--sky), var(--dark-blue));
	height: 100vh;
}

.confirm_wrap,
.payment_wrap_inner {
	max-width: 1920px;
}

.doc-down-inner-flds fieldset:not(:first-of-type) {
	display: none
}

#msform {
	height: 100%;
	padding: 0;
}

fieldset {
	height: 100%;
	overflow: hidden;
}

.form-card {
	height: calc(100% - calc(var(--formcard) + calc(var(--pm) * 2)));
	overflow: auto;
	margin: var(--pm) 0;
	padding: 0 calc(var(--pm) - var(--inputgap));
}

.btn-bottom {
	height: var(--formcard);
	background-image: linear-gradient(180deg, var(--black), var(--dark-blue));
	padding: 0 var(--pm);
	display: flex;
	align-items: center;
	justify-content: end;
	/* border-top: 1px solid white; */
	gap: 10px;
	box-shadow: -1px -8px 15px #00000040;
}

.btn-bottom input {
	border-radius: 50px;
	border: 0;
	padding: 5px 24px;
	background-image: linear-gradient(180deg, var(--dark-blue), var(--blue));
	border: 2px solid var(--blue);
	color: white;
	font-size: 14px;
}

.frm-head {
	display: flex;
	align-items: center;
	justify-content: center;
	justify-content: space-between;
	margin-bottom: calc(var(--pm) - var(--inputgap)) !important;
}

.frm-head .fs-title {
	margin: 0;
	display: inline-block;
	padding: 0 var(--inputgap);
	width: auto;
	color: #ffffff;
	font-size: 18px;
	font-weight: 800;
}

.frm-head .steps {
	margin: 0;
	display: inline-block;
	padding: 0 var(--inputgap);
	width: auto;
	font-size: 18px;
	color: var(--blue);
	font-style: italic;
}

.memner-btn {
	position: absolute;
	z-index: 1;
	font-size: 17px;
	color: white;
	margin-top: 14px;
	bottom: 0;
	right: 0;
	/* border: 1px solid white; */
	padding: 10px 23px 6px;
	border-top-left-radius: 16px;
	border-bottom-right-radius: 16px;
	background-image: linear-gradient(180deg, var(--black), var(--dark-blue));
}

.memner-btn span {}

.payment-type-wrap {
	display: flex;
	/* grid-template-columns: 1fr; */
	gap: 0px;
	align-items: start;
	justify-content: space-between;

}

.card-con {
	display: block;
	position: relative;
	padding-left: 26px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 16px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	color: white;
}

/* Hide the browser's default radio button */
.card-con input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

/* Create a custom radio button */
.card-con .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 18px;
	width: 18px;
	background-color: #eeeeee52;
	border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.card-con:hover input~.checkmark {
	background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.card-con input:checked~.checkmark {
	background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.card-con .checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the indicator (dot/circle) when checked */
.card-con input:checked~.checkmark:after {
	display: block;
}

/* Style the indicator (dot/circle) */
.card-con .checkmark:after {
	top: 6px;
	left: 6px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: white;
}

.payment-wrap {
	margin-top: 30px;
}

.payment-wrap-inner {
	background: linear-gradient(45deg, var(--black), var(--dark-blue));
	padding: 35px;
	border-radius: 25px;
	height: 100%;
	width: 49%;
}

.total-bill {
	background-image: linear-gradient(45deg, var(--black), var(--dark-blue));
	padding: 35px;
	border-radius: 25px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.total-bill .order-name {
	font-size: 24px;
	width: 50%;
	font-weight: 700;
	margin-bottom: 0;
}

.total-bill h5 {
	margin-top: 0;
	font-size: 15px;
	margin-bottom: 0;
	color: white;
	font-weight: 100;
	text-align: right;
}

.total-bill h3 {
	margin-bottom: 0;
	margin-top: 6px;
	font-size: 30px;
	color: var(--blue);
	text-align: right;
}

.bill-info-text {
	margin-bottom: 25px;
	padding-bottom: 20px;
	border-bottom: 2px solid #347e8d;
}

.bill-info-text p {
	color: white;
	font-size: 16px;
	margin-top: 0;
	margin-bottom: 10px;
}

.block-head {
	margin-top: 0;
	font-size: 20px !important;
	font-weight: bold;
	margin-bottom: 15px !important;
	color: white;
	padding: 0 !important;
	height: auto !important;
	border-bottom: 0 !important;
}

.qr-info p {
	display: flex;
	align-items: center;
	gap: 15px;
	font-size: 15px;
}

.qr-info {
	margin: 15px 0;
}

.qr-info p span {
	color: #4cc6dd;
	font-size: 15px;
}

.qr-info p .qr-img {
	width: 135px;
	background: white;
	padding: 12px;
	border-radius: 17px;
	display: inline-block;
	cursor: pointer;
}

.qr-info p span img {
	width: 100%;
}

.paymeny_cont {
	/* padding: 25px; */
	margin-top: var(--inputgap);
}

.paymnet-box {
	filter: blur(5px);
	display: none;
}

.frm-grp-inner {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 18px;
}

.backtohome {
	border-radius: 50px;
	border: 0;
	padding: 11px 24px;
	background-image: linear-gradient(180deg, var(--dark-blue), var(--blue));
	border: 2px solid var(--blue);
	color: white;
	font-size: 14px;
	position: absolute;
	top: 3rem;
	left: 3rem;
}

.backtohome i {
	margin-right: 5px;
}

@media only screen and (min-width: 1000px) and (max-width: 1700px) {}

@media only screen and (min-width: 1000px) and (max-width: 1600px) {
	.radio_head {
		font-size: 18px;
	}

	.payment_wrap_inner .payment_lt ul label {
		padding: 15px;
		padding-bottom: 50px;
	}

	.radio_amount {
		padding: 5px 15px;
		margin-top: 10px;
		font-size: 16px;
	}

	.payment_wrap_inner .payment_lt ul label ul {
		gap: 3px;
		padding-left: 16px;
		margin-top: 3px;
	}

	.payment_wrap_inner .payment_lt ul label ul li {
		font-size: 11px;
	}

	.payment_top h3 {
		font-size: 54px;
	}

	.payment_wrap_inner .payment_lt img {
		width: 100px;
	}

	.payment_wrap_inner .payment_lt {
		padding: 0 20px;
	}
}

@media only screen and (min-width: 1000px) and (max-width: 1500px) {

	.doc-down-box,
	.info-box {
		width: 60%;
	}
}

@media only screen and (min-width: 1000px) and (max-width: 1400px) {}

@media only screen and (min-width: 1000px) and (max-width: 1200px) {
	.payment_wrap_inner {
		/* height: auto; */
		flex-direction: column;
		padding-top: 40px;
	}

	.payment_wrap_inner .payment_lt {
		width: 100%;
		gap: 25px;
		padding: 0 12px;
	}

	.payment_top {
		gap: 12px;
	}

	.payment_top h3 {
		font-size: 40px;
		text-align: center;
	}

	.payment_wrap_inner .payment_lt img {
		width: 100px;
	}

	.payment_wrap_inner .payment_rt {
		width: 100%;
		padding: 25px 12px;
		margin-top: 25px;
		align-items: center;
	}

	.payment_wrap_inner .payment_rt h2 {
		text-align: center;
	}

	.doc-down-box {
		width: 1000px;
	}

	.doc-down-inner h4 {
		/* padding: 16px; */
		/* font-size: 17px; */
	}

	.doc-down-inner-flds {
		/* padding: 8px; */
		/* margin-top: 8px !important; */
	}

	.frm-grp {
		padding: 8px;
	}

	.frm-grp p {
		font-size: 14px;
	}

	.total-bill {
		padding: 20px;
		border-radius: 15px;
	}

	.total-bill .order-name {
		font-size: 18px;
	}

	.payment-type-wrap {
		gap: 22px;
	}

	.payment-wrap-inner {
		padding: 20px;
		border-radius: 15px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 999px) {
	.payment_wrap_inner {
		height: auto;
		flex-direction: column;
		padding: 40px 0;
	}

	.payment_wrap_inner .payment_lt {
		width: 100%;
		gap: 25px;
		padding: 0 12px;
	}

	.payment_top {
		gap: 12px;
	}

	.payment_top h3 {
		font-size: 40px;
		text-align: center;
	}

	.payment_wrap_inner .payment_lt img {
		width: 100px;
	}

	.payment_wrap_inner .payment_rt {
		width: 100%;
		padding: 25px 12px;
		margin-top: 25px;
		align-items: center;
	}

	.payment_wrap_inner .payment_rt h2 {
		text-align: center;
	}

	.doc-down-box {
		width: 700px;
	}

	.doc-down-inner h4 {
		/* padding: 16px; */
		/* font-size: 17px; */
	}

	.doc-down-inner-flds {
		/* padding: 8px; */
		/* margin-top: 8px !important; */
	}

	.frm-grp {
		padding: 8px;
	}

	.frm-grp p {
		font-size: 14px;
	}

	.confirm_rt h2 {
		font-size: 32px;
	}

	.confirm_rt p {
		font-size: 17px;
	}

	.payment_wrap {
		height: 100vh;
		overflow: auto;
	}

	.btm-mnu {
		position: unset;
		gap: 13px;
		margin-top: 40px;
		padding: 0 15px;
		justify-content: center;
		transform: translateX(0%);
	}

	.info-box {
		padding: 25px;
		border-radius: 15px;
		width: 96%;
		max-height: 77vh;
		overflow: auto;
		font-size: 16px;
	}

	.info-box h4 {
		padding-bottom: 16px;
		font-size: 20px;
		margin-bottom: 16px;
	}

	.payment_wrap_inner .payment_lt ul {
		grid-template-columns: 1fr;
	}

	.total-bill {
		padding: 20px;
		border-radius: 15px;
		align-items: start;
		flex-direction: column;
		gap: 22px;
	}

	.total-bill .order-name {
		font-size: 18px;
		width: 100%;
	}

	.total-bill h5,
	.total-bill h3 {
		text-align: left;
	}

	.payment-type-wrap {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.payment-wrap-inner {
		padding: 20px;
		border-radius: 15px;
	}

	.play-cls {
		right: 10px;
		top: 10px;
		width: 30px;
		height: 30px;
		font-size: 13px;
	}

	.backtohome {
		top: 13px;
	}
}

@media only screen and (min-width: 300px) and (max-width: 767px) {
	:root {
		--pm: 13px;
		--inputgap: 9px;
	}

	.payment_wrap_inner {
		height: auto;
		flex-direction: column;
		padding: 40px 0;
	}

	.payment_wrap_inner .payment_lt ul {
		grid-template-columns: 1fr;
	}

	.payment_wrap_inner .payment_lt {
		width: 100%;
		gap: 25px;
		padding: 0 12px;
	}

	.payment_top {
		flex-direction: column;
		gap: 12px;
	}

	.payment_top h3 {
		font-size: 40px;
		text-align: center;
	}

	.payment_wrap_inner .payment_lt img {
		width: 100px;
	}

	.payment_wrap_inner .payment_rt {
		width: 100%;
		padding: 25px 12px;
		margin-top: 25px;
		align-items: center;
	}

	.payment_wrap_inner .payment_rt h2 {
		text-align: center;
	}

	.doc-down-box {
		width: 97%;
	}

	.doc-down-inner h4 {

		font-size: 17px;
		height: 6vh;
	}

	/* .doc-down-inner-flds {
		padding: 8px;
		margin-top: 8px !important;
	} */

	.frm-grp {
		padding: 8px;
	}

	.frm-grp p {
		font-size: 14px;
	}

	.confirm_wrap {
		height: 100vh;
		gap: 40px;
		flex-direction: column-reverse;
	}

	.confirm_lt {
		width: 70%;
	}

	.confirm_rt {
		width: 100%;
		padding: 40px 12px;
		padding-bottom: 0;
	}

	.confirm_rt h2 {
		font-size: 32px;
		text-align: center;
	}

	.confirm_rt p {
		text-align: center;
		font-size: 17px;
	}

	.payment_wrap {
		height: 100vh;
		overflow: auto;
	}

	.btm-mnu {
		position: unset;
		gap: 13px;
		margin-top: 40px;
		padding: 0 15px;
		flex-direction: column;
		width: 100%;
		transform: translateX(00px);
	}

	.info-box {
		padding: 25px;
		border-radius: 15px;
		width: 96%;
		max-height: 77vh;
		overflow: auto;
		font-size: 16px;
	}

	.info-box h4 {
		padding-bottom: 16px;
		font-size: 20px;
		margin-bottom: 16px;
	}

	.total-bill {
		padding: 20px;
		border-radius: 15px;
		align-items: start;
		flex-direction: column;
		gap: 22px;
	}

	.total-bill .order-name {
		font-size: 18px;
		width: 100%;
	}

	.total-bill h5,
	.total-bill h3 {
		text-align: left;
	}

	.payment-type-wrap {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.payment-wrap-inner {
		padding: 20px;
		border-radius: 15px;
	}

	.frm-grp-inner {
		grid-template-columns: 1fr;
	}

	.play-cls {
		right: 10px;
		top: 10px;
		width: 30px;
		height: 30px;
		font-size: 13px;
	}

	.backtohome {
		top: 13px;
	}
}