.search {
    border-top: #fff;
}

@media (min-width: 992px) {
    .search {
        position: sticky;
        top: 82px;
        z-index: 10;
    }
}

.search .container-fluid {
    background-image: url("../image/header-background.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 200px;
    width: 100%;
}

@media (min-width: 576px) {
    .search .container-fluid {
        height: 140px;
    }
}

@media (min-width: 992px) {
    .search .container-fluid {
        height: 100px;
    }
}

.search-form>div {
    margin: 0;
}

.container-fluid .row {
    margin: 0;
}

.job-offers .card .card-header {
    background-color: #ff1414;
}

.job-offers .card .card-body {
    background-color: #fff;
    color: black;
}

.container.position-sticky {
    top: 200px;
}

.job-offers .card .carb-body ul li {
    color: darkgray;
}

.btn:hover {
    background-color: #ff1414;
}

.job-offers .col-md-8 button {
    background-color: #ff1414;
    border: 1px solid #ff1414;
}

.job-offers .col-md-8 button:hover {
    background-color: #8b0000;
}

.job-offers .col-md-8 button:active {
    background-color: #000;
}

.search button.btn {
    background-color: #ff1414;
    border: 1px solid #ff1414;
}

.search button.btn:hover {
    background-color: #8b0000;
}

.search button.btn:active {
    background-color: #000;
}

.job-offers .card .card-header,
.modal-apply .modal .modal-header,
.modal-smscreen .modal .modal-header {
    background-image: url("../image/header-background.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.modal-apply .modal .modal-header {
    color: white;
}

.modal-apply .modal-body {
    background-color: #202020;
}

.modal-body .form-control {
    background-color: #2020208e;
    color: white;
    font-size: small;
}

.modal-apply .modal button.btn{
    background-color: #ff1414;
}
.modal-apply .modal button.btn:hover{
    background-color: #8b0000;
    border-color: #ff1414;
}
.modal-apply .modal button.btn:active{
    background-color: #000;
    border-color: #fff;
}

.pagination .page-link {
    color: #000;

}

/* JOBS CONTAINER  */

.col-lg-4 .container .card {
    transition: transform 0.3s, filter 0.3s, border-color 0.3s;
    cursor: pointer;
}

.col-lg-4 .container .card:hover {
    border-color: #ff2424;
    filter: brightness(50%);
}

.cardJobs{
    border: 1px solid #ff1414;
}

.modal-smscreen .modal-body {
    color: #000;
}



/* new modal css */
.btn{
    color: white;
}
/* Custom CSS for button and loading animation */
.btn-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: width 0.3s;
}

/* Custom CSS for modal hover effect */
.modal-content:hover {
    border-color: #ff2424;
}