@extends('layouts.pages')

@section('content')

<!-- Hero Start -->
        <section class="bg-half d-table w-100" style="background: url('{{ asset('images/kosmic-organic-hydroponic-vegetable.jpg') }}');">
            <div class="bg-overlay"></div>
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-12 text-center">
                        <div class="page-next-level title-heading">
                            <h1 class="text-white title-dark"> Aboutus </h1>
                            <p class="text-white-50 para-desc mb-0 mx-auto"></p>
                            <div class="page-next">
                                <nav aria-label="breadcrumb" class="d-inline-block">
                                    <ul class="breadcrumb bg-white rounded shadow mb-0">
                                        <li class="breadcrumb-item"><a href="{{ url('/') }} ">Kosmic Farms</a></li>
                                        <li class="breadcrumb-item active" aria-current="page">Aboutus</li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div><!--end col-->
                </div><!--end row--> 
            </div> <!--end container-->
        </section><!--end section-->
        <div class="position-relative">
            <div class="shape overflow-hidden text-white">
                <svg viewBox="0 0 2880 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0 48H1437.5H2880V0H2160C1442.5 52 720 0 720 0H0V48Z" fill="currentColor"></path>
                </svg>
            </div>
        </div>
        <!-- Hero End -->

        <section class="section">
            <div class="container">
                <div class="row align-items-center" id="counter">
                    <div class="col-md-6">
                        <img src="{{ asset('images/kosmic_farms_about_us.png') }}" class="img-fluid" alt="">
                    </div><!--end col-->

                    <div class="col-md-6 mt-4 pt-2 mt-sm-0 pt-sm-0">
                        <div class="ml-lg-4">
                           
                            <div class="section-title">
                                <h4 class="title mb-4">Who we are.</h4>
								<p class="text-muted">We are an <span class="text-primary font-weight-bold">agricultural company</span> producing fresh and frozen fruits, vegetables, fish, meats and other produce using organic techniques. Kosmic Farms, <span class="text-primary font-weight-bold">our goal is to provide sustainable source of healthy produce</span> for your family and events.</p>
                                <a href="{{ url('/contact') }}" class="btn btn-primary mt-3">Contact us</a>
                            </div>
                        </div>
                    </div><!--end col-->
                </div><!--end row-->
            </div><!--end container-->

            <div class="container mt-4">
                <div class="row justify-content-center">
                    <div class="col-lg-2 col-md-2 col-6 text-center pt-4">
                        <img src="images/client/amazon.svg" class="avatar avatar-ex-sm" alt="">
                    </div><!--end col-->

                    <div class="col-lg-2 col-md-2 col-6 text-center pt-4">
                        <img src="images/client/google.svg" class="avatar avatar-ex-sm" alt="">
                    </div><!--end col-->
                    
                    <div class="col-lg-2 col-md-2 col-6 text-center pt-4">
                        <img src="images/client/lenovo.svg" class="avatar avatar-ex-sm" alt="">
                    </div><!--end col-->
                    
                    <div class="col-lg-2 col-md-2 col-6 text-center pt-4">
                        <img src="images/client/paypal.svg" class="avatar avatar-ex-sm" alt="">
                    </div><!--end col-->
                    
                    <div class="col-lg-2 col-md-2 col-6 text-center pt-4">
                        <img src="images/client/shopify.svg" class="avatar avatar-ex-sm" alt="">
                    </div><!--end col-->
                    
                    <div class="col-lg-2 col-md-2 col-6 text-center pt-4">
                        <img src="images/client/spotify.svg" class="avatar avatar-ex-sm" alt="">
                    </div><!--end col-->
                </div><!--end row-->
            </div><!--end container-->
        </section><!--end section-->
        
        <section class="section bg-light">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-12">
                        <div class="section-title text-center mb-4 pb-2">
                            <h6 class="text-primary">Produce Process</h6>
                            <h4 class="title mb-4">How do we work ?</h4>
                            <p class="text-muted para-desc mx-auto mb-0">We produce fruits, vegetables, fish and meat and other produce organically</p>
                        </div>
                    </div><!--end col-->
                </div><!--end row-->

                <div class="row">
                    <div class="col-md-4 mt-4 pt-2">
                        <div class="card features work-process bg-transparent process-arrow border-0 text-center">
                            <div class="icons rounded h1 text-center text-primary px-3">
                                <i class="uil uil-presentation-edit"></i>
                            </div>

                            <div class="card-body">
                                <h4 class="title text-dark">Grow</h4>
                                <p class="text-muted mb-0">Fruits and vegetables are grown using aquaponics and livestock manure from fish and meat livestock.</p>
                            </div>
                        </div>
                    </div><!--end col-->
                    
                    <div class="col-md-4 mt-md-5 pt-md-3 mt-4 pt-2">
                        <div class="card features work-process bg-transparent process-arrow border-0 text-center">
                            <div class="icons rounded h1 text-center text-primary px-3">
                                <i class="uil uil-airplay"></i>
                            </div>

                            <div class="card-body">
                                <h4 class="title text-dark">Package</h4>
                                <p class="text-muted mb-0">Produce are harvested and packaged for both fresh and frozen distribution.</p>
                            </div>
                        </div>
                    </div><!--end col-->
                    
                    <div class="col-md-4 mt-md-5 pt-md-5 mt-4 pt-2">
                        <div class="card features work-process bg-transparent d-none-arrow border-0 text-center">
                            <div class="icons rounded h1 text-center text-primary px-3">
                                <i class="uil uil-image-check"></i>
                            </div>

                            <div class="card-body">
                                <h4 class="title text-dark">Transportation</h4>
                                <p class="text-muted mb-0">Once packaged, produce are quickly transported to your grocery store.</p>
                            </div>
                        </div>
                    </div><!--end col-->
                </div><!--end row-->
            </div><!--end container-->

        </section><!--end section-->

        
       
@endsection