<?php
include("header.php");
?>


<!-- #header -->

<!--==========================
    Intro Section
  ============================-->

<div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:1600px;height:696px;overflow:hidden;visibility:hidden;">
  <!-- Loading Screen -->
  <div data-u="loading" class="jssorl-009-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);">
    <img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;" src="img/spin.svg" />
  </div>
  <div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:1600px;height:696px;overflow:hidden;">
    <div> <img data-u="image" src="img/banner/banner1.png" /></div>
    <div> <img data-u="image" src="img/banner/banner2.png" /></div>
    <div> <img data-u="image" src="img/banner/banner3.png" /></div>
  </div>
  <!-- Bullet Navigator -->
  <div data-u="navigator" class="jssorb053" style="position:absolute;bottom:12px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
    <div data-u="prototype" class="i" style="width:16px;height:16px;">
      <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
        <path class="b" d="M11400,13800H4600c-1320,0-2400-1080-2400-2400V4600c0-1320,1080-2400,2400-2400h6800 c1320,0,2400,1080,2400,2400v6800C13800,12720,12720,13800,11400,13800z"></path>
      </svg>
    </div>
  </div>
  <!-- Arrow Navigator -->
  <div data-u="arrowleft" class="jssora093" style="width:50px;height:50px;top:0px;left:30px;" data-autocenter="2" data-scale="0.75" data-scale-left="0.75">
    <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
      <circle class="c" cx="8000" cy="8000" r="5920"></circle>
      <polyline class="a" points="7777.8,6080 5857.8,8000 7777.8,9920 "></polyline>
      <line class="a" x1="10142.2" y1="8000" x2="5857.8" y2="8000"></line>
    </svg>
  </div>
  <div data-u="arrowright" class="jssora093" style="width:50px;height:50px;top:0px;right:30px;" data-autocenter="2" data-scale="0.75" data-scale-right="0.75">
    <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
      <circle class="c" cx="8000" cy="8000" r="5920"></circle>
      <polyline class="a" points="8222.2,6080 10142.2,8000 8222.2,9920 "></polyline>
      <line class="a" x1="5857.8" y1="8000" x2="10142.2" y2="8000"></line>
    </svg>
  </div>
</div>
<script type="text/javascript">
  jssor_1_slider_init();
</script>
<!-- #endregion Jssor Slider End -->
<!-- #intro -->

<main id="main">
  <img src="img/wave/wave-white-red.png" alt="" style="width:100%;margin-bottom: -2px;">
  <!--==========================
      About Us Section
    ============================-->
  <section id="about">
    <div class="container">
      <div class="row">

        <div class="col-lg-4 col-md-4">
          <div class="p-t-100 wow bounceInUp" data-wow-duration="1.4s">
            <img src="img/h-img2.png" alt="" class="wdth-100">
          </div>
        </div>


        <div class="col-lg-8 col-md-8 m-auto">
          <div class="about-content wow bounceInUp" data-wow-duration="1.4s">
            <h2>
              About Us
            </h2>
            <h3>
              Welcome to Spykaar Electricals
            </h3>
            <p class="color-white py-3">
              A stable present and an assured future are the results of a strong foundation leading the past. The vision, the hard work, the faith and the commitment put all together during the birth of any company, surely takes it to the standards that purely sets it apart by being simply extraordinary. SPYKAAR cables have always been consciously aware and environmentally friendly.
            </p>
          </div>
          <div class="row">
            <div class="col-md-4 m-auto text-center wow bounceInLeft" data-wow-duration="0.6s">
              <img src=" img/bulb.svg" alt="" style="width: 50px;">
              <h4 class="color-white font-weight-bold pt-2">Electrical Wires</h4>
              <p class="color-white">
                <!-- Lorem ipsum dolor sit amet consectetur adipisicing elit. -->
              </p>
            </div>
            <div class="col-md-4 m-auto text-center wow bounceInLeft" data-wow-duration="1s">
              <img src=" img/alarm.svg" alt="" style="width: 50px;">
              <h4 class="color-white font-weight-bold pt-2">24/7 Services</h4>
              <p class="color-white">
                <!-- Lorem ipsum dolor sit amet consectetur adipisicing elit. -->
              </p>
            </div>
            <div class="col-md-4 m-auto text-center wow bounceInLeft" data-wow-duration="1.4s">
              <img src=" img/bulb.svg" alt="" style="width: 50px;">
              <h4 class="color-white font-weight-bold pt-2">Electrical Cables</h4>
              <p class="color-white">
                <!-- Lorem ipsum dolor sit amet consectetur adipisicing elit. -->
              </p>
            </div>
          </div>
        </div>


      </div>
    </div>

  </section><!-- #about -->

  <img src="img/wave/wave-red-white.png" alt="" style="width:100%;">
  <!--==========================
      Products Section
    ============================-->
  <section id="products" class="wow fadeIn">

    <div class="container">
      <div class="row">
        <div class="col-12">
          <h2 class="title">
            Products
          </h2>
        </div>
        <div class="col-12">
          <div class="swiper-container slider1">
            <div class="swiper-wrapper">

              <div class="swiper-slide">
                <div class="read-more">
                  <a href="products.php#p1">
                    <button class="button type1 p-0">
                      <h5>SPYKAAR</h5>
                      <img src="img/products/1-1.jpg" alt="" class="products">
                      <p>
                        SUBMERSIBLE CABLES
                      </p>
                    </button>
                  </a>
                </div>
              </div>


              <div class="swiper-slide">
                <div class="read-more">
                  <a href="products.php#p2">
                    <button class="button type1 p-0">
                      <h5>SPYKAAR</h5>
                      <img src="img/products/2-1.jpg" alt="" class="products">
                      <p>
                        HOOK-UP WIRE & SHIELDED CABLE
                      </p>
                    </button>
                  </a>
                </div>
              </div>


              <div class="swiper-slide">
                <div class="read-more">
                  <a href="products.php#p3">
                    <button class="button type1 p-0">
                      <h5>SPYKAAR</h5>
                      <img src="img/products/3-1.jpg" alt="" class="products">
                      <p>
                        ROUND MULTICORE CABLES
                      </p>
                    </button>
                  </a>
                </div>
              </div>


              <div class="swiper-slide">
                <div class="read-more">
                  <a href="products.php#p4">
                    <button class="button type1 p-0">
                      <h5>SPYKAAR</h5>
                      <img src="img/products/4-1.jpg" alt="" class="products">
                      <p>
                        MULTISTRAND CABLES (FR)
                      </p>
                    </button>
                  </a>
                </div>
              </div>


              <div class="swiper-slide">
                <div class="read-more">
                  <a href="products.php#p5">
                    <button class="button type1 p-0">
                      <h5>SPYKAAR</h5>
                      <img src="img/products/5-1.jpg" alt="" class="products">
                      <p>
                        CCTV CABLES
                      </p>
                    </button>
                  </a>
                </div>
              </div>

              <div class="swiper-slide">
                <div class="read-more">
                  <a href="products.php#p6">
                    <button class="button type1 p-0">
                      <h5>SPYKAAR</h5>
                      <img src="img/products/6-1.jpg" alt="" class="products">
                      <p>
                        MINIATURE CIRCUIT BREAKER
                      </p>
                    </button>
                  </a>
                </div>
              </div>


              <div class="swiper-slide">
                <div class="read-more">
                  <a href="products.php#p7">
                    <button class="button type1 p-0">
                      <h5>SPYKAAR</h5>
                      <img src="img/products/7-1.jpg" alt="" class="products">
                      <p>
                        FR PVC INSULATION TAPE
                      </p>
                    </button>
                  </a>
                </div>
              </div>


              <div class="swiper-slide">
                <div class="read-more">
                  <a href="products.php#p8">
                    <button class="button type1 p-0">
                      <h5>SPYKAAR</h5>
                      <img src="img/products/8-1.jpg" alt="" class="products">
                      <p>
                        CO-AXIAL CABLES
                      </p>
                    </button>
                  </a>
                </div>
              </div>


              <div class="swiper-slide">
                <div class="read-more">
                  <a href="products.php#p9">
                    <button class="button type1 p-0">
                      <h5>SPYKAAR</h5>
                      <img src="img/products/9-1.jpg" alt="" class="products">
                      <p>
                        DISTRIBUTION BOARD
                      </p>
                    </button>
                  </a>
                </div>
              </div>


              <div class="swiper-slide">
                <div class="read-more">
                  <a href="products.php#p10">
                    <button class="button type1 p-0">
                      <h5>SPYKAAR</h5>
                      <img src="img/products/10-1.jpg" alt="" class="products">
                      <p>
                        Working Voltage upto 1100V
                      </p>
                    </button>
                  </a>
                </div>
              </div>


            </div>
            <!-- Add Pagination -->
            <!-- <div class="swiper-button-next slider1"></div>
            <div class="swiper-button-prev slider1"></div> -->
            <!-- <div class="swiper-pagination slider2"></div> -->
          </div>
        </div>

        <!-- Swiper JS -->

        <script>
          var swiper = new Swiper('.slider1', {
            effect: 'coverflow',
            grabCursor: true,
            loop: true,
            centeredSlides: true,
            slidesPerView: 'auto',
            autoplay: {
              delay: 4000,
              disableOnInteraction: true,
            },
            coverflowEffect: {
              rotate: 0,
              stretch: 0,
              depth: 100,
              modifier: 5,
              slideShadows: false,
            },
            keyboard: {
              enabled: true,
            },
            navigation: {
              nextEl: '.swiper-button-next.slider1',
              prevEl: '.swiper-button-prev.slider1',
            },
            pagination: {
              el: '.swiper-pagination.slider2',
              dynamicBullets: true,
            },
            breakpoints: {
              3000: {
                slidesPerView: 3,
                spaceBetween: 40,
              },
              768: {
                slidesPerView: 3,
                spaceBetween: 30,
              },
              640: {
                slidesPerView: 1,
                spaceBetween: 20,
              },
              320: {
                slidesPerView: 1,
                spaceBetween: 10,
              }
            },
          });
        </script>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-12 text-center py-1">
          <div class="read-more"><a href="products.php"> <button class="button type1"> Read More </button> </a> </div>
        </div>
      </div>
    </div>
  </section>
  <!-- #Products -->


  <img src="img/wave/wave-white-gray.png" alt="" style="width:100%;margin-bottom: -2px;">

  <!--==========================
      Why Us Section
    ============================-->
  <section id="services" class="wow fadeIn">
    <div class="container">

      <div class="row">
        <div class="col-12">
          <h2 class="title">
            Services
          </h2>
        </div>

        <div class="col-lg-6 m-auto">
          <div class="why-us-img">
            <img src="img/service.png" alt="" class="img-fluid">
          </div>
        </div>

        <div class="col-lg-6">
          <section id="faq">
            <div class="container">
              <ul id="faq-list" class="wow fadeInUp">

                <li>
                  <a data-toggle="collapse" class="collapsed" href="#faq1">
                    <span class="acc-no">
                      1
                    </span>
                    Lorem ipsum dolor
                  </a>
                  <div id="faq1" class="collapse" data-parent="#faq-list">
                    <p>
                      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex consequatur optio praesentium, dolorum unde facere voluptas repellendus assumenda quas porro neque necessitatibus sed at laudantium, voluptates est eaque fuga nobis.
                      <a href="#"> Read More ... </a>
                    </p>
                  </div>
                </li>


                <li>
                  <a data-toggle="collapse" class="collapsed" href="#faq2">
                    <span class="acc-no">
                      2
                    </span>
                    Lorem ipsum dolor
                  </a>
                  <div id="faq2" class="collapse" data-parent="#faq-list">
                    <p>
                      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex consequatur optio praesentium, dolorum unde facere voluptas repellendus assumenda quas porro neque necessitatibus sed at laudantium, voluptates est eaque fuga nobis.
                      <a href="#"> Read More ... </a>
                    </p>
                  </div>
                </li>


                <li>
                  <a data-toggle="collapse" class="collapsed" href="#faq3">
                    <span class="acc-no">
                      3
                    </span>
                    Lorem ipsum dolor
                  </a>
                  <div id="faq3" class="collapse" data-parent="#faq-list">
                    <p>
                      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex consequatur optio praesentium, dolorum unde facere voluptas repellendus assumenda quas porro neque necessitatibus sed at laudantium, voluptates est eaque fuga nobis.
                      <a href="#"> Read More ... </a>
                    </p>
                  </div>
                </li>


                <li>
                  <a data-toggle="collapse" class="collapsed" href="#faq4">
                    <span class="acc-no">
                      4
                    </span>
                    Lorem ipsum dolor
                  </a>
                  <div id="faq4" class="collapse" data-parent="#faq-list">
                    <p>
                      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex consequatur optio praesentium, dolorum unde facere voluptas repellendus assumenda quas porro neque necessitatibus sed at laudantium, voluptates est eaque fuga nobis.
                      <a href="#"> Read More ... </a>
                    </p>
                  </div>
                </li>

                <li>
                  <a data-toggle="collapse" class="collapsed" href="#faq5">
                    <span class="acc-no">
                      5
                    </span>
                    Lorem ipsum dolor
                  </a>
                  <div id="faq5" class="collapse" data-parent="#faq-list">
                    <p>
                      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex consequatur optio praesentium, dolorum unde facere voluptas repellendus assumenda quas porro neque necessitatibus sed at laudantium, voluptates est eaque fuga nobis.
                      <a href="#"> Read More ... </a>
                    </p>
                  </div>
                </li>

                <li>
                  <a data-toggle="collapse" class="collapsed" href="#faq6">
                    <span class="acc-no">
                      6
                    </span>
                    Lorem ipsum dolor
                  </a>
                  <div id="faq6" class="collapse" data-parent="#faq-list">
                    <p>
                      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex consequatur optio praesentium, dolorum unde facere voluptas repellendus assumenda quas porro neque necessitatibus sed at laudantium, voluptates est eaque fuga nobis.
                      <a href="#"> Read More ... </a>
                    </p>
                  </div>
                </li>

              </ul>
            </div>
          </section>
        </div>
      </div>
    </div>
  </section>
  <img src="img/wave/wave-gray-white.png" alt="" style="width:100%;">

  <section id="clients">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <h2 class="title">
            Our Clients
          </h2>
        </div>

        <div class="col-6 col-md-3">
          <img src="img/clients/c1.png" alt="" style="width: 100%;">
        </div>


        <div class="col-6 col-md-3">
          <img src="img/clients/c2.png" alt="" style="width: 100%;">
        </div>

        <div class="col-6 col-md-3">
          <img src="img/clients/c3.png" alt="" style="width: 100%;">
        </div>

        <div class="col-6 col-md-3">
          <img src="img/clients/c4.png" alt="" style="width: 100%;">
        </div>

        <div class="col-6 col-md-3">
          <img src="img/clients/c5.png" alt="" style="width: 100%;">
        </div>

        <div class="col-6 col-md-3">
          <img src="img/clients/c6.png" alt="" style="width: 100%;">
        </div>

        <div class="col-6 col-md-3">
          <img src="img/clients/c7.png" alt="" style="width: 100%;">
        </div>

        <div class="col-6 col-md-3">
          <img src="img/clients/c8.png" alt="" style="width: 100%;">
        </div>

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

  <section id="testimonial" class="wow fadeIn py-5 my-5">
    <div class="container">
      <div class="row">

        <div class="col-md-6 m-auto">
          <img src="img/we-do.png" alt="" style="width: 100%;">
        </div>

        <div class="col-md-6 m-auto">
          <div class="row">
            <div class="col-12">
              <h2 class="title">
                Testimonial
              </h2>
            </div>
            <div class="col-12">
              <div class="swiper-container slider2">
                <div class="swiper-wrapper">

                  <div class="swiper-slide">
                    <p>
                      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facilis provident minima, nostrum, natus a optio possimus quos illum incidunt molestias, nulla at! Dolore quos animi natus porro, ex ducimus nobis!
                    </p>
                  </div>

                  <div class="swiper-slide">
                    <p>
                      Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque magnam iste cupiditate officiis repellendus iure itaque saepe veritatis ad sint, ratione veniam ipsam, fuga, excepturi laudantium deleniti illo totam esse!

                    </p>
                  </div>


                </div>
                <!-- Add Pagination -->
                <!-- <div class="swiper-button-next slider2 n"></div>
                <div class="swiper-button-prev slider2 p"></div> -->
                <!-- <div class="swiper-pagination slider2"></div> -->
              </div>
            </div>

            <!-- Swiper JS -->

            <script>
              var swiper = new Swiper('.slider2', {
                effect: 'coverflow',
                grabCursor: true,
                loop: true,
                centeredSlides: false,
                slidesPerView: 'auto',
                autoplay: {
                  delay: 4000,
                  disableOnInteraction: true,
                },
                coverflowEffect: {
                  rotate: 0,
                  stretch: 0,
                  depth: 100,
                  modifier: 0,
                  slideShadows: false,
                },
                keyboard: {
                  enabled: true,
                },
                navigation: {
                  nextEl: '.slider2.n',
                  prevEl: '.slider2.p',
                },
                breakpoints: {
                  3000: {
                    slidesPerView: 1,
                    spaceBetween: 40,
                  },
                  640: {
                    slidesPerView: 1,
                    spaceBetween: 10,
                  }
                },
              });
            </script>
          </div>

        </div>

      </div>
    </div>
  </section>
  <!-- #Products -->

</main>

<!--==========================
    Footer
  ============================-->
<?php
include("footer.php");
?>