<!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{
			position: relative;
			overflow: hidden;
		}
		
		.about-section-4::after{
			content: '';
			position: absolute;
			top: 20px;
			right: -200px;
			width: 500px;
			height: 200px;
			opacity: 0.1;

			background-image: url('assets/img/airplan.png');
			/*background-color: red;*/
			background-position: top right;
			background-size: 100%;
			background-repeat: no-repeat;

		}

		.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/about-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>Rent for you <br> Eu dolor bibendum nulla cursus elementum</h2>
				<p>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. Eget sed elementum id risus.</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 pulvinar est amet felis cras.</p>

				<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.</p>
				
				<a href="#" class="btn btn-main btn-primary">Contactez-nous</a>
			</div>

			<div class="col-lg-10 offset-1 about-section-1 mt-5 p-0 rounded">
				<img src="assets/img/about-car-desert.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">Des Avantages Exceptionnels pour vos Déplacements</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>

	<section class="container-fluid about-section-3 my-5">
		<div class="row">
			<div class="col-lg-6 p-5">
				<h2 class="main-heading">Nos Services de Location de Voiture Marrakech</h2>

				<div class="hr-container">
					<hr>
				 	<div class="box"></div>
				</div>
				

				<p>Eu dolor bibendum nulla cursus elementum lacus condimemet ntum 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 niam nullam. Suscipit ut aeneaget eu commodo tempus pulvinar est amet felis cram luctus nunc dias.</p>
				 
				<a href="#" class="btn btn-main btn-primary me-3">réservation</a>
				 
				<a href="tel:+212670912797" class="btn btn-main btn-light p-0 pe-5">
				 	<span class="btn btn-main btn-black px-3 me-3">
				 		<img src="assets/img/headphone.png" width="20px">
				 	</span>
					<span class="phone">+212 (0) 6 70 91 27 97</span>
				</a>

			</div>
			<div class="col-lg-6 img"></div>
		</div>
	</section>

	<section class="container-fluid about-section-4 bg-dark text-center">
		<div class="w-75 p-5 text-light m-auto">
			<h2 class="main-heading mt-5 w-75 mx-auto">Optimisez Votre Expérience de Voyage avec la Location de Voiture à l'Aéroport</h2>

			<div class="hr-container mx-auto">
				<hr>
			 	<div class="box"></div>
			</div>

			<p class="p-5 pt-0">Eu dolor bibendum nulla cursus elementum lacus condimemet ntum luctus. Eget sed elementun posuere erat. Faucibus cras proin imperdiet id risus. Cursus semper quis sed amet et ut sed elementum lacus elit condiment.Placus elit condimentum luctus. Eget sed elementum lacus el nunc diam nulla nit condientum luctus nunc diam niam nullam. Suscipit ut aeneaget eu commodo tempus pulvinar est aut sed elementum lacus elit condiment.Placus elit ctus. Eget sed elementum lacus el nunc diam nulla.</p>

			<div class="img rounded"></div>

		</div>
	</section>
	<section class="container mt-5 py-5">
		<div class="row about-section-5">
			<div class="col-lg-6 text">
				<img src="assets/img/facebook.png" width="200px">
				<h2 class="main-heading">Suivez-nous sur Facebook</h2>
				<p class="w-75">Lorem ipsum habitant aliquet doLorem ipsum habitant aliquet dolor lacus habitant aliquet dolor lacus lacus habitant aliquet dolor lacus. </p>

				<a href="#" class="btn btn-main btn-primary me-3">suivez-nous</a>
				
			</div>
			<div class="col-lg-6">
				<img src="assets/img/about-app.jpg" width="100%">
			</div>
		</div>
	</section>

	<section class="container about-section-6">
		<div class="row pb-5">
			<div class="col-lg-6 offset-3 text-center mb-5">
				<h2 class="main-heading mt-5">Lorem ipsum dolore mel</h2>

				<div class="hr-container mx-auto">
					<hr>
				 	<div class="box"></div>
				</div>

				<p class="">Eu dolor bibendum nulla cursus elementum lacus condimemet ntum luctus. Eget sed elementun posuere erat. Faucibus cras proin imperdiet id risus. Cursus semper quis sed amet .</p>
			</div>

			<div class="col-lg-4">
				<div class="card">
					<div class="img blog1"></div>
					<div class="text">
						<h3>Location voiture à Marrakech : Marrakech en Voiture, Les Incontournables à Visiter en 48h</h3>
						<p>Visiter Marrakech en voiture offre une expérience enrichissante pour découvrir la ville et ses alentours. Avec une location voiture à</p>
						<a href="#" class="btn btn-main btn-primary me-3">en savoir plus</a>
					</div>
				</div>
			</div>

			<div class="col-lg-4">
				<div class="card">
					<div class="img blog2"></div>
					<div class="text">
						<h3>Location voiture à Marrakech : Marrakech en Voiture, Les Incontournables à Visiter en 48h</h3>
						<p>Visiter Marrakech en voiture offre une expérience enrichissante pour découvrir la ville et ses alentours. Avec une location voiture à</p>
						<a href="#" class="btn btn-main btn-primary me-3">en savoir plus</a>
					</div>
				</div>
			</div>

			<div class="col-lg-4">
				<div class="card">
					<div class="img blog3"></div>
					<div class="text">
						<h3>Location voiture à Marrakech : Marrakech en Voiture, Les Incontournables à Visiter en 48h</h3>
						<p>Visiter Marrakech en voiture offre une expérience enrichissante pour découvrir la ville et ses alentours. Avec une location voiture à</p>
						<a href="#" class="btn btn-main btn-primary me-3">en savoir plus</a>
					</div>
				</div>
			</div>

		</div>
	</section>

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

</body>
</html>