Refactor CSS for dropdown and ATS dashboard

Added dropdown submenu styles and ATS dashboard table styles. Removed unused styles for social media buttons and adjusted media queries.

Author: simpaticohr

CSS/style.css

@@ -44,7 +44,6 @@ nav {
     display: flex;
     gap: 15px;
     align-items: center;
-    flex-wrap: wrap; /* Ensures menu items don't hide on small screens */
 }
 
 .nav-links a {
@@ -54,86 +53,101 @@ nav {
     font-size: 0.9rem;
     padding: 5px 10px;
     transition: 0.3s;
-    display: flex;
-    align-items: center;
-    gap: 6px;
 }
 
 .nav-links a:hover, .nav-links a.active {
     color: #007bff;
 }
 
-/* 3. SOCIAL MEDIA BUTTONS */
-.social-btn {
-    font-size: 0.85rem !important;
+/* 3. DROPDOWN SUBMENU (For About Page) */
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #ffffff;
+    min-width: 180px;
+    box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
+    border-radius: 6px;
+    z-index: 1001;
+    top: 100%;
+    left: 0;
+}
+
+.dropdown-content a {
+    color: #444;
+    padding: 10px 15px;
+    border-bottom: 1px solid #f1f1f1;
+    display: block;
 }
 
-.fb { color: #1877F2 !important; } /* Facebook Blue */
-.li { color: #0077b5 !important; } /* LinkedIn Blue */
+.dropdown:hover .dropdown-content {
+    display: block;
+}
 
-/* 4. RESPONSIVE BANNER FIX */
-.page-banner, .page-banner-small {
-    /* Path Fix: url('../...') looks up to root from CSS folder */
+/* 4. BANNER & HERO SECTION */
+.page-banner {
     background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), 
                 url('../simpatico_hr_banner.png') no-repeat center center/cover;
+    height: 60vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     color: white;
     text-align: center;
-    padding: 20px;
 }
 
-.page-banner { height: 75vh; }
-.page-banner-small { height: 35vh; }
-
-/* 5. MOBILE MEDIA QUERIES */
-@media (max-width: 768px) {
-    .nav-inner {
-        flex-direction: column; /* Stacks logo above the menu on phones */
-        gap: 10px;
-    }
-    
-    .nav-links {
-        justify-content: center;
-        gap: 8px;
-    }
-
-    .nav-links a {
-        font-size: 0.8rem;
-        padding: 4px 6px;
-    }
-
-    .page-banner h1 {
-        font-size: 1.8rem;
-    }
+/* 5. ATS DASHBOARD TABLE */
+.ats-table-container {
+    overflow-x: auto;
+    margin: 40px auto;
+    max-width: 1100px;
+    background: #ffffff;
+    border-radius: 8px;
+    border: 1px solid #e1e4e8;
+    padding: 10px;
 }
 
-/* 6. FORM & CARD STYLES */
-.rich-form-box {
-    max-width: 800px;
-    margin: -40px auto 60px;
-    background: white;
-    padding: 30px;
-    border-radius: 12px;
-    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+.ats-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.9rem;
 }
 
-.btn-primary {
+.ats-table th {
     background: #007bff;
     color: white;
-    padding: 12px 25px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
+    padding: 15px;
+    text-align: left;
+}
+
+.ats-table td {
+    padding: 12px 15px;
+    border-bottom: 1px solid #eee;
+}
+
+.status-new {
+    background: #e3f2fd;
+    color: #0d47a1;
+    padding: 4px 10px;
+    border-radius: 20px;
+    font-size: 0.75rem;
     font-weight: bold;
 }
 
-footer {
-    background: #222;
-    color: #fff;
-    padding: 40px 20px;
-    text-align: center;
+/* 6. RESPONSIVE MEDIA QUERIES */
+@media (max-width: 768px) {
+    .nav-inner { flex-direction: column; gap: 10px; }
+    .nav-links { font-size: 0.8rem; flex-wrap: wrap; justify-content: center; }
+    
+    /* Mobile Table: Hide phone for space */
+    .ats-table th:nth-child(3), 
+    .ats-table td:nth-child(3) { display: none; }
+
+    .dropdown-content { position: static; box-shadow: none; border: 1px solid #eee; }
 }