/* Services Page Specific Styles */

.service-section {
  scroll-margin-top: 100px; /* For smooth scrolling with fixed header */
}

.service-text h2 {
  font-size: 2rem;
}

.service-text p {
  line-height: 1.7;
  margin-bottom: 1.2rem;
}

.service-text ul {
  list-style-type: disc;
}

.service-text strong {
  color: var(--primary-dark);
}

/* Image hover effect */
.service-image {
  overflow: hidden;
}

.service-image img {
  transition: transform 0.5s ease;
}

.service-image img:hover {
  transform: scale(1.03);
}

/* Animate sections on scroll */
.service-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.service-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Additional animation for hover on service navigation */
.services-nav a {
  position: relative;
  overflow: hidden;
}

.services-nav a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary);
  transition: width 0.3s ease;
}

.services-nav a:hover:after {
  width: 100%;
}

/* Enhance CTA section */
.cta {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

/* Add JavaScript for scroll animations */
document.addEventListener('DOMContentLoaded', function() {
  // Animate services sections on scroll
  const serviceSections = document.querySelectorAll('.service-section');
  
  function checkSections() {
    serviceSections.forEach(section => {
      const sectionTop = section.getBoundingClientRect().top;
      if (sectionTop < window.innerHeight * 0.75) {
        section.classList.add('visible');
      }
    });
  }
  
  // Check sections on initial load
  checkSections();
  
  // Check sections on scroll
  window.addEventListener('scroll', checkSections);
  
  // Smooth scrolling for navigation
  document.querySelectorAll('.services-nav a').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
      e.preventDefault();
      const targetId = this.getAttribute('href');
      const targetElement = document.querySelector(targetId);
      
      if (targetElement) {
        window.scrollTo({
          top: targetElement.offsetTop - 80,
          behavior: 'smooth'
        });
      }
    });
  });
});