Fix statistics cards text truncation and layout

Author: Laxmi01345

package-lock.json

@@ -161,11 +161,11 @@ const Stats = () => {
         </p>
 
         {/* Interactive Stats Summary - Grid Layout */}
-        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2 sm:gap-3 md:gap-4 max-w-6xl mx-auto px-2">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 sm:gap-3 md:gap-4 max-w-6xl min-h-32 px-4 py-4 sm:px-5 sm:py-5 mx-auto px-2">
           {statisticsData.map((stat, index) => (
             <motion.div
               key={index}
-              className={`px-2 sm:px-3 md:px-4 py-2 sm:py-3 rounded-md sm:rounded-lg ${stat.bgColor} border ${stat.borderColor} flex flex-col items-center justify-center`}
+              className={` px-5 sm:px-6 md:px-7 py-6 sm:py-7 min-h-36 sm:min-h-40 rounded-md sm:rounded-lg ${stat.bgColor} border ${stat.borderColor} flex flex-col items-center justify-center`}
               whileHover={{
                 scale: 1.05,
                 boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
@@ -177,9 +177,8 @@ const Stats = () => {
               >
                 {stat.value}
               </span>
-              <span className="text-gray-700 dark:text-gray-300 text-2xs sm:text-xs md:text-sm text-center mt-0.5 sm:mt-1 line-clamp-1">
-                {stat.title.split('.')[0].substring(0, 12)}
-                {stat.title.split('.')[0].length > 12 ? '...' : ''}
+              <span className="text-gray-700 dark:text-gray-300 text-2xs sm:text-xs md:text-sm text-center mt-0.5 sm:mt-1 line-clamp-3">
+                {stat.title}
               </span>
             </motion.div>
           ))}