@extends('layouts.layout')
@section('content')

<style>
    .thm-swiper__slider_1  {
    /* background: white; */
        -webkit-box-shadow: 0 0px 0px 0px rgba(0, 0, 0, 0.125);
        box-shadow: 0 0px 0px 0px rgba(0, 0, 0, 0.125);
        /* margin: auto; */
        /* overflow: hidden; */
        position: relative;
        width: 100%;
    }

    .thm-swiper__slider_1 .swiper-wrapper-1 {
        -webkit-animation: logo-scroll 60s linear infinite;
        animation: logo-scroll 60s linear infinite;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: calc(250px * 14);
        animation-duration: 30s;
        animation-iteration-count: infinite;
    }

    .thm-swiper__slider_1 .swiper-slide {
        height: 150px;
        width: 250px;
        padding: 20px;
    }

    @-webkit-keyframes logo-scroll {
        0% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }

        100% {
            -webkit-transform: translateX(calc(-250px * 7));
            transform: translateX(calc(-250px * 7));
        }
    }

    @keyframes logo-scroll {
        0% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }

        100% {
            -webkit-transform: translateX(calc(-250px * 7));
            transform: translateX(calc(-250px * 7));
        }
    }

    .swiper-wrapper-1::before, .swiper-wrapper-1::after {
        background: -webkit-gradient(linear, left top, right top, from(white), to(rgba(255, 255, 255, 0)));
        background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
        content: "";
        height: 175px;
        position: absolute;
        width: 200px;
        z-index: 2;
    }
</style>

<!--Main Slider Start-->
<section class="main-slider-four">
    <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-four"
                    style="background-image: url(assets/images/backgrounds/bg_1.png);"></div>
                <!-- /.image-layer -->

                <div class="main-slider-four__shape-1">
                    <img src="assets/images/shapes/main-slider-four-shape-1.png" alt="">
                </div>
                <div class="main-slider-four__shape-2">
                    <img src="assets/images/shapes/main-slider-four-shape-2.png" alt="">
                </div>
                <div class="main-slider-four__shape-3">
                    <img src="assets/images/shapes/main-slider-four-shape-3.png" alt="">
                </div>
                <div class="main-slider-four__shape-4"></div>
                <div class="main-slider-four__shape-5"></div>

                <div class="container">
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="main-slider-four__content">
                                <h2 class="main-slider-four__title">Petroleum <span>&</span> Gas</h2>
                                <p class="main-slider-four__text">There are many of passages of lorem Ipsum, but
                                    the majori have suffered <br> alteration in some form.</p>
                                <div class="main-slider-four__btn-box">
                                    <a href="about.html" class="thm-btn main-slider-four__btn">Discover
                                        more</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="swiper-slide">
                <div class="image-layer-four"
                    style="background-image: url(assets/images/backgrounds/bg_2.png);"></div>
                <!-- /.image-layer -->

                <div class="main-slider-four__shape-1">
                    <img src="assets/images/shapes/main-slider-four-shape-1.png" alt="">
                </div>
                <div class="main-slider-four__shape-2">
                    <img src="assets/images/shapes/main-slider-four-shape-2.png" alt="">
                </div>
                <div class="main-slider-four__shape-3">
                    <img src="assets/images/shapes/main-slider-four-shape-3.png" alt="">
                </div>
                <div class="main-slider-four__shape-4"></div>
                <div class="main-slider-four__shape-5"></div>

                <div class="container">
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="main-slider-four__content">
                                <h2 class="main-slider-four__title">Petroleum <span>&</span> Gas</h2>
                                <p class="main-slider-four__text">There are many of passages of lorem Ipsum, but
                                    the majori have suffered <br> alteration in some form.</p>
                                <div class="main-slider-four__btn-box">
                                    <a href="about.html" class="thm-btn main-slider-four__btn">Discover
                                        more</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-four__nav">
            <div class="swiper-button-prev" id="main-slider__swiper-button-next">
                <i class="icon-left-arrow"></i>
            </div>
            <div class="swiper-button-next" id="main-slider__swiper-button-prev">
                <i class="icon-right-arrow"></i>
            </div>
        </div>

    </div>
</section>
<!--Main Slider End-->

<!--About Four Start-->
<section class="about-four">
    <div class="container">
        <div class="row">
            <div class="col-xl-6">
                <div class="about-four__left">
                    <div class="about-four__img-box wow slideInLeft" data-wow-delay="100ms"
                        data-wow-duration="2500ms">
                        <div class="about-four__img">
                            <img src="assets/images/about/3.png" height="750px" alt="">
                        </div>
                        <div class="about-four__video-link">
                            <a href="https://www.youtube.com/watch?v=iApFUBm45bs" class="video-popup">
                                <div class="about-four__video-icon">
                                    <span class="fa fa-play"></span>
                                    <i class="ripple"></i>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-6">
                <div class="about-four__right">
                    <div class="section-title text-left">
                        <span class="section-title__tagline">Welcome to Industry</span>
                        <h2 class="section-title__title">About Company</h2>
                    </div>
                    <p class="about-four__text">MOULDAIR SOLUTIONS, was started in the year 2011 by<br>  
                        <b>Mr. ARVIND SINGH & Mr. SANTOSH SINGH,</b><br>
                        qualified graduates in Mechanical Engineering & 
                        Accounting. </p>
                    <p>The company is associated with Pumps related to<br><br> </p>
                    <ul class="list-unstyled about-four__points">
                        <li>
                            <div class="about-four__icon-box">
                                <div class="about-four__icon"><span class="fa fa-check"></span></div>
                                <p class="about-four__icon-text">Chemical</p>
                            </div>
                        </li>
                        <li style="margin-left: 80px;">
                            <div class="about-four__icon-box">
                                <div class="about-four__icon"><span class="fa fa-check"></span></div>
                                <p class="about-four__icon-text">Petrochemical</p>
                            </div>
                        </li>
                    </ul>
                    <ul class="list-unstyled about-four__points">
                        <li>
                            <div class="about-four__icon-box">
                                <div class="about-four__icon"><span class="fa fa-check"></span></div>
                                <p class="about-four__icon-text">Pharmaceutical</p>
                            </div>
                        </li>
                        <li style="margin-left: 26px;">
                            <div class="about-four__icon-box">
                                <div class="about-four__icon"><span class="fa fa-check"></span></div>
                                <p class="about-four__icon-text">Paint</p>
                            </div>
                        </li>
                    </ul>
                    <ul class="list-unstyled about-four__points">
                        <li>
                            <div class="about-four__icon-box">
                                <div class="about-four__icon"><span class="fa fa-check"></span></div>
                                <p class="about-four__icon-text">Ceramics</p>
                            </div>
                        </li>
                        <li style="margin-left: 80px;">
                            <div class="about-four__icon-box">
                                <div class="about-four__icon"><span class="fa fa-check"></span></div>
                                <p class="about-four__icon-text">Food/Dairy Industries</p>
                            </div>
                        </li>
                    </ul>
                    <div class="about-four__bottom">
                        <div class="about-four__bottom-left">
                            <div class="about-four__bottom-text-box">
                                <p class="about-four__text">Looking to our fair business policies and co-ordination, we are associated with International Companies Like <b>INGERSOLL-RAND INDIA LIMITED,</b><br> <b>MILTON ROY INDIA PVT. LTD.</b></p>
                            </div>
                            <div class="about-four__btn-box">
                                <a href="{{route('about')}}" class="thm-btn about-four__btn">Discover more</a>
                            </div>
                        </div>
                        <div class="about-four__bottom-right">
                            <div class="about-four__project-completed">
                                <div class="about-four__project-completed-icon">
                                    <span class="icon-refinery"></span>
                                </div>
                                <div class="about-four__project-completed-count-box count-box">
                                    <h3 class="count-text" data-stop="2860" data-speed="1500">00 </h3></i>
                                    <p>Products has <br> been delivered</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--About Four End-->

<!--Products Start-->
<section class="feature-one">
    <div class="feature-one__shape-1 float-bob-y">
        <img src="assets/images/shapes/feature-one-shape-1.png" alt="">
    </div>
    <div class="container">
        <div class="row">
            <!--Air Operated Double Diaphragm Pumps Start-->
            <div class="col-xl-4 col-lg-4 wow fadeInUp" data-wow-delay="200ms">
                <div class="feature-one__single">
                    <div class="feature-one__content">
                        <div class="feature-one__content-bg" style="background-image: url(assets/images/products/air_diaphragm_pumps.jpg);"></div>
                        <h3 class="feature-one__title"><a href="{{route('air_diaphragm_pumps')}}">Air Operated Double Diaphragm Pumps</a></h3>
                        <p class="feature-one__text">MouldAir air operated double diaphragm pumps can easily pump light to medium viscosity fluids. Our pneumatic diaphragm pumps provide stall-free, ice-free operation.</p>
                    </div>
                    <div class="feature-one__single-one-btn-box">
                        <a href="{{route('air_diaphragm_pumps')}}" class="thm-btn feature-one__single-one-btn">Discover more</a>
                    </div>
                </div>
            </div>
            <!--Air Operated Double Diaphragm Pumps End-->
            <!--Electric Diaphragm Pumps Start-->
            <div class="col-xl-4 col-lg-4 wow fadeInUp" data-wow-delay="200ms">
                <div class="feature-one__single">
                    <div class="feature-one__content">
                        <div class="feature-one__content-bg" style="background-image: url(assets/images/products/electric_diaphragm_pumps.jpg);"></div>
                        <h3 class="feature-one__title"><a href="{{route('electric_diaphragm_pumps')}}">Electric Diaphragm Pumps<br><br></a></h3>
                        <p class="feature-one__text">MouldAir EVO Series™ Electric Diaphragm Pumps offer a unique set of proven technologies in one breakthrough positive displacement pump.</p>
                    </div>
                    <div class="feature-one__single-one-btn-box">
                        <a href="{{route('electric_diaphragm_pumps')}}" class="thm-btn feature-one__single-one-btn">Discover more</a>
                    </div>
                </div>
            </div>
            <!--Electric Diaphragm Pumps End-->
            <!--Piston Pumps Start-->
            <div class="col-xl-4 col-lg-4 wow fadeInUp" data-wow-delay="300ms">
                <div class="feature-one__single">
                    <div class="feature-one__content">
                        <div class="feature-one__content-bg" style="background-image: url(assets/images/products/piston_pumps.jpg);"></div>
                        <h3 class="feature-one__title"><a href="{{route('piston_pumps')}}">Piston Pumps<br><br></a></h3>
                        <p class="feature-one__text">MouldAir offers hydraulic piston pumps and pneumatic piston pumps for a variety of applications.
                            Find the right piston pump solution for a range of viscous fluids.</p>
                    </div>
                    <div class="feature-one__single-one-btn-box">
                        <a href="{{route('piston_pumps')}}" class="thm-btn feature-one__single-one-btn">Discover more</a>
                    </div>
                </div>
            </div>
            <!--Piston Pumps End-->
        </div>
    </div>
</section>
<!--Products End-->

<!--Markets Start-->
<section class="project-four">
    <div class="project-four__bg-box">
        <div class="project-four__bg" style="background-image: url(assets/images/backgrounds/project-four-bg.jpg);"></div>
    </div>
    <div class="container">
        <div class="section-title text-center">
            <span class="section-title__tagline" style="margin-top: 50px">Check Our Markets</span>
            <h2 class="section-title__title">Featured Applications<br></h2>
        </div>
        <div class="project-four__carousel owl-carousel owl-theme thm-owl__carousel" data-owl-options='{
            "loop": true,
            "autoplay": true,
            "margin": 30,
            "nav": false,
            "dots": true,
            "smartSpeed": 500,
            "autoplayTimeout": 10000,
            "navText": ["<span class=\"icon-left-arrow\"></span>","<span class=\"icon-right-arrow\"></span>"],
            "responsive": {
                "0": {
                    "items": 1
                },
                "768": {
                    "items": 2
                },
                "992": {
                    "items": 3
                },
                "1200": {
                    "items": 4
                }
            }
        }'>
            <!--Adhesives & Sealants Start-->
            <div class="item">
                <div class="project-four__single">
                    <div class="project-four__img">
                        <img src="assets/images/products/adhesives_sealants.jpg" height="350px" alt="">
                        <div class="project-four__content">
                            <h3 class="project-four__title"><a href="project-details.html">Adhesives & Sealants</a></h3>
                        </div>
                        <div class="project-four__arrow">
                            <a href="https://www.arozone.com/en-in/applications/adhesive-and-sealants" target="_blank"><span class="icon-right-arrow"></span></a>
                        </div>
                    </div>
                </div>
            </div>
            <!--Adhesives & Sealants End-->
            <!--Chemical Processing Start-->
            <div class="item">
                <div class="project-four__single">
                    <div class="project-four__img">
                        <img src="assets/images/products/chemical_processing.jpg" height="350px" alt="">
                        <div class="project-four__content">
                            <h3 class="project-four__title"><a href="{{route('chemical_processing')}}">Chemical Processing</a></h3>
                        </div>
                        <div class="project-four__arrow">
                            <a href="{{route('chemical_processing')}}"><span class="icon-right-arrow"></span></a>
                        </div>
                    </div>
                </div>
            </div>
            <!--Chemical Processing End-->
            <!--General Manufacturing Start-->
            <div class="item">
                <div class="project-four__single">
                    <div class="project-four__img">
                        <img src="assets/images/products/general_manufacturing.jpg" height="350px" alt="">
                        <div class="project-four__content">
                            <h3 class="project-four__title"><a href="{{route('general_manufacturing')}}">General Manufacturing</a>
                            </h3>
                        </div>
                        <div class="project-four__arrow">
                            <a href="{{route('general_manufacturing')}}"><span class="icon-right-arrow"></span></a>
                        </div>
                    </div>
                </div>
            </div>
            <!--General Manufacturing End-->
            <!--Lubrication Start-->
            <div class="item">
                <div class="project-four__single">
                    <div class="project-four__img">
                        <img src="assets/images/products/lubrication.jpg" height="350px" alt="">
                        <div class="project-four__content">
                            <h3 class="project-four__title"><a href="https://www.arozone.com/en-in/applications/lubrication" target="_blank">Lubrication</a>
                            </h3>
                        </div>
                        <div class="project-four__arrow">
                            <a href="https://www.arozone.com/en-in/applications/lubrication" target="_blank"><span class="icon-right-arrow"></span></a>
                        </div>
                    </div>
                </div>
            </div>
            <!--Lubrication End-->
            <!--Ceramics Start-->
            <div class="item">
                <div class="project-four__single">
                    <div class="project-four__img">
                        <img src="assets/images/markets/ceramics.jpg" height="350px" alt="">
                        <div class="project-four__content">
                            <h3 class="project-four__title"><a href="https://www.arozone.com/en-in/applications/ceramics" target="_blank">Ceramics</a></h3>
                        </div>
                        <div class="project-four__arrow">
                            <a href="https://www.arozone.com/en-in/applications/ceramics" target="_blank"><span class="icon-right-arrow"></span></a>
                        </div>
                    </div>
                </div>
            </div>
            <!--Ceramics End-->
            <!--Cosmetics & Pharmaceuticals Start-->
            <div class="item">
                <div class="project-four__single">
                    <div class="project-four__img">
                        <img src="assets/images/markets/cosmetics_pharmaceuticals.jpg" height="350px" alt="">
                        <div class="project-four__content">
                            <h3 class="project-four__title"><a href="https://www.arozone.com/en-in/applications/cosmetics-and-pharmaceuticals" target="_blank">Cosmetics & Pharmaceuticals</a></h3>
                        </div>
                        <div class="project-four__arrow">
                            <a href="https://www.arozone.com/en-in/applications/cosmetics-and-pharmaceuticals" target="_blank"><span class="icon-right-arrow"></span></a>
                        </div>
                    </div>
                </div>
            </div>
            <!--Cosmetics & Pharmaceuticals End-->
            <!--Food & Beverage Start-->
            <div class="item">
                <div class="project-four__single">
                    <div class="project-four__img">
                        <img src="assets/images/markets/food_beverage.jpg" height="350px" alt="">
                        <div class="project-four__content">
                            <h3 class="project-four__title"><a href="https://www.arozone.com/en-in/applications/food-and-beverage" target="_blank">Food & Beverage</a>
                            </h3>
                        </div>
                        <div class="project-four__arrow">
                            <a href="https://www.arozone.com/en-in/applications/food-and-beverage" target="_blank"><span class="icon-right-arrow"></span></a>
                        </div>
                    </div>
                </div>
            </div>
            <!--Food & Beverage End-->
            <!--Marine Start-->
            <div class="item">
                <div class="project-four__single">
                    <div class="project-four__img">
                        <img src="assets/images/markets/marine.jpg" height="350px" alt="">
                        <div class="project-four__content">
                            <h3 class="project-four__title"><a href="https://www.arozone.com/en-in/applications/marine" target="_blank">Marine</a></h3>
                        </div>
                        <div class="project-four__arrow">
                            <a href="https://www.arozone.com/en-in/applications/marine" target="_blank"><span class="icon-right-arrow"></span></a>
                        </div>
                    </div>
                </div>
            </div>
            <!--Marine End-->
        </div>
    </div>
</section>
<!--Markets End-->

<!--Counter Four Start-->
<section class="counter-four">
    <div class="container">
        <div class="row">
            <!--Counter Four Single Start-->
            <div class="col-xl-4 col-lg-4">
                <div class="counter-four__single">
                    <div class="counter-four__single-inner">
                        <div class="counter-four__shape-1">
                            <img src="assets/images/shapes/counter-four-shape-1.png" alt="">
                        </div>
                        <div class="counter-four__icon">
                            <span class="icon-rating-stars"></span>
                        </div>
                        <div class="counter-four__content count-box">
                            <h3 class="count-text" data-stop="180" data-speed="1500">00</h3>
                            <p>Happy customers</p>
                        </div>
                    </div>
                </div>
            </div>
            <!--Counter Four Single End-->
            <!--Counter Four Single Start-->
            <div class="col-xl-4 col-lg-4">
                <div class="counter-four__single">
                    <div class="counter-four__single-inner">
                        <div class="counter-four__shape-1">
                            <img src="assets/images/shapes/counter-four-shape-1.png" alt="">
                        </div>
                        <div class="counter-four__icon">
                            <span class="icon-oil"></span>
                        </div>
                        <div class="counter-four__content count-box">
                            <h3 class="count-text" data-stop="794" data-speed="1500">00</h3>
                            <p>Oil & gas products</p>
                        </div>
                    </div>
                </div>
            </div>
            <!--Counter Four Single End-->
            <!--Counter Four Single Start-->
            <div class="col-xl-4 col-lg-4">
                <div class="counter-four__single">
                    <div class="counter-four__single-inner">
                        <div class="counter-four__shape-1">
                            <img src="assets/images/shapes/counter-four-shape-1.png" alt="">
                        </div>
                        <div class="counter-four__icon">
                            <span class="icon-checked"></span>
                        </div>
                        <div class="counter-four__content count-box">
                            <h3 class="count-text" data-stop="268" data-speed="1500">00</h3>
                            <p>Projects completed</p>
                        </div>
                    </div>
                </div>
            </div>
            <!--Counter Four Single End-->
        </div>
    </div>
</section>
<!--Counter Four End-->

<!--Client Logo-->
<section class="brand-one">
    <div class="container">
        <div class="section-title__title text-center">
            <h1 style="color: #E95959; font-weight: 600">Brands Association</h1>
        </div>
        <div class="thm-swiper__slider_1 swiper-container" data-swiper-options='{"spaceBetween": 100,
            "slidesPerView": 5,
            "loop": true,
            "autoplay": { "delay": 4000 },
            "breakpoints": {
                "0": {
                    "spaceBetween": 30,
                    "slidesPerView": 2
                },
                "375": {
                    "spaceBetween": 30,
                    "slidesPerView": 2
                },
                "575": {
                    "spaceBetween": 30,
                    "slidesPerView": 3
                },
                "767": {
                    "spaceBetween": 50,
                    "slidesPerView": 4
                },
                "991": {
                    "spaceBetween": 50,
                    "slidesPerView": 5
                },
                "1199": {
                    "spaceBetween": 100,
                    "slidesPerView": 5
                }
            }}'>
            <div class="swiper-wrapper-1">
                <div class="swiper-slide">
                    <img src="assets/images/client/client_1.png" alt="">
                </div><!-- /.swiper-slide -->
                <div class="swiper-slide">
                    <img src="assets/images/client/client_2.png" alt="">
                </div><!-- /.swiper-slide -->
                <div class="swiper-slide">
                    <img src="assets/images/client/client_3.png" alt="">
                </div><!-- /.swiper-slide -->
                <div class="swiper-slide">
                    <img src="assets/images/client/client_4.png" alt="">
                </div><!-- /.swiper-slide -->
                <div class="swiper-slide">
                    <img src="assets/images/client/client_5.png" alt="">
                </div><!-- /.swiper-slide -->
                <div class="swiper-slide">
                    <img src="assets/images/client/client_6.png" alt="">
                </div><!-- /.swiper-slide -->
                <div class="swiper-slide">
                    <img src="assets/images/client/client_1.png" alt="">
                </div><!-- /.swiper-slide -->
                <div class="swiper-slide">
                    <img src="assets/images/client/client_2.png" alt="">
                </div><!-- /.swiper-slide -->
                <div class="swiper-slide">
                    <img src="assets/images/client/client_3.png" alt="">
                </div><!-- /.swiper-slide -->
                <div class="swiper-slide">
                    <img src="assets/images/client/client_4.png" alt="">
                </div><!-- /.swiper-slide -->
                <div class="swiper-slide">
                    <img src="assets/images/client/client_5.png" alt="">
                </div><!-- /.swiper-slide -->
                <div class="swiper-slide">
                    <img src="assets/images/client/client_6.png" alt="">
                </div><!-- /.swiper-slide -->
            </div>
        </div>
    </div>
</section>
<!--Client Logo-->

@endsection