make this codes (<!-- 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 */
        --c-gold: #D1C287;
        --c-white: #ffffff;
        --c-black: #000000;
        --c-gradient: linear-gradient(135deg, #4F3F02, #D1C287);
        --c-gray: #4a4a4a;
        --c-light-gray: #f5f5f5;
        --c-text-light: #d9d9d9;
        --c-bg-primary: rgba(43, 43, 43, 0.9);
        --c-text-primary: #ffffff;
        --c-accent: #4F3F02;
        --c-secondary: #FF6F61;
        /* Typography */
        --f-primary: 'Poppins', sans-serif;
        --f-secondary: 'Roboto', sans-serif;
        /* Sizing & Spacing */
        --s-border-radius: 8px;
        --transition-speed: 0.3s;
        --hr-color: var(--c-gold);
        --max-width: 1200px;
        /* Timeline Specific */
        --t-border-radius: 15px;
        --t-transition-duration: 0.6s;
        --t-line-color: var(--c-accent);
        --t-circle-diameter: 24px;
        /* Shadows */
        --shadow-default: 0 8px 20px rgba(0, 0, 0, 0.25);
        --shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.35);
        /* Icon Effects */
        --icon-scale: 1.2;
        --icon-opacity-hover: 1;
        --icon-opacity-default: 0.85;
    }

    /* ========== Timeline Section ========== */
    .ct-timeline-section {
        padding: 80px 20px;
        position: relative;
        overflow: hidden;
        font-family: var(--f-primary);
    }

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

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

    /* Timeline Container */
    .ct-timeline-container {
        position: relative;
        max-width: var(--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(--t-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 var(--t-transition-duration) 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(--t-circle-diameter);
        height: var(--t-circle-diameter);
        background-color: var(--c-gold);
        border: 3px solid var(--c-white);
        border-radius: 50%;
        z-index: 1;
        box-shadow: var(--shadow-default);
        transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    }

    .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(--c-bg-primary);
        padding: 25px 35px;
        border-radius: var(--t-border-radius);
        position: relative;
        box-shadow: var(--shadow-default);
        transition: transform var(--transition-speed), box-shadow var(--transition-speed), background-color var(--transition-speed);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        cursor: pointer;
        color: var(--c-text-primary);
    }

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

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

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

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

    /* Text */
    .ct-timeline-text {
        font-family: var(--f-secondary);
        font-size: 1.05rem;
        color: var(--c-text-light);
        transition: color var(--transition-speed);
        line-height: 1.6;
    }

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

    /* Call-to-Action Button */
    .hero-cta {
        margin-top: -20px
        display: inline-block;
        background: var(--c-gradient);
        color: var(--c-white);
        padding: 0.8rem 2.5rem;
        font-family: var(--f-primary);
        font-size: 1rem;
        font-weight: 600;
        border: none;
        border-radius: var(--s-border-radius);
        text-decoration: none;
        cursor: pointer;
        overflow: hidden;
        transition: transform var(--transition-speed), box-shadow var(--transition-speed), background var(--transition-speed);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        opacity: 0;
        transform: scale(0.9);
        animation: fadeIn 1s ease forwards;
        animation-delay: 1.5s;
    }

    .hero-cta:hover,
    .hero-cta:focus {
        transform: scale(1.05);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        background: var(--c-gold);
        color: var(--c-accent);
        outline: none;
    }

    /* 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(--t-border-radius);
            box-shadow: var(--shadow-default);
            background-color: var(--c-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;
        }

        .hero-cta {
            width: 100%;
            text-align: center;
            padding: 0.6rem 1.5rem;
            font-size: 0.9rem;
        }
    }

    /* Mobile Devices - Fine Tuning */
    @media (max-width: 480px) {
        .ct-timeline-title {
            font-size: 2rem;
        }

        .ct-timeline-content {
            padding: 15px 20px;
        }

        .ct-timeline-text {
            font-size: 1rem;
        }
    }

    /* Fade In Animation */
    @keyframes fadeIn {
        to { opacity: 1; }
    }

</style>

<!-- 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: Enhanced Content -->
        <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. Comprehensive Personal Consultation & Advanced Diagnostic Testing</h3>
                <p class="ct-timeline-text">
                    Embark on your wellness journey with our in-depth personal consultation. Our expert team visits your home to understand your unique health profile, discuss your aspirations, and gather comprehensive medical history. Utilizing state-of-the-art telomere testing, we evaluate your cellular age with precision. Our mission is to extend your telomeres, promoting cellular youthfulness and overall vitality.
                </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 & Continuous Outcome Monitoring</h3>
                <p class="ct-timeline-text">
                    We tailor personalized health strategies to optimize your well-being through precise, targeted interventions. Delivered in the comfort of your home by our licensed medical professionals under the auspices of the Dubai Health Authority (DHA), our program ensures seamless integration into your daily life while maintaining the highest standards of care.
                </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. Enhanced Vitality & Progress Tracking</h3>
                <p class="ct-timeline-text">
                    Upon completing our transformative program, witness a surge in your vitality and a rejuvenated, youthful appearance. We conduct follow-up assessments, including repeat telomere testing, to showcase tangible improvements in your health metrics. This meticulous tracking guarantees meaningful and sustained outcomes on your path to optimal 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. Ongoing Support & Maintenance</h3>
                <p class="ct-timeline-text">
                    We provide relentless support to sustain your health advancements. Our dedicated team remains at your service for follow-up consultations, ensuring you continue to thrive and achieve your long-term wellness goals with unwavering commitment.
                </p>
            </div>
        </article>
    </div>
    <!-- Call-to-Action Button -->
    <div class="ct-action-button" style="text-align: center; margin-top: 60px;">
        <a href="https://info.longevacare.com/appointment/public_appointment.php" target="_blank" rel="noopener noreferrer" class="hero-cta">
            Schedule Your Appointment
        </a>
    </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);
        });

        // 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>) clean codes, and make the boxex linear gradicnet colors and button too when hover on them, and make divider between element are close to each other even button and looks amazing and make the content easy to understand to users, i want users and make it laoding fast because of SEOand make the best practise of ux and ui and don't add html and head tags