/*Designed by Ranjan*/
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body{
	font-family: Poppins-Regular;
}
@font-face{
	src: url('../fonts/Poppins-Bold.ttf');
	font-family: Poppins-Bold;
}
@font-face{
	src: url('../fonts/Poppins-SemiBold.ttf');
	font-family: Poppins-SemiBold;
}
@font-face{
	src: url('../fonts/Poppins-Medium.ttf');
	font-family: Poppins-Medium;
}
@font-face{
	src: url('../fonts/Poppins-Regular.ttf');
	font-family: Poppins-Regular;
}
@font-face{
	src: url('../fonts/Inter-SemiBold.ttf');
	font-family: Inter-SemiBold;
}
@font-face{
	src: url('../fonts/Inter-Medium.ttf');
	font-family: Inter-Medium;
}
@font-face{
	src: url('../fonts/Inter-Regular.ttf');
	font-family: Inter-Regular;
}
@font-face{
	src: url('../fonts/Inter-Bold.ttf');
	font-family: Inter-Bold;
}

.loader img {
    margin-top: 5%;
    height: 40px;
}
button.theme-button {
    background: none !important;
    border: none;
}
label.error {
    color: red;
    margin-top: 10px;
}
/*user onboarding start*/
#user-onboading{
	background: linear-gradient(180deg, #ECC7FF 0%, #FFD5D5 42.83%);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 100vh;
	position: relative;
}
.user_name{
	position: absolute;
	top: 30%;
	left: 0;
	width: 100%;
	text-align: center;
}
.user_name h4{
	font-family: Poppins-SemiBold;
	color: #4D31DA;
	font-size: 18px;
	line-height: 27px;
	margin-bottom: 45px;
}
.name_field input{
	background-color: transparent;
	font-size: 18px;
	line-height: 27px;
	font-family: Poppins-Regular;
	color: #8D78FA;
	text-align: center;
	border: none;
	border-bottom: 1px solid #000000;
	width: 253px;
}
.name_field input::placeholder{
	color: #8D78FA;
}
.name_field input:focus{
	outline: none;
	box-shadow: none;
}
.arrow_btn {
    position: relative;
    left: 0;
    bottom: 0;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin-top: 10%;
}
.arrow_btn img{
	width: 117px;
}

.otp_fetching{
	position: absolute;
	top: 30%;
	left: calc(50% - 180px);
	width: 100%;
	text-align: center;
	padding: 0 25px;
	max-width: 360px;
}
.otp_fetching h4{
	font-family: Poppins-SemiBold;
	color: #4D31DA;
	font-size: 18px;
	line-height: 27px;
	margin-bottom: 10px;
}
.otp_number{
	font-size: 12px;
	line-height: 18px;
	color: #545454;
}
.otp_input{
	padding: 20px 0;
	display: flex;
	justify-content: center;
}
.otp_field{
	margin: 12px;
}
.otp_field input{
	width: 56px;
	height: 56px;
	background-color: #f4f4f4;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	text-align: center;
	border: none;
	font-size: 24px;
	line-height: 24px;
	font-family: Poppins-SemiBold;
	color: #233870;
}
.otp_field input:focus{
	outline: none;
	box-shadow: none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}
.otp_resend{
	text-align: left;
	font-size: 12px;
    line-height: 18px;
    color: #545454;
}
.otp_resend a{
	color: #4D31DA;
	text-decoration: none;
}
.otp_verified{
	position: absolute;
	top: 22%;
	text-align: center;
	left: calc(50% - 69px);
	border-radius: 12px;
	background: linear-gradient(to bottom, #ffffff, #52D930);
	padding: 1px;
}
.otp_verified.invalid {
    background: linear-gradient(to bottom, #ffffff, #ff0000);
}
.otp_verified a{
	background: #FFF6F6;
	display: block;
	border-radius: 12px;
	width: 138px;
	height: 30px;
	line-height: 30px;
	font-size: 12px;
	color: #27C200;
	font-family: Poppins-SemiBold;
	text-decoration: none;
}

.otp_verified.invalid a {
    color: #ff0000;
}
/*user onboading end*/

/*Home landing*/

#home_landing{
	background: linear-gradient(183.48deg, #F6E4FF 2.87%, #FFE4E4 94.78%);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 100vh;
	position: relative;
}
.home_options {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.home_opt {
    width: 189px;
    height: 98px;
    background: #ffffff;
    box-shadow: 0px 4px 18px rgb(0 0 0 / 14%);
    border-radius: 16px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 50px 0;
}
.dine_in{
	display: flex;
	margin-top: 10px;
}
.dine_in .box_rect{
	width: 34px;
	height: 34px;
	background: #ffffff;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
	border-radius: 9px;
	transform: rotate(45deg);
	display: block;
}
.box_rect_first,.box_rect_last{
	position: relative;
	z-index: 99;
}
.box_rect_first{
	margin-right: -7px;
}
.box_rect_last{
	margin-left: -7px;
}
.home_opt p{
	font-size: 18px;
	line-height: 27px;
	font-family: Poppins-Medium;
	margin-top: 10px
}
.take_away{
	display: flex;
}
.take_away .box_rect2{
	width: 34px;
	height: 34px;
	background: #F2F2F2;
	border-radius: 8px;
	display: block;
}
/*home landing end*/

/*Dine-in home*/
#header{
	padding: 14px 16px;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.07);
	background: #ffffff;
	text-align: right;
	display: flex;
	justify-content: right;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
}
.logo{
	padding: 6px 12px;
	background: #FFE9E9;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.11);
	border-radius: 8px;
	color: #A31CE5;
	font-size: 12px;
	line-height: 15px;
	display: flex;
	align-items: center;
}
.logo img{
	margin-right: 7px;
}
.main_wrapper {
    padding: 16px;
    margin-top: 55px;
    margin-bottom: 50px;
}
.main_wrapper h2{
	color: #233870;
	font-size: 20px;
	line-height: 24px;
	font-family: Poppins-SemiBold;
}
#banner{
	margin-top: 16px;
}
.banner_slide{
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	border-radius: 16px;
	overflow: hidden;
}
.banner_slide:before{
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(257.18deg, rgba(255, 216, 195, 0) -15.33%, #FF9886 82.2%);
	border-radius: 16px;
}
.banner_slide img{
	width: 100%;
	vertical-align: middle;
	border-radius: 16px;
	overflow: hidden;
}
.banner_slide h4{
	position: absolute;
	left: 16px;
	bottom: 16px;
	font-size: 20px;
	line-height: 30px;
	z-index: 99;
	color: #0B46B9;
	font-family: Poppins-Bold;
}
.banner_slide h4 span{
	display: block;
	font-size: 18px;
}
.slick-dots li{
	margin: 0 2px;
	width: 8px;
	height: 8px;
}
.slick-dots li button{
	width: 8px;
	height: 8px;
	padding: 0;
}
.slick-dots li button:before{
	width: 8px;
	height: 8px;
	font-size: 8px;
	line-height: 8px;
	opacity: 1;
	color: #6E00A4;
}
.slick-dots li.slick-active button:before{
	opacity: 1;
	color: #6E00A4;
}
#trending_today{
	margin-top: 32px;
	margin-bottom: 32px;
}
#trending_today h4{
	font-size: 16px;
	line-height: 24px;
	color: #484848;
	font-family: Inter-SemiBold;
	margin-bottom: 9px;
}
#tranding_slider{
	overflow: auto;
	white-space: nowrap;
	margin-right: -16px;
}
.trend_slide{
	width: 200px;
	background: linear-gradient(180deg, #FFFACE 0%, rgba(217, 217, 217, 0) 137.35%);
	border-radius: 16px;
	overflow: hidden;
	position: relative;
	margin-right: 16px;
	display: inline-block;
}

.trend_slide img{
	width: 100%;
	position: relative;
}
.trending_txt{
	position: absolute;
	background: #D3DFFF;
	border-radius: 0px 0px 16px 16px;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 13px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.trending_txt p{
	margin-bottom: 0;
	color: #484848;
	font-size: 14px;
	line-height: 21px;
	font-family: Inter-SemiBold;
	white-space: normal	;
}
.trending_txt p.trend_price{
	width: 50px;
	text-align: right;
}

.menu_head h4{
	color: #484848;
	font-family: Inter-SemiBold;
	font-size: 16px;
	line-height: 24px;
}
.menu_head{
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #E8E8E8;
	padding:14px 0 6px;
	align-items: center;
}
.item_type{
	font-size: 14px;
	line-height: 24px;
	color: #484848;
	font-family: Inter-Medium;
	padding: 2px 0;
}
.menu_item {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #E8E8E8;
}
.menu_item:last-child{
	border-bottom: 0;
}
.item_details{
	max-width: 174px;
}
.item_tag{
	padding: 9px 0;
	color: #8800CA;
	font-size: 12px;
	line-height: 14px;
	font-family: Inter-SemiBold;
}
.item_details h5{
	font-size: 12px;
	line-height: 16px;
	color: #484848;
	font-weight: normal;	
	font-family: Inter-SemiBold;
	max-width: 174px;
	padding: 4px 0 8px;
	margin-bottom: 10px;
}
.see_more{
	color: #206BC3;
	font-family: Poppins-Medium;
}
.item_desc{
	font-size: 12px;
	line-height: 20px;
	font-family: Inter-Regular;
	max-width: 174px;
	border-top: 1px solid #F2F2F2;
	padding: 10px 0;
	margin-top: -10px;	
	display: none;
}
.c_collapse{
	color: #206BC3;
	font-family: Poppins-Medium;
}
.item_price{
	color: #484848;
	font-family: Poppins-Medium;
	font-size: 12px;
	line-height: 21px;
}
.item_img{
	width: 104px;
	position: relative;
}
.item_img img{
	width: 100%;
	vertical-align: middle;
}
.add_btns{
	display: flex;
	justify-content: center;
}
.addbtn{
	width: 81px;
	height: 36px;
	border: none;
	background: #A31CE5;
	border-radius: 12px;
	font-size: 14px;
	line-height: 21px;
	color: #ffffff;
	margin-top: -19px;
}
.control_button{
	width: 96px;
	height: 40px;
	border: none;
	background: #A50D96;
	border-radius: 12px;
	font-size: 14px;
	line-height: 21px;
	color: #ffffff;
	margin-top: -19px;
	justify-content: center;
	display: flex;
	align-items: center;
}
.qnty_btn input{
	border: none;
	background: #FFFFFF;
	box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.25);
	border-radius: 8px;
	width: 32.89px;
	height: 32px;
	text-align: center;
	color: #430064;
	font-size: 12px;
	line-height: 21px;
	font-family: Inter-SemiBold;
}
.qnty_btn input:focus{
	outline: none;
	box-shadow: none;
}
.dec_btn, .inc_btn{
	width: 30px;
	text-align: center;
	height: 32px;
	line-height: 32px;
}
.control_button img{
	width: auto;
}
#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #FFFFFF;
    box-shadow: 0px -4px 4px rgb(0 0 0 / 7%);
    height: 56px;
    padding: 0 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#footer img{
	vertical-align: middle;
}
.filter_menu{
	padding-top: 0;
	position: relative;
	overflow: hidden;
}
.search_tag {
    white-space: nowrap;
    position: absolute;
    left: 71px;
    width: calc(100% - 71px);
    overflow: auto;
}
.search_tag .search_categ {
    display: inline-block;
    font-size: 12px;
    line-height: 20px;
    font-family: Poppins-Medium;
    background: #FFE9E9;
    border-radius: 4px;
    margin-right: 8px;
    height: 20px;
    min-width: 79px;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;

}
.close_categ{
	margin-left: 6px;
}
.filter{
	position: relative;
	z-index: 99;
}
.filter img{
	vertical-align: middle;
	z-index: 9999;
}
.filter:before{
	position: absolute;
	content: '';
	width: 63px;
	height: 35px;
	background: linear-gradient(270deg, #FFFFFF 61%, #FFFFFF 61.01%, rgba(255, 255, 255, 0) 116%);
	right: 0;
	top: -5px;
	z-index: -1;
}
.search_tag .search_categ:last-child {
    margin-right: 63px;
}

.total_item {
    position: fixed;
    bottom: 100px;
    background: linear-gradient(290.56deg, #FFEBDF -9.84%, #FFC2EE 130.53%);
    box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
    border-radius: 12px;
    left: 14px;
    right: 14px;
    bottom: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
}
.order_detls {
    display: flex;
    align-items: center;
}
.order_img{
	margin-right: 16px;
}
.order_img img{
	vertical-align: middle;
	padding-top: 5px;
}
.order_detls{
	font-size: 16px;
	line-height: 20px;
	font-family: Inter-Bold;
	color: #484848;
}
.order_detls span{
	color: #484848;
	font-size: 12px;
	line-height: 20px;
	font-family: Inter-Medium;
	display: block;
}
.vieworder a{
	font-size: 12px;
	line-height: 16px;
	color: #A31CE5;
	font-family: Inter-SemiBold;
	margin-right: 10px;
}
.card_popup{
	position: fixed;
	bottom: -400px;
	left: 0;
	width: 100%;
	height: 381px;
	background: #FFFFFF;
	box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 24px 24px 0px 0px;
	z-index: 999999;
	transition: .3s ease-in-out;
}
.show_popup{
	bottom: 0;
}
.card_overlay{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(50, 50, 50, 0.69);
	z-index: 99999;
	display: none;
}
/*Dine-in end*/


@media screen and (max-width: 320px){
	.otp_fetching{
		max-width: 300px;
		left: calc(50% - 150px);
		padding: 0 10px;
	}
	.otp_field input{
		width: 50px;
		height: 50px;
		line-height: 50px;
		font-size: 20px;
	}
}