i want to change this codes (<!-- Footer -->
<footer class="footer bg-dark text-light pt-5 pb-4">
    <div class="container">
        <div class="row">
            <!-- Contact Info -->
            <div class="col-md-6 mb-4">
                <h5 class="text-uppercase mb-4 font-weight-bold">Contact Us</h5>
                <p><i class="fas fa-envelope mr-3"></i><a href="mailto:info@longevacare.com" class="text-secondary">info@longevacare.com</a></p>
                <p><i class="fas fa-phone mr-3"></i><a href="tel:<PRESIDIO_ANONYMIZED_PHONE_NUMBER>" class="text-secondary">+971 528 863 600</a></p>
                <p><i class="fab fa-whatsapp mr-3"></i><a href="https://wa.me/17025262050" class="text-secondary">+1 (702) 526-2050</a></p>
                <p><i class="fas fa-map-marker-alt mr-3"></i>HDS Tower, Cluster M, JLT, Dubai</p>
            </div>
            <!-- Developer Contact -->
            <div class="col-md-6 mb-4">
                <h5 class="text-uppercase mb-4 font-weight-bold">Developer Contact</h5>
                <p><i class="fas fa-envelope mr-3"></i><a href="mailto:mahmoudtawfikh@gmail.com" class="text-secondary">mahmoudtawfikh@gmail.com</a></p>
                <p><i class="fab fa-whatsapp mr-3"></i><a href="https://wa.me/201119235049" class="text-secondary">+20 111 923 5049</a></p>
                <div class="social-icons mt-3">
                    <a href="https://www.facebook.com/" target="_blank" class="text-secondary mr-3" aria-label="Facebook"><i class="fab fa-facebook-f fa-lg"></i></a>
                    <a href="https://www.twitter.com/" target="_blank" class="text-secondary mr-3" aria-label="Twitter"><i class="fab fa-twitter fa-lg"></i></a>
                    <a href="https://www.linkedin.com/" target="_blank" class="text-secondary mr-3" aria-label="LinkedIn"><i class="fab fa-linkedin-in fa-lg"></i></a>
                    <a href="https://www.instagram.com/" target="_blank" class="text-secondary" aria-label="Instagram"><i class="fab fa-instagram fa-lg"></i></a>
                </div>
            </div>
        </div>
        <hr class="bg-secondary">
        <div class="row">
            <div class="col-md-6">
                <p>&copy; <?= date('Y') ?> Longevacare. All Rights Reserved.</p>
            </div>
            <div class="col-md-6 text-md-right">
                <p>Designed by <a href="https://mahmoudtawfikh.com" class="text-secondary">Mahmoud Tawfikh</a></p>
            </div>
        </div>
    </div>
</footer>

<!-- Scripts -->
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdZz3htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap4.min.js"></script>
<!-- Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384- 9/reFTGAW83EW2RDuIKqPvcibu3o6KpKx5ztx6amQS7wrPpXyDZVDfd3dzHeA6c+" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<!-- Font Awesome for social icons -->
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>

<!-- Custom Scripts -->
<script>
    $(document).ready(function() {
        $('#patientTable').DataTable({
            "order": [],
            "responsive": true
        });
        
        // Initialize Bootstrap tooltips (optional)
        $('[data-toggle="tooltip"]').tooltip();
    });
</script>

<!-- Additional Custom Styles for Footer -->
<style>
    .footer a {
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .footer a:hover {
        color: #D1C287;
    }

    .social-icons a {
        transition: color 0.3s ease, transform 0.3s ease;
    }

    .social-icons a:hover {
        color: #D1C287;
        transform: scale(1.2);
    }

    .footer hr {
        opacity: 0.5;
    }

    /* Responsive Adjustments */
    @media (max-width: 767.98px) {
        .footer .text-md-right {
            text-align: left !important;
        }
    }
</style>) and make like this codes (<!-- Add this within the <head> section of your HTML -->
<style>
    /* Root Variables for Consistency */
    :root {
        --c-bg-primary: rgba(43, 43, 43, 0.5); /* #2b2b2b with 0.5 opacity */
        --c-text-primary: white;
        --c-gold: #D1C287;
        --c-accent: #4F3F02;
        --f-primary: 'Lato', sans-serif;
        --s-border-radius: 8px;
        --transition-speed: 0.3s;
    }

    /* Footer Styles */
    .custom-footer {
        background-color: var(--c-bg-primary);
        padding: 40px 20px;
        position: relative;
        color: var(--c-text-primary);
        text-align: center;
        font-family: var(--f-primary);
        overflow: hidden;
    }

    /* Background Image */
    .footer-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
        opacity: 0.5; /* Adjusted opacity for better text visibility */
    }

    /* Footer Content Container */
    .footer-content {
        position: relative;
        z-index: 2;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        text-align: left;
        max-width: 1100px; /* Set container width to 1100px */
        margin: 0 auto;
    }

    /* Footer Columns */
    .footer-column {
        flex: 1;
        min-width: 280px;
        margin-bottom: 20px;
        padding: 0 15px;
    }

    /* Logo Styling */
    .footer-logo {
        max-width: 150px;
        margin-bottom: 20px;
    }

    /* Section Titles */
    .footer-title {
        background: linear-gradient(45deg, var(--c-gold), var(--c-accent));
        -webkit-background-clip: text;
        color: transparent;
        font-size: 20px;
        margin-bottom: 10px;
    }

    /* Paragraph Text */
    .footer-paragraph {
        margin-bottom: 20px;
        font-size: 16px; /* Ensures readability */
    }

    /* Navigation Links */
    .footer-nav a {
        color: var(--c-text-primary);
        display: block;
        margin: 8px 0;
        text-decoration: none;
        font-size: 16px;
        transition: color var(--transition-speed);
    }

    .footer-nav a:hover {
        color: var(--c-gold);
    }

    /* Contact Links */
    .footer-contact a {
        color: var(--c-text-primary);
        display: block;
        margin: 8px 0;
        text-decoration: none;
        font-size: 16px;
        transition: color var(--transition-speed);
    }

    .footer-contact a:hover {
        color: var(--c-gold);
    }

    /* Social Icons */
    .footer-social a {
        margin-right: 15px;
        display: inline-block;
        transition: transform var(--transition-speed);
    }

    .footer-social a:hover {
        transform: scale(1.1);
    }

    /* SVG Gradient Definitions */
    .footer-social svg {
        fill: url(#grad1);
        transition: fill var(--transition-speed);
    }

    /* Responsive Design for Tablets */
    @media (max-width: 1024px) {
        .footer-content {
            justify-content: space-around;
        }
    }

    /* Responsive Design for Mobile Devices */
    @media (max-width: 768px) {
        .custom-footer {
            padding: 30px 15px;
        }

        .footer-title {
            font-size: 18px;
        }

        .footer-paragraph, .footer-nav a, .footer-contact a {
            font-size: 16px;
        }

        .footer-column {
            padding: 0 10px;
        }
    }

    /* Further Optimization for Small Mobile Screens */
    @media (max-width: 480px) {
        .custom-footer {
            padding: 20px 10px;
        }

        .footer-title {
            font-size: 20px;
        }

        .footer-paragraph, .footer-nav a, .footer-contact a {
            font-size: 16px;
        }

        .footer-social a {
            margin-right: 10px;
        }
    }
</style>
<!-- Custom Footer -->
<footer class="custom-footer" role="contentinfo">
    <!-- Background Image -->
    <img src="https://longevacare.com/wp-content/uploads/2024/09/Genetic-Diagnostics-grey.jpg"
        alt="Background Image"
        class="footer-background">
    
    <!-- Footer Content -->
    <div class="footer-content">
        <!-- First Column: Logo and Mission -->
        <div class="footer-column">
            <a href="https://longevacare.com/">
                <img src="https://longevacare.com/wp-content/uploads/2024/09/white-logo.png" alt="Longeva Logo" class="footer-logo">
            </a>
            <h3 class="footer-title">Our Mission</h3>
            <p class="footer-paragraph">Longeva delivers cutting-edge homecare to reverse aging and chronic diseases, enhancing vitality and quality of life for healthier, longer living.</p>
            <p class="footer-paragraph">&copy; <?= date('Y') ?> Longevacare. All Rights Reserved.</p>
        </div>
        
        <!-- Second Column: Information Links -->
        <div class="footer-column">
            <h3 class="footer-title">Information</h3>
            <nav class="footer-nav">
                <a href="https://longevacare.com/">Home</a>
                <a href="https://longevacare.com/about-us/">About Us</a>
                <a href="https://longevacare.com/the-longeva-concept/">Our Concept</a>
                <a href="https://longevacare.com/what-we-do/">What We Do</a>
                <a href="https://longevacare.com/your-longeva-experience/">Your Longeva Experience</a>
                <a href="https://longevacare.com/contact/">Contact</a>
            </nav>
        </div>
        
        <!-- Third Column: Contact Us and Social Icons -->
        <div class="footer-column">
            <h3 class="footer-title">Contact Us</h3>
            <div class="footer-contact">
                <a href="mailto:info@longevacare.com">Email: info@longevacare.com</a>
                <a href="tel:<PRESIDIO_ANONYMIZED_PHONE_NUMBER>">Phone: +971 528 863 600</a>
                <a href="https://wa.me/17025262050">WhatsApp: +1 (702) 526-2050</a>
                <p class="footer-paragraph">Location: HDS Tower, Cluster M, JLT, Dubai</p>
            </div>
            <div class="footer-social">
                <!-- Facebook Icon -->
                <a href="https://www.facebook.com/" target="_blank" aria-label="Facebook">
                    <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
                        <defs>
                            <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
                                <stop offset="0%" style="stop-color:#D1C287;stop-opacity:1" />
                                <stop offset="100%" style="stop-color:#4F3F02;stop-opacity:1" />
                            </linearGradient>
                        </defs>
                        <path
                            d="M22.675 0h-21.35c-0.732 0-1.325 0.592-1.325 1.325v21.351c0 0.732 0.593 1.324 1.325 1.324h11.497v-9.294h-3.128v-3.621h3.128v-2.671c0-3.1 1.894-4.785 4.657-4.785 1.325 0 2.462 0.099 2.794 0.143v3.24l-1.918 0.001c-1.504 0-1.794 0.715-1.794 1.763v2.309h3.587l-0.467 3.621h-3.12v9.294h6.116c0.732 0 1.325-0.592 1.325-1.324v-21.351c0-0.732-0.593-1.325-1.325-1.325z" />
                    </svg>
                </a>
                
                <!-- Twitter Icon -->
                <a href="https://www.twitter.com/" target="_blank" aria-label="Twitter">
                    <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
                        <defs>
                            <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
                                <stop offset="0%" style="stop-color:#D1C287;stop-opacity:1" />
                                <stop offset="100%" style="stop-color:#4F3F02;stop-opacity:1" />
                            </linearGradient>
                        </defs>
                        <path
                            d="M24 4.557c-0.885 0.392-1.832 0.656-2.828 0.775 1.017-0.609 1.798-1.574 2.165-2.723-0.951 0.563-2.005 0.974-3.127 1.194-0.897-0.956-2.178-1.554-3.594-1.554-2.719 0-4.924 2.205-4.924 4.924 0 0.386 0.044 0.762 0.127 1.124-4.092-0.205-7.719-2.165-10.148-5.144-0.424 0.728-0.666 1.574-0.666 2.476 0 1.709 0.87 3.216 2.188 4.099-0.806-0.026-1.565-0.247-2.228-0.616v0.062c0 2.388 1.699 4.384 3.95 4.835-0.413 0.112-0.849 0.172-1.296 0.172-0.317 0-0.626-0.031-0.928-0.088 0.627 1.956 2.444 3.379 4.6 3.419-1.685 1.32-3.808 2.106-6.115 2.106-0.397 0-0.789-0.023-1.177-0.069 2.179 1.396 4.768 2.212 7.548 2.212 9.057 0 14.009-7.504 14.009-14.009 0-0.213-0.005-0.426-0.014-0.637 0.961-0.694 1.796-1.56 2.457-2.548z" />
                    </svg>
                </a>
                
                <!-- Instagram Icon -->
                <a href="https://www.instagram.com/" target="_blank" aria-label="Instagram">
                    <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
                        <defs>
                            <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
                                <stop offset="0%" style="stop-color:#D1C287;stop-opacity:1" />
                                <stop offset="100%" style="stop-color:#4F3F02;stop-opacity:1" />
                            </linearGradient>
                        </defs>
                        <path
                            d="M21.805 0h-19.611c-1.212 0-2.194 0.982-2.194 2.195v19.611c0 1.213 0.982 2.194 2.194 2.194h19.611c1.213 0 2.195-0.982 2.195-2.194v-19.611c0-1.213-0.982-2.195-2.195-2.195zM11.886 18.622c-3.662 0-6.636-2.974-6.636-6.636s2.974-6.636 6.636-6.636 6.636 2.974 6.636 6.636-2.974 6.636-6.636 6.636zM18.837 7.681c-0.856 0-1.549-0.693-1.549-1.549s0.693-1.549 1.549-1.549 1.549 0.693 1.549 1.549-0.693 1.549-1.549 1.549zM11.886 7.291c-2.537 0-4.595 2.058-4.595 4.595s2.058 4.595 4.595 4.595 4.595-2.058 4.595-4.595-2.058-4.595-4.595-4.595z" />
                    </svg>
                </a>
            </div>
        </div>
    </footer>) but don't change the content and make it cool design and add more codes and make it unique and doesn't effect with other element and don't ata datatable that effect with other tables