in this codes (<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enhanced Timeline Section</title>
    <!-- Include Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-pbUTLnj8C+9Yo/fBKEtJWvZbP1+lVnZw6D9eTbGpPd/UrTIWPqkqPZ+q8tOlNlSesihJ5qqcK01L2GADzzfYQg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        /* ========== CSS Variables ========== */
        :root {
            /* Color Palette */
            --ct-gradient: linear-gradient(135deg, #D1C287, #4F3F02);
            --ct-gray: #4a4a4a;
            --ct-light-gray: #f5f5f5;
            --ct-white: #ffffff;
            --ct-text-light: #d9d9d9;
            --ct-bg-primary: rgba(43, 43, 43, 0.9);
            --ct-text-primary: #ffffff;
            --ct-gold: #D1C287;
            --ct-accent: #4F3F02;
            --ct-secondary: #FF6F61;
            /* Typography */
            --ct-font-primary: 'Lato', sans-serif;
            /* Sizing & Spacing */
            --ct-border-radius: 15px;
            --ct-transition-duration: 0.4s;
            --ct-max-width: 1200px;
            --ct-fade-duration: 0.8s;
            --ct-padding-section: 80px 20px;
            /* Icon Effects */
            --ct-icon-scale: 1.2;
            --ct-icon-opacity-hover: 1;
            --ct-icon-opacity-default: 0.85;
            /* Timeline */
            --ct-line-color: #4F3F02;
            --ct-circle-diameter: 24px;
            /* Shadows */
            --ct-shadow-default: 0 8px 20px rgba(0, 0, 0, 0.25);
            --ct-shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.35);
        }


        /* ========== Timeline Section ========== */
        .ct-timeline-section {
            padding: var(--ct-padding-section);
            position: relative;
            overflow: hidden;
        }

        /* Section Title */
        .ct-timeline-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 50px;
            color: var(--ct-gold);
            position: relative;
            font-weight: 700;
        }

        .ct-timeline-title::after {
            content: '';
            width: 80px;
            height: 5px;
            background-color: var(--ct-gold);
            display: block;
            margin: 15px auto 0;
            border-radius: 3px;
        }

        /* Timeline Container */
        .ct-timeline-container {
            position: relative;
            max-width: var(--ct-max-width);
            margin: 0 auto;
            padding: 0;
        }

        /* Vertical Line */
        .ct-timeline-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 6px;
            height: 100%;
            background-color: var(--ct-line-color);
            z-index: 0;
        }

        /* Timeline Item */
        .ct-timeline-item {
            position: relative;
            width: 50%;
            padding: 20px 40px;
            text-align: left;
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.6s ease-out;
            margin: 0;
        }

        /* Animation when active */
        .ct-timeline-item.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Positioning */
        .ct-timeline-item:nth-child(odd) {
            left: 0;
        }

        .ct-timeline-item:nth-child(even) {
            left: 50%;
            text-align: right;
        }

        /* Circles on Timeline */
        .ct-timeline-item::before {
            content: '';
            position: absolute;
            top: 30px;
            width: var(--ct-circle-diameter);
            height: var(--ct-circle-diameter);
            background-color: var(--ct-gold);
            border: 3px solid var(--ct-white);
            border-radius: 50%;
            z-index: 1;
            box-shadow: var(--ct-shadow-default);
            transition: transform var(--ct-transition-duration), box-shadow var(--ct-transition-duration);
        }

        .ct-timeline-item:nth-child(odd)::before {
            right: -13px;
        }

        .ct-timeline-item:nth-child(even)::before {
            left: -13px;
        }

        /* Content Box */
        .ct-timeline-content {
            background-color: var(--ct-bg-primary);
            padding: 25px 35px;
            border-radius: var(--ct-border-radius);
            position: relative;
            box-shadow: var(--ct-shadow-default);
            transition: transform var(--ct-transition-duration), box-shadow var(--ct-transition-duration), background-color var(--ct-transition-duration);
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            cursor: pointer;
        }

        /* Hover Effects */
        .ct-timeline-content:hover {
            transform: translateY(-10px);
            box-shadow: var(--ct-shadow-hover);
            background-color: var(--ct-accent);
        }

        .ct-timeline-content:hover .ct-timeline-icon {
            transform: scale(var(--ct-icon-scale));
            opacity: var(--ct-icon-opacity-hover);
            color: var(--ct-gold);
        }

        /* Icons */
        .ct-timeline-icon {
            font-size: 2.5rem;
            margin-bottom: 20px;
            color: var(--ct-white);
            transition: transform var(--ct-transition-duration), opacity var(--ct-transition-duration), color var(--ct-transition-duration);
            opacity: var(--ct-icon-opacity-default);
        }

        /* Titles */
        .ct-timeline-title-item {
            font-size: 1.75rem;
            font-weight: 700;
            margin-bottom: 15px;
            color: var(--ct-text-primary);
            transition: color var(--ct-transition-duration);
        }

        /* Text */
        .ct-timeline-text {
            font-size: 1.05rem;
            color: var(--ct-text-light);
            transition: color var(--ct-transition-duration);
        }

        /* Titles on Hover */
        .ct-timeline-content:hover .ct-timeline-title-item {
            color: var(--ct-gold);
        }

        /* Responsive Design */

        /* Tablets and below */
        @media (max-width: 1024px) {
            .ct-timeline-container::before {
                left: 30px;
            }

            .ct-timeline-item {
                width: 100%;
                padding-left: 70px;
                padding-right: 30px;
            }

            .ct-timeline-item:nth-child(even) {
                left: 0;
                text-align: left;
            }

            .ct-timeline-item::before {
                left: 15px;
                right: auto;
            }

            .ct-timeline-content {
                align-items: flex-start !important;
            }
        }

        /* Mobile devices */
        @media (max-width: 768px) {
            .ct-timeline-section {
                padding: 60px 15px;
            }

            .ct-timeline-title {
                font-size: 2.2rem;
            }

            .ct-timeline-container::before {
                display: none;
            }

            .ct-timeline-item {
                width: 100%;
                padding-left: 0;
                padding-right: 0;
                margin-bottom: 40px;
            }

            .ct-timeline-item::before {
                left: 15px;
                top: 20px;
                transform: translateX(0);
            }

            .ct-timeline-content {
                width: 100%;
                padding: 20px;
                margin: 0 auto;
                border-radius: var(--ct-border-radius);
                box-shadow: var(--ct-shadow-default);
                background-color: var(--ct-bg-primary);
            }

            .ct-timeline-item:nth-child(even) .ct-timeline-content {
                align-items: flex-start;
            }

            .ct-timeline-icon {
                font-size: 2.2rem;
                margin-bottom: 15px;
            }

            .ct-timeline-title-item {
                font-size: 1.6rem;
                margin-bottom: 10px;
            }

            .ct-timeline-text {
                font-size: 1.05rem;
                line-height: 1.5;
            }
        }
    </style>
</head>
<body>

    <!-- Timeline Section -->
    <section class="ct-timeline-section" aria-labelledby="ct-timeline-section-title">
        <h2 id="ct-timeline-section-title" class="ct-timeline-title">How We Work</h2>
        <div class="ct-timeline-container">
            <!-- Step 1 -->
            <article class="ct-timeline-item" aria-labelledby="ct-timeline-step1-title">
                <div class="ct-timeline-content" tabindex="0">
                    <i class="fas fa-user-md ct-timeline-icon" aria-hidden="true"></i>
                    <h3 id="ct-timeline-step1-title" class="ct-timeline-title-item">1. Personalized Consultation and Diagnostic Testing</h3>
                    <p class="ct-timeline-text">
                        Your journey begins with a personalized consultation. We visit you to explain our program, gather medical history, and discuss your health goals. We conduct a telomere test to assess cellular age. Our aim is to lengthen your telomeres to reflect a younger age.
                    </p>
                </div>
            </article>
            <!-- Step 2 -->
            <article class="ct-timeline-item" aria-labelledby="ct-timeline-step2-title">
                <div class="ct-timeline-content" tabindex="0">
                    <i class="fas fa-bullseye ct-timeline-icon" aria-hidden="true"></i>
                    <h3 id="ct-timeline-step2-title" class="ct-timeline-title-item">2. Targeted Interventions and Outcome Monitoring</h3>
                    <p class="ct-timeline-text">
                        We present recommendations to optimize your health through targeted interventions. Our program is delivered at home by a skilled medical team licensed by DHA (Dubai Health Authority).
                    </p>
                </div>
            </article>
            <!-- Step 3 -->
            <article class="ct-timeline-item" aria-labelledby="ct-timeline-step3-title">
                <div class="ct-timeline-content" tabindex="0">
                    <i class="fas fa-chart-line ct-timeline-icon" aria-hidden="true"></i>
                    <h3 id="ct-timeline-step3-title" class="ct-timeline-title-item">3. Feel Healthy and Track Your Progress</h3>
                    <p class="ct-timeline-text">
                        Upon completing our program, you'll enjoy enhanced vitality and a more youthful appearance. We'll repeat tests, including the telomere test, to show improvements in your health metrics. This approach ensures tangible outcomes in your journey toward better health.
                    </p>
                </div>
            </article>
            <!-- Optional Step 4 -->
            <article class="ct-timeline-item" aria-labelledby="ct-timeline-step4-title">
                <div class="ct-timeline-content" tabindex="0">
                    <i class="fas fa-heartbeat ct-timeline-icon" aria-hidden="true"></i>
                    <h3 id="ct-timeline-step4-title" class="ct-timeline-title-item">4. Continuous Support</h3>
                    <p class="ct-timeline-text">
                        We offer continuous support to maintain your health improvements. Our team is available for follow-up consultations, ensuring that you stay on track with your wellness goals.
                    </p>
                </div>
            </article>
        </div>
    </section>

    <!-- JavaScript for Scroll Animation and Interactivity -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const timelineItems = document.querySelectorAll('.ct-timeline-item');

            const observerOptions = {
                root: null,
                rootMargin: '0px',
                threshold: 0.1
            };

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

            timelineItems.forEach(item => {
                observer.observe(item);
            });

            // Optional: Add keyboard accessibility and click interactivity
            const timelineContents = document.querySelectorAll('.ct-timeline-content');
            timelineContents.forEach(content => {
                content.addEventListener('click', () => {
                    // Example: Expand/collapse content or navigate to a detailed page
                    // For demonstration, we'll toggle a class to expand content
                    content.classList.toggle('expanded');
                });

                // Allow keyboard interaction
                content.addEventListener('keypress', (e) => {
                    if(e.key === 'Enter' || e.key === ' ') {
                        e.preventDefault();
                        content.click();
                    }
                });
            });
        });
    </script>
</body>
</html>) rmeove html and head tags, and make it consistent design and looks great and add more codes  to make it repsoivnes design, and add button in below to take action to go the page of appintoment and the link is (https://info.longevacare.com/appointment/public_appointment.php)