i want to change this design (<style>
:root {
    --c-bg-primary: #49393B;
    --c-text-primary: #4D3D00;
    --c-text-light: #D9D9D9;
    --c-white: #FFFFFF;
    --f-primary: 'Lato', sans-serif;
    --s-border-radius: 8px;
    --c-gold: #D1C287;
    --transition-speed: 0.3s;
}

/* Container for the process steps */
.process-container {
    font-family: var(--f-primary);
    color: var(--c-white);
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three columns for desktop */
    gap: 1.4rem;
    align-items: stretch; /* Ensure equal height */
}

/* Individual process card */
.process-card {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    padding: 1.5rem;
    border-radius: var(--s-border-radius);
    background: linear-gradient(135deg, rgba(73, 57, 59, 0.7), rgba(77, 61, 0, 0.6), rgba(79, 63, 2, 0.7));
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    text-align: center; /* Center content horizontally */
    min-height: 300px; /* Ensure a minimum height for consistency */
    transform: translateY(20px);
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.process-card:hover {
    transform: translateY(0);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

/* Fade-in animation for cards */
@keyframes fadeInUp {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Dark overlay on each card */
.process-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* Dark overlay */
    z-index: 1;
}

/* Content inside each card */
.process-details {
    position: relative;
    z-index: 2;
    color: var(--c-white);
}

/* Title of each step */
.process-title {
    font-size: 24px; /* Adjusted font size */
    font-weight: bold;
    margin-bottom: 0.75rem;
    color: var(--c-gold);
    transition: color var(--transition-speed);
}

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

/* Description text */
.process-text {
    font-size: 16px; /* Adjusted font size */
    line-height: 1.6;
}

/* Background images for each card */
.process-card:nth-child(1) {
    background-image: url('https://longevacare.com/wp-content/uploads/2024/08/Cellular-IV-Nutrition-grey-background-with-black-and-white-image.jpg');
    background-size: cover;
    background-position: center;
}

.process-card:nth-child(2) {
    background-image: url('https://longevacare.com/wp-content/uploads/2024/08/Cellular-IV-Nutrition-grey-background-with-black-and-white-image.jpg');
    background-size: cover;
    background-position: center;
}

.process-card:nth-child(3) {
    background-image: url('https://longevacare.com/wp-content/uploads/2024/08/Cellular-IV-Nutrition-grey-background-with-black-and-white-image.jpg');
    background-size: cover;
    background-position: center;
}

/* Responsive design for large tablets */
@media (max-width: 1024px) {
    .process-container {
        grid-template-columns: repeat(2, 1fr); /* Two columns for tablets */
    }
}

/* Responsive design for tablets and smaller screens */
@media (max-width: 768px) {
    .process-container {
        grid-template-columns: 1fr; /* One column for mobile */
    }

    .process-card {
        padding: 1rem; /* Reduce padding on smaller devices */
        min-height: auto; /* Allow the height to adjust on small screens */
    }

    .process-title {
        font-size: 24px; /* Maintain title size */
    }

    .process-text {
        font-size: 16px; /* Maintain description text size */
    }
}

/* Mobile optimization */
@media (max-width: 480px) {
    .process-card {
        padding: 0.75rem; /* Further reduce padding on mobile devices */
    }

    .process-title {
        font-size: 24px; /* Maintain title size */
    }

    .process-text {
        font-size: 16px; /* Maintain description text size */
    }
}
</style>

<div class="process-container">
    <div class="process-card">
        <div class="process-details">
            <div class="process-title">1. Personalized Consultation and Diagnostic Testing</div>
            <div 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.</div>
        </div>
    </div>

    <div class="process-card">
        <div class="process-details">
            <div class="process-title">2. Targeted Interventions and Outcome Monitoring</div>
            <div 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).</div>
        </div>
    </div>

    <div class="process-card">
        <div class="process-details">
            <div class="process-title">3. Feel Healthy and Track Your Progress</div>
            <div 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.</div>
        </div>
    </div>
</div>) and add more codes and make it better and create new design based on sentences and how to eeffectvie with viewers and add more codes to be better and make it responise design and use this styles colors (  :root {
      --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.5); /* #2b2b2b with 0.5 opacity */
      --c-text-primary: #ffffff;
      --c-gold: #D1C287;
      --c-accent: #4F3F02;
      --f-primary: 'Lato', sans-serif;
      --s-border-radius: 12px;
      --transition-speed: 0.3s;
      --container-max-width: 1200px;
      --fade-in-duration: 0.6s;
      --gradient-start: #D1C287;
      --gradient-end: #4F3F02;
      --section-padding: 20px 0px; /* Added default padding */
      --icon-hover-scale: 1.3;
      --icon-hover-opacity: 1;
      --icon-default-opacity: 0.85;
      --float-duration: 6s;
  }
)