<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<section class="services" id="services">
<div class="container">
<div class="row">
<div class="col-12">
<div class="services-circle">
<div class="services-subcircle" data-circle-index="0"><i class="fas fa-user-tie"></i>
</div>
<div class="services-subcircle active" data-circle-index="1"><i class="far fa-id-card"></i>
</div>
<div class="services-subcircle" data-circle-index="2"><i class="fas fa-charging-station"></i>
</div>
<div class="services-subcircle" data-circle-index="3"><i class="far fa-building"></i>
</div>
<div class="services-subcircle" data-circle-index="4"><i class="fas fa-brain"></i>
</div>
<div class="services-subcircle" data-circle-index="5"><i class="fas fa-box-open"></i>
</div>
<div class="services-subcircle" data-circle-index="6"><i class="fas fa-award"></i>
</div>
<div class="services-subcircle" data-circle-index="7"><i class="fas fa-archive"></i>
</div>
<div class="services-content-wrapper">
<div class="services-content-item"><span class="title"><a class="underlined-link" href="./service-detail.html">PERSONNEL IMPROVEMENT</a></span>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
<div class="services-content-item active"><span class="title"><a class="underlined-link" href="./service-detail.html">BRANDING</a></span>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
<div class="services-content-item"><span class="title"><a class="underlined-link" href="./service-detail.html">HIGH TECHNOLOGY</a></span>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
<div class="services-content-item"><span class="title"><a class="underlined-link" href="./service-detail.html">CORPORATE WORK</a></span>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
<div class="services-content-item"><span class="title"><a class="underlined-link" href="./service-detail.html">PROFESSIONAL SKILLS</a></span>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
<div class="services-content-item"><span class="title"><a class="underlined-link" href="./service-detail.html">QUICK SUPPORT</a></span>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
<div class="services-content-item"><span class="title"><a class="underlined-link" href="./service-detail.html">CUSTOMER HAPPINESS</a></span>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
<div class="services-content-item"><span class="title"><a class="underlined-link" href="./service-detail.html">HIGH PRODUCTIVITY</a></span>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
.services {
background: #fff;
background-image: url("../img/services_bg.png");
background-repeat: no-repeat;
background-position: bottom;
margin-top: 30px;
padding-top: 35px;
}
.services-circle {
display: block;
border-radius: 50%;
position: relative;
width: 80%;
height: 0;
padding-bottom: 80%;
margin: 70px auto;
border: 1px solid #e1e1e1;
box-sizing: content-box;
}
.services-circle::before,
.services-circle::after {
display: none;
content: '';
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
right: 0;
top: 0;
bottom: 0;
margin: auto;
border: 1px solid #e1e1e1;
border-radius: 50%;
}
.services-circle::before {
width: 450px;
height: 450px;
opacity: .6;
}
.services-circle::after {
width: 550px;
height: 550px;
opacity: .4;
}
.services-subcircle {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
z-index: 1;
margin: auto;
color: #fff;
box-shadow: 0px 11px 18px 0 rgba(0, 0, 0, 0.05);
background-color: #fff;
border-radius: 50%;
transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
cursor: pointer;
width: 60px;
height: 60px;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
}
.services-subcircle i {
font-size: 1.8em;
color: #a5a5a5;
}
.services-subcircle:hover,
.services-subcircle.active {
box-shadow: 0px 11px 13px 0 rgba(31, 136, 104, 0.4);
background-color: #1f8868;
}
.services-subcircle:hover i,
.services-subcircle.active i {
color: #fff;
}
.services-content-wrapper {
width: 100%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
position: absolute;
padding: 0 65px;
}
.services-content-item {
display: none;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
z-index: 2;
}
.services-content-item.active {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-animation: focus-in-contract 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
animation: focus-in-contract 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
-webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
.services-content-item span.title {
font-weight: 900;
letter-spacing: 3.2px;
color: #1f8868;
line-height: normal;
margin-bottom: 0;
font-size: 14px;
text-align: center;
}
.services-content-item span.title a {
color: #1f8868;
font-size: inherit;
}
.services-content-item p.description {
display: none;
margin: 0;
color: #757575;
letter-spacing: .3px;
line-height: 1.88;
text-align: center;
font-size: 12px;
}
.services-boxes {
display: block;
width: 100%;
padding-top: 30px;
}
.services-boxes-heading {
display: block;
text-align: center;
max-width: 100%;
}
.services-boxes-heading-wrapper {
padding-bottom: 145px;
}
.services-boxes-heading span.title {
display: block;
font-weight: 700;
color: #838383;
letter-spacing: .44px;
font-size: 18px;
}
.services-boxes-heading span.title.big {
display: block;
letter-spacing: .72px;
font-size: 28px;
word-break: break-word;
}
.services-boxes-heading span.title--primary {
color: #1f8868;
}
.services-boxes-heading span.title--italic {
font-style: italic;
}
.services-boxes-heading span.subtitle {
display: block;
font-size: 14px;
color: #b3b3b3;
letter-spacing: 2.8px;
margin-top: 20px;
}
@supports ((display: -ms-grid) or (display: grid)) {
.services-boxes-content {
display: -ms-grid;
display: grid;
-ms-grid-rows: auto;
grid-template-rows: auto;
margin-top: -115px;
grid-gap: 15px;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
@media (min-width: 576px) {
.services-boxes-content {
grid-gap: 30px;
-ms-grid-columns: (1fr)[2];
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 768px) {
.services-boxes-content {
margin-top: -150px;
-ms-grid-columns: (1fr)[3];
grid-template-columns: repeat(3, 1fr);
}
}
}
@supports not ((display: -ms-grid) or (display: grid)) {
.services-boxes-content {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: -115px;
}
@media screen and (min-width: 768px) {
.services-boxes-content {
margin-top: -150px;
}
}
}
.services-boxes-content-wrapper {
display: block;
width: 100%;
background: #ffffff;
}
.services-boxes-item {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
background: #ffffff;
padding: 20px;
box-shadow: 0px 7px 43px 0 rgba(0, 0, 0, 0.07);
cursor: pointer;
transition: .2s ease-in-out;
}
@supports ((display: -ms-grid) or (display: grid)) {
.services-boxes-item {
width: unset;
}
}
@supports not ((display: -ms-grid) or (display: grid)) {
.services-boxes-item {
width: calc(50% - 30px);
}
.services-boxes-item:not(:nth-last-child(-n+2)) {
margin-bottom: 30px;
}
.services-boxes-item + .services-boxes-item {
margin-left: 30px;
}
.services-boxes-item:nth-child(2n + 1) {
margin-left: 0;
}
@media screen and (min-width: 768px) {
.services-boxes-item {
width: calc(33.3% - 30px);
}
.services-boxes-item:not(:nth-last-child(-n+2)) {
margin-bottom: unset;
}
.services-boxes-item:not(:nth-child(-n+3)) {
margin-top: 30px;
}
.services-boxes-item + .services-boxes-item {
margin-left: 30px;
}
.services-boxes-item:nth-child(3n + 1) {
margin-left: 0;
}
}
}
.services-boxes-item:not(.no-hover) > * {
transition: .2s ease-in-out;
}
.services-boxes-item:not(.no-hover):hover {
background: #1f8868;
box-shadow: 0px 12px 16px 0 rgba(31, 136, 104, 0.55);
}
.services-boxes-item:not(.no-hover):hover .services-boxes-item-icon,
.services-boxes-item:not(.no-hover):hover span.title,
.services-boxes-item:not(.no-hover):hover p.description {
color: #fff;
}
.services-boxes-item-icon {
font-size: 2em;
color: #1f8868;
margin-bottom: 20px;
}
.services-boxes-item span.title {
font-size: 14px;
font-weight: 700;
color: #050505;
letter-spacing: 2.8px;
margin-bottom: 20px;
}
.services-boxes-item p.description {
display: block;
text-align: center;
margin: 0;
font-size: 13px;
color: #757575;
letter-spacing: .3px;
line-height: 1.71;
}
@media (min-width: 576px) {
.services-circle {
padding-bottom: unset;
display: block;
margin: 150px auto;
width: 350px;
height: 350px;
}
.services-circle::before,
.services-circle::after {
display: block;
}
.services-content-item span.title {
margin-bottom: 20px;
line-height: 1;
}
.services-content-item p.description {
display: block;
}
}
.services {
margin-top: 60px;
padding-top: 65px;
}
.services-circle {
margin: 180px auto;
width: 510px;
height: 510px;
}
.services-circle::before {
width: 640px;
height: 640px;
}
.services-circle::after {
width: 750px;
height: 750px;
}
.services-subcircle:nth-child(2n+1) {
width: 72px;
height: 72px;
}
.services-content-item span.title {
font-size: 16px;
margin-bottom: 40px;
}
.services-content-item p.description {
font-size: 16px;
}
jQuery(function($) {
"use strict";
var _extends =
Object.assign ||
function(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
// parallax effect
var parallaxEffect = function parallaxEffect(container, els) {
var moveX, moveY;
if (container && els) {
container.addEventListener("mousemove", function(e) {
moveX = (e.clientX * -1) / 20;
moveY = (e.clientY * -1) / 20;
els.forEach(function(el, index) {
if (index % 2 != 0) {
moveX = -1 * moveX;
moveY = -1 * moveY;
}
el.style.transform = "translate3d(" + moveX + "px," + moveY + "px,0)";
});
});
}
};
// isScrolledIntoView
var isScrolledIntoView = function isScrolledIntoView(el) {
var rect = el.getBoundingClientRect(),
elemTop = rect.top,
elemBottom = rect.bottom,
isVisible;
// Only completely visible elements return true:
isVisible = elemTop >= -50 && elemBottom <= window.innerHeight / 2;
return isVisible;
};
// active class toggle methods
var removeClasses = function removeClasses(nodes, value) {
if (nodes)
return nodes.forEach(function(node) {
return node.classList.contains(value) && node.classList.remove(value);
});
else return false;
};
var addClass = function addClass(nodes, index, value) {
return nodes ? nodes[index].classList.add(value) : 0;
};
var App = {
initHeroSlider: function initHeroSlider() {
// hero slider
var heroSliderOptions = {
dots: false,
arrows: false,
swipe: window.innerWidth <= 576,
responsive: [
{
breakpoint: 576
}
]
};
$(".hero-right-carousel").on("breakpoint", function(
e,
slick,
breakpoint
) {
if (window.innerWidth <= 576)
slick.slickSetOption("swipe", true, false);
else slick.slickSetOption("swipe", false, false);
});
$(".hero-right-carousel").on("swipe", function(slick, dir) {
setTimeout(function() {
$(".hero-left-carousel").slick("slickGoTo", dir.currentSlide);
}, 500);
});
var heroSliderPrev = $(".hero-carousel-navigation-btn.next");
var heroSliderNext = $(".hero-carousel-navigation-btn.prev");
if (heroSliderPrev) {
heroSliderPrev.on("click", function() {
$(".hero-left-carousel").slick("slickNext");
setTimeout(function() {
$(".hero-right-carousel").slick("slickNext");
}, 500);
});
}
if (heroSliderNext) {
heroSliderNext.on("click", function() {
$(".hero-left-carousel").slick("slickPrev");
setTimeout(function() {
$(".hero-right-carousel").slick("slickPrev");
}, 500);
});
}
$(".hero-left-carousel").slick(_extends({}, heroSliderOptions));
$(".hero-right-carousel").slick(_extends({}, heroSliderOptions));
},
initServicesCircle: function initServicesCircle() {
// services circle
var circles = document.querySelectorAll(".services-subcircle");
var circleContents = document.querySelectorAll(".services-content-item");
var parent = document.querySelector(".services-circle");
if (parent) {
var spreadCircles = function spreadCircles() {
// spread the subcircles around the circle
parent = document
.querySelector(".services-circle")
.getBoundingClientRect();
var centerX = 0;
var centerY = 0;
Array.from(circles)
.reverse()
.forEach(function(circle, index) {
var angle = index * (360 / circles.length);
var x =
centerX +
(parent.width / 2) * Math.cos((angle * Math.PI) / 180);
var y =
centerY +
(parent.height / 2) * Math.sin((angle * Math.PI) / 180);
circle.style.transform =
"translate3d(" +
parseFloat(x).toFixed(5) +
"px," +
parseFloat(y).toFixed(5) +
"px,0)";
});
};
spreadCircles();
var resizeTimer = void 0;
window.addEventListener("resize", function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
spreadCircles();
}, 50);
});
circles.forEach(function(circle, index) {
var circlesToggleFnc = function circlesToggleFnc() {
var index = circle.dataset.circleIndex;
if (!circle.classList.contains("active")) {
removeClasses(circles, "active");
removeClasses(circleContents, "active");
addClass(circles, index, "active");
addClass(circleContents, index, "active");
}
};
circle.addEventListener("click", circlesToggleFnc, true);
circle.addEventListener("mouseover", circlesToggleFnc, true);
});
}
},
initBlogCarousel: function initBlogCarousel() {
// blog carousel
$(".blog-carousel-wrapper").slick({
centerMode: true,
slidesToShow: 3,
slideToScroll: 1,
variableWidth: true,
arrows: false,
dots: true
});
},
initResponsiveMenu: function initResponsiveMenu() {
// responsive menu
var responsiveMenu = document.querySelector(".responsive-menu");
if (responsiveMenu) {
document.querySelectorAll(".nav-trigger").forEach(function(el) {
return el.addEventListener("click", function() {
if (responsiveMenu.classList.contains("active")) {
responsiveMenu.classList.remove("active");
document.body.classList.remove("no-scroll");
} else {
responsiveMenu.classList.add("active");
document.body.classList.add("no-scroll");
}
});
});
var subLinkToggles = document.querySelectorAll(".sublinks-toggle");
subLinkToggles.forEach(function(el) {
el.addEventListener("click", function() {
var subLinks = el.nextElementSibling;
if (subLinks.classList.contains("submenu-show")) {
subLinks.classList.remove("submenu-show");
el.classList.remove("menu-opened");
} else {
removeClasses(subLinkToggles, "menu-opened");
subLinkToggles.forEach(function(c) {
if (c.nextElementSibling.classList.contains("submenu-show")) {
c.nextElementSibling.classList.remove("submenu-show");
}
});
subLinks.classList.add("submenu-show");
el.classList.add("menu-opened");
}
});
});
}
},
initHomeHeroParallax: function initHomeHeroParallax() {
// homepage hero parallax
var homeHero = document.getElementsByClassName("hero-wrapper")[0];
var homeHerorectangles = document.querySelectorAll(".hero-rectangle");
parallaxEffect(homeHero, homeHerorectangles);
},
initMainHeroParallax: function initMainHeroParallax() {
// main hero parallax
var mainHero = document.getElementsByClassName("main-hero")[0];
var mainHerorectangles = document.querySelectorAll(
".main-hero-rectangle"
);
parallaxEffect(mainHero, mainHerorectangles);
},
initSectionRectangles: function initSectionRectangles() {
// section title rectangles fill effect
var titleRectangles = document.querySelectorAll(".title-rectangle");
if (titleRectangles) {
window.addEventListener("scroll", function(e) {
removeClasses(titleRectangles, "fill");
titleRectangles.forEach(function(rect) {
if (isScrolledIntoView(rect)) rect.classList.add("fill");
});
});
}
},
initContactFormToggle: function initContactFormToggle() {
// contact form toggle
var contactFormBtn = document.getElementsByClassName(
"contact-form-box-pulse"
)[0];
var contactFormWrapper = document.querySelector(".contact-form-box");
if (contactFormBtn && contactFormWrapper) {
contactFormBtn.addEventListener("click", function() {
if (contactFormWrapper.classList.contains("form-active")) {
contactFormWrapper.classList.remove("form-active");
} else {
contactFormWrapper.classList.add("form-active");
window.scroll({
top:
window.pageYOffset +
contactFormWrapper.getBoundingClientRect().top -
30,
behavior: "smooth"
});
}
});
}
},
initBrandVideoToggle: function initBrandVideoToggle() {
// brand video toggle
var brandVideoBtn = document.querySelector(".brand-video-btn");
var brandVideoSection = document.querySelector(".brand-video");
var brandVideoContainer = document.querySelector(".video-container");
var brandVideoOverlay = document.querySelector(".overlay");
var brandVideoClose = document.querySelector(".video-container-close");
if (brandVideoBtn && brandVideoSection && brandVideoContainer) {
brandVideoBtn.addEventListener("click", function() {
var showBrandVideo = function showBrandVideo() {
var video =
brandVideoContainer.querySelector("iframe") ||
brandVideoContainer.querySelector("video source");
video.src = video.dataset.src;
if (video.tagName == "SOURCE")
brandVideoContainer.querySelector("video").load();
document.body.classList.add("no-scroll-video");
brandVideoSection.classList.add("video-opened");
brandVideoOverlay.classList.add("overlay--active");
};
if (!brandVideoSection.classList.contains("video-opened")) {
showBrandVideo();
}
});
brandVideoClose.addEventListener("click", function() {
var hideBrandVideo = function hideBrandVideo() {
var video =
brandVideoContainer.querySelector("iframe") ||
brandVideoContainer.querySelector("video source");
video.src = "";
if (video.tagName == "SOURCE")
brandVideoContainer.querySelector("video").pause();
document.body.classList.remove("no-scroll-video");
brandVideoSection.classList.remove("video-opened");
brandVideoOverlay.classList.remove("overlay--active");
};
if (brandVideoSection.classList.contains("video-opened")) {
hideBrandVideo();
}
});
}
},
initAsideCarousel: function initAsideCarousel() {
// Aside carousel
var asideCarousel = $(".page-aside-carousel");
if (asideCarousel) {
var asideCarouselNavNext = $(".page-aside-carousel-nav.next");
var asideCarouselNavPrev = $(".page-aside-carousel-nav.prev");
$(asideCarousel).slick({
slide: ".page-aside-carousel-item",
slidesToShow: 1,
slideToScroll: 1,
dots: false,
arrows: false,
autoplay: true,
autoplaySpeed: 3000,
zIndex: 1
});
asideCarouselNavNext.on("click", function() {
return asideCarousel.slick("slickNext");
});
asideCarouselNavPrev.on("click", function() {
return asideCarousel.slick("slickPrev");
});
}
},
initTabsNav: function initTabsNav() {
// tabs nav responsive
var tabsToggle = document.querySelectorAll(".mobile-tab-toggle-btn");
var tabsNav = document.querySelector(".nav-tabs-wrapper");
var tabsContent = document.querySelector(".nav.nav-tabs");
if (tabsNav && tabsContent) {
tabsToggle.forEach(function(tabsToggleBtn) {
return tabsToggleBtn.addEventListener("click", function() {
if (tabsContent.classList.contains("show-me"))
tabsContent.classList.remove("show-me");
else tabsContent.classList.add("show-me");
});
});
var links = tabsContent.querySelectorAll(".nav-item.nav-link");
links.forEach(function(link, i) {
link.addEventListener("click", function() {
window.scroll({
top:
window.pageYOffset +
document
.querySelector(".tab-pane.active.show .grid-gallery-wrapper")
.getBoundingClientRect().top -
30,
behavior: "smooth"
});
tabsContent.classList.remove("show-me");
if (i == 0) tabsContent.scrollTop = 0;
else if (i == links.length - 1)
tabsContent.scrollTop =
tabsContent.scrollHeight - tabsContent.clientHeight;
else tabsContent.scrollTop = link.offsetTop - 75;
});
});
}
},
initReferencesCarousel: function initReferencesCarousel() {
//references carousel
var referencesWrapper = $(".references-wrapper");
referencesWrapper.slick({
dots: false,
arrows: false,
autoplay: true,
autoplaySpeed: 3000,
slidesToShow: 1,
slidesToScroll: 1,
mobileFirst: true,
responsive: [
{
breakpoint: 767,
settings: "unslick"
},
{
breakpoint: 576,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
}
]
});
window.addEventListener("resize", function() {
if (window.innerWidth < 768) referencesWrapper.slick("resize");
});
},
truncateBlogListItems: function truncateBlogListItems() {
$(".blog-list-item-description").each(function() {
var textArray = $(this)
.text()
.split(" ");
while ($(this).prop("scrollHeight") > $(this).prop("offsetHeight")) {
textArray.pop();
$(this).text(textArray.join(" ") + "...");
}
});
$(window).on("resize", function() {
truncateBlogListItems();
});
},
contactForm: function() { $('form#contact-us').submit(function() {
$('form#contact-us .error').remove();
var hasError = false;
$('.requiredField').each(function() {
if($.trim($(this).val()) == '') {
var labelText = $(this).prev('label').text();
$(this).parent().append('<span class="error">'+labelText+' This field is required</span>');
$(this).addClass('inputError');
hasError = true;
} else if($(this).hasClass('email')) {
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(!emailReg.test($.trim($(this).val()))) {
$(this).parent().append('<span class="error"> Please enter a valid email address</span>');
$(this).addClass('inputError');
hasError = true;
}
}
});
if(!hasError) {
var formInput = $(this).serialize();
$.post('contacts.php',formInput, function(data){
$('form#contact-us').slideUp("fast", function() {
$(this).before('<p class="tick"><strong>Thank You! </strong> Your mail has arrived. The return will be made as soon as possible..</p>');
});
});
}
return false;
});
}
};
App.initHeroSlider();
App.initServicesCircle();
App.initBlogCarousel();
App.initResponsiveMenu();
App.initHomeHeroParallax();
App.initMainHeroParallax();
App.initSectionRectangles();
App.initContactFormToggle();
App.initBrandVideoToggle();
App.initAsideCarousel();
App.initTabsNav();
App.initReferencesCarousel();
App.truncateBlogListItems();
App.contactForm();
});
