From 6d432b5d2bb075dae57a43a96206967eb2db2592 Mon Sep 17 00:00:00 2001
From: Gary <gary@acorn-media.co.uk>
Date: Thu, 8 May 2025 09:54:36 +0100
Subject: [PATCH] Fix service section file inclusion and update services layout
 for better presentation

---
 index.php             |   2 +-
 sections/services.php | 280 ++++++++++++++++++++++--------------------
 2 files changed, 147 insertions(+), 135 deletions(-)

diff --git a/index.php b/index.php
index a630425..98fff9a 100644
--- a/index.php
+++ b/index.php
@@ -8,7 +8,7 @@ include_once $URLcorrection . "includes/nav.php";
 include_once $URLcorrection . "includes/index-hero.php";
 include_once $URLsorrection . "sections/about-us.php";
 include_once $URLcorrection . "sections/counter.php";
-include_once $URLcorrection . "sections/services-2.php";
+include_once $URLcorrection . "sections/services.php";
 include_once $URLcorrection . "sections/projectsphp";
 include_once $URLcorrection . "sections/reviews.php";
 include_once $URLcorrection . "includes/footer.php";
diff --git a/sections/services.php b/sections/services.php
index 466f156..db75194 100644
--- a/sections/services.php
+++ b/sections/services.php
@@ -1,141 +1,153 @@
 <section class="ftco-section">
     	<div class="container">
-    		<div class="row justify-content-center mb-5">
-          <div class="col-md-8 text-center heading-section ftco-animate">
-            <h2 class="mb-4">Our Best Services</h2>
+    		<div class="row justify-content-center pb-5 mb-3">
+          <div class="col-md-7 heading-section text-center ftco-animate">
+          	<span class="subheading">The Roofing Specialists</span>
+            <h2>Our Services</h2>
           </div>
         </div>
-        <div class="row">
-        	<div class="col-lg-9">
-		  			<div class="row tabulation mt-4 ftco-animate">
-		  				<div class="col-md-4">
-								<ul class="nav nav-pills nav-fill d-md-flex d-block flex-column">
-								  <li class="nav-item text-left">
-								    <a class="nav-link active py-4" data-toggle="tab" href="#services-1"><span class="flaticon-roof mr-2"></span> UPVC Rooflines</a>
-								  </li>
-								  <li class="nav-item text-left">
-								    <a class="nav-link py-4" data-toggle="tab" href="#services-2"><span class="flaticon-roof-1 mr-2"></span> Fascias</a>
-								  </li>
-								  <li class="nav-item text-left">
-								    <a class="nav-link py-4" data-toggle="tab" href="#services-3"><span class="flaticon-roof-5 mr-2"></span> Soffits</a>
-								  </li>
-								  <li class="nav-item text-left">
-								    <a class="nav-link py-4" data-toggle="tab" href="#services-4"><span class="flaticon-roof-2 mr-2"></span> Guttering</a>
-								  </li>
-								  <li class="nav-item text-left">
-								    <a class="nav-link py-4" data-toggle="tab" href="#services-5"><span class="flaticon-roof-3 mr-2"></span> Roof Repairs</a>
-								  </li>
-								  <li class="nav-item text-left">
-								    <a class="nav-link border-bottom py-4" data-toggle="tab" href="#services-6"><span class="flaticon-roof-4 mr-2"></span> Ridges Pointed</a>
-								  </li>
-								  <li class="nav-item text-left">
-								    <a class="nav-link border-bottom py-4" data-toggle="tab" href="#services-7"><span class="flaticon-roof-4 mr-2"></span> Valleys Repointed</a>
-								  </li>
-								  <li class="nav-item text-left">
-								    <a class="nav-link border-bottom py-4" data-toggle="tab" href="#services-8"><span class="flaticon-roof-4 mr-2"></span> Gutter Cleaning</a>
-								  </li>
-								  <li class="nav-item text-left">
-								    <a class="nav-link border-bottom py-4" data-toggle="tab" href="#services-9"><span class="flaticon-roof-4 mr-2"></span> Leaks Repaired</a>
-								  </li>
-								  <li class="nav-item text-left">
-								    <a class="nav-link border-bottom py-4" data-toggle="tab" href="#services-10"><span class="flaticon-roof-4 mr-2"></span> Flat Roof</a>
-								  </li>
-								  <li class="nav-item text-left">
-								    <a class="nav-link border-bottom py-4" data-toggle="tab" href="#services-11"><span class="flaticon-roof-4 mr-2"></span> New Roof</a>
-								  </li>
-								  <li class="nav-item text-left">
-								    <a class="nav-link border-bottom py-4" data-toggle="tab" href="#services-12"><span class="flaticon-roof-4 mr-2"></span> Re-Roofs</a>
-								  </li>
-								  <li class="nav-item text-left">
-								    <a class="nav-link border-bottom py-4" data-toggle="tab" href="#services-13"><span class="flaticon-roof-4 mr-2"></span> Roof Cleaning</a>
-								  </li>
-								  <li class="nav-item text-left">
-								    <a class="nav-link border-bottom py-4" data-toggle="tab" href="#services-14"><span class="flaticon-roof-4 mr-2"></span> Moss Removal</a>
-								  </li>
-								</ul>
-							</div>
-							<div class="col-md-8 pl-md-4">
-								<div class="tab-content">
-								  <div class="tab-pane container p-0 active" id="services-1">
-								  	<h3><a href="#">Skylights</a></h3>
-								  	<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
-								  	<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
-								  	<ul>
-								  		<li><span class="fa fa-check"></span>The Big Oxmox advised her not to do so</li>
-								  		<li><span class="fa fa-check"></span>Far far away, behind the word mountains</li>
-								  		<li><span class="fa fa-check"></span>Separated they live in Bookmarksgrove</li>
-								  		<li><span class="fa fa-check"></span>She packed her seven versalia</li>
-								  		<li><span class="fa fa-check"></span>Little Blind Text didn’t listen</li>
-								  	</ul>
+    		<div class="row">
+          <div class="col-md-4 services ftco-animate">
+            <div class="d-block d-flex">
+              <div class="icon d-flex justify-content-center align-items-center">
+            		<span><i class="fa-solid fa-window-minimize"></i></span>
+              </div>
+              <div class="media-body pl-3">
+                <h3 class="heading">UPVC Roofline</h3>
+                <p><a href="#" class="btn-custom">Read more</a></p>
+              </div>
+            </div>
+            <div class="d-block d-flex">
+              <div class="icon d-flex justify-content-center align-items-center">
+                <span><i class="fa-solid fa-circle"></i></span>
+              </div>
+              <div class="media-body pl-3">
+                <h3 class="heading">Fascias</h3>
+                <p><a href="#" class="btn-custom">Read more</a></p>
+              </div>
+            </div> 
+            <div class="d-block d-flex">
+              <div class="icon d-flex justify-content-center align-items-center">
+                <span><i class="fa-solid fa-trowel-bricks"></i></span>
+              </div>
+              <div class="media-body pl-3">
+                <h3 class="heading">Valleys Repointed</h3>
+                <p><a href="#" class="btn-custom">Read more</a></p>
+              </div>
+            </div> 
+            <div class="d-block d-flex">
+              <div class="icon d-flex justify-content-center align-items-center">
+                <span><i class="fa-solid fa-window-minimize"></i></span>
+              </div>
+              <div class="media-body pl-3">
+                <h3 class="heading">Flat Roof</h3>
+                <p><a href="#" class="btn-custom">Read more</a></p>
+              </div>
+            </div> 
+            <div class="d-block d-flex">
+              <div class="icon d-flex justify-content-center align-items-center">
+                <span><i class="fa-solid fa-soap"></i></span>
+              </div>
+              <div class="media-body pl-3">
+                <h3 class="heading">Roof Cleaning</h3>
+                <p><a href="#" class="btn-custom">Read more</a></p>
+              </div>
+            </div>
 
-								  </div>
-								  <div class="tab-pane container p-0 fade" id="services-2">
-								  	<h3><a href="#">Waterproofing</a></h3>
-								  	<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
-								  	<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
-								  	<ul>
-								  		<li><span class="fa fa-check"></span>The Big Oxmox advised her not to do so</li>
-								  		<li><span class="fa fa-check"></span>Far far away, behind the word mountains</li>
-								  		<li><span class="fa fa-check"></span>Separated they live in Bookmarksgrove</li>
-								  		<li><span class="fa fa-check"></span>She packed her seven versalia</li>
-								  		<li><span class="fa fa-check"></span>Little Blind Text didn’t listen</li>
-								  	</ul>
-								  </div>
-								  <div class="tab-pane container p-0 fade" id="services-3">
-								  	<h3><a href="#">Industrial Roofing</a></h3>
-								  	<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
-								  	<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
-								  	<ul>
-								  		<li><span class="fa fa-check"></span>The Big Oxmox advised her not to do so</li>
-								  		<li><span class="fa fa-check"></span>Far far away, behind the word mountains</li>
-								  		<li><span class="fa fa-check"></span>Separated they live in Bookmarksgrove</li>
-								  		<li><span class="fa fa-check"></span>She packed her seven versalia</li>
-								  		<li><span class="fa fa-check"></span>Little Blind Text didn’t listen</li>
-								  	</ul>
-								  </div>
-								  <div class="tab-pane container p-0 fade" id="services-4">
-								  	<h3><a href="#">Residential Roofing</a></h3>
-								  	<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
-								  	<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
-								  	<ul>
-								  		<li><span class="fa fa-check"></span>The Big Oxmox advised her not to do so</li>
-								  		<li><span class="fa fa-check"></span>Far far away, behind the word mountains</li>
-								  		<li><span class="fa fa-check"></span>Separated they live in Bookmarksgrove</li>
-								  		<li><span class="fa fa-check"></span>She packed her seven versalia</li>
-								  		<li><span class="fa fa-check"></span>Little Blind Text didn’t listen</li>
-								  	</ul>
-								  </div>
-								  <div class="tab-pane container p-0 fade" id="services-5">
-								  	<h3><a href="#">Gutter Cleaning</a></h3>
-								  	<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
-								  	<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
-								  	<ul>
-								  		<li><span class="fa fa-check"></span>The Big Oxmox advised her not to do so</li>
-								  		<li><span class="fa fa-check"></span>Far far away, behind the word mountains</li>
-								  		<li><span class="fa fa-check"></span>Separated they live in Bookmarksgrove</li>
-								  		<li><span class="fa fa-check"></span>She packed her seven versalia</li>
-								  		<li><span class="fa fa-check"></span>Little Blind Text didn’t listen</li>
-								  	</ul>
-								  </div>
-								  <div class="tab-pane container p-0 fade" id="services-6">
-								  	<h3><a href="#">Commercial Roofing</a></h3>
-								  	<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
-								  	<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
-								  	<ul>
-								  		<li><span class="fa fa-check"></span>The Big Oxmox advised her not to do so</li>
-								  		<li><span class="fa fa-check"></span>Far far away, behind the word mountains</li>
-								  		<li><span class="fa fa-check"></span>Separated they live in Bookmarksgrove</li>
-								  		<li><span class="fa fa-check"></span>She packed her seven versalia</li>
-								  		<li><span class="fa fa-check"></span>Little Blind Text didn’t listen</li>
-								  	</ul>
-								  </div>
-								</div>
-							</div>
-						</div>
-					</div>
-					<div class="col-lg-3 d-flex align-items-stretch">
-						<div class="img" style="background-image: url(images/about.jpg);"></div>
-					</div>
-				</div>
+          </div>
+          <div class="col-md-4 services ftco-animate">
+            <div class="d-block d-flex">
+              <div class="icon d-flex justify-content-center align-items-center">
+                <span><i class="fa-solid fa-square-minus"></i></span>
+              </div>
+              <div class="media-body pl-3">
+                <h3 class="heading">Soffits</h3>
+                <p><a href="#" class="btn-custom">Read more</a></p>
+              </div>
+            </div> 
+            <div class="d-block d-flex">
+              <div class="icon d-flex justify-content-center align-items-center">
+                <span><i class="fa-solid fa-water"></i></span>
+              </div>
+              <div class="media-body pl-3">
+                <h3 class="heading">Guttering</h3>
+                <p><a href="#" class="btn-custom">Read more</a></p>
+              </div>
+            </div>  
+            <div class="d-block d-flex">
+              <div class="icon d-flex justify-content-center align-items-center">
+                <span><i class="fa-solid fa-soap"></i></span>
+              </div>
+              <div class="media-body pl-3">
+                <h3 class="heading">Gutter Cleaning</h3>
+                <p><a href="#" class="btn-custom">Read more</a></p>
+              </div>
+            </div>  
+            <div class="d-block d-flex">
+              <div class="icon d-flex justify-content-center align-items-center">
+                <span><i class="fa-solid fa-people-roof"></i></span>
+              </div>
+              <div class="media-body pl-3">
+                <h3 class="heading">New Roof</h3>
+                <p><a href="#" class="btn-custom">Read more</a></p>
+              </div>
+            </div>
+            <div class="d-block d-flex">
+              <div class="icon d-flex justify-content-center align-items-center">
+                <span><i class="fa-solid fa-eraser"></i></span>
+              </div>
+              <div class="media-body pl-3">
+                <h3 class="heading">Moss Removal</h3>
+                <p><a href="#" class="btn-custom">Read more</a></p>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-md-4 services ftco-animate">
+            <div class="d-block d-flex">
+              <div class="icon d-flex justify-content-center align-items-center">
+                <span><i class="fa-solid fa-hammer"></i></span>
+              </div>
+              <div class="media-body pl-3">
+                <h3 class="heading">Roof Repairs</h3>
+                <p><a href="#" class="btn-custom">Read more</a></p>
+              </div>
+            </div>
+            <div class="d-block d-flex">
+              <div class="icon d-flex justify-content-center align-items-center">
+                <span><i class="fa-solid fa-trowel-bricks"></i></span>
+              </div>
+              <div class="media-body pl-3">
+                <h3 class="heading">Ridges Pointed</h3>
+                <p><a href="#" class="btn-custom">Read more</a></p>
+              </div>
+            </div>  
+            
+             
+            <div class="d-block d-flex">
+              <div class="icon d-flex justify-content-center align-items-center">
+                <span><i class="fa-solid fa-droplet"></i></span>
+              </div>
+              <div class="media-body pl-3">
+                <h3 class="heading">Leaks Repaired</h3>
+                <p><a href="#" class="btn-custom">Read more</a></p>
+                <br>
+              </div>
+            </div>  
+            
+            
+            <div class="d-block d-flex">
+              <div class="icon d-flex justify-content-center align-items-center">
+                <span><i class="fa-solid fa-people-roof"></i></span>
+              </div>
+              <div class="media-body pl-3">
+                <h3 class="heading">Re-Roofs</h3>
+                <p><a href="#" class="btn-custom">Read more</a></p>
+              </div>
+            </div>
+            
+            
+          </div>
+        </div>
     	</div>
     </section>
\ No newline at end of file