@extends('website.layouts.app')

@section('content')
    <!--=================================
    banner -->
    <section class="header-inner bg-dark text-center" style="margin-bottom: 100px;">
        <div class="container">
          <div class="row">
            <div class="col-sm-12 ">

              <h2 class="inner-banner-title">Our Ministries</h2>
            </div>
          </div>
        </div>
      </section>
      <!--=================================
      banner -->
    <!--=================================
    Service -->

    <section class="space-pb">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-10 col-md-12">
                    <div class="section-title text-center">
                        <h2 class="title">Discover how you can serve and connect through our diverse ministries.</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                @foreach($ministries as $ministry)

                <div class="col-md-4">
                    <div class="service-style-01 mb-5">
                        <img class="img-fluid" src="{{ asset('storage/' . $ministry->icon_image) }}" alt="{{ $ministry->ministry_name }}">
                        <a href="#" class="service-title">{{ $ministry->ministry_name }}</a>
                    </div>
                </div>
                @endforeach

            </div>
        </div>
    </section>
    <!--=================================
    Service -->

    <!--=================================
    Step -->
    <section class="space-pb">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-10 col-md-12">
                    <div class="section-title text-center">
                        <h2 class="title">Easy process to reach us!</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <ul class="feature-step-list">
                        <li>
                            <div class="feature-step text-center">
                                <div class="feature-step-divider">
                                    <div class="feature-step-icon">
                                        <span class="feature-step-number">1</span>
                                        <i class="flaticon-file"></i>
                                    </div>
                                </div>
                                <div class="feature-info-content">
                                    <h4 class="feature-info-title">Register online</h4>
                                    <p class="mb-0">Remind yourself you have nowhere to go except up as you have already been at the bottom.</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="feature-step text-center">
                                <div class="feature-step-divider">
                                    <div class="feature-step-icon">
                                        <span class="feature-step-number">2</span>
                                        <i class="flaticon-conversation"></i>
                                    </div>
                                </div>
                                <div class="feature-info-content">
                                    <h4 class="feature-info-title">We will call</h4>
                                    <p class="mb-0">What drives me? The thing that drives me most is the desire to find my limits–and extend them.</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="feature-step text-center">
                                <div class="feature-step-divider">
                                    <div class="feature-step-icon">
                                        <span class="feature-step-number">3</span>
                                        <i class="flaticon-hiring"></i>
                                    </div>
                                </div>
                                <div class="feature-info-content">
                                    <h4 class="feature-info-title">Enjoy your freedom</h4>
                                    <p class="mb-0">For those of you who are serious about having more, doing more, giving more and being more,</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <!--=================================
    Step -->
@endsection