please fix this codes (<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Longeva Care - Begin Your Journey</title>
    <meta name="description" content="Embark on a personalized health journey with Longeva Care's diagnostic age reversal program. Experience in-home consultations, telomere testing, and targeted interventions to enhance your vitality and well-being.">
    <meta name="keywords" content="Longeva Care, Health Journey, Age Reversal, Telomere Testing, Personalized Health, Concierge Medicine, Anti-Aging">
    <link rel="icon" href="https://longevacare.com/favicon.ico" type="image/x-icon">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

        :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); /* #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;
            --box-shadow-default: 0 8px 30px rgba(0, 0, 0, 0.12);
            --box-shadow-hover: 0 16px 40px rgba(0, 0, 0, 0.2);
        }

        body {
            font-family: var(--f-primary);
            color: var(--c-text-primary);
            background-color: #0a0a0a; /* Dark background for contrast */
        }

        /* Button Styling */
        .lc-btn-primary {
            @apply bg-[var(--c-gradient)] text-black py-3 px-6 rounded-lg font-semibold uppercase transition transform hover:-translate-y-1 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-[var(--c-gold)];
        }

        /* Package Box Styles using Tailwind */
        .lc-package-box {
            @apply relative bg-[var(--c-gradient)] text-white rounded-xl shadow-lg overflow-hidden transform transition duration-300 hover:-translate-y-2 hover:shadow-2xl;
        }

        .lc-package-box::before {
            content: "";
            @apply absolute inset-0 bg-[var(--c-bg-primary)] opacity-30 transition-opacity duration-300;
        }

        .lc-package-box:hover::before {
            @apply opacity-10;
        }

        /* Icon Styling */
        .lc-package-icon {
            @apply w-7 h-7;
            filter: brightness(0) invert(1); /* Ensures the icon is visible on dark backgrounds */
            transition: transform var(--transition-speed);
        }

        .lc-package-box:hover .lc-package-icon {
            @apply rotate-45;
        }

        /* Section Titles */
        .lc-section-title {
            @apply text-4xl md:text-5xl lg:text-6xl font-bold text-center mb-6 bg-gradient-to-tr from-gold to-accent bg-clip-text text-transparent;
        }

        .lc-section-subtitle {
            @apply text-xl md:text-2xl text-center mb-12 text-gray-400;
        }

        /* Modal Styling */
        .lc-modal-overlay {
            @apply fixed inset-0 bg-black bg-opacity-60 flex justify-center items-center z-50 hidden;
            transition: opacity var(--transition-speed);
        }

        .lc-modal-content {
            @apply relative bg-gray-900 rounded-lg shadow-xl w-full max-w-lg mx-4 p-6 md:p-8 overflow-y-auto;
            max-height: 90vh; /* Prevent modal from exceeding viewport height */
            overflow-y: auto; /* Enable internal scrolling */
        }

        .lc-modal-close-button {
            @apply absolute top-4 right-4 text-gray-400 hover:text-white text-2xl focus:outline-none focus:ring-2 focus:ring-[var(--c-gold)] rounded;
        }

        @media (max-width: 768px) {
            .lc-package-box:hover .lc-package-icon {
                @apply rotate-0; /* Disable rotation on smaller screens for better UX */
            }

            .lc-section-title {
                @apply text-3xl md:text-4xl;
            }

            .lc-btn-primary {
                @apply text-base px-4 py-3;
            }
        }
    </style>
</head>
<body class="min-h-screen">
    <main class="container mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Hero Section -->
        <section class="text-center py-20 mt-8 mb-8">
            <h1 class="lc-section-title">We Care For You,<br>One Cell at A Time</h1>
            <p class="lc-section-subtitle">LUXURY CONCIERGE MEDICINE</p>
            <p class="text-lg md:text-xl max-w-3xl mx-auto text-gray-400 mb-12">
                Discover personalized solutions to reverse chronic conditions and break free from disease and aging with Longeva.
            </p>
            <button id="openModal" class="lc-btn-primary">Discover Now</button>
        </section>

        <!-- About Section -->
        <section id="about" class="mt-8 mb-8">
            <h2 class="lc-section-title">About Longeva</h2>
            <div class="flex flex-col md:flex-row justify-center items-center gap-8">
                <div class="p-6 md:p-8 bg-gray-800 rounded-lg shadow-md">
                    <h3 class="text-2xl font-semibold mb-4 bg-gradient-to-tr from-gold to-accent bg-clip-text text-transparent">Our Mission</h3>
                    <p class="text-gray-300">Empowering individuals to live healthier, longer lives by delivering cutting-edge medical homecare services that focus on reversing the effects of aging and chronic diseases.</p>
                </div>
                <div class="p-6 md:p-8 bg-gray-800 rounded-lg shadow-md">
                    <h3 class="text-2xl font-semibold mb-4 bg-gradient-to-tr from-gold to-accent bg-clip-text text-transparent">Our Vision</h3>
                    <p class="text-gray-300">Leading innovation in home-based healthcare, transforming how people age and manage chronic conditions, and redefining longevity and healthspan.</p>
                </div>
            </div>
        </section>

        <!-- Programs Section -->
        <section id="programs" class="mt-8 mb-8">
            <h2 class="lc-section-title">Our Programs</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="p-6 md:p-8 bg-gray-800 rounded-lg shadow-md flex flex-col justify-between">
                    <div>
                        <h3 class="text-2xl font-semibold mb-4 bg-gradient-to-tr from-gold to-accent bg-clip-text text-transparent">Cellular Medicine</h3>
                        <p class="text-gray-300 mb-6">Enhancing health by optimizing cell function through advanced medical protocols.</p>
                    </div>
                    <a href="#cellular-medicine" class="lc-btn-primary text-sm">View Details</a>
                </div>
                <div class="p-6 md:p-8 bg-gray-800 rounded-lg shadow-md flex flex-col justify-between">
                    <div>
                        <h3 class="text-2xl font-semibold mb-4 bg-gradient-to-tr from-gold to-accent bg-clip-text text-transparent">Integrated Approach</h3>
                        <p class="text-gray-300 mb-6">Combining diverse methods to achieve comprehensive health solutions.</p>
                    </div>
                    <a href="#integrated-approach" class="lc-btn-primary text-sm">View Details</a>
                </div>
                <div class="p-6 md:p-8 bg-gray-800 rounded-lg shadow-md flex flex-col justify-between">
                    <div>
                        <h3 class="text-2xl font-semibold mb-4 bg-gradient-to-tr from-gold to-accent bg-clip-text text-transparent">Personalized Medicine</h3>
                        <p class="text-gray-300 mb-6">Tailoring treatments to individual genetic and molecular profiles for optimal health.</p>
                    </div>
                    <a href="#personalized-medicine" class="lc-btn-primary text-sm">View Details</a>
                </div>
            </div>
        </section>

        <!-- The Longeva Concept Section -->
        <section id="concept" class="mt-8 mb-8">
            <h2 class="lc-section-title">The Longeva Concept</h2>
            <p class="text-lg text-center mb-12 max-w-2xl mx-auto text-gray-400">
                Longeva offers an alternative approach to healthcare through its integrated suite of cellular technologies.
            </p>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <a href="https://longevacare.com/what-we-do/packages/age-reversal-skin-enhancement/" class="lc-package-box">
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-4">
                            <span class="text-2xl font-semibold">Package 2</span>
                            <img src="https://longevacare.com/wp-content/uploads/2024/08/open_new_page-1.svg" alt="Open Page Icon" class="lc-package-icon">
                        </div>
                        <div class="text-xl font-bold mb-6">Age Reversal & Skin Enhancement</div>
                    </div>
                </a>

                <a href="https://longevacare.com/what-we-do/packages/non-surgical-aesthetic-lifting-feature-enhancement/" class="lc-package-box">
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-4">
                            <span class="text-2xl font-semibold">Package 3</span>
                            <img src="https://longevacare.com/wp-content/uploads/2024/08/open_new_page-1.svg" alt="Open Page Icon" class="lc-package-icon">
                        </div>
                        <div class="text-xl font-bold mb-6">Non-Surgical Lifting & Feature Enhancement</div>
                    </div>
                </a>

                <a href="https://longevacare.com/what-we-do/packages/neuropsychiatry/" class="lc-package-box">
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-4">
                            <span class="text-2xl font-semibold">Package 4</span>
                            <img src="https://longevacare.com/wp-content/uploads/2024/08/open_new_page-1.svg" alt="Open Page Icon" class="lc-package-icon">
                        </div>
                        <div class="text-xl font-bold mb-6">Neuropsychiatry</div>
                    </div>
                </a>

                <a href="https://longevacare.com/what-we-do/packages/reversal-of-autoimmune-diseases/" class="lc-package-box">
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-4">
                            <span class="text-2xl font-semibold">Package 5</span>
                            <img src="https://longevacare.com/wp-content/uploads/2024/08/open_new_page-1.svg" alt="Open Page Icon" class="lc-package-icon">
                        </div>
                        <div class="text-xl font-bold mb-6">Reversal of Autoimmune Diseases</div>
                    </div>
                </a>

                <a href="https://longevacare.com/what-we-do/packages/reversal-of-fibromyalgia/" class="lc-package-box">
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-4">
                            <span class="text-2xl font-semibold">Package 6</span>
                            <img src="https://longevacare.com/wp-content/uploads/2024/08/open_new_page-1.svg" alt="Open Page Icon" class="lc-package-icon">
                        </div>
                        <div class="text-xl font-bold mb-6">Reversal of Fibromyalgia</div>
                    </div>
                </a>

                <a href="https://longevacare.com/what-we-do/packages/reversal-of-diabetes/" class="lc-package-box">
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-4">
                            <span class="text-2xl font-semibold">Package 7</span>
                            <img src="https://longevacare.com/wp-content/uploads/2024/08/open_new_page-1.svg" alt="Open Page Icon" class="lc-package-icon">
                        </div>
                        <div class="text-xl font-bold mb-6">Reversal of Diabetes</div>
                    </div>
                </a>

                <a href="https://longevacare.com/what-we-do/packages/reversal-of-obesity/" class="lc-package-box">
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-4">
                            <span class="text-2xl font-semibold">Package 8</span>
                            <img src="https://longevacare.com/wp-content/uploads/2024/08/open_new_page-1.svg" alt="Open Page Icon" class="lc-package-icon">
                        </div>
                        <div class="text-xl font-bold mb-6">Reversal of Obesity</div>
                    </div>
                </a>

                <a href="https://longevacare.com/what-we-do/packages/reversal-of-hypertension/" class="lc-package-box">
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-4">
                            <span class="text-2xl font-semibold">Package 9</span>
                            <img src="https://longevacare.com/wp-content/uploads/2024/08/open_new_page-1.svg" alt="Open Page Icon" class="lc-package-icon">
                        </div>
                        <div class="text-xl font-bold mb-6">Reversal of Hypertension</div>
                    </div>
                </a>

                <a href="https://longevacare.com/what-we-do/packages/reversal-of-parkinsons/" class="lc-package-box">
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-4">
                            <span class="text-2xl font-semibold">Package 10</span>
                            <img src="https://longevacare.com/wp-content/uploads/2024/08/open_new_page-1.svg" alt="Open Page Icon" class="lc-package-icon">
                        </div>
                        <div class="text-xl font-bold mb-6">Reversal of Parkinson’s</div>
                    </div>
                </a>

                <a href="https://longevacare.com/what-we-do/packages/reversal-of-alzheimers/" class="lc-package-box">
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-4">
                            <span class="text-2xl font-semibold">Package 11</span>
                            <img src="https://longevacare.com/wp-content/uploads/2024/08/open_new_page-1.svg" alt="Open Page Icon" class="lc-package-icon">
                        </div>
                        <div class="text-xl font-bold mb-6">Reversal of Alzheimer’s</div>
                    </div>
                </a>

                <a href="https://longevacare.com/what-we-do/packages/menopause-reversal/" class="lc-package-box">
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-4">
                            <span class="text-2xl font-semibold">Package 12</span>
                            <img src="https://longevacare.com/wp-content/uploads/2024/08/open_new_page-1.svg" alt="Open Page Icon" class="lc-package-icon">
                        </div>
                        <div class="text-xl font-bold mb-6">Menopause Reversal</div>
                    </div>
                </a>
            </div>
        </section>

        <!-- Begin Your Journey Section -->
        <section id="begin-journey" class="text-center py-20 mt-8 mb-8 bg-gray-800 rounded-lg shadow-xl">
            <h2 class="lc-section-title text-white">Begin Your Journey</h2>
            <p class="text-lg md:text-xl max-w-3xl mx-auto text-gray-400 mb-12">
                Embark on a personalized health journey with our diagnostic age reversal program, featuring in-home consultations, telomere testing, and targeted interventions to enhance your vitality and well-being.
            </p>
            <button id="openModalBottom" class="lc-btn-primary">Begin Your Journey</button>
        </section>
    </main>

    <!-- ----- Modal Structure ----- -->
    <div class="lc-modal-overlay" id="journeyModal" aria-hidden="true" role="dialog" aria-modal="true">
        <div class="lc-modal-content">
            <button class="lc-modal-close-button" id="modalCloseButton" aria-label="Close Modal">&times;</button>
            <div class="lc-modal-form-container">
                <!-- MetForm Shortcode -->
                [metform form_id="7901"]
            </div>
        </div>
    </div>

    <script>
        /* ----------------- JavaScript for Modal Functionality ----------------- */

        // Select Elements
        const modal = document.getElementById('journeyModal');
        const openModalButtons = document.querySelectorAll('#openModal, #openModalBottom');
        const closeModalButton = document.getElementById('modalCloseButton');

        // Function to Open Modal
        const openModal = () => {
            modal.classList.remove('hidden');
            modal.setAttribute('aria-hidden', 'false');
            document.body.classList.add('overflow-hidden'); // Prevent background scrolling

            // Set focus to the first input inside the modal for accessibility
            const firstInput = modal.querySelector('input, textarea, select, button');
            if (firstInput) {
                firstInput.focus();
            }
        };

        // Function to Close Modal
        const closeModal = () => {
            modal.classList.add('hidden');
            modal.setAttribute('aria-hidden', 'true');
            document.body.classList.remove('overflow-hidden'); // Restore background scrolling

            // Return focus to the first open button for accessibility
            openModalButtons[0].focus();
        };

        // Event Listeners to Open Modal
        openModalButtons.forEach(button => {
            button.addEventListener('click', openModal);
        });

        // Event Listener to Close Modal via Close Button
        closeModalButton.addEventListener('click', closeModal);

        // Close Modal When Clicking Outside the Modal Content
        modal.addEventListener('click', (e) => {
            if (e.target === modal) {
                closeModal();
            }
        });

        // Close Modal on 'Escape' Key Press
        window.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
                closeModal();
            }
        });
    </script>
</body>
</html>) and amke it cool design and use this style (  :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;
      --box-shadow-default: 0 8px 30px rgba(0, 0, 0, 0.12);
      --box-shadow-hover: 0 16px 40px rgba(0, 0, 0, 0.2);
  }
) and amekit it cool and change the style place colors and add more code to be better and make the make sure this is good and do'nt add html and head tags