in this codes (<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;
}

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

.step {
    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 */
}

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

.step-content {
    position: relative;
    z-index: 2;
    color: var(--c-white);
}

.step-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: var(--c-gold);
}

.step-description {
    font-size: 1rem;
    line-height: 1.6;
}

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

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

.step: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) {
    .step_wrapper {
        grid-template-columns: repeat(2, 1fr); /* Two columns for tablets */
    }
}

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

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

    .step-title {
        font-size: 1.25rem; /* Slightly reduce title size on smaller screens */
    }

    .step-description {
        font-size: 0.9rem; /* Adjust description text size */
    }
}

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

    .step-title {
        font-size: 1.1rem; /* Smaller title size for mobile */
    }

    .step-description {
        font-size: 0.85rem; /* Adjust description text size */
    }
}
</style>

<div class="step_wrapper">
    <div class="step">
        <div class="step-content">
            <div class="step-title">1. Personalized Consultation and Diagnostic Testing</div>
            <div class="step-description">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="step">
        <div class="step-content">
            <div class="step-title">2. Targeted Interventions and Outcome Monitoring</div>
            <div class="step-description">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="step">
        <div class="step-content">
            <div class="step-title">3. Feel Healthy and Track Your Progress</div>
            <div class="step-description">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>
) make it cool design and add anmation looks great and don't change the styles fonts and colors and mkae sure do that (Card Titles 24-28px and make body paragphah 16px) and amke it responsive design for all devices and type full codes without html and head tags and make the classes names are different