please fix this codes (<style>
    /* Importing Fonts and Icons */
    @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;600&display=swap');
    @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');

    :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.5);
        --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: 20px 0px;

        /* Icon Effects */
        --icon-hover-scale: 1.3;
        --icon-hover-opacity: 1;
        --icon-default-opacity: 0.85;

        /* Animations */
        --float-duration: 6s;
        --box-shadow-default: 0 8px 30px rgba(0, 0, 0, 0.12);
        --box-shadow-hover: 0 16px 40px rgba(0, 0, 0, 0.2);
    }

    /* Global Reset */
    * {
        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);
        line-height: 1.6;
    }

    /* Main Container */
    .journey-wrapper {
        background: var(--c-gradient);
        border-radius: 20px;
        box-shadow: var(--box-shadow-default);
        overflow: hidden;
        position: relative;
        max-width: var(--container-max-width);
        margin: 0 auto;
        padding: 40px 20px;
        transition: background var(--transition-speed);
    }

    /* Slide Section */
    .journey-slides {
        position: relative;
        height: 60vh;
        min-height: 400px;
        max-height: 600px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .journey-slide {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 80%;
        max-width: 800px;
        padding: 20px;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.1);
        border-radius: var(--s-border-radius);
        backdrop-filter: blur(10px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .journey-slide.active {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    .journey-icon {
        font-size: 3rem;
        color: var(--c-white);
        margin-bottom: 20px;
        animation: pulse 2s infinite;
        transition: transform var(--transition-speed), color var(--transition-speed);
    }

    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
    }

    .journey-title {
        font-size: 2rem;
        color: var(--c-white);
        margin-bottom: 20px;
        font-weight: 600;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    }

    .journey-description {
        font-size: 1.1rem;
        color: var(--c-white);
        line-height: 1.6;
        margin-bottom: 20px;
        font-weight: 300;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    }

    /* Progress Bar */
    .journey-progress-container {
        width: 100%;
        background-color: rgba(255, 255, 255, 0.3);
        height: 8px;
        border-radius: 4px;
        overflow: hidden;
        margin: 30px 0;
    }

    .journey-progress-bar {
        width: 25%;
        height: 100%;
        background-color: var(--c-accent);
        transition: width 0.5s ease;
    }

    /* Navigation Buttons */
    .journey-nav-buttons {
        display: flex;
        justify-content: space-between;
        padding: 20px 40px;
    }

    .journey-next-button,
    .journey-prev-button {
        background-color: #ffffff;
        color: var(--c-accent);
        border: none;
        padding: 14px 28px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 1rem;
        font-weight: 600;
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 1px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .journey-next-button:hover,
    .journey-prev-button:hover {
        background-color: var(--c-accent);
        color: #ffffff;
        transform: translateY(-3px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    }

    .journey-next-button:active,
    .journey-prev-button:active {
        transform: translateY(-1px);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .journey-next-button:disabled,
    .journey-prev-button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* Form Section */
    .journey-form-section {
        padding: 40px 20px;
        background: #ffffff;
        border-radius: var(--s-border-radius);
        box-shadow: var(--box-shadow-default);
        margin-top: 20px;
        display: none; /* Initially hidden */
        transition: background 0.3s ease, opacity 0.3s ease;
        opacity: 0;
    }

    .journey-form-section.active {
        display: block;
        opacity: 1;
    }

    .journey-form-container {
        max-width: 800px;
        margin: 0 auto;
        padding: 30px;
        background: linear-gradient(135deg, rgba(209, 194, 135, 0.1), rgba(79, 63, 2, 0.1));
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    /* Responsive Design */
    @media (max-width: 1024px) {
        .journey-wrapper {
            padding: 30px 20px;
        }

        .journey-slides {
            height: 65vh;
        }

        .journey-title {
            font-size: 1.8rem;
        }

        .journey-description {
            font-size: 1rem;
        }

        .journey-next-button,
        .journey-prev-button {
            padding: 12px 24px;
            font-size: 0.9rem;
        }

        .journey-nav-buttons {
            padding: 15px 30px;
        }
    }

    @media (max-width: 768px) {
        .journey-wrapper {
            padding: 25px 15px;
        }

        .journey-slides {
            height: 70vh;
        }

        .journey-title {
            font-size: 1.6rem;
        }

        .journey-description {
            font-size: 0.95rem;
        }

        .journey-next-button,
        .journey-prev-button {
            padding: 10px 20px;
            font-size: 0.85rem;
        }

        .journey-nav-buttons {
            padding: 15px 25px;
        }
    }

    @media (max-width: 480px) {
        .journey-slide {
            width: 90%;
        }

        .journey-icon {
            font-size: 2.5rem;
        }

        .journey-title {
            font-size: 1.3rem;
        }

        .journey-description {
            font-size: 0.9rem;
        }

        .journey-next-button,
        .journey-prev-button {
            padding: 8px 16px;
            font-size: 0.8rem;
        }

        .journey-nav-buttons {
            padding: 10px 20px;
        }

        .journey-progress-container {
            height: 4px;
        }

        .journey-form-section {
            padding: 30px 15px;
        }
    }

    /* Accessibility Enhancements */
    .journey-next-button:focus,
    .journey-prev-button:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(209, 194, 135, 0.5);
    }

    /* Hover Effects for Icons */
    .journey-icon:hover {
        color: var(--c-gold);
        transform: scale(1.1);
        transition: transform var(--transition-speed), color var(--transition-speed);
    }

    /* Smooth Scroll */
    html {
        scroll-behavior: smooth;
    }
</style>

<div class="journey-wrapper">
    <!-- Slide Content -->
    <div class="journey-slides">
        <div class="journey-slide active">
            <i class="fas fa-microscope journey-icon" title="Consultation"></i>
            <h2 class="journey-title">Personalized Consultation and Diagnostic Testing</h2>
            <p class="journey-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.</p>
        </div>
        <div class="journey-slide">
            <i class="fas fa-hospital-user journey-icon" title="Interventions"></i>
            <h2 class="journey-title">Targeted Interventions and Outcome Monitoring</h2>
            <p class="journey-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).</p>
        </div>
        <div class="journey-slide">
            <i class="fas fa-chart-line journey-icon" title="Progress Tracking"></i>
            <h2 class="journey-title">Feel Healthy and Track Your Progress</h2>
            <p class="journey-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.</p>
        </div>
    </div>

    <!-- Progress Bar -->
    <div class="journey-progress-container">
        <div class="journey-progress-bar"></div>
    </div>

    <!-- Navigation Buttons -->
    <div class="journey-nav-buttons">
        <button class="journey-prev-button" id="journeyPrevButton" disabled>
            <i class="fas fa-arrow-left"></i> Previous
        </button>
        <button class="journey-next-button" id="journeyNextButton">
            Next <i class="fas fa-arrow-right"></i>
        </button>
    </div>

    <!-- Hidden Form Section -->
    <div class="journey-form-section" id="journeyFormSection">
        <div class="journey-form-container">
            <!-- Replace this shortcode with your actual form embed code if not using WordPress or a similar CMS -->
            [metform form_id="7901"]
        </div>
    </div>
</div>

<script>
    // Select Elements
    const journeySlides = document.querySelectorAll('.journey-slide');
    const journeyProgress = document.querySelector('.journey-progress-bar');
    const journeyPrevButton = document.getElementById('journeyPrevButton');
    const journeyNextButton = document.getElementById('journeyNextButton');
    const journeyFormSection = document.getElementById('journeyFormSection');

    let journeyCurrentSlide = 0;

    // Function to Update Slides
    function updateJourneySlide() {
        journeySlides.forEach((slide, index) => {
            slide.classList.toggle('active', index === journeyCurrentSlide);
        });

        // Update Progress Bar
        const progressPercentage = (journeyCurrentSlide / (journeySlides.length)) * 100;
        journeyProgress.style.width = `${progressPercentage}%`;

        // Update Button States
        journeyPrevButton.disabled = journeyCurrentSlide === 0;
        journeyNextButton.textContent = journeyCurrentSlide === journeySlides.length - 1 ? 'Show Form' : 'Next';
        
        // Update Button Icons
        if (journeyCurrentSlide === journeySlides.length - 1) {
            journeyNextButton.innerHTML = 'Show Form <i class="fas fa-check"></i>';
        } else {
            journeyNextButton.innerHTML = 'Next <i class="fas fa-arrow-right"></i>';
        }
    }

    // Function to Show Form
    function showJourneyForm() {
        journeyFormSection.classList.add('active');
        journeyFormSection.scrollIntoView({ behavior: 'smooth' });
        journeyNextButton.disabled = true;
    }

    // Event Listeners for Buttons
    journeyNextButton.addEventListener('click', () => {
        if (journeyCurrentSlide === journeySlides.length - 1) {
            showJourneyForm();
        } else {
            journeyCurrentSlide++;
            updateJourneySlide();
        }
    });

    journeyPrevButton.addEventListener('click', () => {
        if (journeyCurrentSlide > 0) {
            journeyCurrentSlide--;
            updateJourneySlide();
        }
    });

    // Initialize the Slider
    updateJourneySlide();
</script>) and make the fill form is clear and don't add bacground color and add more codes to be better design and add more features