@extends('layouts.main')
@section('title', 'Pricing')
@section('content')
<style>
	.breakfast{
    background-image: linear-gradient(rgba(0,0,0,.29) 100%,white),url("{{ asset('public/site/assets/img/breakfast.jpg') }}");
    background-size: cover;

  }
  #counts{
  	padding: inherit;
  }
</style>
	<section class="breadcrumbs">
      <div class="container" style="padding-top: 1rem;">

        <h1>Watch Demo</h1>

      </div>
    </section><!-- End Breadcrumbs -->

    <section id="about" class="about">
    <div class="container">
      	<header class="section-header" style="padding: 1rem 9rem 3rem 9rem;">
          <h2>Is Skimmer Right for You? Watch the Demo Below.</h2>
          <p style="font-size: 18px; font-weight: 300; ">Watch the demo below to see how Skimmer can make it easier to run your pool service business.</p>
        </header>
      
        <div class="row gy-4" style="padding: 0rem 6rem 0rem 6rem;">
          <video controls>
            <source src="mov_bbb.mp4" type="video/mp4">
            <source src="mov_bbb.ogg" type="video/ogg">
            Your browser does not support HTML video.
          </video>
        </div>
    </div>
    </section>
    <section id="counts" class="counts">
      <div class="" data-aos="fade-up">
        <div class="row gy-4"> 
          <div class="col-sm-12 text-white text-center breakfast">
            <h3 style="padding-top: 5rem;">Tired of the paperwork? Switch to Skimmer today!</h3>
            <div class="" style="display: block; padding: 0.5rem 0rem 3rem 0rem; font-size: 20px;">
             Got questions? Call (480) 718-2158 or email support@getskimmer.com
            </div>
            <button class="btn btn-primary" type="" style="padding: 0.7rem 2rem 0.7rem 2rem; margin-bottom: 5rem;">Sign Up and Get Skimmer Today >></button>

          </div>
        </div>

      </div>
    </section><!-- End Counts Section -->
@endsection