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: design-consultancy.php

<?php
// Define site variables
$site_name = "DesignHub";
$tagline = "Creative Design Consultancy";
$year = date("Y");

// Navigation items
$nav_items = [
    ["Home", "#home"],
    ["Services", "#services"],
    ["Portfolio", "#portfolio"],
    ["Process", "#process"],
    ["Team", "#team"],
    ["Testimonials", "#testimonials"],
    ["Contact", "#contact"]
];

// Services
$services = [
    [
        "icon" => "fa-paint-brush",
        "title" => "Interior Design",
        "description" => "Transform your space with our expert interior design services tailored to your lifestyle and preferences."
    ],
    [
        "icon" => "fa-building",
        "title" => "Architectural Planning",
        "description" => "Comprehensive architectural planning that balances aesthetics, functionality, and sustainability."
    ],
    [
        "icon" => "fa-object-group",
        "title" => "Space Optimization",
        "description" => "Maximize your space potential with our innovative space optimization solutions."
    ],
    [
        "icon" => "fa-pencil-ruler",
        "title" => "Custom Furniture",
        "description" => "Bespoke furniture design that perfectly complements your space and reflects your personal style."
    ],
    [
        "icon" => "fa-lightbulb",
        "title" => "Lighting Design",
        "description" => "Strategic lighting solutions that enhance ambiance and functionality in any space."
    ],
    [
        "icon" => "fa-palette",
        "title" => "Color Consultation",
        "description" => "Expert color schemes that create the perfect mood and atmosphere for your environment."
    ]
];

// Portfolio items
$portfolio_items = [
    [
        "image" => "hospitalityimages(10).png",
        "title" => "Modern Minimalist Home",
        "category" => "Residential"
    ],
    [
        "image" => "hospitalityimages(9).png",
        "title" => "Luxury Office Space",
        "category" => "Commercial"
    ],
    [
        "image" => "hospitalityimages.png",
        "title" => "Boutique Hotel Lobby",
        "category" => "Hospitality"
    ],
    [
        "image" => "hospitalityimages(8).png",
        "title" => "Urban Apartment",
        "category" => "Residential"
    ],
    [
        "image" => "hospitalityimages(7).png",
        "title" => "Concept Restaurant",
        "category" => "Commercial"
    ],
    [
        "image" => "hospitalityimages(6).png",
        "title" => "Wellness Center",
        "category" => "Healthcare"
    ]
];

// Process steps
$process_steps = [
    [
        "number" => "01",
        "title" => "Discovery",
        "description" => "We begin with a thorough consultation to understand your vision, requirements, and budget."
    ],
    [
        "number" => "02",
        "title" => "Concept Development",
        "description" => "Our team creates initial design concepts based on your needs and preferences."
    ],
    [
        "number" => "03",
        "title" => "Design Refinement",
        "description" => "We refine the chosen concept with detailed plans, materials, and finishes."
    ],
    [
        "number" => "04",
        "title" => "Implementation",
        "description" => "Our experts oversee the execution to ensure the design is implemented flawlessly."
    ]
];

// Team members
$team_members = [
    [
        "image" => "https://placeholder.svg?height=400&width=400",
        "name" => "Sarah Johnson",
        "position" => "Principal Designer",
        "bio" => "With over 15 years of experience, Sarah leads our design team with creativity and precision."
    ],
    [
        "image" => "https://placeholder.svg?height=400&width=400",
        "name" => "Michael Chen",
        "position" => "Architectural Consultant",
        "bio" => "Michael brings technical expertise and innovative solutions to every architectural challenge."
    ],
    [
        "image" => "https://placeholder.svg?height=400&width=400",
        "name" => "Priya Patel",
        "position" => "Interior Stylist",
        "bio" => "Priya's eye for detail and trend awareness ensures spaces that are both timeless and current."
    ],
    [
        "image" => "https://placeholder.svg?height=400&width=400",
        "name" => "James Wilson",
        "position" => "Project Manager",
        "bio" => "James ensures every project is delivered on time and exceeds client expectations."
    ]
];

// Testimonials
$testimonials = [
    [
        "quote" => "Working with DesignHub transformed our office space completely. The team understood our brand and created a space that inspires creativity and collaboration.",
        "client" => "Emma Roberts",
        "company" => "Innovate Tech"
    ],
    [
        "quote" => "The attention to detail and personalized approach made all the difference. Our home now perfectly reflects our style and meets all our functional needs.",
        "client" => "David & Lisa Thompson",
        "company" => "Homeowners"
    ],
    [
        "quote" => "From concept to completion, the DesignHub team was professional, creative, and responsive. They turned our vision into reality, on time and within budget.",
        "client" => "Marcus Chen",
        "company" => "Horizon Hospitality"
    ]
];

// Stats
$stats = [
    ["number" => "150+", "label" => "Projects Completed"],
    ["number" => "12", "label" => "Years of Experience"],
    ["number" => "35", "label" => "Design Awards"],
    ["number" => "98%", "label" => "Client Satisfaction"]
];
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $site_name; ?> - <?php echo $tagline; ?></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <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>
        /* Base Styles */
        :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: Caramella, Regular;
            color: var(--text-dark);
            line-height: 1.6;
            overflow-x: hidden;
        }

h1, h2, h3, h4, h5 {
            font-family: 'Playfair Display', serif;
            font-weight: 600;
            line-height: 1.3;
        }

a {
            text-decoration: none;
            color: inherit;
            transition: var(--transition);
        }

ul {
            list-style: none;
        }

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

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

.btn {
            display: inline-block;
            padding: 12px 30px;
            background-color: var(--primary);
            color: var(--white);
            border: 2px solid var(--primary);
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 14px;
        }

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

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

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

.section {
            padding: 100px 0;
        }

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

.section-title h2 {
            font-size: 42px;
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
        }

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

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

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

.header.scrolled {
            padding: 15px 0;
        }

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

.logo {
            font-family: Caramella, Regular;
            font-size: 28px;
            font-weight: 700;
            color: var(--primary);
        }

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

.nav-toggle {
            display: none;
            background: none;
            border: none;
            font-size: 24px;
            color: var(--text-dark);
            cursor: pointer;
        }

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

.nav-menu li {
            margin-left: 30px;
        }

.nav-menu a {
            font-size: 15px;
            font-weight: 500;
            color: var(--text-dark);
            position: relative;
        }

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

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

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

.nav-menu .btn {
            margin-left: 30px;
            padding: 10px 20px;
        }

/* Hero Section */
        .hero {
            height: 100vh;
            background-color: var(--secondary);
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

.hero:before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 50%;
            height: 100%;
            background-color: var(--primary);
            clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
            z-index: 1;
        }

.hero-content {
            position: relative;
            z-index: 2;
            max-width: 600px;
        }

.hero-subtitle {
            font-size: 18px;
            color: var(--primary);
            margin-bottom: 20px;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

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

.hero-description {
            font-size: 18px;
            color: var(--text-light);
            margin-bottom: 30px;
        }

.hero-buttons {
            display: flex;
            gap: 15px;
        }

.hero-image {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 50%;
            height: 80%;
            z-index: 2;
            background-image: url('https://placeholder.svg?height=800&width=1000');
            background-size: cover;
            background-position: center;
            border-radius: 0 0 0 100px;
            box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.1);
        }

/* About Section */
        .about {
            background-color: var(--white);
        }

.about-inner {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
        }

.about-image {
            position: relative;
            height: 500px;
            border-radius: 10px;
            overflow: hidden;
        }

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

.about-image:before {
            content: '';
            position: absolute;
            top: 20px;
            left: 20px;
            width: 100%;
            height: 100%;
            border: 5px solid var(--primary);
            border-radius: 10px;
            z-index: -1;
        }

.about-content h2 {
            font-size: 36px;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 15px;
        }

.about-content h2:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60px;
            height: 2px;
            background-color: var(--primary);
        }

.about-content p {
            margin-bottom: 20px;
            color: var(--text-light);
        }

.about-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
            margin-top: 30px;
        }

.stat-item {
            text-align: center;
        }

.stat-number {
            font-size: 36px;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 5px;
        }

.stat-label {
            font-size: 14px;
            color: var(--text-light);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

/* Services Section */
        .services {
            background-color: var(--secondary);
            position: relative;
        }

.services:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23a67b5b' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            opacity: 0.5;
        }

.services-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

.service-card {
            background-color: var(--white);
            padding: 40px 30px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: var(--transition);
            position: relative;
            z-index: 1;
            overflow: hidden;
        }

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

.service-card:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 0;
            background-color: var(--primary);
            z-index: -1;
            transition: var(--transition);
        }

.service-card:hover:before {
            height: 100%;
        }

.service-icon {
            font-size: 40px;
            color: var(--primary);
            margin-bottom: 20px;
            transition: var(--transition);
        }

.service-card:hover .service-icon {
            color: var(--white);
        }

.service-title {
            font-size: 22px;
            margin-bottom: 15px;
            transition: var(--transition);
        }

.service-card:hover .service-title {
            color: var(--white);
        }

.service-description {
            color: var(--text-light);
            transition: var(--transition);
        }

.service-card:hover .service-description {
            color: var(--secondary);
        }

/* Portfolio Section */
        .portfolio {
            background-color: var(--white);
        }

.portfolio-filter {
            display: flex;
            justify-content: center;
            margin-bottom: 40px;
            flex-wrap: wrap;
        }

.filter-btn {
            padding: 8px 20px;
            margin: 5px;
            background-color: transparent;
            border: 1px solid var(--gray);
            color: var(--text-light);
            cursor: pointer;
            transition: var(--transition);
            border-radius: 30px;
        }

.filter-btn.active, .filter-btn:hover {
            background-color: var(--primary);
            color: var(--white);
            border-color: var(--primary);
        }

.portfolio-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

.portfolio-item {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            height: 300px;
        }

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

.portfolio-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(166, 123, 91, 0.9);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: var(--transition);
            padding: 20px;
            text-align: center;
        }

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

.portfolio-item:hover .portfolio-image {
            transform: scale(1.1);
        }

.portfolio-category {
            font-size: 14px;
            color: var(--secondary);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 10px;
        }

.portfolio-title {
            font-size: 24px;
            color: var(--white);
            margin-bottom: 15px;
        }

.portfolio-link {
            display: inline-block;
            width: 50px;
            height: 50px;
            background-color: var(--white);
            border-radius: 50%;
            line-height: 50px;
            text-align: center;
            color: var(--primary);
            font-size: 18px;
            transition: var(--transition);
        }

.portfolio-link:hover {
            background-color: var(--text-dark);
            color: var(--white);
        }

/* Process Section */
        .process {
            background-color: var(--secondary);
            position: relative;
        }

.process:before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 300px;
            height: 300px;
            background-color: var(--primary);
            opacity: 0.1;
            border-radius: 50%;
            transform: translate(150px, -150px);
        }

.process-steps {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
        }

.process-step {
            text-align: center;
            padding: 40px 20px;
            background-color: var(--white);
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            position: relative;
            z-index: 1;
        }

.step-number {
            font-size: 60px;
            font-weight: 700;
            color: var(--primary);
            opacity: 0.2;
            position: absolute;
            top: 10px;
            left: 20px;
            z-index: -1;
        }

.step-title {
            font-size: 22px;
            margin-bottom: 15px;
            position: relative;
            z-index: 2;
        }

.step-description {
            color: var(--text-light);
            position: relative;
            z-index: 2;
        }

/* Team Section */
        .team {
            background-color: var(--white);
        }

.team-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
        }

.team-member {
            text-align: center;
            transition: var(--transition);
        }

.team-image {
            width: 100%;
            height: 300px;
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 20px;
            position: relative;
        }

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

.team-social {
            position: absolute;
            bottom: -50px;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: center;
            gap: 10px;
            padding: 15px 0;
            background-color: var(--primary);
            transition: var(--transition);
        }

.team-member:hover .team-social {
            bottom: 0;
        }

.team-member:hover .team-image img {
            transform: scale(1.1);
        }

.social-link {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            color: var(--white);
            line-height: 36px;
            text-align: center;
            transition: var(--transition);
        }

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

.team-name {
            font-size: 22px;
            margin-bottom: 5px;
        }

.team-position {
            color: var(--primary);
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 10px;
        }

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

/* Testimonials Section */
        .testimonials {
            background-color: var(--secondary);
            position: relative;
        }

.testimonials:before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background-color: var(--primary);
            opacity: 0.1;
            border-radius: 50%;
            transform: translate(-100px, 100px);
        }

.testimonials-slider {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            gap: 30px;
            padding-bottom: 30px;
        }

.testimonials-slider::-webkit-scrollbar {
            height: 8px;
        }

.testimonials-slider::-webkit-scrollbar-track {
            background: var(--gray);
            border-radius: 10px;
        }

.testimonials-slider::-webkit-scrollbar-thumb {
            background-color: var(--primary);
            border-radius: 10px;
        }

.testimonial-card {
            flex: 0 0 calc(33.333% - 20px);
            scroll-snap-align: start;
            background-color: var(--white);
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            position: relative;
        }

.testimonial-quote {
            font-size: 18px;
            color: var(--text-light);
            margin-bottom: 20px;
            position: relative;
            padding-top: 30px;
        }

.testimonial-quote:before {
            content: '\f10d';
            font-family: Caramella, Regular;
            font-weight: 900;
            position: absolute;
            top: 0;
            left: 0;
            font-size: 24px;
            color: var(--primary);
        }

.testimonial-client {
            font-weight: 600;
            color: var(--text-dark);
        }

.testimonial-company {
            color: var(--primary);
            font-size: 14px;
        }

/* Stats Section */
        .stats {
            background-color: var(--primary);
            color: var(--white);
            padding: 80px 0;
        }

.stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            text-align: center;
        }

.stat-item {
            padding: 20px;
        }

.stat-number {
            font-size: 48px;
            font-weight: 700;
            margin-bottom: 10px;
            font-family: Caramella, Regular;
        }

.stat-label {
            font-size: 16px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

/* Contact Section */
        .contact {
            background-color: var(--white);
        }

.contact-inner {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
        }

.contact-info {
            padding-right: 30px;
        }

.contact-info h2 {
            font-size: 36px;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 15px;
        }

.contact-info h2:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60px;
            height: 2px;
            background-color: var(--primary);
        }

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

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

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

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

.contact-text p {
            margin-bottom: 0;
        }

.contact-form {
            background-color: var(--white);
            padding: 40px;
            border-radius: 10px;
            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: 5px;
            font-family: Caramella, Regular;
            font-size: 15px;
            transition: var(--transition);
        }

.form-control:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(166, 123, 91, 0.2);
        }

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

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

.footer-top {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 50px;
            margin-bottom: 50px;
        }

.footer-logo {
            font-family: Caramella, Regular;
            font-size: 28px;
            font-weight: 700;
            color: var(--white);
            margin-bottom: 20px;
        }

.footer-logo span {
            color: var(--primary);
        }

.footer-about {
            color: var(--gray);
            margin-bottom: 20px;
        }

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

.footer-social-link {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            color: var(--white);
            line-height: 40px;
            text-align: center;
            transition: var(--transition);
        }

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

.footer-title {
            font-size: 20px;
            margin-bottom: 25px;
            color: var(--white);
            position: relative;
            padding-bottom: 10px;
        }

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

.footer-links li {
            margin-bottom: 10px;
        }

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

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

.footer-contact-item {
            display: flex;
            margin-bottom: 15px;
        }

.footer-contact-icon {
            color: var(--primary);
            margin-right: 15px;
            font-size: 18px;
        }

.footer-contact-text {
            color: var(--gray);
        }

.footer-bottom {
            text-align: center;
            padding: 25px 0;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--gray);
        }

/* Responsive Styles */
        @media (max-width: 1200px) {
            .container {
                max-width: 960px;
            }

.hero-title {
                font-size: 50px;
            }

.services-grid,
            .team-grid {
                grid-template-columns: repeat(3, 1fr);
            }

.process-steps {
                grid-template-columns: repeat(2, 1fr);
            }

.stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }

.footer-top {
                grid-template-columns: 1fr 1fr;
                gap: 30px;
            }
        }

@media (max-width: 992px) {
            .container {
                max-width: 720px;
            }

.nav-toggle {
                display: block;
            }

.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;
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
                transition: var(--transition);
                overflow-y: auto;
            }

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

.nav-menu li {
                margin: 0 0 20px 0;
                width: 100%;
            }

.nav-menu .btn {
                margin: 20px 0 0 0;
                width: 100%;
                text-align: center;
            }

.hero:before {
                width: 100%;
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
                opacity: 0.8;
            }

.hero-content {
                text-align: center;
                margin: 0 auto;
            }

.hero-buttons {
                justify-content: center;
            }

.hero-image {
                display: none;
            }

.about-inner,
            .contact-inner {
                grid-template-columns: 1fr;
            }

.about-image:before {
                display: none;
            }

.services-grid,
            .portfolio-grid,
            .team-grid {
                grid-template-columns: repeat(2, 1fr);
            }

.testimonial-card {
                flex: 0 0 calc(50% - 15px);
            }
        }

@media (max-width: 768px) {
            .container {
                max-width: 540px;
            }

.section {
                padding: 70px 0;
            }

.section-title h2 {
                font-size: 36px;
            }

.hero-title {
                font-size: 40px;
            }

.services-grid,
            .portfolio-grid,
            .process-steps,
            .team-grid,
            .stats-grid {
                grid-template-columns: 1fr;
            }

.testimonial-card {
                flex: 0 0 100%;
            }

.footer-top {
                grid-template-columns: 1fr;
            }
        }

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

.hero-subtitle {
                font-size: 16px;
            }

.hero-title {
                font-size: 32px;
            }

.hero-description {
                font-size: 16px;
            }

.hero-buttons {
                flex-direction: column;
                gap: 10px;
            }

.btn {
                width: 100%;
                text-align: center;
            }

.about-stats {
                grid-template-columns: 1fr;
            }

.portfolio-filter {
                flex-direction: column;
                align-items: center;
            }

.filter-btn {
                width: 100%;
                margin-bottom: 10px;
            }
        }
    </style>
</head>
<body>
    
   <?php include 'include/header.php'; ?>

<section class="hero" id="home">
        <div class="container">
            <div class="hero-content">
                <p class="hero-subtitle">Creative Solutions</p>
                <h1 class="hero-title">Transforming Spaces Into Experiences</h1>
                <p class="hero-description">We create thoughtful design solutions that elevate spaces and enhance the way people live, work, and interact with their environment.</p>
                <div class="hero-buttons">
                    <a href="#portfolio" class="btn">View Our Work</a>
                    <a href="#contact" class="btn btn-outline">Contact Us</a>
                </div>
            </div>
        </div>
        
    </section>

<section class="about section" id="about">
        <div class="container">
            <div class="about-inner">
                <div class="about-image">
                    <img src="img/aboutimages(1).png" alt="About <?php echo $site_name; ?>">
                </div>
                <div class="about-content">
                    <h2>Crafting Exceptional Design Experiences</h2>
                    <p>Founded in 2010, <?php echo $site_name; ?> has established itself as a leading design consultancy, known for creating spaces that inspire, function beautifully, and reflect our clients' unique identities.</p>
                    <p>Our multidisciplinary team of designers, architects, and creative thinkers brings diverse perspectives to every project, ensuring innovative solutions that exceed expectations.</p>
                    <p>We believe that great design has the power to transform not just spaces, but experiences and lives. This philosophy guides our approach to every project, from residential interiors to commercial spaces.</p>
                    <div class="about-stats">
                        <?php foreach($stats as $stat): ?>
                            <div class="stat-item">
                                <div class="stat-number"><?php echo $stat['number']; ?></div>
                                <div class="stat-label"><?php echo $stat['label']; ?></div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="services section" id="services">
        <div class="container">
            <div class="section-title">
                <h2>Our Services</h2>
                <p>We offer a comprehensive range of design services tailored to meet your specific needs and vision.</p>
            </div>
            <div class="services-grid">
                <?php foreach($services as $service): ?>
                    <div class="service-card">
                        <div class="service-icon">
                            <i class="fas <?php echo $service['icon']; ?>"></i>
                        </div>
                        <h3 class="service-title"><?php echo $service['title']; ?></h3>
                        <p class="service-description"><?php echo $service['description']; ?></p>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

<section class="process section" id="process">
        <div class="container">
            <div class="section-title">
                <h2>Our Process</h2>
                <p>We follow a structured approach to ensure every project is executed flawlessly from concept to completion.</p>
            </div>
            <div class="process-steps">
                <?php foreach($process_steps as $step): ?>
                    <div class="process-step">
                        <div class="step-number"><?php echo $step['number']; ?></div>
                        <h3 class="step-title"><?php echo $step['title']; ?></h3>
                        <p class="step-description"><?php echo $step['description']; ?></p>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

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

<script>
        // Header scroll effect
        window.addEventListener('scroll', function() {
            const header = document.getElementById('header');
            if (window.scrollY > 50) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });

// Mobile menu toggle
        const navToggle = document.getElementById('nav-toggle');
        const navMenu = document.getElementById('nav-menu');

navToggle.addEventListener('click', function() {
            navMenu.classList.toggle('active');
        });

// Portfolio filter
        const filterBtns = document.querySelectorAll('.filter-btn');
        const portfolioItems = document.querySelectorAll('.portfolio-item');

filterBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                // Remove active class from all buttons
                filterBtns.forEach(btn => btn.classList.remove('active'));
                // Add active class to clicked button
                this.classList.add('active');

const filterValue = this.getAttribute('data-filter');

portfolioItems.forEach(item => {
                    if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {
                        item.style.display = 'block';
                    } else {
                        item.style.display = 'none';
                    }
                });
            });
        });

// Counter animation
        function animateCounter(element, target, duration) {
            let start = 0;
            const increment = target / (duration / 16);
            const timer = setInterval(() => {
                start += increment;
                element.textContent = Math.floor(start);
                if (start >= target) {
                    element.textContent = target;
                    clearInterval(timer);
                }
            }, 16);
        }

// Intersection Observer for counters
        const statNumbers = document.querySelectorAll('.stat-number');
        
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const target = parseInt(entry.target.textContent);
                    animateCounter(entry.target, target, 2000);
                    observer.unobserve(entry.target);
                }
            });
        }, { threshold: 0.5 });

statNumbers.forEach(number => {
            const value = number.textContent;
            number.textContent = '0';
            observer.observe(number);
        });
    </script>
</body>
</html>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: design-consultancy.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation