/* Modernized Job Card Styling */
        .job-card {
            background-size: cover;
            background-position: center;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smoother transition */
            border-radius: 1rem; /* Ensure rounded corners */
            min-height: 250px; /* Give cards a minimum height */
        }

        .job-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            /* Darker, more distinct overlay */
            background: rgba(17, 24, 39, 0.9); /* A very dark blue/gray */
            z-index: 1;
            transition: background 0.4s ease;
        }
        .job-card > * {
            position: relative;
            z-index: 2;
        }

        /* Modal backdrop for blur effect */
        .modal-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(8px);
            z-index: 999;
            transition: opacity 0.3s ease;
        }

        /* Hover effects for desktop */
        @media (hover: hover) {
            .job-card:hover {
                transform: translateY(-8px) scale(1.02); /* Less aggressive scale */
                box-shadow: 0 15px 30px rgba(99, 102, 241, 0.6); /* More prominent glow */
                border: 1px solid rgba(129, 140, 248, 0.6);
            }
            .job-card:hover::before {
                background: rgba(17, 24, 39, 0.7); /* Lighter overlay on hover to hint at background image */
            }
            .job-card:hover {
                background-size: 105%; /* Subtle zoom */
            }
            .job-card button:hover {
                box-shadow: 0 0 15px rgba(129, 140, 248, 0.8);
                transform: scale(1.02); /* Less aggressive scale */
            }
            .hover-card {
                transition: all 0.3s ease-in-out;
            }
            .hover-card:hover {
                transform: translateY(-5px); /* Less vertical lift */
                box-shadow: 0 15px 30px rgba(0,0,0,0.5), 0 0 15px rgba(59,130,246,0.4);
                border-color: rgba(59,130,246, 0.5);
            }
        }

        /* Mobile-specific styles for better UX */
        @media (max-width: 768px) {
             /* Make the header slightly more translucent on mobile for better contrast */
            .header-bg {
                background-color: rgba(0, 0, 0, 0.85);
            }
            .container {
                padding-left: 1rem;
                padding-right: 1rem;
            }
            .hero-title {
                font-size: 2.5rem; /* Better size for title on small screens */
            }
            .job-card {
                padding: 1.5rem; /* Good padding for touch targets */
            }
            #searchJob, #searchCourse {
                width: 100%;
                margin-bottom: 0.75rem; /* More spacing between stacked inputs */
            }
            .grid-cols-2, .grid-cols-4, .md\:grid-cols-3 {
                grid-template-columns: 1fr; /* Single column layout for most grids on mobile */
            }
        }