 <!-- Values Section -->
 <section class="py-16 bg-gray-50 dark:bg-gray-800">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="text-center mb-12">
             <h2 class="text-3xl lg:text-4xl font-bold text-gray-900 dark:text-white mb-4">
                 Our Core Values
             </h2>
             <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
                 These values guide everything we do and shape our commitment to our customers and community
             </p>
         </div>

         <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
             <div class="text-center group">
                 <div
                     class="w-16 h-16 bg-primary-100 dark:bg-primary-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                     <i class="fa-solid fa-shield-halved text-2xl text-primary-600 dark:text-primary-400"></i>
                 </div>
                 <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Trust & Security</h3>
                 <p class="text-gray-600 dark:text-gray-300">Your financial security is our top priority with
                     industry-leading protection measures.</p>
             </div>

             <div class="text-center group">
                 <div
                     class="w-16 h-16 bg-teal-100 dark:bg-teal-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                     <i class="fa-solid fa-lightbulb text-2xl text-teal-600 dark:text-teal-400"></i>
                 </div>
                 <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Innovation</h3>
                 <p class="text-gray-600 dark:text-gray-300">We embrace cutting-edge technology to deliver modern
                     banking
                     solutions.</p>
             </div>

             <div class="text-center group">
                 <div
                     class="w-16 h-16 bg-purple-100 dark:bg-purple-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                     <i class="fa-solid fa-heart text-2xl text-purple-600 dark:text-purple-400"></i>
                 </div>
                 <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Customer Care</h3>
                 <p class="text-gray-600 dark:text-gray-300">Personalized service and support whenever you need it,
                     however you prefer.</p>
             </div>

             <div class="text-center group">
                 <div
                     class="w-16 h-16 bg-orange-100 dark:bg-orange-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                     <i class="fa-solid fa-users text-2xl text-orange-600 dark:text-orange-400"></i>
                 </div>
                 <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Community</h3>
                 <p class="text-gray-600 dark:text-gray-300">Supporting local communities and contributing to economic
                     growth.</p>
             </div>
         </div>
     </div>
 </section>
