in this codes patient dasbhoard (<?php
session_start();
require_once '../db_connect.php';

// Check if the patient is logged in
if (!isset($_SESSION['patient_id'])) {
    header("Location: patient_login.php");
    exit();
}

$patient_id = $_SESSION['patient_id'];

// Fetch patient information
$stmt = $pdo->prepare("SELECT * FROM patients WHERE id = ?");
$stmt->execute([$patient_id]);
$patient = $stmt->fetch();

if (!$patient) {
    header("Location: patient_login.php");
    exit();
}

// Fetch health records
$stmt = $pdo->prepare("SELECT * FROM health_records WHERE patient_id = ? ORDER BY record_date DESC");
$stmt->execute([$patient_id]);
$health_records = $stmt->fetchAll();

// Prepare data for charts
$record_dates = [];
$weights = [];
$bmis = [];
$cholesterols = [];

foreach ($health_records as $record) {
    $record_dates[] = $record['record_date'];
    $weights[] = $record['weight'];
    $bmis[] = $record['bmi'];
    $cholesterols[] = $record['cholesterol'];
}

// Fetch invoices
$stmt = $pdo->prepare("SELECT i.*, p.name AS patient_name, p.email, p.phone, p.date_of_birth, p.registration_date
                       FROM invoices i
                       JOIN patients p ON i.patient_id = p.id
                       WHERE i.patient_id = ? ORDER BY i.invoice_date DESC");
$stmt->execute([$patient_id]);
$invoices = $stmt->fetchAll();

// Fetch services associated with each invoice
$invoice_services = [];
foreach ($invoices as $invoice) {
    $invoice_id = $invoice['id'];
    $stmt_services = $pdo->prepare("SELECT service_name, cost FROM invoice_services WHERE invoice_id = ?");
    $stmt_services->execute([$invoice_id]);
    $invoice_services[$invoice_id] = $stmt_services->fetchAll();
}

// Fetch comments (including replies)
$stmt = $pdo->prepare("SELECT * FROM comments WHERE patient_id = ? ORDER BY timestamp ASC");
$stmt->execute([$patient_id]);
$comments_data = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Organize comments into threads
$comments = [];
foreach ($comments_data as $comment) {
    if (is_null($comment['parent_id'])) {
        // This is a parent comment
        $comments[$comment['id']] = $comment;
        $comments[$comment['id']]['replies'] = [];
    } else {
        // This is a reply
        if (isset($comments[$comment['parent_id']])) {
            $comments[$comment['parent_id']]['replies'][] = $comment;
        }
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta tags for responsive design and character encoding -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Page title -->
    <title>Patient Dashboard</title>
    <!-- Import Google Fonts for modern typography -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <!-- FontAwesome for icons -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
    <!-- Bootstrap 5 CSS for responsive layout and components -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom CSS for modern design -->
    <style>
        /* Root Variables */
        :root {
            --primary-color: #4F3F02;
            --secondary-color: #D1C287;
            --background-color: #f9f9f9;
            --text-color: #333;
        }

        body {
            background-color: var(--background-color);
            color: var(--text-color);
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
        }

        /* Main Container */
        .container {
            max-width: 1200px;
            margin: 40px auto;
            padding: 0;
            background: #fff;
            border-radius: 15px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        /* Header */
        .header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            padding: 40px 20px;
            color: #fff;
            text-align: center;
            position: relative;
        }

        .header h1 {
            margin: 0;
            font-size: 36px;
            font-weight: 700;
        }

        /* Section Titles */
        .section-title {
            font-size: 28px;
            font-weight: 700;
            color: var(--primary-color);
            margin-top: 40px;
            margin-bottom: 20px;
            position: relative;
            padding: 0 20px;
        }

        .section-title::after {
            content: '';
            width: 50px;
            height: 3px;
            background-color: var(--secondary-color);
            position: absolute;
            left: 20px;
            bottom: -10px;
        }

        /* Info Items */
        .info-item {
            display: flex;
            justify-content: space-between;
            padding: 10px 20px;
            border-bottom: 1px solid #ddd;
        }

        /* Buttons */
        .btn-custom {
            background-color: var(--primary-color);
            color: #ffffff;
            border-radius: 50px;
            padding: 10px 20px;
            font-weight: 700;
            transition: background-color 0.3s;
            border: none;
        }

        .btn-custom:hover {
            background-color: var(--secondary-color);
            color: var(--primary-color);
        }

        /* Chart */
        .chart-container {
            position: relative;
            margin: auto;
            padding: 20px;
            width: 100%;
            height: 400px;
        }

        /* Comments */
        .comments {
            max-height: 600px;
            overflow-y: auto;
            margin-bottom: 20px;
            padding: 0 20px;
        }

        .comment {
            padding: 10px 15px;
            border-radius: 10px;
            margin-bottom: 10px;
            position: relative;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
        }

        .comment .comment-header {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
        }

        .comment .comment-author {
            font-weight: bold;
            margin-right: 10px;
        }

        .comment .comment-timestamp {
            font-size: 12px;
            color: #888;
        }

        .comment .comment-actions {
            position: absolute;
            top: 10px;
            right: 10px;
        }

        .comment .comment-actions button {
            background: transparent;
            border: none;
            color: #888;
            cursor: pointer;
            font-size: 18px;
        }

        .comment .comment-actions button:hover {
            color: #d9534f;
        }

        .comment .comment-content {
            margin-top: 5px;
        }

        .replies {
            margin-left: 30px;
            margin-top: 10px;
        }

        /* Invoices */
        .invoice-card {
            background: #fff;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            margin-bottom: 30px;
        }

        .invoice-card h3 {
            margin-top: 0;
            font-size: 24px;
        }

        .invoice-table th {
            background-color: var(--primary-color);
            color: #fff;
        }

        .invoice-summary {
            margin-top: 20px;
        }

        .invoice-summary p {
            margin: 0;
            font-size: 18px;
        }

        .total-amount {
            font-size: 24px;
            font-weight: 700;
            color: var(--primary-color);
        }

        /* Notifications */
        .notifications {
            padding: 20px;
        }

        .notification {
            display: flex;
            align-items: center;
            padding: 10px;
            background-color: #e2f7e2;
            border-radius: 10px;
            margin-bottom: 10px;
        }

        .notification-icon {
            font-size: 24px;
            margin-right: 10px;
            color: var(--primary-color);
        }

        .notification-text {
            flex: 1;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .section-title {
                font-size: 24px;
            }

            .header h1 {
                font-size: 28px;
            }

            .total-amount {
                font-size: 20px;
            }
        }
    </style>
</head>
<body>

    <!-- Main Container -->
    <div class="container">

        <!-- Header Section -->
        <div class="header">
                     <img src="../images/white-logo.png" alt="White Logo" style="max-width: 30%; height: auto; margin-bottom: 20px;"> <!-- Logo -->

            <h1>Welcome, <?= htmlspecialchars($patient['name']) ?></h1>
        </div>

        <!-- Notifications Section -->
        <h2 class="section-title">Notifications</h2>
        <div class="notifications">
            <?php
            // Example notifications
            $notifications = [];

            // Recent invoice
            if (!empty($invoices)) {
                $recent_invoice = $invoices[0];
                $notifications[] = [
                    'icon' => '🧾',
                    'text' => 'Your invoice #' . htmlspecialchars($recent_invoice['id']) . ' is ready.',
                ];
            }

            // Recent health record
            if (!empty($health_records)) {
                $recent_record = $health_records[0];
                $notifications[] = [
                    'icon' => '📈',
                    'text' => 'New health record added on ' . htmlspecialchars($recent_record['record_date']) . '.',
                ];
            }

            // Comments from Longevacare - Admin
            $stmt = $pdo->prepare("SELECT * FROM comments WHERE patient_id = ? AND sender = 'Longevacare - Admin' ORDER BY timestamp DESC LIMIT 1");
            $stmt->execute([$patient_id]);
            $latest_longevacare_comment = $stmt->fetch();

            if ($latest_longevacare_comment) {
                $notifications[] = [
                    'icon' => '💬',
                    'text' => 'New comment from your Longevacare - Admin.',
                ];
            }

            // Display notifications
            if (!empty($notifications)) {
                foreach ($notifications as $notification) {
                    echo '<div class="notification">';
                    echo '<div class="notification-icon">' . $notification['icon'] . '</div>';
                    echo '<div class="notification-text">' . $notification['text'] . '</div>';
                    echo '</div>';
                }
            } else {
                echo '<p>No new notifications.</p>';
            }
            ?>
        </div>

        <!-- Personal Information Section -->
        <h2 class="section-title">Your Personal Information</h2>
        <div class="info-item">
            <span><strong>Patient ID:</strong></span>
            <span><?= $patient['id'] ?></span>
        </div>
        <div class="info-item">
            <span><strong>Age:</strong></span>
            <span><?= $patient['age'] ?></span>
        </div>
        <div class="info-item">
            <span><strong>Gender:</strong></span>
            <span><?= $patient['gender'] ?></span>
        </div>
        <div class="info-item">
            <span><strong>Phone:</strong></span>
            <span><?= htmlspecialchars($patient['phone']) ?></span>
        </div>
        <div class="info-item">
            <span><strong>Email:</strong></span>
            <span><?= htmlspecialchars($patient['email']) ?></span>
        </div>
        <div class="info-item">
            <span><strong>Medical History:</strong></span>
            <span><?= nl2br(htmlspecialchars($patient['medical_history'])) ?></span>
        </div>
        <div class="info-item">
            <span><strong>Date of Birth:</strong></span>
            <span><?= $patient['date_of_birth'] ?></span>
        </div>
        <div class="info-item">
            <span><strong>Registration Date:</strong></span>
            <span><?= $patient['registration_date'] ?></span>
        </div>
        <div class="info-item">
            <span><strong>Status:</strong></span>
            <span><?= htmlspecialchars($patient['status']) ?></span>
        </div>

        <!-- Health Records Section -->
        <h2 class="section-title">Your Health Records</h2>
        <div class="chart-container">
            <canvas id="healthChart"></canvas>
        </div>
        <div class="table-responsive mt-4">
            <table class="table table-striped align-middle">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Weight (kg)</th>
                        <th>BMI</th>
                        <th>Cholesterol</th>
                        <th>Prescription</th>
                        <th>Treatment Progress</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($health_records as $record): ?>
                    <tr>
                        <td><?= $record['record_date'] ?></td>
                        <td><?= $record['weight'] ?></td>
                        <td><?= $record['bmi'] ?></td>
                        <td><?= $record['cholesterol'] ?></td>
                        <td><?= nl2br(htmlspecialchars($record['prescription'])) ?></td>
                        <td><?= nl2br(htmlspecialchars($record['treatment_progress'])) ?></td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>

        <!-- Invoices Section -->
        <h2 class="section-title">Your Invoices</h2>
        <?php if (!empty($invoices)): ?>
            <?php foreach ($invoices as $invoice): ?>
            <?php
                // Calculate totals
                $services = $invoice_services[$invoice['id']];
                $subtotal = array_sum(array_column($services, 'cost'));
                $discount = isset($invoice['discount']) ? $invoice['discount'] : 0; // Discount as amount
                $tax = isset($invoice['tax']) ? $invoice['tax'] : 0; // Tax as percent

                $taxable_amount = $subtotal - $discount;
                $tax_amount = $taxable_amount * ($tax / 100);
                $total_amount_calculated = $taxable_amount + $tax_amount;
            ?>
            <div class="invoice-card">
                <h3>Invoice #<?= htmlspecialchars($invoice['id']); ?> - <?= htmlspecialchars($invoice['invoice_date']); ?></h3>
                <!-- Services Rendered -->
                <div class="table-responsive">
                    <table class="table table-striped invoice-table">
                        <thead>
                            <tr>
                                <th>Service Name</th>
                                <th class="text-end">Cost</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($services as $service): ?>
                            <tr>
                                <td><?= htmlspecialchars($service['service_name']); ?></td>
                                <td class="text-end">$<?= number_format($service['cost'], 2); ?></td>
                            </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
                <!-- Invoice Summary -->
                <div class="row invoice-summary">
                    <div class="col-md-6">
                        <p><strong>Subtotal:</strong></p>
                        <p><strong>Discount:</strong></p>
                        <p><strong>Tax (<?= number_format($tax, 2); ?>%):</strong></p>
                        <hr>
                        <p class="total-amount"><strong>Total Amount:</strong></p>
                    </div>
                    <div class="col-md-6 text-end">
                        <p>$<?= number_format($subtotal, 2); ?></p>
                        <p>-$<?= number_format($discount, 2); ?></p>
                        <p>$<?= number_format($tax_amount, 2); ?></p>
                        <hr>
                        <p class="total-amount">$<?= number_format($total_amount_calculated, 2); ?></p>
                    </div>
                </div>
                <!-- Notes -->
                <?php if (!empty($invoice['notes'])): ?>
                <h4>Notes:</h4>
                <p><?= nl2br(htmlspecialchars($invoice['notes'])); ?></p>
                <?php endif; ?>
            </div>
            <?php endforeach; ?>
        <?php else: ?>
            <p class="px-3">You have no invoices.</p>
        <?php endif; ?>

        <!-- Comments Section -->
        <h2 class="section-title" id="comments">Your Comments</h2>
        <div class="comments">
            <?php if (!empty($comments)): ?>
                <?php foreach ($comments as $comment): ?>
                    <div class="comment">
                        <div class="comment-header">
                            <span class="comment-author">
                                <?= ($comment['sender'] === 'patient') ? 'You' : 'Longevacare - Admin' ?>
                            </span>
                            <span class="comment-timestamp"><?= $comment['timestamp'] ?></span>
                            <?php if ($comment['sender'] === 'patient' && is_null($comment['parent_id'])): ?>
                                <div class="comment-actions">
                                    <form action="delete_comment.php" method="POST" style="display: inline;">
                                        <input type="hidden" name="comment_id" value="<?= $comment['id'] ?>">
                                        <button type="submit" onclick="return confirm('Are you sure you want to delete this comment?');">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </form>
                                </div>
                            <?php endif; ?>
                        </div>
                        <div class="comment-content">
                            <?= nl2br(htmlspecialchars($comment['message'])) ?>
                        </div>
                        <?php if (!empty($comment['replies'])): ?>
                            <div class="replies">
                                <?php foreach ($comment['replies'] as $reply): ?>
                                    <div class="comment">
                                        <div class="comment-header">
                                            <span class="comment-author">
                                                <?= ($reply['sender'] === 'patient') ? 'You' : 'Longevacare - Admin' ?>
                                            </span>
                                            <span class="comment-timestamp"><?= $reply['timestamp'] ?></span>
                                        </div>
                                        <div class="comment-content">
                                            <?= nl2br(htmlspecialchars($reply['message'])) ?>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        <?php endif; ?>
                    </div>
                <?php endforeach; ?>
            <?php else: ?>
                <p>No comments yet. Start the conversation below.</p>
            <?php endif; ?>
        </div>
        <form action="send_comment.php" method="POST" class="px-3" id="commentForm">
            <div class="mb-3">
                <textarea name="message" class="form-control" rows="3" placeholder="Type your comment..." required></textarea>
            </div>
            <button type="submit" class="btn btn-custom">Post Comment</button>
        </form>

        <!-- Actions Section -->
        <div class="d-flex justify-content-end mt-4 p-3">
            <a href="patient_logout.php" class="btn btn-custom">Logout</a>
        </div>

    </div>

    <!-- Include required JS libraries -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- Improved Chart.js Script -->
    <script>
        // Get data from PHP
        var labels = <?php echo json_encode($record_dates); ?>;
        var weightData = <?php echo json_encode($weights); ?>;
        var bmiData = <?php echo json_encode($bmis); ?>;
        var cholesterolData = <?php echo json_encode($cholesterols); ?>;

        // Create the chart
        var ctx = document.getElementById('healthChart').getContext('2d');
        var healthChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [
                    {
                        label: 'Weight (kg)',
                        data: weightData,
                        borderColor: '#4F3F02',
                        backgroundColor: 'rgba(79, 63, 2, 0.2)',
                        fill: true,
                        tension: 0.4,
                    },
                    {
                        label: 'BMI',
                        data: bmiData,
                        borderColor: '#D1C287',
                        backgroundColor: 'rgba(209, 194, 135, 0.2)',
                        fill: true,
                        tension: 0.4,
                    },
                    {
                        label: 'Cholesterol',
                        data: cholesterolData,
                        borderColor: '#FF5733',
                        backgroundColor: 'rgba(255, 87, 51, 0.2)',
                        fill: true,
                        tension: 0.4,
                    },
                ],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: {
                    mode: 'index',
                    intersect: false,
                },
                plugins: {
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                    },
                    title: {
                        display: true,
                        text: 'Health Metrics Over Time',
                        font: {
                            size: 18,
                        },
                    },
                },
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: 'Date',
                            font: {
                                size: 14,
                            },
                        },
                    },
                    y: {
                        title: {
                            display: true,
                            text: 'Value',
                            font: {
                                size: 14,
                            },
                        },
                        beginAtZero: false,
                    },
                },
            },
        });
    </script>

</body>
</html>) and i want to this codes as footer (<div style="background-color: grey; padding: 40px 20px; position: relative; color: white; text-align: center;">
    <img src="https://longevacare.com/wp-content/uploads/2024/09/Genetic-Diagnostics-grey.jpg"
        alt="Background Image"
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;">
    <div
        style="position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; text-align: left; max-width: 1200px; margin: auto;">
        <!-- First Column -->
        <div class="column-with-padding" style="flex: 1; min-width: 280px; margin-bottom: 20px;">
<a href="https://longevacare.com/">
  <img src="https://longevacare.com/wp-content/uploads/2024/09/white-logo.png" alt="Longeva Logo" style="max-width: 150px; margin-bottom: 20px;">
</a>
            <h3
                style="background: linear-gradient(45deg, #D1C287, #4F3F02); -webkit-background-clip: text; color: transparent; font-size: 20px;">
                Our Mission</h3>
            <p>Longeva delivers cutting-edge homecare to reverse aging and chronic diseases, enhancing vitality and
                quality of life for healthier, longer living.</p>
            <p style="margin-top: 20px;">&copy; Longeva 2024</p>
        </div>
        <!-- Second Column -->
        <div style="flex: 1; min-width: 200px; margin-bottom: 20px; padding: 0 5px;">
            <h3
                style="background: linear-gradient(45deg, #D1C287, #4F3F02); -webkit-background-clip: text; color: transparent; font-size: 20px;">
                Information</h3>
            <nav>
                <a href="https://longevacare.com/" style="color: white; display: block; margin: 10px 0; text-decoration: none;">Home</a>
                <a href="https://longevacare.com/about-us/" style="color: white; display: block; margin: 10px 0; text-decoration: none;">About Us</a>
                <a href="https://longevacare.com/the-longeva-concept/" style="color: white; display: block; margin: 10px 0; text-decoration: none;">Our Concept</a>
                <a href="https://longevacare.com/what-we-do/" style="color: white; display: block; margin: 10px 0; text-decoration: none;">What We Do</a>
                <a href="https://longevacare.com/your-longeva-experience/" style="color: white; display: block; margin: 10px 0; text-decoration: none;">Your Longeva Experience</a>
                <a href="https://longevacare.com/contact/" style="color: white; display: block; margin: 10px 0; text-decoration: none;">Contact</a>
            </nav>
        </div>
        <!-- Third Column -->
        <div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
            <h3
                style="background: linear-gradient(45deg, #D1C287, #4F3F02); -webkit-background-clip: text; color: transparent; font-size: 20px;">
                Contact Us</h3>
            <div style="margin-bottom: 20px;">
                <a href="mailto:info@longevacare.com"
                    style="color: white; display: block; margin: 10px 0; text-decoration: none;">Email:
                    info@longevacare.com</a>
                <a href="tel:<PRESIDIO_ANONYMIZED_PHONE_NUMBER>"
                    style="color: white; display: block; margin: 10px 0; text-decoration: none;">Phone: +971 528 863 600</a>
                <a href="https://wa.me/17025262050" style="color: white; display: block; margin: 10px 0; text-decoration: none;">
                    WhatsApp: +1 (702) 526-2050</a>
                <p style="margin: 10px 0;">Location: HDS Tower, Cluster M, JLT, Dubai</p>
            </div>
            <div style="margin-top: 20px;">
                <!-- Fixed Social Icons -->
                <a href="#" style="margin-right: 15px; display: inline-block;">
                    <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="url(#grad1)">
                        <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>
                <a href="#" style="margin-right: 15px; display: inline-block;">
                    <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="url(#grad1)">
                        <defs>
                            <linearGradient id="grad1" x1="0%" y1="0%" x2="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="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>
                <a href="#" style="display: inline-block;">
                    <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="url(#grad1)">
                        <defs>
                            <linearGradient id="grad1" x1="0%" y1="0%" x2="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>
    </div>
</div>) but don't add Information section (home...) and make soical icons to words and type full codes