Tayp Food - Food Feature Slider GSAP

<section id="foodfeature-slider" class="sldie-scrollContainer">
	<div class="horizontal_slider">
		<div class="horizontal_slider_list">
			<div class="horizontal_slider_item">
				<div class="ff-item container">
					<div class="row">
						<div class="col-xs-12 col-md-5 p0">
							<h2>Everything you will ever need?<br>to deliver food to your customers.</h2>
							<img src="/wp-content/uploads/2022/02/Macbook-1.png" alt="item" class="ff-img-mobile">
							<h3>Your<br>Brand.</h3>
							<p>1. It’s your website, so you control it: from content, to design, right down to where your Twitter icon sits.</p>
						</div>
						<img src="/wp-content/uploads/2022/02/Macbook-1.png" alt="item" class="absolute-right-img">
					</div>
				</div>
			</div>
			<div class="horizontal_slider_item">
				<div class="ff-item container">
					<div class="row">
						<div class="col-xs-12 col-md-5 p0">
							<h2>Everything you will ever need?<br>to deliver food to your customers.</h2>
							<img src="/wp-content/uploads/2022/01/daily-reports.png" alt="item" class="ff-img-mobile">
							<h3>Manage<br>Realtime.</h3>
							<p>1. It’s your website, so you control it: from content, to design, right down to where your Twitter icon sits.</p>
						</div>
						<img src="/wp-content/uploads/2022/01/daily-reports.png" alt="item" class="absolute-right-img">
					</div>
				</div>
			</div>
			<div class="horizontal_slider_item">
				<div class="ff-item container">
					<div class="row">
						<div class="col-xs-12 col-md-5 p0">
							<h2>Everything you will ever need?<br>to deliver food to your customers.</h2>
							<img src="/wp-content/uploads/2022/01/personalized-website.png" alt="item" class="ff-img-mobile">
							<h3>Direct<br>Payments.</h3>
							<p>1. It’s your website, so you control it: from content, to design, right down to where your Twitter icon sits.</p>
						</div>
						<img src="/wp-content/uploads/2022/01/personalized-website.png" alt="item" class="absolute-right-img">
					</div>
				</div>
			</div>
			<div class="horizontal_slider_item">
				<div class="ff-item container">
					<div class="row">
						<div class="col-xs-12 col-md-5 p0">
							<h2>Everything you will ever need?<br>to deliver food to your customers.</h2>
							<img src="/wp-content/uploads/2022/01/personalized-website.png" alt="item" class="ff-img-mobile">
							<h3>Direct<br>Payments.</h3>
							<p>1. It’s your website, so you control it: from content, to design, right down to where your Twitter icon sits.</p>
						</div>
						<img src="/wp-content/uploads/2022/01/personalized-website.png" alt="item" class="absolute-right-img">
					</div>
				</div>
			</div>
			<div class="horizontal_slider_item">
				<div class="ff-item container">
					<div class="row">
						<div class="col-xs-12 col-md-5 p0">
							<h2>Everything you will ever need?<br>to deliver food to your customers.</h2>
							<img src="/wp-content/uploads/2022/01/personalized-website.png" alt="item" class="ff-img-mobile">
							<h3>Direct<br>Payments.</h3>
							<p>1. It’s your website, so you control it: from content, to design, right down to where your Twitter icon sits.</p>
						</div>
						<img src="/wp-content/uploads/2022/01/personalized-website.png" alt="item" class="absolute-right-img">
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
 /*** Food Features Slider GSAP***/
#foodfeature-slider{
	background: #091A8D;
	min-height: 100vh;
	position: relative;
	padding: 0;
	overflow: hidden;
}
#foodfeature-slider h2{
	font-family: 'Styrene A Bold', sans-serif;
	font-size: 22px;
	text-transform: none;
	font-weight: 700;
	margin: 0;
	color: #EFF7FE;
	margin-bottom: 20px;
	z-index: 2;
	position: relative;
}
#foodfeature-slider h3{
	color: #EFF7FE;
	font-size: 56px;
	font-family: 'Styrene A Bold', sans-serif;
	margin-bottom: 57px;
	text-transform: unset;
}
#foodfeature-slider p {
	padding-top: 0px;
	margin-top: 15px;
	width: 200px;
	color: #EFF7FE;
	line-height: 2.5;
	font-family: 'Styrene A Web', sans-serif;
}
.horizontal_slider_list{
	width: 100%;
	display: flex;
	padding: 0;
}
.horizontal_slider_item{
	flex: 0 0 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #091a8d;
	position: relative;
}
.scroll-slider{
	overflow: hidden;
}
.absolute-right-img {
	position: absolute;
	right: 0;
	max-height: 80vh;
	max-width: 60vw;
}
.ff-img-mobile{
	display: none;
}