/* Job listing and details styles (scoped) */
.job-detail .workMode{
    border-radius: 2px;
    opacity: 0.5;
    background: #D9D9D9;
    margin-right:5px;
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
    font-weight: var(--font-weight-medium);
}
.job-detail span{ padding-top:5px; padding-bottom:5px; }
.job-detail .skill, .job-detail .apply{ width:100px; }
.job-detail .duration{ color: #2C2C2C; font-size: var(--text-caption); line-height: var(--leading-caption); font-weight: var(--font-weight-medium); }
.job-detail .location{ color: #2C2C2C; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--font-weight-medium); }
.job-detail h6{ color: #2C2C2C; font-size: var(--text-h6); line-height: var(--leading-h6); font-weight: var(--font-weight-bold); }
.job-detail h3{ color: #2C2C2C; font-size: var(--text-h6) !important; line-height: var(--leading-h6);
  font-weight: var(--font-weight-bold); padding-bottom:9px; }
.job-detail .c1,.job-detail .c2,.job-detail .c3{ width:fit-content; padding-right:10px; color: #2C2C2C;
  font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--font-weight-medium); }

.careers .sec1{ height:100px; }
.careers .sec2{ height:auto; }
.careers .card{ width:85%; }
.careers .side1,.careers .side2{ width:20%; padding-top:10px; padding-bottom:10px; }

/* Careers responsive: mobile and tablet */
@media (max-width:991.98px) {
    .careers .card{ width: 95%; }
    .careers .d-flex.w-100{ flex-direction: column; }
    .careers .w-75{ width: 100% !important; }
    .careers .w-25{ width: 100% !important; text-align: left !important; padding: 1rem !important; }
    .careers .side1, .careers .side2{ width: 100%; display: block; }
    .careers .side1{ margin-bottom: 0.5rem; }
}

/* Job detail responsive - col-12 col-lg-9/3 handle stacking via Bootstrap */
@media (max-width:991.98px) {
    .job-detail .col-lg-3{ margin-top: 1.5rem; }
    .job-detail .card .d-flex .w-75,
    .job-detail .card .d-flex .w-25{ width: 100% !important; }
    .job-detail h4.w-75{ width: 100% !important; }
    .job-detail .text-end{ text-align: left !important; }
}

@media (max-width:576px) {
    .careers .card{ width: 100%; padding: 1rem !important; }
    .careers .side1, .careers .side2{ font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--font-weight-medium); }
    .job-detail .d-flex{ flex-wrap: wrap; }
    .job-detail .c1, .job-detail .c2, .job-detail .c3{ display: block; margin-bottom: 0.25rem; }
}