<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Us | Open Road Market</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <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=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <!-- Animation library -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <style>
        /* Additional styles specific to the about page */
        .about-hero {
            background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), 
                              url('https://images.unsplash.com/photo-1580273916550-e323be2ae537?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            height: 80vh;
            min-height: 500px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-align: center;
            margin-top: 70px;
        }
        
        .about-hero-content {
            position: relative;
            z-index: 1;
            max-width: 800px;
            padding: 0 20px;
        }
        
        .about-hero h1 {
            font-size: 4rem;
            margin-bottom: 1.5rem;
            font-weight: 700;
            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
        }
        
        .about-hero p {
            font-size: 1.5rem;
            font-weight: 300;
            max-width: 700px;
            margin: 0 auto;
            text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
        }
        
        .scroll-down {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            color: white;
            font-size: 24px;
            animation: bounce 2s infinite;
            cursor: pointer;
        }
        
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0) translateX(-50%);
            }
            40% {
                transform: translateY(-20px) translateX(-50%);
            }
            60% {
                transform: translateY(-10px) translateX(-50%);
            }
        }
        
        .about-main {
            padding: 0;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 60px;
            position: relative;
        }
        
        .section-title h2 {
            font-size: 2.5rem;
            font-weight: 700;
            display: inline-block;
            position: relative;
            padding-bottom: 15px;
        }
        
        .section-title h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background-color: var(--button-primary);
        }
        
        .section-title p {
            font-size: 1.1rem;
            max-width: 700px;
            margin: 15px auto 0;
            color: var(--secondary-color);
        }
        
        /* Our Story Section */
        .story-section {
            padding: 100px 0;
            background-color: var(--background-color);
            position: relative;
            overflow: hidden;
        }
        
        .story-section::before {
            content: '';
            position: absolute;
            top: -50px;
            right: -50px;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.03);
            z-index: 0;
        }
        
        .story-section::after {
            content: '';
            position: absolute;
            bottom: -80px;
            left: -80px;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.03);
            z-index: 0;
        }
        
        .story-content {
            display: flex;
            flex-wrap: wrap;
            gap: 60px;
            align-items: center;
            position: relative;
            z-index: 1;
        }
        
        .story-image {
            flex: 1;
            min-width: 300px;
            position: relative;
        }
        
        .story-image-frame {
            position: relative;
            padding: 15px;
            background-color: var(--background-color);
            border-radius: 10px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            transform: rotate(-2deg);
            transition: transform 0.5s ease;
        }
        
        .story-image-frame:hover {
            transform: rotate(0deg) scale(1.02);
        }
        
        .story-image-inner {
            overflow: hidden;
            border-radius: 5px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .story-image img {
            width: 100%;
            height: auto;
            transition: transform 0.7s ease;
            display: block;
        }
        
        .story-image:hover img {
            transform: scale(1.05);
        }
        
        .story-text {
            flex: 1;
            min-width: 300px;
        }
        
        .story-text h2 {
            font-size: 2.5rem;
            margin-bottom: 25px;
            position: relative;
            display: inline-block;
            padding-bottom: 15px;
        }
        
        .story-text h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60px;
            height: 3px;
            background-color: var(--button-primary);
        }
        
        .story-text p {
            margin-bottom: 20px;
            font-size: 1.1rem;
            line-height: 1.8;
            color: var(--text-color);
        }
        
        /* Values Section */
        .values-section {
            padding: 100px 0;
            background-color: var(--input-background);
            position: relative;
            overflow: hidden;
        }
        
        .values-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }
        
        .value-item {
            background-color: var(--card-background);
            padding: 40px 30px;
            border-radius: 10px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
            text-align: center;
            transition: all 0.5s ease;
            position: relative;
            overflow: hidden;
            border-bottom: 4px solid transparent;
        }
        
        .value-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
            transition: height 0.5s ease;
            z-index: 1;
        }
        
        .value-item:hover {
            transform: translateY(-15px);
            border-bottom: 4px solid var(--button-primary);
        }
        
        .value-item:hover::before {
            height: 100%;
        }
        
        .value-icon {
            font-size: 3rem;
            color: var(--button-primary);
            margin-bottom: 25px;
            position: relative;
            z-index: 2;
            transition: all 0.5s ease;
        }
        
        .value-item:hover .value-icon {
            transform: scale(1.2);
        }
        
        .value-item h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
            position: relative;
            z-index: 2;
        }
        
        .value-item p {
            color: var(--text-color);
            line-height: 1.7;
            position: relative;
            z-index: 2;
        }
        
        /* Mission & Vision Section */
        .mission-vision-section {
            padding: 100px 0;
            background-color: var(--background-color);
        }
        
        .mission-vision-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 40px;
        }
        
        .mission-box, .vision-box {
            border-radius: 10px;
            padding: 50px 40px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            transition: all 0.5s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .mission-box {
            background-color: var(--card-background);
            border-top: 5px solid #4CAF50;
        }
        
        .vision-box {
            background-color: var(--card-background);
            border-top: 5px solid #2196F3;
        }
        
        .mission-box:hover, .vision-box:hover {
            transform: translateY(-10px);
            box-shadow: 0 25px 45px rgba(0, 0, 0, 0.15);
        }
        
        .mission-box h3, .vision-box h3 {
            font-size: 2rem;
            margin-bottom: 25px;
            position: relative;
            padding-bottom: 15px;
        }
        
        .mission-box h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background-color: #4CAF50;
        }
        
        .vision-box h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background-color: #2196F3;
        }
        
        .mission-box p, .vision-box p {
            font-size: 1.1rem;
            line-height: 1.8;
            color: var(--text-color);
            flex-grow: 1;
        }
        
        .icon-bg {
            position: absolute;
            bottom: -30px;
            right: -20px;
            font-size: 140px;
            color: rgba(0, 0, 0, 0.05);
            transition: all 0.5s ease;
        }
        
        .mission-box:hover .icon-bg, .vision-box:hover .icon-bg {
            transform: rotate(15deg) scale(1.1);
        }
        
        /* Team Section */
        .team-section {
            padding: 100px 0;
            background-color: var(--background-color);
        }
        
        .team-container {
            max-width: 900px;
            margin: 50px auto 0;
        }
        
        .team-member {
            background-color: var(--card-background);
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            transition: all 0.5s ease;
            display: flex;
            flex-direction: column;
        }
        
        .team-member:hover {
            transform: translateY(-15px);
            box-shadow: 0 30px 50px rgba(0, 0, 0, 0.18);
        }
        
        .team-member-image {
            position: relative;
            height: 400px;
            overflow: hidden;
        }
        
        .team-member-image::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30%;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        
        .team-member:hover .team-member-image::after {
            opacity: 1;
        }
        
        .team-member-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.8s ease;
        }
        
        .team-member:hover .team-member-image img {
            transform: scale(1.1);
        }
        
        .team-member-info {
            padding: 30px;
            text-align: center;
        }
        
        .team-member-info h3 {
            margin-bottom: 5px;
            font-size: 1.8rem;
            color: var(--text-color);
        }
        
        .team-member-position {
            color: var(--button-primary);
            font-weight: 600;
            margin-bottom: 20px;
            display: block;
            font-size: 1.1rem;
        }
        
        .team-member-bio {
            margin-bottom: 25px;
            color: var(--text-color);
            line-height: 1.7;
        }
        
        .team-social {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }
        
        .team-social a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background-color: var(--input-background);
            color: var(--text-color);
            transition: all 0.3s ease;
            transform: translateY(0);
        }
        
        .team-member:hover .team-social a {
            transform: translateY(-8px);
        }
        
        .team-social a:nth-child(1) {
            transition-delay: 0.1s;
        }
        
        .team-social a:nth-child(2) {
            transition-delay: 0.2s;
        }
        
        .team-social a:nth-child(3) {
            transition-delay: 0.3s;
        }
        
        .team-social a:nth-child(4) {
            transition-delay: 0.4s;
        }
        
        .team-social a:hover {
            background-color: var(--button-primary);
            color: white;
        }
        
        /* Stats Section */
        .stats-section {
            padding: 80px 0;
            background-color: var(--input-background);
            position: relative;
            overflow: hidden;
        }
        
        .stats-section::before {
            content: '';
            position: absolute;
            top: -100px;
            right: -100px;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.03);
        }
        
        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 30px;
        }
        
        .stat-item {
            text-align: center;
            padding: 40px 30px;
            border-radius: 10px;
            background-color: var(--card-background);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
            transition: all 0.5s ease;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        
        .stat-item::before {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, var(--button-primary) 0%, transparent 100%);
            transition: height 0.5s ease;
            z-index: -1;
        }
        
        .stat-item:hover {
            transform: translateY(-15px);
            box-shadow: 0 25px 45px rgba(0, 0, 0, 0.12);
        }
        
        .stat-item:hover::before {
            height: 100%;
            opacity: 0.1;
        }
        
        .stat-item h3 {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 15px;
            color: var(--button-primary);
            line-height: 1;
        }
        
        .stat-item p {
            font-size: 1.1rem;
            color: var(--text-color);
            font-weight: 500;
            margin: 0;
        }
        
        /* CTA Section */
        .cta-section {
            padding: 100px 0;
            position: relative;
            color: white;
            text-align: center;
            background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
                              url('https://images.unsplash.com/photo-1549416878-b9ca95e81541?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }
        
        .cta-content {
            max-width: 800px;
            margin: 0 auto;
            padding: 0 20px;
            position: relative;
            z-index: 1;
        }
        
        .cta-content h2 {
            font-size: 3rem;
            margin-bottom: 20px;
            font-weight: 700;
        }
        
        .cta-content p {
            font-size: 1.2rem;
            margin-bottom: 40px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .cta-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }
        
        .cta-btn {
            padding: 15px 30px;
            font-size: 1rem;
            font-weight: 600;
            border-radius: 5px;
            text-transform: uppercase;
            transition: all 0.3s ease;
            display: inline-block;
            min-width: 180px;
        }
        
        .cta-btn-primary {
            background-color: var(--button-primary);
            color: white;
            border: 2px solid var(--button-primary);
        }
        
        .cta-btn-secondary {
            background-color: transparent;
            color: white;
            border: 2px solid white;
        }
        
        .cta-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
        
        @media (max-width: 992px) {
            .about-hero h1 {
                font-size: 3rem;
            }
            
            .about-hero p {
                font-size: 1.2rem;
            }
            
            .story-content {
                flex-direction: column;
            }
            
            .story-image {
                order: -1;
                margin-bottom: 40px;
            }
            
            .story-image-frame {
                max-width: 600px;
                margin: 0 auto;
            }
            
            .mission-vision-container {
                grid-template-columns: 1fr;
            }
            
            .cta-content h2 {
                font-size: 2.5rem;
            }
        }
        
        @media (max-width: 768px) {
            .about-hero {
                height: 60vh;
                min-height: 400px;
            }
            
            .about-hero h1 {
                font-size: 2.5rem;
            }
            
            .about-hero p {
                font-size: 1rem;
            }
            
            .section-title h2 {
                font-size: 2rem;
            }
            
            .story-section, .values-section, .mission-vision-section, .team-section {
                padding: 60px 0;
            }
            
            .story-text h2 {
                font-size: 2rem;
            }
            
            .mission-box, .vision-box {
                padding: 30px;
            }
            
            .mission-box h3, .vision-box h3 {
                font-size: 1.8rem;
            }
            
            .stat-item h3 {
                font-size: 2.8rem;
            }
            
            .cta-content h2 {
                font-size: 2rem;
            }
            
            .cta-content p {
                font-size: 1rem;
            }
            
            .cta-btn {
                width: 100%;
                min-width: 0;
            }
        }
        
        /* Animation classes */
        .fade-in {
            opacity: 0;
            animation: fadeIn 1s ease forwards;
        }
        
        .fade-in-up {
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 1s ease forwards;
        }
        
        @keyframes fadeIn {
            to {
                opacity: 1;
            }
        }
        
        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .animate-delay-1 {
            animation-delay: 0.2s;
        }
        
        .animate-delay-2 {
            animation-delay: 0.4s;
        }
        
        .animate-delay-3 {
            animation-delay: 0.6s;
        }
        
        .animate-delay-4 {
            animation-delay: 0.8s;
        }
    </style>
</head>
<body class="light-mode">
    <header>
        <div class="container">
            <div class="logo">
                <a href="index.html">
                    <img src="images/logo test 6.jpg" alt="Open Road Market Logo" class="logo-image">
                    <span class="logo-text">Open Road Market</span>
                </a>
            </div>
            <div class="header-controls">
                <button id="search-toggle" aria-label="Search"><i class="fas fa-search"></i></button>
                <button id="theme-toggle" aria-label="Toggle theme"><i class="fas fa-moon"></i></button>
                <button id="menu-toggle" aria-label="Toggle menu"><i class="fas fa-bars"></i></button>
            </div>
            <nav>
                <ul class="main-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle">Vehicles <i class="fas fa-chevron-down"></i></a>
                        <div class="dropdown-menu">
                            <a href="vehicles.html?type=suv">SUVs</a>
                            <a href="vehicles.html?type=sedan">Sedans</a>
                            <a href="vehicles.html?type=truck">Trucks</a>
                            <a href="vehicles.html?type=luxury">Luxury</a>
                            <a href="vehicles.html?type=bike">Bikes</a>
                            <a href="vehicles.html">View All</a>
                        </div>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle">Real Estate <i class="fas fa-chevron-down"></i></a>
                        <div class="dropdown-menu">
                            <a href="properties.html?type=apartments">Apartments</a>
                            <a href="properties.html?type=houses">Houses</a>
                            <a href="properties.html?type=commercial">Commercial</a>
                            <a href="properties.html?type=land">Land</a>
                            <a href="properties.html">View All</a>
                        </div>
                    </li>
                    <li><a href="about.html" class="active">About Us</a></li>
                    <li><a href="contact.html">Contact</a></li>
                    <li><a href="booking.html">Book Test Drive</a></li>
                    <li><a href="sell.html" class="sell-button highlight-button"><i class="fas fa-tag"></i> Sell</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- Mobile Menu (Separate implementation) -->
    <div id="mobile-menu">
        <div class="mobile-menu-header">
            <div class="logo">
                <a href="index.html">
                    <img src="images/logo test 6.jpg" alt="Open Road Market Logo" class="logo-image">
                    <span class="logo-text">ORM</span>
                </a>
            </div>
            <button id="mobile-menu-close"><i class="fas fa-times"></i></button>
        </div>
        <div class="mobile-menu-content">
            <ul class="mobile-nav">
                <li><a href="vehicles.html">All Vehicles</a></li>
                <li><a href="vehicles.html?type=suv">SUVs</a></li>
                <li><a href="vehicles.html?type=sedan">Sedans</a></li>
                <li><a href="vehicles.html?type=truck">Trucks</a></li>
                <li><a href="vehicles.html?type=luxury">Luxury</a></li>
                <li><a href="vehicles.html?type=bike">Bikes</a></li>
                <li class="divider"></li>
                <li><a href="properties.html">All Properties</a></li>
                <li><a href="properties.html?type=apartments">Apartments</a></li>
                <li><a href="properties.html?type=houses">Houses</a></li>
                <li><a href="properties.html?type=commercial">Commercial</a></li>
                <li><a href="properties.html?type=land">Land</a></li>
                <li class="divider"></li>
                <li><a href="about.html" class="active">About Us</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="booking.html">Book Test Drive</a></li>
                <li><a href="sell.html" class="mobile-sell-button"><i class="fas fa-tag"></i> Sell</a></li>
            </ul>
        </div>
    </div>

    <main>
        <!-- Hero Section -->
        <section class="about-hero">
            <div class="about-hero-content">
                <h1 class="animate__animated animate__fadeInDown">About Open Road Market</h1>
                <p class="animate__animated animate__fadeInUp animate__delay-1s">Kenya's premier luxury vehicle and real estate marketplace</p>
            </div>
            <div class="scroll-down" id="scroll-down">
                <i class="fas fa-chevron-down"></i>
            </div>
        </section>

        <!-- Main Content -->
        <div class="about-main">
            <!-- Our Story Section -->
            <section class="story-section" id="our-story">
                <div class="container">
                    <div class="story-content">
                        <div class="story-text fade-in-up">
                            <h2>Our Story</h2>
                            <p>Founded in 2015, Open Road Market has established itself as Kenya's premier marketplace for luxury vehicles and exclusive real estate. What began as a small dealership in Nairobi has grown into a comprehensive platform connecting discerning clients with exceptional automobiles and properties.</p>
                            <p>Our journey has been defined by a commitment to excellence, integrity, and personalized service. Over the years, we have built a reputation for sourcing the finest vehicles and most prestigious properties, ensuring that each client finds exactly what they're looking for.</p>
                            <p>Today, Open Road Market stands as a trusted name in Kenya's luxury market, continuing to expand our offerings while maintaining the personalized approach that has been the cornerstone of our success.</p>
                        </div>
                        <div class="story-image fade-in-up animate-delay-2">
                            <div class="story-image-frame">
                                <div class="story-image-inner">
                                    <img src="images/image.png" alt="Open Road Market Showroom">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Core Values Section -->
            <section class="values-section">
                <div class="container">
                    <div class="section-title fade-in-up">
                        <h2>Our Core Values</h2>
                        <p>The principles that guide everything we do at Open Road Market</p>
                    </div>
                    <div class="values-container">
                        <div class="value-item fade-in-up">
                            <div class="value-icon">
                                <i class="fas fa-award"></i>
                            </div>
                            <h3>Excellence</h3>
                            <p>We are committed to excellence in every aspect of our business, from the quality of our listings to the service we provide our clients.</p>
                        </div>
                        <div class="value-item fade-in-up animate-delay-1">
                            <div class="value-icon">
                                <i class="fas fa-handshake"></i>
                            </div>
                            <h3>Integrity</h3>
                            <p>We operate with complete transparency and honesty, ensuring our clients can trust us throughout their buying or selling journey.</p>
                        </div>
                        <div class="value-item fade-in-up animate-delay-2">
                            <div class="value-icon">
                                <i class="fas fa-user-tie"></i>
                            </div>
                            <h3>Personalization</h3>
                            <p>We recognize that each client has unique needs and preferences, and we tailor our services accordingly.</p>
                        </div>
                        <div class="value-item fade-in-up animate-delay-3">
                            <div class="value-icon">
                                <i class="fas fa-rocket"></i>
                            </div>
                            <h3>Innovation</h3>
                            <p>We continuously seek new ways to enhance our platform and services, staying ahead of market trends and technologies.</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Mission & Vision Section -->
            <section class="mission-vision-section">
                <div class="container">
                    <div class="section-title fade-in-up">
                        <h2>Our Mission & Vision</h2>
                    </div>
                    <div class="mission-vision-container">
                        <div class="mission-box fade-in-up">
                            <h3>Our Mission</h3>
                            <p>To connect discerning clients with exceptional vehicles and properties through a seamless, personalized experience that exceeds expectations and builds lasting relationships.</p>
                            <div class="icon-bg">
                                <i class="fas fa-bullseye"></i>
                            </div>
                        </div>
                        <div class="vision-box fade-in-up animate-delay-2">
                            <h3>Our Vision</h3>
                            <p>To be the most trusted and sought-after luxury marketplace in East Africa, known for our unparalleled selection, exceptional service, and commitment to excellence.</p>
                            <div class="icon-bg">
                                <i class="fas fa-eye"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Leadership Team Section -->
            <section class="team-section">
                <div class="container">
                    <div class="section-title fade-in-up">
                        <h2>Our Leadership</h2>
                        <p>Meet the visionary behind Open Road Market</p>
                    </div>
                    
                    <div class="team-container">
                        <div class="team-member fade-in-up">
                            <div class="team-member-image">
                                <img src="images/festus.jpg" alt="Festus Muange - Founder & CEO">
                            </div>
                            <div class="team-member-info">
                                <h3>Festus Muange</h3>
                                <span class="team-member-position">Founder & CEO</span>
                                <p class="team-member-bio">With over 15 years of experience in the automotive and real estate industries, Festus founded Open Road Market with a vision to transform the luxury market in Kenya. His expertise, passion for excellence, and commitment to customer satisfaction have been the driving forces behind the company's success.</p>
                                <div class="team-social">
                                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                                    <a href="#"><i class="fab fa-twitter"></i></a>
                                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                                    <a href="#"><i class="fab fa-instagram"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Stats Section -->
            <section class="stats-section">
                <div class="container">
                    <div class="stats-container">
                        <div class="stat-item fade-in-up">
                            <h3 id="years-counter">10+</h3>
                            <p>Years Experience</p>
                        </div>
                        <div class="stat-item fade-in-up animate-delay-1">
                            <h3 id="vehicles-counter">500+</h3>
                            <p>Vehicles Sold</p>
                        </div>
                        <div class="stat-item fade-in-up animate-delay-2">
                            <h3 id="properties-counter">300+</h3>
                            <p>Properties Sold</p>
                        </div>
                        <div class="stat-item fade-in-up animate-delay-3">
                            <h3 id="satisfaction-counter">98%</h3>
                            <p>Client Satisfaction</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Call to Action -->
            <section class="cta-section">
                <div class="cta-content">
                    <h2 class="fade-in-up">Ready to Experience the Open Road Market Difference?</h2>
                    <p class="fade-in-up animate-delay-1">Whether you're looking to buy a luxury vehicle, invest in premium real estate, or sell your valuable assets, we're here to help.</p>
                    <div class="cta-buttons fade-in-up animate-delay-2">
                        <a href="vehicles.html" class="cta-btn cta-btn-primary">Explore Vehicles</a>
                        <a href="properties.html" class="cta-btn cta-btn-secondary">Browse Properties</a>
                        <a href="contact.html" class="cta-btn cta-btn-secondary">Contact Us</a>
                    </div>
                </div>
            </section>
        </div>
    </main>

    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3>Open Road Market</h3>
                    <p>Luxury vehicles and prime real estate for discerning clients in Kenya.</p>
                    <div class="social-icons">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
                <div class="footer-column">
                    <h3>Quick Links</h3>
                    <ul>
                        <li><a href="vehicles.html">Vehicles</a></li>
                        <li><a href="properties.html">Properties</a></li>
                        <li><a href="about.html">About Us</a></li>
                        <li><a href="contact.html">Contact</a></li>
                        <li><a href="faq.html">FAQ</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Contact Us</h3>
                    <ul class="contact-info">
                        <li><i class="fas fa-map-marker-alt"></i> Embakasi Fedha Stage, Nairobi, Kenya</li>
                        <li><i class="fas fa-phone"></i> +254 721264140/+254 106820853</li>
                        <li><i class="fas fa-envelope"></i> info@openroadmarket.co.ke</li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Newsletter</h3>
                    <p>Subscribe to receive updates on our latest listings.</p>                    <form class="newsletter-form" id="newsletter-form-about">
                        <input type="email" name="email" placeholder="Your Email" required>
                        <button type="submit"><i class="fas fa-paper-plane"></i></button>
                    </form>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 Open Road Market. All Rights Reserved.</p>
            </div>
        </div>
    </footer>

    <div class="fab-container">
        <button class="fab-button main-fab" aria-label="Contact options"><i class="fas fa-comments"></i></button>        <div class="fab-options">
            <a href="tel:+254721264140" class="fab-option call-fab" aria-label="Call us">
                <i class="fas fa-phone"></i>
                <span class="fab-label">Call</span>
            </a>
            <a href="https://wa.me/254721264140" target="_blank" rel="noopener" class="fab-option whatsapp-fab" aria-label="WhatsApp">
                <i class="fab fa-whatsapp"></i>
                <span class="fab-label">WhatsApp</span>
            </a>
        </div>
    </div>

    <script src="js/script.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Scroll down button functionality
            const scrollDownBtn = document.getElementById('scroll-down');
            if (scrollDownBtn) {
                scrollDownBtn.addEventListener('click', function() {
                    const storySection = document.getElementById('our-story');
                    if (storySection) {
                        storySection.scrollIntoView({ behavior: 'smooth' });
                    }
                });
            }
            
            // Setup fade-in animations on scroll
            const fadeElements = document.querySelectorAll('.fade-in, .fade-in-up');
            
            // Create IntersectionObserver to handle animations when elements come into view
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.opacity = '1';
                        entry.target.style.transform = 'translateY(0)';
                        observer.unobserve(entry.target);
                    }
                });
            }, {
                threshold: 0.1,
                rootMargin: '0px 0px -50px 0px'
            });
            
            // Observe all fade elements
            fadeElements.forEach(el => {
                observer.observe(el);
            });
            
            // Counter animation for stats
            function startCounterAnimation() {
                const counterElements = [
                    { id: 'years-counter', end: 10, suffix: '+' },
                    { id: 'vehicles-counter', end: 500, suffix: '+' },
                    { id: 'properties-counter', end: 300, suffix: '+' },
                    { id: 'satisfaction-counter', end: 98, suffix: '%' }
                ];
                
                counterElements.forEach(counter => {
                    const element = document.getElementById(counter.id);
                    if (!element) return;
                    
                    let start = 0;
                    const duration = 2000; // 2 seconds
                    const frameDuration = 1000 / 60; // 60 fps
                    const totalFrames = Math.round(duration / frameDuration);
                    const increment = counter.end / totalFrames;
                    
                    const animateCounter = () => {
                        start += increment;
                        if (start < counter.end) {
                            element.textContent = Math.floor(start) + counter.suffix;
                            requestAnimationFrame(animateCounter);
                        } else {
                            element.textContent = counter.end + counter.suffix;
                        }
                    };
                    
                    // Create a separate observer for counter animations
                    const counterObserver = new IntersectionObserver((entries) => {
                        if (entries[0].isIntersecting) {
                            animateCounter();
                            counterObserver.unobserve(element);
                        }
                    }, { threshold: 0.5 });
                    
                    counterObserver.observe(element);
                });
            }
            
            startCounterAnimation();
            
            // Add hover animation to value items
            document.querySelectorAll('.value-item').forEach(item => {
                item.addEventListener('mouseenter', function() {
                    const icon = this.querySelector('.value-icon i');
                    icon.classList.add('fa-beat');
                    setTimeout(() => {
                        icon.classList.remove('fa-beat');
                    }, 1000);
                });
            });
        });
    </script>
</body>
</html>