Enhanced the About page (#21)

assets/about/about.css

@@ -38,14 +38,15 @@ body.dark-mode .about-content {
 }
 
 .about-content {
-    background-color: rgba(255, 255, 255, 0.9);
-    border-radius: 10px;
+    flex: 1;
     padding: 2rem;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    display: flex;
     text-align: center;
-    width: 100%;
-    max-width: 1200px;
-    margin: 0 auto;
+    align-items: center;
+    border-radius: 10px;
+    flex-direction: column;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    background-color: rgba(255, 255, 255, 0.9);
 }
 
 .section-title {
@@ -56,30 +57,38 @@ body.dark-mode .about-content {
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-.about-text {
-    font-size: 1.1rem;
-    color: var(--text-color);
-    line-height: 1.8;
-    max-width: 800px;
-    text-align: center;
-    margin: 0 auto;
+.image {
+    flex: 1;
+    overflow: hidden;
+    border-radius: 10px;
+    margin-bottom: 10px;
 }
 
-.about-image {
-    width: 100%;
-    max-width: 600px;
-    height: auto;
+.image img {
+    width: 70%;
     border-radius: 10px;
-    margin: 2rem auto;
-    display: block;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease;
 }
 
-.about-image:hover {
+.image img:hover {
     transform: scale(1.02);
 }
 
+.about-text {
+    flex: 1;
+    padding: 1.5rem;
+    line-height: 1.8;
+    text-align: left;
+    font-size: 1.1rem;
+    max-width: 1000px;
+    text-align: center;
+    border-radius: 10px;
+    color: var(--text-color);
+    background-color: #fff;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
 .feature-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
@@ -132,14 +141,4 @@ body.dark-mode .about-content {
         grid-template-columns: 1fr;
         gap: 1.5rem;
     }
-}
-
-@media (max-width: 480px) {
-    .section-title {
-        font-size: 2rem;
-    }
-
-    .about-image {
-        margin: 1.5rem auto;
-    }
 }

assets/about/about.html

@@ -61,13 +61,16 @@
             <div class="container">
                 <div class="about-content">
                     <h1 class="section-title">About Us</h1>
-                    <img src="../images/about.jpg" alt="Bangalore Cityscape" class="about-image">
+                    <div class="image">
+                        <img src="../images/about.jpeg" alt="Bangalore Cityscape">
+                    </div>
                     <p class="about-text">
                         Welcome to Eventica, an ultimate guide to the dynamic and diverse events in Bangalore. As the heart of India's tech and cultural hub, Eventica is dedicated to bridging the gap between event organizers and eager participants, creating a vibrant community centered around knowledge-sharing, cultural exchange, and entertainment.
                     </p><br>
                     <p class="about-text">
                         From innovative tech conferences to insightful and engaging meetups, Eventica covers it all. We believe in the power of events to educate, inspire, and unite people, fostering unforgettable experiences and meaningful connections along the way.
                     </p>
+
                     <div class="feature-grid">
                         <div class="feature-item">
                             <div class="feature-icon">🎭</div>