                // Initialize AOS animation library
        AOS.init({
            duration: 800,
            easing: 'ease-in-out',
            once: true,
            offset: 100
        });
                // Header scroll effect
        window.addEventListener('scroll', function() {
            const header = document.getElementById('mainHeader');
            if (window.scrollY > 50) {
                header.classList.add('header-scrolled');
            } else {
                header.classList.remove('header-scrolled');
            }
        });
      document.getElementById("cta").addEventListener("click", function() {
      // This opens the contact page
      window.location.href = "https://api.whatsapp.com/send/?phone=%2B91889992332"; // Change this to your actual page
    });
      document.getElementById("button").addEventListener("click", function() {
      // This opens the contact page
      window.location.href = "https://visuotech.com/"; // Change this to your actual page
    });
    document.getElementById("Contact-us-btn").addEventListener("click", function() {
      window.location.href = "https://api.whatsapp.com/send/?phone=%2B91889992332";
    });
          document.getElementById("CartBtn").addEventListener("click", function() {
      // This opens the contact page
      window.location.href = "https://visuotech.com/"; // Change this to your actual page
    });
        // Mobile menu toggle
        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
        const mainNav = document.getElementById('mainNav');
        
        mobileMenuBtn.addEventListener('click', () => {
            mainNav.classList.toggle('active');
        });
        
        // Smooth scrolling for anchor links with offset for fixed header
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                if (mainNav.classList.contains('active')) {
                    mainNav.classList.remove('active');
                }
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                const headerHeight = document.querySelector('header').offsetHeight;
                const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - headerHeight;
                
                window.scrollTo({
                    top: targetPosition,
                    behavior: 'smooth'
                });
            });
        });
        // Improved button interactions
document.querySelectorAll('.cta, .button').forEach(button => {
  button.addEventListener('mousedown', () => {
    button.style.transform = 'scale(0.95)';
  });
  button.addEventListener('mouseup', () => {
    button.style.transform = '';
  });
  button.addEventListener('mouseleave', () => {
    button.style.transform = '';
  });
});

// Lazy load map iframe
const mapContainer = document.querySelector('.map-container');
const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    const iframe = mapContainer.querySelector('iframe');
    iframe.src = iframe.dataset.src;
    observer.unobserve(mapContainer);
  }
}, { threshold: 0.1 });

observer.observe(mapContainer);
// Lazy load images
document.addEventListener("DOMContentLoaded", function() {
  const lazyImages = [].slice.call(document.querySelectorAll("img[data-src]"));
  
  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.add("loaded");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  }
});
document.getElementById('contactForm').addEventListener('submit', function(e) {
  e.preventDefault();
  
  // Get form elements
  const nameInput = document.getElementById('name');
  const emailInput = document.getElementById('email');
  const messageInput = document.getElementById('message');
  
  // Validate inputs
  let isValid = true;
  
  if (!nameInput.value.trim()) {
    nameInput.classList.add('invalid');
    isValid = false;
  }
  
  if (!emailInput.value.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailInput.value)) {
    emailInput.classList.add('invalid');
    isValid = false;
  }
  
  if (!messageInput.value.trim()) {
    messageInput.classList.add('invalid');
    isValid = false;
  }
  
  if (isValid) {
    // Submit form
    this.classList.add('loading');
    // Add your form submission logic here
  }
});

// Remove invalid class when user starts typing
document.querySelectorAll('.input, .textarea-input').forEach(input => {
  input.addEventListener('input', function() {
    this.classList.remove('invalid');
  });
});
document.addEventListener('DOMContentLoaded', function() {
  const iframe = document.querySelector('.map-container iframe');
  const zoomIn = document.getElementById('zoom-in');
  const zoomOut = document.getElementById('zoom-out');
  const locateMe = document.getElementById('locate-me');
  
  // These would work with a proper Google Maps API implementation
  // For now they're just visual indicators
  zoomIn.addEventListener('click', function() {
    this.innerHTML = '<i class="fas fa-check"></i>';
    setTimeout(() => {
      this.innerHTML = '<i class="fas fa-plus"></i>';
    }, 1000);
  });
  
  zoomOut.addEventListener('click', function() {
    this.innerHTML = '<i class="fas fa-check"></i>';
    setTimeout(() => {
      this.innerHTML = '<i class="fas fa-minus"></i>';
    }, 1000);
  });
  
  locateMe.addEventListener('click', function() {
    if (navigator.geolocation) {
      this.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
      navigator.geolocation.getCurrentPosition(function(position) {
        const lat = position.coords.latitude;
        const lng = position.coords.longitude;
        // In a real implementation, you'd update the iframe src here
        locateMe.innerHTML = '<i class="fas fa-check"></i>';
        setTimeout(() => {
          locateMe.innerHTML = '<i class="fas fa-location-arrow"></i>';
        }, 1000);
      });
    } else {
      this.innerHTML = '<i class="fas fa-times"></i>';
      setTimeout(() => {
        this.innerHTML = '<i class="fas fa-location-arrow"></i>';
      }, 1000);
    }
  });
});