.contact-us {
    max-width: var(--root-max-width);
    margin: auto;
}

.contact-us>header {
    padding-top: calc(100 * var(--px));
    padding-bottom: calc(52 * var(--px));
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.contact-us>header h3 {
    font-size: calc(48 * var(--px));
    font-weight: bold;
    line-height: calc(52 * var(--px));
}

.contact-us>header .header-tab {
    font-size: calc(18 * var(--px));
    display: flex;
    flex-wrap: wrap;
    gap: calc(12* var(--px));
}

.contact-us>header .header-tab>.tab-item {
    min-width: calc(140 * var(--px));
    text-align: center;
    color: #666;
    line-height: calc(50 * var(--px));
    padding: 0 calc(20* var(--px));
    border: 1px solid #d2d2d2;
    border-radius: 999px;
    transition: all .3s linear;
}

.contact-us>header .header-tab>.tab-item.active,
.contact-us>header .header-tab>.tab-item:not([class=active]):hover {
    color: #fff;
    background-color: var(--root-color);
    border-color: var(--root-color);
}

.contact-us-content {
    text-align: left;
}

.contact-us-content .job-header {
    color: #fff;
    font-size: calc(24 * var(--px));
    font-weight: bold;
    padding: 0 calc(60 * var(--px));
    background-image: linear-gradient(to right, #f99e50, #ea5421);
    margin-bottom: calc(10 * var(--px));
    display: flex;
    justify-content: space-between;
}

.contact-us-content .job-header p {
    padding: calc(24 * var(--px)) calc(12 * var(--px)) calc(24 * var(--px)) 0;
    flex: 1 1 0;
}

.contact-us .jobs {
    padding-bottom: calc(100 * var(--px));
    display: flex;
    flex-direction: column;
    gap: calc(10 * var(--px)) 0;
}

.contact-us .jobs .job-item {
    overflow: hidden;
}

.contact-us .jobs .job-item .job-item-header {
    color: #000;
    font-size: calc(24 * var(--px));
    font-weight: bold;
    padding: 0 calc(60 * var(--px));
    background-color: #f3f6f8;
    display: flex;
    justify-content: space-between;
    position: relative;
    transition: color .3s ease;
}

.contact-us .jobs .job-item .job-item-header:hover,
.contact-us .jobs .job-item.active .job-item-header {
    color: #fff;
    background-image: linear-gradient(to right, #f99e50, #ea5421);
}

.contact-us .jobs .job-item .job-item-header:hover .icon,
.contact-us .jobs .job-item.active .job-item-header .icon {
    border-color: #fff;
}

.contact-us .jobs .job-item .job-item-header:hover .icon .right-icon,
.contact-us .jobs .job-item.active .job-item-header .icon .right-icon {
    border-color: #fff;
}

.contact-us .jobs .job-item .job-item-header p {
    padding: calc(50 * var(--px)) calc(12 * var(--px)) calc(50 * var(--px)) 0;
    flex: 1 1 0;
}

.contact-us .jobs .job-item .job-item-header .icon {
    width: calc(30* var(--px));
    height: calc(30* var(--px));
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #d3d3d3;
    border-radius: 50%;
    position: absolute;
    right: calc(60 * var(--px));
    top: 50%;
    translate: 0 -50%;
    transition: transform .3s ease;
}

.contact-us .jobs .job-item .job-item-header .icon .right-icon {
    width: calc(8* var(--px));
    height: calc(8* var(--px));
    border-color: var(--root-color);
}

.contact-us .jobs .job-item.active .job-content {
    margin-bottom: calc(40 * var(--px));
}
.contact-us .jobs .job-item.active .job-item-header .icon {
    transform: rotate(90deg);
}
.contact-us .jobs .job-item .job-content {
    height: 0px;
    font-size: calc(18 * var(--px));
    line-height: calc(24 * var(--px));
    padding: 0 calc(60 * var(--px));
    background-color: #f3f6f8;
    transition: height .3s linear;
}

.contact-us .jobs .job-item .job-content dl dt {
    font-size: calc(24 * var(--px));
    font-weight: bold;
    padding-top: calc(40 * var(--px));
    padding-bottom: calc(24 * var(--px));
}

.contact-us .jobs .job-item .job-content .email {
    margin-top: calc(20 * var(--px));
    padding-bottom: calc(40 * var(--px));
    display: flex;
    align-items: center;
}

.contact-us .jobs .job-item .job-content .email .img {
    width: calc(56 * var(--px));
    height: calc(56 * var(--px));
    background-color: var(--root-color);
    border-radius: 50%;
    margin-right: calc(12 * var(--px));
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-us .jobs .job-item .job-content .email .img img {
    height: calc(20 * var(--px));
}

.contact-us .jobs .job-item .job-content .email a {
    color: var(--root-color);
    text-decoration-color: var(--root-color);
}