feat: Adding instructions before checkout

payment.css

@@ -358,4 +358,8 @@ header {
 }
 
 
-/* New NAvbar CSS Ends Here*/
+/* New NAvbar CSS Ends Here*/
+
+.hr:hover{
+  color: whitesmoke;
+}

payment.html

@@ -30,11 +30,55 @@
 
   <div class="container" style="margin-top: 70px;">
     <main>
+
       <div class="py-5 text-center">
+
+        <h2 style="text-decoration: underline ;" >Guide</h2>
+
+      </div>
 
+      <div class="py-4 text-left">
+
+        <div style="border:2px solid #a1a1a1; padding: 2rem;">
+          <p >Before you proceed to checkout, here are some instructions : </p>
+          <ul class="connected list no2">
+            <li>Fill in the required fields with your personal details (name, email, username etc.)</li>
+            <li>Don't forget to double-check your travel packages, dates, and address.</li>
+            <li>Select your preferred payment method -
+
+              <ul>
+                <li>Credit Card</li>
+                <li>Debit Card</li>
+                <li>PayPal</li> 
+              </ul>
+
+               Enter your payment details securely.</li>
+
+            <li>Select your preferred shipping method - </li>
+
+            <ul>
+              <li>Standard Shipping</li>
+              <li>Express shipping</li>
+            </ul>
+
+            <li>Check your email for any follow-up instructions or updates regarding your booking.</li>
+            <li>Contact customer support if you encounter any issues or have questions</li>
+          </ul>
+
+        </div>
+        <br>
+      </div>
+
+
+        <hr class="hr">
+        <br>
+
+      <div class="py-5 text-center">
         <h2>Checkout</h2>
       </div>
 
+
+
       <div class="row g-5">
         <div class="col-md-5 col-lg-4 order-md-last">
           <h4 class="d-flex justify-content-between align-items-center mb-3">