.jobs-hero {

    padding: 65px 0;

    background-image: url('../img/jobs-hero.png');

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    min-height: 200px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.jobs-hero h1 {

    font-family: var(--ff-LT);

    font-size: 60px;

    font-weight: 500;

    line-height: 68px;

    letter-spacing: 0.02em;

    text-align: left;

    margin: 0;

    color: white;

}



.job-search-results-wrapper {

    background: linear-gradient(180deg, #E8F8EA 0%, rgba(224, 224, 224, 0) 100%);

}



.job-search-results-wrapper .fields-wrapper,
.job-search-results-wrapper .searchandfilter {

    margin: 35px 0;

    border-radius: 18px;

    background: #FFFFFF;

    padding: 12px 25px;

    box-shadow: 0px 0px 9px 0px #00000040;

}

.job-search-results-wrapper .searchandfilter ul {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}


.job-search-results-wrapper .searchandfilter ul li {
    width: 25%;

    padding: 0 12px;

    display: flex;

    flex-direction: column;

    padding-bottom: 18px;
}

.job-search-results-wrapper .searchandfilter ul li:nth-child(1),
.job-search-results-wrapper .searchandfilter ul li:nth-child(2) {
    width: 50%;
}


.job-search-results-wrapper .fields-wrapper label {

    display: flex;

    flex-direction: column;

    padding-bottom: 18px;

}



.job-search-results-wrapper .fields-wrapper label span,
.job-search-results-wrapper .searchandfilter h4 {

    color: var(--color-dark-green);

    font-family: var(--ff-RHD);

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 20px;

    padding: 0;

}



.job-search-results-wrapper .fields-wrapper label .input-wrapper,
.job-search-results-wrapper .searchandfilter label {

    border-radius: 100px;

    border: 1px solid var(--Dark-Grey, #777A73);

    background: #FFF;

}



.job-search-results-wrapper .fields-wrapper input[type='text'],
.job-search-results-wrapper .fields-wrapper select,
.job-search-results-wrapper .searchandfilter input[type='text'],
.job-search-results-wrapper .searchandfilter select {

    border-radius: 100px;

    border: unset;

    width: 100%;

    background: #FFF;

    height: 44px;

    outline: none;

    padding: 8px 12px;

}



.job-search-results-wrapper .fields-wrapper select,
.job-search-results-wrapper .searchandfilter select {

    border-radius: 100px;

    width: 100%;

    border: unset;

    border-right: 12px solid transparent;

}



.results {

    margin-bottom: 60px;

}



.results .results-head {

    background: var(--color-dark-green);

    font-family: var(--ff-LT);

    font-size: 18px;

    font-weight: 500;

    line-height: 21.6px;

    text-align: left;

    color: white;

    padding: 13px 19px 16px;

    border-radius: 20px 20px 0px 0px;

    height: 60px;

    align-items: center;

}



.job-item {

    background: #FFFFFF;

    height: 70px;

    align-items: center;

    border-bottom: 1px solid #CCCCCC;

    font-family: var(--ff-RHD);

    font-size: 15px;

    font-weight: 400;

    line-height: 18px;

    text-align: left;

    color: #333333;

    padding: 13px 19px 16px;

}



.job-item .title {

    font-family: var(--ff-RHD);

    font-size: 18px;

    font-weight: 600;

    line-height: 22.1px;

    text-align: left;

    color: #000000;

}



.job-item .btn-green {

    height: 40px;

}



@media screen and (max-width:1199.9px) {



    .job-search-results-wrapper .fields-wrapper {

        padding: 12px 2px 20px;

    }

    .job-search-results-wrapper .searchandfilter ul li,
    .job-search-results-wrapper .searchandfilter ul li:nth-child(1),
    .job-search-results-wrapper .searchandfilter ul li:nth-child(2) {

        width: 50%;

    }



    .results {

        display: flex;

        flex-direction: column;

        gap: 14px;

    }



    .job-item {

        background: #FFFFFF;

        height: auto;

        border: 1px solid #DCDCDC;

        padding: 20px 3px 20px;

        border-radius: 20px;

        flex-direction: column;

        gap: 12px;

        margin: 0;

    }



    .job-item strong {

        font-size: 15px;

        line-height: 18px;

        font-weight: 700;

    }

}



@media screen and (max-width:991.9px) {

    .jobs-hero {

        padding: 65px 0;

        background-image: url('../img/jobs-hero-mobile.png');

        min-height: 265px;

    }



    .jobs-hero h1 {

        font-size: 42px;

    }

}

@media screen and (max-width:767.9px) {
    .job-search-results-wrapper .searchandfilter ul li,
    .job-search-results-wrapper .searchandfilter ul li:nth-child(1),
    .job-search-results-wrapper .searchandfilter ul li:nth-child(2) {

        width: 100%;

    }
}