.elementor-651 .elementor-element.elementor-element-593d07d{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.5;--z-index:2;}.elementor-651 .elementor-element.elementor-element-593d07d:not(.elementor-motion-effects-element-type-background), .elementor-651 .elementor-element.elementor-element-593d07d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF00;}.elementor-651 .elementor-element.elementor-element-593d07d::before, .elementor-651 .elementor-element.elementor-element-593d07d > .elementor-background-video-container::before, .elementor-651 .elementor-element.elementor-element-593d07d > .e-con-inner > .elementor-background-video-container::before, .elementor-651 .elementor-element.elementor-element-593d07d > .elementor-background-slideshow::before, .elementor-651 .elementor-element.elementor-element-593d07d > .e-con-inner > .elementor-background-slideshow::before, .elementor-651 .elementor-element.elementor-element-593d07d > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-651 .elementor-element.elementor-element-0f2e326{--display:flex;--flex-direction:row-reverse;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap-reverse;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:-30px;}.elementor-651 .elementor-element.elementor-element-82706d8{width:100%;max-width:100%;--dropdown-animation-name:etheme-elementor-menu-dropdown-fadeInUp;--menu-item-spacing:27px;}.elementor-651 .elementor-element.elementor-element-82706d8 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-651 .elementor-element.elementor-element-82706d8 .etheme-elementor-nav-menu-item-parent{font-family:"Helvetica", Sans-serif;font-size:14px;text-transform:uppercase;}.elementor-651 .elementor-element.elementor-element-82706d8 .etheme-elementor-nav-menu-item-parent .elementor-item{fill:#FFFFFF;color:#FFFFFF;border-style:none;padding:0px 0px 0px 0px;}.elementor-651 .elementor-element.elementor-element-82706d8 .etheme-elementor-nav-menu-item-parent .elementor-item:hover{fill:#0010DB;color:#0010DB;}.elementor-651 .elementor-element.elementor-element-82706d8 li:has(> .etheme-elementor-nav-menu-item-parent):hover > .etheme-elementor-nav-menu-item-parent .elementor-item{color:#0010DB;}.elementor-651 .elementor-element.elementor-element-82706d8 .etheme-elementor-nav-menu-item-parent .elementor-item.elementor-item-active{fill:#0010DB;color:#0010DB;}.elementor-651 .elementor-element.elementor-element-82706d8 li:has(> .etheme-elementor-nav-menu-item-parent .elementor-item.elementor-item-active) > .etheme-elementor-nav-menu-item-parent .elementor-item{color:#0010DB;}.elementor-651 .elementor-element.elementor-element-82706d8 .item-design-dropdown .nav-sublist-dropdown ul>li>.etheme-elementor-nav-menu-item{fill:#000000;color:#000000;}.elementor-651 .elementor-element.elementor-element-82706d8 .item-design-dropdown .nav-sublist-dropdown ul>li>.etheme-elementor-nav-menu-item:hover{fill:#555;color:#555;}.elementor-651 .elementor-element.elementor-element-82706d8 .item-design-dropdown .nav-sublist-dropdown ul>.current-menu-item>a{fill:#555;color:#555;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){.elementor-651 .elementor-element.elementor-element-82706d8{--menu-item-spacing:12px;}}@media(min-width:768px){.elementor-651 .elementor-element.elementor-element-0f2e326{--width:100%;}}/* Start custom CSS for theme-etheme_nav_menu, class: .elementor-element-82706d8 */import { useRef, useEffect, useState } from 'react';
import './GooeyNav.css';

const GooeyNav = ({
  items,
  animationTime = 600,
  particleCount = 15,
  particleDistances = [90, 10],
  particleR = 100,
  timeVariance = 300,
  colors = [1, 2, 3, 1, 2, 3, 1, 4],
  initialActiveIndex = 0
}) => {
  const containerRef = useRef(null);
  const navRef = useRef(null);
  const filterRef = useRef(null);
  const textRef = useRef(null);
  const [activeIndex, setActiveIndex] = useState(initialActiveIndex);

  const noise = (n = 1) => n / 2 - Math.random() * n;

  const getXY = (distance, pointIndex, totalPoints) => {
    const angle = ((360 + noise(8)) / totalPoints) * pointIndex * (Math.PI / 180);
    return [distance * Math.cos(angle), distance * Math.sin(angle)];
  };

  const createParticle = (i, t, d, r) => {
    let rotate = noise(r / 10);
    return {
      start: getXY(d[0], particleCount - i, particleCount),
      end: getXY(d[1] + noise(7), particleCount - i, particleCount),
      time: t,
      scale: 1 + noise(0.2),
      color: colors[Math.floor(Math.random() * colors.length)],
      rotate: rotate > 0 ? (rotate + r / 20) * 10 : (rotate - r / 20) * 10
    };
  };

  const makeParticles = element => {
    const d = particleDistances;
    const r = particleR;
    const bubbleTime = animationTime * 2 + timeVariance;
    element.style.setProperty('--time', `${bubbleTime}ms`);

    for (let i = 0; i < particleCount; i++) {
      const t = animationTime * 2 + noise(timeVariance * 2);
      const p = createParticle(i, t, d, r);
      element.classList.remove('active');

      setTimeout(() => {
        const particle = document.createElement('span');
        const point = document.createElement('span');
        particle.classList.add('particle');
        particle.style.setProperty('--start-x', `${p.start[0]}px`);
        particle.style.setProperty('--start-y', `${p.start[1]}px`);
        particle.style.setProperty('--end-x', `${p.end[0]}px`);
        particle.style.setProperty('--end-y', `${p.end[1]}px`);
        particle.style.setProperty('--time', `${p.time}ms`);
        particle.style.setProperty('--scale', `${p.scale}`);
        particle.style.setProperty('--color', `var(--color-${p.color}, white)`);
        particle.style.setProperty('--rotate', `${p.rotate}deg`);

        point.classList.add('point');
        particle.appendChild(point);
        element.appendChild(particle);
        requestAnimationFrame(() => {
          element.classList.add('active');
        });
        setTimeout(() => {
          try {
            element.removeChild(particle);
          } catch {
            // Do nothing
          }
        }, t);
      }, 30);
    }
  };

  const updateEffectPosition = element => {
    if (!containerRef.current || !filterRef.current || !textRef.current) return;
    const containerRect = containerRef.current.getBoundingClientRect();
    const pos = element.getBoundingClientRect();

    const styles = {
      left: `${pos.x - containerRect.x}px`,
      top: `${pos.y - containerRect.y}px`,
      width: `${pos.width}px`,
      height: `${pos.height}px`
    };
    Object.assign(filterRef.current.style, styles);
    Object.assign(textRef.current.style, styles);
    textRef.current.innerText = element.innerText;
  };

  const handleClick = (e, index) => {
    const liEl = e.currentTarget;
    if (activeIndex === index) return;

    setActiveIndex(index);
    updateEffectPosition(liEl);

    if (filterRef.current) {
      const particles = filterRef.current.querySelectorAll('.particle');
      particles.forEach(p => filterRef.current.removeChild(p));
    }

    if (textRef.current) {
      textRef.current.classList.remove('active');

      void textRef.current.offsetWidth;
      textRef.current.classList.add('active');
    }

    if (filterRef.current) {
      makeParticles(filterRef.current);
    }
  };

  const handleKeyDown = (e, index) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      const liEl = e.currentTarget.parentElement;
      if (liEl) {
        handleClick({ currentTarget: liEl }, index);
      }
    }
  };

  useEffect(() => {
    if (!navRef.current || !containerRef.current) return;
    const activeLi = navRef.current.querySelectorAll('li')[activeIndex];
    if (activeLi) {
      updateEffectPosition(activeLi);
      textRef.current?.classList.add('active');
    }

    const resizeObserver = new ResizeObserver(() => {
      const currentActiveLi = navRef.current?.querySelectorAll('li')[activeIndex];
      if (currentActiveLi) {
        updateEffectPosition(currentActiveLi);
      }
    });

    resizeObserver.observe(containerRef.current);
    return () => resizeObserver.disconnect();
  }, [activeIndex]);

  return (
    <div className="gooey-nav-container" ref={containerRef}>
      <nav>
        <ul ref={navRef}>
          {items.map((item, index) => (
            <li key={index} className={activeIndex === index ? 'active' : ''}>
              <a href={item.href} onClick={e => handleClick(e, index)} onKeyDown={e => handleKeyDown(e, index)}>
                {item.label}
              </a>
            </li>
          ))}
        </ul>
      </nav>
      <span className="effect filter" ref={filterRef} />
      <span className="effect text" ref={textRef} />
    </div>
  );
};

export default GooeyNav;/* End custom CSS */