jQuery('#slider__inner-1').owlCarousel({
  loop: true,
  autoplay: true,
  autoplayTimeout: 5000,
  slideSpeed: 8000,
  paginationSpeed: 8000,
  // scrollPerPage: true,
  margin: 10,
  nav: true,
  navText: ["<i class='fas fa-angle-left'></i>", "<i class='fas fa-angle-right'></i>"],
  dots: true,
  items: 1,
  // responsiveClass: true,
  responsive: {
    0: {
      items: 1,

    },
    480: {
      items: 1,

    },
    767: {
      items: 1
    },
    991: {
      items: 1
    },
    1200: {
      items: 1
    }
  }
});

// product carasual //
jQuery(document).ready(function () {
  // reference for main items
  var slider = jQuery('.slider__product');
  // reference for thumbnail items
  var thumbnailSlider = jQuery('.thumbnailSlider');
  //transition time in ms
  var duration = 1000;

  // carousel function for main slider
  slider.owlCarousel({
    loop: false,
    nav: true,
    navText: ["<i class='fas fa-angle-left'></i>", "<i class='fas fa-angle-right'></i>"],
    autoplay: false,
    dots: false,
    items: 1
  }).on('changed.owl.carousel', function (e) {
    //On change of main item to trigger thumbnail item
    thumbnailSlider.trigger('to.owl.carousel', [e.item.index, duration, true]);
  });

  // carousel function for thumbnail slider
  thumbnailSlider.owlCarousel({
    loop: false,
    margin: 10,
    center: false, //to display the thumbnail item in center
    nav: false,
    autoplay: false,
    responsive: {
      0: {
        items: 3
      },
      600: {
        items: 4
      },
      1000: {
        items: 4
      }
    }
  }).on('click', '.owl-item', function () {
    // On click of thumbnail items to trigger same main item
    slider.trigger('to.owl.carousel', [jQuery(this).index(), duration, true]);

  }).on('changed.owl.carousel', function (e) {
    // On change of thumbnail item to trigger main item
    slider.trigger('to.owl.carousel', [e.item.index, duration, true]);
  });

  //These two are navigation for main items
  jQuery('.slider-right').click(function () {
    slider.trigger('next.owl.carousel');
  });
  jQuery('.slider-left').click(function () {
    slider.trigger('prev.owl.carousel');
  });
});
// banner //
jQuery('#banner-slider').owlCarousel({
  loop: true,
  margin: 0,
  nav: false,
  dots: true,
  autoplay: true,
  autoplaySpeed: 2000,
  slideSpeed: 5000,
  paginationSpeed: 7000,
  autoplayTimeout: 6000,
  animateOut: 'fadeOut',
  animateIn: 'fadeIn',
  smartSpeed: 1000,
  // responsiveClass: true,
  responsive: {
    0: {
      items: 1,

    },
    480: {
      items: 1,

    },
    767: {
      items: 1
    },
    991: {
      items: 1
    },
    1200: {
      items: 1
    }
  }
});
// review //
jQuery('#review-slider').owlCarousel({
  loop: true,
  autoplay: true,
  fluidSpeed: true,
  autoplayHoverPause: true,
  autoplay: true,
  autoplayTimeout: 10000,
  responsiveClass: true,
  margin: -20,
  nav: true,
  navText: ["<i class='fas fa-long-arrow-alt-left'></i>", "<i class='fas fa-long-arrow-alt-right'></i>"],
  dots: true,
  items: 1,
  smartSpeed: 700,
  // responsiveClass: true,
  responsive: {
    0: {
      items: 1,
      center: true,
    },
    480: {
      items: 1,
      center: true,
    },
    767: {
      items: 2,
      center: true,
    },
    991: {
      items: 3,
      center: true,
    },
    1200: {
      items: 3,
      center: true,
    }
  },
});

// inner slider //
jQuery('#slider__inner').owlCarousel({
  loop: true,
  autoplay: true,
  autoplayTimeout: 5000,
  slideSpeed: 8000,
  paginationSpeed: 8000,
  // scrollPerPage: true,
  margin: 10,
  nav: true,
  navText: ["<i class='fas fa-angle-left'></i>",
    "<i class='fas fa-angle-right'></i>"
  ],
  dots: true,
  items: 1,
  // responsiveClass: true,
  responsive: {
    0: {
      items: 1,

    },
    480: {
      items: 1,

    },
    767: {
      items: 1
    },
    991: {
      items: 1
    },
    1200: {
      items: 1
    }
  }
});
// inner slider //
jQuery('#slider__inner-1').owlCarousel({
  loop: true,
  autoplay: true,
  autoplayTimeout: 5000,
  slideSpeed: 8000,
  paginationSpeed: 8000,
  // scrollPerPage: true,
  margin: 10,
  nav: true,
  navText: ["<i class='fas fa-angle-left'></i>", "<i class='fas fa-angle-right'></i>"],
  dots: true,
  items: 1,
  // responsiveClass: true,
  responsive: {
    0: {
      items: 1,

    },
    480: {
      items: 1,

    },
    767: {
      items: 1
    },
    991: {
      items: 1
    },
    1200: {
      items: 1
    }
  }
});

// menu and videopopup //
jQuery(function () {
  "use strict";
  jQuery(".navbar-toggler").on('click', function () {
    jQuery(this).toggleClass('active');
  });

  jQuery(".navbar-nav a").on('click', function () {
    jQuery(".navbar-toggler").removeClass('active');
  });
  var subMenu = jQuery(".sub-menu-bar .navbar-nav .sub-menu");

  if (subMenu.length) {
    subMenu.parent('li').children('a').append(function () {
      return '<button class="sub-nav-toggler"> <i class="fa fa-angle-down"></i> </button>';
    });

    var subMenuToggler = jQuery(".sub-menu-bar .navbar-nav .sub-nav-toggler");

    subMenuToggler.on('click', function () {
      jQuery(this).parent().parent().children(".sub-menu").slideToggle();
      return false
    });

  }

});

jQuery(function () {
  $('#lightgallery.grid').masonry({
    // set itemSelector so .grid-sizer is not used in layout
    itemSelector: '.grid-item',
    // use element for option
    percentPosition: true
  })
});