pleas make this codes (<style>
:root {
    /* Color Palette */
    --c-gradient: linear-gradient(135deg, #D1C287, #4F3F02);
    --c-gray: #4a4a4a;
    --c-light-gray: #f5f5f5;
    --c-white: #ffffff;
    --c-text-light: #d9d9d9;
    --c-bg-primary: rgba(43, 43, 43, 0.9);
    --c-text-primary: #ffffff;
    --c-gold: #D1C287;
    --c-accent: #4F3F02;
    /* Typography */
    --f-primary: 'Lato', sans-serif;
    /* Sizing & Spacing */
    --s-border-radius: 12px;
    --transition-speed: 0.3s;
    --container-max-width: 1200px;
    --fade-in-duration: 0.6s;
    --section-padding: 60px 20px;
    /* Icon Effects */
    --icon-hover-scale: 1.1;
    --icon-hover-opacity: 1;
    --icon-default-opacity: 0.8;
    /* Timeline */
    --line-color: #4F3F02;
    --circle-size: 20px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--f-primary);
    background-color: var(--c-light-gray);
    color: var(--c-text-primary);
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 40px;
    color: var(--c-accent);
    position: relative;
}

.section-title::after {
    content: '';
    width: 60px;
    height: 4px;
    background-color: var(--c-gold);
    display: block;
    margin: 10px auto 0;
    border-radius: 2px;
}

.process-timeline {
    position: relative;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--section-padding);
}

.process-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background-color: var(--line-color);
}

.process-step {
    position: relative;
    width: 50%;
    padding: 20px 40px;
    text-align: left;
}

.process-step:nth-child(odd) {
    left: 0;
}

.process-step:nth-child(even) {
    left: 50%;
    text-align: right;
}

.process-step::before {
    content: '';
    position: absolute;
    top: 20px;
    width: var(--circle-size);
    height: var(--circle-size);
    background-color: var(--c-gold);
    border-radius: 50%;
    z-index: 1;
}

.process-step:nth-child(odd)::before {
    right: -10px;
}

.process-step:nth-child(even)::before {
    left: -10px;
}

.process-content {
    background-color: var(--c-bg-primary);
    padding: 20px 30px;
    border-radius: var(--s-border-radius);
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    animation: fadeInUp var(--fade-in-duration) ease forwards;
    opacity: 0;
    transform: translateY(20px);
}

.process-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.process-icon {
    font-size: 2rem;
    margin-bottom: 15px;
    color: var(--c-gold);
    transition: transform var(--transition-speed), opacity var(--transition-speed);
    opacity: var(--icon-default-opacity);
}

.process-content:hover .process-icon {
    transform: scale(var(--icon-hover-scale));
    opacity: var(--icon-hover-opacity);
}

.process-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--c-gold);
    transition: color var(--transition-speed);
}

.process-content:hover .process-title {
    color: var(--c-white);
}

.process-text {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--c-text-light);
}

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

/* Responsive Design */

/* Tablets and below */
@media (max-width: 1024px) {
    .process-timeline::before {
        left: 30px;
    }
    
    .process-step {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
        text-align: left;
        margin-bottom: 30px;
    }
    
    .process-step:nth-child(even) {
        left: 0;
    }
    
    .process-step::before {
        left: 15px;
    }
}

/* Mobile devices */
@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }
    
    .process-content {
        padding: 15px 20px;
    }
    
    .process-title {
        font-size: 1.25rem;
    }
    
    .process-text {
        font-size: 0.95rem;
    }
    
    .process-icon {
        font-size: 1.5rem;
    }
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Process Timeline</title>
    <!-- Font Awesome CDN for Icons -->
    <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" />
</head>
<body>
    <section>
        <h2 class="section-title">Our Process</h2>
        <div class="process-timeline">
            <!-- Step 1 -->
            <div class="process-step">
                <div class="process-content">
                    <i class="fas fa-user-md process-icon"></i>
                    <h3 class="process-title">1. Personalized Consultation and Diagnostic Testing</h3>
                    <p class="process-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>
            </div>
            <!-- Step 2 -->
            <div class="process-step">
                <div class="process-content">
                    <i class="fas fa-bullseye process-icon"></i>
                    <h3 class="process-title">2. Targeted Interventions and Outcome Monitoring</h3>
                    <p class="process-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>
            </div>
            <!-- Step 3 -->
            <div class="process-step">
                <div class="process-content">
                    <i class="fas fa-chart-line process-icon"></i>
                    <h3 class="process-title">3. Feel Healthy and Track Your Progress</h3>
                    <p class="process-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>
            </div>
        </div>
    </section>
</body>
</html>) respoines design and looks great and add more features like cool design and make sure the icons are suitable and related to content and add more codes and don't add html and head tags and remove words (Our Process ) Title and make it modern design and add animation and make it like a section and make it readable for SEO