<!DOCTYPE html>
<html lang="en">

<head>
	<title>{{config.get('PROJECT_NAME')}} | Leading Supplier of Oil Products and Services in Kenya</title>
	{% include 'front/includes/import.top.html' %}
</head>

<body>

	<!-- Offcanvas START -->
	{% include 'front/includes/top.header.html' %}
	<!-- Offcanvas END -->

	<!-- =======================
Header START -->
	{% include 'front/includes/header.html' %}
	<!-- =======================
Header END -->

	<!-- **************** MAIN CONTENT START **************** -->
	<main>

		<!-- =======================
Hero banner START -->
		<section class="pb-0 pt-0 position-relative">
			<!-- Svg START -->
			<figure class="position-absolute top-0 end-0 d-none d-lg-block">
				<svg class="fill-success" width="60" height="70" viewBox="0 0 48 69" xmlns="http://www.w3.org/2000/svg">
					<path
						d="M21.188 62.0155C20.888 59.4155 20.788 56.7155 20.388 54.2155C19.688 50.0155 17.688 46.7155 13.888 44.6155C10.688 42.9155 7.488 41.4155 4.188 39.8155C3.188 39.3155 2.088 38.9155 1.088 38.4155C0.288 38.0155 -0.212 37.3155 0.088 36.4155C0.288 35.8155 0.988 35.4155 1.488 34.9155C1.588 34.8155 1.788 34.8155 1.988 34.8155C9.888 33.2155 15.188 28.1155 18.788 21.3155C21.988 15.4155 24.588 9.21554 27.488 3.21554C27.888 2.31554 28.288 1.41554 28.788 0.715542C29.088 0.315542 29.888 -0.0844582 30.388 0.0155418C30.888 0.115542 31.488 0.715542 31.588 1.31554C31.788 1.91554 31.688 2.71554 31.588 3.41554C31.388 4.81554 31.188 6.21554 30.888 7.71554C29.688 13.6155 30.888 19.3155 32.088 25.0155C32.688 27.5155 34.188 29.3155 36.388 30.5155C39.188 32.0155 42.088 33.0155 45.188 33.7155C46.188 33.9155 47.588 33.9155 47.688 35.4155C47.788 37.0155 46.388 37.4155 45.288 37.7155C40.488 38.9155 37.088 42.1155 33.988 45.8155C30.788 49.6155 28.288 53.9155 26.688 58.6155C25.788 61.2155 24.988 63.8155 24.088 66.3155C23.888 66.8155 23.888 67.3155 23.588 67.6155C23.188 68.1155 22.488 68.8155 22.088 68.7155C21.588 68.6155 21.188 67.8155 20.888 67.2155C20.688 66.8155 20.788 66.3155 20.788 65.8155C20.788 64.5155 20.788 63.2155 20.788 62.0155C20.988 62.0155 21.088 62.0155 21.188 62.0155Z">
					</path>
				</svg>
			</figure>
			<!-- Svg END -->

			<div class="container-flui">
				<div class="row">
					<div class="col-xxl-12 mx-0 rounde overflow-hidden">
						<!-- Card START -->
						<div class="homepage-slides owl-carousel">
							<!-- <div class="owl-item cloned my-1" data-arrow="false" data-autoplay="true" data-edge="2"> -->
							<div class="card bg-dark-overlay-7 rounded- overflow-hidden py-7 px mb-0-lg-5"
								style="background-image: url({{url_for('static', filename='dets/assets/images/bg/oilpump.jpg')}}); background-repeat: no-repeat; background-size:cover;background-position: center center;">

								<div class="container">
									<div class="position-relative">
										<div class="row py-md-7">
											<div class="col-lg-8 z-index-9">
												<!-- Title -->
												<h1 class="text-white mb-3">Unmatched competitive edge</h1>
												<!-- Content -->
												<!-- <p class="text-white mb-4">We are a professional oil energy
													providerd who are
													experienced in handling various kinds of oil products. we
													strongly maintain
													quality in product. let's make a big deal!</p> -->

												<div class="hstack flex-wrap gap-2 gap-lg-4">
													<!-- Button -->
													<a href="{{url_for('contacts')}}"
														class="btn btn-success mb-0">Contact us</a>
													<a href="{{url_for('services')}}"
														class="btn btn-outline-white mb-0">View our service</a>
												</div>
											</div>
										</div><!-- Row END -->

										<div
											class="d-flex flex-wrap align-items-center justify-content-between mt-4 mt-md-0">
											<a href="mailto:{{config.get('PROJECT_EMAIL')}}"
												class="text-white text-success-hover">{{config.get('PROJECT_EMAIL')}}</a>
											<!-- Social link START -->
											<div>
												<div class="d-flex align-items-center">
													<h6 class="text-white mb-0 me-3">Follow us:</h6>
													<div class="list-group list-group-horizontal list-group-borderless">

														<a class="list-group-item text-white text-success-hover me-3"
															href="#">
															<i class="fab fa-facebook-f"></i>
														</a>

														<a class="list-group-item text-white text-success-hover me-3"
															href="#">
															<i class="fab fa-instagram"></i>
														</a>

														<a class="list-group-item text-white text-success-hover me-3"
															href="#">
															<i class="fab fa-twitter"></i>
														</a>

														<a class="list-group-item text-white text-success-hover"
															href="#">
															<i class="fab fa-linkedin-in"></i>
														</a>
													</div>
												</div>
											</div>
											<!-- Social link END -->
										</div>
									</div>
									<!-- </div> -->
									<!-- Card END -->
								</div>
							</div>
							<div class="card bg-dark-overlay-7 rounded- overflow-hidden py-7 px mb-0-lg-5"
								style="background-image: url({{url_for('static', filename='dets/assets/images/bg/export.jpg')}}); background-repeat: no-repeat; background-size:cover;background-position: center center;">

								<div class="container">
									<div class="position-relative">
										<div class="row py-md-7">
											<div class="col-lg-8 z-index-9">
												<!-- Title -->
												<h1 class="text-white mb-3">Providing customer with perfect products</h1>
												<!-- Content -->
												<!-- <p class="text-white mb-4">We are a professionals at exporting goods
													from Kenya and East Africa at large to the outside world</p> -->

												<div class="hstack flex-wrap gap-2 gap-lg-4">
													<!-- Button -->
													<a href="{{url_for('contacts')}}"
														class="btn btn-success mb-0">Contact us</a>
													<a href="{{url_for('services')}}"
														class="btn btn-outline-white mb-0">View our service</a>
												</div>
											</div>
										</div><!-- Row END -->

										<div
											class="d-flex flex-wrap align-items-center justify-content-between mt-4 mt-md-0">
											<a href="mailto:{{config.get('PROJECT_EMAIL')}}"
												class="text-white text-success-hover">{{config.get('PROJECT_EMAIL')}}</a>
											<!-- Social link START -->
											<div>
												<div class="d-flex align-items-center">
													<h6 class="text-white mb-0 me-3">Follow us:</h6>
													<div class="list-group list-group-horizontal list-group-borderless">

														<a class="list-group-item text-white text-success-hover me-3"
															href="#">
															<i class="fab fa-facebook-f"></i>
														</a>

														<a class="list-group-item text-white text-success-hover me-3"
															href="#">
															<i class="fab fa-instagram"></i>
														</a>

														<a class="list-group-item text-white text-success-hover me-3"
															href="#">
															<i class="fab fa-twitter"></i>
														</a>

														<a class="list-group-item text-white text-success-hover"
															href="#">
															<i class="fab fa-linkedin-in"></i>
														</a>
													</div>
												</div>
											</div>
											<!-- Social link END -->
										</div>
									</div>
									<!-- </div> -->
									<!-- Card END -->
								</div>
							</div>
							<div class="card bg-dark-overlay-7 rounded- overflow-hidden py-7 px mb-0-lg-5"
								style="background-image: url({{url_for('static', filename='dets/assets/images/bg/import.jpg')}}); background-repeat: no-repeat; background-size:cover;background-position: center center;">

								<div class="container">
									<div class="position-relative">
										<div class="row py-md-7">
											<div class="col-lg-8 z-index-9">
												<!-- Title -->
												<h1 class="text-white mb-3">Top rated oil company in Kenya</h1>
												<!-- Content -->
												<!-- <p class="text-white mb-4">We import goods including petrolaum to Kenya
													and the vast East Africa region from the Middle East and other parts
													of the world!</p> -->

												<div class="hstack flex-wrap gap-2 gap-lg-4">
													<!-- Button -->
													<a href="{{url_for('contacts')}}"
														class="btn btn-success mb-0">Contact us</a>
													<a href="{{url_for('services')}}"
														class="btn btn-outline-white mb-0">View our service</a>
												</div>
											</div>
										</div><!-- Row END -->

										<div
											class="d-flex flex-wrap align-items-center justify-content-between mt-4 mt-md-0">
											<a href="mailto:{{config.get('PROJECT_EMAIL')}}"
												class="text-white text-success-hover">{{config.get('PROJECT_EMAIL')}}</a>
											<!-- Social link START -->
											<div>
												<div class="d-flex align-items-center">
													<h6 class="text-white mb-0 me-3">Follow us:</h6>
													<div class="list-group list-group-horizontal list-group-borderless">

														<a class="list-group-item text-white text-success-hover me-3"
															href="#">
															<i class="fab fa-facebook-f"></i>
														</a>

														<a class="list-group-item text-white text-success-hover me-3"
															href="#">
															<i class="fab fa-instagram"></i>
														</a>

														<a class="list-group-item text-white text-success-hover me-3"
															href="#">
															<i class="fab fa-twitter"></i>
														</a>

														<a class="list-group-item text-white text-success-hover"
															href="#">
															<i class="fab fa-linkedin-in"></i>
														</a>
													</div>
												</div>
											</div>
											<!-- Social link END -->
										</div>
									</div>
									<!-- </div> -->
									<!-- Card END -->
								</div>
							</div>
						</div>
					</div><!-- Row END -->

				</div><!-- RoW END -->
			</div>
		</section>
		<!-- =======================
Hero banner END -->
		<section class="position-relative py-3">

			<div class="bg-light rounded-0 py-5 p-lg-5 overflow-hidden"
				style="background-image: url({{url_for('static', filename='dets/assets/images/pattern/01.png')}}); background-repeat: no-repeat; background-size: cover;">
				<div class="container">
					<div class="row">
						
						<div class="col-lg-10 col-md-12">
							<h3>Welcome to {{config.get('PROJECT_NAME')}}</h3>
							<p class="mb-0">Welcome to {{config.get('PROJECT_NAME')}}, your premier partner for all
								your oil
								product needs across Kenya and East Africa. We are dedicated to delivering
								high-quality oil products and
								exceptional services that power industries and homes alike.</p>
						</div>
						<div class="col-lg-2 col-md-0 d-none d-lg-block">
							<img src="{{url_for('static', filename='dets/assets/images/element/plumber-036.png')}}" class="card-image" alt="card image">
						</div>
					</div><!-- Row END -->
				</div>
			</div>
		</section>
		<!-- =======================
Service START -->
		<section class="position-relative">

			<!-- Svg START -->
			<figure class="position-absolute top-0 start-0 mb-0 d-none d-lg-block">
				<svg class="fill-success" width="100" height="100" viewBox="0 0 29 31" fill="none"
					xmlns="http://www.w3.org/2000/svg">
					<path
						d="M0 17C0.2 15.8 0.4 14.6 0.7 13.5C1.9 9.80002 3.9 6.50002 6.7 3.80002C11.1 -0.399979 16.3 -0.799979 21.8 1.10002C24 1.80002 25.6 3.40002 26.7 5.40002C32.3 15 26.1 28.2 15.1 29.9C8.1 31 0.4 26.7 0 17ZM24.2 13.6C23.9 9.90002 23 6.50002 18.8 5.20002C18.3 5.00002 17.7 4.70002 17.4 4.30002C16 2.50002 14.4 3.00002 12.7 3.70002C7.9 5.70002 3.6 12.2 3.8 17.5C3.9 21.4 5.7 23.9 9.4 25.3C12.8 26.6 15.9 26.1 18.9 24C22.5 21.4 23.8 17.8 24.2 13.6Z">
					</path>
				</svg>
			</figure>
			<!-- Svg END -->

			<div class="container">
				<div class="row mb-4">
					<div class="col-lg-6">
						<!-- Title -->
						<h2 class="mb-0">Our Services</h2>
					</div>
				</div><!-- Row END -->

				<div class="row">
					<div class="col-12">
						<div class="tiny-slider">
							<div class="tiny-slider-inner my-1" data-arrow="false" data-autoplay="true" data-edge="2"
								data-dots="false" data-gutter="30" data-items-xl="3" data-items-md="2"
								data-items-xs="1">
								{% for service in config.get('SERVICES').get('services') %}
								<!-- <div class="col-lg-4 col-md-6 col-sm-12">
									{{ config.get('SERVICES').get('services').get(service) }}
								</div> -->
								{% set serv = config.get('SERVICES').get('services').get(service) %}
								<!-- <div class="col-lg-4 col-md-6 col-sm-12">
									<div class="single-serv-item mt-30 wow fadeInLeft" data-wow-delay=".2s">
										<div class="serv-icon">
											<img src="{{url_for('static', filename='assets/img/icon')}}/{{serv.get('icon')}}" alt>
										</div>
										<div class="serv-content">
											<h5>{{serv.get('name')}}</h5>
											<p>{{ serv.get('except') | truncate(100)}}</p>
										</div>
										<a href="{{url_for('service', id=service)}}" class="read-more">Read More</a>
									</div>
								</div> -->
								<div>
									<!-- Card START -->
									<div class="card border rounded-4 overflow-hidden">
										<!-- <div class="card-image-scale">
											<img src="{{url_for('static', filename='dets/assets/images/service/21.jpg')}}"
												class="card-image" alt="">
										</div> -->
										<!-- Card body -->
										<div class="card-body p-4">
											<div class="d-flex align-items-center mb-3">
												<div class="icon-md border-success bg-opacity-50 rounded me-3">
													<!-- Svg -->
													<img src="{{url_for('static', filename='assets/img/icon')}}/{{serv.get('icon')}}"
														class="w-30" alt="">
												</div>
												<!-- Title -->
												<h5 class="card-title mb-0"><a href="#"
														class="stretched-link">{{serv.get('name')}}</a></h5>
											</div>
											<!-- Content -->
											<p class="card-text">{{ serv.get('except') | truncate(100)}}</p>
											<!-- Button -->
											<a href="{{url_for('service', id=service)}}"
												class="btn btn-link p-0 mb-0">Learn more</a>
										</div>
									</div>
									<!-- Card END -->
								</div>
								{% endfor %}
							</div>
						</div>
					</div>
				</div><!-- Row END -->
			</div>
		</section>
		<!-- =======================
Service END -->
		<section class="py-0">
			<div class="container-">
				<div class="bg-light rounded-0 p-4 p-lg-5 overflow-hidden"
					style="background-image: url({{url_for('static', filename='dets/assets/images/pattern/01.png')}}); background-repeat: no-repeat; background-size: cover;">
					<div class="container">
						<div class="row g-4">

							<div class="col-sm-6 col-lg-4">
								<div class="card card-body bg-transparent p-0">
									<!-- Title -->
									<h5>Available 24/7</h5>
									<!-- Content -->
									<p class="mb-0">Available around the clock to give you the best services for maximum
										satisfaction</p>
								</div>
							</div>

							<div class="col-sm-6 col-lg-4">
								<div class="card card-body bg-transparent p-0">
									<!-- Title -->
									<h5>Customer focus</h5>
									<!-- Content -->
									<p class="mb-0">Our customers are our main focus and providing solutions to their
										energy needs is our core.</p>
								</div>
							</div>

							<div class="col-sm-6 col-lg-4">
								<div class="card card-body bg-transparent p-0">
									<!-- Title -->
									<h5>Quality product</h5>
									<!-- Content -->
									<p class="mb-0">Our products are the best in the market. We pride ourselves in
										providing the best services and products.</p>
								</div>
							</div>

						</div><!-- Row END -->
					</div>
				</div>
			</div>
		</section>
		<!-- =======================
Work process END -->


		<div class="pt-0">
			<div class="container  my-5">

				<div class="row mb-4">
					<div class="col-lg-8 mx-auto text-center">
						<!-- Title -->
						<h2 class="mb-0">Why choose us?</h2>
					</div>
				</div><!-- Row END -->

				<div class="row g-4">
					<div class="col-sm-6 col-lg-4">
						<!-- Card START -->
						<div class="card card-body p-4 shadow rounded-3">
							<!-- Title -->
							<h5>Integrity</h5>
							<!-- Content -->
							<p class="mb-0">Our company operates with integrity, upholding the highest ethical standards
								in all our business practices and interactions.</p>
						</div>
						<!-- Card END -->
					</div>

					<div class="col-sm-6 col-lg-4">
						<!-- Card START -->
						<div class="card card-body p-4 shadow rounded-3">
							<!-- Title -->
							<h5>Guaranteed work</h5>
							<!-- Content -->
							<p class="mb-0">We offer guaranteed work, ensuring that every project we complete meets the
								highest standards of quality and reliability.</p>
						</div>
						<!-- Card END -->
					</div>

					<div class="col-sm-6 col-lg-4">
						<!-- Card START -->
						<div class="card card-body p-4 shadow rounded-3">
							<!-- Title -->
							<h5>Fast service</h5>
							<!-- Content -->
							<p class="mb-0">Delivering products or services quickly and efficiently while maintaining
								high quality and ensuring customer satisfaction.</p>
						</div>
						<!-- Card END -->
					</div>

					<div class="col-sm-6 col-lg-4">
						<!-- Card START -->
						<div class="card card-body p-4 shadow rounded-3">
							<!-- Title -->
							<h5>Affordable Price</h5>
							<!-- Content -->
							<p class="mb-0">Our goal is to provide high-quality products at an affordable price,
								ensuring that everyone can enjoy premium goods without breaking the bank</p>
						</div>
						<!-- Card END -->
					</div>

					<div class="col-sm-6 col-lg-4">
						<!-- Card START -->
						<div class="card card-body p-4 shadow rounded-3">
							<!-- Title -->
							<h5>Highly trained staff</h5>
							<!-- Content -->
							<p class="mb-0">Our company prides itself on having highly trained staff who are dedicated
								to delivering exceptional service and expert guidance to all our customers.</p>
						</div>
						<!-- Card END -->
					</div>

					<div class="col-sm-6 col-lg-4">
						<!-- Card START -->
						<div class="card card-body p-4 shadow rounded-3">
							<!-- Title -->
							<h5>Customer Focus</h5>
							<!-- Content -->
							<p class="mb-0">Our business is driven by a strong customer focus, prioritizing the needs
								and satisfaction of our clients in every decision we make.</p>
						</div>
						<!-- Card END -->
					</div>
				</div><!-- Row END -->

			</div>
		</div>


		<!-- =======================
Action box START -->
		<div class="pb-0">
			<div class="my-5">

				<div class="row">
					<div class="col-12">
						<div class="bg-dark rounded-0 px-4 py-5 position-relative">
							<div class="container">
								<!-- SVG START -->
								<figure class="position-absolute top-50 start-50 translate-middle ms-2">
									<svg>
										<path class="fill-white opacity-2"
											d="m496 22.999c0 10.493-8.506 18.999-18.999 18.999s-19-8.506-19-18.999 8.507-18.999 19-18.999 18.999 8.506 18.999 18.999z">
										</path>
										<path class="fill-white opacity-2"
											d="m775 102.5c0 5.799-4.701 10.5-10.5 10.5-5.798 0-10.499-4.701-10.499-10.5 0-5.798 4.701-10.499 10.499-10.499 5.799 0 10.5 4.701 10.5 10.499z">
										</path>
										<path class="fill-white opacity-2"
											d="m192 102c0 6.626-5.373 11.999-12 11.999s-11.999-5.373-11.999-11.999c0-6.628 5.372-12 11.999-12s12 5.372 12 12z">
										</path>
										<path class="fill-white opacity-2"
											d="m20.499 10.25c0 5.66-4.589 10.249-10.25 10.249-5.66 0-10.249-4.589-10.249-10.249-0-5.661 4.589-10.25 10.249-10.25 5.661-0 10.25 4.589 10.25 10.25z">
										</path>
									</svg>
								</figure>
								<!-- SVG END -->

								<div class="row align-items-center justify-content-center g-4">
									<div class="col-lg-7 position-relative">
										<!-- Svg START -->
										<figure
											class="fill-white opacity-1 position-absolute top-50 start-0 translate-middle-y">
											<svg width="141px" height="141px">
												<path
													d="M140.520,70.258 C140.520,109.064 109.062,140.519 70.258,140.519 C31.454,140.519 -0.004,109.064 -0.004,70.258 C-0.004,31.455 31.454,-0.003 70.258,-0.003 C109.062,-0.003 140.520,31.455 140.520,70.258 Z" />
											</svg>
										</figure>
										<!-- SVG END -->

										<!-- Title -->
										<h4 class="text-white mb-0">We're on call to provide you with the best products and services
										</h4>
									</div>
									<div class="col-lg-4 text-lg-end">
										<!-- Button -->
										<a href="{{url_for('contacts')}}" class="btn btn-outline-success mb-0">Request service</a>
									</div>
								</div><!-- Row END -->
							</div>
						</div>
					</div>
				</div><!-- Row END -->

			</div>
		</div>
		<!-- =======================
Action box END -->

	</main>
	<!-- **************** MAIN CONTENT END **************** -->

	<!-- =======================
Footer START -->

	{% include 'front/includes/footer.html' %}
	<!-- =======================
Footer END -->

	<!-- Back to top -->
	<div class="back-top"><i class="bi bi-arrow-up-short"></i></div>

	<!-- =======================
JS libraries, plugins and custom scripts -->

	<!-- Bootstrap JS -->
	{% include 'front/includes/import.bottom.html' %}
	<script>
		$('.homepage-slides').owlCarousel({
			items: 1,
			dots: false,
			nav: false,
			loop: true,
			autoplay: true,
			autoplayTimeout: 5000,
			smartSpeed: 2000,
			slideSpeed: 600,
			autoplayHoverPause: true,
			//navText: ["<i class='far fa-angle-left'></i>", "<i class='far fa-angle-right'></i>"],
			responsive: {
				0: {
					items: 1,
					nav: false,
					dots: false,
				},
				600: {
					items: 1,
					nav: false,
					dots: false,
				},
				768: {
					items: 1,
					nav: false,
					dots: false,
				},
				1100: {
					items: 1,
					nav: false,
					dots: false,
				}
			}
		});
	</script>
</body>

</html>