Update pages/3Life Cycle of Machine Learning Project.py

pages/3Life Cycle of Machine Learning Project.py

@@ -54,7 +54,7 @@ st.markdown(
         .circular-flowchart {
             position: relative;
             width: 1000px; /* Layout size */
-            height: 1000px; /* Equal height for a circular layout */
+            height: 1000px; /* Circular layout */
             margin: 0 auto;
             display: flex;
             justify-content: center;
@@ -80,17 +80,17 @@ st.markdown(
             transition: transform 0.3s ease, background 0.3s ease;
         }
 
-        /* Positions adjusted for equal spacing and flow */
-        .phase-1 { top: 80px; left: 450px; background-color: #4CAF50; } /* Top */
+        /* Adjusted positions for better alignment */
+        .phase-1 { top: 100px; left: 500px; background-color: #4CAF50; } /* Top-center */
         .phase-2 { top: 180px; left: 640px; background-color: #03A9F4; } /* Top-right */
-        .phase-3 { top: 350px; left: 760px; background-color: #FFC107; } /* Mid-right */
-        .phase-4 { top: 550px; left: 700px; background-color: #FF7043; } /* Lower-right */
-        .phase-5 { top: 720px; left: 500px; background-color: #8BC34A; } /* Bottom */
-        .phase-6 { top: 550px; left: 300px; background-color: #673AB7; } /* Lower-left */
-        .phase-7 { top: 350px; left: 200px; background-color: #E91E63; } /* Mid-left */
-        .phase-8 { top: 180px; left: 270px; background-color: #607D8B; } /* Top-left */
-        .phase-9 { top: 120px; left: 350px; background-color: #00BCD4; } /* Between Top-left and Top */
-        .phase-10 { top: 120px; left: 550px; background-color: #FF9800; } /* Between Top and Top-right */
+        .phase-3 { top: 300px; left: 750px; background-color: #FFC107; } /* Mid-right */
+        .phase-4 { top: 500px; left: 680px; background-color: #FF7043; } /* Lower-right */
+        .phase-5 { top: 680px; left: 500px; background-color: #8BC34A; } /* Bottom-center */
+        .phase-6 { top: 500px; left: 320px; background-color: #673AB7; } /* Lower-left */
+        .phase-7 { top: 300px; left: 220px; background-color: #E91E63; } /* Mid-left */
+        .phase-8 { top: 180px; left: 300px; background-color: #607D8B; } /* Top-left */
+        .phase-9 { top: 130px; left: 420px; background-color: #00BCD4; } /* Between Top-left and Top */
+        .phase-10 { top: 130px; left: 580px; background-color: #FF9800; } /* Between Top and Top-right */
 
         .phase:hover {
             transform: scale(1.1);