.job-container {
    display: flex;
    flex-direction: column;
}

.job-header {
    display: flex;
    width: 95%;
    gap: 20px;
    justify-content: space-between;
    /* border: 2px solid red; */
    margin: 20px;
}

@media (max-width: 991px) {
    .job-header {
        max-width: 100%;
        flex-wrap: wrap;
    }
}

.job-info {
    display: flex;
    gap: 20px;
}

@media (max-width: 991px) {
    .job-info {
        flex-wrap: wrap;
    }
}

.company-logo-details-page {
    aspect-ratio: 1;
    object-fit: auto;
    object-position: center;
    width: 100px;
}

.job-title-container {
    display: flex;
    flex-direction: column;
    /* flex-grow: 1; */
    /* flex-basis: 0; */
    width: fit-content;
    /* margin: auto 0; */
}

.job-title {
    color: var(--Gray-900, #18191c);
    justify-content: center;
    padding: 0 15px;
    font: 500 24px/133% Inter, sans-serif;
}

.job-meta {
    display: flex;
    /* margin-top: 1px; */
    gap: 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 143%;
    padding: 0 15px;
}

.company-name {
    color: var(--Gray-700, #474c54);
    font: 18px/156% Inter, sans-serif;
}

.job-type {
    font-family: Inter, sans-serif;
    border-radius: 3px;
    background-color: var(--Success-500, #0ba02c);
    color: var(--Gray-00, #fff);
    font-weight: 600;
    white-space: nowrap;
    justify-content: center;
    padding: 4px 12px;
}

@media (max-width: 991px) {
    .job-type {
        white-space: initial;
    }
}

.job-feature {
    font-family: Inter, sans-serif;
    border-radius: 52px;
    background-color: #ffeded;
    color: var(--Danger-500, #e05151);
    white-space: nowrap;
    justify-content: center;
    padding: 4px 12px;
}

@media (max-width: 991px) {
    .job-feature {
        white-space: initial;
    }
}

.action-buttons {
    justify-content: center;
    display: flex;
    gap: 12px;
    margin: auto 0;
}

.save-button {
    align-items: center;
    border-radius: 4px;
    background-color: var(--Primary-50, white);
    display: flex;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 16px;
}

.save-icon {
    aspect-ratio: 1;
    object-fit: auto;
    object-position: center;
    width: 24px;
}

.apply-button {
    justify-content: center;
    border-radius: 4px;
    background-color: var(--Primary-500, black);
    display: flex;
    gap: 12px;
    font-size: 16px;
    color: var(--Gray-00, #fff);
    font-weight: 600;
    text-transform: capitalize;
    line-height: 150%;
    padding: 16px 32px;
}

@media (max-width: 991px) {
    .apply-button {
        padding: 0 20px;
    }
}

.apply-text {
    font-family: Inter, sans-serif;
}

.apply-icon {
    aspect-ratio: 1;
    object-fit: auto;
    object-position: center;
    width: 24px;
}

.job-details {
    margin-top: 32px;
    width: 100%;
}

@media (max-width: 991px) {
    .job-details {
        max-width: 100%;
    }
}

.job-content {
    gap: 20px;
    display: flex;
}

@media (max-width: 991px) {
    .job-content {
        flex-direction: column;
        align-items: stretch;
        gap: 0px;
    }
}

.job-description {
    display: flex;
    flex-direction: column;
    line-height: normal;
    width: 59%;
    margin-left: 0px;
}

@media (max-width: 991px) {
    .job-description {
        width: 100%;
    }
}

.description-content {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    font-size: 16px;
    padding: 0 20px;
}

@media (max-width: 991px) {
    .description-content {
        max-width: 100%;
        margin-top: 24px;
    }
}

.description-title {
    color: var(--Gray-900, #18191c);
    font: 500 18px/156% Inter, sans-serif;
}

@media (max-width: 991px) {
    .description-title {
        max-width: 100%;
    }
}

.description-text {
    color: var(--Gray-600, #5e6670);
    font-family: Inter, sans-serif;
    font-weight: 400;
    line-height: 24px;
    margin-top: 16px;
}

@media (max-width: 991px) {
    .description-text {
        max-width: 100%;
        margin-right: 6px;
    }
}

.requirements-section {
    display: flex;
    margin-top: 16px;
    flex-direction: column;
}

@media (max-width: 991px) {
    .requirements-section {
        max-width: 100%;
    }
}

.requirements-title {
    color: var(--Gray-900, #18191c);
    font-family: Inter, sans-serif;
    font-weight: 500;
    line-height: 150%;
}

@media (max-width: 991px) {
    .requirements-title {
        max-width: 100%;
    }
}

.requirements-list {
    color: var(--Gray-600, #5e6670);
    font-family: Inter, sans-serif;
    font-weight: 400;
    line-height: 24px;
    margin-top: 8px;
}

@media (max-width: 991px) {
    .requirements-list {
        max-width: 100%;
    }
}

.desirable-section {
    display: flex;
    margin-top: 16px;
    flex-direction: column;
}

@media (max-width: 991px) {
    .desirable-section {
        max-width: 100%;
    }
}

.desirable-title {
    color: var(--Gray-900, #18191c);
    font-family: Inter, sans-serif;
    font-weight: 500;
    line-height: 150%;
}

@media (max-width: 991px) {
    .desirable-title {
        max-width: 100%;
    }
}

.desirable-list {
    color: var(--Gray-600, #5e6670);
    font-family: Inter, sans-serif;
    font-weight: 400;
    line-height: 24px;
    margin-top: 8px;
}

@media (max-width: 991px) {
    .desirable-list {
        max-width: 100%;
    }
}

.benefits-section {
    display: flex;
    margin-top: 16px;
    flex-direction: column;
}

@media (max-width: 991px) {
    .benefits-section {
        max-width: 100%;
    }
}

.benefits-title {
    color: var(--Gray-900, #18191c);
    font-family: Inter, sans-serif;
    font-weight: 500;
    line-height: 150%;
}

@media (max-width: 991px) {
    .benefits-title {
        max-width: 100%;
    }
}

.benefits-list {
    color: var(--Gray-600, #5e6670);
    font-family: Inter, sans-serif;
    font-weight: 400;
    line-height: 24px;
    margin-top: 8px;
}

@media (max-width: 991px) {
    .benefits-list {
        max-width: 100%;
    }
}

.job-sidebar {
    display: flex;
    flex-direction: column;
    line-height: normal;
    width: 41%;
    margin-left: 20px;
}

@media (max-width: 991px) {
    .job-sidebar {
        width: 100%;
    }
}

.sidebar-content {
    display: flex;
    flex-direction: column;
}

@media (max-width: 991px) {
    .sidebar-content {
        max-width: 100%;
        margin-top: 24px;
    }
}

.salary-location {
    justify-content: center;
    border-radius: 8px;
    border: 2px solid rgba(231, 240, 250, 1);
    background-color: var(--Gray-White, #fff);
    padding: 32px;
}

@media (max-width: 991px) {
    .salary-location {
        max-width: 100%;
        padding: 0 20px;
    }
}

.salary-location-content {
    gap: 20px;
    display: flex;
}

@media (max-width: 991px) {
    .salary-location-content {
        flex-direction: column;
        align-items: stretch;
        gap: 0px;
    }
}

.salary-column {
    display: flex;
    flex-direction: column;
    line-height: normal;
    width: 50%;
    margin-left: 0px;
}

@media (max-width: 991px) {
    .salary-column {
        width: 100%;
    }
}

.salary-info {
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    text-align: center;
    margin: auto 0;
}

@media (max-width: 991px) {
    .salary-info {
        margin-top: 40px;
    }
}

.salary-label {
    color: var(--Gray-900, #18191c);
    font: 500 16px/150% Inter, sans-serif;
}

.salary-amount {
    justify-content: center;
    display: flex;
    margin-top: 12px;
    flex-direction: column;
}

.salary-range {
    color: var(--Success-500, #0ba02c);
    font: 500 20px/120% Inter, sans-serif;
}

.salary-period {
    color: var(--Gray-500, #767f8c);
    margin-top: 4px;
    font: 400 14px/143% Inter, sans-serif;
}

.location-column {
    display: flex;
    flex-direction: column;
    line-height: normal;
    width: 50%;
    margin-left: 20px;
}

@media (max-width: 991px) {
    .location-column {
        width: 100%;
    }
}

.location-info {
    justify-content: center;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    font-size: 16px;
    text-align: center;
    line-height: 150%;
}

@media (max-width: 991px) {
    .location-info {
        margin-top: 40px;
    }
}

.location-icon {
    aspect-ratio: 1;
    object-fit: auto;
    object-position: center;
    width: 38px;
    align-self: center;
}

.location-details {
    justify-content: center;
    display: flex;
    margin-top: 8px;
    flex-direction: column;
}

.location-label {
    color: var(--Gray-900, #18191c);
    font-family: Inter, sans-serif;
    font-weight: 500;
}

.location-value {
    color: var(--Gray-500, #767f8c);
    font-family: Inter, sans-serif;
    font-weight: 400;
}

.job-overview {
    border-radius: 8px;
    border: 2px solid rgba(231, 240, 250, 1);
    background-color: var(--Gray-00, #fff);
    display: flex;
    margin-top: 32px;
    flex-direction: column;
    padding: 32px 0;
}

@media (max-width: 991px) {
    .job-overview {
        max-width: 100%;
    }
}

.overview-content {
    justify-content: center;
    display: flex;
    flex-direction: column;
    margin: 0 32px;
}

@media (max-width: 991px) {
    .overview-content {
        max-width: 100%;
        margin-right: 10px;
    }
}

.overview-title {
    color: var(--Gray-900, #18191c);
    font: 500 18px/156% Inter, sans-serif;
}

@media (max-width: 991px) {
    .overview-title {
        max-width: 100%;
    }
}

.overview-details {
    display: flex;
    margin-top: 20px;
    gap: 16px;
}

@media (max-width: 991px) {
    .overview-details {
        flex-wrap: wrap;
    }
}

.overview-item {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.overview-icon {
    aspect-ratio: 1;
    object-fit: auto;
    object-position: center;
    width: 32px;
}

.overview-text {
    display: flex;
    margin-top: 12px;
    flex-direction: column;
}

.overview-label {
    color: var(--Gray-500, #767f8c);
    text-transform: uppercase;
    font: 400 12px/150% Inter, sans-serif;
}

.overview-value {
    color: var(--Gray-900, #18191c);
    margin-top: 4px;
    font: 500 14px/143% Inter, sans-serif;
}

.overview-additional {
    display: flex;
    margin-top: 20px;
    gap: 20px;
    white-space: nowrap;
}

@media (max-width: 991px) {
    .overview-additional {
        flex-wrap: wrap;
        white-space: initial;
    }
}

.additional-item {
    display: flex;
    flex-direction: column;
}

@media (max-width: 991px) {
    .additional-item {
        white-space: initial;
    }
}

.additional-icon {
    aspect-ratio: 1;
    object-fit: auto;
    object-position: center;
    width: 32px;
}

.additional-text {
    display: flex;
    margin-top: 12px;
    flex-direction: column;
}

@media (max-width: 991px) {
    .additional-text {
        white-space: initial;
    }
}

.additional-label {
    color: var(--Gray-500, #767f8c);
    text-transform: uppercase;
    font: 400 12px/150% Inter, sans-serif;
}

.additional-value {
    color: var(--Gray-900, #18191c);
    margin-top: 4px;
    font: 500 14px/143% Inter, sans-serif;
}

.overview-divider {
    border: 2px solid rgba(231, 240, 250, 1);
    background-color: #e7f0fa;
    margin-top: 22px;
    height: 2px;
}

@media (max-width: 991px) {
    .overview-divider {
        max-width: 100%;
    }
}

.share-section {
    display: flex;
    margin-top: 24px;
    flex-direction: column;
    padding: 0 32px;
}

@media (max-width: 991px) {
    .share-section {
        max-width: 100%;
        padding: 0 20px;
    }
}

.share-title {
    color: var(--Gray-900, #18191c);
    font: 500 18px/156% Inter, sans-serif;
}

@media (max-width: 991px) {
    .share-title {
        max-width: 100%;
    }
}

.share-options {
    display: flex;
    margin-top: 8px;
    padding-right: 80px;
    gap: 8px;
}

@media (max-width: 991px) {
    .share-options {
        flex-wrap: wrap;
        padding-right: 20px;
    }
}

.share-link {
    justify-content: center;
    border-radius: 4px;
    background-color: var(--Primary-50, #e7f0fa);
    display: flex;
    gap: 6px;
    font-size: 16px;
    color: var(--Primary-500, #0a65cc);
    font-weight: 500;
    line-height: 150%;
    padding: 8px 16px;
}

.share-icon {
    aspect-ratio: 1;
    object-fit: auto;
    object-position: center;
    width: 24px;
}

.share-text {
    font-family: Inter, sans-serif;
}

.share-button {
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background-color: var(--Primary-50, #e7f0fa);
    display: flex;
    width: 40px;
    height: 40px;
    padding: 10px;
}

.share-button-icon {
    aspect-ratio: 1;
    object-fit: auto;
    object-position: center;
    width: 20px;
}

.share-button-facebook {
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background-color: var(--Primary-500, #0a65cc);
    display: flex;
    width: 40px;
    height: 40px;
    padding: 10px;
}

.share-button-twitter {
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background-color: var(--Primary-50, #e7f0fa);
    display: flex;
    width: 40px;
    height: 40px;
    padding: 10px;
}

.share-button-linkedin {
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background-color: var(--Primary-50, #e7f0fa);
    display: flex;
    width: 40px;
    height: 40px;
    padding: 8px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}