<section class="main-slider-two clearfix">
            <div class="swiper-container thm-swiper__slider" data-swiper-options='{"slidesPerView": 1, "loop": true,
                "effect": "fade",
                "pagination": {
                "el": "#main-slider-pagination",
                "type": "bullets",
                "clickable": true
                },
                "navigation": {
                "nextEl": "#main-slider__swiper-button-next",
                "prevEl": "#main-slider__swiper-button-prev"
                },
                "autoplay": {
                "delay": 5000
                }}'>
                <div class="swiper-wrapper">

                    <div class="swiper-slide">
                        <div class="image-layer-two"
                            style="background-image: url(assets/images/banner1.jpg);"></div>
                        <!-- /.image-layer -->
                        <div style="padding-top: 250px;" class="container">
                            <div class="row">
                                <div  class="col-xl-12">
                                    <div  class="onlydesk main-slider-two__content">
                                        <img class = "" width ="40%" src="assets/images/1.png" /><br><br>
                                        <div class="main-slider-two__btn-box">
                                            <a href="#" class="thm-btn main-slider-two__btn">Discover More <i
                                                    class="icon-right-arrow"></i> </a>
                                        </div>
                                       
                                    </div>

                                    <div  class="onlymobile main-slider-two__content">
                                        <img class = "" width ="60%" src="assets/images/5.png" /><br><br>
                                        <div class="main-slider-two__btn-box">
                                            <a href="#" class="thm-btn main-slider-two__btn">Discover More <i
                                                    class="icon-right-arrow"></i> </a>
                                        </div>
                                       
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="swiper-slide">
                        <div class="image-layer-two"
                            style="background-image: url(assets/images/bannerogun4.jpg);"></div>
                        <!-- /.image-layer -->
                        <div style="padding-top: 250px;" class="container">
                            <div class="row">
                                      <div  class="col-xl-12">
                                    <div  class="onlydesk main-slider-two__content">
                                        <img class = "" width ="40%" src="assets/images/1.png" /><br><br>
                                        <div class="main-slider-two__btn-box">
                                            <a href="#" class="thm-btn main-slider-two__btn">Discover More <i
                                                    class="icon-right-arrow"></i> </a>
                                        </div>
                                       
                                    </div>

                                    <div  class="onlymobile main-slider-two__content">
                                        <img class = "" width ="60%" src="assets/images/5.png" /><br><br>
                                        <div class="main-slider-two__btn-box">
                                            <a href="#" class="thm-btn main-slider-two__btn">Discover More <i
                                                    class="icon-right-arrow"></i> </a>
                                        </div>
                                       
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="swiper-slide">
                        <div  class="image-layer-two"
                            style="background-image: url(assets/images/ogunbanner12.jpg);"></div>
                        <!-- /.image-layer -->
                        <div style="padding-top: 250px;" class="container">
                            <div class="row">
                                      <div  class="col-xl-12">
                                    <div  class="onlydesk main-slider-two__content">
                                        <img class = "" width ="40%" src="assets/images/1.png" /><br><br>
                                        <div class="main-slider-two__btn-box">
                                            <a href="#" class="thm-btn main-slider-two__btn">Discover More <i
                                                    class="icon-right-arrow"></i> </a>
                                        </div>
                                       
                                    </div>

                                    <div  class="onlymobile main-slider-two__content">
                                        <img class = "" width ="60%" src="assets/images/5.png" /><br><br>
                                        <div class="main-slider-two__btn-box">
                                            <a href="#" class="thm-btn main-slider-two__btn">Discover More <i
                                                    class="icon-right-arrow"></i> </a>
                                        </div>
                                       
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>


                </div>

                <div class="swiper-pagination" id="main-slider-pagination"></div>

                <!-- If we need navigation buttons -->
                <div class="main-slider__nav">
                    <div class="swiper-button-prev" id="main-slider__swiper-button-next">
                        <i class="icon-right-arrow"></i>
                    </div>
                    <div class="swiper-button-next" id="main-slider__swiper-button-prev">
                        <i class="icon-right-arrow"></i>
                    </div>
                </div>

            </div>
        </section>