(function ($) {
	"use strict";

	/*--
	[Table of contents]

	# Preloder
    # Sticky Header 
    # Fancybox
    # Instagram Settings
    # Clients logo
    # Portfolio Controls
    # Carousel Control 
    # Mobile menu 
    # Banner Animation
    # Counter 
    # About Background animation 
    # Service Carousel
    # Instagram Carousel
    # TwentyTwenty Options
    # Fullscreen BTN Function 
    # Logo Center Function
    # Mobile Menu
    # Grid Massonry 
    # Scroll Top
    # Clock
	
 
    --*/

	//======================
	// Preloder
	//======================
	$(window).on("load", function () {
		$("#preloader").fadeOut();
	});

	/**
	 * 
	 * Lazy Loaders
	 */
	
	
	 
	 	
	function LazyLoader(){	

		let images = document.querySelectorAll('img[data-src]');
					
		document.addEventListener('DOMContentLoaded', onReady);
		function onReady() {
			//  Disable Lazy Selector
			var imgSrc = $('.imageDiff img, .port-item img, .protItem img');
			$(imgSrc).each(function(){
				var imgSc = $(this).attr('data-src');
				$(this).attr( 'src', imgSc )
			})
		
			// var imgSrcEl = $('.el-blog-post img');
			// $(imgSrcEl).each(function(){
			// 	var imgScc = $(this).attr('data-data-src');
			// 	$(this).attr( 'src', imgScc )
			// })

			showImagesOnView();
			// scroll listener
			window.addEventListener( 'scroll', showImagesOnView, false );
		}
		
		// Show the image if reached on viewport
		function showImagesOnView( e ) {
			// console.log(e);
			// console.log(images);
			for( let i of images ) {
				if( i.getAttribute('src') ) { continue; } // SKIP if already displayed
				
				// Compare the position of image and scroll
				let bounding = i.getBoundingClientRect();
				let isOnView = bounding.top >= 0 &&
				bounding.left >= 0 &&
				bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
				bounding.right <= (window.innerWidth || document.documentElement.clientWidth);
				
				// console.log(i);

				if( isOnView ) {
					i.setAttribute( 'src', i.dataset.src );
					if( i.getAttribute('data-srcset') ) {
						i.setAttribute( 'srcset', i.dataset.srcset );
					}
				}

			}
		
		}
		
	}

	if($('body').attr('data-lazy-loader') == 1){
		LazyLoader();
	}

	//======================
	// Sticky Header
	//======================
	var navHeight = window.innerHeight - 57;
	var topNavHeight = 0;
	var nav = $(".main-header.sticky-header .header");
	$(window).scroll(function () {
		if ($(this).scrollTop() > topNavHeight) {
			nav.addClass("sticky");
		} else {
			nav.removeClass("sticky");
		}
	});


	 //======================
    // Banner carousel
    //======================
    $('.slider-carousel').owlCarousel({
        autoplay: true,
        animateIn: 'fadeIn',
        animateOut: 'fadeOut',
        dots: true,
        loop: true,
        nav: false,
        items: 1,
        navText: [
            "<i class='ti-angle-left'>",
            "<i class='ti-angle-right'>"
        ]

    });

	 //======================
    // SEARCH POPUP
    //======================

    $('.search-btn').on('click', function () {
        $('.search-popup').toggle(300);

    });

	//======================
	// Fancybox
	//======================
	if ($(".port_popup").length > 0) {
		$(".port_popup").fancybox();
		/* Using custom settings */
		$(".port_popup").fancybox({
			hideOnContentClick: true,
			opacity: true,
			showNavArrows: true,
			transitionIn: "elastic",
			transitionOut: "elastic",
			speedIn: 600,
			speedOut: 200,
			overlayShow: false,
		});
	}

	//======================
	// Instagram Settings
	//======================
	function cp_instagram_photos() {
		$(".cp-instagram-photos").each(function () {
			new InstagramFeed({
				username: $(this).data("username"),
				container: this, 
				display_profile: false,
				display_biography: false,
				display_gallery: true,
				display_captions: false,
				callback: design(),
				styling: true,
				items: $(this).data("items"),
				items_per_row: $(this).data("items"),
				margin: 0,
			});
		});

		function design() {
			
			var IntervalA = setInterval(() => {
				startANimation();
			}, 500);



			function startANimation () {
				var instaContainer  = $('#instaContainer');
				var ShadowAttr       = $(instaContainer).data('shadow');
				var ShapeAttr       = $(instaContainer).data('shape');
				if(ShadowAttr){
					$('.instagram_gallery a').addClass('design-none');
					$('.instagram_gallery a').wrap('<div class="ImgShadow"> </div>');
				}
				if(ShapeAttr){
					$('.instagram_gallery a').wrap('<div class="'+ ShapeAttr +'"> </div>');
					$('.instagram_gallery a').addClass(ShapeAttr);
				}
				
				if($('.instagram_gallery a img').length > 0 ){
					clearInterval(IntervalA);
				}
			}
		}
		
	}
	// cp_instagram_photos();
	var InstaElment = $('.instagram_gallery img.insta-image');	
	var InstaElWidth = $(InstaElment).width();
	$(InstaElment).css('height', InstaElWidth)
	// console.log(InstaElWidth);

	//======================
	// Clients logo
	//======================
	// var rtlSlideLogo = $(".partners-logo").data("rtl");
	// if (rtlSlideLogo == "yes") {
	// 	rtlSlideLogo = true;
	// } else {
	// 	rtlSlideLogo = false;
	// }
	// $(".partners-logo").owlCarousel({
	// 	rtl: rtlSlideLogo,
	// 	loop: true,
	// 	margin: 10,
	// 	nav: false,
	// 	responsive: {
	// 		0: {
	// 			items: 2,
	// 		},
	// 		480: {
	// 			items: 3,
	// 		},
	// 		992: {
	// 			items: 4,
	// 		},
	// 	},
	// });

	//======================
	// Portfolio Controls
	//======================
	$(window).on("load", function () {
		//CHECK THE GRID
		if ($(".portGrid").length > 0) {
			var $container = $(".portGrid");
			$container.isotope({
				filter: "*",
				animationOptions: {
					duration: 750,
					easing: "linear",
					queue: false,
				},
			});

			$(".filters button").on("click", function () {
				$(".filters .active").removeClass("active");
				$(this).addClass("active");
				var leftPosition = $(this).position();
				var btnOverlay = $('.btn-overlay')
				// console.log(leftPosition);
				$('.btn-overlay').css('left', leftPosition.left);
				var selector = $(this).attr("data-filter");
				$container.isotope({
					filter: selector,
					animationOptions: {
						duration: 750,
						easing: "linear",
						queue: false,
					},
				});
				return false;
			});
		}
	});
	
    $(window).on("load", function () {
		//CHECK THE GRID
		if ($(".service-filter").length > 0) {
			var $container = $(".service-filter");
			$container.isotope({
				filter: "*",
				animationOptions: {
					duration: 750,
					easing: "linear",
					queue: false,
				},
			});

			$(".filters button").on("click", function () {
				$(".filters .active").removeClass("active");
				$(this).addClass("active");
				var leftPosition = $(this).position();
				var btnOverlay = $('.btn-overlay')
				// console.log(leftPosition);
				$('.btn-overlay').css('left', leftPosition.left);
				var selector = $(this).attr("data-filter");
				$container.isotope({
					filter: selector,
					animationOptions: {
						duration: 750,
						easing: "linear",
						queue: false,
					},
				});
				return false;
			});
		}
	});

	function filterMenu(selector, btn) {
		var arrow = '<i class="ti-angle-down"></i>';
		var placeholderel = '<span class="placeholder"></span>';
		var selector = $(selector);
		var activeBtn = $(".filters button.active");
		var btnItems = $(".filters button.bttn");

		function createF(el, elClass, appendEL, innerTF) {
			// create wrapper container
			var wrapper = document.createElement(el);
			// Create a "class" attribute
			var att = document.createAttribute("class");
			// Set the value of the class attribute
			att.value = elClass;
			// Add the class attribute
			wrapper.setAttributeNode(att);

			function createElement() {
				$(window).on("load resize", function () {
					if ($(window).width() < 992) {
						$(selector).css({ display: "none" });
						if ($(".themeies-wrapper").length > 0) {
						} else {
							selector.wrap(function () {
								return wrapper;
							});
							selector.before(placeholderel);
							selector.before(arrow);
							var activeText = activeBtn.text();
							var placeholderBtn = $(".placeholder");
							placeholderBtn.text(activeText);

							var placeholderBtn = $(".placeholder");
							var activecss = { "margin-top": "1px", "overflow-y": "scroll", "max-height": "200px", display: "block", "z-index": "9999", position: "absolute" };
							$(placeholderBtn).on("click", function () {
								$(selector).css(activecss);
							});
							if ($(".themeies-wrapper").length > 0) {
								$(btnItems).on("click", function () {
									$(btnItems).removeClass("active");
									$(this).addClass("active");
									$(placeholderBtn).text($(this).text());
									$(selector).css("display", "none");
								});
							}
						}
					} else {
						$("." + att.value).replaceWith(function () {
							return $(selector, this);
						});
						$(selector).css({ display: "inline-block", position: "relative", overflow: "hidden" });
						$(btnItems).on("click", function () {
							$(btnItems).removeClass("active");
							$(this).addClass("active");
							$(selector).css("display", "inline-block");
						});
					}
				});
			}
			createElement();
		}
		createF("div", "themeies-wrapper", selector);
	}
	filterMenu(".filter-menu", "button");

	//======================
	// Carousel Control
	//======================
	function feedbackfunc(selector, next, prev) {
		var snav = $(selector).data("nav");
		var scontrol = $(selector).data("control");
		var sautoplay = $(selector).data("autoplay");
		var sloop = $(selector).data("loop");
		var rtlSlide = $(selector).data("rtl");
		if (rtlSlide == "yes") {
			rtlSlide = true;
		} else {
			rtlSlide = false;
		}
		var feedCaro = $(selector);
		$(feedCaro).owlCarousel({
			rtl: rtlSlide,
			loop: sloop,
			center: true,
			margin: 0,
			nav: snav,
			dots: scontrol,
			thumbs: true,
			thumbsPrerendered: true,
			center: false,
			autoplay: sautoplay,
			autoplayHoverPause: true,
			responsive: {
				0: {
					items: 1,
				},
				992: {
					items: 1,
				},
				1000: {
					items: 1,
				},
			},
		});
		var owl = $(feedCaro);
		owl.owlCarousel();
		$(next).on("click", function () {
			owl.trigger("next.owl.carousel");
		});
		$(prev).on("click", function () {
			owl.trigger("prev.owl.carousel", [300]);
		});
	}
	function logoSlider(selector, next, prev) {
		var snav = $(selector).data("nav");
		var scontrol = $(selector).data("control");
		var sautoplay = $(selector).data("autoplay");
		var sloop = $(selector).data("loop");
		var rtlSlide = $(selector).data("rtl");
		if (rtlSlide == "yes") {
			rtlSlide = true;
		} else {
			rtlSlide = false;
		}
		var feedCaro = $(selector);
		$(feedCaro).owlCarousel({ 
			rtl: rtlSlide,
			loop: sloop,
			center: true,
			margin: 0,
			nav: snav,
			dots: scontrol,
			thumbs: true,
			thumbsPrerendered: true,
			center: false,
			autoplay: sautoplay,
			autoplayHoverPause: true,
			responsive: {
				0: {
					items: 1,
				},
				992: {
					items: 3,
				},
				1000: {
					items: 4,
				},
			},
		});
		var owl = $(feedCaro);
		owl.owlCarousel();
		$(next).on("click", function () {
			owl.trigger("next.owl.carousel");
		});
		$(prev).on("click", function () {
			owl.trigger("prev.owl.carousel", [300]);
		});
	}
	$(window).on("load resize", function () {
		feedbackfunc(".hero-slide", ".home-next", ".home-prev");
		logoSlider(".partners-logo", ".home-next", ".home-prev");
		feedbackfunc('.test-caro', '.owl-next', '.owl-prev');
	});


	$(".CardAnimation").tilt({
		reset: true,
	});

	// $('.iconBox.style4').tilt({
	// 	glare: true,
	// 	maxGlare: .5,
	// 	// scale: 1.1
	// });
	

	//======================
	// Mobile menu
	//======================
	$("#mobile-menu-toggler").on("click", function (e) {
		e.preventDefault();
		$(".navbar-nav").slideToggle();
	});
	if ($(window).width() <= 991) {
		$(".primary-menu").addClass("mobile-menu");
	} else {
		$(".primary-menu").removeClass("mobile-menu");
	}

	//======================
	// Mobile Dropdown
	//======================
	function MobileMenu() {
		var btnLAvel1 = $(".navbar-nav > li > a.dropdown-item");
		var btnLAvel2 = $(".navbar-nav li > ul > li > .dropdown-item");
		$(window).on("resize load", function () {
			var wWidth = $(window).width();
			if (wWidth < 992) {
				$(".dropdown-menu").removeAttr("style");
			}
		});
		function menuButton(btn) {
			$(btn).on("click", function (e) {
				var wWidth = $(window).width();
				if (wWidth < 992) {
					if ($(this).hasClass("live")) {
						$(this).next(".dropdown-menu").slideUp();
						$(this).removeClass("live");
					} else {
						$(btn).next(".dropdown-menu").slideUp();
						$(btn).removeClass("live");
						$(this).addClass("live");
						$(this).next(".dropdown-menu").slideDown();
					}
				} else {
					e.preventDefault();
				}
			});
		}
		menuButton(btnLAvel1);
		menuButton(btnLAvel2);

		// $(btnLAvel2).on('click', function () {
		//     var wWidth = $(window).width();
		//     if(wWidth < 992){
		//         if($(this).hasClass('live')){
		//             $(this).next('.dropdown-menu').slideUp();
		//             $(this).removeClass('live');
		//         }else{
		//             $(btnLAvel2).next('.dropdown-menu').slideUp();
		//             $(btnLAvel2).removeClass('live');
		//             $(this).addClass('live');
		//             $(this).next('.dropdown-menu').slideDown();
		//         }
		//     }else{
		//         e.preventDefault();
		//     }
		// });
	}
	MobileMenu();

	//======================
	// Banner Animation
	//======================
	$(window).on("load", function () {
		var els = $('.ael')
		for (let index = 1; index < els.length + 1; index++) {
			animateDiv(".el"+index);	
		}
	});

	function makeNewPosition() {
		// Get viewport dimensions (remove the dimension of the div)
		var h = $(window).height() - 50;
		var w = $(window).width() - 50;
		var nh = Math.floor(Math.random() * h);
		var nw = Math.floor(Math.random() * w);
		return [nh, nw];
	}

	function animateDiv(myclass) {
		var newq = makeNewPosition();
		$(myclass).animate(
			{
				top: newq[0],
				left: newq[1],
			},
			10000,
			function () {
				animateDiv(myclass);
			}
		);
	}

	var divs = document.getElementsByClassName('ael');
	// get window width and height
	var winWidth = window.innerWidth;
	var winHeight = window.innerHeight;

	// i stands for "index". you could also call this banana or haircut. it's a variable
	for ( var i=0; i < divs.length; i++ ) {
		
		// shortcut! the current div in the list
		var thisDiv = divs[i];
		
		// get random numbers for each element
		var randomTop = getRandomNumber(0, winHeight);
		var randomLeft = getRandomNumber(0, winWidth);
		// console.log(randomTop);
		// update top and left position
		thisDiv.style.opacity = 1;
		thisDiv.style.top = randomTop +"px";
		thisDiv.style.left = randomLeft +"px";
		
	}

	// function that returns a random number between a min and max
	function getRandomNumber(min, max) {		
		return Math.random() * (max - min) + min;
	}


	//======================
	// Counter
	//======================
	$(".single-fun.style1, .single-fun.style3").onScreen({
		container: window,
		direction: "vertical",
		doIn: function () {
			$(".single-fun.style1 .stat-count, .single-fun.style3 .stat-count").each(function () {
				var $this = $(this),
					countTo = $this.attr("data-count");
				$({
					countNum: $this.text(),
				}).animate(
					{
						countNum: countTo,
					},
					{
						duration: 1000,
						easing: "linear",
						step: function () {
							$this.text(Math.floor(this.countNum));
						},
						complete: function () {
							$this.text(this.countNum);
							//alert('finished');
						},
					}
				);
			});
		},
		doOut: function () {
			// Do something to the matched elements as they get off scren
		},
	});

	$(".single-fun.style2").on("mouseout", function () {
		$(this).find(".stat-count").html("");
	});
	$(".single-fun.style2").on("mouseenter", function () {
		var $this = $(this).find(".stat-count"),
			countTo = $this.attr("data-count");
		$({ countNum: $this.text() }).animate(
			{
				countNum: countTo,
			},
			{
				duration: 1000,
				easing: "linear",
				step: function () {
					$this.text(Math.floor(this.countNum));
				},
				complete: function () {
					$this.text(this.countNum);
				},
			}
		);
	});

	//======================
	// About Background animation
	//======================
	function imageMove(parent, inneritem, NumTop) {
		$(parent).mousemove(function (e) {
			var x = +(e.pageX + this.offsetLeft) / 50;
			var y = +(e.pageY + this.offsetTop) / NumTop;
			$(inneritem).css("margin-left", x + "px");
			$(inneritem).css("margin-top", y + "px");
		});
	}

	imageMove(".about-img-group", ".about-img-bg", 150);
	imageMove(".open_hours", ".open_border", 150);
	imageMove(".boxShape", ".borderShape", 150);

	//======================
	// Service Carousel
	//======================
	$(".service-caro").owlCarousel({
		loop: false,
		margin: 5,
		nav: false,
		responsive: {
			0: {
				items: 1,
			},
			600: {
				items: 3,
			},
			1000: {
				items: 4,
			},
		},
	});

	//======================
	// Instagram Carousel
	//======================
	$(".thumb-carousel").owlCarousel({
		autoplay: true,
		dots: true,
		loop: true,
		nav: false,
		items: 1,
	});

	//======================
	// TwentyTwenty Options
	//======================
	$(window).on("load", function () {
		ImagerDiffer();
	});

	function ImagerDiffer(){
		if ($(".imageDiff").length > 0) {
			var default_offset_pct = comporision.default_offset_pct;
			var orientation = comporision.orientation;
			var before_label = comporision.before_label;
			var after_label = comporision.after_label;
			var no_overlay = comporision.no_overlay;
			var clickoptin = comporision.click_to_move;

			if (clickoptin == "yes") {
				clickoptin = false;
			} else {
				clickoptin = true;
			}
			if (no_overlay == "yes") {
				no_overlay = true;
			} else {
				no_overlay = false;
			}
			$(".imageDiff").twentytwenty({
				default_offset_pct: default_offset_pct, // How much of the before image is visible when the page loads
				orientation: orientation, // Orientation of the before and after images ('horizontal' or 'vertical')
				before_label: before_label, // Set a custom before label
				after_label: after_label, // Set a custom after label
				no_overlay: no_overlay, //Do not show the overlay with before and after
				move_slider_on_hover: clickoptin, // Move slider on mouse hover?
				move_with_handle_only: true, // Allow a user to swipe anywhere on the image to control slider movement.
				click_to_move: false, // Allow a user to click (or tap) anywhere on the image to move the slider to that location.
			});
		}
	}

	//======================
	// Fullscreen BTN Function
	//======================
	if ($(".fullscreen").length > 0) {
		var btn = $(".fullscreen").find(".navbar-toggler");
		$(".fullscreen").find(".primary-menu").removeClass("navbar-collapse");
		$(btn).on("click", function () {
			$(this).next(".primary-menu").slideToggle();
		});
	}

	//======================
	// Logo Center Function
	//======================
	if ($(".logo-center-inner").length > 0 || $(".logo-center-outer").length > 0) {
		// Seletor
		var inner = ".logo-center-inner";
		var outer = ".logo-center-outer";
		var navParent = ".navbar";
		var leftMenu = '<div class="collapse navbar-collapse primary-menu order-lg-0" id="splitnav1"></div>';
		var rightMenu = '<div class="collapse navbar-collapse primary-menu order-lg-1" id="splitnav2"></div>';
		var menuWrapI = $(inner).find(".primary-menu");
		var menuWrapO = $(outer).find(".primary-menu");

		// Condition for inner and outer logo
		if ($(".logo-center-inner").length > 0) {
			CenterLogo(".logo-center-inner");
		}
		if ($(".logo-center-outer").length > 0) {
			CenterLogo(".logo-center-outer");
		}

		function CenterLogo(position) {
			if (position == ".logo-center-inner") {
				var menuLists = $(menuWrapI).find("li");
			} else {
				var menuLists = $(menuWrapO).find("li");
			}
			var menuNumber = menuLists.length / 2;
			var fItems = $(menuLists).slice(0, menuNumber);
			var lItems = $(menuLists).slice(menuNumber, menuLists.length);
			var leftUl = '<ul class="ml-auto"></ul>';
			var rightUl = '<ul class="mr-auto"></ul>';

			var btn = $(position).find(".navbar-toggler");
			$(btn).on("click", function () {
				$(this).nextAll(".primary-menu").slideToggle();
			});
			$(position).find(".navbar").append(leftMenu, rightMenu);

			// UL append in wrap
			if (".logo-center-inner" == position) {
				$(position).find("#splitnav1").append(leftUl);
				$(position).find("#splitnav2").append(rightUl);
			} else {
				$(position).find("#splitnav1").append(rightUl);
				$(position).find("#splitnav2").append(leftUl);
			}
			$(fItems).clone().appendTo($(position).find("#splitnav1 ul"));
			$(lItems).clone().appendTo($(position).find("#splitnav2 ul"));
			$(position).find(".primary-menu").first().remove();
		}
	}

	//======================
	// Mobile Menu
	//======================
	$(".mobile-menu, .navbar-toggler").on("click", function () {
		$(this).toggleClass("active");
	});

	//======================
	// Grid Massonry
	//======================
	$(".masonry-grid").masonry({
		itemSelector: ".masonry-column",
		columnWidth: 160,
		gutter: 20,
	});

	//======================
	// Scroll Top
	//======================
	var btn = $(".scroll-top-btn, .scroll-back-to-top");
	$(window).on("scroll", function () {
		if ($(window).scrollTop() > 300) {
			btn.addClass("show");
		} else {
			btn.removeClass("show");
		}
	});
	btn.on("click", function (e) {
		e.preventDefault();
		$("html, body").animate({ scrollTop: 0 }, "300");
	});


	var btn = $(".scroll-arrow-btn");
	btn.on("click", function (e) {
		e.preventDefault();
		$("html, body").animate({ scrollTop: 300 }, "300");
	});

	//======================
	// Clock
	//======================
	var clock = $("#clock");
	if ($(clock).length > 0) {
		var date = $(clock).data("date");
		$(clock)
			.countdown(date)
			.on("update.countdown", function (event) {
				$(this).html(
					event.strftime(
						"" +
							"<p><span>week%!w</span> <span>%-w</span> </p>" +
							"<p><span>day%!d</span> <span>%-d</span> </p>" +
							"<p><span>hr</span> <span>%H</span> </p>" +
							"<p><span>min</span> <span>%M</span> </p>" +
							"<p><span>sec</span> <span>%S</span> </p>"
					)
				);
			});
	}

	//======================
	// BMI Calculator
	//======================
	if ($(".bmi").length > 0) {
		var age = document.getElementById("age");
		var height = document.getElementById("height");
		var weight = document.getElementById("weight");
		var male = document.getElementById("m");
		var female = document.getElementById("f");
		var form = document.getElementById("form");

		function validateForm() {
			if (age.value == "" || height.value == "" || weight.value == "" || (male.checked == false && female.checked == false)) {
				alert("All fields are required!");
				document.getElementById("submit").removeEventListener("click", countBmi);
			} else {
				countBmi();
			}
		}
		document.getElementById("submit").addEventListener("click", validateForm);

		function countBmi() {
			var p = [age.value, height.value, weight.value];
			if (male.checked) {
				p.push("male");
			} else if (female.checked) {
				p.push("female");
			}
			form.reset();
			var bmi = Number(p[2]) / (((Number(p[1]) / 100) * Number(p[1])) / 100);

			var result = "";
			if (bmi < 18.5) {
				result = "Underweight";
			} else if (18.5 <= bmi && bmi <= 24.9) {
				result = "Healthy";
			} else if (25 <= bmi && bmi <= 29.9) {
				result = "Overweight";
			} else if (30 <= bmi && bmi <= 34.9) {
				result = "Obese";
			} else if (35 <= bmi) {
				result = "Extremely obese";
			}

			var h1 = document.createElement("h1");
			var h2 = document.createElement("h2");

			var t = document.createTextNode(result);
			var b = document.createTextNode("BMI: ");
			var r = document.createTextNode(parseFloat(bmi).toFixed(2));

			h1.appendChild(t);
			h2.appendChild(b);
			h2.appendChild(r);

			$("#message").append(h1);
			$("#message").append(h2);

			document.getElementById("submit").removeEventListener("click", countBmi);
			document.getElementById("submit").removeEventListener("click", validateForm);
		}
		document.getElementById("submit").addEventListener("click", countBmi);
	}

	//======================
	// Iterate over each select element
	//======================
	$("select").each(function () {
		// Cache the number of options
		var $this = $(this),
			numberOfOptions = $(this).children("option").length;

		// Hides the select element
		$this.addClass("s-hidden");

		// Wrap the select element in a div
		$this.wrap('<div class="select"></div>');

		// Insert a styled div to sit over the top of the hidden select element
		$this.after('<div class="customdSelect"></div>');

		// Cache the customd div
		var $customdSelect = $this.next("div.customdSelect");

		// Show the first select option in the customd div
		$customdSelect.text($this.children("option").eq(0).text());

		// Insert an unordered list after the customd div and also cache the list
		var $list = $("<ul />", {
			class: "options",
		}).insertAfter($customdSelect);

		// Insert a list item into the unordered list for each select option
		for (var i = 0; i < numberOfOptions; i++) {
			$("<li />", {
				text: $this.children("option").eq(i).text(),
				rel: $this.children("option").eq(i).val(),
			}).appendTo($list);
		}

		// Cache the list items
		var $listItems = $list.children("li");

		// Show the unordered list when the customd div is clicked (also hides it if the div is clicked again)
		$customdSelect.click(function (e) {
			e.stopPropagation();
			$("div.customdSelect.active").each(function () {
				$(this).removeClass("active").next("ul.options").hide();
			});
			$(this).toggleClass("active").next("ul.options").toggle();
		});

		// Hides the unordered list when a list item is clicked and updates the customd div to show the selected list item
		// Updates the select element to have the value of the equivalent option
		$listItems.click(function (e) {
			e.stopPropagation();
			$customdSelect.text($(this).text()).removeClass("active");
			$this.val($(this).attr("rel"));
			$list.hide();
			/* alert($this.val()); Uncomment this for demonstration! */
		});

		// Hides the unordered list when clicking outside of it
		$(document).click(function () {
			$customdSelect.removeClass("active");
			$list.hide();
		});
	});

	//======================
	// Slide Animation
	//======================

	function slideAnition() {
		var slideh1 = $(".banner.v2 .hero-slide .owl-item .item h2");
		var slideha = $(".banner.v2 .hero-slide .owl-item.active .item h2");
		// console.log(slideh1.length);
		var tt = new TimelineMax();
		tt.to(slideha, 0.3, {
			opacity: 1,
			y: -50,
		});
	}

	///======================
	// Custom Cursor
	//======================

	function CursorFunction(e) {
		var cCursor = $(".circle-cursor"); // CIRCLE CURSOR SELECTOR
		var menuItems = $("a, button");

		$(menuItems).on("mouseenter", function () {
			$(cCursor).addClass("cursorActive");
			if ($(this).hasClass("project")) {
				$(cCursor).html("+");
			} else {
				$(cCursor).html("&bull;");
			}
		});
		$(menuItems).on("mouseout", function () {
			$(cCursor).removeClass("cursorActive");
			$(cCursor).html("&bull;");
		});

		var x = e.clientX;
		var y = e.clientY;
		var newposX = x - -10;
		var newposY = y - 0;
		$(cCursor).css({ top: +newposY + "px", left: +newposX + "px", opacity: "1" });
	}

	$(document).on("mousemove scroll", "body", function (e) {
		CursorFunction(e);
	});

	/**
	 * Flyout menu functionality
	 * */
	$(".flyout-canvas-toggler").on("click", function (e) {
		e.preventDefault();
		$(this).toggleClass("active");
		$(".sideInfo").toggleClass("active");
	});
	$(".flyout-search-btn").on("click", function (e) {
		e.preventDefault();
		$(this).toggleClass("active");
		$("#search-popup").slideToggle();
	});

	$(".close").on("click", function () {
		$(".sideInfo").removeClass("active");
	});
	$(document).on("click", function (e) {
		if ($(e.target).closest(".sideInfo").length === 0 && $(e.target).closest(".flyout-canvas-toggler").length === 0) {
			$(".sideInfo").removeClass("active");
		}
	});

	/* Button Style */
	(function ($) {
		let btnStyle = $("body").attr("btn-style");
		let btnLayout = $("body").attr("btn-layout");
		$(".btn").addClass(btnStyle);
		$(".btn, .appointment-form .form-field input, .appointment-form .form-field textarea, .select, .options, .btn-box, .footer-style-2 .foo-newsletter .form input, .footer-style-2 .foo-newsletter, .header .navbar-toggler, .portfolioITems.style-4 .port-item .portTag").addClass(btnLayout);
	})(jQuery);

	var animationParent = $('.background_animation').parents('section.elementor-section')
	$(animationParent).each(function() {		
		$(this).find('.background_animation').prependTo(this);		
	});


	/***
	 * Price Funcation */

	var yearBtn 		= $('.yearbtn');
	var monthBtn 		= $('.monthbtn');
	var priceDetails 	= $('.GetAllPrice');
	var totalPice 		= $('.totalPice');
	var price 			= $('.price')
	var saveValue 		= $('.saveValue')
	
	$(yearBtn).on('click', function () {
		$('.save_month, .totalPice').addClass('d-none')
		$('.save_year, .totalPice').removeClass('d-none')
		$(this).parent().addClass('active');
		$(priceDetails).each(function(){
			var GetMonthPrice 	= $(this).data('price-month');
			var GetYearPrice 	= $(this).data('price-year');
			var TotalYearPrice 	= GetYearPrice * 12;
			var SaveEachMonth 	= GetMonthPrice - GetYearPrice;
			$(this).find(price).html(GetYearPrice)
			// $(this).find(totalPice).html(TotalYearPrice)
			$(this).find(saveValue).html(SaveEachMonth)
		})
		AnimatednUmber();
		
	})
	$(monthBtn).on('click', function () {
		$('.save_year, .totalPice').addClass('d-none')
		$('.save_month, .totalPice').removeClass('d-none')
		$(this).parent().removeClass('active');
		$(priceDetails).each(function(){
			var GetMonthPrice 	= $(this).data('price-month');
			$(this).find(price).html(GetMonthPrice)
		})
		AnimatednUmber();
	})


	function AnimatednUmber() {
		$('.price').each(function () {
			$(this).prop('Counter',0).animate({
				Counter: $(this).text()
			}, {
				duration: 1000,
				easing: 'swing',
				step: function (now) {
					$(this).text(Math.ceil(now));
				}
			});
		});
		
	}


	


})(jQuery);