@extends('frontend.layout.main')
@section('main-container')
    {{-- <link rel="stylesheet" href="{{ url('frontend/css/custom/contact.css') }}">
<style>
.single-banner {
	background-position: center !important;
    background-size: cover !important;
    z-index: revert-layer;
	height: 450px;
}
.getStartedContent h4{
    font-size: 28px;
    font-weight: bold;
    color: #000;

}

</style>
<section class="single-banner dashboard-banner" >
	<div class="container">
		<div class="row">
			<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
				<div class="single-banner-img">
                    <img src="{{ asset('frontend/images/4steps.png') }}" alt="" class="img-fluid">
                </div>
			</div>
		</div>
	</div>
</section>

<section class="contact-part">
        <div class="container">
            <div class="row">
                <div class="col-lg-3">
                    <div class="contact-info"><i class="fas fa-map-marker-alt"></i>
                        <h3>Step 1</h3>
                        <p>Theme Create</p>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="contact-info"><i class="fas fa-phone-alt"></i>
						<h3>Step 2</h3>
                        <p>Account Create</p>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="contact-info"><i class="fas fa-envelope"></i>
						<h3>Step 3</h3>
                        <p>Social Media</p>
                    </div>
                </div>
				<div class="col-lg-3">
                    <div class="contact-info"><i class="fas fa-envelope"></i>
						<h3>Step 4</h3>
                        <p>Domain & Hosting</p>
                    </div>
                </div>
            </div>
			<div class="row">
				<div class="compare-btn center-50"><a href="#" class="btn btn-inline"><i class="fas fa-eye"></i><span>Get Started</span></a></div>
			</div>
        </div>
    </section> --}}

    <section class="getstartedSection">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 paddingend">
                    <div class="getstartedimg">
                        <img src="{{ asset('frontend/images/4steps.png') }}" alt="" class="img-fluid">
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- <section class="getstartedStepsSection">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">
                    <div class="getStartedContent text-center">
                        <div class="getstartedStepsimg" id="getstartedStepsimg1">
                            <img src="{{ asset('frontend/images/step1.png') }}" alt="" class="img-fluid">
                        </div>
                        <h2>STEP 1</h2>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">
                    <div class="getStartedContent text-center">
                        <div class="getstartedStepsimg" id="getstartedStepsimg2">
                            <img src="{{ asset('frontend/images/step2.png') }}" alt="" class="img-fluid">
                        </div>
                        <h2>STEP 2</h2>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">
                    <div class="getStartedContent text-center">
                        <div class="getstartedStepsimg" id="getstartedStepsimg3">
                            <img src="{{ asset('frontend/images/step.png') }}" alt="" class="img-fluid">
                        </div>
                        <h2>STEP 3</h2>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">
                    <div class="getStartedContent text-center">
                        <div class="getstartedStepsimg" id="getstartedStepsimg4">
                            <img src="{{ asset('frontend/images/step4.png') }}" alt="" class="img-fluid">
                        </div>
                        <h2>STEP 4</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xl-12 col-lg-12 col-md-6 col-sm-6 col-12">
                    <div class="getstartedStepsBtn">
                        <a href="#">Get Started</a>
                    </div>
                </div>
            </div>
        </div>
    </section> -->

    <section class="getstartedStepsSection">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">
                    <div class="getStartedContent text-center">
                        <div class="getstartedStepsimg" id="getstartedStepsimg1">
                            <img src="{{ asset('frontend/images/step1.png') }}" alt="" class="img-fluid">
                        </div>
                        <h2>STEP 1</h2>
                        <h4>Account Create</h4>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">
                    <div class="getStartedContent text-center">
                        <div class="getstartedStepsimg" id="getstartedStepsimg2">
                            <img src="{{ asset('frontend/images/step2.png') }}" alt="" class="img-fluid">
                        </div>
                        <h2>STEP 2</h2>
                        <h4>Domain hosting </h4>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">
                    <div class="getStartedContent text-center">
                        <div class="getstartedStepsimg" id="getstartedStepsimg3">
                            <img src="{{ asset('frontend/images/step.png') }}" alt="" class="img-fluid">
                        </div>
                        <h2>STEP 3</h2>
                        <h4>Theme create</h4>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">
                    <div class="getStartedContent text-center">
                        <div class="getstartedStepsimg" id="getstartedStepsimg4">
                            <img src="{{ asset('frontend/images/step4.png') }}" alt="" class="img-fluid">
                        </div>
                        <h2>STEP 4</h2>
                        <h4>Social link</h4>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xl-12 col-lg-12 col-md-6 col-sm-6 col-12">
                    <div class="getstartedStepsBtn">
                        <a href="{{ route('business') }}">Get Started</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection