updated css

css/style.css

@@ -1,46 +1,106 @@
 /* style.css */
 
+:root {
+  --primary-color: #3498db;
+  --secondary-color: #2c3e50;
+  --accent-color: #e74c3c;
+  --text-color: #333;
+  --light-bg: #ecf0f1;
+  --dark-bg: #34495e;
+}
+
+body {
+  font-family: 'Roboto', sans-serif;
+  color: var(--text-color);
+  line-height: 1.6;
+}
+
 /* Hero section styling */
 #home {
-    background: url('https://via.placeholder.com/1920x1080') no-repeat center center/cover;
-    height: 100vh;
-  }
-
-  /* Smooth scroll */
-  html {
-    scroll-behavior: smooth;
-  }
-
-  /* General Text Styling */
+  background: linear-gradient(rgba(44, 62, 80, 0.7), rgba(44, 62, 80, 0.7)), url('https://via.placeholder.com/1920x1080') no-repeat center center/cover;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+}
+
+/* Smooth scroll */
+html {
+  scroll-behavior: smooth;
+}
+
+/* General Text Styling */
+h2 {
+  font-weight: 700;
+  margin-bottom: 2rem;
+  color: var(--secondary-color);
+  position: relative;
+  padding-bottom: 10px;
+}
+
+h2::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 50px;
+  height: 3px;
+  background-color: var(--accent-color);
+}
+
+.lead {
+  font-size: 1.25rem;
+  margin-bottom: 1rem;
+  color: var(--secondary-color);
+}
+
+/* Skills Progress Bar */
+.progress {
+  height: 25px;
+  background-color: var(--light-bg);
+  border-radius: 20px;
+  overflow: hidden;
+}
+
+.progress-bar {
+  font-size: 0.9rem;
+  line-height: 25px;
+  padding: 0 10px;
+  background-color: var(--primary-color);
+  transition: width 0.6s ease;
+}
+
+/* Contact Section Links */
+#contact {
+  background-color: var(--dark-bg);
+}
+
+#contact a {
+  text-decoration: none;
+  color: #ecf0f1;
+  transition: color 0.3s ease;
+}
+
+#contact a:hover {
+  color: var(--accent-color);
+}
+
+/* Footer */
+footer {
+  background-color: var(--secondary-color);
+  color: #ecf0f1;
+  padding: 20px 0;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
   h2 {
-    font-weight: bold;
-    margin-bottom: 2rem;
+    font-size: 1.8rem;
   }
 
   .lead {
-    font-size: 1.25rem;
-    margin-bottom: 1rem;
-  }
-
-  /* Skills Progress Bar */
-  .progress-bar {
-    font-size: 0.9rem;
-    line-height: 1.5;
-    padding: 0.2rem;
-  }
-
-  /* Contact Section Links */
-  #contact a {
-    text-decoration: none;
-    color: #ddd;
-  }
-
-  #contact a:hover {
-    color: #fff;
-  }
-
-  /* Footer */
-  footer {
-    background-color: #222;
+    font-size: 1.1rem;
   }
-  
+}