Update app.py

app.py

@@ -447,25 +447,29 @@ citation_css = """
 """
 
 about_image_css = """
-/* --- CSS for the Image in the About Tab --- */
-#intro-image img { /* Target the actual <img> tag inside the Gradio component */
-    display: block;         /* Treat the image as a block element */
-    max-width: 800px;       /* Set a maximum width (adjust as needed) */
-    width: 90%;             /* Make width responsive (e.g., 90% of its container) */
-    height: auto;           /* Maintain aspect ratio */
-    margin-top: 2rem;       /* Add space above the image */
-    margin-bottom: 1rem;    /* Add space below the image */
-    margin-left: auto;      /* Center the image horizontally */
-    margin-right: auto;     /* Center the image horizontally */
-    border-radius: 8px;     /* Optional: add rounded corners */
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: add a subtle shadow */
+/* --- CSS for the Image container in the About Tab --- */
+#intro-image {
+    background-color: transparent !important; 
+    padding: 0 !important; 
+    border: none !important; 
+}
+
+/* --- CSS for the Image tag itself in the About Tab --- */
+#intro-image img { /* Target the actual <img> tag */
+    display: block;
+    max-width: 800px;
+    width: 90%;
+    height: auto;
+    margin: 2rem auto 1rem auto; /* Adjusted margin slightly */
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
 /* Optional: Different styles for smaller screens */
 @media (max-width: 768px) {
     #intro-image img {
-        max-width: 100%; /* Allow it to use full width on small screens */
-        width: 95%;      /* Adjust percentage if needed */
+        max-width: 100%;
+        width: 95%;
         margin-top: 1.5rem;
     }
 }