fix: update project badges style

Signed-off-by: Rasheedat Atinuke Jamiu <56790407+RashRAJ@users.noreply.github.com>
Signed-off-by: Darshit Dudhaiya <darshitdudhaiya201@gmail.com>

Author: RashRAJ

src/sections/Community/Handbook/recognition.js

@@ -253,7 +253,7 @@ const RecognitionPage = () => {
               <h4>Project Badges</h4>
               <table style={{ width: "100%", borderCollapse: "collapse", marginBottom: "2rem" }}>
                 <thead>
-                  <tr style={{ borderBottom: "2px solid #ddd", backgroundColor: "#f5f5f5" }}>
+                  <tr style={{ borderBottom: "2px solid var(--text-color, #ddd)", backgroundColor: "rgba(0, 0, 0, 0.05)" }}>
                     <th style={{ textAlign: "left", padding: "12px" }}>Badge</th>
                     <th style={{ textAlign: "left", padding: "12px" }}>Name</th>
                     <th style={{ textAlign: "left", padding: "12px" }}>Badge Key</th>