@import url(_default-banner.css?v15100);
@import url(_badges-module.css);
@import url("_cta-module.css");

.badges-module {margin:0; background: var(--light); padding:40px 0 0 0;}
.badges-module .hero-badges {padding: 26px 0;}
.badge-desc {font-size: 16px;}
.badge-txt {font-size: 24px;}

.current-openings-section {padding: 80px 0; clear: both; width: 100%; background: var(--light);}
.openings-head {display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; gap: 20px; flex-wrap: wrap;}
.openings-head-lt {flex: 1;}
.openings-head-lt .optional-text {margin-bottom: 6px;}
.openings-head-lt h2 {margin: 0;}
.openings-head-rt {flex-shrink: 0;}
.jobs-list {box-shadow: 0 8px 24px rgba(6,29,73,.06); display: flex; flex-direction: column; gap: 0; border-radius: 12px; overflow: hidden;}
.job-row {display: flex; align-items: center; gap: 20px; padding: 28px 28px; background: var(--white); border-bottom: 1px solid var(--line); transition: background 0.2s; flex-wrap: wrap;}
.job-row:last-child {border-bottom: none;}
.job-row:hover {background: var(--light);}
.job-icon-title {display: flex; align-items: center; gap: 14px; flex: 0 0 240px; min-width: 0;}
.job-icon {width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;}
.job-icon figure {margin: 0; display: flex; align-items: center; justify-content: center;}
.job-icon img {width: 22px; height: 22px; filter: invert(10%) sepia(98%) saturate(3734%) hue-rotate(216deg) brightness(75%) contrast(118%);}
.job-title-col {flex: 1; min-width: 0;}
.job-meta {display: flex; align-items: center; gap: 10px 16px; flex: 1; flex-wrap: wrap;}
.job-meta-item {display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap;}
.job-meta-item i {font-size: 12px; color: var(--muted);}
.job-badge {display: inline-flex; align-items: center; padding: 3px 10px; font-size: 12px; font-weight: 500; border-radius: 4px; background: var(--blue-20); color: var(--navy);}
.job-title-col.h6 {margin: 0; font-size: 16px;}
.job-title-col a {color: var(--navy); text-decoration: none; font-weight: 700; transition: color 0.2s;}
.job-title-col a:hover {color: var(--blue-light);}
.job-desc {flex: 1; font-size: 14px; color: var(--muted); line-height: 22px; min-width: 200px;}
.job-apply {flex-shrink: 0;}

.life-at-jbk-section {padding: 80px 0 80px; clear: both; width: 100%; background: var(--white);}
.life-main-wrap {display: flex; gap: 4.11522633744856%; align-items: flex-start; margin-bottom: 64px; flex-wrap: wrap;}
.life-main-lt {flex: 0 0 300px; max-width: 300px;}
.life-main-lt p {font-size: 16px; line-height: 26px; margin-bottom: 24px;}
.life-main-rt {flex: 1; display: flex; gap: 14px; justify-content: center;}
.life-photo {flex: 1; border-radius: 12px; overflow: hidden; height: 200px;}
.life-photo img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s;}
.life-photo:hover img {transform: scale(1.05);}
.life-benefits:only-child {padding-top: 0;}
.life-benefits {display: flex; flex-wrap: wrap; gap: 60px 20px; justify-content: center; padding: 30px 20px;
  background: var(--blue-10);  border-radius: 12px;}
.life-benefit-item {display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; flex: 0 0 calc(16.666% - 17px); min-width: 130px;}
.benefit-icon-wrap {width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;}
.benefit-icon-wrap svg {width: 100%; height: 100%;}
.benefit-icon-wrap svg path {fill:var(--blue-sky);}
.life-benefit-item span {font-size: 14px; font-weight: 700; color: var(--global); line-height: 20px;}
.hiring-process-section {padding: 80px 0; clear: both; width: 100%; background: var(--light);}
.hiring-steps-wrap {display: flex; align-items: flex-start;}
.hiring-step {flex: 0 0 auto; display: flex; flex-direction: column; text-align: center; width: 160px;}
.hiring-step-head {display: flex; align-items: center; gap: 22px; margin-bottom: 18px;}
.hiring-step-num {width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--blue); color: var(--white); border-radius: 50%; font-size: 12px; font-weight: 700; font-family: var(--font-head);}
.hiring-step-icon {width: 46px; height: 46px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;}
.hiring-step-icon figure {margin: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;}
.hiring-step-icon img {width: 100%; height: 100%; filter: invert(40%) sepia(98%) saturate(1706%) hue-rotate(171deg) brightness(95%) contrast(101%);}
.hiring-step h6 {font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 6px;}
.hiring-step p {font-size: 14px; color: var(--muted2); line-height: 20px; margin: 0;}
.hiring-step-line {flex: 1; min-width: 20px; height: 1px; background: #d1dae8; align-self: flex-start; margin-top: 24px;}
@media only screen and (min-width: 1024px) {
.badge-icon {margin-bottom: auto; height: 32px; width: 32px}
.badge {padding: 0 16px;}
.badge .counter-main {gap: 12px;}
}
@media only screen and (max-width: 1280px) and (min-width: 1024px) {
.hero-badges {gap: 40px 0;}
.badge {flex: 0 0 33.333%;}
.badge:nth-child(3n) {border-right: none;}
}
@media only screen and (max-width: 1023px) and (min-width: 200px) {
.hiring-steps-wrap {flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; justify-content: flex-start; width:calc(100% + 20px);}
.hiring-step-line {flex:none; min-width:100px;}
}
@media only screen and (max-width: 1023px) and (min-width: 768px) {
.current-openings-section {padding: 64px 0;}
.job-row {align-items: flex-start; gap: 8px 20px;}
.job-icon-title {flex: 0 0 auto;}
.job-meta {justify-content: flex-end;}
.job-desc {flex: 0 0 100%; min-width: 0; padding-left: 60px;}
.job-apply {flex: 0 0 100%; padding-left: 60px;}
.life-at-jbk-section {padding: 64px 0;}
.life-main-wrap {gap: 36px;}
.life-main-lt {flex: 0 0 220px; max-width: 220px;}
.life-main-rt {flex-wrap: wrap;}
.life-main-rt .life-photo {flex: 0 0 calc(50% - 7px);}
.life-photo {height: 160px;}
.life-benefit-item {flex: 0 0 calc(25% - 15px);}
}
@media only screen and (max-width: 767px) and (min-width: 200px) {
.current-openings-section {padding: 56px 0;}
.openings-head {flex-direction: column; gap: 16px; align-items: flex-start;}
.job-row {padding: 28px 16px; align-items: flex-start; gap:15px 12px;}
.job-icon-title {flex: 0 0 100%;}
.job-meta {gap: 8px; justify-content: flex-start;}
.job-desc {flex: 0 0 100%; min-width: 0; padding-left: 0;}
.job-apply {flex: 0 0 100%; padding-left: 0;}
.job-apply a {font-size: 13px;}
.life-at-jbk-section {padding: 56px 0;}
.life-main-wrap {flex-direction: column; gap: 30px; margin-bottom: 40px;}
.life-main-lt {flex: auto; max-width: 100%;}
.life-main-rt {flex-wrap: wrap; gap: 10px;}
.life-main-rt .life-photo {flex: 0 0 calc(50% - 5px);}
.life-photo {height: 140px;}
.life-benefit-item {flex: 0 0 calc(33.333% - 15px);}
.benefit-icon-wrap {width: 56px; height: 56px;}
.benefit-icon-wrap i {font-size: 22px;}
}
@media only screen and (min-width: 361px) and (max-width: 509px) {
.life-benefits {gap: 70px 30px;}
}
@media only screen and (max-width: 359px) {
.life-benefit-item {flex: 0 0 100%;}
}

@media screen and (max-width: 600px) and (min-width: 200px) {
.badges-module .badge {padding: 30px;}
}