<!DOCTYPE html>
<html>
<head>
	<title>À propos de Rent for You</title>
	<?php include('../sections/head.php'); ?>

</head>
<body>

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

	<style type="text/css">

		.main-heading{
			font-family: "Teko", sans-serif;
			font-weight: 600;
			font-size: 30pt;
		}

		.hero{ 
			height:50vh;
			overflow: hidden; 
			position: relative;
		}
		.hero img{
			position: absolute;
			left: 0px;
			right: 0px;
			bottom: -20vh;
		}
		
		.hero p{
			font-family: "Teko", sans-serif;
			font-weight: 600;
			font-size: 40pt;
			position: absolute;
			bottom: 0px;
			color: white;
			line-height: 0px;
			white-space: nowrap;
			text-transform: uppercase;
		}

		.about-section-1{
			height: 50vh;
			overflow: hidden;
			position: relative;
		}

		.about-section-1 img{
			position: absolute;
			bottom: 0px;
		}

		.about-section-2 .img{
			background-image: url('assets/img/about-section-2.jpeg');
			background-size: cover;
			background-position: center;
			border-radius: 0px 10px 10px 0px;
		}

		.about-section-3 .img{
			background-image: url('assets/img/about-section-3.jpeg');
			background-size: cover;
			background-position: center;
			border-radius: 10px 0px 0px 10px;
		}

		.btn-black{
			background-color: black;
		}

		.phone{
			font-weight: bolder;
			font-size: 16pt;
			line-height: 10pt;
			vertical-align: middle;
			display: inline-block;
		}

		.about-section-2 p,.about-section-3 p{
			margin-bottom: 30px;
		}

		.hr-container{
			position: relative;
			height: 14px;
			margin-top: 30px;
			margin-bottom: 36px;
			width: 250px;
		}

		.hr-container hr{
			position: absolute;
			top: -10px;
			left: 0px;

			width: 250px;
			height:2px;
			background-color: gray;
			border-width:0;
		}

		.hr-container .box, .hr-container .box{
			display: inline-block;
			width:14px;
			height:14px;
			position: absolute;
			top: 0px;
			left: 0px;

			background-color: var(--main-color);
		}

		.about-section-4 .img{
			height: 600px;
			background-image: url('assets/img/about-section-4.jpeg');
			background-size: cover;
			background-position: center;
			margin-bottom: -250px;
		}

		.about-section-5{
			margin-top: 200px;
		}

		.about-section-5 .text{
			margin-top: 160px;
		}


		.about-section-6{}

		.about-section-6 h3{
			font-size: 16pt;
		}

		.about-section-6 .img{
			aspect-ratio: 16/10;
			background-color: #eee;
			background-size: cover;
			background-position: center;
		}

		.about-section-6 .blog1{
			background-image: url('assets/img/about-blog-1.png');
		}

		.about-section-6 .blog2{
			background-image: url('assets/img/about-blog-2.png');
		}

		.about-section-6 .blog3{
			background-image: url('assets/img/about-blog-3.png');
		}

		.about-section-6 .text{
			padding: 20px;
		}

		/* .blog1 */



	</style>


	<div class="containter-fluid">
		<div class="hero">
			<img src="assets/img/services-hero.jpeg" width="100%">
			<p>Lorem ipsum dolor sit amet consectetur urus habitant aliquet dolor lacus commodo tempus pulvinar</p>
		</div>
	</div>


	<!-- S E C T I O N #1 -->
	<section class="section1 container">
		<div class="row my-5">

			<div class="col-lg-5 offset-1 ps-5">
				<h2><span class="text-primary teko">Rent for you</span> <br> Voiture automatique</h2>
				<p class="mt-3">Eu dolor bibendum nulla cursus elementum lacus elit condimentum luctus. Eget sed elementun posuere erat. Faucibus cras proin imperdiet tum lacus elit conbus cras proin idimentum luctus.</p>
			</div>

			<div class="col-lg-5 pe-5">
				<p>Lacus el nunc diam nulla nit condientum luctus nunc diam nullam. Suscipit ut aeneaget eu commodo tempus pamet ulvinar est amet felis cras. Eveu dolor bibendum nulla cursus elementum lacus elit amet ze condimentum luctus</p>
				
				<a href="#" class="btn btn-main btn-primary mt-3">Contactez-nous</a>
			</div>

			<div class="col-lg-10 offset-1 about-section-1 mt-5 p-0 rounded">
				<img src="assets/img/services-section.jpeg" class="w-100" style="z-index: 9;">
			</div>
				
		</div>

	</section>

	<section class="container-fluid about-section-2 my-5">
		<div class="row">
			<div class="col-lg-6 img"></div>
			<div class="col-lg-6 p-5">
				 <h2 class="main-heading">Posuere erat. Faucibus cras proin imperdiet id risus. </h2>

				 <div class="hr-container">
				 	<hr weight="2px">
				 	<div class="box"></div>
				 </div>

				 <p>Eu dolor bibendum nulla cursus elementum lacus elit condimentum luctus. Eget sed elementun posuere erat. Faucibus cras proin imperdiet id risus. Cursus semper quis sed amet et ut sed elementum lacus elit condiment.</p>
				 <p>tum lacus elit condimentum luctus. Eget sed elementum lacus el nunc diam nulla nit condientum luctus nunc diam nullam. Suscipit ut aeneaget eu commodo tempus pulvinar est amet felis cras.</p>
				 <div class="row">
				 	<div class="col-lg-6">
				 		<img src="assets/img/check.png" align="left" width="45px" class="me-3">
				 		<p>Lorem ipsum habitant aliquet dolor lacus habitant </p>
				 	</div>
				 	<div class="col-lg-6">
				 		<img src="assets/img/check.png" align="left" width="45px" class="me-3">
				 		<p>Lorem ipsum habitant aliquet dolor lacus habitant </p>
				 	</div>
				 	<div class="col-lg-6">
				 		<img src="assets/img/check.png" align="left" width="45px" class="me-3">
				 		<p>Lorem ipsum habitant aliquet dolor lacus habitant </p>
				 	</div>
				 	<div class="col-lg-6">
				 		<img src="assets/img/check.png" align="left" width="45px" class="me-3">
				 		<p>Lorem ipsum habitant aliquet dolor lacus habitant </p>
				 	</div>
				 </div>
			</div>
		</div>
	</section>



	<!-- S E C T I O N #4  S E R V I C E S  -->
	<section class="services container mb-5">
		<div class="row">
			<div class="col-lg-6 offset-3 text-center">
				<h2 class="teko">Nos services</h2>
				<p>Lorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor sit aconsetur dipiscimet coibero.</p>
			</div>

			<div class="col-lg-4 offset-2 my-3">
				<div class="card">

					<img src="assets/img/services-2.png" width="100%">

					<div class="backdrop"></div>

					<div class="content">
						<h3>LLD</h3>
						<p>Lorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor sit aconsetur dipiscimet coibero ulputat eolor sita.</p>
						<a href="#" class="btn btn-main btn-primary">En savoir plus</a>
					</div>
				</div>
			</div>

			<div class="col-lg-4 my-3">
				<div class="card">

					<img src="assets/img/services-3.png" width="100%">
					
					<div class="backdrop"></div>

					<div class="content">
						<h3>Navette et Transfert</h3>
						<p>Lorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor sit aconsetur dipiscimet coibero ulputat eolor sita.</p>
						<a href="#" class="btn btn-main btn-primary">En savoir plus</a>
					</div>

				</div>
			</div>

		</div>
		
	</section>

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

</body>
</html>