<?php
session_start();
require_once __DIR__ . '/includes/db.php';
require_once __DIR__ . '/includes/functions.php';
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <meta name="description"
        content="Learn about Oakshire Finance's mission, values, and commitment to secure, connected digital banking." />
    <title>About Us | Oakshire Finance</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=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap"
        rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary-navy: #0a2540;
            --primary-dark: #0a1c2f;
            --primary-blue: #1a4d8c;
            --accent-blue: #2c7da0;
            --success-green: #2e7d32;
            --gray-50: #f8f9fc;
            --gray-100: #f1f3f9;
            --gray-200: #e9ecef;
            --gray-300: #dee2e6;
            --gray-400: #ced4da;
            --gray-500: #adb5bd;
            --gray-600: #6c757d;
            --gray-700: #495057;
            --gray-800: #343a40;
            --gray-900: #212529;
            --white: #ffffff;
            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
            --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05);
            --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
            --shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.12);
            --transition: all 0.3s ease;
        }

        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            color: var(--gray-800);
            background-color: var(--gray-50);
            line-height: 1.5;
            overflow-x: hidden;
        }

        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 32px;
        }

        /* Animation Classes */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(30px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .animate-fadeUp {
            animation: fadeInUp 0.8s ease forwards;
        }

        .animate-fadeLeft {
            animation: fadeInLeft 0.8s ease forwards;
        }

        .animate-fadeRight {
            animation: fadeInRight 0.8s ease forwards;
        }

        .delay-100 {
            animation-delay: 0.1s;
            opacity: 0;
        }

        .delay-200 {
            animation-delay: 0.2s;
            opacity: 0;
        }

        .delay-300 {
            animation-delay: 0.3s;
            opacity: 0;
        }

        /* Header */
        header {
            background: var(--white);
            box-shadow: var(--shadow-sm);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            border-bottom: 1px solid var(--gray-200);
            transition: var(--transition);
        }

        header.scrolled {
            box-shadow: var(--shadow-md);
        }

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 72px;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
            transition: var(--transition);
        }

        .logo-icon {
            width: 36px;
            height: 36px;
            background: var(--primary-navy);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .logo-icon i {
            font-size: 18px;
            color: white;
        }

        .logo-text {
            font-size: 24px;
            font-weight: 700;
            color: var(--primary-navy);
            letter-spacing: -0.3px;
        }

        .nav-links {
            display: flex;
            gap: 32px;
        }

        .nav-links a {
            text-decoration: none;
            font-weight: 500;
            color: var(--gray-700);
            transition: var(--transition);
            font-size: 15px;
            position: relative;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--primary-blue);
            transition: width 0.3s ease;
        }

        .nav-links a:hover::after,
        .nav-links a.active::after {
            width: 100%;
        }

        .nav-links a:hover,
        .nav-links a.active {
            color: var(--primary-blue);
        }

        .auth-buttons {
            display: flex;
            gap: 16px;
            align-items: center;
        }

        .btn-outline {
            padding: 8px 20px;
            border-radius: 8px;
            font-weight: 600;
            text-decoration: none;
            border: 1px solid var(--gray-300);
            color: var(--gray-700);
            transition: var(--transition);
            background: transparent;
        }

        .btn-outline:hover {
            border-color: var(--primary-blue);
            color: var(--primary-blue);
        }

        .btn-primary {
            padding: 8px 24px;
            border-radius: 8px;
            font-weight: 600;
            text-decoration: none;
            background: var(--primary-navy);
            color: white;
            transition: var(--transition);
        }

        .btn-primary:hover {
            background: var(--primary-dark);
            transform: translateY(-1px);
        }

        /* Mobile Menu */
        .hamburger {
            display: none;
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: var(--gray-800);
        }

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

            .nav-links,
            .auth-buttons {
                position: fixed;
                top: 72px;
                left: 0;
                width: 100%;
                background: var(--white);
                flex-direction: column;
                padding: 24px;
                gap: 16px;
                box-shadow: var(--shadow-lg);
                transform: translateY(-120%);
                opacity: 0;
                pointer-events: none;
                transition: transform 0.3s ease, opacity 0.2s ease;
                z-index: 999;
                border-bottom: 1px solid var(--gray-200);
            }

            .nav-links {
                align-items: center;
            }

            .auth-buttons {
                top: calc(72px + 280px);
                flex-direction: row;
                justify-content: center;
            }

            .nav-links.active,
            .auth-buttons.active {
                transform: translateY(0);
                opacity: 1;
                pointer-events: all;
            }

            .hamburger {
                display: block;
            }
        }

        /* Page Hero */
        .page-hero {
            margin-top: 72px;
            background: linear-gradient(135deg, var(--primary-navy) 0%, var(--primary-dark) 100%);
            padding: 80px 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .page-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.05"><path fill="white" d="M10,50 L90,50 M50,10 L50,90 M30,30 L70,70 M30,70 L70,30"/></svg>') repeat;
            pointer-events: none;
        }

        .page-hero h1 {
            font-size: 48px;
            font-weight: 800;
            color: white;
            margin-bottom: 16px;
            animation: fadeInUp 0.6s ease;
        }

        .page-hero p {
            font-size: 18px;
            color: rgba(255, 255, 255, 0.85);
            max-width: 700px;
            margin: 0 auto;
            animation: fadeInUp 0.6s ease 0.1s forwards;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.6s ease 0.1s forwards;
        }

        @media (max-width: 768px) {
            .page-hero {
                padding: 60px 0;
            }

            .page-hero h1 {
                font-size: 32px;
            }

            .page-hero p {
                font-size: 16px;
            }
        }

        @media (max-width: 480px) {
            .page-hero h1 {
                font-size: 28px;
            }

            .page-hero p {
                font-size: 14px;
            }
        }

        /* Mission Section */
        .mission-section {
            padding: 80px 0;
            background: var(--white);
        }

        .mission-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }

        .mission-content h2 {
            font-size: 36px;
            font-weight: 700;
            color: var(--gray-900);
            margin-bottom: 20px;
        }

        .mission-content p {
            font-size: 16px;
            color: var(--gray-600);
            line-height: 1.7;
            margin-bottom: 24px;
        }

        .mission-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 32px;
        }

        .stat-card {
            text-align: center;
            padding: 20px;
            background: var(--gray-50);
            border-radius: 16px;
            transition: var(--transition);
        }

        .stat-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-md);
        }

        .stat-number {
            font-size: 28px;
            font-weight: 700;
            color: var(--primary-navy);
        }

        .stat-label {
            font-size: 12px;
            color: var(--gray-600);
            margin-top: 4px;
        }

        .mission-image {
            background: linear-gradient(135deg, var(--primary-navy), var(--primary-blue));
            border-radius: 24px;
            padding: 40px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .mission-image i {
            font-size: 70px;
            color: rgba(255, 255, 255, 0.2);
            margin-bottom: 20px;
        }

        .mission-image h3 {
            font-size: 24px;
            color: white;
            margin-bottom: 12px;
        }

        .mission-image p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }

        @media (max-width: 992px) {
            .mission-section {
                padding: 60px 0;
            }

            .mission-grid {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .mission-content h2 {
                font-size: 28px;
            }
        }

        @media (max-width: 576px) {
            .mission-stats {
                grid-template-columns: 1fr;
                gap: 16px;
            }

            .stat-number {
                font-size: 24px;
            }

            .mission-image {
                padding: 30px;
            }

            .mission-image i {
                font-size: 50px;
            }

            .mission-image h3 {
                font-size: 20px;
            }
        }

        /* Values Section */
        .values-section {
            padding: 80px 0;
            background: var(--gray-50);
        }

        .section-header {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 60px;
        }

        .section-header h2 {
            font-size: 36px;
            font-weight: 700;
            color: var(--gray-900);
            margin-bottom: 16px;
        }

        .section-header p {
            font-size: 18px;
            color: var(--gray-600);
        }

        .values-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 32px;
        }

        .value-card {
            background: var(--white);
            padding: 32px;
            border-radius: 20px;
            text-align: center;
            transition: var(--transition);
            border: 1px solid var(--gray-200);
        }

        .value-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-hover);
            border-color: var(--gray-300);
        }

        .value-icon {
            width: 70px;
            height: 70px;
            background: rgba(26, 77, 140, 0.1);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 24px;
            transition: var(--transition);
        }

        .value-card:hover .value-icon {
            background: var(--primary-navy);
        }

        .value-icon i {
            font-size: 32px;
            color: var(--primary-blue);
            transition: var(--transition);
        }

        .value-card:hover .value-icon i {
            color: white;
        }

        .value-card h3 {
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 12px;
        }

        .value-card p {
            color: var(--gray-600);
            line-height: 1.6;
            font-size: 14px;
        }

        @media (max-width: 768px) {
            .values-section {
                padding: 60px 0;
            }

            .section-header h2 {
                font-size: 28px;
            }

            .section-header p {
                font-size: 16px;
            }

            .values-grid {
                gap: 24px;
            }

            .value-card {
                padding: 24px;
            }

            .value-card h3 {
                font-size: 20px;
            }
        }

        @media (max-width: 480px) {
            .value-icon {
                width: 60px;
                height: 60px;
            }

            .value-icon i {
                font-size: 28px;
            }
        }

        /* Timeline Section */
        .timeline-section {
            padding: 80px 0;
            background: var(--white);
        }

        .timeline {
            position: relative;
            max-width: 800px;
            margin: 0 auto;
            padding: 40px 0;
        }

        .timeline::before {
            content: '';
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 100%;
            background: var(--gray-300);
        }

        .timeline-item {
            display: flex;
            justify-content: flex-end;
            padding-right: 30px;
            position: relative;
            margin-bottom: 40px;
            width: 50%;
        }

        .timeline-item:nth-child(even) {
            align-self: flex-end;
            margin-left: 50%;
            padding-right: 0;
            padding-left: 30px;
        }

        .timeline-dot {
            position: absolute;
            right: -8px;
            top: 0;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--primary-blue);
            border: 3px solid var(--white);
            box-shadow: var(--shadow-sm);
        }

        .timeline-item:nth-child(even) .timeline-dot {
            left: -8px;
            right: auto;
        }

        .timeline-content {
            background: var(--gray-50);
            padding: 20px;
            border-radius: 16px;
            width: 100%;
            transition: var(--transition);
        }

        .timeline-content:hover {
            transform: translateX(4px);
            box-shadow: var(--shadow-md);
        }

        .timeline-year {
            font-size: 18px;
            font-weight: 700;
            color: var(--primary-blue);
            margin-bottom: 8px;
        }

        .timeline-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .timeline-text {
            font-size: 14px;
            color: var(--gray-600);
        }

        @media (max-width: 768px) {
            .timeline-section {
                padding: 60px 0;
            }

            .timeline::before {
                left: 20px;
            }

            .timeline-item {
                width: 100%;
                padding-left: 50px;
                padding-right: 0;
                justify-content: flex-start;
            }

            .timeline-item:nth-child(even) {
                margin-left: 0;
                padding-left: 50px;
            }

            .timeline-dot {
                left: 12px;
                right: auto;
            }

            .timeline-item:nth-child(even) .timeline-dot {
                left: 12px;
            }
        }

        /* CTA Section */
        .cta-section {
            padding: 80px 0;
            background: linear-gradient(135deg, var(--primary-navy), var(--primary-dark));
            text-align: center;
        }

        .cta-section h2 {
            font-size: 36px;
            font-weight: 700;
            color: white;
            margin-bottom: 16px;
        }

        .cta-section p {
            font-size: 18px;
            color: rgba(255, 255, 255, 0.85);
            max-width: 600px;
            margin: 0 auto 32px;
        }

        .cta-buttons {
            display: flex;
            gap: 16px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .btn-cta-primary {
            background: white;
            color: var(--primary-navy);
            padding: 14px 32px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-cta-primary:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        .btn-cta-outline {
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            padding: 14px 32px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
        }

        .btn-cta-outline:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: white;
            transform: translateY(-2px);
        }

        @media (max-width: 768px) {
            .cta-section {
                padding: 60px 0;
            }

            .cta-section h2 {
                font-size: 28px;
            }

            .cta-section p {
                font-size: 16px;
            }
        }

        @media (max-width: 480px) {
            .cta-buttons {
                flex-direction: column;
                align-items: stretch;
                gap: 12px;
            }

            .btn-cta-primary,
            .btn-cta-outline {
                text-align: center;
                justify-content: center;
            }
        }

        /* Footer */
        footer {
            background: var(--gray-900);
            color: var(--gray-400);
            padding: 60px 0 32px;
        }

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

        .footer-col h4 {
            font-size: 16px;
            font-weight: 600;
            color: white;
            margin-bottom: 20px;
            position: relative;
            display: inline-block;
        }

        .footer-col h4::after {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 0;
            width: 30px;
            height: 2px;
            background: var(--primary-blue);
            transition: width 0.3s ease;
        }

        .footer-col p {
            font-size: 14px;
            line-height: 1.6;
            color: var(--gray-500);
        }

        .footer-links {
            list-style: none;
        }

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

        .footer-links a {
            color: var(--gray-500);
            text-decoration: none;
            font-size: 14px;
            transition: var(--transition);
            display: inline-block;
        }

        .footer-links a:hover {
            color: white;
            transform: translateX(4px);
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 32px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
            font-size: 13px;
        }

        .social-links {
            display: flex;
            gap: 20px;
        }

        .social-links a {
            color: var(--gray-500);
            font-size: 18px;
            transition: var(--transition);
            display: inline-block;
        }

        .social-links a:hover {
            color: white;
            transform: translateY(-3px);
        }

        @media (max-width: 768px) {
            footer {
                padding: 48px 0 24px;
            }

            .footer-grid {
                gap: 32px;
                margin-bottom: 32px;
            }

            .footer-bottom {
                flex-direction: column;
                text-align: center;
            }

            .footer-col h4::after {
                left: 50%;
                transform: translateX(-50%);
            }

            .footer-col {
                text-align: center;
            }
        }

        @media (max-width: 576px) {
            .footer-grid {
                grid-template-columns: 1fr;
                text-align: center;
            }
        }

        /* Scroll Animation */
        .scroll-trigger {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }

        .scroll-trigger.visible {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
    <link rel="stylesheet" href="assets/css/nexus-theme.css" />
</head>

<body>
    <header id="header">
        <div class="container">
            <nav>
                <a href="index.php" class="logo">
                    <div class="logo-icon">
                        <i class="fas fa-building-columns"></i>
                    </div>
                    <span class="logo-text">Oakshire Finance</span>
                </a>
                <div class="nav-links" id="navLinks">
                    <a href="index.php">Home</a>
                    <a href="about-us.php" class="active">About Us</a>
                    <a href="services.php">Services</a>
                    <a href="contact.php">Contact</a>
                </div>
                <div class="auth-buttons" id="authButtons">
                    <?php if (isset($_SESSION['user_id'])): ?>
                        <a href="user/dashboard.php" class="btn-outline">Dashboard</a>
                    <?php else: ?>
                        <a href="login.php" class="btn-outline">Sign In</a>
                        <a href="register.php" class="btn-primary">Open Account</a>
                    <?php endif; ?>
                </div>
                <button class="hamburger" id="hamburger">
                    <i class="fas fa-bars"></i>
                </button>
            </nav>
        </div>
    </header>

    <main>
        <!-- Hero Section -->
        <section class="page-hero">
            <div class="container">
                <h1>Building Trust Since 2019</h1>
                <p>We're on a mission to transform banking through innovation, security, and unwavering commitment to
                    our customers.</p>
            </div>
        </section>

        <!-- Mission Section -->
        <section class="mission-section">
            <div class="container">
                <div class="mission-grid">
                    <div class="mission-content scroll-trigger">
                        <h2>Our Mission</h2>
                        <p>At Oakshire Finance, we believe that banking should be simple, secure, and accessible to
                            everyone. Our mission is to empower individuals and businesses with the financial tools they
                            need to achieve their goals, while maintaining the highest standards of security and trust.
                        </p>
                        <p>Since our founding, we've been committed to putting customers first, leveraging technology to
                            create better banking experiences, and giving back to the communities we serve.</p>
                        <div class="mission-stats">
                            <div class="stat-card">
                                <div class="stat-number">50K+</div>
                                <div class="stat-label">Customers</div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-number">$2.8B+</div>
                                <div class="stat-label">Assets Protected</div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-number">98%</div>
                                <div class="stat-label">Satisfaction Rate</div>
                            </div>
                        </div>
                    </div>
                    <div class="mission-image scroll-trigger">
                        <i class="fas fa-chart-line"></i>
                        <h3>Your Financial Partner</h3>
                        <p>Committed to helping you achieve financial success through personalized solutions and expert
                            guidance.</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Values Section -->
        <section class="values-section">
            <div class="container">
                <div class="section-header scroll-trigger">
                    <h2>Our Core Values</h2>
                    <p>The principles that guide everything we do, every day.</p>
                </div>
                <div class="values-grid">
                    <div class="value-card scroll-trigger">
                        <div class="value-icon">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <h3>Security First</h3>
                        <p>We prioritize the safety of your money and personal information with bank-grade security
                            measures.</p>
                    </div>
                    <div class="value-card scroll-trigger">
                        <div class="value-icon">
                            <i class="fas fa-hand-holding-heart"></i>
                        </div>
                        <h3>Customer Centric</h3>
                        <p>Every decision we make is driven by what's best for our customers and their financial
                            well-being.</p>
                    </div>
                    <div class="value-card scroll-trigger">
                        <div class="value-icon">
                            <i class="fas fa-lightbulb"></i>
                        </div>
                        <h3>Innovation</h3>
                        <p>We continuously evolve and adopt cutting-edge technology to serve you better.</p>
                    </div>
                    <div class="value-card scroll-trigger">
                        <div class="value-icon">
                            <i class="fas fa-balance-scale"></i>
                        </div>
                        <h3>Integrity</h3>
                        <p>We operate with transparency, honesty, and ethical practices in everything we do.</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- History Timeline -->
        <section class="timeline-section">
            <div class="container">
                <div class="section-header scroll-trigger">
                    <h2>Our Journey</h2>
                    <p>A legacy of growth, innovation, and commitment to excellence.</p>
                </div>
                <div class="timeline">
                    <div class="timeline-item scroll-trigger">
                        <div class="timeline-dot"></div>
                        <div class="timeline-content">
                            <div class="timeline-year">2019</div>
                            <div class="timeline-title">Oakshire Finance Founded</div>
                            <div class="timeline-text">Opened our first branch with a vision to revolutionize digital
                                banking and customer service.</div>
                        </div>
                    </div>
                    <div class="timeline-item scroll-trigger">
                        <div class="timeline-dot"></div>
                        <div class="timeline-content">
                            <div class="timeline-year">2020</div>
                            <div class="timeline-title">Digital Banking Launch</div>
                            <div class="timeline-text">Introduced our mobile banking app, making banking accessible 24/7
                                from anywhere.</div>
                        </div>
                    </div>
                    <div class="timeline-item scroll-trigger">
                        <div class="timeline-dot"></div>
                        <div class="timeline-content">
                            <div class="timeline-year">2021</div>
                            <div class="timeline-title">10,000 Customers Milestone</div>
                            <div class="timeline-text">Reached our first major milestone, serving thousands of satisfied
                                customers.</div>
                        </div>
                    </div>
                    <div class="timeline-item scroll-trigger">
                        <div class="timeline-dot"></div>
                        <div class="timeline-content">
                            <div class="timeline-year">2022</div>
                            <div class="timeline-title">Expanded Services</div>
                            <div class="timeline-text">Launched investment services, business accounts, and enhanced
                                security features.</div>
                        </div>
                    </div>
                    <div class="timeline-item scroll-trigger">
                        <div class="timeline-dot"></div>
                        <div class="timeline-content">
                            <div class="timeline-year">2024</div>
                            <div class="timeline-title">50,000+ Customers</div>
                            <div class="timeline-text">Celebrated serving over 50,000 customers with $2.8B in assets
                                under management.</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- CTA Section -->
        <section class="cta-section">
            <div class="container">
                <h2>Ready to Start Your Journey?</h2>
                <p>Join thousands of customers who trust Oakshire Finance with their financial future.</p>
                <div class="cta-buttons">
                    <a href="register.php" class="btn-cta-primary">Open an Account <i
                            class="fas fa-arrow-right"></i></a>
                    <a href="contact.php" class="btn-cta-outline">Contact Us</a>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <div class="container">
            <div class="footer-grid">
                <div class="footer-col">
                    <h4>Oakshire Finance</h4>
                    <p>Building trust through secure, reliable banking solutions since 2019.</p>
                    <div style="margin-top: 16px;">
                        <p><i class="fas fa-envelope"></i> support@oakshirefinance.com</p>
                        <p><i class="fas fa-phone"></i> 1-800-NEXUS-01</p>
                    </div>
                </div>
                <div class="footer-col">
                    <h4>Banking</h4>
                    <ul class="footer-links">
                        <li><a href="#">Personal Banking</a></li>
                        <li><a href="#">Business Banking</a></li>
                        <li><a href="#">Loans</a></li>
                        <li><a href="#">Credit Cards</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>Support</h4>
                    <ul class="footer-links">
                        <li><a href="#">Help Center</a></li>
                        <li><a href="#">Security</a></li>
                        <li><a href="#">Fraud Prevention</a></li>
                        <li><a href="contact.php">Contact Us</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>Legal</h4>
                    <ul class="footer-links">
                        <li><a href="terms.php">Terms & Conditions</a></li>
                        <li><a href="privacy-policy.php">Privacy Policy</a></li>
                        <li><a href="security-policy.php">Security Policy</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <div>&copy; 2025 Oakshire Finance. All rights reserved. Member FDIC.</div>
                <div class="social-links">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                </div>
            </div>
        </div>
    </footer>

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

        // Intersection Observer for scroll animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                    observer.unobserve(entry.target);
                }
            });
        }, observerOptions);

        document.querySelectorAll('.scroll-trigger').forEach(el => {
            observer.observe(el);
        });

        // Mobile menu toggle
        const hamburger = document.getElementById('hamburger');
        const navLinks = document.getElementById('navLinks');
        const authButtons = document.getElementById('authButtons');
        let menuOpen = false;

        if (hamburger) {
            hamburger.addEventListener('click', () => {
                menuOpen = !menuOpen;
                navLinks.classList.toggle('active', menuOpen);
                authButtons.classList.toggle('active', menuOpen);
                const icon = hamburger.querySelector('i');
                if (menuOpen) {
                    icon.classList.remove('fa-bars');
                    icon.classList.add('fa-times');
                } else {
                    icon.classList.remove('fa-times');
                    icon.classList.add('fa-bars');
                }
            });
        }

        // Close menu when clicking links on mobile
        document.querySelectorAll('#navLinks a, #authButtons a').forEach(link => {
            link.addEventListener('click', () => {
                if (window.innerWidth <= 992 && menuOpen) {
                    navLinks.classList.remove('active');
                    authButtons.classList.remove('active');
                    menuOpen = false;
                    const icon = hamburger.querySelector('i');
                    if (icon) {
                        icon.classList.remove('fa-times');
                        icon.classList.add('fa-bars');
                    }
                }
            });
        });

        window.addEventListener('resize', () => {
            if (window.innerWidth > 992 && menuOpen) {
                navLinks.classList.remove('active');
                authButtons.classList.remove('active');
                menuOpen = false;
                const icon = hamburger.querySelector('i');
                if (icon) {
                    icon.classList.remove('fa-times');
                    icon.classList.add('fa-bars');
                }
            }
        });
    </script>
</body>

</html>