4 step process w/ icons and arrows

4 step process

		<div class="main-wrapper"> <!-Process for User looking for data-->
			<div class="working-process-area">
				<div class="container">
					<div class="row justify-content-center">
						<div class="col-lg-6">
							<div class="section-title text-center">
								<h2>So, how does it work?</h2>
								<p>What a good question. Here's how it works.</p>  <!--this looked just fine with 2 lines of text-->
							</div>
						</div>
					</div>
					<div class="total-work-process d-flex flex-wrap justify-content-around align-items-center">
						<div class="single-work-process">
							<div class="work-icon-box">
								<span class="lnr lnr-question-circle"></span>
							</div>
							<h4 class="caption">Have a question</h4>
						</div>
						<div class="work-arrow">
							<img src="img/elements/work-arrow.png" alt="">
						</div>
						<div class="single-work-process">
							<div class="work-icon-box">
								<span class="lnr lnr-magnifier"></span>
							</div>
							<h4 class="caption">Search for answer</h4>
						</div>
						<div class="work-arrow">
							<img src="img/elements/work-arrow.png" alt="">
						</div>
						<div class="single-work-process">
							<div class="work-icon-box">
								<span class="lnr lnr-magic-wand"></span>
							</div>
							<h4 class="caption">Get answer! </h4>
						</div>
						<div class="work-arrow">
							<img src="img/elements/work-arrow.png" alt="">
						</div>
						<div class="single-work-process">
							<div class="work-icon-box">
								<span class="lnr lnr-smile"></span>
							</div>
							<h4 class="caption">Enjoy your day</h4>
						</div>
					</div>
				</div>
			</div>
		</div>