Files

1796 lines
74 KiB
HTML
Executable File
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title -->
<title>LeafLine | Gardening and Landscaping Website</title>
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="./assets/images/favicon.ico">
<!-- Font-Awesome (CSS) -->
<link rel="stylesheet" href="./assets/vendors/font-awesome/css/all.min.css">
<!-- Magnific-Popup (CSS) -->
<link rel="stylesheet" href="./assets/vendors/magnific-popup/magnific-popup.css">
<!-- Swiper (CSS) -->
<link rel="stylesheet" href="./assets/vendors/swiper/swiper-bundle.min.css">
<!-- Custom Stylesheets -->
<link rel="stylesheet" href="./assets/css/main.css">
<link rel="stylesheet" href="./assets/css/responsive.css">
</head>
<body>
<!-- ==================== Scroll-Top Area (Start) ==================== -->
<a href="#" class="scroll-top">
<i class="fa-solid fa-arrow-up-long"></i>
</a>
<!-- ==================== Scroll-Top Area (End) ==================== -->
<!-- ==================== Header Area (Start) ==================== -->
<header class="header">
<!-- ===== Header-1 Area (Start) ===== -->
<div class="header-1">
<!-- == Contacts == -->
<ul class="header-contacts">
<li><i class="fa-solid fa-location-dot"></i><span>LeafLine Company</span></li>
<li><i class="fa-solid fa-phone"></i><span>+123-456-7890</span></li>
<li><i class="fa-solid fa-envelope"></i><span class="gmail">info@leafline.com</span></li>
</ul>
<!-- == Social == -->
<ul class="social-contacts">
<li><a href="#" class="fab fa-facebook-f"></a></li>
<li><a href="#" class="fa-brands fa-x-twitter"></a></li>
<li><a href="#" class="fab fa-instagram"></a></li>
<li><a href="#" class="fab fa-linkedin"></a></li>
</ul>
</div>
<!-- ===== Header-1 Area (End) ===== -->
<!-- ===== Header-2 Area (Start) ===== -->
<div class="header-2">
<!-- == Logo == -->
<a class="logo" href="./index.html">
<img src="./assets/images/Logo/Logo.png" alt="logo">
<div class="logo-content">
<h3>LeafLine</h3>
<p>Gardening & Landscaping</p>
</div>
</a>
<div class="container">
<!-- == Navbar == -->
<nav class="navbar">
<a class="nav-btn" href="./index.html">home</a>
<div class="dropdown-menu">
<button class="nav-btn">about</button>
<div class="dropdown-content">
<a href="./pages/About/About.html">about us</a>
<a href="./pages/About/WhyUs.html">Why Choose Us</a>
<a href="./pages/About/History.html">History</a>
<a href="./pages/About/Team.html">Team</a>
<a href="./pages/About/Team-Single.html">Team Single</a>
<a href="./pages/About/Testimonials.html">testimonials</a>
<a href="./pages/About/FAQs.html">FAQs</a>
</div>
</div>
<div class="dropdown-menu">
<button class="nav-btn">Pages</button>
<div class="dropdown-content">
<a href="./pages/Pages/Gallery.html">Gallery</a>
<a href="./pages/Pages/Pricing.html">Pricing</a>
<a href="./pages/Pages/Process.html">work process</a>
<a href="./pages/Pages/Awards.html">Awards</a>
<div class="side-dropdown">
<button>Event</button> <i class="fa-solid fa-chevron-right"></i>
<div class="dropdown-content">
<a href="./pages/Pages/Events.html">Events</a>
<a href="./pages/Pages/Event-Single.html">Event Single</a>
</div>
</div>
<div class="side-dropdown">
<button>Career</button> <i class="fa-solid fa-chevron-right"></i>
<div class="dropdown-content">
<a href="./pages/Pages/Careers.html">Careers</a>
<a href="./pages/Pages/Career-Single.html">Career Single</a>
<a href="./pages/Pages/Career-Form.html">Career Form</a>
</div>
</div>
<div class="side-dropdown">
<button>Information Hub</button> <i class="fa-solid fa-chevron-right"></i>
<div class="dropdown-content">
<a href="./pages/Pages/Not-Found.html">Not Found</a>
<a href="./pages/Pages/Privacy-Policy.html">Privacy Policy</a>
<a href="./pages/Pages/Terms.html">Terms & Condition</a>
</div>
</div>
<a href="./pages/Pages/Cost-Calculator.html">cost calculator</a>
<a href="./pages/Pages/Get-Quote.html">get a quote</a>
<a href="./pages/Pages/Clients.html">clients</a>
</div>
</div>
<div class="dropdown-menu">
<button class="nav-btn">Service</button>
<div class="dropdown-content">
<a href="./pages/Service/Services.html">Services</a>
<a href="./pages/Service/Service-Single.html">Service Single</a>
</div>
</div>
<div class="dropdown-menu">
<button class="nav-btn">Project</button>
<div class="dropdown-content">
<a href="./pages/Project/Projects.html">Projects</a>
<a href="./pages/Project/Project-Single.html">Project Single</a>
</div>
</div>
<div class="dropdown-menu">
<button class="nav-btn">blog</button>
<div class="dropdown-content">
<a href="./pages/Blog/Blog-Grid.html">blogs grid</a>
<a href="./pages/Blog/Blog-List.html">blogs list</a>
<a href="./pages/Blog/Blog-Single.html">blog Single</a>
</div>
</div>
<div class="dropdown-menu">
<button class="nav-btn">shop</button>
<div class="dropdown-content">
<a href="./pages/Shop/Shop-Grid.html">shop grid</a>
<a href="./pages/Shop/Shop-List.html">shop list</a>
<a href="./pages/Shop/Product-Single.html">product Single</a>
<a href="./pages/Shop/Wishlist.html">wishlist</a>
<a href="./pages/Shop/Cart.html">cart</a>
<a href="./pages/Shop/Checkout.html">checkout</a>
<a href="./pages/Shop/Login.html">login</a>
<a href="./pages/Shop/Register.html">register</a>
<a href="./pages/Shop/Reset-Password.html">forgot Password</a>
</div>
</div>
<a class="nav-btn" href="./pages/Contact/Contact.html">contact</a>
</nav>
<!-- == Icon Container == -->
<div class="icon-container">
<div id="search-btn" class="icon fa-solid fa-magnifying-glass"></div> <!-- Search Icon -->
<div id="menu-btn" class="icon fa-solid fa-bars-staggered"></div>
<a href="./pages/Pages/Get-Quote.html" class="btn">get A quote</a>
</div>
<!-- == Search Container == -->
<form class="search-container">
<input type="search" id="search-bar" placeholder="search here" required> <!-- Search Input -->
<button type="submit"><i class="fas fa-search"></i></button> <!-- Submit Button -->
</form>
</div>
</div>
<!-- ===== Header-2 Area (End) ===== -->
<!-- ===== Mobile Menu Area (Start) ===== -->
<div class="mobile-menu">
<nav class="mobile-navbar">
<div class="nav-link">
<div class="main-nav-link"> <a class="nav-btn" href="./index.html">home</a> </div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <div class="nav-btn">about</div> <i class="fas fa-plus"></i> </div>
<div class="sub-nav-link">
<a href="./pages/About/About.html">about us</a>
<a href="./pages/About/WhyUs.html">Why Choose Us</a>
<a href="./pages/About/History.html">History</a>
<a href="./pages/About/Team.html">Team</a>
<a href="./pages/About/Team-Single.html">Team Single</a>
<a href="./pages/About/Testimonials.html">testimonials</a>
<a href="./pages/About/FAQs.html">FAQs</a>
</div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <div class="nav-btn">pages</div> <i class="fas fa-plus"></i> </div>
<div class="sub-nav-link">
<a href="./pages/Pages/Gallery.html">Gallery</a>
<a href="./pages/Pages/Pricing.html">Pricing</a>
<a href="./pages/Pages/Process.html">work process</a>
<a href="./pages/Pages/Awards.html">Awards</a>
<a href="./pages/Pages/Events.html">Events</a>
<a href="./pages/Pages/Event-Single.html">Event Single</a>
<a href="./pages/Pages/Careers.html">Careers</a>
<a href="./pages/Pages/Career-Single.html">Career Single</a>
<a href="./pages/Pages/Career-Form.html">Career Form</a>
<a href="./pages/Pages/Not-Found.html">Not Found</a>
<a href="./pages/Pages/Privacy-Policy.html">Privacy Policy</a>
<a href="./pages/Pages/Terms.html">Terms & Condition</a>
<a href="./pages/Pages/Cost-Calculator.html">cost calculator</a>
<a href="./pages/Pages/Get-Quote.html">get a quote</a>
<a href="./pages/Pages/Clients.html">clients</a>
</div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <div class="nav-btn">Service</div> <i class="fas fa-plus"></i> </div>
<div class="sub-nav-link">
<a href="./pages/Service/Services.html">Services</a>
<a href="./pages/Service/Service-Single.html">Service Single</a>
</div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <div class="nav-btn">Project</div> <i class="fas fa-plus"></i> </div>
<div class="sub-nav-link">
<a href="./pages/Project/Projects.html">Projects</a>
<a href="./pages/Project/Project-Single.html">Project Single</a>
</div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <div class="nav-btn">blog</div> <i class="fas fa-plus"></i> </div>
<div class="sub-nav-link">
<a href="./pages/Blog/Blog-Grid.html">blogs grid</a>
<a href="./pages/Blog/Blog-List.html">blogs list</a>
<a href="./pages/Blog/Blog-Single.html">blog Single</a>
</div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <div class="nav-btn">Shop</div> <i class="fas fa-plus"></i> </div>
<div class="sub-nav-link">
<a href="./pages/Shop/Shop-Grid.html">shop grid</a>
<a href="./pages/Shop/Shop-List.html">shop list</a>
<a href="./pages/Shop/Product-Single.html">product Single</a>
<a href="./pages/Shop/Wishlist.html">wishlist</a>
<a href="./pages/Shop/Cart.html">cart</a>
<a href="./pages/Shop/Checkout.html">checkout</a>
<a href="./pages/Shop/Login.html">login</a>
<a href="./pages/Shop/Register.html">register</a>
<a href="./pages/Shop/Reset-Password.html">forgot Password</a>
</div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <a class="nav-btn" href="./pages/Contact/Contact.html">contact</a> </div>
</div>
</nav>
</div>
<!-- ===== Mobile Menu Area (End) ===== -->
</header>
<!-- ==================== Header Area (End) ==================== -->
<!-- ==================== Home-Slider Area (Start) ==================== -->
<section class="home">
<!-- Home Slider -->
<div class="swiper-container home-slider">
<div class="swiper-wrapper">
<!-- Home Slide-1 -->
<div class="swiper-slide home-item">
<img src="./assets/images/Home/Home-1.jpg" alt="LeafLine Gardening and Landscaping"> <!-- Slide Image -->
<div class="content">
<div class="text">
<h5>Welcome to LeafLine <i class="fa-brands fa-pagelines"></i></h5> <!-- Slide Subheading -->
<h3>Professional <span>Gardening & Landscaping</span> Solutions</h3> <!-- Slide Heading -->
<a href="./pages/Contact/Contact.html" class="btn">Get in Touch</a> <!-- Contact Page Button -->
</div>
</div>
</div>
<!-- Home Slide-2 -->
<div class="swiper-slide home-item">
<img src="./assets/images/Home/Home-2.jpg" alt="LeafLine Garden Design Services"> <!-- Slide Image -->
<div class="content">
<div class="text">
<h5>LeafLine Green Perfection <i class="fa-brands fa-pagelines"></i></h5> <!-- Slide Subheading -->
<h3>Creative <span>Garden Design & Installation</span> Services</h3> <!-- Slide Heading -->
<a href="./pages/Contact/Contact.html" class="btn">Request a Quote</a> <!-- Contact Page Button -->
</div>
</div>
</div>
<!-- Home Slide-3 -->
<div class="swiper-slide home-item">
<img src="./assets/images/Home/Home-3.jpg" alt="LeafLine Custom Landscaping"> <!-- Slide Image -->
<div class="content">
<div class="text">
<h5>Your Landscape, Our Passion <i class="fa-brands fa-pagelines"></i></h5> <!-- Slide Subheading -->
<h3>Custom <span>Landscaping & Outdoor</span> Creations</h3> <!-- Slide Heading -->
<a href="./pages/Contact/Contact.html" class="btn">Contact Us</a> <!-- Contact Page Button -->
</div>
</div>
</div>
</div>
<!-- Home Slider Pagination -->
<div class="swiper-pagination swiper-pagination1"></div>
<!-- Home Slider Navigation arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</section>
<!-- ==================== Home-Slider Area (End) ==================== -->
<!-- ==================== Features Area (Start) =================== -->
<section class="features">
<div class="box-container">
<!-- Feature 1 - Plant Variety -->
<div class="feature-item">
<i class="fas fa-seedling"></i> <!-- Seedling icon -->
<h3>Wide Plant<br>Variety</h3>
<p>Explore rich collection of vibrant shrubs & trees to beautify outdoor space.</p>
</div>
<!-- Feature 2 - Expert Consultation -->
<div class="feature-item">
<i class="fas fa-tools"></i> <!-- Tools icon -->
<h3>Expert<br>Consultation</h3>
<p>Get professional guidance for garden design, & perfect landscape planning.</p>
</div>
<!-- Feature 3 - Custom Landscaping -->
<div class="feature-item">
<i class="fas fa-paint-roller"></i> <!-- Paint roller icon -->
<h3>Custom<br>Landscaping</h3>
<p>We design personalized landscapes blend beauty & balance effortlessly.</p>
</div>
<!-- Feature 4 - Eco-Friendly Solutions -->
<div class="feature-item">
<i class="fas fa-recycle"></i> <!-- Recycling icon -->
<h3>Eco-Friendly<br>Solutions</h3>
<p>Incorporating gardening methods to create healthier outdoor environments.</p>
</div>
</div>
</section>
<!-- ==================== Features Area (End) ==================== -->
<!-- ==================== About Area (Start) ==================== -->
<section class="about">
<!-- About Image -->
<div class="image">
<div class="sub-image first">
<img src="./assets/images/About/About-1.jpg" alt="LeafLine Gardening Team">
</div>
<div class="sub-image last">
<img src="./assets/images/About/About-2.jpg" alt="LeafLine Landscaping Experts">
<div class="experience"><div><span>35</span> Years of Experience</div></div>
</div>
</div>
<!-- Introduction Content -->
<div class="content">
<div class="heading">
<div class="sub"><span>About Us</span><i class="fa-brands fa-pagelines"></i></div> <!-- Sub Heading -->
<h2>Growing Beauty with Passion & Expertise</h2> <!-- Main Heading -->
</div>
<!-- Description -->
<p>At LeafLine, we bring nature closer to you with innovative gardening solutions. With over three decades of expertise, our team combines creativity to design outdoor spaces that inspire tranquility.</p>
<!-- Key Features -->
<div class="about-features">
<div class="point-item">
<i class="fa-solid fa-pencil-ruler"></i>
<div>
<h3>Tailored Designs</h3>
<p>We create unique garden customized to your space preferences for lasting elegance.</p>
</div>
</div> <!-- Feature 1 -->
<div class="point-item">
<i class="fa-solid fa-seedling"></i>
<div>
<h3>Landscaping Service</h3>
<p>From concept our experts craft stunning landscapes using sustainable practices.</p>
</div>
</div> <!-- Feature 2 -->
</div>
<a href="./pages/Contact/Contact.html" class="btn">Contact Us</a> <!-- Contact Page Button -->
</div>
</section>
<!-- ==================== About Area (End) ====================== -->
<!-- ==================== Awards Area (Start) ==================== -->
<section class="awards main linear-bg">
<!-- Section Heading -->
<div class="heading">
<div class="sub"><i class="fa-brands fa-pagelines"></i><span>Green Thumb Excellence</span><i class="fa-brands fa-pagelines"></i></div>
<h2>Our Awards</h2>
</div>
<div class="box-container">
<!-- Award 1 -->
<div class="award-item">
<h3>Best<br>Garden Design</h3>
<div class="middle"><div class="tag"><span>by Green Award</span></div></div>
<p>Recognized for outstanding creativity & innovation in residential design <span>2025</span></p>
</div>
<!-- Award 2 -->
<div class="award-item">
<h3>Eco-Friendly<br>Initiative Award</h3>
<div class="middle"><div class="tag"><span>by NC Council</span></div></div>
<p>Honored for promoting sustainable gardening conscious landscaping <span>2024</span></p>
</div>
<!-- Award 3 -->
<div class="award-item">
<h3>Excellence in<br>Maintenance</h3>
<div class="middle"><div class="tag"><span>by GdPro Magazine</span></div></div>
<p>Awarded for maintaining premium gardens with care, and eco-sensitivity <span>2023</span></p>
</div>
<!-- Award 4 -->
<div class="award-item">
<h3>Outstanding<br>Services</h3>
<div class="middle"><div class="tag"><span>by Green Awards</span></div></div>
<p>Recognized for delivering exceptional customer satisfaction solutions <span>2022</span></p>
</div>
</div>
</section>
<!-- ==================== Awards Area (End) ====================== -->
<!-- ==================== Process Slider Area (Start) ==================== -->
<section class="process">
<!-- Section Heading -->
<div class="heading">
<div class="sub"><i class="fa-brands fa-pagelines"></i><span>how we work</span><i class="fa-brands fa-pagelines"></i></div>
<h2>Our Process</h2>
</div>
<!-- Process Slider -->
<div class="swiper-container process-slider">
<div class="swiper-wrapper">
<!-- Step 1: Site Consultation -->
<div class="swiper-slide process-item">
<img src="./assets/images/Process/Process-1.jpg" alt="Site Consultation">
<div class="content">
<h3>Site<br>Consultation</h3>
<h6><span>01</span></h6>
<p>We begin with a on-site consultation to understand your goals, & space.</p>
</div>
</div>
<!-- Step 2: Concept & Design -->
<div class="swiper-slide process-item">
<img src="./assets/images/Process/Process-2.jpg" alt="Concept & Design">
<div class="content">
<h3>Concept &<br>Design</h3>
<h6><span>02</span></h6>
<p>Our design experts craft a detailed plan that perfectly balances creativity.</p>
</div>
</div>
<!-- Step 3: Planting & Installation -->
<div class="swiper-slide process-item">
<img src="./assets/images/Process/Process-3.jpg" alt="Planting & Installation">
<div class="content">
<h3>Planting &<br>Installation</h3>
<h6><span>03</span></h6>
<p>We bring your vision to life with expert planting touches that elevate space.</p>
</div>
</div>
<!-- Step 4: Irrigation & Care -->
<div class="swiper-slide process-item">
<img src="./assets/images/Process/Process-4.jpg" alt="Irrigation & Care">
<div class="content">
<h3>Irrigation &<br>Care</h3>
<h6><span>04</span></h6>
<p>We install irrigation systems maintenance to keep your garden thriving.</p>
</div>
</div>
<!-- Step 5: Quality Inspection -->
<div class="swiper-slide process-item">
<img src="./assets/images/Process/Process-5.jpg" alt="Quality Inspection">
<div class="content">
<h3>Quality<br>Inspection</h3>
<h6><span>05</span></h6>
<p>Our team ensures every project meets standards of quality & beauty.</p>
</div>
</div>
<!-- Step 6: Client Delight -->
<div class="swiper-slide process-item">
<img src="./assets/images/Process/Process-6.jpg" alt="Client Delight">
<div class="content">
<h3>Client<br>Delight</h3>
<h6><span>06</span></h6>
<p>We review every detail with you, ensuring complete landscape youll love.</p>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== Process Slider Area (End) ==================== -->
<!-- ==================== Why Choose Us Area (Start) ==================== -->
<section class="why-us linear-bg main">
<div class="box-container">
<!-- Section Heading -->
<div class="heading">
<div class="sub"><i class="fa-brands fa-pagelines"></i><span>Why Choose Us</span><i class="fa-brands fa-pagelines"></i></div>
<h2>Rooted in Nature, Built on Trust</h2> <!-- New Main Heading -->
<!-- Main Description -->
<p>At LeafLine, were passionate about creating outdoor spaces that blend beauty. Our commitment to excellence ensures every garden thrives for years.</p>
</div>
<!-- Main Content Area -->
<div class="content">
<!-- Why Choose Us Points - Left -->
<ul class="whyus-section-points one">
<li>
<i class="fa-solid fa-seedling"></i> <!-- Plant icon -->
<div class="text">
<h5>Expert Craftsmanship</h5>
<p>Our team brings years of experience to every project.</p>
</div>
</li>
<li>
<i class="fa-solid fa-leaf"></i> <!-- Leaf icon -->
<div class="text">
<h5>Sustainable Solutions</h5>
<p>We use materials & water wise technique for tomorrow.</p>
</div>
</li>
<li>
<i class="fa-solid fa-brush"></i> <!-- Design icon -->
<div class="text">
<h5>Creative Design</h5>
<p>we design landscapes that reflect your vision.</p>
</div>
</li>
</ul>
<!-- Why Choose Us Image -->
<div class="image">
<img src="./assets/images/WhyUs/Pic-1.png" alt="LeafLine Gardening and Landscaping">
</div>
<!-- Why Choose Us Points - Right -->
<ul class="whyus-section-points two">
<li>
<i class="fa-solid fa-sun"></i> <!-- Growth icon -->
<div class="text">
<h5>End-to-End Service</h5>
<p>We handle everything from design to maintenance and care.</p>
</div>
</li>
<li>
<i class="fa-solid fa-star"></i> <!-- Quality icon -->
<div class="text">
<h5>Quality Guaranteed</h5>
<p>We ensure every project the highest standards of beauty.</p>
</div>
</li>
<li>
<i class="fa-solid fa-handshake"></i> <!-- Trust icon -->
<div class="text">
<h5>Customer Commitment</h5>
<p>Your trust is our priority we turn your dreams into reality.</p>
</div>
</li>
</ul>
</div>
</div>
</section>
<!-- ==================== Why Choose Us Area (End) ==================== -->
<!-- ==================== Service Slider Area (Start) ==================== -->
<section class="services">
<!-- Section Heading -->
<div class="heading">
<div class="sub"><i class="fa-brands fa-pagelines"></i><span>Explore Our Offerings</span><i class="fa-brands fa-pagelines"></i></div>
<h2>Our Services</h2>
</div>
<!-- Service Slider -->
<div class="swiper-container service-slider">
<div class="swiper-wrapper">
<!-- Service 1: Lawn Care -->
<div class="swiper-slide service-item">
<img src="./assets/images/Service/Services/Service-1.jpg" alt="Lawn Care">
<div class="content">
<div class="icon"><i class="fa-brands fa-pagelines"></i></div>
<a href="./pages/Service/Service-Single.html"><h3>Lawn Care</h3></a>
<p>Keep your lawn lush, healthy, and green with our professional mowing, and edging.</p>
<a href="./pages/Service/Service-Single.html" class="btn">Read More</a>
</div>
</div>
<!-- Service 2: Garden Design -->
<div class="swiper-slide service-item">
<img src="./assets/images/Service/Services/Service-2.jpg" alt="Garden Design">
<div class="content">
<div class="icon"><i class="fa-solid fa-seedling"></i></div>
<a href="./pages/Service/Service-Single.html"><h3>Garden Design</h3></a>
<p>Transform your outdoor space with creative designs that reflect your style & beauty.</p>
<a href="./pages/Service/Service-Single.html" class="btn">Read More</a>
</div>
</div>
<!-- Service 3: Tree Planting -->
<div class="swiper-slide service-item">
<img src="./assets/images/Service/Services/Service-3.jpg" alt="Tree Planting">
<div class="content">
<div class="icon"><i class="fa-solid fa-tree"></i></div>
<a href="./pages/Service/Service-Single.html"><h3>Tree Planting</h3></a>
<p>Enhance your landscape with healthy trees, expertly planted for long-term growth.</p>
<a href="./pages/Service/Service-Single.html" class="btn">Read More</a>
</div>
</div>
<!-- Service 4: Hardscaping Solutions -->
<div class="swiper-slide service-item">
<img src="./assets/images/Service/Services/Service-4.jpg" alt="Hardscaping Solution">
<div class="content">
<div class="icon"><i class="fa-solid fa-tools"></i></div>
<a href="./pages/Service/Service-Single.html"><h3>Hardscaping Solution</h3></a>
<p>Build pathways, and retaining walls that add function, and elegance to your yard.</p>
<a href="./pages/Service/Service-Single.html" class="btn">Read More</a>
</div>
</div>
<!-- Service 5: Water Ponds -->
<div class="swiper-slide service-item">
<img src="./assets/images/Service/Services/Service-5.jpg" alt="Water Ponds">
<div class="content">
<div class="icon"><i class="fa-solid fa-water"></i></div>
<a href="./pages/Service/Service-Single.html"><h3>Water Ponds</h3></a>
<p>Add tranquility to your garden with elegant ponds, & waterfalls designed to soothe.</p>
<a href="./pages/Service/Service-Single.html" class="btn">Read More</a>
</div>
</div>
<!-- Service 6: Outdoor Décor -->
<div class="swiper-slide service-item">
<img src="./assets/images/Service/Services/Service-6.jpg" alt="Outdoor Décor">
<div class="content">
<div class="icon"><i class="fa-solid fa-lightbulb"></i></div>
<a href="./pages/Service/Service-Single.html"><h3>Outdoor Décor</h3></a>
<p>Illuminate your landscape with stylish, energy-efficient lighting to highlight key features.</p>
<a href="./pages/Service/Service-Single.html" class="btn">Read More</a>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== Service Slider Area (End) ==================== -->
<!-- ==================== Count Area (Start) ==================== -->
<div class="counting">
<!-- Statistic Box 1: Service Regions -->
<div class="box">
<div class="info">
<div class="icon"><i class="fas fa-map-marked-alt"></i> <!-- Map-marked-alt icon --></div>
<div class="content">
<h1 class="count" data-count="80">80+</h1> <!-- Count of service regions -->
<h3>Service Regions</h3> <!-- Statistic description -->
</div>
</div>
</div>
<!-- Statistic Box 2: Planting Projects -->
<div class="box">
<div class="info">
<div class="icon"><i class="fa-brands fa-pagelines"></i> <!-- Leaf icon --></div>
<div class="content">
<h1 class="count" data-count="10000">10,000+</h1> <!-- Count of planting projects -->
<h3>Planting Projects</h3> <!-- Statistic description -->
</div>
</div>
</div>
<!-- Statistic Box 3: Experience -->
<div class="box">
<div class="info">
<div class="icon"><i class="fas fa-calendar-alt"></i> <!-- Calendar icon --></div>
<div class="content">
<h1 class="count" data-count="14">14+</h1> <!-- Count of years of experience -->
<h3>Experience</h3> <!-- Statistic description -->
</div>
</div>
</div>
<!-- Statistic Box 4: Satisfied Customers -->
<div class="box">
<div class="info">
<div class="icon"><i class="fas fa-heart"></i> <!-- Heart icon --></div>
<div class="content">
<h1 class="count" data-count="24000">24,000+</h1> <!-- Count of satisfied customers -->
<h3>Satisfied Customers</h3> <!-- Statistic description -->
</div>
</div>
</div>
</div>
<!-- ==================== Count Area (End) ==================== -->
<!-- ==================== Pricing Area (Start) ==================== -->
<section class="pricing">
<div class="heading">
<div class="sub"><i class="fa-brands fa-pagelines"></i><span>Explore Our Packages</span><i class="fa-brands fa-pagelines"></i></div>
<h2>Landscaping Plans</h2>
</div>
<!-- Pricing Plans -->
<div class="box-container">
<!-- Pricing Plan 1 - Basic Gardening Plan -->
<div class="plan-item">
<img src="./assets/images/Pricing/Plan-1.jpg" alt="Basic Gardening Plan"> <!-- Plan Image -->
<div class="content">
<div class="intro">
<h3>Basic<br>Gardening</h3>
<i class="fa-brands fa-pagelines"></i>
</div>
<div class="middle"><div class="price"><div class="tag">$49/<span>m</span></div></div></div>
<div class="bottom">
<ul> <!-- Plan Features -->
<li><i class="fa-solid fa-leaf"></i> Lawn Mowing & Trimming</li>
<li><i class="fa-solid fa-leaf"></i> Basic Plant Care</li>
<li><i class="fa-solid fa-leaf"></i> Soil Fertilization</li>
<li><i class="fa-solid fa-leaf"></i> Weed Removal</li>
<li><i class="fa-solid fa-leaf"></i> Seasonal Cleanup</li>
</ul>
<a href="#" class="btn">Select Plan</a>
</div>
</div>
</div>
<!-- Pricing Plan 2 - Premium Gardening -->
<div class="plan-item">
<img src="./assets/images/Pricing/Plan-2.jpg" alt="Landscaping Plan"> <!-- Plan Image -->
<div class="content">
<div class="intro">
<h3>Premium<br>Gardening</h3>
<i class="fa-brands fa-pagelines"></i>
</div>
<div class="middle"><div class="price"><div class="tag">$79/<span>m</span></div></div></div>
<div class="bottom">
<ul> <!-- Plan Features -->
<li><i class="fa-solid fa-leaf"></i> Custom Landscape Design</li>
<li><i class="fa-solid fa-leaf"></i> Tree & Shrub Planting</li>
<li><i class="fa-solid fa-leaf"></i> Pathway & Stonework Setup</li>
<li><i class="fa-solid fa-leaf"></i> Garden Lighting Installation</li>
<li><i class="fa-solid fa-leaf"></i> Decorative Plant Arrangement</li>
</ul>
<a href="#" class="btn">Select Plan</a>
</div>
</div>
</div>
<!-- Pricing Plan 3 - Cimplete Planing -->
<div class="plan-item">
<img src="./assets/images/Pricing/Plan-3.jpg" alt="Maintenance Plan"> <!-- Plan Image -->
<div class="content">
<div class="intro">
<h3>Complete<br>Planing</h3>
<i class="fa-brands fa-pagelines"></i>
</div>
<div class="middle"><div class="price"><div class="tag">$99/<span>m</span></div></div></div>
<div class="bottom">
<ul> <!-- Plan Features -->
<li><i class="fa-solid fa-leaf"></i> Full Garden Upkeep</li>
<li><i class="fa-solid fa-leaf"></i> Irrigation System Care</li>
<li><i class="fa-solid fa-leaf"></i> Pest & Disease Control</li>
<li><i class="fa-solid fa-leaf"></i> Monthly Soil Health Check</li>
<li><i class="fa-solid fa-leaf"></i> Regular Landscape Updates</li>
</ul>
<a href="#" class="btn">Select Plan</a>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== Pricing Area (End) ====================== -->
<!-- ==================== Home Skills Area (Start) ==================== -->
<section class="custom-form home-skills linear-bg">
<div class="box-container">
<!-- Introduction Content -->
<div class="content">
<div class="heading">
<div class="sub"><span>Our Skills</span><i class="fa-brands fa-pagelines"></i></div> <!-- Sub Heading -->
<h2>Your Trusted Partner in Gardening</h2> <!-- Main Heading -->
</div>
<!-- Description -->
<p>At LeafLine, we combine creativity expert care to design and maintain vibrant outdoor spaces. Our team brings years of experience in garden planning maintenance solutions.</p>
<!-- Company's Skills -->
<div class="team-single">
<div class="skills">
<!-- Garden Design -->
<div class="box">
<h3>Garden Design<span> 95% </span></h3>
<div class="progress-bar"> <span style="width: 95%;"></span> </div>
</div>
<!-- Landscaping -->
<div class="box">
<h3>Landscaping<span> 90% </span></h3>
<div class="progress-bar"> <span style="width: 90%;"></span> </div>
</div>
<!-- Plant Care -->
<div class="box">
<h3>Plant Care & Maintenance<span> 88% </span></h3>
<div class="progress-bar"> <span style="width: 88%;"></span> </div>
</div>
<!-- Irrigation Systems -->
<div class="box">
<h3>Irrigation Systems<span> 92% </span></h3>
<div class="progress-bar"> <span style="width: 92%;"></span> </div>
</div>
</div>
</div>
<a href="./pages/Contact/Contact.html" class="btn btn-2">Contact Us</a>
<!-- Contact Page Button -->
</div>
</div>
</section>
<!-- ==================== Home Skills Area (End) ==================== -->
<!-- ==================== Projects Area (Start) ==================== -->
<section class="projects">
<!-- Section Heading -->
<div class="heading">
<div class="sub"><i class="fa-brands fa-pagelines"></i><span>Explore Our Work</span><i class="fa-brands fa-pagelines"></i></div>
<h2>Our Projects</h2>
</div>
<!-- Projects Filter Buttons -->
<ul class="tab-buttons">
<li class="button active" data-filter="*">All</li>
<li class="button" data-filter=".maintenance">Lawn Maintenance</li>
<li class="button" data-filter=".design">Garden Design</li>
<li class="button" data-filter=".hardscaping">Hardscaping</li>
</ul>
<!-- Projects Container -->
<div class="box-container">
<!-- Project 1 - Zen Garden -->
<div class="project-item design">
<div class="projects-content">
<img src="./assets/images/Project/Projects/Project-1.jpg" alt="Zen Garden"> <!-- Project Image -->
<div class="content">
<div class="btn-container">
<a class="view" href="./assets/images/Project/Projects/Project-1.jpg"><i class="fa-solid fa-plus"></i></a>
<a href="./pages/Project/Project-Single.html"><i class="fa-solid fa-link"></i></a>
</div>
<div class="text">
<p>Garden Design</p>
<a href="./pages/Project/Project-Single.html"><h3>Zen Garden Landscaping</h3></a>
</div>
</div>
</div>
</div>
<!-- Project 2 - Green Lawn Revive -->
<div class="project-item maintenance">
<div class="projects-content">
<img src="./assets/images/Project/Projects/Project-2.jpg" alt="Green Lawn">
<div class="content">
<div class="btn-container">
<a class="view" href="./assets/images/Project/Projects/Project-2.jpg"><i class="fa-solid fa-plus"></i></a>
<a href="./pages/Project/Project-Single.html"><i class="fa-solid fa-link"></i></a>
</div>
<div class="text">
<p>Lawn Maintenance</p>
<a href="./pages/Project/Project-Single.html"><h3>Green Lawn Revive Project</h3></a>
</div>
</div>
</div>
</div>
<!-- Project 3 - Modern Courtyard -->
<div class="project-item design">
<div class="projects-content">
<img src="./assets/images/Project/Projects/Project-3.jpg" alt="Modern Courtyard">
<div class="content">
<div class="btn-container">
<a class="view" href="./assets/images/Project/Projects/Project-3.jpg"><i class="fa-solid fa-plus"></i></a>
<a href="./pages/Project/Project-Single.html"><i class="fa-solid fa-link"></i></a>
</div>
<div class="text">
<p>Garden Design</p>
<a href="./pages/Project/Project-Single.html"><h3>Modern Courtyard Makeover</h3></a>
</div>
</div>
</div>
</div>
<!-- Project 4 - Stone Pathway Patio -->
<div class="project-item hardscaping">
<div class="projects-content">
<img src="./assets/images/Project/Projects/Project-4.jpg" alt="Stone Pathway Patio">
<div class="content">
<div class="btn-container">
<a class="view" href="./assets/images/Project/Projects/Project-4.jpg"><i class="fa-solid fa-plus"></i></a>
<a href="./pages/Project/Project-Single.html"><i class="fa-solid fa-link"></i></a>
</div>
<div class="text">
<p>Hardscaping</p>
<a href="./pages/Project/Project-Single.html"><h3>Stone Pathway Patio Design</h3></a>
</div>
</div>
</div>
</div>
<!-- Project 5 - Smart Irrigation Setup -->
<div class="project-item maintenance">
<div class="projects-content">
<img src="./assets/images/Project/Projects/Project-5.jpg" alt="Irrigation System">
<div class="content">
<div class="btn-container">
<a class="view" href="./assets/images/Project/Projects/Project-5.jpg"><i class="fa-solid fa-plus"></i></a>
<a href="./pages/Project/Project-Single.html"><i class="fa-solid fa-link"></i></a>
</div>
<div class="text">
<p>Lawn Maintenance</p>
<a href="./pages/Project/Project-Single.html"><h3>Smart Irrigation System Setup</h3></a>
</div>
</div>
</div>
</div>
<!-- Project 6 - Wooden Deck Retreat -->
<div class="project-item hardscaping">
<div class="projects-content">
<img src="./assets/images/Project/Projects/Project-6.jpg" alt="Wooden Deck Retreat">
<div class="content">
<div class="btn-container">
<a class="view" href="./assets/images/Project/Projects/Project-6.jpg"><i class="fa-solid fa-plus"></i></a>
<a href="./pages/Project/Project-Single.html"><i class="fa-solid fa-link"></i></a>
</div>
<div class="text">
<p>Hardscaping</p>
<a href="./pages/Project/Project-Single.html"><h3>Wooden Deck Backyard Retreat</h3></a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== Projects Area (End) ==================== -->
<!-- ==================== Get A Quote Area (Start) ==================== -->
<section class="custom-form get-quote linear-bg">
<div class="box-container">
<div class="content">
<form class="dark-form" id="quote-form" method="post">
<!-- Form Heading -->
<div class="heading">
<div class="sub"><span>Personalized Garden Solutions</span><i class="fa-brands fa-pagelines"></i></div>
<h2>Request A Quote</h2>
</div>
<div class="input-box">
<!-- Name Input Field -->
<div class="input-field">
<label for="name" class="fa-solid fa-user"></label>
<input type="text" name="name" class="box" id="name" placeholder="Name" required>
</div>
<!-- Email Input Field -->
<div class="input-field">
<label for="email" class="fa-solid fa-envelope"></label>
<input type="email" name="email" class="box" id="email" placeholder="Email" required>
</div>
</div>
<div class="input-box">
<!-- Phone Number Input Field -->
<div class="input-field">
<label for="number" class="fa-solid fa-phone"></label>
<input type="number" name="number" class="box" id="number" placeholder="Phone Number" required>
</div>
<!-- Service Type Select Field -->
<div class="select">
<div class="select-container">
<label for="service-type" class="fa-brands fa-pagelines"></label>
<select class="select-box" id="service-type" name="service-type" required>
<option value="">Service Type</option>
<option value="lawn-maintenance">Lawn Maintenance</option>
<option value="garden-design">Garden Design</option>
<option value="tree-planting">Tree Planting</option>
<option value="hardscaping">Hardscaping</option>
<option value="water-features">Water Features</option>
<option value="outdoor-lighting">Outdoor Lighting</option>
</select>
<div class="icon-container">
<i class="fas fa-angle-down"></i>
</div>
</div>
</div>
</div>
<div class="input-box">
<!-- Address Input Field -->
<div class="input-field">
<label for="address" class="fa-solid fa-location-dot"></label>
<input type="text" name="address" class="box" id="address" placeholder="Address" required>
</div>
</div>
<div class="input-box">
<!-- Property Type Select Field -->
<div class="select">
<div class="select-container">
<label for="property-type" class="fa-solid fa-building"></label>
<select class="select-box" id="property-type" name="property-type" required>
<option value="">Property Type</option>
<option value="residential">Residential</option>
<option value="commercial">Commercial</option>
</select>
<div class="icon-container">
<i class="fas fa-angle-down"></i>
</div>
</div>
</div>
<!-- Area Size Input Field (sq m) -->
<div class="input-field">
<label for="area-size" class="fas fa-ruler-horizontal"></label>
<input type="number" name="area-size" class="box" id="area-size" min="0" placeholder="Area Size (sq m)"
required>
</div>
</div>
<div class="input-box">
<!-- Garden Style Select Field -->
<div class="select">
<div class="select-container">
<label for="garden-style" class="fa-solid fa-tree"></label>
<select class="select-box" id="garden-style" name="garden-style" required>
<option value="">Garden Style</option>
<option value="native">Native</option>
<option value="formal">Formal</option>
<option value="cottage">Cottage</option>
<option value="japanese">Japanese</option>
<option value="modern">Modern</option>
<option value="eclectic">Eclectic</option>
<option value="default">No Preference</option>
</select>
<div class="icon-container">
<i class="fas fa-angle-down"></i>
</div>
</div>
</div>
<!-- Project Urgency Select Field -->
<div class="select">
<div class="select-container">
<label for="project-urgency" class="fas fa-clock"></label>
<select class="select-box" id="project-urgency" name="project-urgency" required>
<option value="">Project Urgency</option>
<option value="asap">ASAP</option>
<option value="within-a-month">Within a Month</option>
<option value="within-three-months">Within 1-3 Months</option>
<option value="no-rush">No Rush</option>
</select>
<div class="icon-container">
<i class="fas fa-angle-down"></i>
</div>
</div>
</div>
</div>
<!-- Comment Text Area -->
<div class="input-field text-area">
<label for="comment" class="fa-solid fa-comment"></label>
<textarea cols="30" rows="10" name="comment" class="box" id="comment" placeholder="Message"
required></textarea>
</div>
<!-- Extra Services Checkboxes -->
<div class="extra-services">
<!-- Automated Irrigation Checkbox -->
<div class="checkbox-label">
<input type="checkbox" id="automated-irrigation-checkbox" name="extra-services[]"
value="Automated Irrigation">
<label for="automated-irrigation-checkbox">Automated Irrigation</label>
<div class="checkbox-indicator"></div>
</div>
<!-- Custom Pathways Checkbox -->
<div class="checkbox-label">
<input type="checkbox" id="custom-pathways-checkbox" name="extra-services[]" value="Custom Pathways">
<label for="custom-pathways-checkbox">Custom Pathways</label>
<div class="checkbox-indicator"></div>
</div>
<!-- Outdoor Seating Checkbox -->
<div class="checkbox-label">
<input type="checkbox" id="outdoor-seating-checkbox" name="extra-services[]" value="Outdoor Seating Area">
<label for="outdoor-seating-checkbox">Outdoor Seating Area</label>
<div class="checkbox-indicator"></div>
</div>
</div>
<!-- Submit Button for Booking Confirmation -->
<button type="submit" class="btn" name="submit" id="submit">submit</button>
<span class="alert" id="msg"></span>
</form>
</div>
</div>
</section>
<!-- ==================== Get A Quote Area (End) ==================== -->
<!-- ==================== Events Area (Start) ==================== -->
<section class="events">
<!-- Section Heading -->
<div class="heading">
<div class="sub"><i class="fa-brands fa-pagelines"></i><span>Gardening Events</span><i class="fa-brands fa-pagelines"></i></div>
<h2>Upcoming Events</h2>
</div>
<!-- Events Container -->
<div class="box-container">
<!-- Event 1 -->
<div class="event-item">
<div class="image">
<img src="./assets/images/Event/Events/Event-1.jpg" alt="Event-Image"> <!-- Event Image -->
</div>
<div class="content">
<div class="date"><span>10<br>Sep</span></div>
<a class="main-heading" href="./pages/Pages/Event-Single.html">Spring Bloom Gardening Workshop</a> <!-- Event Title -->
<div class="details">
<h3><i class="fas fa-map-marker-alt"></i><span>LeafLine Community Garden</span></h3>
<h3><i class="fas fa-clock"></i><span>09:00 AM - 12:00 PM</span></h3>
</div>
</div>
</div>
<!-- Event 2 -->
<div class="event-item">
<div class="image">
<img src="./assets/images/Event/Events/Event-2.jpg" alt="Event-Image"> <!-- Event Image -->
</div>
<div class="content">
<div class="date"><span>25<br>Sep</span></div>
<a class="main-heading" href="./pages/Pages/Event-Single.html">Eco-Friendly Landscape Design Seminar</a>
<div class="details">
<h3><i class="fas fa-map-marker-alt"></i><span>LeafLine Design Studio</span></h3>
<h3><i class="fas fa-clock"></i><span>11:00 AM - 03:00 PM</span></h3>
</div>
</div>
</div>
<!-- Event 3 -->
<div class="event-item">
<div class="image">
<img src="./assets/images/Event/Events/Event-3.jpg" alt="Event-Image"> <!-- Event Image -->
</div>
<div class="content">
<div class="date"><span>07<br>Oct</span></div>
<a class="main-heading" href="./pages/Pages/Event-Single.html">Community Tree Planting Day</a>
<div class="details">
<h3><i class="fas fa-map-marker-alt"></i><span>GreenVille Botanical Park</span></h3>
<h3><i class="fas fa-clock"></i><span>08:00 AM - 01:00 PM</span></h3>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== Events Area (End) ==================== -->
<!-- ==================== Banner Area (Start) ==================== -->
<section class="banner">
<div class="content">
<div class="heading">
<div class="sub">
<span>Nurture Nature with LeafLine</span>
<i class="fa-brands fa-pagelines"></i>
</div>
</div>
<h2>Transform Your Garden into a Green Paradise</h2>
<a href="./pages/Pages/Get-Quote.html" class="btn">Get a Free Quote</a>
</div>
</section>
<!-- ==================== Banner Area (End) ==================== -->
<!-- ==================== Team Area (Start) ==================== -->
<section class="team">
<!-- Section Heading -->
<div class="heading">
<div class="sub"><i class="fa-brands fa-pagelines"></i><span>Meet Our Team</span><i class="fa-brands fa-pagelines"></i></div> <!-- Sub Heading -->
<h2>Our Team</h2>
</div>
<div class="box-container">
<!-- Team Member 1 -->
<div class="team-item">
<img src="./assets/images/Team/Team-1.jpg" alt="Team-Image"> <!-- Team Member Image -->
<div class="content">
<div class="intro">
<a href="./pages/About/Team-Single.html"><h3>Ethan Green</h3></a> <!-- Team Member Name -->
<p>Landscape Designer</p> <!-- Team Member Designation -->
</div>
<div class="icon-container">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
<!-- Team Member 2 -->
<div class="team-item">
<img src="./assets/images/Team/Team-2.jpg" alt="Team-Image">
<div class="content">
<div class="intro">
<a href="./pages/About/Team-Single.html"><h3>Sophia Bloom</h3></a>
<p>Care Specialist</p>
</div>
<div class="icon-container">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
<!-- Team Member 3 -->
<div class="team-item">
<img src="./assets/images/Team/Team-3.jpg" alt="Team-Image">
<div class="content">
<div class="intro">
<a href="./pages/About/Team-Single.html"><h3>Liam Woods</h3></a>
<p>Maintenance Expert</p>
</div>
<div class="icon-container">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
<!-- Team Member 4 -->
<div class="team-item">
<img src="./assets/images/Team/Team-4.jpg" alt="Team-Image">
<div class="content">
<div class="intro">
<a href="./pages/About/Team-Single.html"><h3>Olivia Fern</h3></a>
<p>Design Consultant</p>
</div>
<div class="icon-container">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== Team Area (End) ==================== -->
<!-- ==================== Testimonials Area (Start) ==================== -->
<section class="testimonial main linear-bg">
<!-- Section Heading -->
<div class="heading">
<div class="sub"><i class="fa-brands fa-pagelines"></i><span>What Our Customers Say</span><i class="fa-brands fa-pagelines"></i></div> <!-- Sub Heading -->
<h2>Customer Testimonials</h2>
</div>
<!-- Testimonial Slider -->
<div class="swiper-container testimonial-slider">
<div class="swiper-wrapper">
<!-- Testimonial Slide 1 -->
<div class="swiper-slide testi-item">
<img src="./assets/images/Testimonials/Pic-1.jpg" alt="Client-Pic">
<i class="fas fa-quote-right"></i>
<div class="text">
<h4>Justin Smith</h4>
<h6>Garden Expert</h6>
</div>
<div class="rating">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
<p>"Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero voluptate omnis hic? Omnis repudiandae aliquid iure beatae distinctio temporibus quia expedita earum aliquam consequuntur. Tempora totam eum quos veniam illo."</p>
</div>
<!-- Testimonial Slide 2 -->
<div class="swiper-slide testi-item">
<img src="./assets/images/Testimonials/Pic-2.jpg" alt="Client-Pic">
<i class="fas fa-quote-right"></i>
<div class="text">
<h4>Taylor Reed</h4>
<h6>Care Specialist</h6>
</div>
<div class="rating">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
<p>"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias et sint suscipit, non quo aut, cumque repudiandae molestiae fugiat animi distinctio blanditiis tempore? Quam accusantium sed veritatis officiis obcaecati cupiditate."</p>
</div>
<!-- Testimonial Slide 3 -->
<div class="swiper-slide testi-item">
<img src="./assets/images/Testimonials/Pic-3.jpg" alt="Client-Pic">
<i class="fas fa-quote-right"></i>
<div class="text">
<h4>Michael Brown</h4>
<h6>Garden Specialist</h6>
</div>
<div class="rating">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
<p>"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias et sint suscipit, non quo aut, cumque repudiandae molestiae fugiat animi distinctio blanditiis tempore? Quam accusantium sed veritatis officiis obcaecati cupiditate."</p>
</div>
<!-- Testimonial Slide 4 -->
<div class="swiper-slide testi-item">
<img src="./assets/images/Testimonials/Pic-4.jpg" alt="Client-Pic">
<i class="fas fa-quote-right"></i>
<div class="text">
<h4>Nisa Klein</h4>
<h6>Garden Specialist</h6>
</div>
<div class="rating">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
<p>"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias et sint suscipit, non quo aut, cumque repudiandae molestiae fugiat animi distinctio blanditiis tempore? Quam accusantium sed veritatis officiis obcaecati cupiditate."</p>
</div>
</div>
<!-- Testimonial Slider Pagination -->
<div class="swiper-pagination swiper-pagination3"></div>
</div>
</section>
<!-- ==================== Testimonials Area (End) ==================== -->
<!-- ==================== Faqs Area (Start) ==================== -->
<section class="faq">
<!-- Section Heading -->
<div class="heading">
<div class="sub"><i class="fa-brands fa-pagelines"></i><span>FAQ's</span><i class="fa-brands fa-pagelines"></i></div>
<h2>Frequently Asked Questions</h2>
</div>
<div class="box-container">
<!-- FAQ Image -->
<div class="image">
<img src="./assets/images/FAQs/FAQs.jpg" alt="FAQs Image">
</div>
<!-- FAQ Accordion Container -->
<div class="accordion-container">
<!-- FAQ Accordion 1: Service Range -->
<div class="accordion active">
<div class="accordion-heading">
<h3>What services does LeafLine offer?</h3>
<i class="fas fa-plus"></i>
</div>
<p class="accordion-content">LeafLine provides a complete range of gardening and landscaping services, including garden design, lawn care, irrigation setup, plant maintenance, and outdoor decor solutions.</p>
</div>
<!-- FAQ Accordion 2: Custom Designs -->
<div class="accordion">
<div class="accordion-heading">
<h3>Can you create a design for my home?</h3>
<i class="fas fa-plus"></i>
</div>
<p class="accordion-content">Absolutely! Our designers work closely with you to understand your preferences and space requirements, crafting a personalized garden or landscape plan that reflects your vision and lifestyle.</p>
</div>
<!-- FAQ Accordion 3: Maintenance Plans -->
<div class="accordion">
<div class="accordion-heading">
<h3>Do you offer regular maintenance services?</h3>
<i class="fas fa-plus"></i>
</div>
<p class="accordion-content">Yes, we offer flexible maintenance packages that include trimming, watering, soil care, fertilization, and pest control to keep your garden lush and healthy all year round.</p>
</div>
<!-- FAQ Accordion 4: Eco-Friendly Practices -->
<div class="accordion">
<div class="accordion-heading">
<h3>Are your gardening methods eco-friendly?</h3>
<i class="fas fa-plus"></i>
</div>
<p class="accordion-content">At LeafLine, we prioritize sustainability. We use organic fertilizers, water-efficient irrigation systems, and native plants to reduce environmental impact and promote long-term garden health.</p>
</div>
<!-- FAQ Accordion 5: Project Timeline -->
<div class="accordion">
<div class="accordion-heading">
<h3>How long does a typical project take?</h3>
<i class="fas fa-plus"></i>
</div>
<p class="accordion-content">Project timelines vary depending on size and complexity. Most residential landscaping projects are completed within 24 weeks after the design phase is finalized.</p>
</div>
</div>
</div>
</section>
<!-- ==================== Faqs Area (End) ==================== -->
<!-- ==================== Newsletter Area (Start) ==================== -->
<section class="newsletter-subscribe">
<div class="content">
<h2>Subscribe To Our Newsletter</h2> <!-- Newsletter Heading -->
<p>Stay inspired with the latest landscaping trends, expert gardening tips, eco-friendly ideas, and exclusive offers.</p>
<!-- Newsletter Description -->
<form class="newsletter-form" method="post" id="newsletter-form-1">
<div class="box-container">
<input type="email" id="sub-email-1" name="email" placeholder="Your email address" required>
<!-- Email Input Field -->
<button type="submit" class="btn" name="submit" id="submit-1">Subscribe</button> <!-- Subscribe Button -->
</div>
<!-- Alert Message -->
<span class="alert" id="msg-1"></span>
</form>
</div>
</section>
<!-- ==================== Newsletter Area (End) ==================== -->
<!-- ==================== Blogs Area (Start) ==================== -->
<section class="blog main">
<!-- Section Heading -->
<div class="heading">
<div class="sub"><i class="fa-brands fa-pagelines"></i><span>our recent articles</span><i class="fa-brands fa-pagelines"></i></div> <!-- Sub Heading -->
<h2>our blogs</h2>
</div>
<!-- Latest Blogs -->
<div class="box-container">
<!-- Blog-1 -->
<div class="blog-item">
<div class="image">
<img src="./assets/images/Blog/Blogs/Blog-1.jpg" alt="Blog-Image"> <!-- Blog Image -->
</div>
<div class="content">
<div class="date"><div class="tag"><span>25</span> Oct</div></div> <!-- Blog Date -->
<div class="details">
<h3><i class="fa-solid fa-circle-user"></i><span>By Admin</span></h3> <!-- Blog Author -->
<h3><i class="fa-solid fa-tags"></i><span>Garden Design</span></h3> <!-- Blog Category -->
</div>
<a class="main-heading" href="./pages/Blog/Blog-Single.html">Transform Your Space with Creative Ideas</a> <!-- Blog Title -->
</div>
</div>
<!-- Blog-2 -->
<div class="blog-item">
<div class="image">
<img src="./assets/images/Blog/Blogs/Blog-2.jpg" alt="Blog-Image"> <!-- Blog Image -->
</div>
<div class="content">
<div class="date"><div class="tag"><span>20</span> Oct</div></div> <!-- Blog Date -->
<div class="details">
<h3><i class="fa-solid fa-circle-user"></i><span>By Admin</span></h3>
<h3><i class="fa-solid fa-tags"></i><span>Landscaping</span></h3>
</div>
<a class="main-heading" href="./pages/Blog/Blog-Single.html">Top 5 gardening Trends, Redefine Your Garden</a>
</div>
</div>
<!-- Blog-3 -->
<div class="blog-item">
<div class="image">
<img src="./assets/images/Blog/Blogs/Blog-3.jpg" alt="Blog-Image">
</div>
<div class="content">
<div class="date"><div class="tag"><span>15</span> Oct</div></div>
<div class="details">
<h3><i class="fa-solid fa-circle-user"></i><span>By Admin</span></h3>
<h3><i class="fa-solid fa-tags"></i><span>Plant Care</span></h3>
</div>
<a class="main-heading" href="./pages/Blog/Blog-Single.html">How to Keep Your Garden Green Year Round</a>
</div>
</div>
</div>
</section>
<!-- ==================== Blogs Area (End) ==================== -->
<!-- ==================== Clients Area (Start) ==================== -->
<section class="home-clients clients">
<!-- Client Slider Container -->
<div class="swiper-container client-slider">
<!-- Clients Logo -->
<div class="swiper-wrapper">
<div class="swiper-slide client-item"><a href="#"><img src="./assets/images/Clients/Client-1.png" alt="Client-Logo"></a></div>
<div class="swiper-slide client-item"><a href="#"><img src="./assets/images/Clients/Client-2.png" alt="Client-Logo"></a></div>
<div class="swiper-slide client-item"><a href="#"><img src="./assets/images/Clients/Client-3.png" alt="Client-Logo"></a></div>
<div class="swiper-slide client-item"><a href="#"><img src="./assets/images/Clients/Client-4.png" alt="Client-Logo"></a></div>
<div class="swiper-slide client-item"><a href="#"><img src="./assets/images/Clients/Client-5.png" alt="Client-Logo"></a></div>
<div class="swiper-slide client-item"><a href="#"><img src="./assets/images/Clients/Client-6.png" alt="Client-Logo"></a></div>
<div class="swiper-slide client-item"><a href="#"><img src="./assets/images/Clients/Client-7.png" alt="Client-Logo"></a></div>
<div class="swiper-slide client-item"><a href="#"><img src="./assets/images/Clients/Client-8.png" alt="Client-Logo"></a></div>
</div>
</div>
</section>
<!-- ==================== Clients Area (End) ==================== -->
<!-- ==================== Footer Area (Start) ==================== -->
<footer class="footer">
<div class="box-container">
<!-- Gardening and Landscaping Company Information & Social Media Links -->
<div class="footer-item">
<!-- Gardening and Landscaping Company Logo -->
<a class="logo" href="./index.html">
<img src="./assets/images/Logo/Logo.png" alt="logo">
<div class="logo-content">
<h3>LeafLine</h3>
<p>Gardening & Landscaping</p>
</div>
</a>
<!-- Description -->
<p>Transforming outdoor spaces with premium gardening and landscaping solutions.</p>
<!-- Contact Information -->
<div class="info connect">
<p><i class="fas fa-phone"></i><span>+123-456-7890</span></p>
<p><i class="fas fa-envelope"></i><span class="gmail">info@leafline.com</span></p>
<p><i class="fas fa-map-marker-alt"></i><span>LeafLine Company</span></p>
</div>
<!-- Social Media Links -->
<div class="social">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
</div>
</div>
<!-- Gardening and Landscaping Services Offered -->
<div class="footer-item">
<h2>Our Services</h2>
<div class="info links">
<p><i class="fa-brands fa-pagelines"></i><a href="./pages/Service/Service-Single.html">Lawn Care</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="./pages/Service/Service-Single.html">Garden Design</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="./pages/Service/Service-Single.html">Tree Planting</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="./pages/Service/Service-Single.html">Hardscaping Solution</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="./pages/Service/Service-Single.html">water ponds</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="./pages/Service/Service-Single.html">Outdoor Décor</a></p>
</div>
</div>
<!-- Quick Links -->
<div class="footer-item">
<h2>Quick Links</h2>
<div class="info links">
<p><i class="fa-brands fa-pagelines"></i><a href="./pages/About/About.html">About Us</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="./pages/Service/Services.html">Services</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="./pages/Project/Projects.html">Projects</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="./pages/Blog/Blog-Grid.html">Blog</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="./pages/Shop/Shop-Grid.html">Shop</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="./pages/Contact/Contact.html">Contact Us</a></p>
</div>
</div>
<!-- Newsletter Subscription -->
<div class="footer-item">
<h2>Newsletter</h2>
<p>Stay informed and up-to-date with the latest trends, helpful tips, and exclusive special offers.</p>
<form class="dark-form" method="post" id="newsletter-form-2">
<div class="input-field">
<label for="news-email-2" class="fas fa-envelope"></label>
<input type="email" id="news-email-2" name="email" class="box" placeholder="Your email address" required>
</div>
<button type="submit" class="btn" name="submit" id="submit-2">Subscribe</button>
<span class="alert" id="msg-2"></span>
</form>
</div>
</div>
<!-- Gardening and Landscaping Company's Name and Copyright -->
<div class="content">
<p>Designed By <span>NorthStar_Themes</span> | All Rights Reserved</p>
</div>
</footer>
<!-- ==================== Footer Area (End) ==================== -->
<!-- Jquery -->
<script src="./assets/vendors/jquery/jquery.min.js"></script>
<!-- Swiper (JS) -->
<script src="./assets/vendors/swiper/swiper-bundle.min.js"></script>
<!-- Magnific-Popup JS -->
<script src="./assets/vendors/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Isotope (JS) -->
<script src="./assets/vendors/isotope/isotope.pkgd.min.js"></script>
<!-- Custom Script Files -->
<script src="assets/js/script.js"></script> <!-- Additional website functionality -->
<script src="assets/js/nav-link-toggler.js"></script> <!-- Mobile navigation link toggling -->
<script src="assets/js/home-slider.js"></script> <!-- Dynamic Home Slider -->
<script src="assets/js/counter-up.js"></script> <!-- Numerical counting animation -->
<script src="assets/js/service-slider.js"></script> <!-- Service slider control -->
<script src="assets/js/process-slider.js"></script> <!-- Process slider control -->
<script src="assets/js/projects.js"></script> <!-- Projects functionality, including image filtering -->
<script src="assets/js/testi-slider.js"></script> <!-- Interactive Testimonial Slider -->
<script src="assets/js/client-slider.js"></script> <!-- Interactive Client Slider -->
<script src="assets/js/newsletter.js"></script>
<script src="assets/js/quote.js"></script>
<script src="assets/js/accordion.js"></script> <!-- Controls the functionality of accordions for displaying content sections. -->
</body>
</html>