.job-posting-section {
    background-color: #ffffff;
    /* White background for the whole section */
    color: #333;
    /* Dark text for readability */
    padding: 60px 0;
}

.job-container {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    gap: 40px;
    /* Space between the two columns */
}

.job-form-wrapper {
    width: 400px;
    position: sticky;
    top: 40px;
    /* Increased top spacing */
    height: fit-content;
}

/* Left Column: Job Description */
.job-description-wrapper {
    flex: 1;
    /* Takes up available space */
    min-width: 0;
}

.job-description {
    line-height: 1.6;
}

.job-description h1 {
    font-size: 2.5rem;
    color: #000;
    margin-bottom: 25px;
}

.job-description h2 {
    font-size: 1.5rem;
    color: #111;
    margin-top: 30px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.job-description p,
.job-description li {
    font-size: 1rem;
    color: #555;
    margin-bottom: 10px;
}

.job-description ul {
    list-style-position: inside;
    padding-left: 0;
}


@media (max-width: 991px) {

    /* 1. Stack the two main columns vertically */
    .job-container {
        flex-direction: column;
        gap: 0;
        /* Remove the horizontal gap that was for desktop */
    }

    /* 2. Add some space between the description and the form */
    .job-description-wrapper {
        margin-bottom: 50px;
    }

    /* 3. This is the most important part:
       Disable the sticky behavior and make the form full-width */
    .job-form-wrapper {
        width: 100%;
        position: static;
        /* This turns OFF the sticky effect on mobile */
        top: auto;
        /* Reset the top position */
    }

    /* 4. (Optional but recommended) Adjust padding for a better mobile fit */
    .job-posting-section {
        padding: 40px 0;
    }

    .job-container {
        padding: 0 15px;
        /* Give a little side padding on mobile */
    }
}