@charset "utf-8";
/* CSS Document */
.how-it-works-sec{
	padding: 50px 0;
}
.how-it-works-sec ul{
	margin: 20px 0 0 0;
	padding: 0;
}
.how-it-works-sec ul li{
	padding: 32px 28px;
	background-image: none;
	width: 100%;
	background-color: #f7fcfd;
	border-radius: 20px;
	text-align: center;
	font-weight: 400;
    font-family: 'Inter 18pt', sans-serif;
	font-size: 1.2rem;
	line-height: 1.8rem;
	color: #94a3b8;
	max-width: 400px;
	margin: 0 auto 15px auto;
}
.how-it-works-sec ul li:last-child{
	margin-bottom: 0;
}
.how-it-works-icon{
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 10px;
	background-color: #ecfeff;
	margin: 0 auto;
	box-shadow:inset -1px 0px 6px 0px #c4d9da;
	margin-bottom: 20px;
}
.schedule-online-icon{
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-8 w-8' fill='none' viewBox='0 0 24 24' stroke='%232bb9cf' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;
	background-size: 40px auto;
}
.eco-friendly-icon{
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-8 w-8' fill='none' viewBox='0 0 24 24' stroke='%231d4fa1' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50% #eff6ff;
	background-size: 40px auto;
}
.fresh-delivery-icon{
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-8 w-8' fill='none' viewBox='0 0 24 24' stroke='%232bb9cf' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50% #eff6ff;
	background-size: 40px auto;
}
.step{
	font-weight: 800;
    font-family: 'Inter 18pt', sans-serif;
	display: block;
	color: #2bb9cf;
	text-transform: uppercase;
	font-size: 1.2rem;
	line-height: 1.8rem;
	margin-bottom: 10px;
}
.step-2{
	color: #2958a5;
}
.how-it-works-sec h3{
	margin-bottom: 8px;
}
@media only screen and (min-width: 500px){
	.how-it-works-sec ul li{
		max-width: 100%;
		width: 48%;
		margin:1%;
	}
	.how-it-works-sec ul{
		margin-top: 30px;
	}
}
@media only screen and (min-width: 768px){
	.how-it-works-sec{
		padding: 60px 0;
	}
	.how-it-works-sec ul li{
		width: 31.33%;
		margin:1%;
	}
	.how-it-works-sec ul li{
		font-size: 1.4rem;
		line-height: 2.0rem;
		margin-bottom: 0;
	}
	.step{
		font-size: 1.4rem;
		line-height: 1.8rem;
		margin-bottom: 12px;
	}
	.how-it-works-sec ul{
		margin-top: 35px;
	}
}
@media only screen and (min-width: 1025px){
	.how-it-works-sec ul li{
		webkit-transition: all .5s;
        -khtml-transition: all .5s;
        -moz-transition: all .5s;
        -ms-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
		border: 1px solid #f7fcfd;
		
	}
	.how-it-works-sec ul li:hover{
		box-shadow: 0 20px 25px -5px #f1f5f9;
		border: 1px solid #f1f5f9;
		background-color: #fff;
	}
	.how-it-works-sec ul{
		margin-top: 50px;
	}
}
@media only screen and (min-width: 1200px){
	.how-it-works-sec{
		padding: 70px 0;
	}
}
@media only screen and (min-width: 1500px){
	.how-it-works-sec{
		padding: 80px 0;
	}
	.how-it-works-sec ul li{
		margin:0 47px 0 0;
		width: 30.7%;
	}
	.how-it-works-sec ul li:last-child{
		margin-right: 0;
	}
	.how-it-works-sec ul{
		margin-top: 64px;
	}
}