Fixed the donation cards,did proper styling, use flex properties to f…

…ix them

WildGuard-main/index.html

@@ -505,38 +505,51 @@ <h2 class="h2 section-title">
             <h1>Support Us with Your Donation</h1>
           </b> </div>
         <div class="card-container">
-          <div class="card">
-            <b>
+          <div class="card flex flex-col justify-between item-center">
+            <div>
               <h2>Basic Tier</h2>
             </b>
-            <p class="amount">$10/month</p>
-            <p onclick="location.href='Donation.html';" class="donate-button">Donate Now</p>
+            <p class="amount font-bold">$10/month</p>
+            <p class="benefits ">All Basic Tier benefits<br>Personalised thank-you message</p>
+            </div><b>
+            <div class="w-full">
+              <p onclick="location.href='Donation.html';" class="donate-button w-full">Donate Now</p>
+            </div>
 
           </div>
-          <div class="card">
-            <b>
+          <div class="card flex flex-col justify-between item-center">
+            <div>
               <h2>Supporter Tier</h2>
             </b>
-            <p class="amount">$25/month</p>
-            <p class="benefits">All Basic Tier benefits<br>Personalised thank-you message</p>
-            <button onclick="location.href='Donation.html';" class="donate-button">Donate Now</button>
+            <p class="amount font-bold">$25/month</p>
+            <p class="benefits">All Suppoeter Tier benefits<br>Quarterly report on our impact</p>
+            </div><b>
+            <div class="w-full">
+              <button onclick="location.href='Donation.html';" class="donate-button w-full">Donate Now</button>
+            </div>
           </div>
-          <div class="card">
-            <b>
+          <div class="card flex flex-col justify-between item-center">
+            <div>
               <h2>Champion Tier</h2>
             </b>
-            <p class="amount">$50/month</p>
-            <p class="benefits">All Suppoeter Tier benefits<br>Quarterly report on our impact</p>
-            <button onclick="location.href='Donation.html';" class="donate-button">Donate Now</button>
+            <p class="amount font-bold">$50/month</p>
+            <p class="benefits">All Champion Tier benefits<br>Invitation to exclusive events</p>
+            </div><b>
+            <div class="w-full">
+              <button onclick="location.href='Donation.html';" class="donate-button w-full">Donate Now</button>
+            </div>
           </div>
 
-          <div class="card">
-            <b>
+          <div class="card flex flex-col justify-between item-center">
+            <div>
               <h2>Leader Tier</h2>
             </b>
-            <p class="amount">$100/month</p>
-            <p class="benefits">All Champion Tier benefits<br>Invitation to exclusive events</p>
-            <button onclick="location.href='Donation.html';" class="donate-button">Donate Now</button>
+            <p class="amount font-bold">$100/month</p>
+            <p class="benefits">All Leader Tier benefits<br>Invitation to exclusive events</p>
+            </div><b>
+            <div class="w-full">
+              <button onclick="location.href='Donation.html';" class="donate-button w-full">Donate Now</button>
+            </div>
           </div>
         </div>
       </div>