Edits on UP IECEP Family part

src/components/Family/family.scss

@@ -29,9 +29,9 @@
       position: relative;
       img {
         width: 100%;
-	height: 100%;
+        height: 100%;
         object-fit: cover;
-	display: block;
+        display: block;
       }
 
       .image-panel-popup {
@@ -73,8 +73,15 @@
         z-index: 2;
         cursor: pointer;
         transition: all 0.3s ease-in-out;
+        
+        .title-group {
+          width: 100%;
+          text-align: center;
+        }
+
         h3 {
           width: calc(3 / 4 * 100%);
+          margin: 0 auto; /* Added to keep it centered inside title-group */
           text-align: center;
           color: $text-light;
           text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
@@ -83,6 +90,21 @@
           letter-spacing: 0.0525rem;
         }
 
+        .action-hint {
+          display: block;
+          font-size: 0.85rem;
+          font-weight: 600;
+          text-transform: uppercase;
+          letter-spacing: 0.1rem;
+          margin-top: 0.5rem;
+          opacity: 0.9;
+          color: $text-light;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.4);
+          padding-bottom: 2px;
+          margin-inline: auto;
+          width: max-content;
+        }
+
         &:hover {
           opacity: 0;
         }
@@ -130,6 +152,9 @@
           h3 {
             font-size: 1.75rem;
           }
+          .action-hint {
+            font-size: 0.75rem; /* Slightly smaller hint on tablets */
+          }
         }
         .under {
           width: 90%;
@@ -153,6 +178,9 @@
           h3 {
             font-size: 1rem;
           }
+          .action-hint {
+            font-size: 0.6rem;
+          }
         }
         .under {
           width: 90%;
@@ -245,4 +273,4 @@
       }
     }
   }
-}
+}