.home-bg {
    background-image: url('/Image/recruitment-6838250.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: calc(100vh - 60px); /* minus navbar height */
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.overlay {
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
    padding: 3rem 1rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.vacancy-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    width: 100%;
    max-width: 1200px;
    padding: 1rem;
}

.vacancy-card {
    background: #ffffffdd;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

    .vacancy-card:hover {
        transform: translateY(-4px);
    }

.card-responsive {
    background-color: #fdfdfd;
    border-top: 4px solid #3c8dbc;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .overlay {
        padding: 0.5rem;
    }

    .stepper-background {
        background-image: url('/Image/recruitment-of-7210557.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-color: rgba(255, 255, 255, 0.9); /* Fallback for blend */
        background-blend-mode: lighten;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }


    @media (max-width: 768px) {
        .sidebar-container {
            width: 30% !important;
            min-width: 140px !important;
            max-width: 30% !important;
            padding: 8px !important;
        }

        .main-content {
            width: 70% !important;
            min-width: unset !important;
            max-width: 70% !important;
            padding: 8px !important;
        }
    }