adjust the log in button of this code <?php include 'connection.php'; ?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rent Pedicabs</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"> <!-- Font Awesome CDN -->
    <style>
        body {
            background: linear-gradient(135deg, #6a1b9a, #00bcd4); /* Dark Purple to Neon Blue Gradient */
            color: #fff;
            font-family: 'Roboto', sans-serif;
            padding-top: 60px; /* To make space for the fixed navbar */
        }

        .navbar {
            background-color: #24263b;
            border-radius: 0;
            padding: 10px 20px;
        }

        .navbar .navbar-brand {
            color: #00d4ff !important;
            font-weight: bold;
        }

        .navbar .nav-link {
            color: #bbb !important;
            transition: color 0.3s ease;
        }

        .navbar .nav-link:hover {
            color: #fff !important;
        }

        .container {
            margin-top: 40px;
        }

        .card {
            background-color: #24263b;
            border: 1px solid #00d4ff;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 20px;
            text-align: center;
            color: #b8b8d4;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .card h2 {
            margin-top: 10px;
            color: #00d4ff;
            font-size: 1.5rem;
        }

        .card p {
            padding: 0 15px;
        }

        .card a {
            display: inline-block;
            margin: 10px;
            padding: 10px 20px;
            background-color: #00d4ff;
            color: #1a1b2f;
            border-radius: 4px;
            text-decoration: none;
            font-size: 1rem;
            transition: background-color 0.3s ease;
        }

        .card a:hover {
            background-color: #007aa1;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
        }

        /* Adjusting the login button */
        .btn-login {
            position: fixed;
            top: 20px;
            right: 20px; /* Right corner */
            padding: 12px 25px;
            background-color: #00d4ff;
            color: #1a1b2f;
            border-radius: 50px; /* Rounded corners */
            font-weight: bold;
            font-size: 1.2rem; /* Larger text */
            text-decoration: none;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
            transition: background-color 0.3s ease, transform 0.2s ease;
            z-index: 1000;
        }

        .btn-login:hover {
            background-color: #007aa1;
            transform: scale(1.1); /* Slight enlargement on hover */
        }

        .btn-login:active {
            transform: scale(0.95); /* Smaller size on click */
        }

        .row {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }

        @media (max-width: 768px) {
            .card {
                width: 100%;
            }
        }

    </style>
</head>

<body>

    <!-- Navigation Bar -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
        <a class="navbar-brand" href="#">Rent Pedicabs</a>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="about.php">About</a></li>
                <li class="nav-item"><a class="nav-link" href="contact.php">Contact</a></li>
            </ul>
        </div>
    </nav>

    <!-- Login Button -->
    <a href="login.php" class="btn-login"><i class="fas fa-sign-in-alt"></i> Log In</a>

    <div class="container">
        <h1 class="text-center" style="border: 2px solid black; padding: 10px; text-align: center;">RENT PEDICAB NOW!</h1>
        <div class="row">
            <?php
            $pedicabs = [
                ['id' => 1, 'image' => 'pedicab1.jpg', 'alt' => 'Classic Pedicab', 'description' => 'Classic Pedicab - Ideal for short city rides with a vintage touch.', 'price' => 10],
                ['id' => 2, 'image' => 'pedicab2.jpg', 'alt' => 'Electric Pedicab', 'description' => 'Electric Pedicab - Smooth, eco-friendly, and quiet rides.', 'price' => 12],
                ['id' => 3, 'image' => 'pedicab3.webp', 'alt' => 'Family Pedicab', 'description' => 'Family Pedicab - Spacious for up to four passengers.', 'price' => 15],
                ['id' => 4, 'image' => 'pedicab4.jpg', 'alt' => 'Luxury Pedicab', 'description' => 'Luxury Pedicab - Premium comfort with cushioned seats.', 'price' => 20],
                ['id' => 5, 'image' => 'pedicab5.jpg', 'alt' => 'Cargo Pedicab', 'description' => 'Cargo Pedicab - Designed for heavy-duty deliveries.', 'price' => 18],
                ['id' => 6, 'image' => 'pedicab6.jpg', 'alt' => 'Sporty Pedicab', 'description' => 'Sporty Pedicab - Built for speed and agility.', 'price' => 14],
                
            ];

            foreach ($pedicabs as $pedicab) {
                echo '<div class="col-md-3 d-flex justify-content-center">';
                echo '    <div class="card">';
                echo '        <img src="' . htmlspecialchars($pedicab['image']) . '" alt="' . htmlspecialchars($pedicab['alt']) . '">';
                echo '        <h2>' . htmlspecialchars($pedicab['alt']) . '</h2>';
                echo '        <p>' . htmlspecialchars($pedicab['description']) . '</p>';
                echo '        <p><strong>Price: ₱' . htmlspecialchars($pedicab['price']) . '</strong></p>';
                echo '        <a href="customer_login.php?pedicab_id=' . htmlspecialchars($pedicab['id']) . '&price=' . htmlspecialchars($pedicab['price']) . '" class="btn-rent">Rent This Pedicab</a>';
                echo '    </div>';
                echo '</div>';
            }
            ?>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>