$(".menu-btn").on("click", function(ob) {
    ob.stopPropagation();
    $("body").toggleClass("on-toggle");
});

$(document).ready(function(){
    $('.menu-btn').click(function () {
        if(!$(".head_social").hasClass("show")) {
            setTimeout(function() {
                $(".head_social").toggleClass('show');
            }, 0);
        };
        if($(".head_social").hasClass("show")) {
            setTimeout(function() {
                $(".head_social").toggleClass('show');
            }, 450);
        }
    });

});

////////////////...Menu-hover...../////////////////////////////////////////////////////////////////
const triggers = document.querySelectorAll('.nav-link');
const highlight = document.createElement('span');
highlight.classList.add('highlight');
document.body.append(highlight);
function highlightLink() {
    const linkCoords = this.getBoundingClientRect();
    console.log(linkCoords);

    const coords = {
        width: linkCoords.width,
        height: linkCoords.height,
        top: linkCoords.top + window.scrollY,
        left: linkCoords.left + window.scrollX
    };

    highlight.style.width = `${coords.width}px`;
    highlight.style.height = `${coords.height}px`;
    highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
}
triggers.forEach(a => a.addEventListener('mouseenter', highlightLink));
triggers.forEach(a => a.addEventListener('focus', highlightLink));
////////////////...Menu-hover-end...../////////////////////////////////////////////////////////////////


////////////...WOW-effect...../////////////////////////////////////////////////////////////////
wow = new WOW(
    {
        boxClass:     'wow',
        animateClass: 'animated',
        offset:       50,
        mobile:       true,
        live:         true
    }
)
wow.init();
////////////....WOW-effect-end...../////////////////////////////////////////////////////////////////

var menuBtn = document.querySelector('.menu-btn');
var nav = document.querySelector('nav');
var lineOne = document.querySelector('nav .menu-btn .line--1');
var lineTwo = document.querySelector('nav .menu-btn .line--2');
var lineThree = document.querySelector('nav .menu-btn .line--3');
var link = document.querySelector('nav .nav-links');
menuBtn.addEventListener('click', () => {
    nav.classList.toggle('nav-open');
lineOne.classList.toggle('line-cross');
lineTwo.classList.toggle('line-fade-out');
lineThree.classList.toggle('line-cross');
link.classList.toggle('fade-in');
})