Use a different style of icons for the Payment Methods - Follow Up Deployment

index.html

@@ -428,22 +428,25 @@
         <!-- Payment Methods -->
         <div class="flex space-x-6 mb-2 justify-center">
             <div class="w-12 h-12 flex items-center justify-center group">
-                <img src="https://upload.wikimedia.org/wikipedia/commons/5/5e/Visa_Inc._logo.svg" class="h-6 opacity-80 group-hover:opacity-100 group-hover:scale-110 transition-all" alt="Visa">
+                <i class="fab fa-cc-visa text-blue-900 text-3xl opacity-80 group-hover:opacity-100 group-hover:text-blue-800 group-hover:scale-110 transition-all"></i>
             </div>
             <div class="w-12 h-12 flex items-center justify-center group">
-                <img src="https://upload.wikimedia.org/wikipedia/commons/2/2a/Mastercard-logo.svg" class="h-6 opacity-80 group-hover:opacity-100 group-hover:scale-110 transition-all" alt="Mastercard">
+                <i class="fab fa-cc-mastercard text-red-600 text-3xl opacity-80 group-hover:opacity-100 group-hover:text-red-500 group-hover:scale-110 transition-all"></i>
             </div>
             <div class="w-12 h-12 flex items-center justify-center group">
-                <i class="fas fa-university text-gray-400 text-2xl opacity-80 group-hover:opacity-100 group-hover:text-niogold group-hover:scale-110 transition-all"></i>
+                <i class="fas fa-landmark text-gray-400 text-2xl opacity-80 group-hover:opacity-100 group-hover:text-niogold group-hover:scale-110 transition-all"></i>
             </div>
             <div class="w-12 h-12 flex items-center justify-center group">
-                <i class="fab fa-bitcoin text-amber-400 text-2xl opacity-80 group-hover:opacity-100 group-hover:text-yellow-300 group-hover:scale-110 transition-all"></i>
+                <div class="relative">
+                    <i class="fab fa-bitcoin text-amber-500 text-2xl opacity-80 group-hover:opacity-100 group-hover:text-yellow-300 group-hover:scale-110 transition-all"></i>
+                    <i class="fab fa-ethereum text-purple-400 text-xs absolute -bottom-1 -right-1 opacity-80 group-hover:opacity-100 transition-all"></i>
+                </div>
             </div>
             <div class="w-12 h-12 flex items-center justify-center group">
-                <i class="fab fa-apple text-gray-300 text-2xl opacity-80 group-hover:opacity-100 group-hover:text-white group-hover:scale-110 transition-all"></i>
+                <i class="fas fa-mobile-alt text-gray-300 text-2xl opacity-80 group-hover:opacity-100 group-hover:text-white group-hover:scale-110 transition-all"></i>
             </div>
             <div class="w-12 h-12 flex items-center justify-center group">
-                <i class="fab fa-paypal text-blue-400 text-2xl opacity-80 group-hover:opacity-100 group-hover:text-blue-300 group-hover:scale-110 transition-all"></i>
+                <i class="fab fa-cc-paypal text-blue-500 text-3xl opacity-80 group-hover:opacity-100 group-hover:text-blue-400 group-hover:scale-110 transition-all"></i>
             </div>
         </div>