Merge pull request #25 from hawkeye116477/master

Update to Bootstrap 4 and other improvements

assets/css/style.css

 Author: Themefisher
 Author URI: www.Themefisher.com
 Description: Meghna Responsive HTML5/CSS3 Portfolio Template
-Version: 1.0
+Version: 1.1
 Tags: one-page, single-page, portfolio, custom-colors, post-formats, responsive, html5, css3
 */
 /*=== MEDIA QUERY ===*/
   font-family: "Quattrocento Sans", sans-serif;
 }
 
+[scroll-behavior=smooth] {
+  scroll-behavior: smooth;
+}
+
 /*=================================================================
   Basic Setup
 ==================================================================*/
   background: #57cbcc;
 }
 
-ol,
-ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
 figure {
   margin: 0;
 }
   color: #fff;
 }
 
-.form-control {
-  background-color: #2f383d;
-  border-radius: 0;
-  padding: 5px 10px;
-  border: 0 none;
-  color: #ddd;
-}
-
-.form-control:focus {
-  box-shadow: 0 0 0;
-}
-
-.form-control::-webkit-input-placeholder {
-  /*  Chrome, Safari, Opera  */
-  color: #ddd;
-}
-
-.form-control:-moz-placeholder {
-  /* Firefox 18- */
-  color: #ddd;
-}
-
-.form-control::-moz-placeholder {
-  /* Firefox 19+ */
-  color: #ddd;
-}
-
-.form-control:-ms-input-placeholder {
-  /*  Internet Explorer  */
-  color: #ddd;
-}
-
 #loading-mask {
   background: #333439;
   height: 100%;
   width: 100%;
 }
 
-.border {
+.border-meghna {
   border-top: 2px solid rgba(236, 239, 241, 0.07);
   height: 1px;
   margin: 15px auto 0;
   width: 30%;
 }
 
-.border:before {
+.border-meghna:before {
   background-color: #fff;
   content: '';
   height: 6px;
   display: inline-block;
 }
 
-ol,
-ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
 
 figure {
   margin: 0;
 
 @media (max-width: 768px) {
   .section {
-    padding: 50px 0;
+    padding: 80px 0;
   }
 }
 
 .navigation {
   background-color: #1d2024;
   width: 100%;
-  z-index: 99;
   margin-bottom: 0;
-  padding: 10px;
-  position: sticky;
-  top: 0;
 }
 
 .navigation .logo {
   padding: 0;
 }
 
-.navigation .navigation-menu li.active a {
+.navigation .navigation-menu li a.active {
   color: #57cbcc;
 }
 
   color: #57cbcc;
 }
 
-.navbar-toggle {
+.navigation .navbar-toggler {
-  border: 1px solid #fff;
+  color: rgba(255,255,255,.5);
+  border-color: rgba(255,255,255,.1);
   border-radius: 0;
 }
 
-.navbar-toggle span {
+.navigation .navbar-collapse {
-  background: #fff;
+  padding: 10px;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
+  border-top: 5px solid transparent;
+}
+
+@media (min-width: 768px) {
+  .navigation .navbar-collapse {
+    box-shadow: none;
+    border-top: none;
+  }
+}
+
+.navbar-toggler:focus {
+  outline-color:  #57cbcc;
 }
 
 .bg-1 {
   padding-top: 50px;
 }
 
+@media (max-width: 768px)
+{
+  .contact-us {
+    padding-top: 80px;
+  }
+}
+
 .contact-form {
   margin-bottom: 60px;
 }
 
-.contact-form .form-control {
+.form-meghna .form-control {
   background-color: transparent;
+  border-radius: 0;
+  padding: 5px 10px;
+  color: #ddd;
   border: 1px solid rgba(236, 239, 241, 0.07);
-  height: 45px;
 }
 
-.contact-form textarea.form-control {
+.form-meghna .form-control:focus
-  padding: 10px;
+{
-  height: 120px;
+  border-color: none;
+  box-shadow: none;
 }
 
-.contact-form input:hover,
+.form-meghna input:hover,
-.contact-form textarea:hover,
+.form-meghna textarea:hover,
 #contact-submit:hover {
   border-color: #57cbcc;
 }
 
+.form-meghna ::placeholder
+{
+  color: #ddd !important;
+}
+
 #contact-submit {
   border: 1px solid rgba(236, 239, 241, 0.07);
   background: #57cbcc;
 
 .con-info i,
 .con-info span {
-  float: left;
+  padding-right: 5px;
-}
-
-.con-info span {
-  margin: -5px 0 0 15px;
 }
 
 .error {
   font-size: 30px;
 }
 
+.pricing ul, .skill-bar {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
 .pricing li {
   padding: 10px 0;
 }
   margin: 0;
 }
 
-/*# sourceMappingURL=maps/style.css.map */
+.form-control-meghna .form-control {
+  background-color: transparent;
+  padding: 5px 10px;
+  color: #ddd;
+  border: 1px solid rgba(236, 239, 241, 0.07);
+}
+
+.form-control-meghna .form-control:focus
+{
+  border-color: #57cbcc;
+  box-shadow: 0 0 0 0.2rem rgba(0, 174, 255, 0.432);
+}
+
+/*! Social sharing buttons from Sharingbuttons.io */
+.resp-sharing-button__link,
+.resp-sharing-button__icon {
+  display: inline-block
+}
+
+.resp-sharing-button__link {
+  text-decoration: none;
+  color: #fff;
+  margin: 0.5em
+}
+
+.resp-sharing-button {
+  border-radius: 5px;
+  transition: 25ms ease-out;
+  padding: 0.5em 0.75em;
+  font-family: Helvetica Neue,Helvetica,Arial, sans-serif;
+}
+
+.resp-sharing-button__icon svg {
+  width: 1em;
+  height: 1em;
+  margin-right: 0.4em;
+  vertical-align: top
+}
+
+.resp-sharing-button--small svg {
+  margin: 0;
+  vertical-align: middle
+}
+
+/* Non solid icons get a stroke */
+.resp-sharing-button__icon {
+  stroke: #fff;
+  fill: none
+}
+
+/* Solid icons get a fill */
+.resp-sharing-button__icon--solid,
+.resp-sharing-button__icon--solidcircle {
+  fill: #fff;
+  stroke: none
+}
+
+.resp-sharing-button--twitter {
+  background-color: #55acee
+}
+
+.resp-sharing-button--twitter:hover {
+  background-color: #2795e9
+}
+
+.resp-sharing-button--pinterest {
+  background-color: #bd081c
+}
+
+.resp-sharing-button--pinterest:hover {
+  background-color: #8c0615
+}
+
+.resp-sharing-button--facebook {
+  background-color: #3b5998
+}
+
+.resp-sharing-button--facebook:hover {
+  background-color: #2d4373
+}
+
+.resp-sharing-button--tumblr {
+  background-color: #35465C
+}
+
+.resp-sharing-button--tumblr:hover {
+  background-color: #222d3c
+}
+
+.resp-sharing-button--reddit {
+  background-color: #5f99cf
+}
+
+.resp-sharing-button--reddit:hover {
+  background-color: #3a80c1
+}
+
+.resp-sharing-button--google {
+  background-color: #dd4b39
+}
+
+.resp-sharing-button--google:hover {
+  background-color: #c23321
+}
+
+.resp-sharing-button--linkedin {
+  background-color: #0077b5
+}
+
+.resp-sharing-button--linkedin:hover {
+  background-color: #046293
+}
+
+.resp-sharing-button--email {
+  background-color: #777
+}
+
+.resp-sharing-button--email:hover {
+  background-color: #5e5e5e
+}
+
+.resp-sharing-button--xing {
+  background-color: #1a7576
+}
+
+.resp-sharing-button--xing:hover {
+  background-color: #114c4c
+}
+
+.resp-sharing-button--whatsapp {
+  background-color: #25D366
+}
+
+.resp-sharing-button--whatsapp:hover {
+  background-color: #1da851
+}
+
+.resp-sharing-button--hackernews {
+background-color: #FF6600
+}
+.resp-sharing-button--hackernews:hover, .resp-sharing-button--hackernews:focus {   background-color: #FB6200 }
+
+.resp-sharing-button--vk {
+  background-color: #507299
+}
+
+.resp-sharing-button--vk:hover {
+  background-color: #43648c
+}
+
+.resp-sharing-button--facebook {
+  background-color: #3b5998;
+  border-color: #3b5998;
+}
+
+.resp-sharing-button--facebook:hover,
+.resp-sharing-button--facebook:active {
+  background-color: #2d4373;
+  border-color: #2d4373;
+}
+
+.resp-sharing-button--twitter {
+  background-color: #55acee;
+  border-color: #55acee;
+}
+
+.resp-sharing-button--twitter:hover,
+.resp-sharing-button--twitter:active {
+  background-color: #2795e9;
+  border-color: #2795e9;
+}
+
+.resp-sharing-button--google {
+  background-color: #dd4b39;
+  border-color: #dd4b39;
+}
+
+.resp-sharing-button--google:hover,
+.resp-sharing-button--google:active {
+  background-color: #c23321;
+  border-color: #c23321;
+}
+
+
+.resp-sharing-button--email {
+  background-color: #777777;
+  border-color: #777777;
+}
+
+.resp-sharing-button--email:hover,
+.resp-sharing-button--email:active {
+  background-color: #5e5e5e;
+  border-color: #5e5e5e;
+}
+
+.resp-sharing-button--reddit {
+  background-color: #5f99cf;
+  border-color: #5f99cf;
+}
+
+.resp-sharing-button--reddit:hover,
+.resp-sharing-button--reddit:active {
+  background-color: #3a80c1;
+  border-color: #3a80c1;
+}
+
+.resp-sharing-button--whatsapp {
+  background-color: #25D366;
+  border-color: #25D366;
+}
+
+.resp-sharing-button--whatsapp:hover,
+.resp-sharing-button--whatsapp:active {
+  background-color: #1DA851;
+  border-color: #1DA851;
+}
+
+.resp-sharing-button--telegram {
+  background-color: #54A9EB;
+}
+
+.resp-sharing-button--telegram:hover {
+  background-color: #4B97D1;}
+
+.social-share {
+    padding-top: 20px;
+}
+
+/*# sourceMappingURL=maps/style.css.map */

assets/js/script.js

 	/*	Page Preloader
 	/* ========================================================================= */
 
-	// Preloader js    
+	// Preloader js
 	$(window).on('load', function () {
 		$('#preloader').fadeOut(700);
 	});
 
-	
-	//animation scroll js
-  var html_body = $('html, body');
-  $('nav a, .page-scroll').on('click', function () { //use page-scroll class in any HTML tag for scrolling
-    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
-      var target = $(this.hash);
-      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
-      if (target.length) {
-        html_body.animate({
-          scrollTop: target.offset().top - 50
-        }, 1500, "easeInOutExpo");
-        return false;
-      }
-    }
-  });
-
-  //easeInOutExpo Declaration
-  jQuery.extend(jQuery.easing, {
-    easeInOutExpo: function (x, t, b, c, d) {
-      if (t == 0) return b;
-      if (t == d) return b + c;
-      if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
-      return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
-    }
-  });
-
-
 	/* ========================================================================= */
 	/*	Post image slider
 	/* ========================================================================= */
 		where VARIABLE is the variable we are checking (like name, email),
 		length is a JavaScript function to get the number of characters.
 		And as you can see if the num of characters is 0 we set the error
-		variable to true and show the name_error div with the fadeIn effect. 
+		variable to true and show the name_error div with the fadeIn effect.
 		if it's not 0 then we fadeOut the div( that's if the div is shown and
-		the error is fixed it fadesOut. 
+		the error is fixed it fadesOut.
-		
+
 		The only difference from these checks is the email checking, we have
 		email.indexOf('@') which checks if there is @ in the email input field.
 		This JavaScript function will return -1 if no occurrence have been found.*/
 	offset: 100, // distance to the element when triggering the animation (default is 0)
 	mobile: false // trigger animations on mobile devices (default is true)
 });
-wow.init();
+//https://github.com/matthieua/WOW/issues/196#issuecomment-348734401
+var scrolled = false;
+$(window).on('scroll', function() {
+	if (!scrolled) {
+		scrolled = true;
+		wow.init();
+	}
+})
 
 /* ========================================================================= */
 /*	Google Map Customization

assets/js/scroll-behavior-polyfill.js

+// https://www.jsdelivr.com/package/npm/scroll-behavior-polyfill?path=dist
+/*!
+	scroll-behavior-polyfill 2.0.4
+    license: MIT (https://github.com/wessberg/scroll-behavior-polyfill/blob/master/LICENSE.md)
+    Copyright © 2019 Frederik Wessberg <frederikwessberg@hotmail.com>
+*/
+
+(function () {
+    'use strict';
+
+    /**
+     * Is true if the browser natively supports the 'scroll-behavior' CSS-property.
+     * @type {boolean}
+     */
+    var SUPPORTS_SCROLL_BEHAVIOR = "scrollBehavior" in document.documentElement.style;
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation. All rights reserved.
+    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+    this file except in compliance with the License. You may obtain a copy of the
+    License at http://www.apache.org/licenses/LICENSE-2.0
+
+    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+    MERCHANTABLITY OR NON-INFRINGEMENT.
+
+    See the Apache Version 2.0 License for specific language governing permissions
+    and limitations under the License.
+    ***************************************************************************** */
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    function __read(o, n) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator];
+        if (!m) return o;
+        var i = m.call(o), r, ar = [], e;
+        try {
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+        }
+        catch (error) { e = { error: error }; }
+        finally {
+            try {
+                if (r && !r.done && (m = i["return"])) m.call(i);
+            }
+            finally { if (e) throw e.error; }
+        }
+        return ar;
+    }
+
+    var styleDeclarationPropertyName = "scrollBehavior";
+    var styleAttributePropertyName = "scroll-behavior";
+    var styleAttributePropertyNameRegex = new RegExp(styleAttributePropertyName + ":\\s*([^;]*)");
+    /**
+     * Determines the scroll behavior to use, depending on the given ScrollOptions and the position of the Element
+     * within the DOM
+     * @param {Element|HTMLElement|Window} inputTarget
+     * @param {ScrollOptions} [options]
+     * @returns {ScrollBehavior}
+     */
+    function getScrollBehavior(inputTarget, options) {
+        // If the given 'behavior' is 'smooth', apply smooth scrolling no matter what
+        if (options != null && options.behavior === "smooth")
+            return "smooth";
+        var target = "style" in inputTarget ? inputTarget : document.scrollingElement != null ? document.scrollingElement : document.documentElement;
+        var value;
+        if ("style" in target) {
+            // Check if scroll-behavior is set as a property on the CSSStyleDeclaration
+            var scrollBehaviorPropertyValue = target.style[styleDeclarationPropertyName];
+            // Return it if it is given and has a proper value
+            if (scrollBehaviorPropertyValue != null && scrollBehaviorPropertyValue !== "") {
+                value = scrollBehaviorPropertyValue;
+            }
+        }
+        if (value == null) {
+            var attributeValue = target.getAttribute("scroll-behavior");
+            if (attributeValue != null && attributeValue !== "") {
+                value = attributeValue;
+            }
+        }
+        if (value == null) {
+            // Otherwise, check if it is set as an inline style
+            var styleAttributeValue = target.getAttribute("style");
+            if (styleAttributeValue != null && styleAttributeValue.includes(styleAttributePropertyName)) {
+                var match = styleAttributeValue.match(styleAttributePropertyNameRegex);
+                if (match != null) {
+                    var _a = __read(match, 2), behavior = _a[1];
+                    if (behavior != null && behavior !== "") {
+                        value = behavior;
+                    }
+                }
+            }
+        }
+        if (value == null) {
+            // Take the computed style for the element and see if it contains a specific 'scroll-behavior' value
+            var computedStyle = getComputedStyle(target);
+            var computedStyleValue = computedStyle.getPropertyValue("scrollBehavior");
+            if (computedStyleValue != null && computedStyleValue !== "") {
+                value = computedStyleValue;
+            }
+        }
+        // In all other cases, use the value from the CSSOM
+        return value;
+    }
+
+    var HALF = 0.5;
+    /**
+     * The easing function to use when applying the smooth scrolling
+     * @param {number} k
+     * @returns {number}
+     */
+    function ease(k) {
+        return HALF * (1 - Math.cos(Math.PI * k));
+    }
+
+    /**
+     * The duration of a smooth scroll
+     * @type {number}
+     */
+    var SCROLL_TIME = 15000;
+    /**
+     * Performs a smooth repositioning of the scroll
+     * @param {ISmoothScrollOptions} options
+     */
+    function smoothScroll(options) {
+        var startTime = options.startTime, startX = options.startX, startY = options.startY, endX = options.endX, endY = options.endY, method = options.method;
+        var timeLapsed = 0;
+        var distanceX = endX - startX;
+        var distanceY = endY - startY;
+        var speed = Math.max(Math.abs(distanceX / 1000 * SCROLL_TIME), Math.abs(distanceY / 1000 * SCROLL_TIME));
+        requestAnimationFrame(function animate(timestamp) {
+            timeLapsed += timestamp - startTime;
+            var percentage = Math.max(0, Math.min(1, speed === 0 ? 0 : (timeLapsed / speed)));
+            var positionX = Math.floor(startX + (distanceX * ease(percentage)));
+            var positionY = Math.floor(startY + (distanceY * ease(percentage)));
+            method(positionX, positionY);
+            if (positionX !== endX || positionY !== endY) {
+                requestAnimationFrame(animate);
+            }
+        });
+    }
+
+    /**
+     * Returns a High Resolution timestamp if possible, otherwise fallbacks to Date.now()
+     * @returns {number}
+     */
+    function now() {
+        if ("performance" in window)
+            return performance.now();
+        return Date.now();
+    }
+
+    var ELEMENT_ORIGINAL_SCROLL = Element.prototype.scroll;
+
+    var WINDOW_ORIGINAL_SCROLL = window.scroll;
+
+    var ELEMENT_ORIGINAL_SCROLL_BY = Element.prototype.scrollBy;
+
+    var WINDOW_ORIGINAL_SCROLL_BY = window.scrollBy;
+
+    var ELEMENT_ORIGINAL_SCROLL_TO = Element.prototype.scrollTo;
+
+    var WINDOW_ORIGINAL_SCROLL_TO = window.scrollTo;
+
+    /**
+     * A fallback if Element.prototype.scroll is not defined
+     * @param {number} x
+     * @param {number} y
+     */
+    function elementPrototypeScrollFallback(x, y) {
+        this.__adjustingScrollPosition = true;
+        this.scrollLeft = x;
+        this.scrollTop = y;
+        delete this.__adjustingScrollPosition;
+    }
+    /**
+     * A fallback if Element.prototype.scrollTo is not defined
+     * @param {number} x
+     * @param {number} y
+     */
+    function elementPrototypeScrollToFallback(x, y) {
+        return elementPrototypeScrollFallback.call(this, x, y);
+    }
+    /**
+     * A fallback if Element.prototype.scrollBy is not defined
+     * @param {number} x
+     * @param {number} y
+     */
+    function elementPrototypeScrollByFallback(x, y) {
+        this.__adjustingScrollPosition = true;
+        this.scrollLeft += x;
+        this.scrollTop += y;
+        delete this.__adjustingScrollPosition;
+    }
+    /**
+     * Gets the original non-patched prototype method for the given kind
+     * @param {ScrollMethodName} kind
+     * @param {Element|Window} element
+     * @return {Function}
+     */
+    function getOriginalScrollMethodForKind(kind, element) {
+        switch (kind) {
+            case "scroll":
+                if (element instanceof Element) {
+                    if (ELEMENT_ORIGINAL_SCROLL != null) {
+                        return ELEMENT_ORIGINAL_SCROLL;
+                    }
+                    else {
+                        return elementPrototypeScrollFallback;
+                    }
+                }
+                else {
+                    return WINDOW_ORIGINAL_SCROLL;
+                }
+            case "scrollBy":
+                if (element instanceof Element) {
+                    if (ELEMENT_ORIGINAL_SCROLL_BY != null) {
+                        return ELEMENT_ORIGINAL_SCROLL_BY;
+                    }
+                    else {
+                        return elementPrototypeScrollByFallback;
+                    }
+                }
+                else {
+                    return WINDOW_ORIGINAL_SCROLL_BY;
+                }
+            case "scrollTo":
+                if (element instanceof Element) {
+                    if (ELEMENT_ORIGINAL_SCROLL_TO != null) {
+                        return ELEMENT_ORIGINAL_SCROLL_TO;
+                    }
+                    else {
+                        return elementPrototypeScrollToFallback;
+                    }
+                }
+                else {
+                    return WINDOW_ORIGINAL_SCROLL_TO;
+                }
+        }
+    }
+
+    /**
+     * Gets the Smooth Scroll Options to use for the step function
+     * @param {Element|Window} element
+     * @param {number} x
+     * @param {number} y
+     * @param {ScrollMethodName} kind
+     * @returns {ISmoothScrollOptions}
+     */
+    function getSmoothScrollOptions(element, x, y, kind) {
+        var startTime = now();
+        if (!(element instanceof Element)) {
+            // Use window as the scroll container
+            var scrollX_1 = window.scrollX, pageXOffset_1 = window.pageXOffset, scrollY_1 = window.scrollY, pageYOffset_1 = window.pageYOffset;
+            var startX = scrollX_1 == null || scrollX_1 === 0 ? pageXOffset_1 : scrollX_1;
+            var startY = scrollY_1 == null || scrollY_1 === 0 ? pageYOffset_1 : scrollY_1;
+            return {
+                startTime: startTime,
+                startX: startX,
+                startY: startY,
+                endX: Math.floor(kind === "scrollBy"
+                    ? startX + x
+                    : x),
+                endY: Math.floor(kind === "scrollBy"
+                    ? startY + y
+                    : y),
+                method: getOriginalScrollMethodForKind("scrollTo", window).bind(window)
+            };
+        }
+        else {
+            var scrollLeft = element.scrollLeft, scrollTop = element.scrollTop;
+            var startX = scrollLeft;
+            var startY = scrollTop;
+            return {
+                startTime: startTime,
+                startX: startX,
+                startY: startY,
+                endX: Math.floor(kind === "scrollBy"
+                    ? startX + x
+                    : x),
+                endY: Math.floor(kind === "scrollBy"
+                    ? startY + y
+                    : y),
+                method: getOriginalScrollMethodForKind("scrollTo", element).bind(element)
+            };
+        }
+    }
+
+    /**
+     * Ensures that the given value is numeric
+     * @param {number} value
+     * @return {number}
+     */
+    function ensureNumeric(value) {
+        if (value == null)
+            return 0;
+        else if (typeof value === "number") {
+            return value;
+        }
+        else if (typeof value === "string") {
+            return parseFloat(value);
+        }
+        else {
+            return 0;
+        }
+    }
+
+    /**
+     * Returns true if the given value is some ScrollToOptions
+     * @param {number | ScrollToOptions} value
+     * @return {value is ScrollToOptions}
+     */
+    function isScrollToOptions(value) {
+        return value != null && typeof value === "object";
+    }
+
+    /**
+     * Handles a scroll method
+     * @param {Element|Window} element
+     * @param {ScrollMethodName} kind
+     * @param {number | ScrollToOptions} optionsOrX
+     * @param {number} y
+     */
+    function handleScrollMethod(element, kind, optionsOrX, y) {
+        onScrollWithOptions(getScrollToOptionsWithValidation(optionsOrX, y), element, kind);
+    }
+    /**
+     * Invoked when a 'ScrollToOptions' dict is provided to 'scroll()' as the first argument
+     * @param {ScrollToOptions} options
+     * @param {Element|Window} element
+     * @param {ScrollMethodName} kind
+     */
+    function onScrollWithOptions(options, element, kind) {
+        var behavior = getScrollBehavior(element, options);
+        // If the behavior is 'auto' apply instantaneous scrolling
+        if (behavior == null || behavior === "auto") {
+            getOriginalScrollMethodForKind(kind, element).call(element, options.left, options.top);
+        }
+        else {
+            smoothScroll(getSmoothScrollOptions(element, options.left, options.top, kind));
+        }
+    }
+    /**
+     * Normalizes the given scroll coordinates
+     * @param {number?} x
+     * @param {number?} y
+     * @return {Required<Pick<ScrollToOptions, "top" | "left">>}
+     */
+    function normalizeScrollCoordinates(x, y) {
+        return {
+            left: ensureNumeric(x),
+            top: ensureNumeric(y)
+        };
+    }
+    /**
+     * Gets ScrollToOptions based on the given arguments. Will throw if validation fails
+     * @param {number | ScrollToOptions} optionsOrX
+     * @param {number} y
+     * @return {Required<ScrollToOptions>}
+     */
+    function getScrollToOptionsWithValidation(optionsOrX, y) {
+        // If only one argument is given, and it isn't an options object, throw a TypeError
+        if (y === undefined && !isScrollToOptions(optionsOrX)) {
+            throw new TypeError("Failed to execute 'scroll' on 'Element': parameter 1 ('options') is not an object.");
+        }
+        // Scroll based on the primitive values given as arguments
+        if (!isScrollToOptions(optionsOrX)) {
+            return __assign({}, normalizeScrollCoordinates(optionsOrX, y), { behavior: "auto" });
+        }
+        // Scroll based on the received options object
+        else {
+            return __assign({}, normalizeScrollCoordinates(optionsOrX.left, optionsOrX.top), { behavior: optionsOrX.behavior == null ? "auto" : optionsOrX.behavior });
+        }
+    }
+
+    /**
+     * Patches the 'scroll' method on the Element prototype
+     */
+    function patchElementScroll() {
+        Element.prototype.scroll = function (optionsOrX, y) {
+            handleScrollMethod(this, "scroll", optionsOrX, y);
+        };
+    }
+
+    /**
+     * Patches the 'scrollBy' method on the Element prototype
+     */
+    function patchElementScrollBy() {
+        Element.prototype.scrollBy = function (optionsOrX, y) {
+            handleScrollMethod(this, "scrollBy", optionsOrX, y);
+        };
+    }
+
+    /**
+     * Patches the 'scrollTo' method on the Element prototype
+     */
+    function patchElementScrollTo() {
+        Element.prototype.scrollTo = function (optionsOrX, y) {
+            handleScrollMethod(this, "scrollTo", optionsOrX, y);
+        };
+    }
+
+    /**
+     * Patches the 'scroll' method on the Window prototype
+     */
+    function patchWindowScroll() {
+        window.scroll = function (optionsOrX, y) {
+            handleScrollMethod(this, "scroll", optionsOrX, y);
+        };
+    }
+
+    /**
+     * Patches the 'scrollBy' method on the Window prototype
+     */
+    function patchWindowScrollBy() {
+        window.scrollBy = function (optionsOrX, y) {
+            handleScrollMethod(this, "scrollBy", optionsOrX, y);
+        };
+    }
+
+    /**
+     * Patches the 'scrollTo' method on the Window prototype
+     */
+    function patchWindowScrollTo() {
+        window.scrollTo = function (optionsOrX, y) {
+            handleScrollMethod(this, "scrollTo", optionsOrX, y);
+        };
+    }
+
+    // tslint:disable:no-any
+    /**
+     * Gets the parent of an element, taking into account DocumentFragments, ShadowRoots, as well as the root context (window)
+     * @param {EventTarget} currentElement
+     * @returns {EventTarget | null}
+     */
+    function getParent(currentElement) {
+        if ("nodeType" in currentElement && currentElement.nodeType === 1) {
+            return currentElement.parentNode;
+        }
+        if ("ShadowRoot" in window && (currentElement instanceof window.ShadowRoot)) {
+            return currentElement.host;
+        }
+        else if (currentElement === document) {
+            return window;
+        }
+        else if (currentElement instanceof Node)
+            return currentElement.parentNode;
+        return null;
+    }
+
+    var scrollingElement = document.scrollingElement != null ? document.scrollingElement : document.documentElement;
+    /**
+     * Returns true if the given overflow property represents a scrollable overflow value
+     * @param {string | null} overflow
+     * @return {boolean}
+     */
+    function canOverflow(overflow) {
+        return overflow !== "visible" && overflow !== "clip";
+    }
+    /**
+     * Returns true if the given element is scrollable
+     * @param {Element} element
+     * @return {boolean}
+     */
+    function isScrollable(element) {
+        if (element.clientHeight < element.scrollHeight || element.clientWidth < element.scrollWidth) {
+            var style = getComputedStyle(element, null);
+            return (canOverflow(style.overflowY) ||
+                canOverflow(style.overflowX));
+        }
+        return false;
+    }
+    /**
+     * Finds the nearest ancestor of an element that can scroll
+     * @param {Element} target
+     * @returns {Element|Window?}
+     */
+    function findNearestAncestorsWithScrollBehavior(target) {
+        var currentElement = target;
+        while (currentElement != null) {
+            var behavior = getScrollBehavior(currentElement);
+            if (behavior != null && (currentElement === scrollingElement || isScrollable(currentElement))) {
+                return [currentElement, behavior];
+            }
+            var parent_1 = getParent(currentElement);
+            currentElement = parent_1;
+        }
+        // No such element could be found. Start over, but this time find the nearest ancestor that can simply scroll
+        currentElement = target;
+        while (currentElement != null) {
+            if (currentElement === scrollingElement || isScrollable(currentElement)) {
+                return [currentElement, "auto"];
+            }
+            var parent_2 = getParent(currentElement);
+            currentElement = parent_2;
+        }
+        // Default to the scrolling element
+        return [scrollingElement, "auto"];
+    }
+
+    // tslint:disable:no-any
+    /**
+     * Finds the nearest root from an element
+     * @param {Element} target
+     * @returns {Document|ShadowRoot}
+     */
+    function findNearestRoot(target) {
+        var currentElement = target;
+        while (currentElement != null) {
+            if ("ShadowRoot" in window && (currentElement instanceof window.ShadowRoot)) {
+                // Assume this is a ShadowRoot
+                return currentElement;
+            }
+            var parent_1 = getParent(currentElement);
+            if (parent_1 === currentElement) {
+                return document;
+            }
+            currentElement = parent_1;
+        }
+        return document;
+    }
+
+    /**
+     * A Regular expression that matches id's of the form "#[digit]"
+     * @type {RegExp}
+     */
+    var ID_WITH_LEADING_DIGIT_REGEXP = /^#\d/;
+    /**
+     * Catches anchor navigation to IDs within the same root and ensures that they can be smooth-scrolled
+     * if the scroll behavior is smooth in the first rooter within that context
+     */
+    function catchNavigation() {
+        // Listen for 'click' events globally
+        window.addEventListener("click", function (e) {
+            // Only work with trusted events on HTMLAnchorElements
+            if (!e.isTrusted || !(e.target instanceof HTMLAnchorElement))
+                return;
+            var hrefAttributeValue = e.target.getAttribute("href");
+            // Only work with HTMLAnchorElements that navigates to a specific ID
+            if (hrefAttributeValue == null || !hrefAttributeValue.startsWith("#"))
+                return;
+            // Find the nearest root, whether it be a ShadowRoot or the document itself
+            var root = findNearestRoot(e.target);
+            // Attempt to match the selector from that root. querySelector' doesn't support IDs that start with a digit, so work around that limitation
+            var elementMatch = hrefAttributeValue.match(ID_WITH_LEADING_DIGIT_REGEXP) != null
+                ? root.getElementById(hrefAttributeValue.slice(1))
+                : root.querySelector(hrefAttributeValue);
+            // If no selector could be found, don't proceed
+            if (elementMatch == null)
+                return;
+            // Find the nearest ancestor that can be scrolled
+            var _a = __read(findNearestAncestorsWithScrollBehavior(elementMatch), 2), ancestorWithScrollBehavior = _a[0], behavior = _a[1];
+            // If the behavior isn't smooth, don't proceed
+            if (behavior !== "smooth")
+                return;
+            // Otherwise, first prevent the default action.
+            e.preventDefault();
+            // Now, scroll to the element with that ID
+            ancestorWithScrollBehavior.scrollTo({
+                behavior: behavior,
+                top: elementMatch.offsetTop,
+                left: elementMatch.offsetLeft
+            });
+        });
+    }
+
+    var ELEMENT_ORIGINAL_SCROLL_INTO_VIEW = Element.prototype.scrollIntoView;
+
+    /**
+     * The majority of this file is based on https://github.com/stipsan/compute-scroll-into-view (MIT license),
+     * but has been rewritten to accept a scroller as an argument.
+     */
+    /**
+     * Find out which edge to align against when logical scroll position is "nearest"
+     * Interesting fact: "nearest" works similarly to "if-needed", if the element is fully visible it will not scroll it
+     *
+     * Legends:
+     * ┌────────┐ ┏ ━ ━ ━ ┓
+     * │ target │   frame
+     * └────────┘ ┗ ━ ━ ━ ┛
+     */
+    function alignNearest(scrollingEdgeStart, scrollingEdgeEnd, scrollingSize, scrollingBorderStart, scrollingBorderEnd, elementEdgeStart, elementEdgeEnd, elementSize) {
+        /**
+         * If element edge A and element edge B are both outside scrolling box edge A and scrolling box edge B
+         *
+         *          ┌──┐
+         *        ┏━│━━│━┓
+         *          │  │
+         *        ┃ │  │ ┃        do nothing
+         *          │  │
+         *        ┗━│━━│━┛
+         *          └──┘
+         *
+         *  If element edge C and element edge D are both outside scrolling box edge C and scrolling box edge D
+         *
+         *    ┏ ━ ━ ━ ━ ┓
+         *   ┌───────────┐
+         *   │┃         ┃│        do nothing
+         *   └───────────┘
+         *    ┗ ━ ━ ━ ━ ┛
+         */
+        if ((elementEdgeStart < scrollingEdgeStart &&
+            elementEdgeEnd > scrollingEdgeEnd) ||
+            (elementEdgeStart > scrollingEdgeStart && elementEdgeEnd < scrollingEdgeEnd)) {
+            return 0;
+        }
+        /**
+         * If element edge A is outside scrolling box edge A and element height is less than scrolling box height
+         *
+         *          ┌──┐
+         *        ┏━│━━│━┓         ┏━┌━━┐━┓
+         *          └──┘             │  │
+         *  from  ┃      ┃     to  ┃ └──┘ ┃
+         *
+         *        ┗━ ━━ ━┛         ┗━ ━━ ━┛
+         *
+         * If element edge B is outside scrolling box edge B and element height is greater than scrolling box height
+         *
+         *        ┏━ ━━ ━┓         ┏━┌━━┐━┓
+         *                           │  │
+         *  from  ┃ ┌──┐ ┃     to  ┃ │  │ ┃
+         *          │  │             │  │
+         *        ┗━│━━│━┛         ┗━│━━│━┛
+         *          │  │             └──┘
+         *          │  │
+         *          └──┘
+         *
+         * If element edge C is outside scrolling box edge C and element width is less than scrolling box width
+         *
+         *       from                 to
+         *    ┏ ━ ━ ━ ━ ┓         ┏ ━ ━ ━ ━ ┓
+         *  ┌───┐                 ┌───┐
+         *  │ ┃ │       ┃         ┃   │     ┃
+         *  └───┘                 └───┘
+         *    ┗ ━ ━ ━ ━ ┛         ┗ ━ ━ ━ ━ ┛
+         *
+         * If element edge D is outside scrolling box edge D and element width is greater than scrolling box width
+         *
+         *       from                 to
+         *    ┏ ━ ━ ━ ━ ┓         ┏ ━ ━ ━ ━ ┓
+         *        ┌───────────┐   ┌───────────┐
+         *    ┃   │     ┃     │   ┃         ┃ │
+         *        └───────────┘   └───────────┘
+         *    ┗ ━ ━ ━ ━ ┛         ┗ ━ ━ ━ ━ ┛
+         */
+        if ((elementEdgeStart <= scrollingEdgeStart && elementSize <= scrollingSize) ||
+            (elementEdgeEnd >= scrollingEdgeEnd && elementSize >= scrollingSize)) {
+            return elementEdgeStart - scrollingEdgeStart - scrollingBorderStart;
+        }
+        /**
+         * If element edge B is outside scrolling box edge B and element height is less than scrolling box height
+         *
+         *        ┏━ ━━ ━┓         ┏━ ━━ ━┓
+         *
+         *  from  ┃      ┃     to  ┃ ┌──┐ ┃
+         *          ┌──┐             │  │
+         *        ┗━│━━│━┛         ┗━└━━┘━┛
+         *          └──┘
+         *
+         * If element edge A is outside scrolling box edge A and element height is greater than scrolling box height
+         *
+         *          ┌──┐
+         *          │  │
+         *          │  │             ┌──┐
+         *        ┏━│━━│━┓         ┏━│━━│━┓
+         *          │  │             │  │
+         *  from  ┃ └──┘ ┃     to  ┃ │  │ ┃
+         *                           │  │
+         *        ┗━ ━━ ━┛         ┗━└━━┘━┛
+         *
+         * If element edge C is outside scrolling box edge C and element width is greater than scrolling box width
+         *
+         *           from                 to
+         *        ┏ ━ ━ ━ ━ ┓         ┏ ━ ━ ━ ━ ┓
+         *  ┌───────────┐           ┌───────────┐
+         *  │     ┃     │   ┃       │ ┃         ┃
+         *  └───────────┘           └───────────┘
+         *        ┗ ━ ━ ━ ━ ┛         ┗ ━ ━ ━ ━ ┛
+         *
+         * If element edge D is outside scrolling box edge D and element width is less than scrolling box width
+         *
+         *           from                 to
+         *        ┏ ━ ━ ━ ━ ┓         ┏ ━ ━ ━ ━ ┓
+         *                ┌───┐             ┌───┐
+         *        ┃       │ ┃ │       ┃     │   ┃
+         *                └───┘             └───┘
+         *        ┗ ━ ━ ━ ━ ┛         ┗ ━ ━ ━ ━ ┛
+         *
+         */
+        if ((elementEdgeEnd > scrollingEdgeEnd && elementSize < scrollingSize) ||
+            (elementEdgeStart < scrollingEdgeStart && elementSize > scrollingSize)) {
+            return elementEdgeEnd - scrollingEdgeEnd + scrollingBorderEnd;
+        }
+        return 0;
+    }
+    function computeScrollIntoView(target, scroller, options) {
+        var block = options.block, inline = options.inline;
+        // Used to handle the top most element that can be scrolled
+        var scrollingElement = document.scrollingElement || document.documentElement;
+        // Support pinch-zooming properly, making sure elements scroll into the visual viewport
+        // Browsers that don't support visualViewport will report the layout viewport dimensions on document.documentElement.clientWidth/Height
+        // and viewport dimensions on window.innerWidth/Height
+        // https://www.quirksmode.org/mobile/viewports2.html
+        // https://bokand.github.io/viewport/index.html
+        var viewportWidth = window.visualViewport != null
+            ? visualViewport.width
+            : innerWidth;
+        var viewportHeight = window.visualViewport != null
+            ? visualViewport.height
+            : innerHeight;
+        var viewportX = window.scrollX != null ? window.scrollX : window.pageXOffset;
+        var viewportY = window.scrollY != null ? window.scrollY : window.pageYOffset;
+        var _a = target.getBoundingClientRect(), targetHeight = _a.height, targetWidth = _a.width, targetTop = _a.top, targetRight = _a.right, targetBottom = _a.bottom, targetLeft = _a.left;
+        // These values mutate as we loop through and generate scroll coordinates
+        var targetBlock = block === "start" || block === "nearest"
+            ? targetTop
+            : block === "end"
+                ? targetBottom
+                : targetTop + targetHeight / 2; // block === 'center
+        var targetInline = inline === "center"
+            ? targetLeft + targetWidth / 2
+            : inline === "end"
+                ? targetRight
+                : targetLeft; // inline === 'start || inline === 'nearest
+        var _b = scroller.getBoundingClientRect(), height = _b.height, width = _b.width, top = _b.top, right = _b.right, bottom = _b.bottom, left = _b.left;
+        var frameStyle = getComputedStyle(scroller);
+        var borderLeft = parseInt(frameStyle.borderLeftWidth, 10);
+        var borderTop = parseInt(frameStyle.borderTopWidth, 10);
+        var borderRight = parseInt(frameStyle.borderRightWidth, 10);
+        var borderBottom = parseInt(frameStyle.borderBottomWidth, 10);
+        var blockScroll = 0;
+        var inlineScroll = 0;
+        // The property existance checks for offset[Width|Height] is because only HTMLElement objects have them, but any Element might pass by here
+        // @TODO find out if the "as HTMLElement" overrides can be dropped
+        var scrollbarWidth = "offsetWidth" in scroller
+            ? scroller.offsetWidth -
+                scroller.clientWidth -
+                borderLeft -
+                borderRight
+            : 0;
+        var scrollbarHeight = "offsetHeight" in scroller
+            ? scroller.offsetHeight -
+                scroller.clientHeight -
+                borderTop -
+                borderBottom
+            : 0;
+        if (scrollingElement === scroller) {
+            // Handle viewport logic (document.documentElement or document.body)
+            if (block === "start") {
+                blockScroll = targetBlock;
+            }
+            else if (block === "end") {
+                blockScroll = targetBlock - viewportHeight;
+            }
+            else if (block === "nearest") {
+                blockScroll = alignNearest(viewportY, viewportY + viewportHeight, viewportHeight, borderTop, borderBottom, viewportY + targetBlock, viewportY + targetBlock + targetHeight, targetHeight);
+            }
+            else {
+                // block === 'center' is the default
+                blockScroll = targetBlock - viewportHeight / 2;
+            }
+            if (inline === "start") {
+                inlineScroll = targetInline;
+            }
+            else if (inline === "center") {
+                inlineScroll = targetInline - viewportWidth / 2;
+            }
+            else if (inline === "end") {
+                inlineScroll = targetInline - viewportWidth;
+            }
+            else {
+                // inline === 'nearest' is the default
+                inlineScroll = alignNearest(viewportX, viewportX + viewportWidth, viewportWidth, borderLeft, borderRight, viewportX + targetInline, viewportX + targetInline + targetWidth, targetWidth);
+            }
+            // Apply scroll position offsets and ensure they are within bounds
+            // @TODO add more test cases to cover this 100%
+            blockScroll = Math.max(0, blockScroll + viewportY);
+            inlineScroll = Math.max(0, inlineScroll + viewportX);
+        }
+        else {
+            // Handle each scrolling frame that might exist between the target and the viewport
+            if (block === "start") {
+                blockScroll = targetBlock - top - borderTop;
+            }
+            else if (block === "end") {
+                blockScroll = targetBlock - bottom + borderBottom + scrollbarHeight;
+            }
+            else if (block === "nearest") {
+                blockScroll = alignNearest(top, bottom, height, borderTop, borderBottom + scrollbarHeight, targetBlock, targetBlock + targetHeight, targetHeight);
+            }
+            else {
+                // block === 'center' is the default
+                blockScroll = targetBlock - (top + height / 2) + scrollbarHeight / 2;
+            }
+            if (inline === "start") {
+                inlineScroll = targetInline - left - borderLeft;
+            }
+            else if (inline === "center") {
+                inlineScroll = targetInline - (left + width / 2) + scrollbarWidth / 2;
+            }
+            else if (inline === "end") {
+                inlineScroll = targetInline - right + borderRight + scrollbarWidth;
+            }
+            else {
+                // inline === 'nearest' is the default
+                inlineScroll = alignNearest(left, right, width, borderLeft, borderRight + scrollbarWidth, targetInline, targetInline + targetWidth, targetWidth);
+            }
+            var scrollLeft = scroller.scrollLeft, scrollTop = scroller.scrollTop;
+            // Ensure scroll coordinates are not out of bounds while applying scroll offsets
+            blockScroll = Math.max(0, Math.min(scrollTop + blockScroll, scroller.scrollHeight - height + scrollbarHeight));
+            inlineScroll = Math.max(0, Math.min(scrollLeft + inlineScroll, scroller.scrollWidth - width + scrollbarWidth));
+        }
+        return {
+            top: blockScroll,
+            left: inlineScroll
+        };
+    }
+
+    /**
+     * Patches the 'scrollIntoView' method on the Element prototype
+     */
+    function patchElementScrollIntoView() {
+        Element.prototype.scrollIntoView = function (arg) {
+            var normalizedOptions = arg == null || arg === true
+                ? {
+                    block: "start",
+                    inline: "nearest"
+                }
+                : arg === false
+                    ? {
+                        block: "end",
+                        inline: "nearest"
+                    }
+                    : arg;
+            // Find the nearest ancestor that can be scrolled
+            var _a = __read(findNearestAncestorsWithScrollBehavior(this), 2), ancestorWithScroll = _a[0], ancestorWithScrollBehavior = _a[1];
+            var behavior = normalizedOptions.behavior != null
+                ? normalizedOptions.behavior
+                : ancestorWithScrollBehavior;
+            // If the behavior isn't smooth, simply invoke the original implementation and do no more
+            if (behavior !== "smooth") {
+                // Assert that 'scrollIntoView' is actually defined
+                if (ELEMENT_ORIGINAL_SCROLL_INTO_VIEW != null) {
+                    ELEMENT_ORIGINAL_SCROLL_INTO_VIEW.call(this, normalizedOptions);
+                }
+                // Otherwise, invoke 'scrollTo' instead and provide the scroll coordinates
+                else {
+                    var _b = computeScrollIntoView(this, ancestorWithScroll, normalizedOptions), top_1 = _b.top, left = _b.left;
+                    getOriginalScrollMethodForKind("scrollTo", this).call(this, left, top_1);
+                }
+                return;
+            }
+            ancestorWithScroll.scrollTo(__assign({ behavior: behavior }, computeScrollIntoView(this, ancestorWithScroll, normalizedOptions)));
+        };
+    }
+
+    var ELEMENT_ORIGINAL_SCROLL_TOP_SET_DESCRIPTOR = Object.getOwnPropertyDescriptor(Element.prototype, "scrollTop").set;
+
+    /**
+     * Patches the 'scrollTop' property descriptor on the Element prototype
+     */
+    function patchElementScrollTop() {
+        Object.defineProperty(Element.prototype, "scrollTop", {
+            set: function (scrollTop) {
+                if (this.__adjustingScrollPosition) {
+                    return ELEMENT_ORIGINAL_SCROLL_TOP_SET_DESCRIPTOR.call(this, scrollTop);
+                }
+                handleScrollMethod(this, "scrollTo", this.scrollLeft, scrollTop);
+                return scrollTop;
+            }
+        });
+    }
+
+    var ELEMENT_ORIGINAL_SCROLL_LEFT_SET_DESCRIPTOR = Object.getOwnPropertyDescriptor(Element.prototype, "scrollLeft").set;
+
+    /**
+     * Patches the 'scrollLeft' property descriptor on the Element prototype
+     */
+    function patchElementScrollLeft() {
+        Object.defineProperty(Element.prototype, "scrollLeft", {
+            set: function (scrollLeft) {
+                if (this.__adjustingScrollPosition) {
+                    return ELEMENT_ORIGINAL_SCROLL_LEFT_SET_DESCRIPTOR.call(this, scrollLeft);
+                }
+                handleScrollMethod(this, "scrollTo", scrollLeft, this.scrollTop);
+                return scrollLeft;
+            }
+        });
+    }
+
+    /**
+     * Applies the polyfill
+     */
+    function patch() {
+        // Element.prototype methods
+        patchElementScroll();
+        patchElementScrollBy();
+        patchElementScrollTo();
+        patchElementScrollIntoView();
+        // Element.prototype descriptors
+        patchElementScrollLeft();
+        patchElementScrollTop();
+        // window methods
+        patchWindowScroll();
+        patchWindowScrollBy();
+        patchWindowScrollTo();
+        // Navigation
+        catchNavigation();
+    }
+
+    /**
+     * Is true if the browser natively supports the Element.prototype.[scroll|scrollTo|scrollBy|scrollIntoView] methods
+     * @type {boolean}
+     */
+    var SUPPORTS_ELEMENT_PROTOTYPE_SCROLL_METHODS = "scroll" in Element.prototype && "scrollTo" in Element.prototype && "scrollBy" in Element.prototype && "scrollIntoView" in Element.prototype;
+
+    if (!SUPPORTS_SCROLL_BEHAVIOR || !SUPPORTS_ELEMENT_PROTOTYPE_SCROLL_METHODS) {
+        patch();
+    }
+
+}());
+

exampleSite/config.toml

 baseURL = "http://example.org/"
 languageCode = "en-us"
-title = "Meghna | Responsive Multipurpose Parallax HTML5 Template"
+title = "Meghna"
+
 theme = "meghna-hugo"
 
 # Menu
 logo = "images/logo.png"
 gmapAPI = "https://maps.googleapis.com/maps/api/js?key=AIzaSyCcABaamniA6OL5YvYSpB3pFMNrXwXnLwU&libraries=places"
 # Meta data
-description = "Airspace Hugo theme"
+description = "Responsive Multipurpose Parallax HTML5 Template"
 author = "Themefisher"
 # Google Analitycs
 googleAnalitycsID = "Your ID"
         title = "Cups of Coffee"
         icon = "tf-ion-coffee"
         count = "2500"
-    
+
     # footer
     [params.footer]
         copyright = "Themefisher Team"
         [[params.footer.socialIcon]]
         icon = "tf-ion-social-facebook"
         url = "#"
-        
+
         [[params.footer.socialIcon]]
         icon = "tf-ion-social-twitter"
         url = "#"
-        
+
         [[params.footer.socialIcon]]
         icon = "tf-ion-social-google-outline"
         url = "#"
-        
+
         [[params.footer.socialIcon]]
         icon = "tf-ion-social-youtube"
         url = "#"
-        
+
         [[params.footer.socialIcon]]
         icon = "tf-ion-social-linkedin"
         url = "#"
-        
+
         [[params.footer.socialIcon]]
         icon = "tf-ion-social-dribbble-outline"
         url = "#"
-        
+
         [[params.footer.socialIcon]]
         icon = "tf-ion-social-pinterest-outline"
         url = "#"

exampleSite/data/blog.yml

 enable : true
 heading : Latest
-headingSpan : Posts
+headingSpan : Posts
+sharing : true

layouts/_default/baseof.html

 <!DOCTYPE html>
-<html>
+<html class="no-js" lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en-US{{ end }}" scroll-behavior="smooth">
     {{- partial "head.html" . -}}
-    <body>
+    <body id="body" data-spy="scroll" data-target=".navbar" data-offset="52">
-        {{- partial "header.html" . -}}
         <div id="content">
         {{- block "main" . }}{{- end }}
         </div>

layouts/_default/list.html

-{{ partial "header.html" . }}
+{{ define "main" }}
 
 {{ partial "navigation.html" . }}
 
     <div class="container">
         <div class="row">
 
-            <div class="clearfix">
+            {{ range .Data.Pages }}
-                {{ range .Data.Pages }}
+            {{"<!-- single blog post -->" | safeHTML}}
-                {{"<!-- single blog post -->" | safeHTML}}
+            <article class="col-lg-4 col-md-6 col-12 clearfix wow fadeInUp" data-wow-duration="500ms">
-                <article class="col-md-4 col-sm-6 col-xs-12 clearfix wow fadeInUp" data-wow-duration="500ms">
+                <div class="post-block">
-                    <div class="post-block">
+                    <div class="media-wrapper">
-                        <div class="media-wrapper">
+                        {{ with .Params.image }}<img src="{{ . | absURL }}" alt="post-image" class="img-fluid">{{ end }}
-                            {{ with .Params.image }}<img src="{{ . | absURL }}" alt="post-image" class="img-responsive">{{ end }}
+                    </div>
-                        </div>
 
-                        <div class="content">
+                    <div class="content">
-                            <h3><a href="{{ .Permalink }}">{{ .Title }}</a></h3>
+                        <h3><a href="{{ .Permalink }}">{{ .Title }}</a></h3>
-                            <p>{{ .Summary }}</p>
+                        <p>{{ .Summary }}</p>
-                            <a class="btn btn-transparent" href="{{ .Permalink }}">Read more</a>
+                        <a class="btn btn-transparent" href="{{ .Permalink }}">Read more</a>
-                        </div>
                     </div>
-                </article>
+                </div>
-                {{"<!-- /single blog post -->" | safeHTML}}
+            </article>
-                {{ end }}
+            {{"<!-- /single blog post -->" | safeHTML}}
-            </div>
+            {{ end }}
         </div>
     </div>
 </section>
 {{"<!-- /blog -->" | safeHTML}}
 
-{{ partial "footer.html" . }}
+{{ end }}

layouts/_default/single.html

-{{ partial "header.html" . }}
+{{ define "main" }}
 
 {{ partial "navigation.html" . }}
 
 <section class="section">
     <div class="container">
         <div class="row">
-            <div class="col-md-8 col-md-offset-2 text-center">
+            <div class="col-lg-8 offset-lg-2 text-center">
                 <h1>{{ .Title }}</h1>
                 <ul class="list-inline mb-50">
                     <li class="list-inline-item">{{ .Params.author }}</li>
                 </ul>
                 <img class="img-fluid mb-50" src="{{ .Params.image | absURL }}" alt="blog-image">
             </div>
-            <div class="col-md-8 col-md-offset-2">
+            <div class="col-lg-8 offset-lg-2">
                 <div class="post-single-content">
                     {{ .Content }}
+                    {{ if .Site.Data.blog.sharing}}
+                        {{ partial "share_post" . }}
+                    {{ end }}
                 </div>
             </div>
         </div>
     </div>
 </section>
 
-{{ partial "footer.html" . }}
+{{ end }}

layouts/index.html

-{{ partial "header.html" . }}
+{{ define "main" }}
-	
-{{ partial "preloader.html" . }}
-	    
-{{ partial "hero-area.html" . }}
 
-{{ partial "navigation.html" . }}
+    {{ partial "preloader.html" . }}
 
-{{ partial "about.html" . }}
+    {{ partial "hero-area.html" . }}
 
-{{ partial "cta.html" . }}
+    {{ partial "navigation.html" . }}
 
-{{ partial "service.html" . }}
+    {{ partial "about.html" . }}
-	
-{{ partial "skill.html" . }}
 
-{{ partial "portfolio.html" . }}
+    {{ partial "cta.html" . }}
 
-{{ partial "counter.html" . }}
+    {{ partial "service.html" . }}
 
-{{ partial "team.html" . }}
+    {{ partial "skill.html" . }}
-		
-{{ partial "pricing.html" . }}
 
-{{ partial "testimonial.html" . }}
+    {{ partial "portfolio.html" . }}
 
-{{ partial "blog.html" . }}
+    {{ partial "counter.html" . }}
-		
-{{ partial "contact.html" . }}
 
-{{ partial "footer.html" . }}
+    {{ partial "team.html" . }}
+
+    {{ partial "pricing.html" . }}
+
+    {{ partial "testimonial.html" . }}
+
+    {{ partial "blog.html" . }}
+
+    {{ partial "contact.html" . }}
+
+{{ end }}

layouts/partials/about.html

 <section class="bg-one about section" id="about">
     <div class="container">
         <div class="row">
-            {{"<!-- section title -->" | safeHTML}}
+            <div class="col-lg-12">
-            <div class="title text-center wow fadeIn" data-wow-duration="1500ms">
+                {{"<!-- section title -->" | safeHTML}}
-                <h2>{{ .Site.Data.about.heading}} <span class="color">{{ .Site.Data.about.headingSpan}}</span> </h2>
+                <div class="title text-center wow fadeIn" data-wow-duration="1500ms">
-                <div class="border"></div>
+                    <h2>{{ .Site.Data.about.heading}} <span class="color">{{ .Site.Data.about.headingSpan}}</span> </h2>
+                    <div class="border-meghna"></div>
+                </div>
             </div>
             {{"<!-- /section title -->" | safeHTML}}
 
             {{ range .Site.Data.about.aboutItem }}
             {{"<!-- About item -->" | safeHTML}}
-            <div class="col-md-4 text-center wow fadeInUp" data-wow-duration="500ms">
+            <div class="col-lg-4 text-center wow fadeInUp" data-wow-duration="500ms">
                 <div class="block">
                     <div class="icon-box">
-                            {{with .icon}}<i class="{{ . }}"></i>{{ end }}
+                        {{with .icon}}<i class="{{ . }}"></i>{{ end }}
                     </div>
                     {{"<!-- Express About Yourself -->" | safeHTML}}
                     <div class="content text-center">
-                      {{ with .title }}<h3 class="ddd">{{ . }}</h3>{{ end }}
+                        {{ with .title }}<h3 class="ddd">{{ . }}</h3>{{ end }}
-                      {{ with .content}}  <p>{{ . }}</p>{{ end }}
+                        {{ with .content}}  <p>{{ . }}</p>{{ end }}
                     </div>
                 </div>
             </div>
 
 {{ if .Site.Data.about2.enable }}
 {{"<!-- about 2 -->" | safeHTML}}
-<section class="section about-2 padding-0 bg-dark">
+<section class="section section-bg about-2 padding-0">
     <div class="container-fluid">
         <div class="row">
-            <div class="col-md-6 padding-0 ">
+            <div class="col-lg-6 padding-0 ">
-                <img class="img-responsive" src="{{ .Site.Data.about2.image | absURL}}" alt="image">
+                <img class="img-fluid" src="{{ .Site.Data.about2.image | absURL}}" alt="image">
             </div>
-            <div class="col-md-6">
+            <div class="col-lg-6">
                 <div class="content-block">
-                   {{with .Site.Data.about2.title}} <h2>{{ . }}</h2> {{ end }}
+                    {{with .Site.Data.about2.title}} <h2>{{ . }}</h2> {{ end }}
-                   {{with .Site.Data.about2.description}} <p>{{ . }}</p> {{ end }}
+                    {{with .Site.Data.about2.description}} <p>{{ . }}</p> {{ end }}
-                   {{with .Site.Data.about2.description2}} <p>{{ . }}</p> {{ end }}
+                    {{with .Site.Data.about2.description2}} <p>{{ . }}</p> {{ end }}
                     <div class="row">
                         {{ range .Site.Data.about2.aboutItem }}
-                        <div class="col-md-6">
+                        <div class="col-lg-6">
                             <div class="media">
-                                <div class="pull-left">
+                                <div class="align-self-start mr-3">
-                                   {{with .icon}} <i class="{{ . }}"></i> {{ end }}
+                                    {{with .icon}} <i class="{{ . }}"></i> {{ end }}
                                 </div>
                                 <div class="media-body">
-                                   {{with .title}} <h4 class="media-heading">{{ . }}</h4>{{ end }}
+                                    {{with .title}} <h4 class="media-heading">{{ . }}</h4>{{ end }}
-                                   {{ with .content}} <p>{{ . }}</p> {{ end }}
+                                    {{ with .content}} <p>{{ . }}</p> {{ end }}
                                 </div>
                             </div>
                         </div>

layouts/partials/blog.html

 <section id="blog" class="section">
     <div class="container">
         <div class="row">
-
+            <div class="col-lg-12">
-            {{"<!-- section title -->" | safeHTML}}
+                {{"<!-- section title -->" | safeHTML}}
-            <div class="title text-center wow fadeInDown">
+                <div class="title text-center wow fadeInDown">
-                <h2> {{ with .Site.Data.blog.heading }} {{ . }} {{ end }} <span class="color"> {{ with .Site.Data.blog.heading }} {{ . }} {{ end }} </span></h2>
+                    <h2> {{ with .Site.Data.blog.heading }} {{ . }} {{ end }} <span class="color"> {{ with .Site.Data.blog.headingSpan }} {{ . }} {{ end }} </span></h2>
-                <div class="border"></div>
+                    <div class="border-meghna"></div>
+                </div>
             </div>
             {{"<!-- /section title -->" | safeHTML}}
 
-            <div class="clearfix">
+            {{ range .Data.Pages }}
-                {{ range .Data.Pages }}
+            {{"<!-- single blog post -->" | safeHTML}}
-                {{"<!-- single blog post -->" | safeHTML}}
+            <article class="col-lg-4 col-md-6 col-12 clearfix wow fadeInUp" data-wow-duration="500ms">
-                <article class="col-md-4 col-sm-6 col-xs-12 clearfix wow fadeInUp" data-wow-duration="500ms">
+                <div class="post-block">
-                    <div class="post-block">
+                    <div class="media-wrapper">
-                        <div class="media-wrapper">
+                        {{ with .Params.image }}<img src="{{ . | absURL }}" alt="post-image" class="img-fluid">{{ end }}
-                            {{ with .Params.image }}<img src="{{ . | absURL }}" alt="post-image" class="img-responsive">{{ end }}
+                    </div>
-                        </div>
 
-                        <div class="content">
+                    <div class="content">
-                            <h3><a href="{{ .Permalink }}">{{ .Title }}</a></h3>
+                        <h3><a href="{{ .Permalink }}">{{ .Title }}</a></h3>
-                            <p>{{ .Summary }}</p>
+                        <p>{{ .Summary }}</p>
-                            <a class="btn btn-transparent" href="{{ .Permalink }}">Read more</a>
+                        <a class="btn btn-transparent" href="{{ .Permalink }}">Read more</a>
-                        </div>
                     </div>
-                </article>
+                </div>
-                {{"<!-- /single blog post -->" | safeHTML}}
+            </article>
-                {{ end }}
+            {{"<!-- /single blog post -->" | safeHTML}}
-            </div>
+            {{ end }}
 
-            <div class="all-post text-center">
+            <div class="all-post text-center col-lg-12">
                 <a class="btn btn-main" href="/blog">View All Post</a>
             </div>
         </div>

layouts/partials/contact.html

 {{ if .Site.Data.contact.enable }}
-{{"<!-- Srart Contact Us -->" | safeHTML}}
+{{"<!-- Start Contact Us -->" | safeHTML}}
 <section id="contact-us" class="contact-us section-bg">
     <div class="container">
         <div class="row">
-
+            <div class="col-lg-12">
-            {{"<!-- section title -->" | safeHTML}}
+                {{"<!-- section title -->" | safeHTML}}
-            <div class="title text-center wow fadeIn" data-wow-duration="500ms">
+                <div class="title text-center wow fadeIn" data-wow-duration="500ms">
-                <h2>{{ with .Site.Data.contact.heading }} {{ . }} {{ end }} <span class="color">{{ with .Site.Data.contact.headingSpan }} {{ . }} {{ end }}</span></h2>
+                    <h2>{{ with .Site.Data.contact.heading }} {{ . }} {{ end }} <span class="color">{{ with .Site.Data.contact.headingSpan }} {{ . }} {{ end }}</span></h2>
-                <div class="border"></div>
+                    <div class="border-meghna"></div>
+                </div>
             </div>
             {{"<!-- /section title -->" | safeHTML}}
 
             {{"<!-- Contact Details -->" | safeHTML}}
-            <div class="contact-info col-md-6 wow fadeInUp" data-wow-duration="500ms">
+            <div class="contact-info col-lg-6 wow fadeInUp" data-wow-duration="500ms">
                 {{ with .Site.Data.contact.title }}<h3>{{ . }}</h3> {{ end }}
                 {{ with .Site.Data.contact.content }} <p> {{ . }} </p> {{ end }}
                 <div class="contact-details">
             </div>
 
             {{"<!-- Contact Form -->" | safeHTML}}
-            <div class="contact-form col-md-6 wow fadeInUp" data-wow-duration="500ms" data-wow-delay="300ms">
+            <div class="col-lg-6 wow fadeInUp" data-wow-duration="500ms" data-wow-delay="300ms">
-                <form id="contact-form" method="post" action="sendmail.php" role="form">
+                <form id="contact-form" class="form-meghna" method="post" action="sendmail.php" role="form">
 
                     <div class="form-group">
                         <input type="text" placeholder="Your Name" class="form-control" name="name" id="name">
                 </form>
             </div>
 
-        </div>
-    </div>
-
     {{"<!-- Google Map -->" | safeHTML}}
     <div class="google-map">
-        <div id="map-canvas" {{ with .Site.Data.contact.mapLatitude }} data-latitude="{{ . }}" {{ end }} 
+        <div id="map-canvas" {{ with .Site.Data.contact.mapLatitude }} data-latitude="{{ . }}" {{ end }}
         {{ with .Site.Data.contact.mapLongitude }} data-longitude="{{ . }}" {{ end }}></div>
     </div>
 

layouts/partials/counter.html

     <div class="container">
         <div class="row">
             {{ range .Site.Params.counter.counterItem }}
-            <div class="col-md-3 col-sm-6 col-xs-12 text-center wow fadeInDown" data-wow-duration="500ms">
+            <div class="col-lg-3 col-md-6 col-12 text-center wow fadeInDown" data-wow-duration="500ms">
                 <div class="counters-item">
                     <i class="{{ .icon }}"></i>
                     <span data-speed="3000" data-to="{{ .count }}">{{ .count }}</span>

layouts/partials/cta.html

 <section class="call-to-action section-sm bg-1 overly" style='background-image: url("{{ .Site.Params.counter.bgImage | absURL }}")'>
     <div class="container">
         <div class="row">
-            <div class="col-md-12 text-center">
+            <div class="col-lg-12 text-center">
                {{ with .Site.Params.cta.title}} <h2>{{ . }}</h2> {{ end }}
                {{ with .Site.Params.cta.content }} <p>{{ . }}</p> {{ end }}
                 <a href="{{ .Site.Params.cta.btnURL }}" class="btn btn-main">{{ with .Site.Params.cta.btnText }} {{ . }} {{end}}</a>

layouts/partials/footer.html

 <footer id="footer" class="bg-one">
 	<div class="container">
 		<div class="row wow fadeInUp" data-wow-duration="500ms">
-			<div class="col-lg-12">
+			<div class="col-xl-12">
 
 				{{"<!-- Footer Social Links -->" | safeHTML}}
 				<div class="social-icon">
 					<ul class="list-inline">
 						{{ range .Site.Params.footer.socialIcon }}
-						<li><a href="#"><i class="{{ .icon }}"></i></a></li>
+						<li class="list-inline-item"><a href="{{ .url }}"><i class="{{ .icon }}"></i></a></li>
 						{{ end }}
 					</ul>
 				</div>
 				{{"<!-- copyright -->" | safeHTML}}
 				<div class="copyright text-center">
 					<a href="{{ .Site.BaseURL | absURL }}">
-						<img src="{{ .Site.Params.logo | absURL }}" alt="Meghna" /> 
+						<img src="{{ .Site.Params.logo | absURL }}" alt="Meghna" />
 					</a>
 					<br>
 
 {{"<!-- /footer -->" | safeHTML}}
 
 {{"<!-- Essential Scripts -->" | safeHTML}}
-		
+
 		{{"<!-- Main jQuery -->" | safeHTML}}
 		<script type="text/javascript" src="{{ "plugins/jquery/dist/jquery.min.js" | absURL}}"></script>
-		{{"<!-- Bootstrap 3.1 -->" | safeHTML}}
+		{{"<!-- Bootstrap 4.2 + Popper -->" | safeHTML}}
-		<script type="text/javascript" src="{{ "plugins/bootstrap/dist/js/bootstrap.min.js" | absURL}}"></script>
+		{{ $bs := resources.Get "js/bootstrap.bundle.js" | minify}}
+		<script type="text/javascript" src="{{ $bs.Permalink }}"></script>
 		{{"<!-- Slick Carousel -->" | safeHTML}}
 		<script type="text/javascript" src="{{ "plugins/slick-carousel/slick/slick.min.js" | absURL}}"></script>
 		{{"<!-- Portfolio Filtering -->" | safeHTML}}
 		<script type="text/javascript" src="{{ "plugins/count-to/jquery.countTo.js" | absURL}}"></script>
 		{{"<!-- wow.min Script -->" | safeHTML}}
 		<script type="text/javascript" src="{{ "plugins/wow/dist/wow.min.js" | absURL}}"></script>
+		{{"<!-- Scroll behavior polyfill -->" | safeHTML}}
+		{{ $scroll := resources.Get "js/scroll-behavior-polyfill.js" | minify}}
+		<script src="{{ $scroll.Permalink }}"></script>
 		{{"<!-- Custom js -->" | safeHTML}}
 		{{ $script := resources.Get "js/script.js" | minify}}
 		<script src="{{ $script.Permalink }}"></script>
 				ga('create', '{{ .Site.Params.googleAnalitycsID }}', 'auto');
 				ga('send', 'pageview');
 		</script>
-		
+
     </body>
 </html>

layouts/partials/head.html

+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta name="description" content="{{ if .Description }}{{ .Description }}{{else if .IsPage}}{{ .Summary | plainify}}{{ else }}{{.Site.Params.description}}{{ end }}">
+    <meta name="author" content="{{ with .Params.author }}{{ . }}{{else}}{{ with .Site.Params.author}}{{ . }}{{ end }}{{end}}">
+
+    {{ "<!-- Mobile Specific Meta -->" | safeHTML }}
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    {{ .Hugo.Generator }}
+
+    <title>{{ if .IsHome }}{{ .Site.Title }}{{" | "}}{{ .Site.Params.Description }}{{ else if .IsPage}}{{ .Title }}{{" | "}}{{ .CurrentSection.Title }}{{else}}{{ .Title }}{{" | "}}{{ .Site.Title }}{{ end }}</title>
+
+
+    {{"<!-- Favicon -->" |safeHTML}}
+    <link rel="shortcut icon" type="image/x-icon" href="{{ "images/favicon.ico" | absURL }}"/>
+
+    {{"<!-- CSS -->"|safeHTML}}
+    {{"<!-- Fontawesome Icon font -->"|safeHTML}}
+    <link rel="stylesheet" href="{{"plugins/themefisher-font/style.css" | absURL}}">
+    {{"<!-- bootstrap.min css -->"|safeHTML}}
+    <link rel="stylesheet" href="{{"plugins/bootstrap/dist/css/bootstrap.min.css"|absURL}}">
+    {{"<!-- Animate.css -->"|safeHTML}}
+    <link rel="stylesheet" href="{{"plugins/animate-css/animate.css"|absURL}}">
+    {{"<!-- Magnific popup css -->"|safeHTML}}
+    <link rel="stylesheet" href="{{"plugins/magnific-popup/dist/magnific-popup.css"|absURL}}">
+    {{"<!-- Slick Carousel -->"|safeHTML}}
+    <link rel="stylesheet" href="{{"plugins/slick-carousel/slick/slick.css"|absURL}}">
+    <link rel="stylesheet" href="{{"plugins/slick-carousel/slick/slick-theme.css"|absURL}}">
+    {{"<!-- Main Stylesheet -->"|safeHTML}}
+    {{ $styles := resources.Get "css/style.css" | minify}}
+    <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">
+
+</head>

layouts/partials/header.html

-<!DOCTYPE html>
-<html class="no-js" lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en-US{{ end }}">
-    <head>
-		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-        <meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}">
-        {{ with .Site.Params.author }}<meta name="author" content="{{ . }}">{{ end }}
-		
-		{{ "<!-- Mobile Specific Meta -->" | safeHTML }}
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        {{ .Hugo.Generator }}
-		
-        <title> {{ .Title }} </title>
-		
-		{{"<!-- Favicon -->" |safeHTML}}
-		<link rel="shortcut icon" type="image/x-icon" href="{{ "images/favicon.ico" | absURL }}"/>
-		
-		{{"<!-- CSS -->"|safeHTML}}
-		{{"<!-- Fontawesome Icon font -->"|safeHTML}}
-        <link rel="stylesheet" href="{{"plugins/themefisher-font/style.css" | absURL}}">
-		{{"<!-- bootstrap.min css -->"|safeHTML}}
-        <link rel="stylesheet" href="{{"plugins/bootstrap/dist/css/bootstrap.min.css"|absURL}}">
-		{{"<!-- Animate.css -->"|safeHTML}}
-        <link rel="stylesheet" href="{{"plugins/animate-css/animate.css"|absURL}}">
-        {{"<!-- Magnific popup css -->"|safeHTML}}
-        <link rel="stylesheet" href="{{"plugins/magnific-popup/dist/magnific-popup.css"|absURL}}">
-		{{"<!-- Slick Carousel -->"|safeHTML}}
-        <link rel="stylesheet" href="{{"plugins/slick-carousel/slick/slick.css"|absURL}}">
-        <link rel="stylesheet" href="{{"plugins/slick-carousel/slick/slick-theme.css"|absURL}}">
-		{{"<!-- Main Stylesheet -->"|safeHTML}}
-        {{ $styles := resources.Get "css/style.css" | minify}}
-        <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">
-
-    </head>
-    {{"<!-- body start -->" | safeHTML}}
-    <body id="body" data-spy="scroll" data-target=".navbar" data-offset="52"></body>

layouts/partials/navigation.html

 {{"<!-- Fixed Navigation -->" | safeHTML}}
-<header id="navigation" class="navbar navigation">
+<nav id="navigation" class="navbar navbar-expand-lg navigation sticky-top">
-    <div class="container">
+        <div class="container">
-        <div class="navbar-header">
-            {{"<!-- responsive nav button -->" | safeHTML}}
-            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-                <span class="sr-only">Toggle navigation</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-            </button>
-            {{"<!-- /responsive nav button -->" | safeHTML}}
 
-            {{"<!-- logo -->" | safeHTML}}
+                {{"<!-- logo -->" | safeHTML}}
-            <a class="navbar-brand logo" href="{{ .Site.BaseURL | absURL }}">
+                <a class="navbar-brand logo" href="{{ .Site.BaseURL | absURL }}">
-                <img src="{{ .Site.Params.logo | absURL }}" alt="Logo" />
+                        <img src="{{ .Site.Params.logo | absURL }}" alt="Logo" />
-            </a>
+                        <span class="pl-2 font-weight-bold">{{ .Site.Title }}</span>
-            {{"<!-- /logo -->" | safeHTML}}
+                </a>
-        </div>
+                {{"<!-- /logo -->" | safeHTML}}
 
-        {{"<!-- main nav -->" | safeHTML}}
+                {{"<!-- responsive nav button -->" | safeHTML}}
-        {{ if .IsHome }}        
+                <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-        <nav class="collapse navbar-collapse navbar-right" role="Navigation">
+                        <span class="navbar-toggler-icon"></span>
-            <ul id="nav" class="nav navbar-nav navigation-menu">
+                </button>
-                <li><a data-scroll href="#body">{{ with $.Site.Params.home }}{{ . }}{{ end }}</a></li>
+                {{"<!-- /responsive nav button -->" | safeHTML}}
-                {{ range $.Site.Menus.nav }}
+                {{"<!-- main nav -->" | safeHTML}}
-                <li><a data-scroll href="#{{ .URL }}">{{ .Name }}</a></li>
+                {{ if .IsHome }}
-                {{ end }}
+                <div class="collapse navbar-collapse" id="navbarSupportedContent">
-            </ul>
+                        <ul class="navbar-nav ml-auto navigation-menu">
-        </nav>
+                                <li class="nav-item"><a class="nav-link" data-scroll href="#body">{{ with $.Site.Params.home }}{{ . }}{{ end }}</a></li>
-        {{ else }}
+                                {{ range $.Site.Menus.nav }}
-        <nav class="collapse navbar-collapse navbar-right" role="Navigation">
+                                <li class="nav-item"><a class="nav-link" data-scroll href="#{{ .URL }}">{{ .Name }}</a></li>
-            <ul id="nav" class="nav navbar-nav navigation-menu">
+                                {{ end }}
-                <li><a data-scroll href="{{ $.Site.BaseURL }}#body">{{ with $.Site.Params.home }}{{ . }}{{ end }}</a></li>
+                        </ul>
-                {{ range $.Site.Menus.nav }}
+                </div>
-                <li><a data-scroll href="{{ $.Site.BaseURL }}#{{ .URL }}">{{ .Name }}</a></li>
+                {{ else }}
+                <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                        <ul class="navbar-nav ml-auto navigation-menu">
+                                <li class="nav-item"><a class="nav-link" data-scroll href="{{ $.Site.BaseURL }}#body">{{ with $.Site.Params.home }}{{ . }}{{ end }}</a></li>
+                                {{ range $.Site.Menus.nav }}
+                                <li class="nav-item"><a class="nav-link" data-scroll href="{{ $.Site.BaseURL }}#{{ .URL }}">{{ .Name }}</a></li>
+                                {{ end }}
+                        </ul>
+                </div>
                 {{ end }}
-            </ul>
+                {{"<!-- /main nav -->" | safeHTML}}
-        </nav>
+        </div>
-        {{ end }}
-        {{"<!-- /main nav -->" | safeHTML}}
 
-    </div>
+</nav>
-</header>
+{{"<!-- End Fixed Navigation -->" | safeHTML}}
-{{"<!-- End Fixed Navigation -->" | safeHTML}}

layouts/partials/portfolio.html

 <section class="portfolio section" id="portfolio">
     <div class="container">
         <div class="row ">
-            <div class="col-lg-12">
+            <div class="col-xl-12">
                 {{"<!-- section title -->" | safeHTML}}
                 <div class="title text-center">
                     <h2> {{ with .Site.Data.portfolio.heading }} {{ . }} {{ end }} <span class="color">{{ with .Site.Data.portfolio.headingSpan }} {{ . }} {{ end }}</span></h2>
-                    <div class="border"></div>
+                    <div class="border-meghna"></div>
                 </div>
                 {{"<!-- /section title -->" | safeHTML}}
             </div>
         </div>
         <div class="row">
-            <div class="col-md-12">
+            <div class="col-lg-12">
                 <div class="portfolio-filter">
                     <button type="button" data-filter="all">All</button>
                     {{ range .Site.Data.portfolio.filterList }}
         <div class="row portfolio-items-wrapper">
             {{"<!-- portfolio item -->" | safeHTML}}
             {{ range .Site.Data.portfolio.portfolioItem }}
-            <div class="mix col-md-4 {{ .types }}">
+            <div class="mix col-lg-4 {{ .types }}">
                 <div class="portfolio-block">
-                    <img class="img-responsive" src="{{ .image | absURL}}" alt="work-image">
+                    <img class="img-fluid" src="{{ .image | absURL}}" alt="work-image">
                     <div class="caption">
 
                         <a class="search-icon image-popup" data-effect="mfp-with-zoom" href="{{ .image | absURL}}"

layouts/partials/pricing.html

         <div class="row">
 
             {{"<!-- section title -->" | safeHTML}}
-            <div class="title text-center wow fadeInDown" data-wow-duration="500ms">
+            <div class="col-lg-12">
-                <h2>{{ with .Site.Data.pricing.heading }} {{ . }} {{ end }}<span class="color"> {{ with .Site.Data.pricing.headingSpan }} {{ . }} {{ end }}</span></h2>
+                <div class="title text-center wow fadeInDown" data-wow-duration="500ms">
-                <div class="border"></div>
+                    <h2>{{ with .Site.Data.pricing.heading }} {{ . }} {{ end }}<span class="color"> {{ with .Site.Data.pricing.headingSpan }} {{ . }} {{ end }}</span></h2>
+                    <div class="border-meghna"></div>
+                </div>
             </div>
             {{"<!-- /section title -->" | safeHTML}}
 
             {{ range .Site.Data.pricing.pricingTable }}
             {{"<!-- single pricing table -->" | safeHTML}}
-            <div class="col-md-3 col-sm-6 col-xs-12 text-center wow fadeInUp" data-wow-duration="200ms">
+            <div class="col-lg-3 col-md-6 col-12 text-center wow fadeInUp" data-wow-duration="200ms">
                 <div class="price-item">
 
                     {{"<!-- plan name & value -->" | safeHTML}}

layouts/partials/service.html

 <section id="services" class="bg-one section">
     <div class="container">
         <div class="row">
-
+            <div class="col-lg-12">
-            {{"<!-- section title -->" | safeHTML }}
+                {{"<!-- section title -->" | safeHTML }}
-            <div class="title text-center wow fadeIn" data-wow-duration="500ms">
+                <div class="title text-center wow fadeIn" data-wow-duration="500ms">
-                <h2>{{ with .Site.Data.service.heading }} {{ . }} {{ end }}<span class="color">{{ with .Site.Data.service.headingSpan }} {{ . }} {{ end }}</span></h2>
+                    <h2>{{ with .Site.Data.service.heading }} {{ . }} {{ end }}<span class="color">{{ with .Site.Data.service.headingSpan }} {{ . }} {{ end }}</span></h2>
-                <div class="border"></div>
+                    <div class="border-meghna"></div>
+                </div>
             </div>
             {{"<!-- /section title -->" | safeHTML }}
 
             {{ range .Site.Data.service.serviceItem}}
             {{"<!-- Single Service Item -->" | safeHTML }}
-            <article class="col-md-4 col-sm-6 col-xs-12 wow fadeInUp" data-wow-duration="500ms">
+            <article class="col-lg-4 col-md-6 col-12 wow fadeInUp" data-wow-duration="500ms">
                 <div class="service-block text-center">
                     <div class="service-icon text-center">
                         <i class="{{ .icon }}"></i>

layouts/partials/share_post.html

+{{ $url := printf "%s" .Permalink | absLangURL }}
+<!-- Sharingbutton Facebook -->
+<div class="social-share">
+        <h4>Share:</h4>
+        <!-- Sharingbutton Facebook -->
+        <a class="resp-sharing-button__link" href="https://facebook.com/sharer/sharer.php?u={{ $url }}" target="_blank" rel="noopener" aria-label="">
+            <div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"/></svg>
+            </div>
+        </div>
+    </a>
+
+    <!-- Sharingbutton Twitter -->
+    <a class="resp-sharing-button__link" href="https://twitter.com/intent/tweet/?text={{ .Title }}&amp;url={{ $url }}" target="_blank" rel="noopener" aria-label="">
+        <div class="resp-sharing-button resp-sharing-button--twitter resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.44 4.83c-.8.37-1.5.38-2.22.02.93-.56.98-.96 1.32-2.02-.88.52-1.86.9-2.9 1.1-.82-.88-2-1.43-3.3-1.43-2.5 0-4.55 2.04-4.55 4.54 0 .36.03.7.1 1.04-3.77-.2-7.12-2-9.36-4.75-.4.67-.6 1.45-.6 2.3 0 1.56.8 2.95 2 3.77-.74-.03-1.44-.23-2.05-.57v.06c0 2.2 1.56 4.03 3.64 4.44-.67.2-1.37.2-2.06.08.58 1.8 2.26 3.12 4.25 3.16C5.78 18.1 3.37 18.74 1 18.46c2 1.3 4.4 2.04 6.97 2.04 8.35 0 12.92-6.92 12.92-12.93 0-.2 0-.4-.02-.6.9-.63 1.96-1.22 2.56-2.14z"/></svg>
+        </div>
+    </div>
+</a>
+
+<!-- Sharingbutton Google+ -->
+<a class="resp-sharing-button__link" href="https://plus.google.com/share?url={{ $url }}" target="_blank" rel="noopener" aria-label="">
+    <div class="resp-sharing-button resp-sharing-button--google resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.37 12.93c-.73-.52-1.4-1.27-1.4-1.5 0-.43.03-.63.98-1.37 1.23-.97 1.9-2.23 1.9-3.57 0-1.22-.36-2.3-1-3.05h.5c.1 0 .2-.04.28-.1l1.36-.98c.16-.12.23-.34.17-.54-.07-.2-.25-.33-.46-.33H7.6c-.66 0-1.34.12-2 .35-2.23.76-3.78 2.66-3.78 4.6 0 2.76 2.13 4.85 5 4.9-.07.23-.1.45-.1.66 0 .43.1.83.33 1.22h-.08c-2.72 0-5.17 1.34-6.1 3.32-.25.52-.37 1.04-.37 1.56 0 .5.13.98.38 1.44.6 1.04 1.84 1.86 3.55 2.28.87.23 1.82.34 2.8.34.88 0 1.7-.1 2.5-.34 2.4-.7 3.97-2.48 3.97-4.54 0-1.97-.63-3.15-2.33-4.35zm-7.7 4.5c0-1.42 1.8-2.68 3.9-2.68h.05c.45 0 .9.07 1.3.2l.42.28c.96.66 1.6 1.1 1.77 1.8.05.16.07.33.07.5 0 1.8-1.33 2.7-3.96 2.7-1.98 0-3.54-1.23-3.54-2.8zM5.54 3.9c.33-.38.75-.58 1.23-.58h.05c1.35.05 2.64 1.55 2.88 3.35.14 1.02-.08 1.97-.6 2.55-.32.37-.74.56-1.23.56h-.03c-1.32-.04-2.63-1.6-2.87-3.4-.13-1 .08-1.92.58-2.5zM23.5 9.5h-3v-3h-2v3h-3v2h3v3h2v-3h3"/></svg>
+    </div>
+</div>
+</a>
+
+<!-- Sharingbutton E-Mail -->
+<a class="resp-sharing-button__link" href="mailto:?subject={{ .Title }}&amp;body={{ $url }}" target="_self" rel="noopener" aria-label="">
+    <div class="resp-sharing-button resp-sharing-button--email resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 4H2C.9 4 0 4.9 0 6v12c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7.25 14.43l-3.5 2c-.08.05-.17.07-.25.07-.17 0-.34-.1-.43-.25-.14-.24-.06-.55.18-.68l3.5-2c.24-.14.55-.06.68.18.14.24.06.55-.18.68zm4.75.07c-.1 0-.2-.03-.27-.08l-8.5-5.5c-.23-.15-.3-.46-.15-.7.15-.22.46-.3.7-.14L12 13.4l8.23-5.32c.23-.15.54-.08.7.15.14.23.07.54-.16.7l-8.5 5.5c-.08.04-.17.07-.27.07zm8.93 1.75c-.1.16-.26.25-.43.25-.08 0-.17-.02-.25-.07l-3.5-2c-.24-.13-.32-.44-.18-.68s.44-.32.68-.18l3.5 2c.24.13.32.44.18.68z"/></svg>
+    </div>
+</div>
+</a>
+
+<!-- Sharingbutton Reddit -->
+<a class="resp-sharing-button__link" href="https://reddit.com/submit/?url={{ $url }}&amp;resubmit=true&amp;title={{ .Title }}" target="_blank" rel="noopener" aria-label="">
+    <div class="resp-sharing-button resp-sharing-button--reddit resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M24 11.5c0-1.65-1.35-3-3-3-.96 0-1.86.48-2.42 1.24-1.64-1-3.75-1.64-6.07-1.72.08-1.1.4-3.05 1.52-3.7.72-.4 1.73-.24 3 .5C17.2 6.3 18.46 7.5 20 7.5c1.65 0 3-1.35 3-3s-1.35-3-3-3c-1.38 0-2.54.94-2.88 2.22-1.43-.72-2.64-.8-3.6-.25-1.64.94-1.95 3.47-2 4.55-2.33.08-4.45.7-6.1 1.72C4.86 8.98 3.96 8.5 3 8.5c-1.65 0-3 1.35-3 3 0 1.32.84 2.44 2.05 2.84-.03.22-.05.44-.05.66 0 3.86 4.5 7 10 7s10-3.14 10-7c0-.22-.02-.44-.05-.66 1.2-.4 2.05-1.54 2.05-2.84zM2.3 13.37C1.5 13.07 1 12.35 1 11.5c0-1.1.9-2 2-2 .64 0 1.22.32 1.6.82-1.1.85-1.92 1.9-2.3 3.05zm3.7.13c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm9.8 4.8c-1.08.63-2.42.96-3.8.96-1.4 0-2.74-.34-3.8-.95-.24-.13-.32-.44-.2-.68.15-.24.46-.32.7-.18 1.83 1.06 4.76 1.06 6.6 0 .23-.13.53-.05.67.2.14.23.06.54-.18.67zm.2-2.8c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm5.7-2.13c-.38-1.16-1.2-2.2-2.3-3.05.38-.5.97-.82 1.6-.82 1.1 0 2 .9 2 2 0 .84-.53 1.57-1.3 1.87z"/></svg>
+    </div>
+</div>
+</a>
+
+<!-- Sharingbutton WhatsApp -->
+<a class="resp-sharing-button__link" href="whatsapp://send?text={{ .Title }}%20{{ $url }}" target="_blank" rel="noopener" aria-label="">
+    <div class="resp-sharing-button resp-sharing-button--whatsapp resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.1 3.9C17.9 1.7 15 .5 12 .5 5.8.5.7 5.6.7 11.9c0 2 .5 3.9 1.5 5.6L.6 23.4l6-1.6c1.6.9 3.5 1.3 5.4 1.3 6.3 0 11.4-5.1 11.4-11.4-.1-2.8-1.2-5.7-3.3-7.8zM12 21.4c-1.7 0-3.3-.5-4.8-1.3l-.4-.2-3.5 1 1-3.4L4 17c-1-1.5-1.4-3.2-1.4-5.1 0-5.2 4.2-9.4 9.4-9.4 2.5 0 4.9 1 6.7 2.8 1.8 1.8 2.8 4.2 2.8 6.7-.1 5.2-4.3 9.4-9.5 9.4zm5.1-7.1c-.3-.1-1.7-.9-1.9-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-.9 1.1-.2.2-.3.2-.6.1s-1.2-.5-2.3-1.4c-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6s.3-.3.4-.5c.2-.1.3-.3.4-.5.1-.2 0-.4 0-.5C10 9 9.3 7.6 9 7c-.1-.4-.4-.3-.5-.3h-.6s-.4.1-.7.3c-.3.3-1 1-1 2.4s1 2.8 1.1 3c.1.2 2 3.1 4.9 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 1.9-1.3.2-.7.2-1.2.2-1.3-.1-.3-.3-.4-.6-.5z"/></svg>
+    </div>
+</div>
+</a>
+
+<!-- Sharingbutton Telegram -->
+<a class="resp-sharing-button__link" href="https://telegram.me/share/url?text={{ .Title }}&amp;url={{ $url }}" target="_blank" rel="noopener" aria-label="">
+    <div class="resp-sharing-button resp-sharing-button--telegram resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M.707 8.475C.275 8.64 0 9.508 0 9.508s.284.867.718 1.03l5.09 1.897 1.986 6.38a1.102 1.102 0 0 0 1.75.527l2.96-2.41a.405.405 0 0 1 .494-.013l5.34 3.87a1.1 1.1 0 0 0 1.046.135 1.1 1.1 0 0 0 .682-.803l3.91-18.795A1.102 1.102 0 0 0 22.5.075L.706 8.475z"/></svg>
+    </div>
+</div>
+</a>
+
+</div>

layouts/partials/skill.html

     <div class="container">
         <div class="row">
             {{"<!-- section title -->" | safeHTML }}
-            <div class="col-md-12">
+            <div class="col-lg-12">
                 <div class="title text-center">
                     <h2>{{ with .Site.Data.skill.heading}} {{ . }} {{ end }} <span class="color">{{ with .Site.Data.skill.headingSpan }} {{ . }} {{ end }}</span></h2>
-                    <div class="border"></div>
+                    <div class="border-meghna"></div>
                 </div>
             </div>
             {{"<!-- /section title -->" | safeHTML }}
         </div>
         <div class="row">
-            <div class="col-md-6">
+            <div class="col-lg-6">
                 {{ with .Site.Data.skill.title }} <h2> {{ . }} </h2> {{ end }}
                 {{ with .Site.Data.skill.content }} <p> {{ . }} </p> {{ end }}
-                <img class="img-responsive" src="{{ .Site.Data.skill.image | absURL }}" alt="image">
+                <img class="img-fluid" src="{{ .Site.Data.skill.image | absURL }}" alt="image">
             </div>
-            <div class="col-md-6">
+            <div class="col-lg-6">
                 <ul class="skill-bar">
                     {{ range .Site.Data.skill.skillItem }}
                     <li>

layouts/partials/team.html

 <section id="our-team" class="section">
     <div class="container">
         <div class="row">
-
+            <div class="col-lg-12">
-            {{"<!-- section title -->" | safeHTML}}
+                {{"<!-- section title -->" | safeHTML}}
-            <div class="title text-center wow fadeInUp" data-wow-duration="500ms">
+                <div class="title text-center wow fadeInUp" data-wow-duration="500ms">
-                <h2>{{ with .Site.Data.team.heading }} {{ . }} {{ end }} <span class="color">{{ with .Site.Data.team.headingSpan }} {{ . }} {{ end }}</span></h2>
+                    <h2>{{ with .Site.Data.team.heading }} {{ . }} {{ end }} <span class="color">{{ with .Site.Data.team.headingSpan }} {{ . }} {{ end }}</span></h2>
-                <div class="border"></div>
+                    <div class="border-meghna"></div>
+                </div>
             </div>
             {{"<!-- /section title -->" | safeHTML}}
 
             {{ range .Site.Data.team.teamMember}}
             {{"<!-- team member -->" | safeHTML}}
-            <div class="col-md-3 col-sm-6 col-xs-12  wow fadeInDown" data-wow-duration="500ms">
+            <div class="col-lg-3 col-md-6 col-12 wow fadeInDown" data-wow-duration="500ms">
                 <div class="team-member">
                     <div class="member-photo">
                         {{"<!-- member photo -->" | safeHTML}}
-                        <img class="img-responsive" src="{{ .image | absURL }}" alt="Meghna">
+                        <img class="img-fluid" src="{{ .image | absURL }}" alt="Meghna">
 
                         {{"<!-- member social profile -->" | safeHTML}}
                         <div class="mask">
                             <ul class="list-inline">
                                 {{ range .socialIcon }}
-                                <li><a href="#"><i class="{{ .icon }}"></i></a></li>
+                                <li class="list-inline-item"><a href="#"><i class="{{ .icon }}"></i></a></li>
                                 {{ end }}
                             </ul>
                         </div>

layouts/partials/testimonial.html

 <section id="testimonial" class="testimonial overly section bg-2" style='background-image: url("{{ .Site.Data.testimonial.bgImage | absURL }}")'>
     <div class="container">
         <div class="row">
-            <div class="col-lg-12">
+            <div class="col-xl-12">
                 {{"<!-- testimonial wrapper -->" | safeHTML}}
                 <div id="testimonials" class="wow fadeInUp" data-wow-duration="500ms" data-wow-delay="100ms">
                     {{ range .Site.Data.testimonial.testimonialItem }}
 
                         {{"<!-- client photo -->" | safeHTML}}
                         <div class="client-thumb">
-                            <img src="{{ .image | absURL }}" class="img-responsive" alt="Meghna">
+                            <img src="{{ .image | absURL }}" class="img-fluid" alt="Meghna">
                         </div>
 
                         {{"<!-- client info -->" | safeHTML}}
                     </div>
                 </div>
             </div>
-        </div>
-    </div>
 </section>
 {{"<!-- /testimonial -->" | safeHTML}}
 {{ end }}

static/plugins/bootstrap/dist/js/npm.js

-// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
-require('../../js/transition.js')
-require('../../js/alert.js')
-require('../../js/button.js')
-require('../../js/carousel.js')
-require('../../js/collapse.js')
-require('../../js/dropdown.js')
-require('../../js/modal.js')
-require('../../js/tooltip.js')
-require('../../js/popover.js')
-require('../../js/scrollspy.js')
-require('../../js/tab.js')
-require('../../js/affix.js')