new style for experiences section

src/styles/Experiences.css

@@ -3,23 +3,22 @@
     flex-direction: column;
     align-items: center;
     width: 100%;
-    scroll-margin-top: 40px;
 }
 
 .experiences-container {
-    width: 90%;
+    width: 50%;
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
-
 .experiences-container::before {
     content: '';
     position: absolute;
+    left: 50%;
     transform: translateX(-50%);
     width: 2px;
     height: 100%;
     background-color: rgba(176, 176, 176, 0.2);
-}
+}

src/styles/SingleExperience.css

@@ -1,40 +1,39 @@
 .experience-card {
     position: relative;
-    width: 50%;
+    width: 100%;
     margin-bottom: 3rem;
-    box-sizing: border-box;
-    border-radius: 12px;
-    background-color: rgba(255, 255, 255, 0.03);
-    transition: all 0.3s ease;
     padding: 1.5rem;
-}
-
-.experience-card.left {
-    align-self: flex-start;
-    border-left: 3px solid #D95F46;
-}
-
-.experience-card.right {
-    align-self: flex-end;
-    border-right: 3px solid #D95F46;
-}
-
-.experience-card:hover {
-    transform: translateY(-5px);
-    background-color: rgba(255, 255, 255, 0.05);
-}
-
-.experience-card-header {
     display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    gap: 1rem;
-    margin-bottom: 1rem;
 }
 
-.experience-card-header-left {
-    display: flex;
-    flex-direction: column;
+.experience-card::before {
+    content: '';
+    position: absolute;
+    top: 25px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    background-color: #D95F46;
+    border: 3px solid rgba(176, 176, 176, 0.2);
+}
+
+
+.experience-card-left {
+    width: 50%;
+    text-align: end;
+    margin-right: 8rem;
+}
+
+.experience-card-right {
+    width: 50%;
+}
+
+.experience-company {
+    color: #D95F46;
+    font-size: 1.2rem;
+    margin: 0;
 }
 
 .experience-role {
@@ -43,9 +42,6 @@
     color: #EAEAEA;
     margin: 0;
 }
-.experience-location{
-    font-weight: 600;
-}
 
 .experience-location,
 .experience-duration {
@@ -53,7 +49,6 @@
     color: #B0B0B0;
     margin: 0.25rem 0 0;
     white-space: nowrap;
-
 }
 
 .experience-tasks {
@@ -64,15 +59,19 @@
 
 .experience-tasks li {
     position: relative;
-    padding-left: 1.2rem;
+    padding-left: 1.5rem;
     margin-bottom: 0.5rem;
     color: #B0B0B0;
+    text-align: left;
 }
 
 .experience-tasks li::before {
     content: '›';
     position: absolute;
     left: 0;
+    top: 0;
     color: #D95F46;
     font-weight: bold;
-}
+    font-size: 1.2rem;
+    line-height: 1;
+}

src/styles/SingleProject.css

@@ -20,9 +20,9 @@
     width: 100%;
     display: flex;
     justify-content: center;
-    align-items: center;
+    align-items: start;
     overflow: hidden;
-    max-height: 225px;
+    height: 210px;
 }
 
 .single-project-left img {
@@ -32,7 +32,6 @@
     transition: opacity 0.3s ease-in-out;
     opacity: 1;
     object-fit: cover;
-
 }
 
 .single-project-left img.fade-out {