{% extends "_layouts/main" %}
{% block titleBlock %}
{{entry.title}}
{% endblock %}
{% block main %}
{% include '/_partials/_toty-navigation.twig' with { activePage: 'home' } %}

	<div class="container-fluid yellowBackground p-2"></div>
	<div class="container-fluid yellowBackground p-2 backgroundImagePosition" style="background-image: url('images/featured-iStock-1284285153.jpg');">
	<div class="container p-4">
  <div class="row mt-5 mb-5">
    <div class="col-4 p-0 p-sm-2 p-lg-5">
		<img src="images/Canada_TOTY_logo.png" class="img-fluid">
    </div>
    <div class="col-4 p-0 p-sm-2 p-lg-5">
		<img src="images/AV_BTB_TOTY_logo.png" class="img-fluid">
    </div>
    <div class="col-4 p-0 p-sm-2 p-lg-5">
		<img src="images/LA_TOTY_Logo2.png" class="img-fluid">
    </div>
  </div>
  <div class="row text-center">
  <h1 style="color:var(--accentYellow);">THE INDUSTRY’S TOP TECHNICIAN RECOGNITION PROGRAM</h1>
  
  </div>
	</div>
	</div>
	<div class="container-fluid yellowBackground p-2"></div>
<div class="container-fluid blackBackground backgroundImagePosition p-5" style="background-image: url('images/featured-image-01.jpg'); min-height:70vh;">
  <div class="row">
    <div class="col-12 col-lg-6">{{entry.featuredContentTop}}
    </div>
  </div>
</div>
{% include '/_partials/_toty-sponsored.twig' %}
<div class="container p-5">
  <div class="row pt-5 pb-5"><a href="/winners"><img src="/images/TOTY-Banner-v3.png" class="img-fluid w-100"></a></div>
  <div class="row pt-5 pb-5">
    <div class="col-12 col-md-6">
      <h1 class="pb-3">Do you think you have what it takes?</h1>
      <h2>Showcase your skills, your knowledge, and throw your hat in the ring – it could be YOU taking home the crown of Technician of the Year.</h2>
	  <p>The purpose of the Auto Value and Bumper to Bumper Technician of the Year is to honor and award the professional technicians in the automotive aftermarket service and repair industry. We confidently believe this is the top technician recognition program in the United States, Canada, and Latin America as it showcases all the hard work and dedication shop professionals have placed into mastering their craft. This program is designed to recognize the talent, skillsets, problem-solving, and technical mindset needed to be a top technician. Passion for the job is the name of the game. Professional repair technicians work in an industry with frequent change and new technologies hitting the market. Staying ahead of the curve with trainings and becoming a guru is critical for success. Auto Value and Bumper to Bumper support technicians of today and tomorrow and will continue to highlight the expertise needed to thrive in the repair industry.  </p>
		<p>To be a Technician of the Year Finalist, you must have both of the following requirements.</p>
<ul>
<li>You must be part of the Auto Value, Bumper to Bumper or Confidence Plus Certified Service Program.</li>
<li>All your ASE certifications must be valid through the program year.</li>
</ul>


    </div>
    <div class="col-12 col-md-6 ps-0 ps-md-5">
		<img src="images/Photo 11-07-23 10 34 37.jpg" class="img-fluid">
    </div>
  </div>

  <div class="row pt-5 pb-5">
    <div class="col-12 col-md-6">
      <h1 class="pb-3">We are looking for our best technicians!</h1>
      <h2>Up to date on your certifications and confident in your current automotive knowledge? We understand how critical it is to maintain and improve your technical training, particularly in an industry where technology is constantly changing. Being a master level technician, you can earn the chance to be nationally recognized as the Auto Value and Bumper to Bumper Technician of the Year!</h2>
    </div>
    <div class="col-12 col-md-6 ps-0 ps-md-5">
		<img src="images/Photo 11-07-23 11 29 13.jpg" class="img-fluid">
    </div>
  </div>
</div>
<style>
@charset "utf-8";
	.allianceVideoContainer{
		background-color:#111;
	}
		.allianceVideoContainer .video-container {
            position: relative;
            width: 100%;
			margin-left:auto;
			margin-right:auto;
            max-width: 1280px;
            aspect-ratio: 16 / 9;
            overflow: hidden;
        }

        .allianceVideoContainer video {
            width: 100%;
            height: 100%;
            display: block;
        }

        .allianceVideoContainer .video-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: opacity 0.3s ease-in-out;
        }

        .allianceVideoContainer .video-overlay svg {
            width: 80px;
            height: 80px;
            fill: white;
            background: rgba(0, 0, 0, 0.5);
            padding: 20px;
            border-radius: 50%;
            transition: transform 0.2s;
        }

        .allianceVideoContainer .video-overlay:hover svg {
            transform: scale(1.5);
        }

        .allianceVideoContainer .hidden {
            opacity: 0;
            pointer-events: none;
        }
</style>	  
<div class="allianceVideoContainer">

		  <div class="container">
			  <div class="row">
				  <div class="col-12 p-5">
						<div class="video-container">
							<video id="video" controls>
								<source src="videos/toty.mp4" type="video/mp4">
								Your browser does not support the video tag.
							</video>
							<div class="video-overlay" id="videoOverlay" style="background: url('video/video-thumb.jpg') center/cover no-repeat;">
								<svg viewBox="0 0 24 24">
									<path d="M8 5v14l11-7z"></path>
								</svg>
							</div>
						</div>
				  </div>
			  </div>
		  </div>
	  </div>

{% include '/_partials/_toty-imageGallery.twig' with { 'block': entry.imageGallery } %}
{% include '/_partials/_toty-newslist.twig' %}

<script>
const video = document.getElementById('video');
const overlay = document.getElementById('videoOverlay');

overlay.addEventListener('click', function() {
	overlay.classList.add('hidden'); // Hide overlay
	video.play(); // Start video
});

video.addEventListener('play', function() {
	overlay.classList.add('hidden'); // Hide overlay if video starts
});
</script>
{% endblock %}