change of section titles and margin-top section

src/components/Experiences.jsx

@@ -30,7 +30,7 @@ function Experiences() {
 
     return (
         <section id="experiences-section">
-            <h1>Experiences</h1>
+            <h1 className="section-title">Experiences</h1>
             <div className="experiences-container">
                 {experiencesData.map((exp) => (
                     <SingleExperience experience={exp}/>

src/components/Projects.jsx

@@ -29,7 +29,7 @@ function Projects() {
 
     return (
         <section id="projects-section">
-            <h1>Projects</h1>
+            <h1 className="section-title">Projects</h1>
             <div className="projects-section-list">
                 <SingleProject image={codevProject.image} title={codevProject.title} description={codevProject.description} skills={codevProject.skills} color={codevProject.color} nbImage={codevProject.nbImage}/>
                 <SingleProject image={SAECProject.image} title={SAECProject.title} description={SAECProject.description} skills={SAECProject.skills} color={SAECProject.color} nbImage={SAECProject.nbImage}/>

src/components/Skills.jsx

@@ -4,7 +4,7 @@ import "../styles/Skills.css";
 function Skills() {
     return (
         <section id="skills-section">
-            <h1>Skills</h1>
+            <h1 className="section-title">Skills</h1>
             <div id="languages" className="skill-category">
                 <h2>Languages</h2>
                 <div className="skills">

src/index.css

@@ -17,13 +17,35 @@ body {
   min-height: 100vh;
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-  color: #EAEAEA;
-  text-align: center;
+
+
+h1{
+  font-size: 4rem;
+  color: white;
 }
 
+.section-title {
+  font-family: Arial;
+  font-size: 2.5rem;
+  color: #f0f0f0;
+  text-transform: uppercase;
+  letter-spacing: 0.15rem;
+  text-align: center;
+  margin-bottom: 3rem;
+}
+
+.section-title::after {
+  content: '';
+  display: block;
+  width: 60px;
+  height: 3px;
+  background-color: #D95F46;
+  margin: 1rem auto 0;
+  border-radius: 2px;
+}
+
+
+
 h2{
-  color: #EAEAEA;
+  color: #f0f0f0;
 }

src/styles/Projects.css

@@ -2,11 +2,12 @@
     display: flex;
     flex-direction: column;
     scroll-margin-top: 40px;
+    margin-top: 100px;
 }
 
 .show-more-container {
     text-align: center;
-    margin-top: 2rem;
+
 }
 
 .show-more-link {

src/styles/Skills.css

@@ -2,6 +2,7 @@
     display: flex;
     flex-direction: column;
     scroll-margin-top: 40px;
+    margin-top: 100px;
 }
 
 .skills-span{