<?php get_header(); ?>

<div class="uk-cover-container uk-text-center banner" uk-scrollspy="cls: uk-animation-fade; delay: 300">
    <canvas class="uk-visible@m" width="" height="300"></canvas>
    <canvas class="uk-hidden@m" width="" height="300"></canvas>

	<img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/home-with-christmas-lights-at-night-1.webp" data-width data-height uk-cover>

  <div class="uk-position-cover uk-flex uk-flex-bottom" uk-scrollspy="cls: uk-animation-fade; delay: 500">
    <img class="uk-width-1-1" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/snow-curve-desktop-white-1@2x.webp" data-width data-height>
  </div>
	<div class="uk-position-cover uk-text-center uk-container uk-flex uk-flex-center uk-flex-middle">
        <div>
					<h1 class="white">Services</h1>
        </div>
    </div>
</div>


<div class="uk-container" >
	<main role="main">
			<section >
        <div uk-scrollspy="cls: uk-animation-fade; delay: 300">
  				<h5 class="blue uk-margin-remove-bottom uk-text-center uk-margin-large-top">OUR LIGHTING SERVICES</h5>
  			  <h2 class="red uk-margin-remove-top uk-text-center">Stress‑Free Holiday &amp; Year‑Round Lighting</h2>
  			  <h4 class="grey uk-text-center uk-margin-large-bottom">Custom lighting displays, installed safely and stress‑free.</h4>
        </div>

				<div class="uk-child-width-1-3@m" uk-grid uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">
					<?php get_template_part('loop-services'); ?>
				</div>
				<?php get_template_part('pagination'); ?>

			</section>
	</main>
</div>

<?php get_footer(); ?>
