in this codes (<!-- Ensure Font Awesome is included in your `<head>` section -->
<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>
: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.15;
    --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);
}


/* Body Styling */
body {
    font-family: var(--ct-font-primary);
    background-color: var(--ct-light-gray);
    color: var(--ct-text-primary);
    line-height: 1.6;
}

/* 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: 20px 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);
}

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

/* 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);
}

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

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

/* Decorative Elements */
.ct-timeline-item::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: var(--ct-gradient);
    border-radius: 50%;
    opacity: 0.1;
}

.ct-timeline-item:nth-child(odd)::after {
    left: -30px;
}

.ct-timeline-item:nth-child(even)::after {
    right: -30px;
}

/* Hide decorative elements on smaller screens */
@media (max-width: 1024px) {
    .ct-timeline-item::after {
        display: none;
    }
}

/* 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);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

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

.ct-timeline-content:hover {
    transform: translateY(-10px);
    box-shadow: var(--ct-shadow-hover);
}

/* 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);
}

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

/* 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);
}

.ct-timeline-content:hover .ct-timeline-title-item {
    color: var(--ct-gold);
}

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

/* Keyframes */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 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;
        text-align: left;
    }

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

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

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

/* Mobile devices */
@media (max-width: 768px) {
    .ct-timeline-title {
        font-size: 2rem;
    }

    .ct-timeline-content {
        padding: 20px 20px; /* Reduced padding */
        margin: 0; /* Remove margin on mobile */
    }

    .ct-timeline-item {
        margin: 0; /* Remove top and bottom margin on mobile */
    }

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

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

    .ct-timeline-icon {
        font-size: 2rem;
    }

    .ct-timeline-container::before {
        display: none; /* Remove the vertical line on mobile */
    }

    .ct-timeline-item::before {
        left: 10px; /* Adjust circle position for mobile */
        right: auto; /* Ensure it doesn't conflict */
    }

    /* Hide decorative elements on mobile */
    .ct-timeline-item::after {
        display: none;
    }
}
</style>

<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">
                <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">
                <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">
                <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">
                <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 and Maintenance</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>

<!-- Add JavaScript for Scroll Animation -->
<script>
// Function to add 'active' class to timeline items when they enter the viewport
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);
    });
});
</script>) make it clear and add more codes to be better and use cool design and respsoivne design for all devices and this codes is awful in this moblie vesrion and make the classes names are suitable and readable but don't make it common classes names, add add more features in this to looks gread and dont' change the style colors nad fonts