web changes

site/css/responsive.css

@@ -108,7 +108,20 @@
     }
     
     .about-stats {
-        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+        grid-template-columns: 1fr; /* Change to single column for vertical stacking */
+        gap: 25px; /* Increase gap for better separation */
+    }
+    
+    /* Fix the stat items to remove any rotation and ensure consistency */
+    .about-stats .stat-item {
+        max-width: 100%;
+        width: 100%;
+        margin: 0 auto;
+        transform: rotate(0deg) !important; /* Remove any rotation */
+    }
+    
+    .about-stats .stat-item:hover {
+        transform: scale(1.03) !important; /* Only scale on hover, no rotation */
     }
     
     .emoji-sticker {
@@ -139,6 +152,39 @@
         padding: 10px 10px 40px 10px;
         margin: 0 auto 20px;
     }
+    
+    /* Make hero elements stack vertically instead of horizontal scrolling */
+    .hero .flex-container {
+        flex-direction: column;
+        flex-wrap: wrap;
+        overflow-x: visible;
+        justify-content: center;
+        align-items: center;
+        gap: 25px;
+    }
+    
+    .hero .flex-container > div {
+        width: 100%;
+        max-width: 300px;
+        margin: 0 auto;
+    }
+    
+    /* Remove the horizontal scrollbar styling as it's no longer needed */
+    .hero .flex-container::-webkit-scrollbar {
+        display: initial;
+    }
+    
+    .hero .flex-container {
+        -ms-overflow-style: initial;
+        scrollbar-width: initial;
+    }
+    
+    /* Ensure post-its have consistent styling */
+    .hero .post-it {
+        width: 100% !important;
+        max-width: 100% !important;
+        box-sizing: border-box;
+    }
 }
 
 /* Small devices (landscape phones, 576px and up) */
@@ -198,7 +244,21 @@
     }
     
     .polaroid {
-        max-width: 180px;
-        padding: 8px 8px 35px 8px;
+        max-width: 220px;
+    }
+    
+    /* Adjust about stats spacing for smaller screens */
+    .about-stats {
+        gap: 20px; /* Slightly reduce gap on very small screens */
+    }
+    
+    .about-stats .stat-item {
+        padding: 15px; /* Reduce padding on very small screens */
+    }
+    
+    /* Further adjust sizes for smaller screens */
+    .hero .flex-container > div {
+        max-width: 100%;
+        width: 100%;
     }
 }

site/css/styles.css

@@ -393,6 +393,17 @@ section {
     border-radius: 2px;
 }
 
+/* Add base styles for the flex container */
+.hero .flex-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
+    margin-top: 40px;
+    width: 100%;
+    position: relative;
+}
+
 .hero p {
     font-size: 1.2rem;
     margin-bottom: 30px;