<?php
include('assets/inc/header.php');
?>

 <section class="tools">
    <h1 data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">Tools, News, Memberships, Scholarships, Haul off <br> and Compost Network, Policy Advocacy  to  <br> ensure horses are welcome in the <br> modern  and changing world.</h1>
    <p data-aos="fade-up" data-aos-duration="1000" data-aos-delay="400">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
    <div class="card-box scroll-container" data-aos="fade-up">
  <div class="cards" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="600">
    <img src="assets/images/s-1.png" alt="">
    <a href="education.php"><img src="assets/images/arrow.png" alt="" class="arrow"> </a>
    <h3>Education via Newsletter</h3>
    <p>8 years ago we were targeted as equestrians for our carelessness with local water runoff.    </p>
  </div>
  <div class="cards" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="800">
    <img src="assets/images/s-5.png" alt="">
    <a href="seminars.php"><img src="assets/images/arrow.png" alt="" class="arrow"> </a>
    <h3>Onsite Seminars</h3>
    <p> Seminars scheduled for 45 minutes have regularly gone on for a few hours, with parents  ...</p>
  </div>
  <div class="cards" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="1000">
    <img src="assets/images/s-4.png" alt="">
    <a href="membership.php"><img src="assets/images/arrow.png" alt="" class="arrow"> </a>
    <h3>Membership</h3>
    <p>Equestrians are unrepresented at key public policy meetings.  We know, because we go...  </p>
  </div>
  <div class="cards" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="600">
    <img src="assets/images/s-3.png" alt="">
    <img src="assets/images/arrow.png" alt="" class="arrow">
    <h3>Scholarships</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
  </div>
  <div class="cards" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="600">
    <img src="assets/images/s-2.png" alt="">
    <img src="assets/images/arrow.png" alt="" class="arrow">
    <h3>Policy Advocacy</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </div>
  <div class="cards" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="800">
    <img src="assets/images/s-6.png" alt="">
    <img src="assets/images/arrow.png" alt="" class="arrow">
    <h3>Composting Network</h3>
    <p>The Composting Network : Every barn should either be composting onsite.</p>
  </div>
</div>

  </section>


<?php
include('assets/inc/footer.php');
?>

<script>
        
    document.querySelectorAll('.scroll-container').forEach(scrollContainer => {
  let isDown = false;
  let startX = 0;
  let scrollLeft = 0;
  let isDragging = false;

  scrollContainer.addEventListener('mousedown', (e) => {
    e.preventDefault();
    isDown = true;
    isDragging = false;
    scrollContainer.style.cursor = 'grabbing';
    startX = e.pageX - scrollContainer.offsetLeft;
    scrollLeft = scrollContainer.scrollLeft;
  });

  scrollContainer.addEventListener('mouseleave', () => {
    isDown = false;
    scrollContainer.style.cursor = 'grab';
  });

  scrollContainer.addEventListener('mouseup', () => {
    isDown = false;
    setTimeout(() => (isDragging = false), 50);
    scrollContainer.style.cursor = 'grab';
  });

  scrollContainer.addEventListener('mousemove', (e) => {
    if (!isDown) return;
    isDragging = true;
    const x = e.pageX - scrollContainer.offsetLeft;
    const walk = (x - startX) * 1.8;
    scrollContainer.scrollLeft = scrollLeft - walk;
  });

  // Touch events
  let touchStartX = 0;
  let touchScrollLeft = 0;

  scrollContainer.addEventListener('touchstart', (e) => {
    touchStartX = e.touches[0].pageX - scrollContainer.offsetLeft;
    touchScrollLeft = scrollContainer.scrollLeft;
  });

  scrollContainer.addEventListener('touchmove', (e) => {
    const x = e.touches[0].pageX - scrollContainer.offsetLeft;
    const walk = (x - touchStartX) * 1.3;
    scrollContainer.scrollLeft = touchScrollLeft - walk;
  });

  // Prevent image drag interference
  scrollContainer.querySelectorAll('img').forEach(img => {
    img.addEventListener('dragstart', e => e.preventDefault());
    img.addEventListener('click', e => {
      if (isDragging) e.preventDefault();
    });
  });
});
</script>