{% extends 'base.html.twig' %}

{% block title %}Devenir Transporteur
{% endblock %}

{% block body %}
	<main
		id="content">
		<!-- =========={ HERO }==========  -->
		<div id="hero" class="section py-5 jarallax">
			<!-- background parallax -->

			<!-- background overlay --><div class="overlay bg-primary opacity-90 z-index-n1"> </div>

			<div class="container">
				<div
					class="row align-items-center justify-content-center">
					<!-- content -->
					<div class="col-lg-7">
						<div class="mt-0 py-4 text-center">
							<br><br><br><br>
							<h1 class="h2 text-white text-shadow">DEVENIR TRANSPORTEUR</h1>
							<hr class="divider mt-4 mx-auto bg-warning border-warning">


						</div>
					</div>
					<!-- end content -->
				</div>
			</div>
			{# <div id="jarallax-container-0" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; z-index: -100;"><img class="jarallax-img" src="../src/img-min/bg/bg-planet.jpg" alt="title" style="object-fit: cover; object-position: 50% 50%; max-width: none; position: absolute; top: 0px; left: 0px; width: 1519.2px; height: 399.44px; overflow: hidden; pointer-events: none; transform-style: preserve-3d; backface-visibility: hidden; will-change: transform, opacity; margin-top: 15.28px; transform: translate3d(0px, 194.48px, 0px);"></div> #}

		</div>
		<!-- End hero -->

        
        <div id="contact" class="section py-6 py-md-7 bg-light-dark">
        <div class="container">
          <!-- row -->
          <div class="row">
            

            <div class="col-lg-12 ps-lg-0 mt-5 mt-lg-0 aos-init aos-animate" data-aos="fade-left">
              <div class="w-100 p-5 border rounded-3 bg-light-dark">
                <!-- contact form -->
                <form action="#" class="contact-form">
                  <div class="row">
                    <div class="col-md-6 mb-4">
                      <label class="form-label" for="name">Your Name</label>
                      <input type="text" name="name" class="form-control" id="name">
                      <div class="validate"></div>
                    </div>
                    <div class="col-md-6 mb-4">
                      <label class="form-label" for="email">Your Email</label>
                      <input type="email" class="form-control" name="email" id="email">
                      <div class="validate"></div>
                    </div>
                  </div>
                  <div class="mb-4">
                    <label class="form-label" for="subject">Subject</label>
                    <input type="text" class="form-control" name="subject" id="subject">
                    <div class="validate"></div>
                  </div>
                  <div class="mb-4">
                    <label class="form-label" for="messages">Message</label>
                    <textarea class="form-control" name="message" rows="10" id="messages"></textarea>
                    <div class="validate"></div>
                  </div>
                  <div class="text-center mb-4">
                    <button class="btn btn-primary" type="submit">
                      <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" fill="currentColor" class="me-2 rtl-270" viewBox="0 0 512 512"><path d="M53.12,199.94l400-151.39a8,8,0,0,1,10.33,10.33l-151.39,400a8,8,0,0,1-15-.34L229.66,292.45a16,16,0,0,0-10.11-10.11L53.46,215A8,8,0,0,1,53.12,199.94Z" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></path><line x1="460" y1="52" x2="227" y2="285" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></line></svg>
                      Send Message
                    </button>
                  </div>
                </form><!-- end contact form -->
              </div>
            </div>
          </div><!-- end row -->
        </div>
      </div>

	</main>

    <div id="counter" class="section pt-6 pt-md-7 pb-5 pb-md-6 bg-dark jarallax">
        <!-- background parallax -->
        
        <div class="overlay bg-primary opacity-80 z-index-n1"></div>

        <div class="container">
          <div class="row text-center text-uppercase">
            <div class="col-lg-3 col-sm-6">
              <div class="d-flex align-item-center justify-content-center p-4 bg-light-dark rounded-3 position-relative mb-4">
                <!-- icon -->
                <div class="text-center">
                  <!-- svg icons -->
                  <svg class="bi bi-person text-primary mb-1 me-3" width="4rem" height="4rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M13 14s1 0 1-1-1-4-6-4-6 3-6 4 1 1 1 1h10zm-9.995-.944v-.002.002zM3.022 13h9.956a.274.274 0 00.014-.002l.008-.002c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664a1.05 1.05 0 00.022.004zm9.974.056v-.002.002zM8 7a2 2 0 100-4 2 2 0 000 4zm3-2a3 3 0 11-6 0 3 3 0 016 0z" clip-rule="evenodd"></path>
                  </svg>
                </div>
                <!-- text -->
                <div class="text-left">
                  <div class="h2 mb-1 text-primary">
                    <span class="counter" style="visibility: visible;">1200</span>
                  </div>
                  <small class="d-block text-uppercase text-primary">Customers</small>
                </div>
              </div>
            </div>

            <div class="col-lg-3 col-sm-6">
              <div class="d-flex align-item-center justify-content-center p-4 bg-light-dark rounded-3 position-relative mb-4">
                <!-- icons -->
                <div class="text-center">
                  <!-- svg icons -->
                  <svg class="bi bi-briefcase text-primary mb-1 me-3" width="4rem" height="4rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M0 12.5A1.5 1.5 0 001.5 14h13a1.5 1.5 0 001.5-1.5v-6h-1v6a.5.5 0 01-.5.5h-13a.5.5 0 01-.5-.5v-6H0v6z" clip-rule="evenodd"></path>
                    <path fill-rule="evenodd" d="M0 4.5A1.5 1.5 0 011.5 3h13A1.5 1.5 0 0116 4.5v2.384l-7.614 2.03a1.5 1.5 0 01-.772 0L0 6.884V4.5zM1.5 4a.5.5 0 00-.5.5v1.616l6.871 1.832a.5.5 0 00.258 0L15 6.116V4.5a.5.5 0 00-.5-.5h-13zM5 2.5A1.5 1.5 0 016.5 1h3A1.5 1.5 0 0111 2.5V3h-1v-.5a.5.5 0 00-.5-.5h-3a.5.5 0 00-.5.5V3H5v-.5z" clip-rule="evenodd"></path>
                  </svg>
                </div>
                <!-- text -->
                <div class="text-left">
                  <div class="h2 mb-1 text-primary">
                    <span class="counter" style="visibility: visible;">700</span>
                  </div>
                  <small class="d-block text-uppercase text-primary">Company</small>
                </div>
              </div>
            </div>

            <div class="col-lg-3 col-sm-6">
              <div class="d-flex align-item-center justify-content-center p-4 bg-light-dark rounded-3 position-relative mb-4">
                <!-- icon -->
                <div class="text-center">
                  <!-- svg icons -->
                  <svg class="bi bi-award text-primary mb-1 me-3" width="4rem" height="4rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M9.669.864L8 0 6.331.864l-1.858.282-.842 1.68-1.337 1.32L2.6 6l-.306 1.854 1.337 1.32.842 1.68 1.858.282L8 12l1.669-.864 1.858-.282.842-1.68 1.337-1.32L13.4 6l.306-1.854-1.337-1.32-.842-1.68L9.669.864zm1.196 1.193l-1.51-.229L8 1.126l-1.355.702-1.51.229-.684 1.365-1.086 1.072L3.614 6l-.25 1.506 1.087 1.072.684 1.365 1.51.229L8 10.874l1.356-.702 1.509-.229.684-1.365 1.086-1.072L12.387 6l.248-1.506-1.086-1.072-.684-1.365z" clip-rule="evenodd"></path>
                    <path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z"></path>
                  </svg>
                </div>
                <!-- text -->
                <div class="text-left">
                  <div class="h2 mb-1 text-primary">
                    <span class="counter" style="visibility: visible;">20</span>
                  </div>
                  <small class="d-block text-uppercase text-primary">Awards</small>
                </div>
              </div>
            </div>

            <div class="col-lg-3 col-sm-6">
              <div class="d-flex align-item-center justify-content-center p-4 bg-light-dark rounded-3 position-relative mb-4">
                <!-- icon -->
                <div class="text-center">
                  <!-- svg icons -->
                  <svg class="bi bi-file-earmark-check text-primary mb-1 me-3" width="4rem" height="4rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9 1H4a2 2 0 00-2 2v10a2 2 0 002 2h5v-1H4a1 1 0 01-1-1V3a1 1 0 011-1h5v2.5A1.5 1.5 0 0010.5 6H13v2h1V6L9 1z"></path>
                    <path fill-rule="evenodd" d="M15.854 10.146a.5.5 0 010 .708l-3 3a.5.5 0 01-.708 0l-1.5-1.5a.5.5 0 01.708-.708l1.146 1.147 2.646-2.647a.5.5 0 01.708 0z" clip-rule="evenodd"></path>
                  </svg>
                </div>
                <!-- text -->
                <div class="text-left">
                  <div class="h2 mb-1 text-primary">
                    <span class="counter" style="visibility: visible;">450</span>
                  </div>
                  <small class="d-block text-uppercase text-primary">Project</small>
                </div>
              </div>
            </div>
          </div>
        </div>
      <div id="jarallax-container-0" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; z-index: -100;"><img class="jarallax-img" src="src/img-min/bg/bg-planet.jpg" alt="title" style="object-fit: cover; object-position: 50% 50%; max-width: none; position: absolute; top: 0px; left: 0px; width: 1519.2px; height: 405.6px; overflow: hidden; pointer-events: none; transform-style: preserve-3d; backface-visibility: hidden; will-change: transform, opacity; margin-top: 12.2px; transform: translate3d(0px, -98.23px, 0px);"></div></div>
{% endblock %}