Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 4.18.0-553.40.1.lve.el8.x86_64

PHP Version:

8.2.27

User:

u205613439

Directory:

/home/u205613439/domains/projectsunleashed.com/public_html

Free Space:

3.03 TB

🔧 Quick Actions

✏️ Editing: landscape.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landscape Artistry | Premium Landscape Design</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #A67B5B;
            --primary-light: #c4a08a;
            --primary-dark: #8a6548;
            --secondary: #F3EEE8;
            --secondary-dark: #e5dfd8;
            --text-dark: #333333;
            --text-light: #666666;
            --white: #ffffff;
            --black: #000000;
            --gray-light: #f5f5f5;
            --gray: #e0e0e0;
            --transition: all 0.3s ease;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Poppins', sans-serif;
            color: var(--text-dark);
            line-height: 1.6;
            overflow-x: hidden;
            background-color: var(--white);
        }

h1, h2, h3, h4, h5 {
            font-family: 'Playfair Display', serif;
            font-weight: 500;
        }

a {
            text-decoration: none;
            color: inherit;
        }

img {
            max-width: 100%;
            height: auto;
            display: block;
        }

.container {
            width: 90%;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 20px;
        }

/* Header & Navigation */
        header {
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
            z-index: 1000;
            background-color: var(--white);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            transition: var(--transition);
        }

.header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
        }

.logo {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--primary);
        }

.logo span {
            color: var(--text-dark);
        }

.nav-menu {
            display: flex;
            align-items: center;
        }

.nav-list {
            display: flex;
            margin-right: 30px;
        }

.nav-item {
            margin: 0 15px;
        }

.nav-link {
            font-weight: 500;
            transition: var(--transition);
            position: relative;
        }

.nav-link:hover {
            color: var(--primary);
        }

.nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 0;
            background-color: var(--primary);
            transition: var(--transition);
        }

.nav-link:hover::after {
            width: 100%;
        }

.contact-btn {
            background-color: var(--primary);
            color: var(--white);
            padding: 12px 28px;
            border-radius: 4px;
            font-weight: 500;
            transition: var(--transition);
        }

.contact-btn:hover {
            background-color: var(--primary-dark);
        }

.mobile-toggle {
            display: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--text-dark);
        }

/* Hero Section */
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('https://images.unsplash.com/photo-1558036117-15d82a90b9b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') no-repeat center center/cover;
            display: flex;
            align-items: center;
            text-align: center;
            color: var(--white);
            padding-top: 80px;
        }

.hero-content {
            max-width: 800px;
            margin: 0 auto;
        }

.hero-subtitle {
            font-size: 1.2rem;
            margin-bottom: 20px;
            font-weight: 400;
            color: var(--secondary);
        }

.hero-title {
            font-size: 3.5rem;
            margin-bottom: 20px;
            line-height: 1.2;
        }

.hero-description {
            font-size: 1.1rem;
            margin-bottom: 30px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

.hero-btns {
            display: flex;
            justify-content: center;
            gap: 20px;
        }

.btn {
            display: inline-block;
            padding: 12px 28px;
            border-radius: 4px;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
        }

.btn-primary {
            background-color: var(--primary);
            color: var(--white);
            border: none;
        }

.btn-primary:hover {
            background-color: var(--primary-dark);
        }

.btn-outline {
            background-color: transparent;
            border: 2px solid var(--white);
            color: var(--white);
        }

.btn-outline:hover {
            background-color: var(--white);
            color: var(--primary);
        }

/* Features Section */
        .features {
            padding: 100px 0;
            background-color: var(--secondary);
        }

.section-title {
            text-align: center;
            margin-bottom: 60px;
            position: relative;
        }

.section-title h2 {
            font-size: 2.5rem;
            color: var(--text-dark);
            margin-bottom: 15px;
        }

.section-title p {
            color: var(--text-light);
            max-width: 600px;
            margin: 0 auto;
        }

.section-title::after {
            content: '';
            position: absolute;
            width: 80px;
            height: 3px;
            background-color: var(--primary);
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
        }

.features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

.feature-card {
            background-color: var(--white);
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: var(--transition);
        }

.feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

.feature-icon {
            width: 70px;
            height: 70px;
            background-color: var(--primary-light);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            color: var(--white);
            font-size: 1.8rem;
        }

.feature-title {
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: var(--text-dark);
        }

.feature-text {
            color: var(--text-light);
        }

/* Projects Section */
        .projects {
            padding: 100px 0;
        }

.projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

.project-card {
            position: relative;
            height: 350px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: var(--transition);
        }

.project-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        }

.project-img {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }

.project-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 20px;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
            color: var(--white);
            transform: translateY(100%);
            transition: var(--transition);
        }

.project-card:hover .project-overlay {
            transform: translateY(0);
        }

.project-title {
            font-size: 1.5rem;
            margin-bottom: 10px;
        }

.project-category {
            font-size: 0.9rem;
            color: var(--secondary);
            margin-bottom: 15px;
        }

.project-link {
            color: var(--primary-light);
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: var(--transition);
        }

.project-link:hover {
            color: var(--white);
        }

/* Slider Section */
        .slider-section {
            padding: 100px 0;
            background-color: var(--secondary);
            position: relative;
            overflow: hidden;
        }

.slider-container {
            position: relative;
            width: 100%;
            overflow: hidden;
        }

.slider {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

.slide {
            min-width: 100%;
            display: flex;
            gap: 30px;
            padding: 0 15px;
        }

.slide-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

.slide-title {
            font-size: 2.5rem;
            margin-bottom: 20px;
            color: var(--text-dark);
        }

.slide-text {
            color: var(--text-light);
            margin-bottom: 30px;
        }

.slide-img {
            flex: 1;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

.slide-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.slider-nav {
            position: absolute;
            bottom: 30px;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: center;
            gap: 10px;
        }

.slider-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: var(--gray);
            cursor: pointer;
            transition: var(--transition);
        }

.slider-dot.active {
            background-color: var(--primary);
            transform: scale(1.2);
        }

.slider-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 50px;
            height: 50px;
            background-color: var(--white);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: var(--transition);
        }

.slider-arrow:hover {
            background-color: var(--primary);
            color: var(--white);
        }

.slider-arrow.prev {
            left: 20px;
        }

.slider-arrow.next {
            right: 20px;
        }

/* Testimonials Section */
        .testimonials {
            padding: 100px 0;
        }

.testimonials-container {
            display: flex;
            gap: 30px;
            overflow-x: auto;
            padding: 20px 0;
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
        }

.testimonials-container::-webkit-scrollbar {
            display: none;
        }

.testimonial-card {
            flex: 0 0 350px;
            scroll-snap-align: start;
            background-color: var(--white);
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: var(--transition);
        }

.testimonial-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

.testimonial-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

.testimonial-img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 15px;
        }

.testimonial-info h4 {
            font-size: 1.1rem;
            margin-bottom: 5px;
        }

.testimonial-info p {
            font-size: 0.9rem;
            color: var(--text-light);
        }

.testimonial-rating {
            color: #FFD700;
            margin-bottom: 15px;
        }

.testimonial-text {
            font-style: italic;
            color: var(--text-light);
        }

/* Process Section */
        .process {
            padding: 100px 0;
            background-color: var(--secondary);
        }

.process-steps {
            display: flex;
            justify-content: space-between;
            position: relative;
            margin-top: 50px;
        }

.process-steps::before {
            content: '';
            position: absolute;
            top: 40px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: var(--gray);
            z-index: 1;
        }

.process-step {
            flex: 1;
            text-align: center;
            position: relative;
            z-index: 2;
        }

.step-number {
            width: 80px;
            height: 80px;
            background-color: var(--primary);
            color: var(--white);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: 600;
            margin: 0 auto 20px;
        }

.step-title {
            font-size: 1.2rem;
            margin-bottom: 10px;
            color: var(--text-dark);
        }

.step-text {
            font-size: 0.9rem;
            color: var(--text-light);
            max-width: 200px;
            margin: 0 auto;
        }

/* Gallery Section */
        .gallery {
            padding: 100px 0;
        }

.gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }

.gallery-item {
            position: relative;
            height: 300px;
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
        }

.gallery-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

.gallery-item:hover .gallery-img {
            transform: scale(1.1);
        }

.gallery-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(166, 123, 91, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: var(--transition);
        }

.gallery-item:hover .gallery-overlay {
            opacity: 1;
        }

.gallery-icon {
            color: var(--white);
            font-size: 2rem;
        }

/* Contact Section */
        .contact {
            padding: 100px 0;
            background-color: var(--secondary);
        }

.contact-container {
            display: flex;
            gap: 50px;
        }

.contact-info {
            flex: 1;
        }

.contact-info h3 {
            font-size: 1.8rem;
            margin-bottom: 30px;
            color: var(--primary);
        }

.contact-details {
            margin-bottom: 30px;
        }

.contact-item {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

.contact-icon {
            width: 40px;
            height: 40px;
            background-color: var(--primary-light);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            margin-right: 15px;
        }

.contact-text h4 {
            font-size: 1.1rem;
            margin-bottom: 5px;
        }

.contact-text p {
            color: var(--text-light);
        }

.contact-form {
            flex: 1;
            background-color: var(--white);
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }

.form-group {
            margin-bottom: 20px;
        }

.form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid var(--gray);
            border-radius: 4px;
            font-family: inherit;
            font-size: 1rem;
            transition: var(--transition);
        }

.form-control:focus {
            outline: none;
            border-color: var(--primary);
        }

textarea.form-control {
            resize: vertical;
            min-height: 150px;
        }

/* Footer */
        footer {
            background-color: var(--text-dark);
            color: var(--white);
            padding: 80px 0 30px;
        }

.footer-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
            margin-bottom: 50px;
        }

.footer-col h4 {
            font-size: 1.2rem;
            margin-bottom: 25px;
            position: relative;
        }

.footer-col h4::after {
            content: '';
            position: absolute;
            width: 40px;
            height: 2px;
            background-color: var(--primary);
            bottom: -10px;
            left: 0;
        }

.footer-links li {
            margin-bottom: 15px;
            list-style: none;
        }

.footer-links a {
            color: var(--gray);
            transition: var(--transition);
        }

.footer-links a:hover {
            color: var(--primary);
            padding-left: 5px;
        }

.footer-social {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }

.social-icon {
            width: 40px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }

.social-icon:hover {
            background-color: var(--primary);
        }

.footer-bottom {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--gray);
            font-size: 0.9rem;
        }

/* Responsive Styles */
        @media (max-width: 992px) {
            .hero-title {
                font-size: 2.8rem;
            }

.section-title h2, .slide-title {
                font-size: 2rem;
            }

.contact-container {
                flex-direction: column;
            }

.slide {
                flex-direction: column;
            }

.slide-content, .slide-img {
                width: 100%;
            }

.process-steps {
                flex-direction: column;
                gap: 30px;
            }

.process-steps::before {
                display: none;
            }

.process-step {
                display: flex;
                align-items: center;
                text-align: left;
            }

.step-number {
                margin: 0 20px 0 0;
            }
        }

@media (max-width: 768px) {
            .header-container {
                padding: 15px 0;
            }

.nav-menu {
                position: fixed;
                top: 80px;
                left: -100%;
                width: 80%;
                height: calc(100vh - 80px);
                background-color: var(--white);
                flex-direction: column;
                align-items: flex-start;
                padding: 40px 20px;
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
                transition: var(--transition);
            }

.nav-menu.active {
                left: 0;
            }

.nav-list {
                flex-direction: column;
                width: 100%;
                margin-right: 0;
                margin-bottom: 30px;
            }

.nav-item {
                margin: 15px 0;
            }

.mobile-toggle {
                display: block;
            }

.hero-title {
                font-size: 2.2rem;
            }

.hero-subtitle {
                font-size: 1rem;
            }

.hero-btns {
                flex-direction: column;
                gap: 15px;
            }

.section-title h2 {
                font-size: 1.8rem;
            }

.testimonial-card {
                flex: 0 0 300px;
            }

.slider-arrow {
                width: 40px;
                height: 40px;
            }
        }

@media (max-width: 576px) {
            .container {
                width: 95%;
            }

.hero-title {
                font-size: 1.8rem;
            }

.section-title h2 {
                font-size: 1.5rem;
            }

.gallery-grid {
                grid-template-columns: 1fr;
            }

.contact-form {
                padding: 25px;
            }

.process-step {
                flex-direction: column;
                text-align: center;
            }

.step-number {
                margin: 0 auto 20px;
            }
        }
    </style>
</head>
<body>
    
    <?php include 'include/header.php'; ?>

<section class="hero">
        <div class="container">
            <div class="hero-content">
                <h2 class="hero-subtitle">Transform Your Outdoor Space</h2>
                <h1 class="hero-title">Creating Beautiful Landscapes That Inspire</h1>
                <p class="hero-description">We design and build stunning outdoor environments that enhance your property's beauty and functionality while respecting nature's harmony.</p>
                <div class="hero-btns">
                    <a href="#projects" class="btn btn-primary">Explore Our Work</a>
                    <a href="#contact" class="btn btn-outline">Request Consultation</a>
                </div>
            </div>
        </div>
    </section>

<section id="about" class="features">
        <div class="container">
            <div class="section-title">
                <h2>Why Choose Us</h2>
                <p>Discover what makes our landscape design services stand out from the rest</p>
            </div>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
                    </div>
                    <h3 class="feature-title">Sustainable Design</h3>
                    <p class="feature-text">We create environmentally responsible landscapes that conserve water, reduce maintenance, and support local ecosystems.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                    </div>
                    <h3 class="feature-title">Expert Craftsmanship</h3>
                    <p class="feature-text">Our team of skilled professionals brings decades of experience to every project, ensuring exceptional quality and attention to detail.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"></path></svg>
                    </div>
                    <h3 class="feature-title">Innovative Solutions</h3>
                    <p class="feature-text">We blend creativity with functionality to solve unique landscape challenges and create outdoor spaces that exceed expectations.</p>
                </div>
            </div>
        </div>
    </section>

<section id="projects" class="projects">
        <div class="container">
            <div class="section-title">
                <h2>Our Featured Projects</h2>
                <p>Explore our portfolio of stunning landscape transformations</p>
            </div>
            <div class="projects-grid">
                <div class="project-card">
                    <img src="https://images.unsplash.com/photo-1551410224-699683e15636?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Modern Garden Design" class="project-img">
                    <div class="project-overlay">
                        <h3 class="project-title">Modern Garden Retreat</h3>
                        <p class="project-category">Residential Landscape</p>
                        <a href="#" class="project-link">View Project <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>
                    </div>
                </div>
                <div class="project-card">
                    <img src="https://images.unsplash.com/photo-1598902108854-10e335adac99?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Luxury Pool Landscape" class="project-img">
                    <div class="project-overlay">
                        <h3 class="project-title">Luxury Pool Oasis</h3>
                        <p class="project-category">Water Feature Design</p>
                        <a href="#" class="project-link">View Project <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>
                    </div>
                </div>
                <div class="project-card">
                    <img src="https://images.unsplash.com/photo-1600240644455-3edc55c375fe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Commercial Landscape" class="project-img">
                    <div class="project-overlay">
                        <h3 class="project-title">Corporate Plaza</h3>
                        <p class="project-category">Commercial Landscape</p>
                        <a href="#" class="project-link">View Project <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="services" class="slider-section">
        <div class="container">
            <div class="section-title">
                <h2>Our Services</h2>
                <p>Comprehensive landscape solutions tailored to your needs</p>
            </div>
            <div class="slider-container">
                <div class="slider-arrow prev">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
                </div>
                
                <div class="slider">
                    
                    <div class="slide">
                        <div class="slide-content">
                            <h3 class="slide-title">Landscape Design</h3>
                            <p class="slide-text">Our expert designers create custom landscape plans that reflect your style and meet your functional needs. We consider factors like site conditions, architecture, and your lifestyle to create harmonious outdoor spaces.</p>
                            <a href="#" class="btn btn-primary">Learn More</a>
                        </div>
                        <div class="slide-img">
                            <img src="https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80" alt="Landscape Design">
                        </div>
                    </div>
                    
                    
                    <div class="slide">
                        <div class="slide-content">
                            <h3 class="slide-title">Hardscape Installation</h3>
                            <p class="slide-text">From patios and walkways to retaining walls and outdoor kitchens, our hardscape installations add structure and functionality to your landscape while complementing the natural elements.</p>
                            <a href="#" class="btn btn-primary">Learn More</a>
                        </div>
                        <div class="slide-img">
                            <img src="https://images.unsplash.com/photo-1591825729269-caeb344f6df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Hardscape Installation">
                        </div>
                    </div>
                    
                    
                    <div class="slide">
                        <div class="slide-content">
                            <h3 class="slide-title">Garden & Planting</h3>
                            <p class="slide-text">We select and install plants that thrive in your specific environment while creating beautiful compositions of color, texture, and form throughout the seasons.</p>
                            <a href="#" class="btn btn-primary">Learn More</a>
                        </div>
                        <div class="slide-img">
                            <img src="https://images.unsplash.com/photo-1599685315640-4a9ba2613f46?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80" alt="Garden & Planting">
                        </div>
                    </div>
                </div>
                
                <div class="slider-arrow next">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
                </div>
                
                <div class="slider-nav">
                    <div class="slider-dot active" data-index="0"></div>
                    <div class="slider-dot" data-index="1"></div>
                    <div class="slider-dot" data-index="2"></div>
                </div>
            </div>
        </div>
    </section>

<section class="process">
        <div class="container">
            <div class="section-title">
                <h2>Our Design Process</h2>
                <p>How we bring your landscape vision to life</p>
            </div>
            <div class="process-steps">
                <div class="process-step">
                    <div class="step-number">1</div>
                    <div class="step-content">
                        <h3 class="step-title">Consultation</h3>
                        <p class="step-text">We meet to discuss your goals, preferences, and budget while assessing your property's unique characteristics.</p>
                    </div>
                </div>
                <div class="process-step">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <h3 class="step-title">Design Concept</h3>
                        <p class="step-text">Our designers create a custom landscape plan that addresses your needs and enhances your property's natural beauty.</p>
                    </div>
                </div>
                <div class="process-step">
                    <div class="step-number">3</div>
                    <div class="step-content">
                        <h3 class="step-title">Refinement</h3>
                        <p class="step-text">We collaborate with you to refine the design until it perfectly aligns with your vision and requirements.</p>
                    </div>
                </div>
                <div class="process-step">
                    <div class="step-number">4</div>
                    <div class="step-content">
                        <h3 class="step-title">Implementation</h3>
                        <p class="step-text">Our skilled team brings the design to life with meticulous attention to detail and quality craftsmanship.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="testimonials">
        <div class="container">
            <div class="section-title">
                <h2>Client Testimonials</h2>
                <p>What our clients say about our landscape design services</p>
            </div>
            <div class="testimonials-container">
                <div class="testimonial-card">
                    <div class="testimonial-header">
                        <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Client" class="testimonial-img">
                        <div class="testimonial-info">
                            <h4>Emily Johnson</h4>
                            <p>Residential Client</p>
                        </div>
                    </div>
                    <div class="testimonial-rating">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
                    </div>
                    <p class="testimonial-text">"TerraScape transformed our backyard from an unused space into a stunning retreat that we enjoy year-round. Their attention to detail and creative solutions exceeded our expectations."</p>
                </div>
                <div class="testimonial-card">
                    <div class="testimonial-header">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="testimonial-img">
                        <div class="testimonial-info">
                            <h4>Michael Thompson</h4>
                            <p>Commercial Client</p>
                        </div>
                    </div>
                    <div class="testimonial-rating">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
                    </div>
                    <p class="testimonial-text">"The landscape design for our corporate headquarters has received countless compliments. The team's professionalism and ability to work within our timeline and budget was impressive."</p>
                </div>
                <div class="testimonial-card">
                    <div class="testimonial-header">
                        <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Client" class="testimonial-img">
                        <div class="testimonial-info">
                            <h4>Sophia Martinez</h4>
                            <p>Residential Client</p>
                        </div>
                    </div>
                    <div class="testimonial-rating">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
                    </div>
                    <p class="testimonial-text">"We appreciated TerraScape's sustainable approach to our garden redesign. They created a beautiful, low-maintenance landscape that conserves water and attracts local wildlife."</p>
                </div>
            </div>
        </div>
    </section>

<section id="gallery" class="gallery">
        <div class="container">
            <div class="section-title">
                <h2>Our Gallery</h2>
                <p>A showcase of our landscape design projects</p>
            </div>
            <div class="gallery-grid">
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1558036117-15d82a90b9b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Modern Garden" class="gallery-img">
                    <div class="gallery-overlay">
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="gallery-icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1551410224-699683e15636?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Garden Path" class="gallery-img">
                    <div class="gallery-overlay">
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="gallery-icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1598902108854-10e335adac99?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Pool Landscape" class="gallery-img">
                    <div class="gallery-overlay">
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="gallery-icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1600240644455-3edc55c375fe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Commercial Landscape" class="gallery-img">
                    <div class="gallery-overlay">
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="gallery-icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80" alt="Garden Design" class="gallery-img">
                    <div class="gallery-overlay">
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="gallery-icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1591825729269-caeb344f6df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Patio Design" class="gallery-img">
                    <div class="gallery-overlay">
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="gallery-icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="contact" class="contact">
        <div class="container">
            <div class="section-title">
                <h2>Get In Touch</h2>
                <p>Contact us to discuss your landscape design project</p>
            </div>
            <div class="contact-container">
                <div class="contact-info">
                    <h3>Let's Create Your Dream Landscape</h3>
                    <div class="contact-details">
                        <div class="contact-item">
                            <div class="contact-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
                            </div>
                            <div class="contact-text">
                                <h4>Our Office</h4>
                                <p>123 Landscape Lane, Garden City, CA 90210</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
                            </div>
                            <div class="contact-text">
                                <h4>Phone</h4>
                                <p>(555) 123-4567</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2   stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
                            </div>
                            <div class="contact-text">
                                <h4>Email</h4>
                                <p>info@terrascape.com</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
                            </div>
                            <div class="contact-text">
                                <h4>Hours</h4>
                                <p>Monday - Friday: 8am - 6pm</p>
                                <p>Saturday: 9am - 4pm</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="contact-form">
                    <form action="#" method="POST">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Your Name" required>
                        </div>
                        <div class="form-group">
                            <input type="email" class="form-control" placeholder="Your Email" required>
                        </div>
                        <div class="form-group">
                            <input type="tel" class="form-control" placeholder="Your Phone">
                        </div>
                        <div class="form-group">
                            <select class="form-control" required>
                                <option value="" disabled selected>Service Interested In</option>
                                <option value="design">Landscape Design</option>
                                <option value="hardscape">Hardscape Installation</option>
                                <option value="garden">Garden & Planting</option>
                                <option value="maintenance">Maintenance</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <textarea class="form-control" placeholder="Your Message" required></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">Send Message</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<?php include 'include/footer.php'; ?>

<script>
        // Mobile Menu Toggle
        document.addEventListener('DOMContentLoaded', function() {
            const mobileToggle = document.querySelector('.mobile-toggle');
            const navMenu = document.querySelector('.nav-menu');

if (mobileToggle) {
                mobileToggle.addEventListener('click', () => {
                    navMenu.classList.toggle('active');
                    mobileToggle.querySelector('i').classList.toggle('fa-bars');
                    mobileToggle.querySelector('i').classList.toggle('fa-times');
                });
            }

// Close mobile menu when clicking on a nav link
            const navLinks = document.querySelectorAll('.nav-link');
            navLinks.forEach(link => {
                link.addEventListener('click', () => {
                    navMenu.classList.remove('active');
                    if (mobileToggle.querySelector('i')) {
                        mobileToggle.querySelector('i').classList.add('fa-bars');
                        mobileToggle.querySelector('i').classList.remove('fa-times');
                    }
                });
            });

// Smooth scrolling for anchor links
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function(e) {
                    e.preventDefault();
                    const target = document.querySelector(this.getAttribute('href'));
                    if (target) {
                        window.scrollTo({
                            top: target.offsetTop - 80,
                            behavior: 'smooth'
                        });
                    }
                });
            });

// Header scroll effect
            const header = document.querySelector('header');
            window.addEventListener('scroll', () => {
                if (window.scrollY > 50) {
                    header.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
                    header.style.padding = '5px 0';
                } else {
                    header.style.boxShadow = 'none';
                    header.style.padding = '0';
                }
            });

// Slider functionality
            const slider = document.querySelector('.slider');
            const slides = document.querySelectorAll('.slide');
            const prevBtn = document.querySelector('.slider-arrow.prev');
            const nextBtn = document.querySelector('.slider-arrow.next');
            const dots = document.querySelectorAll('.slider-dot');
            
            if (slider && slides.length > 0) {
                let currentIndex = 0;
                const slideCount = slides.length;
                
                // Set initial position
                updateSlider();
                
                // Event listeners for navigation
                if (prevBtn) {
                    prevBtn.addEventListener('click', () => {
                        currentIndex = (currentIndex - 1 + slideCount) % slideCount;
                        updateSlider();
                    });
                }
                
                if (nextBtn) {
                    nextBtn.addEventListener('click', () => {
                        currentIndex = (currentIndex + 1) % slideCount;
                        updateSlider();
                    });
                }
                
                // Event listeners for dots
                dots.forEach((dot, index) => {
                    dot.addEventListener('click', () => {
                        currentIndex = index;
                        updateSlider();
                    });
                });
                
                // Auto slide
                let autoSlideInterval = setInterval(() => {
                    currentIndex = (currentIndex + 1) % slideCount;
                    updateSlider();
                }, 5000);
                
                // Pause auto slide on hover
                slider.addEventListener('mouseenter', () => {
                    clearInterval(autoSlideInterval);
                });
                
                slider.addEventListener('mouseleave', () => {
                    autoSlideInterval = setInterval(() => {
                        currentIndex = (currentIndex + 1) % slideCount;
                        updateSlider();
                    }, 5000);
                });
                
                // Update slider position and active dot
                function updateSlider() {
                    slider.style.transform = `translateX(-${currentIndex * 100}%)`;
                    
                    // Update active dot
                    dots.forEach((dot, index) => {
                        if (index === currentIndex) {
                            dot.classList.add('active');
                        } else {
                            dot.classList.remove('active');
                        }
                    });
                }
            }
        });
    </script>
</body>
</html>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: landscape.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation