in this cdoes (<!-- 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: 0; /* Remove extra padding */
}

/* 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: 20px 40px;
    text-align: left;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s ease-out;
    margin: 0; /* Remove margin */
}

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

/* 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;
width: auto; /* or the existing width */
  padding: 20px;
  margin: 0 auto;}


.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);
}

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

    .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 {
    width: 100%; /* Full width for mobile */
    padding: 15px; /* Reduce padding for smaller screens */
    margin: 10px 0; /* Adjust margins for mobile */
    border-radius: 0; /* Optional: remove border radius on mobile */
    box-shadow: none; /* Optional: remove shadow on mobile */
  }

    .ct-timeline-item {
        margin: 0;
    }

    .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;
    }

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

    .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>) i want to be better and best ux and make sure in thei moblie vesrion the   .ct-timeline-content is bigger and not narrow
  }