document.addEventListener("DOMContentLoaded", function () {

  const openNav = document.querySelector(".mobile-btn")
  const closeNav = document.querySelector(".mobile-btn-close")
  const elNav = document.querySelector(".mobile-fullscreen-menu")
  
  openNav.addEventListener("click", function() {
    elNav.style.display = 'flex'
    setTimeout(() => {
       elNav.style.opacity = '1'
    }, 10)
  })
  
  closeNav.addEventListener("click", function() {
    elNav.style.opacity = '0'
     setTimeout(() => {
       elNav.style.display = 'none'
    }, 400)
  })

})

document.addEventListener("DOMContentLoaded", function () {
  
  const myNav = document.querySelector(".my--inner--nav");
  const openServices = document.querySelectorAll(".dropdown--toggle.services");
  const openProduct = document.querySelectorAll(".dropdown--toggle.product");
  const openAbout = document.querySelectorAll(".dropdown--toggle.about");
  const navLink = document.querySelectorAll('.nav--link');

  function updatePadding() {
    
    const isServicesOpen = [...openServices].some((el) => el.classList.contains("w--open"));
    const isProductOpen = [...openProduct].some((el) => el.classList.contains("w--open"));
    const isAboutOpen = [...openAbout].some((el) => el.classList.contains("w--open"));

    if (window.innerWidth > 991) {
        if (isProductOpen) {
            myNav.style.paddingBottom = "365px";
        } else if (isServicesOpen) {
            myNav.style.paddingBottom = "140px";
        } else if (isAboutOpen) {
            myNav.style.paddingBottom = "140px";
        } else {
            myNav.style.paddingBottom = "13px";
        }
    }

    if (isProductOpen) {
        openProduct.forEach((el) => el.style.removeProperty("opacity"));
        openServices.forEach((el) => (el.style.opacity = "0.6"));
        openAbout.forEach((el) => (el.style.opacity = "0.6"));
    } else if (isServicesOpen) {
        openServices.forEach((el) => el.style.removeProperty("opacity"));
        openProduct.forEach((el) => (el.style.opacity = "0.6"));
        openAbout.forEach((el) => (el.style.opacity = "0.6"));
    } else if (isAboutOpen) {
        openAbout.forEach((el) => el.style.removeProperty("opacity"));
        openServices.forEach((el) => (el.style.opacity = "0.6"));
        openProduct.forEach((el) => (el.style.opacity = "0.6"));
    } else {
        openServices.forEach((el) => el.style.removeProperty("opacity"));
        openProduct.forEach((el) => el.style.removeProperty("opacity"));
        openAbout.forEach((el) => el.style.removeProperty("opacity"));
    }

    if (isProductOpen || isServicesOpen || isAboutOpen) {
        navLink.forEach((el) => (el.style.opacity = "0.6"));
    } else {
        navLink.forEach((el) => el.style.removeProperty("opacity"));
    }
  }

  function observeDropdown(dropdowns) {
    dropdowns.forEach((mega) => {
        const observer = new MutationObserver(updatePadding);
        observer.observe(mega, { attributes: true, attributeFilter: ["class"] });
    });
  }

  observeDropdown(openServices);
  observeDropdown(openProduct);
  observeDropdown(openAbout);

});