Update app.py

app.py

@@ -165,31 +165,34 @@ with gr.Blocks(css="""
 }
     .gr-chatbot { background-color: white; border-radius: 15px; padding: 20px; }
 .custom-tabs .tab-nav {
-    background-color: white;
-    border-radius: 50px;
-    padding: 15px;
     display: flex;
-    justify-content: center;
-    gap: 15px;
-    border: 1px solid #e0e0e0;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    align-items: center;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    background-color: white;
+    paddding: 8px;
+    border-radius: 30px;
 }
 
 .custom-tabs button[role="tab"] {
     border-radius: 50px !important;
-    padding: 20px 40px !important;
+    padding: 10 !important;
     font-weight: 500;
-    font-size: 16px;
-    color: #555 !important;
     background-color: transparent;
-    border: none;
-    transition: 0.25s ease;
+    border:none;
+    justify-content: center;
+    width: 40%;
+    color: rgb(85, 85, 85) !important;
+
+
 }
 
 .custom-tabs button[role="tab"][aria-selected="true"] {
     background-color: #b3f0ff;
     color: #222 !important;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    transform: none !important;
 }
 
 .custom-tabs button[role="tab"]:hover {
@@ -213,7 +216,7 @@ with gr.Blocks(css="""
 
     .custom-tabs button[role="tab"]:nth-child(1)::before {
         content: "";
-        background: url("https://cdn-icons-png.flaticon.com/512/1384/1384031.png") no-repeat center center;
+        background: url("https://cdn-uploads.huggingface.co/production/uploads/6841b10b397a67a7c7a39b89/6gGwgTv14woJpgh1G59Ad.png") no-repeat center center;
         background-size: contain;
         width: 20px;
         height: 20px;
@@ -222,9 +225,11 @@ with gr.Blocks(css="""
         vertical-align: middle;
     }
 
+
+
     .custom-tabs button[role="tab"]:nth-child(2)::before {
         content: "";
-        background: url("https://cdn-icons-png.flaticon.com/512/727/727245.png") no-repeat center center;
+        background: url("https://cdn-uploads.huggingface.co/production/uploads/6841b10b397a67a7c7a39b89/F0fJhrP6CtFFqhQWKb9dF.png") no-repeat center center;
         background-size: contain;
         width: 20px;
         height: 20px;
@@ -235,7 +240,7 @@ with gr.Blocks(css="""
 
     .custom-tabs button[role="tab"]:nth-child(3)::before {
         content: "";
-        background: url("https://cdn-icons-png.flaticon.com/512/2921/2921823.png") no-repeat center center;
+        background: url("https://cdn-uploads.huggingface.co/production/uploads/6841b10b397a67a7c7a39b89/tfjs2xtx5g61oqfcchHpd.png") no-repeat center center;
         background-size: contain;
         width: 20px;
         height: 20px;
@@ -247,6 +252,7 @@ with gr.Blocks(css="""
 
 
 
+
 """) as demo:
 
     gr.Markdown("""