Major update, Initial Version.

style.css

@@ -1,38 +1,56 @@
+@import url('https://fonts.googleapis.com/css2?family=Lalezar&family=Vazirmatn&display=swap');
+
 body {
-    font-family: 'Tahoma', sans-serif;
-    line-height: 1.6;
+    font-family: 'Vazirmatn', sans-serif;
+    line-height: 1.8;
     margin: 0;
     padding: 0;
-    background: #f4f4f4;
-    color: #333;
+    background: #f7f7f7;
+    color: #444;
     direction: rtl;
 }
 
 header {
-    background: #333;
+    background: linear-gradient(to right, #007BFF, #0056b3);
     color: #fff;
-    padding: 2rem 0;
+    padding: 3rem 1rem;
     text-align: center;
+    border-bottom: 5px solid #0056b3;
 }
 
 header h1 {
+    font-family: 'Lalezar', cursive;
+    font-size: 3rem;
     margin: 0;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+}
+
+header h2 {
+    font-size: 1.2rem;
+    margin: 0.5rem 0;
+    color: #e0e0e0;
+}
+
+header p {
+    font-size: 1.2rem;
+    margin: 0.5rem 0;
 }
 
 main {
-    padding: 1rem;
-    max-width: 800px;
+    padding: 2rem 1rem;
+    max-width: 900px;
     margin: auto;
 }
 
 .scroll-section {
     background: #fff;
-    margin-bottom: 1rem;
-    padding: 1.5rem;
-    border-radius: 5px;
+    margin-bottom: 2rem;
+    padding: 2rem;
+    border-radius: 10px;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
     opacity: 0;
-    transform: translateY(20px);
-    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+    transform: translateY(30px);
+    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
 }
 
 .scroll-section.visible {
@@ -42,17 +60,21 @@ main {
 
 .profile-pic {
     display: block;
-    width: 150px;
-    height: 150px;
+    width: 200px;
+    height: 200px;
     border-radius: 50%;
-    margin: 0 auto 1rem;
+    margin: 0 auto 1.5rem;
+    border: 5px solid #007BFF;
+    box-shadow: 0 0 20px rgba(0,123,255,0.3);
 }
 
 h2 {
-    color: #333;
-    border-bottom: 2px solid #333;
-    padding-bottom: 0.5rem;
-    margin-bottom: 1rem;
+    font-family: 'Lalezar', cursive;
+    color: #0056b3;
+    font-size: 2.2rem;
+    border-bottom: 3px solid #007BFF;
+    padding-bottom: 0.8rem;
+    margin-bottom: 1.5rem;
 }
 
 ul {
@@ -61,18 +83,56 @@ ul {
 }
 
 ul li {
-    background: #eee;
-    padding: 0.75rem;
-    margin-bottom: 0.5rem;
-    border-radius: 3px;
+    background: #f0f8ff;
+    padding: 1rem;
+    margin-bottom: 0.8rem;
+    border-radius: 5px;
+    border-right: 5px solid #007BFF;
+    transition: all 0.3s ease;
+}
+
+ul li:hover {
+    background: #e6f2ff;
+    transform: translateX(-5px);
+}
+
+ul li h3 {
+    margin: 0 0 0.5rem;
+    color: #0056b3;
 }
 
 .contact-info p {
-    margin: 0.5rem 0;
+    margin: 0.8rem 0;
+    font-size: 1.1rem;
 }
 
-.social-media a {
-    margin-right: 10px;
-    text-decoration: none;
-    color: #333;
+.cert-gallery {
+    text-align: center;
+}
+
+.cert-gallery img {
+    max-width: 80%;
+    border-radius: 10px;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+    transition: transform 0.3s ease;
+}
+
+.cert-gallery img:hover {
+    transform: scale(1.05);
+}
+
+/* Responsive Styles */
+@media (max-width: 768px) {
+    header h1 {
+        font-size: 2.5rem;
+    }
+
+    .profile-pic {
+        width: 150px;
+        height: 150px;
+    }
+
+    h2 {
+        font-size: 1.8rem;
+    }
 }