made visual changes

css/style.css

@@ -10637,4 +10637,129 @@ textarea.form-control {
 
 .white-text {
     color: #fff;
+}
+
+
+/* Branding Color */
+.text-orange { color: #ff6600; }
+
+.header-middle {
+    background: #fff;
+}
+
+/* Control the Logo Size */
+.logo-img {
+    max-height: 70px; /* Adjust this to make the gap smaller or larger */
+    width: auto;
+    display: block;
+}
+
+/* Make the icons look more premium to match the logo */
+.icon-circle {
+    width: 45px;
+    height: 45px;
+    background: #f8f9fa;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #ff6600;
+    border: 1px solid #eee;
+}
+
+/* Styling the logo text specifically */
+.logo-text span {
+    line-height: 1.2;
+    font-size: 1.4rem;
+    color: #333;
+    text-transform: uppercase;
+}
+
+.logo-text small {
+    line-height: 1;
+    font-size: 0.8rem;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+}
+
+
+/* Remove the gap from the logo section */
+.header-middle {
+    padding-bottom: 0 !important;
+    margin-bottom: 0 !important;
+}
+
+#ftco-navbar {
+    position: relative !important;
+    /* This slides the bar UP by exactly half its own height */
+    transform: translateY(-240%) !important; 
+    z-index: 1000 !important;
+    /* These ensure no other code is dragging the hero image up */
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+}
+
+/* 2. Mobile View (Phones and Tablets) */
+@media (max-width: 600px) {
+    #ftco-navbar {
+        position: relative !important;
+        transform: translateY(0) !important; /* Resets the jump so it sits naturally */
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+        top: 0 !important;
+    }
+    
+    /* Optional: Add a little space above the menu on mobile so it doesn't touch the logo */
+    .header-middle {
+        padding-bottom: 15px !important;
+    }
+}
+
+.btn-custom {
+    display: inline-block;
+    margin-top: 20px;    /* Pushes the button away from the paragraph */
+    padding: 15px 20px;
+    background: #01081f; /* Your Navy Color */
+    color: #fff !important;
+    text-align: center;
+    width: 100%;        /* Makes buttons uniform width */
+    font-weight: 600;
+}
+
+.btn-custom:hover {
+    color: #01081f !important; /* Navy */
+    text-decoration: none;
+}
+
+/* 1. Force the container to be a Flexbox and match heights */
+.services-wrap {
+    display: flex !important;
+    flex-direction: column !important;
+    background: #fff !important;
+    height: 100% !important;
+    min-height: 480px !important; /* Adjust this number to make boxes taller/shorter */
+    margin-bottom: 60px !important;
+    position: relative !important;
+    border: 1px solid #eee;
+    padding-bottom: 50px !important; /* Adds space at the bottom for the button */
+}
+
+/* 2. Force the text area to expand and fill the box */
+.services-wrap .text {
+    display: flex !important;
+    flex-direction: column !important;
+    flex: 1 0 auto !important; /* Forces this area to grow and push the button down */
+    padding: 30px !important;
+}
+
+/* 3. Force the button to the absolute bottom */
+.services-wrap .btn-custom {
+    margin-top: auto !important; /* This ONLY works if the parent is flex */
+    margin-bottom: 10px !important;
+    display: block !important;
+    width: 100% !important;
+    background: #01081f !important;
+    color: #fff !important;
+    padding: 15px !important;
+    text-align: center;
 }

includes/header.php

@@ -48,30 +48,38 @@
             </div>
         </div>
     </div>
-    <div class="pt-4 pb-5">
+    <div class="header-middle pt-2 pb-4">
         <div class="container">
-            <div class="row d-flex align-items-start align-items-center px-3 px-md-0">
+            <div class="row d-flex align-items-center">
                 <div class="col-md-4 d-flex mb-2 mb-md-0">
-                    <a class="navbar-brand d-flex align-items-center" href="index.html">
+                    <a class="navbar-brand d-flex align-items-center" href="index.php">
-                        <span class="flaticon flaticon-crane"></span>
+                        <div class="logo-wrapper">
-                        <span class="ml-2">North East <small>Loft Boarding</small></span>
+                            <img src="<?= $URLcorrection ?>images/North-East-Loft-Boarding-Logo.png" class="logo-img" alt="NE Loft Boarding">
+                        </div>
+                        <div class="logo-text ml-2">
+                            <span class="d-block font-weight-bold">North East</span>
+                            <small class="d-block text-orange">Loft Boarding</small>
+                        </div>
                     </a>
                 </div>
+
                 <div class="col-md-4 d-flex topper mb-md-0 mb-2 align-items-center">
-                    <div class="icon d-flex justify-content-center align-items-center">
+                    <div class="icon-circle mr-3">
-                        <span class="fa fa-map"></span>
+                        <span class="fa fa-phone"></span>
                     </div>
-                    <div class="pr-md-4 pl-md-3 pl-3 text">
+                    <div class="text">
-                        <p class="con"><span>Free Call</span><span> 0191 3561008</span></p>
+                        <p class="mb-0"><span>Free Call:</span> <strong>0191 3561008</strong></p>
-                        <p class="con">Call Us Now</p>
+                        <p class="mb-0 small text-muted">Call Us Now</p>
                     </div>
                 </div>
+
                 <div class="col-md-4 d-flex topper mb-md-0 align-items-center">
-                    <div class="icon d-flex justify-content-center align-items-center"><span class="fa fa-paper-plane"></span>
+                    <div class="icon-circle mr-3">
+                        <span class="fa fa-map-marker-alt"></span>
                     </div>
-                    <div class="text pl-3 pl-md-3">
+                    <div class="text">
-                        <p class="hr"><span>Our Location</span></p>
+                        <p class="mb-0"><span>Our Location:</span></p>
-                        <p class="con">Unit 4a Fishburn Industrial Estate, Stockton -on -tee's, TS214AJ</p>
+                        <p class="mb-0 small text-muted">Stockton-on-Tees, TS21 4AJ</p>
                     </div>
                 </div>
             </div>
@@ -90,7 +98,6 @@
                     <li class="nav-item"><a href="<?= $URLcorrection ?>projects.php" class="nav-link">Projects</a></li>
                     <li class="nav-item"><a href="<?= $URLcorrection ?>contact.php" class="nav-link">Contact</a></li>
                 </ul>
-                <a href="<?= $URLcorrection ?>contact.php" class="btn-custom">Arrange a free quote</a>
             </div>
         </div>
     </nav>

index.php

@@ -54,7 +54,6 @@ include_once 'sections/discount.php';
 include_once 'sections/services.php';
 include_once 'sections/counter.php';
 include_once 'sections/projects.php';
-include_once 'sections/reviews.php';
 
 ?>
 

sections/services.php

@@ -7,7 +7,7 @@
             </div>
         </div>
         <div class="row">
-            <div class="col-md-4">
+            <div class="col-md-4 padding-bottom-20">
                 <div class="services-wrap ftco-animate">
                     <div class="img" style="background-image: url(images/boarding.jpg);"></div>
                     <div class="text">
@@ -18,7 +18,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-md-4">
+            <div class="col-md-4 padding-bottom-20">
                 <div class="services-wrap ftco-animate">
                     <div class="img" style="background-image: url(images/ladder_new.jpg);"></div>
                     <div class="text">
@@ -29,7 +29,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-md-4">
+            <div class="col-md-4 padding-bottom-20">
                 <div class="services-wrap ftco-animate">
                     <div class="img" style="background-image: url(images/wooden-hatch.jpg);"></div>
                     <div class="text">
@@ -42,7 +42,7 @@
             </div>
         </div>
         <div class="row">
-            <div class="col-md-4">
+            <div class="col-md-4 padding-bottom-20">
                 <div class="services-wrap ftco-animate">
                     <div class="img" style="background-image: url(images/lighting.jpg);"></div>
                     <div class="text">
@@ -53,7 +53,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-md-4">
+            <div class="col-md-4 padding-bottom-20">
                 <div class="services-wrap ftco-animate">
                     <div class="img" style="background-image: url(images/insulation-1.jpg);"></div>
                     <div class="text">
@@ -64,7 +64,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-md-4">
+            <div class="col-md-4 padding-bottom-20">
                 <div class="services-wrap ftco-animate">
                     <div class="img" style="background-image: url(images/roofliner.jpg);"></div>
                     <div class="text">
@@ -77,4 +77,66 @@
             </div>
         </div>
     </div>
+</section>
+
+<section class="padding-bottom-50 padding-top-50" style="background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%); position: relative;">
+    <div class="container" style="position: relative; z-index: 2;">
+        <div class="row">
+            <div class="col-lg-8 col-md-12 mx-auto text-center text-white">
+                <h2 style="color: white; margin-bottom: 20px; font-size: 2.5rem;">Transform Your Loft Today</h2>
+                <p style="font-size: 20px; margin-bottom: 30px; opacity: 0.9;">Join thousands of satisfied customers across the UK with professional hatch solutions</p>
+
+                <div class="row mt-4 mb-4">
+                    <div class="col-md-4 col-6 text-center mb-3">
+                        <div style="background: rgba(255,255,255,0.1); padding: 20px; border-radius: 15px;">
+                            <h4 class="white-text" style="margin: 0; font-weight: bold;">10000+</h4>
+                            <small style="color: white; opacity: 0.8;">Jobs Completed</small>
+                        </div>
+                    </div>
+                    <div class="col-md-4 col-6 text-center mb-3">
+                        <div style="background: rgba(255,255,255,0.1); padding: 20px; border-radius: 15px;">
+                            <h4 class="white-text" style="margin: 0; font-weight: bold;">100%</h4>
+                            <small style="color: white; opacity: 0.8;">NHBC Compliant</small>
+                        </div>
+                    </div>
+                    <div class="col-md-4 col-6 text-center mb-3">
+                        <div style="background: rgba(255,255,255,0.1); padding: 20px; border-radius: 15px;">
+                            <h4 class="white-text" style="margin: 0; font-weight: bold;">10 Year</h4>
+                            <small style="color: white; opacity: 0.8;">Product Warranty</small>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="mt-4 mb-4">
+                    <a href="<?= $URLcorrection ?>contact" class="btn customer-quote-button btn-lg mr-3" style="padding: 18px 35px; border-radius: 30px; font-size: 18px; font-weight: 600; box-shadow: 0 5px 15px rgba(0,0,0,0.3);">
+                        <i class="fas fa-calculator"></i> Get Free Quote & Survey
+                    </a>
+                    <a href="<?= $URLcorrection ?>pricing" class="btn btn-outline-light btn-lg" style="padding: 18px 35px; border-radius: 30px; font-size: 18px; font-weight: 600; border: 2px solid white;">
+                        <i class="fas fa-eye"></i> View Our Pricing
+                    </a>
+                </div>
+
+                <div style="background: rgba(255,255,255,0.1); padding: 25px; border-radius: 15px; margin-top: 30px;">
+                    <div class="row text-center">
+                        <div class="col-md-3 col-6 mb-2">
+                            <i class="fas fa-check-circle" style="color: #27ae60; margin-right: 8px;"></i>
+                            <small style="color: white;">Free Survey</small>
+                        </div>
+                        <div class="col-md-3 col-6 mb-2">
+                            <i class="fas fa-check-circle" style="color: #27ae60; margin-right: 8px;"></i>
+                            <small style="color: white;">Professional Installation</small>
+                        </div>
+                        <div class="col-md-3 col-6 mb-2">
+                            <i class="fas fa-check-circle" style="color: #27ae60; margin-right: 8px;"></i>
+                            <small style="color: white;">Energy Efficient</small>
+                        </div>
+                        <div class="col-md-3 col-6 mb-2">
+                            <i class="fas fa-check-circle" style="color: #27ae60; margin-right: 8px;"></i>
+                            <small style="color: white;">10-Year Warranty</small>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </section>