 
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
 <section>
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                     <div class="title-wrapper">
                            <h2>Various Sections In Plants</h2>                           
                       </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                     <div class="swiper myswiper"> 
                    <div class="swiper-wrapper">
                      <div class="swiper-slide"> <div class="col-12">
                <a class="" href="#"> 
					<div class="service-item1">
                  <div class="service-thumb">
                    <img src="images/product/de2.png" alt="product-img"class="ratio">
                  </div>
                  <div class="service-content">
                    <h5 class="text-white service-title">CNC Section</h5>
                   
                  </div>
                 
                </div></a>
              </div></div>
                      <div class="swiper-slide"> <div class="col-12">
                <a class="" href="#"> 
					<div class="service-item1">
                  <div class="service-thumb">
                    <img src="images/product/de3.png
" alt="product-img"class="ratio">
                  </div>
                  <div class="service-content">
                    <h5 class="text-white service-title">Lathe Section</h5>
                   
                  </div>
                 
                </div></a>
              </div></div>
                      <div class="swiper-slide"> <div class="col-12">
                <a class="" href="#"> 
					<div class="service-item1">
                  <div class="service-thumb">
                    <img src="images/product/de4.png
" alt="product-img"class="ratio">
                  </div>
                  <div class="service-content">
                    <h5 class="text-white service-title">CNC Section</h5>
                   
                  </div>
                 
                </div></a>
              </div></div>
                      <div class="swiper-slide"> <div class="col-12">
                <a class="" href="#"> 
					<div class="service-item1">
                  <div class="service-thumb">
                    <img src="images/product/de5.png
" alt="product-img"class="ratio">
                  </div>
                  <div class="service-content">
                    <h5 class="text-white service-title">Grinding Section</h5>
                   
                  </div>
                 
                </div></a>
              </div></div>
                      <div class="swiper-slide"> <div class="col-12">
                <a class="" href="#"> 
					<div class="service-item1">
                  <div class="service-thumb">
                    <img src="images/product/det.jpg" alt="product-img" class="ratio">
                  </div>
                  <div class="service-content">
                    <h5 class="text-white service-title">Inspection Area</h5> 
                   
                  </div>
                 
                </div></a>
              </div></div>
                     
                    </div>
                    <div class="swiper-pagination"></div>
                  </div>
                </div>
            </div>
        </div>
    </section>
    
     <style>   
   

    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      /*background: #fff;*/
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      
    }
    .swiper-pagination{
          transform: translatey(50px);
    }
    .swiper-slide .ratio{
       aspect-ratio: 4 / 2;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  <script>
    var swiper = new Swiper(".myswiper", {
      slidesPerView: 1,
      loop: true,
      autoplay:true,
      spaceBetween: 10,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      breakpoints: {
        640: {
          slidesPerView: 2,
          spaceBetween: 20,
        },
        768: {
          slidesPerView: 4,
          spaceBetween: 40,
        },
        1024: {
          slidesPerView: 2,
          spaceBetween: 30,
        },
      },
    });
  </script>
    