From b2c1fd1020e8d0179c25f43a5b91445d0c912923 Mon Sep 17 00:00:00 2001
From: Mallik-vinukonda <158685334+Mallik-vinukonda@users.noreply.github.com>
Date: Wed, 6 Nov 2024 19:44:19 +0530
Subject: [PATCH] Update careers.css

---
 careers.css | 40 ++++++++++++++++++++++++++++------------
 1 file changed, 28 insertions(+), 12 deletions(-)

diff --git a/careers.css b/careers.css
index 0a38dd4b..5bb722a2 100644
--- a/careers.css
+++ b/careers.css
@@ -1,4 +1,3 @@
-/* styles.css */
 .search-container {
     margin: 20px 0;
     text-align: center; /* Centers the search bar */
@@ -9,54 +8,71 @@
     width: 80%; /* Full width with some padding */
     max-width: 400px; /* Maximum width */
     padding: 10px; /* Padding inside the input */
-    border: 2px solid #007BFF; /* Border color */
+    border: 2px solid #28a745; /* Green border for a positive tone */
     border-radius: 5px; /* Rounded corners */
     font-size: 16px; /* Font size of the input text */
-    transition: border-color 0.3s; /* Smooth transition for border color */
+    transition: border-color 0.3s, box-shadow 0.3s; /* Smooth transition for border color and shadow */
 }
 
-/* Change border color on focus */
+/* Change border color and add shadow on focus */
 #jobSearch:focus {
-    border-color: #0056b3; /* Darker blue when focused */
+    border-color: #218838; /* Darker green on focus */
     outline: none; /* Remove default outline */
+    box-shadow: 0 0 5px rgba(33, 136, 56, 0.4); /* Soft green shadow for focus */
 }
 
+/* Salary filter input styling */
 #salaryFilter {
     width: 80%; /* Full width with some padding */
     max-width: 200px; /* Maximum width */
     padding: 10px; /* Padding inside the input */
-    border: 2px solid #007BFF; /* Border color */
+    border: 2px solid #28a745; /* Border color */
     border-radius: 5px; /* Rounded corners */
     font-size: 16px; /* Font size of the input text */
-    transition: border-color 0.3s; /* Smooth transition for border color */
+    transition: border-color 0.3s, box-shadow 0.3s; /* Smooth transition for border color and shadow */
 }
 
-/* Change border color on focus */
+/* Change border color and add shadow on focus */
 #salaryFilter:focus {
-    border-color: #0056b3; /* Darker blue when focused */
+    border-color: #218838; /* Darker green on focus */
     outline: none; /* Remove default outline */
+    box-shadow: 0 0 5px rgba(33, 136, 56, 0.4); /* Soft green shadow */
 }
 
 /* Job table styles */
 .jobs-table {
     width: 100%; /* Full width */
     border-collapse: collapse; /* Merge borders */
+    border: 1px solid #ddd; /* Light gray border */
 }
 
 .jobs-table th, .jobs-table td {
-    border: 1px solid #ddd; /* Light gray border */
     padding: 8px; /* Padding inside cells */
     text-align: left; /* Align text to the left */
 }
 
 .jobs-table th {
-    background-color: #f2f2f2; /* Light gray background for headers */
+    background-color: #e9f7ef; /* Light green background for headers */
     font-weight: bold; /* Bold font for headers */
+    color: #155724; /* Darker green for text */
 }
 
+.jobs-table td {
+    border: 1px solid #ddd; /* Light gray border */
+}
+
+/* No results message style */
 .no-results {
-    color: red; /* Red color for "No jobs found" message */
+    color: #ff4d4f; /* Slightly softer red for a friendlier tone */
     font-weight: bold; /* Bold font for emphasis */
     text-align: center; /* Center the message */
     margin-top: 20px; /* Margin above the message */
+    font-size: 1.1em; /* Slightly larger font */
+    animation: fadeIn 0.5s ease-in; /* Soft fade-in effect */
+}
+
+/* Animation for smooth appearance */
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
 }